Update UI of admin appearance settings

Updates the layout of the admin appearance settings to be consistent
with other settings pages across GitLab

app/views/admin/appearances/_form.html.haml

-= form_for @appearance, url: admin_appearances_path do |f|
+= form_for @appearance, url: admin_appearances_path, html: { class: 'prepend-top-default' } do |f|
   = form_errors(@appearance)
 
-  %fieldset.app_logo
-    %legend
-      Navigation bar:
-  .form-group.row
-    = f.label :header_logo, 'Header logo', class: 'col-sm-2 col-form-label pt-0'
-    .col-sm-10
-      - if @appearance.header_logo?
-        = image_tag @appearance.header_logo_path, class: 'appearance-light-logo-preview'
-        - if @appearance.persisted?
-          %br
-          = link_to 'Remove header logo', header_logos_admin_appearances_path, data: { confirm: "Header logo will be removed. Are you sure?"}, method: :delete, class: "btn btn-inverted btn-remove btn-sm remove-logo"
-        %hr
-      = f.hidden_field :header_logo_cache
-      = f.file_field :header_logo, class: ""
-      .hint
-        Maximum file size is 1MB. Pages are optimized for a 28px tall header logo
 
-  %fieldset.app_logo
-    %legend
-      Favicon:
-  .form-group.row
-    = f.label :favicon, 'Favicon', class: 'col-sm-2 col-form-label pt-0'
-    .col-sm-10
-      - if @appearance.favicon?
-        = image_tag @appearance.favicon_path, class: 'appearance-light-logo-preview'
-        - if @appearance.persisted?
-          %br
-          = link_to 'Remove favicon', favicon_admin_appearances_path, data: { confirm: "Favicon will be removed. Are you sure?"}, method: :delete, class: "btn btn-inverted btn-remove btn-sm remove-logo"
-        %hr
-      = f.hidden_field :favicon_cache
-      = f.file_field :favicon, class: ''
-      .hint
-        Maximum file size is 1MB. Image size must be 32x32px. Allowed image formats are #{favicon_extension_whitelist}.
-        %br
-        Images with incorrect dimensions are not resized automatically, and may result in unexpected behavior.
+  .row
+    .col-lg-4.profile-settings-sidebar
+      %h4.prepend-top-0 Navigation bar
+
+    .col-lg-8
+      .form-group
+        = f.label :header_logo, 'Header logo', class: 'col-form-label label-bold pt-0'
+        %p
+          - if @appearance.header_logo?
+            = image_tag @appearance.header_logo_path, class: 'appearance-light-logo-preview'
+            - if @appearance.persisted?
+              %br
+              = link_to 'Remove header logo', header_logos_admin_appearances_path, data: { confirm: "Header logo will be removed. Are you sure?"}, method: :delete, class: "btn btn-inverted btn-remove btn-sm remove-logo"
+            %hr
+          = f.hidden_field :header_logo_cache
+          = f.file_field :header_logo, class: ""
+          .hint
+            Maximum file size is 1MB. Pages are optimized for a 28px tall header logo
+  %hr
+  .row
+    .col-lg-4.profile-settings-sidebar
+      %h4.prepend-top-0 Favicon
+
+    .col-lg-8
+      .form-group
+        = f.label :favicon, 'Favicon', class: 'col-form-label label-bold pt-0'
+        %p
+          - if @appearance.favicon?
+            = image_tag @appearance.favicon_path, class: 'appearance-light-logo-preview'
+            - if @appearance.persisted?
+              %br
+              = link_to 'Remove favicon', favicon_admin_appearances_path, data: { confirm: "Favicon will be removed. Are you sure?"}, method: :delete, class: "btn btn-inverted btn-remove btn-sm remove-logo"
+            %hr
+          = f.hidden_field :favicon_cache
+          = f.file_field :favicon, class: ''
+          .hint
+            Maximum file size is 1MB. Image size must be 32x32px. Allowed image formats are #{favicon_extension_whitelist}.
+            %br
+            Images with incorrect dimensions are not resized automatically, and may result in unexpected behavior.
 
   = render partial: 'admin/appearances/system_header_footer_form', locals: { form: f }
 
