Style updates for personal access token form

4 files changed, 26 insertions, 23 deletions

diff --git a/app/assets/stylesheets/framework/forms.scss b/app/assets/stylesheets/framework/forms.scss
index 2b2e6d69e33..282e424fc38 100644
--- a/app/assets/stylesheets/framework/forms.scss
+++ b/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;
+  }
+}
diff --git a/app/assets/stylesheets/pages/settings.scss b/app/assets/stylesheets/pages/settings.scss
index 2f28031b9c8..e264b06c4b2 100644
--- a/app/assets/stylesheets/pages/settings.scss
+++ b/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;
 }
diff --git a/app/views/shared/_personal_access_tokens_form.html.haml b/app/views/shared/_personal_access_tokens_form.html.haml
index b8b1f4ca42f..28407b543b9 100644
--- a/app/views/shared/_personal_access_tokens_form.html.haml
+++ b/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
+  .row
+    .form-group.col-md-6
+      = 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 :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'
diff --git a/app/views/shared/tokens/_scopes_form.html.haml b/app/views/shared/tokens/_scopes_form.html.haml
index e5c82962f82..dcb3fca23f2 100644
--- a/app/views/shared/tokens/_scopes_form.html.haml
+++ b/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]