Merge branch '47865-access-token-for-projects-fe' into 'master'

Style updates for personal access token form

See merge request gitlab-org/gitlab-ce!20052

app/assets/stylesheets/framework/forms.scss

@@ -243,3 +243,15 @@ label {
     }
   }
 }
+
+.input-icon-wrapper {
+  position: relative;
+
+  .input-icon-right {
+    position: absolute;
+    right: 0.8em;
+    top: 50%;
+    transform: translateY(-50%);
+    color: $theme-gray-600;
+  }
+}

app/assets/stylesheets/pages/settings.scss

@@ -255,25 +255,12 @@
   }
 }
-.modal-doorkeepr-auth,
-.doorkeeper-app-form {
-  .scope-description {
-    color: $theme-gray-700;
-  }
-}
-
 .modal-doorkeepr-auth {
   .modal-body {
     padding: $gl-padding;
   }
 }
-.doorkeeper-app-form {
-  .scope-description {
-    margin: 0 0 5px 17px;
-  }
-}
-
 .deprecated-service {
   cursor: default;
 }

app/views/shared/_personal_access_tokens_form.html.haml

@@ -9,13 +9,17 @@
   = form_errors(token)
-  .form-group
-    = f.label :name, class: 'label-light'
-    = f.text_field :name, class: "form-control", required: true
-  .form-group
-    = f.label :expires_at, class: 'label-light'
-    = f.text_field :expires_at, class: "datepicker form-control"
+  .row
+    .form-group.col-md-6
+      = f.label :name, class: 'label-light'
+      = f.text_field :name, class: "form-control", required: true
+  .row
+    .form-group.col-md-6
+      = f.label :expires_at, class: 'label-light'
+      .input-icon-wrapper
+        = f.text_field :expires_at, class: "datepicker form-control", placeholder: 'YYYY-MM-DD'
+        = icon('calendar', { class: 'input-icon-right' })
   .form-group
     = f.label :scopes, class: 'label-light'

app/views/shared/tokens/_scopes_form.html.haml

@@ -3,7 +3,7 @@
 - token = local_assigns.fetch(:token)
 - scopes.each do |scope|
-  %fieldset
-    = check_box_tag "#{prefix}[scopes][]", scope, token.scopes.include?(scope), id: "#{prefix}_scopes_#{scope}"
-    = label_tag ("#{prefix}_scopes_#{scope}"), scope, class: "label-light"
-    .scope-description= t scope, scope: [:doorkeeper, :scope_desc]
+  %fieldset.form-group.form-check
+    = check_box_tag "#{prefix}[scopes][]", scope, token.scopes.include?(scope), id: "#{prefix}_scopes_#{scope}", class: 'form-check-input'
+    = label_tag ("#{prefix}_scopes_#{scope}"), scope, class: 'label-light form-check-label'
+    .text-secondary= t scope, scope: [:doorkeeper, :scope_desc]