-  %fieldset.sign-in
-    %legend
-      Sign in/Sign up pages:
-  .form-group.row
-    = f.label :title, class: 'col-sm-2 col-form-label'
-    .col-sm-10
-      = f.text_field :title, class: "form-control"
-  .form-group.row
-    = f.label :description, class: 'col-sm-2 col-form-label'
-    .col-sm-10
-      = f.text_area :description, class: "form-control", rows: 10
-      .hint
-        Description parsed with #{link_to "GitLab Flavored Markdown", help_page_path('user/markdown'), target: '_blank'}.
-  .form-group.row
-    = f.label :logo, class: 'col-sm-2 col-form-label pt-0'
-    .col-sm-10
-      - if @appearance.logo?
-        = image_tag @appearance.logo_path, class: 'appearance-logo-preview'
-        - if @appearance.persisted?
-          %br
-          = link_to 'Remove logo', logo_admin_appearances_path, data: { confirm: "Logo will be removed. Are you sure?"}, method: :delete, class: "btn btn-inverted btn-remove btn-sm remove-logo"
-        %hr
-      = f.hidden_field :logo_cache
-      = f.file_field :logo, class: ""
-      .hint
-        Maximum file size is 1MB. Pages are optimized for a 640x360 px logo.
+  %hr
+  .row
+    .col-lg-4.profile-settings-sidebar
+      %h4.prepend-top-0 Sign in/Sign up pages
+
+    .col-lg-8
+      .form-group
+        = f.label :title, class: 'col-form-label label-bold'
+        = f.text_field :title, class: "form-control"
+      .form-group
+        = f.label :description, class: 'col-form-label label-bold'
+        = f.text_area :description, class: "form-control", rows: 10
+        .hint
+          Description parsed with #{link_to "GitLab Flavored Markdown", help_page_path('user/markdown'), target: '_blank'}.
+      .form-group
+        = f.label :logo, class: 'col-form-label label-bold pt-0'
+        %p
+          - if @appearance.logo?
+            = image_tag @appearance.logo_path, class: 'appearance-logo-preview'
+            - if @appearance.persisted?
+              %br
+              = link_to 'Remove logo', logo_admin_appearances_path, data: { confirm: "Logo will be removed. Are you sure?"}, method: :delete, class: "btn btn-inverted btn-remove btn-sm remove-logo"
+            %hr
+          = f.hidden_field :logo_cache
+          = f.file_field :logo, class: ""
+          .hint
+            Maximum file size is 1MB. Pages are optimized for a 640x360 px logo.
 
-  %fieldset
-    %legend
-      New project pages:
-  .form-group.row
-    = f.label :new_project_guidelines, class: 'col-sm-2 col-form-label'
-    .col-sm-10
-      = f.text_area :new_project_guidelines, class: "form-control", rows: 10
-      .hint
-        Guidelines parsed with #{link_to "GitLab Flavored Markdown", help_page_path('user/markdown'), target: '_blank'}.
+  %hr
+  .row
+    .col-lg-4.profile-settings-sidebar
+      %h4.prepend-top-0 New project pages
 
-  .form-actions
-    = f.submit 'Save', class: 'btn btn-success append-right-10'
-    - if @appearance.persisted?
-      Preview last save:
-      = link_to 'Sign-in page', preview_sign_in_admin_appearances_path, class: 'btn', target: '_blank', rel: 'noopener noreferrer'
-      = link_to 'New project page', new_project_path, class: 'btn', target: '_blank', rel: 'noopener noreferrer'
+    .col-lg-8
+      .form-group
+        = f.label :new_project_guidelines, class: 'col-form-label label-bold'
+        %p
+          = f.text_area :new_project_guidelines, class: "form-control", rows: 10
+          .hint
+            Guidelines parsed with #{link_to "GitLab Flavored Markdown", help_page_path('user/markdown'), target: '_blank'}.
+
+      .prepend-top-default.append-bottom-default
+        = f.submit 'Update appearance settings', class: 'btn btn-success'
+        - if @appearance.persisted?
+          Preview last save:
+          = link_to 'Sign-in page', preview_sign_in_admin_appearances_path, class: 'btn', target: '_blank', rel: 'noopener noreferrer'
+          = link_to 'New project page', new_project_path, class: 'btn', target: '_blank', rel: 'noopener noreferrer'
 
-    - if @appearance.updated_at
-      %span.float-right
-        Last edit #{time_ago_with_tooltip(@appearance.updated_at)}
+        - if @appearance.updated_at
+          %span.float-right
+            Last edit #{time_ago_with_tooltip(@appearance.updated_at)}

app/views/admin/appearances/show.html.haml

 - page_title "Appearance"
-
-%h3.page-title
-  Appearance settings
-%p.light
-  You can modify the look and feel of GitLab here
-%hr
+- @content_class = "limit-container-width" unless fluid_layout
 
 = render 'form'

changelogs/unreleased/update-ui-admin-appearance.yml

