Update settings to re-use admin layout, one big navigation tree, improve settings forms

16 files changed, 139 insertions, 74 deletions

diff --git a/app/assets/stylesheets/about.scss b/app/assets/stylesheets/about.scss
index b7d903ddf..f29090f1a 100644
--- a/app/assets/stylesheets/about.scss
+++ b/app/assets/stylesheets/about.scss
@@ -12,7 +12,7 @@
   }
 
   h1 {
-    font: 46px/52px -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+    font: 46px/52px 'Roboto', sans-serif;
     font-weight: 600;
     margin-bottom: 20px;
     color: $color4;
diff --git a/app/assets/stylesheets/admin.scss b/app/assets/stylesheets/admin.scss
index 8d01ac4c4..8de42d680 100644
--- a/app/assets/stylesheets/admin.scss
+++ b/app/assets/stylesheets/admin.scss
@@ -1,16 +1,20 @@
 .admin-wrapper {
-  width: 100%;
+  display: flex;
+  justify-content: center;
   height: 100%;
-  position: fixed;
-  background: darken($color1, 2%);
-  overflow-y: scroll;
+
+  .sidebar-wrapper {
+    flex: 1;
+    height: 100%;
+    background: $color1;
+    display: flex;
+    justify-content: flex-end;
+  }
 
   .sidebar {
     width: 240px;
-    position: fixed;
-    left: 0;
     height: 100%;
-    background: $color1;
+    padding: 20px 0;
 
     .logo {
       display: block;
@@ -21,6 +25,8 @@
 
     ul {
       list-style: none;
+      border-radius: 4px 0 0 4px;
+      overflow: hidden;
 
       a {
         display: block;
@@ -28,6 +34,7 @@
         color: rgba($color5, 0.7);
         text-decoration: none;
         transition: all 200ms linear;
+        border-radius: 4px 0 0 4px;
 
         i.fa {
           margin-right: 5px;
@@ -40,27 +47,72 @@
         }
 
         &.selected {
-          color: $color5;
-          background-color: $color4;
+          background: darken($color1, 2%);
+          border-radius: 4px 0 0 0;
+        }
+      }
+
+      ul {
+        background: darken($color1, 4%);
+        border-radius: 0 0 0 4px;
+
+        a {
+          border: 0;
 
-          &:hover {
-            background-color: lighten($color4, 5%);
+          &.selected {
+            color: $color5;
+            background-color: $color4;
+            border-bottom: 0;
+            border-radius: 0;
+
+            &:hover {
+              background-color: lighten($color4, 5%);
+            }
           }
         }
       }
     }
   }
 
+  .content-wrapper {
+    flex: 2;
+  }
+
   .content {
-    margin-left: 240px;
-    padding: 15px;
+    max-width: 700px;
+    padding: 20px 15px;
+    padding-top: 60px;
+    padding-left: 25px;
+
+    h2 {
+      color: $color2;
+      font-size: 24px;
+      line-height: 28px;
+      font-weight: 400;
+      margin-bottom: 40px;
+    }
+
+    p {
+      font-size: 14px;
+      line-height: 18px;
+      color: $color2;
+      margin-bottom: 20px;
+
+      strong {
+        color: $color5;
+        font-weight: 500;
+      }
+    }
+  }
+
+  .simple_form {
+    max-width: 400px;
   }
 }
 
 .filters {
   display: flex;
   margin-bottom: 20px;
-  padding-left: 8px;
 
   .filter-subset {
     flex: 0 0 auto;
diff --git a/app/assets/stylesheets/application.scss b/app/assets/stylesheets/application.scss
index 0bdff6186..c4c876e30 100644
--- a/app/assets/stylesheets/application.scss
+++ b/app/assets/stylesheets/application.scss
@@ -115,6 +115,7 @@ body {
     width: 100%;
     height: 100%;
     padding: 0;
+    background: $color1;
   }
 
   &.embed {
@@ -129,6 +130,14 @@ body {
     }
   }
 
+  &.admin {
+    background: darken($color1, 4%);
+    position: fixed;
+    width: 100%;
+    height: 100%;
+    padding: 0;
+  }
+
   @media screen and (max-width: 360px) {
     padding-bottom: 0;
   }
diff --git a/app/assets/stylesheets/forms.scss b/app/assets/stylesheets/forms.scss
index 560388f8f..a97a767e0 100644
--- a/app/assets/stylesheets/forms.scss
+++ b/app/assets/stylesheets/forms.scss
@@ -7,18 +7,6 @@ code {
   max-width: 400px;
   padding: 20px;
   margin: 0 auto;
-
-  p {
-    font-size: 14px;
-    line-height: 18px;
-    color: $color2;
-    margin-bottom: 20px;
-
-    strong {
-      color: $color5;
-      font-weight: 500;
-    }
-  }
 }
 
 .simple_form {
@@ -28,28 +16,35 @@ code {
 
   .hint {
     display: block;
-    color: rgba($color5, 0.8);
+    color: $color3;
     font-size: 12px;
+    margin-top: 4px;
+  }
+
+  .label_input {
+    display: flex;
+
+    label {
+      flex: 0 0 auto;
+      width: 100px;
+    }
+
+    input {
+      flex: 1 1 auto;
+    }
   }
 
   .input.file, .input.select {
     padding: 15px 0;
     margin-bottom: 0;
-    display: flex;
 
     label {
       font-family: inherit;
       font-size: 16px;
       color: $color5;
-      width: 100px;
       display: block;
-      flex: 0 0 auto;
       padding-top: 5px;
     }
-
-    input[type=file], select {
-      flex: 1 1 auto;
-    }
   }
 
   .fields-group {
@@ -64,6 +59,7 @@ code {
       font-size: 14px;
       color: white;
       display: block;
+      width: auto;
     }
 
     label.checkbox {
@@ -80,6 +76,7 @@ code {
 
     .hint {
       padding-left: 25px;
+      margin-left: 0;
     }
   }
 
@@ -116,13 +113,19 @@ code {
   }
 
   .input.field_with_errors {
+    label {
+      color: $color6;
+    }
+
     input[type=text], input[type=email], input[type=password] {
       border-bottom-color: $color6;
     }
 
     .error {
+      display: block;
       font-weight: 500;
       color: $color6;
+      margin-top: 4px;
     }
   }
 
diff --git a/app/controllers/auth/registrations_controller.rb b/app/controllers/auth/registrations_controller.rb
index 6ce4984bb..b7d019c24 100644
--- a/app/controllers/auth/registrations_controller.rb
+++ b/app/controllers/auth/registrations_controller.rb
@@ -2,6 +2,7 @@
 
 class Auth::RegistrationsController < Devise::RegistrationsController
   layout 'auth'
+  layout 'admin', only: [:edit]
 
   before_action :check_single_user_mode
   before_action :configure_sign_up_params, only: [:create]
diff --git a/app/controllers/settings/preferences_controller.rb b/app/controllers/settings/preferences_controller.rb
index f273b5f21..5ad825675 100644
--- a/app/controllers/settings/preferences_controller.rb
+++ b/app/controllers/settings/preferences_controller.rb
@@ -1,7 +1,7 @@
 # frozen_string_literal: true
 
 class Settings::PreferencesController < ApplicationController
-  layout 'auth'
+  layout 'admin'
 
   before_action :authenticate_user!
 
diff --git a/app/controllers/settings/profiles_controller.rb b/app/controllers/settings/profiles_controller.rb
index 4be549958..2b74b4e94 100644
--- a/app/controllers/settings/profiles_controller.rb
+++ b/app/controllers/settings/profiles_controller.rb
@@ -3,7 +3,7 @@
 class Settings::ProfilesController < ApplicationController
   include ObfuscateFilename
 
-  layout 'auth'
+  layout 'admin'
 
   before_action :authenticate_user!
   before_action :set_account
diff --git a/app/controllers/settings/two_factor_auths_controller.rb b/app/controllers/settings/two_factor_auths_controller.rb
index 66a82aab7..f34295cb9 100644
--- a/app/controllers/settings/two_factor_auths_controller.rb
+++ b/app/controllers/settings/two_factor_auths_controller.rb
@@ -1,7 +1,7 @@
 # frozen_string_literal: true
 
 class Settings::TwoFactorAuthsController < ApplicationController
-  layout 'auth'
+  layout 'admin'
 
   before_action :authenticate_user!
 
diff --git a/app/views/admin/accounts/index.html.haml b/app/views/admin/accounts/index.html.haml
index 99c2af576..a93aa9143 100644
--- a/app/views/admin/accounts/index.html.haml
+++ b/app/views/admin/accounts/index.html.haml
@@ -54,8 +54,8 @@
           - else
             %i.fa.fa-times
         %td
-          = table_link_to 'circle', 'Open in web', web_path("accounts/#{account.id}")
-          = table_link_to 'globe', 'Open public', TagManager.instance.url_for(account)
+          = table_link_to 'circle', 'Web', web_path("accounts/#{account.id}")
+          = table_link_to 'globe', 'Public', TagManager.instance.url_for(account)
           = table_link_to 'pencil', 'Edit', admin_account_path(account.id)
 
 = will_paginate @accounts, pagination_options
diff --git a/app/views/admin/accounts/show.html.haml b/app/views/admin/accounts/show.html.haml
index de63dd7f9..7d3f449e5 100644
--- a/app/views/admin/accounts/show.html.haml
+++ b/app/views/admin/accounts/show.html.haml
@@ -1,3 +1,6 @@
+- content_for :page_title do
+  = @account.acct
+
 %table.table
   %tbody
     %tr
diff --git a/app/views/auth/registrations/edit.html.haml b/app/views/auth/registrations/edit.html.haml
index 91e0fe142..39b726f9c 100644
--- a/app/views/auth/registrations/edit.html.haml
+++ b/app/views/auth/registrations/edit.html.haml
@@ -11,5 +11,3 @@
 
   .actions
     = f.button :button, t('generic.save_changes'), type: :submit
-
-.form-footer= render "settings/shared/links"
diff --git a/app/views/layouts/admin.html.haml b/app/views/layouts/admin.html.haml
index 11f76a1de..750d6036f 100644
--- a/app/views/layouts/admin.html.haml
+++ b/app/views/layouts/admin.html.haml
@@ -1,14 +1,17 @@
 - content_for :header_tags do
   = javascript_include_tag 'application_public'
-  
+
 - content_for :content do
   .admin-wrapper
-    .sidebar
-      = link_to root_path do
-        = image_tag 'logo.png', class: 'logo'
+    .sidebar-wrapper
+      .sidebar
+        = link_to root_path do
+          = image_tag 'logo.png', class: 'logo'
 
-      = render_navigation
-    .content
-      = yield
+        = render_navigation
+    .content-wrapper
+      .content
+        %h2= yield :page_title
+        = yield
 
-= render template: "layouts/application"
+= render template: "layouts/application", locals: { body_classes: 'admin' }
diff --git a/app/views/layouts/application.html.haml b/app/views/layouts/application.html.haml
index 5b5239dd5..e122e1c55 100644
--- a/app/views/layouts/application.html.haml
+++ b/app/views/layouts/application.html.haml
@@ -20,5 +20,7 @@
 
     = yield :header_tags
 
-  %body{ class: @body_classes }
+  - body_classes ||= @body_classes
+
+  %body{ class: body_classes }
     = content_for?(:content) ? yield(:content) : yield
diff --git a/app/views/settings/preferences/show.html.haml b/app/views/settings/preferences/show.html.haml
index a9a1d21ac..747977f9c 100644
--- a/app/views/settings/preferences/show.html.haml
+++ b/app/views/settings/preferences/show.html.haml
@@ -4,14 +4,16 @@
 = simple_form_for current_user, url: settings_preferences_path, html: { method: :put } do |f|
   = render 'shared/error_messages', object: current_user
 
-  = f.input :locale, collection: I18n.available_locales, wrapper: :with_label, include_blank: false, label_method: lambda { |locale| human_locale(locale) }
+  .fields-group
+    = f.input :locale, collection: I18n.available_locales, wrapper: :with_label, include_blank: false, label_method: lambda { |locale| human_locale(locale) }
 
-  = f.simple_fields_for :notification_emails, hash_to_object(current_user.settings.notification_emails) do |ff|
-    = ff.input :follow, as: :boolean, wrapper: :with_label
-    = ff.input :follow_request, as: :boolean, wrapper: :with_label
-    = ff.input :reblog, as: :boolean, wrapper: :with_label
-    = ff.input :favourite, as: :boolean, wrapper: :with_label
-    = ff.input :mention, as: :boolean, wrapper: :with_label
+  .fields-group
+    = f.simple_fields_for :notification_emails, hash_to_object(current_user.settings.notification_emails) do |ff|
+      = ff.input :follow, as: :boolean, wrapper: :with_label
+      = ff.input :follow_request, as: :boolean, wrapper: :with_label
+      = ff.input :reblog, as: :boolean, wrapper: :with_label
+      = ff.input :favourite, as: :boolean, wrapper: :with_label
+      = ff.input :mention, as: :boolean, wrapper: :with_label
 
   = f.simple_fields_for :interactions, hash_to_object(current_user.settings.interactions) do |ff|
     = ff.input :must_be_follower, as: :boolean, wrapper: :with_label
@@ -19,5 +21,3 @@
 
   .actions
     = f.button :button, t('generic.save_changes'), type: :submit
-
-.form-footer= render "settings/shared/links"
diff --git a/app/views/settings/profiles/show.html.haml b/app/views/settings/profiles/show.html.haml
index 6bb458aa2..b946853b1 100644
--- a/app/views/settings/profiles/show.html.haml
+++ b/app/views/settings/profiles/show.html.haml
@@ -7,12 +7,10 @@
   .fields-group
     = f.input :display_name, placeholder: t('simple_form.labels.defaults.display_name')
     = f.input :note, placeholder: t('simple_form.labels.defaults.note')
-    = f.input :avatar, wrapper: :with_label
-    = f.input :header, wrapper: :with_label
+    = f.input :avatar, wrapper: :with_label, hint: t('simple_form.hints.defaults.avatar')
+    = f.input :header, wrapper: :with_label, hint: t('simple_form.hints.defaults.header')
 
   = f.input :locked, as: :boolean, wrapper: :with_label, hint: t('simple_form.hints.defaults.locked')
 
   .actions
     = f.button :button, t('generic.save_changes'), type: :submit
-
-.form-footer= render "settings/shared/links"
diff --git a/app/views/settings/two_factor_auths/show.html.haml b/app/views/settings/two_factor_auths/show.html.haml
index 5070bb9d4..bad359f8f 100644
--- a/app/views/settings/two_factor_auths/show.html.haml
+++ b/app/views/settings/two_factor_auths/show.html.haml
@@ -1,17 +1,13 @@
 - content_for :page_title do
   = t('settings.two_factor_auth')
 
-- if current_user.otp_required_for_login
-  %p= t('two_factor_auth.instructions_html')
+.simple_form
+  - if current_user.otp_required_for_login
+    %p= t('two_factor_auth.instructions_html')
 
-  .qr-code= raw @qrcode.as_svg(padding: 0, module_size: 5)
+    .qr-code= raw @qrcode.as_svg(padding: 0, module_size: 5)
 
-  .simple_form
     = link_to t('two_factor_auth.disable'), disable_settings_two_factor_auth_path, data: { method: 'POST' }, class: 'block-button'
-- else
-  %p= t('two_factor_auth.description_html')
-
-  .simple_form
+  - else
+    %p= t('two_factor_auth.description_html')
     = link_to t('two_factor_auth.enable'), enable_settings_two_factor_auth_path, data: { method: 'POST' }, class: 'block-button'
-
-.form-footer= render "settings/shared/links"