+---
+title: Update UI for admin appearance settings
+merge_request: 24685
+author:
+type: other

ee/app/views/admin/appearances/_system_header_footer_form.html.haml

@@ -2,25 +2,24 @@
 
 - form = local_assigns.fetch(:form)
 
-%fieldset.system_header_footer
-  %legend
-    = _('System header and footer:')
-  .form-group.row
-    = form.label :header_message, _('Header message'), class: 'col-sm-2 col-form-label'
-    .col-sm-10
+%hr
+.row
+  .col-lg-4.profile-settings-sidebar
+    %h4.prepend-top-0
+      = _('System header and footer')
+
+  .col-lg-8
+    .form-group
+      = form.label :header_message, _('Header message'), class: 'col-form-label label-bold'
       = form.text_area :header_message, placeholder: _('State your message to activate'), class: "form-control js-autosize"
-  .form-group.row
-    = form.label :footer_message, _('Footer message'), class: 'col-sm-2 col-form-label'
-    .col-sm-10
+    .form-group
+      = form.label :footer_message, _('Footer message'), class: 'col-form-label label-bold'
       = form.text_area :footer_message, placeholder: _('State your message to activate'), class: "form-control js-autosize"
-  .form-group.row.js-toggle-colors-container
-    .col-sm-10.offset-sm-2
+    .form-group.js-toggle-colors-container
       = link_to _('Customize colors'), '#', class: 'js-toggle-colors-link'
-  .form-group.row.js-toggle-colors-container.hide
-    = form.label :message_background_color, _('Background Color'), class: 'col-sm-2 col-form-label'
-    .col-sm-10
+    .form-group.js-toggle-colors-container.hide
+      = form.label :message_background_color, _('Background Color'), class: 'col-form-label label-bold'
       = form.color_field :message_background_color, class: "form-control"
-  .form-group.row.js-toggle-colors-container.hide
-    = form.label :message_font_color, _('Font Color'), class: 'col-sm-2 col-form-label'
-    .col-sm-10
+    .form-group.js-toggle-colors-container.hide
+      = form.label :message_font_color, _('Font Color'), class: 'col-form-label label-bold'
       = form.color_field :message_font_color, class: "form-control"

locale/gitlab.pot

@@ -8930,7 +8930,7 @@ msgstr ""
 msgid "System Info"
 msgstr ""
 
-msgid "System header and footer:"
+msgid "System header and footer"
 msgstr ""
 
 msgid "System metrics (Custom)"

spec/features/admin/admin_appearance_spec.rb

@@ -10,10 +10,10 @@ describe 'Admin Appearance' do
     fill_in 'appearance_title', with: 'MyCompany'
     fill_in 'appearance_description', with: 'dev server'
     fill_in 'appearance_new_project_guidelines', with: 'Custom project guidelines'
-    click_button 'Save'
+    click_button 'Update appearance settings'
 
     expect(current_path).to eq admin_appearances_path
-    expect(page).to have_content 'Appearance settings'
+    expect(page).to have_content 'Appearance'
 
     expect(page).to have_field('appearance_title', with: 'MyCompany')
     expect(page).to have_field('appearance_description', with: 'dev server')
@@ -82,7 +82,7 @@ describe 'Admin Appearance' do
     visit admin_appearances_path
 
     attach_file(:appearance_logo, logo_fixture)
-    click_button 'Save'
+    click_button 'Update appearance settings'
     expect(page).to have_css(logo_selector)
 
     click_link 'Remove logo'
@@ -94,7 +94,7 @@ describe 'Admin Appearance' do
     visit admin_appearances_path
 
     attach_file(:appearance_header_logo, logo_fixture)
-    click_button 'Save'
+    click_button 'Update appearance settings'
     expect(page).to have_css(header_logo_selector)
 
     click_link 'Remove header logo'
@@ -106,7 +106,7 @@ describe 'Admin Appearance' do
     visit admin_appearances_path
 
     attach_file(:appearance_favicon, logo_fixture)
-    click_button 'Save'
+    click_button 'Update appearance settings'
 
     expect(page).to have_css('.appearance-light-logo-preview')
 
@@ -116,7 +116,7 @@ describe 'Admin Appearance' do
 
     # allowed file types
     attach_file(:appearance_favicon, Rails.root.join('spec', 'fixtures', 'sanitized.svg'))
-    click_button 'Save'
+    click_button 'Update appearance settings'
 
     expect(page).to have_content 'Favicon You are not allowed to upload "svg" files, allowed types: png, ico'
   end