From b47c0deb48c944c3aca5782c8deb960c780c3ad0 Mon Sep 17 00:00:00 2001
From: Andreas Nedbal <andy@pixelde.su>
Date: Sun, 19 Apr 2020 21:08:17 +0200
Subject: [PATCH 001/172] Add cache volume for Rails caches

---
 docker-compose.yml | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/docker-compose.yml b/docker-compose.yml
index 90553f7d..42c43d33 100644
--- a/docker-compose.yml
+++ b/docker-compose.yml
@@ -12,6 +12,7 @@ services:
       - redis
     volumes:
       - ./:/app
+      - cache:/app/tmp/cache
     ports:
       - 3000:3000
 
@@ -26,4 +27,7 @@ services:
       - 5432:5432
     environment:
       POSTGRES_PASSWORD: justask
-      POSTGRES_DB: justask_development
\ No newline at end of file
+      POSTGRES_DB: justask_development
+
+volumes:
+  cache:
\ No newline at end of file

From 7f74e844f52a2daa1cbc1ce1a05e2e0e523bd685 Mon Sep 17 00:00:00 2001
From: Andreas Nedbal <andy@pixelde.su>
Date: Sun, 19 Apr 2020 21:08:58 +0200
Subject: [PATCH 002/172] Replace Bootstrap 3 with Bootstrap 4

---
 Gemfile                                       |  3 +--
 Gemfile.lock                                  | 13 ++++++------
 .../javascripts/application.js.erb.coffee     |  3 ++-
 app/assets/stylesheets/application.css.scss   |  9 +++------
 app/assets/stylesheets/base.css.scss          |  6 +++---
 app/assets/stylesheets/scss/user.scss         | 20 +++++++++----------
 6 files changed, 25 insertions(+), 29 deletions(-)

diff --git a/Gemfile b/Gemfile
index 88ed7c93..6c69ac18 100644
--- a/Gemfile
+++ b/Gemfile
@@ -19,8 +19,7 @@ gem 'jbuilder', '~> 2.10'
 gem 'bcrypt', '~> 3.1.7'
 
 gem 'haml', '~> 5.0'
-gem 'bootstrap-sass', '~> 3.4.0'
-gem 'bootswatch-rails'
+gem 'bootstrap', '~> 4.4', '>= 4.4.1'
 gem 'sweetalert-rails'
 gem 'will_paginate'
 gem 'will_paginate-bootstrap'
diff --git a/Gemfile.lock b/Gemfile.lock
index b21f3cef..698918cc 100644
--- a/Gemfile.lock
+++ b/Gemfile.lock
@@ -79,16 +79,15 @@ GEM
       erubi (>= 1.0.0)
       rack (>= 0.9.0)
     bindex (0.8.1)
-    bootstrap-sass (3.4.1)
-      autoprefixer-rails (>= 5.2.1)
-      sassc (>= 2.0.0)
+    bootstrap (4.4.1)
+      autoprefixer-rails (>= 9.1.0)
+      popper_js (>= 1.14.3, < 2)
+      sassc-rails (>= 2.0.0)
     bootstrap3-datetimepicker-rails (4.7.14)
       momentjs-rails (>= 2.8.1)
     bootstrap_form (4.4.0)
       actionpack (>= 5.0)
       activemodel (>= 5.0)
-    bootswatch-rails (3.3.5)
-      railties (>= 3.1)
     brakeman (4.8.1)
     buftok (0.2.0)
     builder (3.2.4)
@@ -331,6 +330,7 @@ GEM
       capybara (>= 2.1, < 4)
       cliver (~> 0.3.1)
       websocket-driver (>= 0.2.0)
+    popper_js (1.16.0)
     pry (0.13.1)
       coderay (~> 1.1)
       method_source (~> 1.0)
@@ -527,10 +527,9 @@ DEPENDENCIES
   bcrypt (~> 3.1.7)
   bcrypt_pbkdf (>= 1.0, < 2.0)
   better_errors
-  bootstrap-sass (~> 3.4.0)
+  bootstrap (~> 4.4, >= 4.4.1)
   bootstrap3-datetimepicker-rails (~> 4.7.14)
   bootstrap_form
-  bootswatch-rails
   brakeman
   byebug
   capistrano (~> 3.8)
diff --git a/app/assets/javascripts/application.js.erb.coffee b/app/assets/javascripts/application.js.erb.coffee
index b135cf66..b19d70d3 100644
--- a/app/assets/javascripts/application.js.erb.coffee
+++ b/app/assets/javascripts/application.js.erb.coffee
@@ -1,8 +1,9 @@
-#= require jquery
+#= require jquery3
 #= require jquery_ujs
 #= require jquery.turbolinks
 #= require jquery.arctic_scroll
 #= require turbolinks
+#= require popper
 #= require bootstrap
 #= require nprogress
 #= require nprogress-turbolinks
diff --git a/app/assets/stylesheets/application.css.scss b/app/assets/stylesheets/application.css.scss
index 85e898c5..4b60bbf4 100644
--- a/app/assets/stylesheets/application.css.scss
+++ b/app/assets/stylesheets/application.css.scss
@@ -16,7 +16,7 @@ $font-family-serif:       Georgia, "DejaVu Serif", "Times New Roman", Times, ser
 $font-family-monospace:   "PragmataPro", Monaco, "Ubuntu Mono", Menlo, "DejaVu Sans Mono", monospace;
 $font-family-base:        $font-family-sans-serif;
 
-$font-size-base:          14px;
+$font-size-base:          1rem;
 $font-size-large:         ceil(($font-size-base * 1.25)); // ~18px
 $font-size-small:         ceil(($font-size-base * 0.85)); // ~12px
 
@@ -27,6 +27,7 @@ $font-size-h4:            ceil(($font-size-base * 1.25)); // ~18px
 $font-size-h5:            $font-size-base;
 $font-size-h6:            ceil(($font-size-base * 0.85)); // ~12px
 
+$gray: #e2e2e2;
 $brand-primary: #5e35b1;
 $navbar-inverse-bg: #5e35b1;
 $navbar-inverse-link-color: #ffffff;
@@ -44,19 +45,15 @@ $navbar-inverse-toggle-hover-bg: #512da8;
 $navbar-inverse-toggle-icon-bar-bg: #7e57c2;
 $navbar-inverse-toggle-border-color: #512da8;
 
-@import "bootswatch/cosmo/variables";
-
 @import "bootstrap";
 
-body { padding-top: $navbar-height; }
+body { padding-top: 50px; }
 
 @import 'bootstrap-datetimepicker';
 .remove-native-picker::-webkit-calendar-picker-indicator{
   display: none
 }
 
-@import "bootswatch/cosmo/bootswatch";
-
 @import "base";
 
 @import "font-awesome";
diff --git a/app/assets/stylesheets/base.css.scss b/app/assets/stylesheets/base.css.scss
index 54ea3ee1..4c5c3eb6 100644
--- a/app/assets/stylesheets/base.css.scss
+++ b/app/assets/stylesheets/base.css.scss
@@ -107,7 +107,7 @@ body {
 }
 
 .j2-delete {
-  color: $brand-danger;
+  color: theme-color('danger');
   text-decoration: none;
 }
 
@@ -115,7 +115,7 @@ body {
   margin-bottom: 0px;
 }
 
-@media (max-width: $screen-xs-max) {
+@include media-breakpoint-down(xs) {
   .j2-col-reset {
     padding-left: 0px;
     padding-right: 0px;
@@ -277,7 +277,7 @@ body {
 }
 
 .colored-icon:before {
-  color: $brand-primary;
+  color: theme-color('primary');
 }
 
 .colored-icon {
diff --git a/app/assets/stylesheets/scss/user.scss b/app/assets/stylesheets/scss/user.scss
index 0f0adbfb..781ad48d 100644
--- a/app/assets/stylesheets/scss/user.scss
+++ b/app/assets/stylesheets/scss/user.scss
@@ -42,8 +42,8 @@
 }
 
 .profile--panel .panel-heading {
-  color: $brand-primary;
-  border-bottom: 2px solid $brand-primary;
+  color: theme-color('primary');
+  border-bottom: 2px solid theme-color('primary');
   background-color: #fff;
   text-transform: uppercase;
 }
@@ -53,15 +53,15 @@
 }
 
 .inbox--panel .panel-heading {
-  color: $brand-info;
-  border-bottom: 2px solid $brand-info;
+  color: theme-color('info');
+  border-bottom: 2px solid theme-color('info');
   background-color: #fff;
   text-transform: uppercase;
 }
 
 .warning--panel .panel-heading {
-  color: $brand-danger;
-  border-bottom: 2px solid $brand-danger;
+  color: theme-color('danger');
+  border-bottom: 2px solid theme-color('danger');
   background-color: #fff;
   text-transform: uppercase;
 }
@@ -87,11 +87,11 @@
   color: #fff;
 }
 
-$colours: danger $brand-danger,
+$colours: danger theme-color('danger'),
           default #BBB,
-          success $brand-success,
-          warning $brand-warning,
-          primary $brand-primary,
+          success theme-color('success'),
+          warning theme-color('warning'),
+          primary theme-color('primary'),
           info #2980b9;
 
 @each $colour in $colours {

From 2b39888679aad4456724a275de4c79e9c8eafe19 Mon Sep 17 00:00:00 2001
From: Andreas Nedbal <andy@pixelde.su>
Date: Sun, 19 Apr 2020 23:03:34 +0200
Subject: [PATCH 003/172] Adjust base navigations Bootstrap 4

---
 app/helpers/application_helper.rb             |  2 +-
 app/views/layouts/_header.html.haml           | 37 ++++++-------------
 .../moderation/_moderation_nav.html.haml      | 13 +++----
 app/views/static/_mobile_nav.html.haml        | 13 +++----
 4 files changed, 23 insertions(+), 42 deletions(-)

diff --git a/app/helpers/application_helper.rb b/app/helpers/application_helper.rb
index dd1c7651..4997da15 100644
--- a/app/helpers/application_helper.rb
+++ b/app/helpers/application_helper.rb
@@ -18,7 +18,7 @@ module ApplicationHelper
         }"))}"
     end
 
-    content_tag(:li, link_to(body.html_safe, path), class: ("#{'active ' if current_page? path}#{options[:class]}"))
+    content_tag(:li, link_to(body.html_safe, path, class: "nav-link"), class: ("#{'nav-item active ' if current_page? path}#{options[:class]}"))
   end
 
   def list_group_item(body, path, options = {})
diff --git a/app/views/layouts/_header.html.haml b/app/views/layouts/_header.html.haml
index fc88d814..bbd1d14d 100644
--- a/app/views/layouts/_header.html.haml
+++ b/app/views/layouts/_header.html.haml
@@ -1,38 +1,25 @@
-%nav.navbar.navbar-inverse.navbar-fixed-top{role: "navigation"}
+%nav.navbar.navbar-light.navbar-expand-lg.bg-primary.fixed-top{role: "navigation"}
   .container{class: ios_web_app? ? "ios-web-app" : ''}
-    .navbar-header
-      %button.navbar-toggle{"data-target" => "#j2-main-navbar-collapse", "data-toggle" => "collapse", type: "button"}
-        %span.sr-only Toggle navigation
-        - if user_signed_in?
-          - unless inbox_count.nil? or notification_count.nil?
-            %span.icon-bar.navbar--inbox-animation
-            %span.icon-bar.navbar--inbox-animation
-            %span.icon-bar.navbar--inbox-animation
-          - else
-            %span.icon-bar
-            %span.icon-bar
-            %span.icon-bar
-        - else
-          %span.icon-bar
-          %span.icon-bar
-          %span.icon-bar
-      %a.navbar-brand{href: "/"}= APP_CONFIG['site_name']
+    %a.navbar-brand{href: "/"}= APP_CONFIG['site_name']
+    %button.navbar-toggler{"data-target" => "#j2-main-navbar-collapse", "data-toggle" => "collapse", type: "button"}
+      %span.sr-only Toggle navigation
+      %span.navbar-toggler-icon
     #j2-main-navbar-collapse.collapse.navbar-collapse
       - if user_signed_in?
-        %ul.nav.navbar-nav
+        %ul.nav.navbar-nav.mr-auto
           = nav_entry t('views.navigation.timeline'), root_path
           = nav_entry t('views.navigation.inbox'), "/inbox", badge: inbox_count
           - if APP_CONFIG.dig(:features, :discover, :enabled) || current_user.mod?
             = nav_entry t('views.navigation.discover'), discover_path
-        %ul.nav.navbar-nav.navbar-right
+        %ul.nav.navbar-nav
           - unless @user.nil?
             - unless @user == current_user
-              %li.hidden-xs{"data-toggle" => "tooltip", "data-placement" => "bottom", title: t('views.actions.group')}
-                %a{href: '#', data: { target: "#modal-group-memberships", toggle: :modal }}
+              %li.nav-item.hidden-xs{"data-toggle" => "tooltip", "data-placement" => "bottom", title: t('views.actions.group')}
+                %a.nav-link{href: '#', data: { target: "#modal-group-memberships", toggle: :modal }}
                   %i.fa.fa-users.hidden-xs
-                  %span.visible-xs= t('views.actions.group')
+                  %span.d-none.d-sm-inline.d-md-none= t('views.actions.group')
           = render "layouts/notifications"
-          %li.hidden-xs{"data-toggle" => "tooltip", "data-placement" => "bottom", title: t('views.actions.ask_question')}
+          %li.nav-item.hidden-xs{"data-toggle" => "tooltip", "data-placement" => "bottom", title: t('views.actions.ask_question')}
             .btn.btn-link.navbar-btn{name: "toggle-all-ask", "data-target" => "#modal-ask-followers", "data-toggle" => "modal", :type => "button"}
               %i.fa.fa-pencil-square-o
           = render "layouts/profile"
@@ -43,5 +30,5 @@
 
 - if user_signed_in?
   = render 'shared/modal_ask_followers'
-  %button.btn.btn-primary.btn-fab.visible-xs{"data-target" => "#modal-ask-followers", "data-toggle" => "modal", :type => "button"}
+  %button.btn.btn-primary.btn-fab.d-block.d-sm-none{"data-target" => "#modal-ask-followers", "data-toggle" => "modal", :type => "button"}
     %i.fa.fa-pencil-square-o
diff --git a/app/views/moderation/_moderation_nav.html.haml b/app/views/moderation/_moderation_nav.html.haml
index 434c725a..d214c66a 100644
--- a/app/views/moderation/_moderation_nav.html.haml
+++ b/app/views/moderation/_moderation_nav.html.haml
@@ -1,12 +1,9 @@
-%nav.navbar.navbar-default.navbar-static-top.j2-navbar.visible-xs{role: "navigation"}
+%nav.navbar.navbar-default.navbar-static-top.j2-navbar.d-flex.d-sm-none{role: "navigation"}
   .container
-    .navbar-header
-      %button.navbar-toggle{"data-target" => "#j2-tl-navbar-collapse", "data-toggle" => "collapse", type: "button"}
-        %span.sr-only Toggle navigation
-        %span.icon-bar
-        %span.icon-bar
-        %span.icon-bar
-      %a.navbar-brand{href: moderation_path} Moderation
+    %a.navbar-brand{href: moderation_path} Moderation
+    %button.navbar-toggler{"data-target" => "#j2-tl-navbar-collapse", "data-toggle" => "collapse", type: "button"}
+      %span.sr-only Toggle navigation
+      %span.navbar-toggler-icon
     #j2-tl-navbar-collapse.collapse.navbar-collapse
       %ul.nav.navbar-nav
         = nav_entry t('views.moderation.tabs.all'), moderation_path
diff --git a/app/views/static/_mobile_nav.html.haml b/app/views/static/_mobile_nav.html.haml
index 24304d95..379ca143 100644
--- a/app/views/static/_mobile_nav.html.haml
+++ b/app/views/static/_mobile_nav.html.haml
@@ -1,12 +1,9 @@
-%nav.navbar.navbar-default.navbar-static-top.j2-navbar.visible-xs{role: "navigation"}
+%nav.navbar.navbar-light.navbar-static-top.j2-navbar.d-flex.d-sm-none.bg-default{role: "navigation"}
   .container
-    .navbar-header
-      %button.navbar-toggle{"data-target" => "#j2-tl-navbar-collapse", "data-toggle" => "collapse", type: "button"}
-        %span.sr-only Toggle navigation
-        %span.icon-bar
-        %span.icon-bar
-        %span.icon-bar
-      %a.navbar-brand{href: "/"} Timelines
+    %a.navbar-brand{href: "/"} Timelines
+    %button.navbar-toggler{"data-target" => "#j2-tl-navbar-collapse", "data-toggle" => "collapse", type: "button"}
+      %span.sr-only Toggle navigation
+      %span.navbar-toggler-icon
     #j2-tl-navbar-collapse.collapse.navbar-collapse
       %ul.nav.navbar-nav
         = nav_entry "Public", public_timeline_path

From 33cd5b57a3e4b5560133923e46158967813159d8 Mon Sep 17 00:00:00 2001
From: Andreas Nedbal <andy@pixelde.su>
Date: Sun, 19 Apr 2020 23:09:41 +0200
Subject: [PATCH 004/172] Convert panel classes to card classes

---
 app/views/discover/_userbox.html.haml         |   4 +-
 app/views/inbox/_entry.html.haml              |   8 +-
 app/views/inbox/_sidebar.html.haml            |  32 +-
 .../moderation/_moderation_tabs.html.haml     |   2 +-
 app/views/moderation/_moderationbox.html.haml |   8 +-
 app/views/moderation/_userbox.html.haml       |   4 +-
 .../_notification_tabs.html.haml              |   6 +-
 app/views/notifications/index.html.haml       |   2 +-
 app/views/question/show.html.haml             |   8 +-
 app/views/services/index.html.haml            |  43 +--
 app/views/shared/_question.html.haml          |   4 +-
 app/views/shared/_question_header.haml        |   4 +-
 app/views/shared/_questionbox.html.haml       |   8 +-
 app/views/shared/_sidebar.html.haml           |  14 +-
 app/views/shared/_userbox.html.haml           |   4 +-
 app/views/static/about.html.haml              |  12 +-
 app/views/static/faq.html.haml                |   4 +-
 app/views/static/privacy_policy.html.haml     |   4 +-
 app/views/static/terms.html.haml              |   4 +-
 app/views/user/_account.html.haml             |  69 ++--
 app/views/user/_profile_info.html.haml        |   4 +-
 app/views/user/_settings_tabs.html.haml       |   2 +-
 app/views/user/_stats.html.haml               |   8 +-
 app/views/user/data.html.haml                 | 329 +++++++++---------
 app/views/user/edit.html.haml                 |  95 ++---
 app/views/user/edit_privacy.html.haml         |  21 +-
 app/views/user/edit_theme.html.haml           | 137 ++++----
 app/views/user/export.haml                    |  69 ++--
 28 files changed, 458 insertions(+), 451 deletions(-)

diff --git a/app/views/discover/_userbox.html.haml b/app/views/discover/_userbox.html.haml
index 6da53dca..2bbb3407 100644
--- a/app/views/discover/_userbox.html.haml
+++ b/app/views/discover/_userbox.html.haml
@@ -1,5 +1,5 @@
-.panel.panel-default.questionbox{data: { id: u.id }}
-  .panel-body
+.card.card-default.questionbox{data: { id: u.id }}
+  .card-body
     .media
       .pull-left
         %a{href: show_user_profile_path(u.screen_name)}
diff --git a/app/views/inbox/_entry.html.haml b/app/views/inbox/_entry.html.haml
index 68ea268d..dd509f5b 100644
--- a/app/views/inbox/_entry.html.haml
+++ b/app/views/inbox/_entry.html.haml
@@ -1,5 +1,5 @@
-.panel.inbox-box{class: "panel-#{i.new? ? 'primary' : 'default'}", data: { id: i.id }}
-  .panel-heading
+.card.inbox-box{class: "panel-#{i.new? ? 'primary' : 'default'}", data: { id: i.id }}
+  .card-header
     .media
       - unless i.question.author_is_anonymous
         %a.pull-left{href: show_user_profile_path(i.question.user.screen_name)}
@@ -13,7 +13,7 @@
               %a{href: show_user_question_path(i.question.user.screen_name, i.question.id)}
                 = pluralize(i.question.answer_count, t('views.inbox.entry.response'))
         %p.answerbox--question-text= i.question.content
-  .panel-body
+  .card-body
     %textarea.form-control{name: 'ib-answer', placeholder: t('views.placeholder.inbox'), data: { id: i.id }}
     %br/
     %button.btn.btn-success{name: 'ib-answer', data: { ib_id: i.id }}
@@ -23,7 +23,7 @@
     %button.btn.btn-default{name: 'ib-options', data: { ib_id: i.id, state: :hidden }}
       %i.fa.fa-cog
       %span.sr-only= t 'views.actions.options'
-  .panel-footer{id: "ib-options-#{i.id}", style: 'display: none'}
+  .card-footer{id: "ib-options-#{i.id}", style: 'display: none'}
     %h4= t 'views.inbox.entry.sharing.title'
     - if current_user.services.count > 0
       .row
diff --git a/app/views/inbox/_sidebar.html.haml b/app/views/inbox/_sidebar.html.haml
index 9da5bd77..2f7fb425 100644
--- a/app/views/inbox/_sidebar.html.haml
+++ b/app/views/inbox/_sidebar.html.haml
@@ -1,29 +1,29 @@
-.panel.panel-default.inbox--panel
-  .panel-heading
-    %h3.panel-title= t 'views.inbox.sidebar.questions.title'
-  .panel-body
+.card.card-default.inbox--panel
+  .card-header
+    %h3.card-title= t 'views.inbox.sidebar.questions.title'
+  .card-body
     %button.btn.btn-block.btn-info{type: :button, id: 'ib-generate-question'}= t 'views.inbox.sidebar.questions.button'
-.panel.panel-default.inbox--panel
-  .panel-heading
-    %h3.panel-title= t 'views.inbox.sidebar.share.title'
-  .panel-body
+.card.card-default.inbox--panel
+  .card-header
+    %h3.card-title= t 'views.inbox.sidebar.share.title'
+  .card-body
     %a.btn.btn-block.btn-primary{target: '_blank', href: "https://twitter.com/intent/tweet?text=Ask%20me%20anything%21&url=#{show_user_profile_url(current_user.screen_name)}"}
       %i.fa.fa-fw.fa-twitter
       = raw t('views.inbox.sidebar.share.button', service: "Twitter")
     %a.btn.btn-block.btn-primary{target: '_blank', href: "http://www.tumblr.com/share/link?url=#{show_user_profile_url(current_user.screen_name)}&name=Ask%20me%20anything%21"}
       %i.fa.fa-fw.fa-tumblr
       = raw t('views.inbox.sidebar.share.button', service: "Tumblr")
-.panel.panel-default.inbox--panel
-  .panel-heading
-    %h3.panel-title Show author
-  .panel-body
+.card.card-default.inbox--panel
+  .card-header
+    %h3.card-title Show author
+  .card-body
     %form#author_form
       = bootstrap_form_tag url: inbox_path, method: :get do |f|
         = f.text_field :author, value: params[:author], placeholder: "username", prepend: "@" , hide_label: true
         = f.button "Show", name: nil, class: "btn btn-default btn-block btn-sm", id: "ib-author"
-.panel.panel-default.warning--panel
-  .panel-heading
-    %h3.panel-title= t 'views.inbox.sidebar.actions.title'
-  .panel-body
+.card.card-default.warning--panel
+  .card-header
+    %h3.card-title= t 'views.inbox.sidebar.actions.title'
+  .card-body
     %button.btn.btn-block.btn-danger{type: :button, id: @delete_id , disabled: (@disabled ? 'disabled' : nil), data: { ib_count: @inbox_count }}= t 'views.inbox.sidebar.actions.button'
 
diff --git a/app/views/moderation/_moderation_tabs.html.haml b/app/views/moderation/_moderation_tabs.html.haml
index 7cf4a3cc..22e410ec 100644
--- a/app/views/moderation/_moderation_tabs.html.haml
+++ b/app/views/moderation/_moderation_tabs.html.haml
@@ -1,5 +1,5 @@
 .col-md-3.col-sm-4.col-xs-12
-  .panel.panel-default.hidden-xs
+  .card.card-default.hidden-xs
     .list-group
       = list_group_item t('views.moderation.tabs.all'), moderation_path
       = list_group_item t('views.general.answer').pluralize(2),     moderation_path('answer')
diff --git a/app/views/moderation/_moderationbox.html.haml b/app/views/moderation/_moderationbox.html.haml
index c2829837..d0a1424e 100644
--- a/app/views/moderation/_moderationbox.html.haml
+++ b/app/views/moderation/_moderationbox.html.haml
@@ -1,9 +1,9 @@
 - unless report.nil? or report.target.nil? or report.user.nil? or report.type.nil?
-  .panel.panel-default.moderationbox{data: { id: report.id }}
-    .panel-heading
+  .card.card-default.moderationbox{data: { id: report.id }}
+    .card-header
       %img.img-rounded.answerbox--img{src: gravatar_url(report.user)}
       = raw t('views.moderation.moderationbox.reported', user: user_screen_name(report.user), content: report.type.sub('Reports::', ''), time: time_tooltip(report))
-    .panel-body
+    .card-body
       %p
         - if report.type == 'Reports::User'
           = user_screen_name report.target
@@ -42,5 +42,5 @@
             %span{id: "mod-comment-count-#{report.id}"}= report.moderation_comments.all.count
           %button.btn.btn-default.btn-sm{type: :button, name: "mod-delete-report", data: { id: report.id }}
             %i.fa.fa-trash-o
-    .panel-footer{id: "mod-comments-section-#{report.id}", style: 'display: none'}
+    .card-footer{id: "mod-comments-section-#{report.id}", style: 'display: none'}
       %div{id: "mod-comments-#{report.id}"}= render 'moderation/discussion', report: report
diff --git a/app/views/moderation/_userbox.html.haml b/app/views/moderation/_userbox.html.haml
index b9cc793d..125ff753 100644
--- a/app/views/moderation/_userbox.html.haml
+++ b/app/views/moderation/_userbox.html.haml
@@ -1,8 +1,8 @@
 - header_class = if user.profile_header.exists? then "userbox--header-container" else "userbox--no-header" end
-.panel.panel-default
+.card.card-default
   %div{class: header_class}
     %img.userbox--header{src: user.profile_header.url(:mobile)}
-  .panel-body
+  .card-body
     %img.userbox--avatar{src: user.profile_picture.url(:small)}
     %p.userbox--username
       %a.profile--displayname{href: show_user_profile_path(user.screen_name)}
diff --git a/app/views/notifications/_notification_tabs.html.haml b/app/views/notifications/_notification_tabs.html.haml
index 7970a5a2..8ce3a95c 100644
--- a/app/views/notifications/_notification_tabs.html.haml
+++ b/app/views/notifications/_notification_tabs.html.haml
@@ -1,11 +1,11 @@
 .col-md-3.col-xs-12.col-sm-4
-  .panel.panel-default.hidden-xs
+  .card.card-default.hidden-xs
     .list-group
       = list_group_item "New Notifications", notifications_path, badge: Notification.for(current_user).where(new: true).count
       = list_group_item "All Notifications", notifications_path('all')
 
-  .panel.panel-default.hidden-xs
-    .panel-heading
+  .card.card-default.hidden-xs
+    .card-header
       Filter by Type
     .list-group
       = list_group_item t('views.notifications.tabs.answer'), notifications_path('answer'), badge: Notification.for(current_user).where(target_type: "Answer", new: true).count
diff --git a/app/views/notifications/index.html.haml b/app/views/notifications/index.html.haml
index 68d32a0a..0b89b94f 100644
--- a/app/views/notifications/index.html.haml
+++ b/app/views/notifications/index.html.haml
@@ -3,7 +3,7 @@
 .container.j2-page
   = render 'notification_tabs'
   .col-md-9.col-xs-12.col-sm-8
-    .panel.panel-default
+    .card.card-default
       %ul#notifications.list-group
         - if @notifications.count == 0
           %li.list-group-item.text-center
diff --git a/app/views/question/show.html.haml b/app/views/question/show.html.haml
index dbca8da0..073b074f 100644
--- a/app/views/question/show.html.haml
+++ b/app/views/question/show.html.haml
@@ -15,10 +15,10 @@
       Load more
 
   - if user_signed_in? and !current_user.answered? @question and current_user != @question.user and @question.user.privacy_allow_stranger_answers
-    .panel.panel-default#q-answer-box
-      .panel-heading
-        %h3.panel-title= t('views.question.title')
-      .panel-body
+    .card.card-default#q-answer-box
+      .card-header
+        %h3.card-title= t('views.question.title')
+      .card-body
         %textarea#q-answer.form-control{placeholder: t('views.placeholder.inbox'), data: { id: @question.id }}
         %br/
         %button#q-answer.btn.btn-success{data: { q_id: @question.id }}
diff --git a/app/views/services/index.html.haml b/app/views/services/index.html.haml
index a6c54df9..6062d91b 100644
--- a/app/views/services/index.html.haml
+++ b/app/views/services/index.html.haml
@@ -1,24 +1,25 @@
 - provide(:title, generate_title("Service Settings"))
 .container.j2-page
-  = render 'user/settings_tabs'
-  .col-md-9.col-xs-12.col-sm-8
-    = render 'layouts/messages'
-    .panel.panel-default
-      .panel-body
+  .row
+    = render 'user/settings_tabs'
+    .col-md-9.col-xs-12.col-sm-8
+      = render 'layouts/messages'
+      .card.card-default
+        .card-body
+          - if @services.count > 0
+            = t 'views.settings.service.enabled'
+          - else
+            = t 'views.settings.service.none'
+
+          - APP_CONFIG['sharing'].each do |service, service_options|
+            - if service_options['enabled'] and !@services.any? { |x| x.provider == service.to_s }
+              %p=link_to t('views.settings.service.connect', service: service.capitalize), "/auth/#{service}"
+
         - if @services.count > 0
-          = t 'views.settings.service.enabled'
-        - else
-          = t 'views.settings.service.none'
-
-        - APP_CONFIG['sharing'].each do |service, service_options|
-          - if service_options['enabled'] and !@services.any? { |x| x.provider == service.to_s }
-            %p=link_to t('views.settings.service.connect', service: service.capitalize), "/auth/#{service}"
-
-      - if @services.count > 0
-        %ul.list-group
-          - @services.each do |service|
-            %li.list-group-item
-              %i{class: "fa fa-#{service.provider}"}
-              %strong= service.provider.capitalize
-              (#{service.nickname})
-              = link_to t('views.settings.service.disconnect'), service_path(service), data: { confirm: t('views.settings.service.confirm', service: service.provider.capitalize) }, method: :delete
+          %ul.list-group
+            - @services.each do |service|
+              %li.list-group-item
+                %i{class: "fa fa-#{service.provider}"}
+                %strong= service.provider.capitalize
+                (#{service.nickname})
+                = link_to t('views.settings.service.disconnect'), service_path(service), data: { confirm: t('views.settings.service.confirm', service: service.provider.capitalize) }, method: :delete
diff --git a/app/views/shared/_question.html.haml b/app/views/shared/_question.html.haml
index d86502d0..b4d04d56 100644
--- a/app/views/shared/_question.html.haml
+++ b/app/views/shared/_question.html.haml
@@ -1,6 +1,6 @@
 - type ||= nil
-.panel.panel-default.questionbox{data: { id: q.id }}
-  .panel-body
+.card.card-default.questionbox{data: { id: q.id }}
+  .card-body
     .media
       - if type == "discover"
         .pull-left
diff --git a/app/views/shared/_question_header.haml b/app/views/shared/_question_header.haml
index 31e2d2ff..790d89e1 100644
--- a/app/views/shared/_question_header.haml
+++ b/app/views/shared/_question_header.haml
@@ -1,6 +1,6 @@
-.panel.panel-question{class: if hidden then 'question-hidden' end, tabindex: if hidden then '-1' end, aria: { hidden: if hidden then :true end }}
+.card.card-question{class: if hidden then 'question-hidden' end, tabindex: if hidden then '-1' end, aria: { hidden: if hidden then :true end }}
   .container
-    .panel-body
+    .card-body
       .media.question-media
         - unless question.author_is_anonymous
           %a.pull-left{href: unless hidden then show_user_profile_path(question.user.screen_name) end}
diff --git a/app/views/shared/_questionbox.html.haml b/app/views/shared/_questionbox.html.haml
index 30ecb92f..4233f71b 100644
--- a/app/views/shared/_questionbox.html.haml
+++ b/app/views/shared/_questionbox.html.haml
@@ -1,11 +1,11 @@
-.panel.panel-default
-  .panel-heading
-    %h3.panel-title
+.card.card-default
+  .card-header
+    %h3.card-title
       - if @user.motivation_header.blank?
         = t 'views.questionbox.title'
       - else
         = @user.motivation_header
-  .panel-body
+  .card-body
     - if @user.banned?
       .row
         .col-xs-12.text-center
diff --git a/app/views/shared/_sidebar.html.haml b/app/views/shared/_sidebar.html.haml
index 645f2e8d..8e6d8e92 100644
--- a/app/views/shared/_sidebar.html.haml
+++ b/app/views/shared/_sidebar.html.haml
@@ -1,8 +1,8 @@
 - header_class = if current_user.profile_header.exists? then "userbox--header-container" else "userbox--no-header" end
-.panel.panel-default.hidden-xs
+.card.card-default.hidden-xs
   %div{class: header_class}
     %img.userbox--header{src: current_user.profile_header.url(:mobile)}
-  .panel-body
+  .card-body
     %img.userbox--avatar{src: current_user.profile_picture.url(:small)}
     %p.userbox--username
       - if current_user.display_name.blank?
@@ -22,7 +22,7 @@
         .col-md-6.col-sm-6.col-xs-6
           %h4.entry-text#friend-count= current_user.friend_count
           %h6.entry-subtext= t('views.general.following')
-.panel.panel-default.hidden-xs
+.card.card-default.hidden-xs
   .list-group
     = list_group_item t('views.general.timeline'), root_path
     - if APP_CONFIG.dig(:features, :public, :enabled)
@@ -30,10 +30,10 @@
     - current_user.groups.each do |group|
       = list_group_item group.display_name, group_timeline_path(group.name)
 - unless @group.nil?
-  .panel.panel-default.profile--panel.hidden-xs
-    .panel-heading
-      %h3.panel-title= t('views.group.members')
-    .panel-body
+  .card.card-default.profile--panel.hidden-xs
+    .card-header
+      %h3.card-title= t('views.group.members')
+    .card-body
       - @group.members.each do |member|
         %a{href: show_user_profile_path(member.user.screen_name), title: member.user.screen_name, data: { toggle: :tooltip, placement: :top }}
           %img.img-rounded.answerbox--img-small{src: member.user.profile_picture.url(:medium)}
diff --git a/app/views/shared/_userbox.html.haml b/app/views/shared/_userbox.html.haml
index c8826f90..84b5dd28 100644
--- a/app/views/shared/_userbox.html.haml
+++ b/app/views/shared/_userbox.html.haml
@@ -1,9 +1,9 @@
 - type ||= @type || :nil
 - header_class = if user.profile_header.exists? then "userbox--header-container" else "userbox--no-header" end
-.panel.panel-default
+.card.card-default
   %div{class: header_class}
     %img.userbox--header{src: user.profile_header.url(:mobile)}
-  .panel-body
+  .card-body
     %img.userbox--avatar{src: user.profile_picture.url(:small)}
     %p.userbox--username
       - if user.display_name.blank?
diff --git a/app/views/static/about.html.haml b/app/views/static/about.html.haml
index 8f75c31a..771f34bd 100644
--- a/app/views/static/about.html.haml
+++ b/app/views/static/about.html.haml
@@ -5,8 +5,8 @@
     %h1= APP_CONFIG['site_name']
     %p= t 'views.about.subtitle'
 .container
-  .panel.panel-default
-    .panel-body
+  .card.card-default
+    .card-body
       .row
         .col-md-4
           %h3= t 'views.about.links.title'
@@ -23,8 +23,8 @@
               %i.fa.fa-question
           %h4.heading-about.text-center
             FAQ
-  .panel.panel-default
-    .panel-body
+  .card.card-default
+    .card-body
       .row
         .col-md-4
           %h3= t 'views.about.opensource.title'
@@ -45,8 +45,8 @@
             - User.where(contributor: true).each do |sup|
               %a{href: show_user_profile_path(sup.screen_name), title: sup.screen_name, data: { toggle: :tooltip, placement: :top }}
                 %img.img-rounded.answerbox--img-small{src: sup.profile_picture.url(:medium)}
-  .panel.panel-default
-    .panel-body
+  .card.card-default
+    .card-body
       .row
         .col-md-3.col-sm-12.col-xs-12
           %h3= t 'views.about.statistics.title'
diff --git a/app/views/static/faq.html.haml b/app/views/static/faq.html.haml
index 774d998a..976e3e0b 100644
--- a/app/views/static/faq.html.haml
+++ b/app/views/static/faq.html.haml
@@ -8,6 +8,6 @@
       = succeed '!' do
         = APP_CONFIG['site_name']
 .container
-  .panel.panel-default
-    .panel-body
+  .card.card-default
+    .card-body
       = raw_markdown_io "service-docs/en/help/faq.md"
diff --git a/app/views/static/privacy_policy.html.haml b/app/views/static/privacy_policy.html.haml
index ef1c8daf..1ba41719 100644
--- a/app/views/static/privacy_policy.html.haml
+++ b/app/views/static/privacy_policy.html.haml
@@ -1,5 +1,5 @@
 - provide(:title, generate_title("Privacy Policy"))
 .container.j2-page
-  .panel.panel-default
-    .panel-body
+  .card.card-default
+    .card-body
       = raw_markdown_io "service-docs/en/policy/privacy.md"
diff --git a/app/views/static/terms.html.haml b/app/views/static/terms.html.haml
index 0d44d6da..646e5c14 100644
--- a/app/views/static/terms.html.haml
+++ b/app/views/static/terms.html.haml
@@ -1,5 +1,5 @@
 - provide(:title, generate_title("Terms of Service"))
 .container.j2-page
-  .panel.panel-default
-    .panel-body
+  .card.card-default
+    .card-body
       = raw_markdown_io "service-docs/en/policy/terms.md"
diff --git a/app/views/user/_account.html.haml b/app/views/user/_account.html.haml
index 82f933e1..f59e7a0c 100644
--- a/app/views/user/_account.html.haml
+++ b/app/views/user/_account.html.haml
@@ -1,45 +1,46 @@
 - provide(:title, generate_title("Account Settings"))
 .container.j2-page
-  = render 'user/settings_tabs'
-  .col-md-9.col-xs-12.col-sm-8
-    = render 'layouts/messages'
-    .panel.panel-default
-      .panel-body
-        = bootstrap_form_for(resource, as: resource_name, url: '/settings/account', html: { method: :put }) do |f|
-          / Password field modal
-          #modal-passwd.modal.fade{"aria-hidden" => "true", "aria-labelledby" => "modal-passwd-label", :role => "dialog", :tabindex => "-1"}
-            .modal-dialog
-              .modal-content
-                .modal-header
-                  %button.close{"data-dismiss" => "modal", :type => "button"}
-                    %span{"aria-hidden" => "true"} ×
-                    %span.sr-only= t 'views.actions.close'
-                  %h4#modal-passwd-label.modal-title= t 'views.settings.account.modal.title'
-                .modal-body
-                  = f.password_field :current_password, autocomplete: "off", label: t('views.settings.account.password_current'), help: t('views.settings.account.password_current_help')
-                .modal-footer
-                  %button.btn.btn-default{"data-dismiss" => "modal", :type => "button"}= t 'views.actions.cancel'
-                  %button.btn.btn-primary{:type => "submit"}= t 'views.actions.save'
+  .row
+    = render 'user/settings_tabs'
+    .col-md-9.col-xs-12.col-sm-8
+      = render 'layouts/messages'
+      .card.card-default
+        .card-body
+          = bootstrap_form_for(resource, as: resource_name, url: '/settings/account', html: { method: :put }) do |f|
+            / Password field modal
+            #modal-passwd.modal.fade{"aria-hidden" => "true", "aria-labelledby" => "modal-passwd-label", :role => "dialog", :tabindex => "-1"}
+              .modal-dialog
+                .modal-content
+                  .modal-header
+                    %button.close{"data-dismiss" => "modal", :type => "button"}
+                      %span{"aria-hidden" => "true"} ×
+                      %span.sr-only= t 'views.actions.close'
+                    %h4#modal-passwd-label.modal-title= t 'views.settings.account.modal.title'
+                  .modal-body
+                    = f.password_field :current_password, autocomplete: "off", label: t('views.settings.account.password_current'), help: t('views.settings.account.password_current_help')
+                  .modal-footer
+                    %button.btn.btn-default{"data-dismiss" => "modal", :type => "button"}= t 'views.actions.cancel'
+                    %button.btn.btn-primary{:type => "submit"}= t 'views.actions.save'
 
-          = devise_error_messages!
+            = devise_error_messages!
 
-          = f.text_field :screen_name, autofocus: true, label: t('views.settings.account.username')
+            = f.text_field :screen_name, autofocus: true, label: t('views.settings.account.username')
 
-          = f.email_field :email, label: t('views.settings.account.email')
-          - if devise_mapping.confirmable? && resource.pending_reconfirmation?
-            %div= raw t('views.settings.account.email_confirm', resource: resource.unconfirmed_email)
+            = f.email_field :email, label: t('views.settings.account.email')
+            - if devise_mapping.confirmable? && resource.pending_reconfirmation?
+              %div= raw t('views.settings.account.email_confirm', resource: resource.unconfirmed_email)
 
-          = f.password_field :password, autocomplete: "off", label: t('views.settings.account.password'), help: t('views.settings.account.password_help')
-          = f.password_field :password_confirmation, autocomplete: "off", label: t('views.settings.account.password_confirm')
+            = f.password_field :password, autocomplete: "off", label: t('views.settings.account.password'), help: t('views.settings.account.password_help')
+            = f.password_field :password_confirmation, autocomplete: "off", label: t('views.settings.account.password_confirm')
 
-          %button.btn.btn-primary{"data-target" => "#modal-passwd", "data-toggle" => "modal", :type => "button"}
-            = t 'views.actions.save'
+            %button.btn.btn-primary{"data-target" => "#modal-passwd", "data-toggle" => "modal", :type => "button"}
+              = t 'views.actions.save'
 
-          %hr/
-        %p
-          = t 'views.settings.account.unsatisfied'
-          =button_to t('views.settings.account.delete'), '/settings/account', data: { confirm: "Are you sure?" }, method: :delete, class: "btn btn-danger btn-xs"
+            %hr/
+          %p
+            = t 'views.settings.account.unsatisfied'
+            =button_to t('views.settings.account.delete'), '/settings/account', data: { confirm: "Are you sure?" }, method: :delete, class: "btn btn-danger btn-xs"
 
-        = link_to t('views.settings.account.back'), :back
+          = link_to t('views.settings.account.back'), :back
 
 .visible-xs= render "shared/links"
diff --git a/app/views/user/_profile_info.html.haml b/app/views/user/_profile_info.html.haml
index 57404894..a80c0cc4 100644
--- a/app/views/user/_profile_info.html.haml
+++ b/app/views/user/_profile_info.html.haml
@@ -1,4 +1,4 @@
-.panel.panel-default#profile
+.card.card-default#profile
   %img.profile--avatar{src: @user.profile_picture.url(:large)}
   - if user_signed_in? && current_user.admin?
     - if @user.admin?
@@ -16,7 +16,7 @@
   - if @user.following? current_user
     .profile--panel-badge.panel-badge-default
       = t 'views.user.follows_you'
-  .panel-body
+  .card-body
     .profile--panel-name
       - if @user.display_name.blank?
         .profile--displayname
diff --git a/app/views/user/_settings_tabs.html.haml b/app/views/user/_settings_tabs.html.haml
index 52ff1b2e..6cfec4d7 100644
--- a/app/views/user/_settings_tabs.html.haml
+++ b/app/views/user/_settings_tabs.html.haml
@@ -1,5 +1,5 @@
 .col-md-3.col-xs-12.col-sm-4
-  .panel.panel-default
+  .card.card-default
     .list-group
       = list_group_item t('views.settings.tabs.account'), edit_user_registration_path
       = list_group_item t('views.settings.tabs.profile'), edit_user_profile_path
diff --git a/app/views/user/_stats.html.haml b/app/views/user/_stats.html.haml
index 41446e44..3937687d 100644
--- a/app/views/user/_stats.html.haml
+++ b/app/views/user/_stats.html.haml
@@ -1,7 +1,7 @@
-.panel.panel-default.profile--panel#profile-stats
-  .panel-heading
-    %h3.panel-title Stats
-  .panel-body
+.card.card-default.profile--panel#profile-stats
+  .card-header
+    %h3.card-title Stats
+  .card-body
     .row
       %a{href: show_user_followers_path(@user.screen_name)}
         .col-md-6.col-sm-6.col-xs-6
diff --git a/app/views/user/data.html.haml b/app/views/user/data.html.haml
index 9cff91a2..80442463 100644
--- a/app/views/user/data.html.haml
+++ b/app/views/user/data.html.haml
@@ -1,193 +1,194 @@
 - provide(:title, generate_title("Your Data"))
 .container.j2-page
-  = render 'settings_tabs'
-  .col-md-9.col-xs-12.col-sm-8
-    .panel.panel-default
-      .panel-body
-        %h2 Your Profile Data
-        %p Everything we have about you! Really, not that much as you might expect.
+  .row
+    = render 'settings_tabs'
+    .col-md-9.col-xs-12.col-sm-8
+      .card.card-default
+        .card-body
+          %h2 Your Profile Data
+          %p Everything we have about you! Really, not that much as you might expect.
 
-        %h3 General
-        .row
-          .col-md-6.col-sm-6.col-xs-12
-            %h4 Profile
+          %h3 General
+          .row
+            .col-md-6.col-sm-6.col-xs-12
+              %h4 Profile
 
-            %p.data-heading User name
-            %p.text-muted= current_user.screen_name
+              %p.data-heading User name
+              %p.text-muted= current_user.screen_name
 
-            %p.data-heading Display name
-            %p.text-muted
-              - if current_user.display_name.blank?
-                None set!
-              - else
-                = current_user.display_name
+              %p.data-heading Display name
+              %p.text-muted
+                - if current_user.display_name.blank?
+                  None set!
+                - else
+                  = current_user.display_name
 
-            %p.data-heading Bio
-            %p.text-muted
-              - if current_user.bio.blank?
-                None set!
-              - else
-                = current_user.bio
+              %p.data-heading Bio
+              %p.text-muted
+                - if current_user.bio.blank?
+                  None set!
+                - else
+                  = current_user.bio
 
-            %p.data-heading Location
-            %p.text-muted
-              - if current_user.location.blank?
-                None set!
-              - else
-                = current_user.location
+              %p.data-heading Location
+              %p.text-muted
+                - if current_user.location.blank?
+                  None set!
+                - else
+                  = current_user.location
 
-            %p.data-heading Website
-            %p.text-muted
-              - if current_user.website.blank?
-                None set!
-              - else
-                = current_user.website
-          .col-md-6.col-sm-6.col-xs-12
-            %h4 Pictures
-            %p.data-heading Profile picture
-            .media
-              .pull-left
-                %img.profile--img{src: current_user.profile_picture.url(:medium)}
-              .media-body
-                %ul
-                  %li
-                    %a{href: current_user.profile_picture.url(:small)} Small
-                  %li
-                    %a{href: current_user.profile_picture.url(:medium)} Medium
-                  %li
-                    %a{href: current_user.profile_picture.url(:large)} Large
-                  %li
-                    %a{href: current_user.profile_picture.url(:original)} Original image
+              %p.data-heading Website
+              %p.text-muted
+                - if current_user.website.blank?
+                  None set!
+                - else
+                  = current_user.website
+            .col-md-6.col-sm-6.col-xs-12
+              %h4 Pictures
+              %p.data-heading Profile picture
+              .media
+                .pull-left
+                  %img.profile--img{src: current_user.profile_picture.url(:medium)}
+                .media-body
+                  %ul
+                    %li
+                      %a{href: current_user.profile_picture.url(:small)} Small
+                    %li
+                      %a{href: current_user.profile_picture.url(:medium)} Medium
+                    %li
+                      %a{href: current_user.profile_picture.url(:large)} Large
+                    %li
+                      %a{href: current_user.profile_picture.url(:original)} Original image
 
-            %p.data-heading Header picture
-            %img.data-header-preview{src: current_user.profile_header.url(:mobile)}
-            %p
-              %a{href: current_user.profile_header.url(:mobile)} Mobile
-              |
-              %a{href: current_user.profile_header.url(:web)} Web
-              |
-              %a{href: current_user.profile_header.url(:retina)} Retina
-              |
-              %a{href: current_user.profile_header.url(:original)} Original image
-        .row
-          .col-md-6.col-sm-6.col-xs-12
-            %h4 Statistics
+              %p.data-heading Header picture
+              %img.data-header-preview{src: current_user.profile_header.url(:mobile)}
+              %p
+                %a{href: current_user.profile_header.url(:mobile)} Mobile
+                |
+                %a{href: current_user.profile_header.url(:web)} Web
+                |
+                %a{href: current_user.profile_header.url(:retina)} Retina
+                |
+                %a{href: current_user.profile_header.url(:original)} Original image
+          .row
+            .col-md-6.col-sm-6.col-xs-12
+              %h4 Statistics
 
-            %p.data-heading Answers
-            %p.text-muted= current_user.answered_count
+              %p.data-heading Answers
+              %p.text-muted= current_user.answered_count
 
-            %p.data-heading Questions
-            %p.text-muted= current_user.asked_count
+              %p.data-heading Questions
+              %p.text-muted= current_user.asked_count
 
-            %p.data-heading Following
-            %p.text-muted= current_user.friend_count
+              %p.data-heading Following
+              %p.text-muted= current_user.friend_count
 
-            %p.data-heading Followers
-            %p.text-muted= current_user.follower_count
+              %p.data-heading Followers
+              %p.text-muted= current_user.follower_count
 
-            %p.data-heading Smiles
-            %p.text-muted= current_user.smiled_count + current_user.comment_smiled_count
+              %p.data-heading Smiles
+              %p.text-muted= current_user.smiled_count + current_user.comment_smiled_count
 
-            %p.data-heading Comments
-            %p.text-muted= current_user.commented_count
-          .col-md-6.col-sm-6.col-xs-12
-            %h4 Badges
+              %p.data-heading Comments
+              %p.text-muted= current_user.commented_count
+            .col-md-6.col-sm-6.col-xs-12
+              %h4 Badges
 
-            %p.data-heading Admin
-            %p
-              - if current_user.admin?
-                %span.label.label-success
-                  %i.fa.fa-fw.fa-check
-              - else
-                %span.label.label-danger
-                  %i.fa.fa-fw.fa-close
+              %p.data-heading Admin
+              %p
+                - if current_user.admin?
+                  %span.label.label-success
+                    %i.fa.fa-fw.fa-check
+                - else
+                  %span.label.label-danger
+                    %i.fa.fa-fw.fa-close
 
-            %p.data-heading Moderator
-            %p
-              - if current_user.mod?
-                %span.label.label-success
-                  %i.fa.fa-fw.fa-check
-              - else
-                %span.label.label-danger
-                  %i.fa.fa-fw.fa-close
+              %p.data-heading Moderator
+              %p
+                - if current_user.mod?
+                  %span.label.label-success
+                    %i.fa.fa-fw.fa-check
+                - else
+                  %span.label.label-danger
+                    %i.fa.fa-fw.fa-close
 
-            %p.data-heading Supporter
-            %p
-              - if current_user.supporter?
-                %span.label.label-success
-                  %i.fa.fa-fw.fa-check
-              - else
-                %span.label.label-danger
-                  %i.fa.fa-fw.fa-close
+              %p.data-heading Supporter
+              %p
+                - if current_user.supporter?
+                  %span.label.label-success
+                    %i.fa.fa-fw.fa-check
+                - else
+                  %span.label.label-danger
+                    %i.fa.fa-fw.fa-close
 
-            %p.data-heading Contributor
-            %p
-              - if current_user.contributor?
-                %span.label.label-success
-                  %i.fa.fa-fw.fa-check
-              - else
-                %span.label.label-danger
-                  %i.fa.fa-fw.fa-close
+              %p.data-heading Contributor
+              %p
+                - if current_user.contributor?
+                  %span.label.label-success
+                    %i.fa.fa-fw.fa-check
+                - else
+                  %span.label.label-danger
+                    %i.fa.fa-fw.fa-close
 
-            %p.data-heading Blogger
-            %p
-              - if current_user.blogger?
-                %span.label.label-success
-                  %i.fa.fa-fw.fa-check
-              - else
-                %span.label.label-danger
-                  %i.fa.fa-fw.fa-close
+              %p.data-heading Blogger
+              %p
+                - if current_user.blogger?
+                  %span.label.label-success
+                    %i.fa.fa-fw.fa-check
+                - else
+                  %span.label.label-danger
+                    %i.fa.fa-fw.fa-close
 
-            %p.data-heading Translator
-            %p
-              - if current_user.translator?
-                %span.label.label-success
-                  %i.fa.fa-fw.fa-check
-              - else
-                %span.label.label-danger
-                  %i.fa.fa-fw.fa-close
-        .row
-          .col-md-6.col-sm-6.col-xs-12
-            %h3 IP
-            %p.data-heading Current Sign In
-            %p.text-muted= current_user.current_sign_in_ip
+              %p.data-heading Translator
+              %p
+                - if current_user.translator?
+                  %span.label.label-success
+                    %i.fa.fa-fw.fa-check
+                - else
+                  %span.label.label-danger
+                    %i.fa.fa-fw.fa-close
+          .row
+            .col-md-6.col-sm-6.col-xs-12
+              %h3 IP
+              %p.data-heading Current Sign In
+              %p.text-muted= current_user.current_sign_in_ip
 
-            %p.data-heading Last Sign In
-            %p.text-muted= current_user.last_sign_in_ip
-          .col-md-6.col-sm-6.col-xs-12
-            %h3 Miscellaneous
+              %p.data-heading Last Sign In
+              %p.text-muted= current_user.last_sign_in_ip
+            .col-md-6.col-sm-6.col-xs-12
+              %h3 Miscellaneous
 
-            %p.data-heading Locale
-            %p.text-muted
-              - if current_user.locale.blank?
-                None set!
-              - else
-                = current_user.locale
+              %p.data-heading Locale
+              %p.text-muted
+                - if current_user.locale.blank?
+                  None set!
+                - else
+                  = current_user.locale
 
-            %p.data-heading Sign In count
-            %p.text-muted= current_user.sign_in_count
-        %h3 Dates
-        .row
-          .col-md-6.col-sm-6.col-xs-12
-            %h4 Sign In
+              %p.data-heading Sign In count
+              %p.text-muted= current_user.sign_in_count
+          %h3 Dates
+          .row
+            .col-md-6.col-sm-6.col-xs-12
+              %h4 Sign In
 
-            %p.data-heading Current Sign In
-            %p.text-muted= localize(current_user.current_sign_in_at)
+              %p.data-heading Current Sign In
+              %p.text-muted= localize(current_user.current_sign_in_at)
 
-            %p.data-heading Last Sign In
-            %p.text-muted= localize(current_user.last_sign_in_at)
+              %p.data-heading Last Sign In
+              %p.text-muted= localize(current_user.last_sign_in_at)
 
-            %p.data-heading Remember me set at
-            %p.text-muted= localize(current_user.remember_created_at)
-          .col-md-6.col-sm-6.col-xs-12
-            %h4 Create/Update
+              %p.data-heading Remember me set at
+              %p.text-muted= localize(current_user.remember_created_at)
+            .col-md-6.col-sm-6.col-xs-12
+              %h4 Create/Update
 
-            %p.data-heading Account created
-            %p.text-muted
-              = localize(current_user.created_at)
-              = " (#{time_ago_in_words(current_user.created_at)} ago)"
+              %p.data-heading Account created
+              %p.text-muted
+                = localize(current_user.created_at)
+                = " (#{time_ago_in_words(current_user.created_at)} ago)"
 
-            %p.data-heading Account last updated
-            %p.text-muted
-              = localize(current_user.updated_at)
-              = " (#{time_ago_in_words(current_user.updated_at)} ago)"
+              %p.data-heading Account last updated
+              %p.text-muted
+                = localize(current_user.updated_at)
+                = " (#{time_ago_in_words(current_user.updated_at)} ago)"
diff --git a/app/views/user/edit.html.haml b/app/views/user/edit.html.haml
index 0120ecf6..76c635ae 100644
--- a/app/views/user/edit.html.haml
+++ b/app/views/user/edit.html.haml
@@ -1,62 +1,63 @@
 - provide(:title, generate_title("Profile Settings"))
 .container.j2-page
-  = render 'settings_tabs'
-  .col-md-9.col-xs-12.col-sm-9
-    = render 'layouts/messages'
-    .panel.panel-default
-      .panel-body
-        = bootstrap_form_for(current_user, url: {action: "edit"}, :html => { :multipart => true }, method: "patch") do |f|
+  .row
+    = render 'settings_tabs'
+    .col-md-9.col-xs-12.col-sm-9
+      = render 'layouts/messages'
+      .card.card-default
+        .card-body
+          = bootstrap_form_for(current_user, url: {action: "edit"}, :html => { :multipart => true }, method: "patch") do |f|
 
-          = f.text_field :display_name, label: t('views.settings.profile.displayname')
+            = f.text_field :display_name, label: t('views.settings.profile.displayname')
 
-          .media#profile-picture-media
-            .pull-left
-              %img.img-rounded.profile--img{src: current_user.profile_picture.url(:medium)}
-            .media-body
-              = f.file_field :profile_picture, label: t('views.settings.profile.avatar')
+            .media#profile-picture-media
+              .pull-left
+                %img.img-rounded.profile--img{src: current_user.profile_picture.url(:medium)}
+              .media-body
+                = f.file_field :profile_picture, label: t('views.settings.profile.avatar')
 
-          .row#profile-picture-crop-controls{style: 'display: none;'}
-            .col-sm-10.col-md-8
-              %strong= t('views.settings.profile.avatar_adjust')
-              %img#profile-picture-cropper{src: current_user.profile_picture.url(:medium)}
-            .col-sm-2.col-md-4
-              .btn-group
-                %button#cropper-zoom-out.btn.btn-inverse{type: :button}
-                  %i.fa.fa-search-minus
-                %button#cropper-zoom-in.btn.btn-inverse{type: :button}
-                  %i.fa.fa-search-plus
+            .row#profile-picture-crop-controls{style: 'display: none;'}
+              .col-sm-10.col-md-8
+                %strong= t('views.settings.profile.avatar_adjust')
+                %img#profile-picture-cropper{src: current_user.profile_picture.url(:medium)}
+              .col-sm-2.col-md-4
+                .btn-group
+                  %button#cropper-zoom-out.btn.btn-inverse{type: :button}
+                    %i.fa.fa-search-minus
+                  %button#cropper-zoom-in.btn.btn-inverse{type: :button}
+                    %i.fa.fa-search-plus
 
-          .media#profile-header-media
-            .pull-left
-              %img.img-rounded.header--img{src: current_user.profile_header.url(:mobile)}
-            .media-body
-              = f.file_field :profile_header, label: t('views.settings.profile.header')
+            .media#profile-header-media
+              .pull-left
+                %img.img-rounded.header--img{src: current_user.profile_header.url(:mobile)}
+              .media-body
+                = f.file_field :profile_header, label: t('views.settings.profile.header')
 
-          .row#profile-header-crop-controls{style: 'display: none;'}
-            .col-sm-10.col-md-8
-              %strong= t('views.settings.profile.header_adjust')
-              %img#profile-header-cropper{src: current_user.profile_header.url(:web)}
-            .col-sm-2.col-md-4
-              .btn-group
-                %button#cropper-header-zoom-out.btn.btn-inverse{type: :button}
-                  %i.fa.fa-search-minus
-                %button#cropper-header-zoom-in.btn.btn-inverse{type: :button}
-                  %i.fa.fa-search-plus
+            .row#profile-header-crop-controls{style: 'display: none;'}
+              .col-sm-10.col-md-8
+                %strong= t('views.settings.profile.header_adjust')
+                %img#profile-header-cropper{src: current_user.profile_header.url(:web)}
+              .col-sm-2.col-md-4
+                .btn-group
+                  %button#cropper-header-zoom-out.btn.btn-inverse{type: :button}
+                    %i.fa.fa-search-minus
+                  %button#cropper-header-zoom-in.btn.btn-inverse{type: :button}
+                    %i.fa.fa-search-plus
 
-          = f.text_field :motivation_header, label: t('views.settings.profile.motivation'), placeholder: t('views.settings.profile.placeholder.motivation')
+            = f.text_field :motivation_header, label: t('views.settings.profile.motivation'), placeholder: t('views.settings.profile.placeholder.motivation')
 
-          = f.text_field :website, label: t('views.settings.profile.website'), placeholder: 'http://example.com'
+            = f.text_field :website, label: t('views.settings.profile.website'), placeholder: 'http://example.com'
 
-          = f.text_field :location, label: t('views.settings.profile.location'), placeholder: t('views.settings.profile.placeholder.location')
+            = f.text_field :location, label: t('views.settings.profile.location'), placeholder: t('views.settings.profile.placeholder.location')
 
-          = f.text_area :bio, label: t('views.settings.profile.bio'), placeholder: t('views.settings.profile.placeholder.bio')
+            = f.text_area :bio, label: t('views.settings.profile.bio'), placeholder: t('views.settings.profile.placeholder.bio')
 
-          = f.check_box :show_foreign_themes, label: 'Render other user themes when visiting their profile'
+            = f.check_box :show_foreign_themes, label: 'Render other user themes when visiting their profile'
 
-          - for attrib in %i(crop_x crop_y crop_w crop_h)
-            = f.hidden_field attrib, id: attrib
+            - for attrib in %i(crop_x crop_y crop_w crop_h)
+              = f.hidden_field attrib, id: attrib
 
-          - for attrib in %i(crop_h_x crop_h_y crop_h_w crop_h_h)
-            = f.hidden_field attrib, id: attrib
+            - for attrib in %i(crop_h_x crop_h_y crop_h_w crop_h_h)
+              = f.hidden_field attrib, id: attrib
 
-          = f.submit t('views.actions.save'), class: 'btn btn-primary'
+            = f.submit t('views.actions.save'), class: 'btn btn-primary'
diff --git a/app/views/user/edit_privacy.html.haml b/app/views/user/edit_privacy.html.haml
index 526b6798..a5524f60 100644
--- a/app/views/user/edit_privacy.html.haml
+++ b/app/views/user/edit_privacy.html.haml
@@ -1,14 +1,15 @@
 - provide(:title, generate_title("Privacy Settings"))
 .container.j2-page
-  = render 'settings_tabs'
-  .col-md-9.col-xs-12.col-sm-8
-    = render 'layouts/messages'
-    .panel.panel-default
-      .panel-body
-        = bootstrap_form_for(current_user, url: {action: "edit_privacy"}, method: "patch") do |f|
+  .row
+    = render 'settings_tabs'
+    .col-md-9.col-xs-12.col-sm-8
+      = render 'layouts/messages'
+      .card.card-default
+        .card-body
+          = bootstrap_form_for(current_user, url: {action: "edit_privacy"}, method: "patch") do |f|
 
-          = f.check_box :privacy_allow_anonymous_questions, label: t('views.settings.privacy.anonymous')
-          = f.check_box :privacy_allow_public_timeline, label: t('views.settings.privacy.public')
-          = f.check_box :privacy_allow_stranger_answers, label: t('views.settings.privacy.stranger')
+            = f.check_box :privacy_allow_anonymous_questions, label: t('views.settings.privacy.anonymous')
+            = f.check_box :privacy_allow_public_timeline, label: t('views.settings.privacy.public')
+            = f.check_box :privacy_allow_stranger_answers, label: t('views.settings.privacy.stranger')
 
-          = f.submit t('views.actions.save'), class: 'btn btn-primary'
+            = f.submit t('views.actions.save'), class: 'btn btn-primary'
diff --git a/app/views/user/edit_theme.html.haml b/app/views/user/edit_theme.html.haml
index ecfc0ad1..f82546a3 100644
--- a/app/views/user/edit_theme.html.haml
+++ b/app/views/user/edit_theme.html.haml
@@ -1,72 +1,73 @@
 - provide(:title, generate_title("Theme Settings"))
 .container.j2-page
-  = render 'settings_tabs'
-  .col-md-9.col-xs-12.col-sm-8
-    = render 'layouts/messages'
-    .panel.panel-default
-      .panel-body
-        %b Presets:
-        %a{href: '#', class: 'theme_preset', data: {preset: 'rs'}} Retrospring Purple,
-        %a{href: '#', class: 'theme_preset', data: {preset: 'dc'}} Dark Copycat,
-        %a{href: '#', class: 'theme_preset', data: {preset: 'lc'}} Light Copycat
-        = bootstrap_form_for(current_user.theme || Theme.new, url: {action: "update_theme"}, html: {id: 'update_theme'}, method: "patch") do |f|
-          .row
-            .col-md-6
-              = f.text_field :primary_color, class: 'color', data: {default: 0x5E35B1}
-            .col-md-6
-              = f.text_field :primary_text, class: 'color', data: {default: 0xFFFFFF}
-          .row
-            .col-md-6
-              = f.text_field :danger_color, class: 'color', data: {default: 0xFF0039}
-            .col-md-6
-              = f.text_field :danger_text, class: 'color', data: {default: 0xFFFFFF}
-          .row
-            .col-md-6
-              = f.text_field :success_color, class: 'color', data: {default: 0x3FB618}
-            .col-md-6
-              = f.text_field :success_text, class: 'color', data: {default: 0xFFFFFF}
-          .row
-            .col-md-6
-              = f.text_field :warning_color, class: 'color', data: {default: 0xFF7518}
-            .col-md-6
-              = f.text_field :warning_text, class: 'color', data: {default: 0xFFFFFF}
-          .row
-            .col-md-6
-              = f.text_field :info_color, class: 'color', data: {default: 0x9954BB}
-            .col-md-6
-              = f.text_field :info_text, class: 'color', data: {default: 0xFFFFFF}
-          .row
-            .col-md-6
-              = f.text_field :default_color, class: 'color', data: {default: 0x222222}
-            .col-md-6
-              = f.text_field :default_text, class: 'color', data: {default: 0xEEEEEE}
-          .row
-            .col-md-6
-              = f.text_field :panel_color, class: 'color', data: {default: 0xF9F9F9}
-            .col-md-6
-              = f.text_field :panel_text, class: 'color', data: {default: 0x151515}
-          .row
-            .col-md-6
-              = f.text_field :link_color, class: 'color', data: {default: 0x5E35B1}
-            .col-md-6
-              = f.text_field :background_color, class: 'color', data: {default: 0xFFFFFF}
-          .row
-            .col-md-6
-              = f.text_field :background_text, class: 'color', data: {default: 0x222222}
-            .col-md-6
-              = f.text_field :background_muted, class: 'color', data: {default: 0xBBBBBB}
-          .row
-            .col-md-6
-              = f.text_field :input_color, class: 'color', data: {default: 0xFFFFFF}
-            .col-md-6
-              = f.text_field :input_text, class: 'color', data: {default: 0x000000}
-          .row
-            .col-md-6
-              = f.text_field :outline_color, class: 'color', data: {default: 0x5E35B1}
-            .col-md-6
+  .row
+    = render 'settings_tabs'
+    .col-md-9.col-xs-12.col-sm-8
+      = render 'layouts/messages'
+      .card.card-default
+        .card-body
+          %b Presets:
+          %a{href: '#', class: 'theme_preset', data: {preset: 'rs'}} Retrospring Purple,
+          %a{href: '#', class: 'theme_preset', data: {preset: 'dc'}} Dark Copycat,
+          %a{href: '#', class: 'theme_preset', data: {preset: 'lc'}} Light Copycat
+          = bootstrap_form_for(current_user.theme || Theme.new, url: {action: "update_theme"}, html: {id: 'update_theme'}, method: "patch") do |f|
+            .row
+              .col-md-6
+                = f.text_field :primary_color, class: 'color', data: {default: 0x5E35B1}
+              .col-md-6
+                = f.text_field :primary_text, class: 'color', data: {default: 0xFFFFFF}
+            .row
+              .col-md-6
+                = f.text_field :danger_color, class: 'color', data: {default: 0xFF0039}
+              .col-md-6
+                = f.text_field :danger_text, class: 'color', data: {default: 0xFFFFFF}
+            .row
+              .col-md-6
+                = f.text_field :success_color, class: 'color', data: {default: 0x3FB618}
+              .col-md-6
+                = f.text_field :success_text, class: 'color', data: {default: 0xFFFFFF}
+            .row
+              .col-md-6
+                = f.text_field :warning_color, class: 'color', data: {default: 0xFF7518}
+              .col-md-6
+                = f.text_field :warning_text, class: 'color', data: {default: 0xFFFFFF}
+            .row
+              .col-md-6
+                = f.text_field :info_color, class: 'color', data: {default: 0x9954BB}
+              .col-md-6
+                = f.text_field :info_text, class: 'color', data: {default: 0xFFFFFF}
+            .row
+              .col-md-6
+                = f.text_field :default_color, class: 'color', data: {default: 0x222222}
+              .col-md-6
+                = f.text_field :default_text, class: 'color', data: {default: 0xEEEEEE}
+            .row
+              .col-md-6
+                = f.text_field :panel_color, class: 'color', data: {default: 0xF9F9F9}
+              .col-md-6
+                = f.text_field :panel_text, class: 'color', data: {default: 0x151515}
+            .row
+              .col-md-6
+                = f.text_field :link_color, class: 'color', data: {default: 0x5E35B1}
+              .col-md-6
+                = f.text_field :background_color, class: 'color', data: {default: 0xFFFFFF}
+            .row
+              .col-md-6
+                = f.text_field :background_text, class: 'color', data: {default: 0x222222}
+              .col-md-6
+                = f.text_field :background_muted, class: 'color', data: {default: 0xBBBBBB}
+            .row
+              .col-md-6
+                = f.text_field :input_color, class: 'color', data: {default: 0xFFFFFF}
+              .col-md-6
+                = f.text_field :input_text, class: 'color', data: {default: 0x000000}
+            .row
+              .col-md-6
+                = f.text_field :outline_color, class: 'color', data: {default: 0x5E35B1}
+              .col-md-6
 
-          .pull-left
-            = f.submit t('views.actions.save'), class: 'btn btn-primary'
+            .pull-left
+              = f.submit t('views.actions.save'), class: 'btn btn-primary'
 
-        .pull-right
-          =button_to 'Delete Theme', delete_user_theme_path, data: { confirm: "Are you sure?" }, tabindex: -1, method: :delete, class: "btn btn-danger"
+          .pull-right
+            =button_to 'Delete Theme', delete_user_theme_path, data: { confirm: "Are you sure?" }, tabindex: -1, method: :delete, class: "btn btn-danger"
diff --git a/app/views/user/export.haml b/app/views/user/export.haml
index ef14b9b0..91e58bd8 100644
--- a/app/views/user/export.haml
+++ b/app/views/user/export.haml
@@ -1,37 +1,38 @@
 - provide(:title, generate_title("Export"))
 .container.j2-page
-  = render 'settings_tabs'
-  .col-md-9.col-xs-12.col-sm-8
-    = render 'layouts/messages'
-    .panel.panel-default
-      .panel-body
-        %h2 Export your data
-        %p
-          With the announcement of
-          = succeed ',' do
-            %a{href: 'http://blog.retrospring.net/saying-goodbye/'} shutting down Retrospring on June 8 2016
-          we promised you one last feature: exporting all your data.  The data is inside a
-          %code= ".tar.gz"
-          archive and available in three formats: YAML, JSON, and XML.  The archive also contains a copy of your
-          profile picture and header picture in all sizes.
-        %p
-          Please note that you can only export your data once a week.  Exporting your data
-          will take a while, so please be patient.  You will receive a question once exporting
-          is done.
-        - if current_user.can_export?
-          %form{action: begin_user_export_path, method: 'POST'}
-            %p.centre
-              %button#export-btn.btn.btn-lg.btn-primary{type: :submit} Export
-            = hidden_field_tag :authenticity_token, form_authenticity_token
-        - else
-          %p.centre
-            %button.btn.btn-lg.btn-primary.disabled{disabled: :disabled} Export
-        %p
-          - if current_user.export_url.nil?
-            Once exporting your account is done, a download link will appear here.
+  .row
+    = render 'settings_tabs'
+    .col-md-9.col-xs-12.col-sm-8
+      = render 'layouts/messages'
+      .card.card-default
+        .card-body
+          %h2 Export your data
+          %p
+            With the announcement of
+            = succeed ',' do
+              %a{href: 'http://blog.retrospring.net/saying-goodbye/'} shutting down Retrospring on June 8 2016
+            we promised you one last feature: exporting all your data.  The data is inside a
+            %code= ".tar.gz"
+            archive and available in three formats: YAML, JSON, and XML.  The archive also contains a copy of your
+            profile picture and header picture in all sizes.
+          %p
+            Please note that you can only export your data once a week.  Exporting your data
+            will take a while, so please be patient.  You will receive a question once exporting
+            is done.
+          - if current_user.can_export?
+            %form{action: begin_user_export_path, method: 'POST'}
+              %p.centre
+                %button#export-btn.btn.btn-lg.btn-primary{type: :submit} Export
+              = hidden_field_tag :authenticity_token, form_authenticity_token
           - else
-            Here is your export from
-            = succeed ':' do
-              = current_user.export_created_at
-            %a{href: current_user.export_url}
-              = File.basename current_user.export_url
+            %p.centre
+              %button.btn.btn-lg.btn-primary.disabled{disabled: :disabled} Export
+          %p
+            - if current_user.export_url.nil?
+              Once exporting your account is done, a download link will appear here.
+            - else
+              Here is your export from
+              = succeed ':' do
+                = current_user.export_created_at
+              %a{href: current_user.export_url}
+                = File.basename current_user.export_url

From 213eb1d11f2b2d3ebd76c8913ac9ae7d9390dae9 Mon Sep 17 00:00:00 2001
From: Andreas Nedbal <andy@pixelde.su>
Date: Sun, 19 Apr 2020 23:12:23 +0200
Subject: [PATCH 005/172] Add row classes to fix grid layouts

---
 app/views/group/index.html.haml      | 25 ++++++++++++------------
 app/views/public/index.html.haml     | 23 +++++++++++-----------
 app/views/static/index.html.haml     | 23 +++++++++++-----------
 app/views/user/groups.html.haml      | 25 ++++++++++++------------
 app/views/user/questions.html.haml   | 27 +++++++++++++-------------
 app/views/user/show.html.haml        | 29 ++++++++++++++--------------
 app/views/user/show_follow.html.haml | 29 ++++++++++++++--------------
 7 files changed, 94 insertions(+), 87 deletions(-)

diff --git a/app/views/group/index.html.haml b/app/views/group/index.html.haml
index 8c17ebca..0e1232c2 100644
--- a/app/views/group/index.html.haml
+++ b/app/views/group/index.html.haml
@@ -1,18 +1,19 @@
 - provide(:title, group_title(@group))
 = render 'static/mobile_nav'
 .container.j2-page
-  .col-md-3.col-sm-4
-    = render 'shared/sidebar'
-  .col-md-9.col-xs-12.col-sm-8.j2-col-reset
-    = render 'layouts/messages'
+  .row
+    .col-md-3.col-sm-4
+      = render 'shared/sidebar'
+    .col-md-9.col-xs-12.col-sm-8.j2-col-reset
+      = render 'layouts/messages'
 
-    #timeline
-      - @timeline.each do |answer|
-        = render 'shared/answerbox', a: answer
+      #timeline
+        - @timeline.each do |answer|
+          = render 'shared/answerbox', a: answer
 
-    #pagination= will_paginate @timeline, renderer: BootstrapPagination::Rails, page_links: false
+      #pagination= will_paginate @timeline, renderer: BootstrapPagination::Rails, page_links: false
 
-    - if @timeline.next_page
-      %button#load-more-btn.btn.btn-default{type: :button, data: { current_page: @timeline.current_page }}
-        = t 'views.actions.load'
-.visible-xs= render 'shared/links'
+      - if @timeline.next_page
+        %button#load-more-btn.btn.btn-default{type: :button, data: { current_page: @timeline.current_page }}
+          = t 'views.actions.load'
+.d-block.d-sm-none= render 'shared/links'
diff --git a/app/views/public/index.html.haml b/app/views/public/index.html.haml
index 6b8187f7..5c9a1e9a 100644
--- a/app/views/public/index.html.haml
+++ b/app/views/public/index.html.haml
@@ -1,18 +1,19 @@
 - provide(:title, generate_title("Public Timeline"))
 = render 'static/mobile_nav'
 .container.j2-page
-  .col-md-3.col-sm-4
-    = render 'shared/sidebar'
-  .col-md-9.col-xs-12.col-sm-8
-    = render 'layouts/messages'
+  .row
+    .col-md-3.col-sm-4
+      = render 'shared/sidebar'
+    .col-md-9.col-xs-12.col-sm-8
+      = render 'layouts/messages'
 
-    #timeline
-      - @timeline.each do |answer|
-        = render 'shared/answerbox', a: answer
+      #timeline
+        - @timeline.each do |answer|
+          = render 'shared/answerbox', a: answer
 
-    #pagination= will_paginate @timeline, renderer: BootstrapPagination::Rails, page_links: false
+      #pagination= will_paginate @timeline, renderer: BootstrapPagination::Rails, page_links: false
 
-    - if @timeline.next_page
-      %button#load-more-btn.btn.btn-default{type: :button, data: { current_page: @timeline.current_page }}
-        Load more
+      - if @timeline.next_page
+        %button#load-more-btn.btn.btn-default{type: :button, data: { current_page: @timeline.current_page }}
+          Load more
 .visible-xs= render 'shared/links'
diff --git a/app/views/static/index.html.haml b/app/views/static/index.html.haml
index 2abb97e6..c92f16f5 100644
--- a/app/views/static/index.html.haml
+++ b/app/views/static/index.html.haml
@@ -1,17 +1,18 @@
 - provide(:title, "#{APP_CONFIG['site_name']}")
 = render 'static/mobile_nav'
 .container.j2-page
-  .col-md-3.col-sm-4
-    = render 'shared/sidebar'
-  .col-md-9.col-xs-12.col-sm-8.j2-col-reset
-    = render 'layouts/messages'
-    #timeline
-      - @timeline.each do |answer|
-        = render 'shared/answerbox', a: answer
+  .row
+    .col-md-3.col-sm-4
+      = render 'shared/sidebar'
+    .col-md-9.col-xs-12.col-sm-8.j2-col-reset
+      = render 'layouts/messages'
+      #timeline
+        - @timeline.each do |answer|
+          = render 'shared/answerbox', a: answer
 
-    #pagination= will_paginate @timeline, renderer: BootstrapPagination::Rails, page_links: false
+      #pagination= will_paginate @timeline, renderer: BootstrapPagination::Rails, page_links: false
 
-    - if @timeline.next_page
-      %button#load-more-btn.btn.btn-default{type: :button, data: { current_page: @timeline.current_page }}
-        Load more
+      - if @timeline.next_page
+        %button#load-more-btn.btn.btn-default{type: :button, data: { current_page: @timeline.current_page }}
+          Load more
   .visible-xs= render 'shared/links'
\ No newline at end of file
diff --git a/app/views/user/groups.html.haml b/app/views/user/groups.html.haml
index 34cf914f..4dbd3927 100644
--- a/app/views/user/groups.html.haml
+++ b/app/views/user/groups.html.haml
@@ -3,19 +3,20 @@
 #profile--header{class: no_header}
   %img.profile--header-img{src: @user.profile_header.url(:web)}
 .container.j2-page.headerable{class: no_header}
-  .col-md-3.col-xs-12.col-sm-4
-    = render 'user/profile_info'
-    .hidden-xs= render 'shared/links'
-  .col-md-9.col-xs-12.col-sm-8
-    %h1.j2-lh.hidden-xs Groups
-    %h1.visible-xs Groups
+  .row
+    .col-md-3.col-xs-12.col-sm-4
+      = render 'user/profile_info'
+      .hidden-xs= render 'shared/links'
+    .col-md-9.col-xs-12.col-sm-8
+      %h1.j2-lh.hidden-xs Groups
+      %h1.visible-xs Groups
 
-    %ul
-      - @groups.each do |group|
-        %li
-          - if group.private?
-            %i.fa.fa-lock
-          = group.display_name
+      %ul
+        - @groups.each do |group|
+          %li
+            - if group.private?
+              %i.fa.fa-lock
+            = group.display_name
 
   .visible-xs= render 'shared/links'
 - if user_signed_in?
diff --git a/app/views/user/questions.html.haml b/app/views/user/questions.html.haml
index 628118ae..d0112447 100644
--- a/app/views/user/questions.html.haml
+++ b/app/views/user/questions.html.haml
@@ -3,19 +3,20 @@
 #profile--header{class: no_header}
   %img.profile--header-img{src: @user.profile_header.url(:web)}
 .container.j2-page.headerable{class: no_header}
-  .col-md-3.col-xs-12.col-sm-4.j2-col-reset
-    = render 'user/profile_info'
-    .hidden-xs= render 'shared/links'
-  .col-md-9.col-xs-12.col-sm-8.j2-col-reset
-    %h1.j2-lh.hidden-xs= @title
-    %h1.visible-xs= @title
-    #questions
-      - @questions.each do |q|
-        = render 'shared/question', q: q, type: nil
+  .row
+    .col-md-3.col-xs-12.col-sm-4.j2-col-reset
+      = render 'user/profile_info'
+      .hidden-xs= render 'shared/links'
+    .col-md-9.col-xs-12.col-sm-8.j2-col-reset
+      %h1.j2-lh.hidden-xs= @title
+      %h1.visible-xs= @title
+      #questions
+        - @questions.each do |q|
+          = render 'shared/question', q: q, type: nil
 
-    #pagination= will_paginate @questions, renderer: BootstrapPagination::Rails, page_links: false
+      #pagination= will_paginate @questions, renderer: BootstrapPagination::Rails, page_links: false
 
-    - if @questions.next_page
-      %button#load-more-btn.btn.btn-default{type: :button, data: { current_page: @questions.current_page }}
-        = t 'views.actions.load'
+      - if @questions.next_page
+        %button#load-more-btn.btn.btn-default{type: :button, data: { current_page: @questions.current_page }}
+          = t 'views.actions.load'
   .visible-xs= render 'shared/links'
diff --git a/app/views/user/show.html.haml b/app/views/user/show.html.haml
index 8e2d714a..dffc4e65 100644
--- a/app/views/user/show.html.haml
+++ b/app/views/user/show.html.haml
@@ -3,22 +3,23 @@
 #profile--header{class: no_header}
   %img.profile--header-img{src: @user.profile_header.url(:web)}
 .container.j2-page.headerable{class: no_header}
-  #profile-info.col-md-3.col-xs-12.col-sm-4.j2-col-reset
-    = render 'user/profile_info'
-    .hidden-xs= render 'shared/links'
-  .col-md-9.col-xs-12.col-sm-8.j2-col-reset
-    .profile--panel-push-inner.hidden-xs{class: no_header}
-    = render 'shared/questionbox'
-    - unless @user.banned?
-      #answers
-        - @answers.each do |a|
-          = render 'shared/answerbox', a: a
+  .row
+    #profile-info.col-md-3.col-xs-12.col-sm-4.j2-col-reset
+      = render 'user/profile_info'
+      .hidden-xs= render 'shared/links'
+    .col-md-9.col-xs-12.col-sm-8.j2-col-reset
+      .profile--panel-push-inner.hidden-xs{class: no_header}
+      = render 'shared/questionbox'
+      - unless @user.banned?
+        #answers
+          - @answers.each do |a|
+            = render 'shared/answerbox', a: a
 
-      #pagination= will_paginate @answers, renderer: BootstrapPagination::Rails, page_links: false
+        #pagination= will_paginate @answers, renderer: BootstrapPagination::Rails, page_links: false
 
-      - if @answers.next_page
-        %button#load-more-btn.btn.btn-default{type: :button, data: { current_page: @answers.current_page }}
-          = t 'views.actions.load'
+        - if @answers.next_page
+          %button#load-more-btn.btn.btn-default{type: :button, data: { current_page: @answers.current_page }}
+            = t 'views.actions.load'
   .visible-xs= render 'shared/links'
 - if user_signed_in?
   = render 'user/modal_group_memberships'
diff --git a/app/views/user/show_follow.html.haml b/app/views/user/show_follow.html.haml
index df39ac26..0c58c06a 100644
--- a/app/views/user/show_follow.html.haml
+++ b/app/views/user/show_follow.html.haml
@@ -3,22 +3,23 @@
 #profile--header{class: no_header}
   %img.profile--header-img{src: @user.profile_header.url(:web)}
 .container.j2-page.headerable{class: no_header}
-  .col-md-3.col-xs-12.col-sm-4.j2-col-reset
-    = render 'user/profile_info'
-    .hidden-xs= render 'shared/links'
-  .col-md-9.col-xs-12.col-sm-8.j2-col-reset
-    %h1.j2-lh.hidden-xs= @title
-    %h1.visible-xs= @title
-    #users
-      - @users.each do |user|
-        .col-md-4.col-sm-6.col-xs-12
-          = render 'shared/userbox', user: user
+  .row
+    .col-md-3.col-xs-12.col-sm-4.j2-col-reset
+      = render 'user/profile_info'
+      .hidden-xs= render 'shared/links'
+    .col-md-9.col-xs-12.col-sm-8.j2-col-reset
+      %h1.j2-lh.hidden-xs= @title
+      %h1.visible-xs= @title
+      #users
+        - @users.each do |user|
+          .col-md-4.col-sm-6.col-xs-12
+            = render 'shared/userbox', user: user
 
-    #pagination= will_paginate @users, renderer: BootstrapPagination::Rails, page_links: false
+      #pagination= will_paginate @users, renderer: BootstrapPagination::Rails, page_links: false
 
-    - if @users.next_page
-      %button#load-more-btn.btn.btn-default{type: :button, data: { current_page: @users.current_page }}
-        = t 'views.actions.load'
+      - if @users.next_page
+        %button#load-more-btn.btn.btn-default{type: :button, data: { current_page: @users.current_page }}
+          = t 'views.actions.load'
   .visible-xs= render 'shared/links'
 - if user_signed_in?
   = render 'user/modal_group_memberships'

From fa14859a6a8d84a1c60f4b805f329d3cb92376b0 Mon Sep 17 00:00:00 2001
From: Andreas Nedbal <andy@pixelde.su>
Date: Sun, 19 Apr 2020 23:13:39 +0200
Subject: [PATCH 006/172] Adjust dropdowns to Bootstrap 4 layout

---
 app/views/layouts/_notifications.html.haml    | 220 +++++++++---------
 app/views/layouts/_profile.html.haml          |  61 +++--
 app/views/moderation/_discussion.html.haml    |   9 +-
 app/views/shared/_answerbox.html.haml         |  24 +-
 app/views/shared/_answerbox_buttons.html.haml |  32 ++-
 app/views/shared/_comments.html.haml          |  23 +-
 6 files changed, 174 insertions(+), 195 deletions(-)

diff --git a/app/views/layouts/_notifications.html.haml b/app/views/layouts/_notifications.html.haml
index 34f27641..4a3583ff 100644
--- a/app/views/layouts/_notifications.html.haml
+++ b/app/views/layouts/_notifications.html.haml
@@ -8,119 +8,115 @@
       %i.fa.fa-bell
     %span.sr-only Notifications
     %span.badge= notification_count
-  %ul.dropdown-menu.notification-center
+  .dropdown-menu.notification-center
     - if notifications.count == 0
-      %li.text-center
-        .notifications--none
-          %i.fa.fa-bell-o.no-notifications
-          %p No new notifications.
-      %li.text-center
-        %a{href: notifications_path('all')}
-          %i.fa.fa-fw.fa-chevron-right
-          Show all notifications
+      .dropdown-item.text-center.notifications--none
+        %i.fa.fa-bell-o.no-notifications
+        %p No new notifications.
+      %a.dropdown-item.text-center{href: notifications_path('all')}
+        %i.fa.fa-fw.fa-chevron-right
+        Show all notifications
     - else
       - notifications.each do |notification|
-        %li
-          .media.notification--dropdown-media
-            - case notification.target_type
-              - when "Answer"
-                .pull-left
-                  %i.fa.fa-2x.fa-fw.fa-exclamation
-                .media-body
-                  .notification--heading
-                    %img.notification--img-sm{src: notification.target.user.profile_picture.url(:small)}
-                    = user_screen_name notification.target.user
-                    answered
-                    = link_to "your question", show_user_answer_path(username: notification.target.user.screen_name, id: notification.target.id)
-                    = time_tooltip(notification.target)
-                    ago
-                  .list-group.notification--list
-                    .list-group-item
-                      .media.question-media
-                        .media-body
-                          %h6.notification--list-heading question
-                          .notification--list-content
-                            = markdown notification.target.question.content[0..60] + "#{notification.target.question.content.length > 60 ? '[...]' : ''}"
-                    .list-group-item
-                      .media.question-media
-                        .media-body
-                          %h6.notification--list-heading answer
-                          .notification--list-content
-                            = markdown notification.target.content[0..60] + "#{notification.target.content.length > 60 ? '[...]' : ''}"
-              - when "Relationship"
-                .pull-left
-                  %img.img-rounded.notification--dropdown-img{src: notification.target.source.profile_picture.url(:small)}
-                .media-body
-                  %h6.media-heading.notification--dropdown-user
-                    = user_screen_name notification.target.source
-                  .notification--dropdown-text
-                    = raw t('views.notifications.relationship.body', time: time_ago_in_words(notification.target.created_at))
-              - when "Smile"
-                .pull-left
-                  %i.fa.fa-2x.fa-fw.fa-smile-o
-                .media-body
-                  .notification--heading
-                    %img.notification--img-sm{src: notification.target.user.profile_picture.url(:small)}
-                    = user_screen_name notification.target.user
-                    smiled
+        .dropdown-item.media.notification--dropdown-media
+          - case notification.target_type
+            - when "Answer"
+              .pull-left
+                %i.fa.fa-2x.fa-fw.fa-exclamation
+              .media-body
+                .notification--heading
+                  %img.notification--img-sm{src: notification.target.user.profile_picture.url(:small)}
+                  = user_screen_name notification.target.user
+                  answered
+                  = link_to "your question", show_user_answer_path(username: notification.target.user.screen_name, id: notification.target.id)
+                  = time_tooltip(notification.target)
+                  ago
+                .list-group.notification--list
+                  .list-group-item
+                    .media.question-media
+                      .media-body
+                        %h6.notification--list-heading question
+                        .notification--list-content
+                          = markdown notification.target.question.content[0..60] + "#{notification.target.question.content.length > 60 ? '[...]' : ''}"
+                  .list-group-item
+                    .media.question-media
+                      .media-body
+                        %h6.notification--list-heading answer
+                        .notification--list-content
+                          = markdown notification.target.content[0..60] + "#{notification.target.content.length > 60 ? '[...]' : ''}"
+            - when "Relationship"
+              .pull-left
+                %img.img-rounded.notification--dropdown-img{src: notification.target.source.profile_picture.url(:small)}
+              .media-body
+                %h6.media-heading.notification--dropdown-user
+                  = user_screen_name notification.target.source
+                .notification--dropdown-text
+                  = raw t('views.notifications.relationship.body', time: time_ago_in_words(notification.target.created_at))
+            - when "Smile"
+              .pull-left
+                %i.fa.fa-2x.fa-fw.fa-smile-o
+              .media-body
+                .notification--heading
+                  %img.notification--img-sm{src: notification.target.user.profile_picture.url(:small)}
+                  = user_screen_name notification.target.user
+                  smiled
+                  = link_to "your answer", show_user_answer_path(username: notification.target.user.screen_name, id: notification.target.answer.id)
+                  = time_tooltip(notification.target)
+                  ago
+                .list-group.notification--list
+                  .list-group-item
+                    .media.question-media
+                      .media-body
+                        %h6.notification--list-heading answer
+                        .notification--list-content
+                          = markdown notification.target.answer.content[0..60] + "#{notification.target.answer.content.length > 60 ? '[...]' : ''}"
+            - when "CommentSmile"
+              .pull-left
+                %i.fa.fa-2x.fa-fw.fa-smile-o
+              .media-body
+                .notification--heading
+                  %img.notification--img-sm{src: notification.target.user.profile_picture.url(:small)}
+                  = user_screen_name notification.target.user
+                  smiled
+                  = link_to "your comment", show_user_answer_path(username: notification.target.user.screen_name, id: notification.target.comment.answer.id)
+                  = time_tooltip(notification.target)
+                  ago
+                .list-group.notification--list
+                  .list-group-item
+                    .media.question-media
+                      .media-body
+                        %h6.notification--list-heading comment
+                        .notification--list-content
+                          = markdown notification.target.comment.content[0..60] + "#{notification.target.comment.content.length > 60 ? '[...]' : ''}"
+            - when "Comment"
+              .pull-left
+                %i.fa.fa-2x.fa-fw.fa-comments
+              .media-body
+                .notification--heading
+                  %img.notification--img-sm{src: notification.target.user.profile_picture.url(:small)}
+                  = user_screen_name notification.target.user
+                  commented on
+                  - if notification.target.answer.user == current_user
                     = link_to "your answer", show_user_answer_path(username: notification.target.user.screen_name, id: notification.target.answer.id)
-                    = time_tooltip(notification.target)
-                    ago
-                  .list-group.notification--list
-                    .list-group-item
-                      .media.question-media
-                        .media-body
-                          %h6.notification--list-heading answer
-                          .notification--list-content
-                            = markdown notification.target.answer.content[0..60] + "#{notification.target.answer.content.length > 60 ? '[...]' : ''}"
-              - when "CommentSmile"
-                .pull-left
-                  %i.fa.fa-2x.fa-fw.fa-smile-o
-                .media-body
-                  .notification--heading
-                    %img.notification--img-sm{src: notification.target.user.profile_picture.url(:small)}
-                    = user_screen_name notification.target.user
-                    smiled
-                    = link_to "your comment", show_user_answer_path(username: notification.target.user.screen_name, id: notification.target.comment.answer.id)
-                    = time_tooltip(notification.target)
-                    ago
-                  .list-group.notification--list
-                    .list-group-item
-                      .media.question-media
-                        .media-body
-                          %h6.notification--list-heading comment
-                          .notification--list-content
-                            = markdown notification.target.comment.content[0..60] + "#{notification.target.comment.content.length > 60 ? '[...]' : ''}"
-              - when "Comment"
-                .pull-left
-                  %i.fa.fa-2x.fa-fw.fa-comments
-                .media-body
-                  .notification--heading
-                    %img.notification--img-sm{src: notification.target.user.profile_picture.url(:small)}
-                    = user_screen_name notification.target.user
-                    commented on
-                    - if notification.target.answer.user == current_user
-                      = link_to "your answer", show_user_answer_path(username: notification.target.user.screen_name, id: notification.target.answer.id)
-                    - elsif notification.target.user == notification.target.answer.user
-                      = link_to "their answer", show_user_answer_path(username: notification.target.user.screen_name, id: notification.target.answer.id)
-                    - else
-                      = link_to "#{notification.target.answer.user.screen_name}'s answer", show_user_answer_path(username: notification.target.user.screen_name, id: notification.target.answer.id)
-                    = time_tooltip(notification.target)
-                    ago
-                  .list-group.notification--list
-                    .list-group-item
-                      .media.question-media
-                        .media-body
-                          %h6.notification--list-heading answer
-                          .notification--list-content
-                            = markdown notification.target.answer.content[0..60] + "#{notification.target.answer.content.length > 60 ? '[...]' : ''}"
-                    .list-group-item
-                      .media.question-media
-                        .media-body
-                          %h6.notification--list-heading comment
-                          .notification--list-content
-                            = markdown notification.target.content[0..60] + "#{notification.target.content.length > 60 ? '[...]' : ''}"
-      %li.text-center
-        %a{href: notifications_path}
-          %i.fa.fa-fw.fa-chevron-right
-          Show all new notifications
+                  - elsif notification.target.user == notification.target.answer.user
+                    = link_to "their answer", show_user_answer_path(username: notification.target.user.screen_name, id: notification.target.answer.id)
+                  - else
+                    = link_to "#{notification.target.answer.user.screen_name}'s answer", show_user_answer_path(username: notification.target.user.screen_name, id: notification.target.answer.id)
+                  = time_tooltip(notification.target)
+                  ago
+                .list-group.notification--list
+                  .list-group-item
+                    .media.question-media
+                      .media-body
+                        %h6.notification--list-heading answer
+                        .notification--list-content
+                          = markdown notification.target.answer.content[0..60] + "#{notification.target.answer.content.length > 60 ? '[...]' : ''}"
+                  .list-group-item
+                    .media.question-media
+                      .media-body
+                        %h6.notification--list-heading comment
+                        .notification--list-content
+                          = markdown notification.target.content[0..60] + "#{notification.target.content.length > 60 ? '[...]' : ''}"
+      %a.dropdown-item.text-center{href: notifications_path}
+        %i.fa.fa-fw.fa-chevron-right
+        Show all new notifications
diff --git a/app/views/layouts/_profile.html.haml b/app/views/layouts/_profile.html.haml
index 9983862f..4fdf6e52 100644
--- a/app/views/layouts/_profile.html.haml
+++ b/app/views/layouts/_profile.html.haml
@@ -1,41 +1,34 @@
 %li.dropdown.profile--image-dropdown
   %a.dropdown-toggle{href: "#", "data-toggle" => "dropdown"}
     %img.profile--image-avatar.hidden-xs{src: current_user.profile_picture.url(:small)}
-    %span.visible-xs
+    %span.d-none.d-sm-inline.d-md-none
       = current_user.screen_name
       %b.caret
-  %ul.dropdown-menu
-    %li.dropdown-header.hidden-xs= current_user.screen_name
-    %li
-      %a{href: show_user_profile_path(current_user.screen_name)}
-        %i.fa.fa-fw.fa-user
-        = t('views.navigation.show')
-    %li
-      %a{href: edit_user_registration_path}
-        %i.fa.fa-fw.fa-cog
-        = t('views.navigation.settings')
-    %li.divider
+  .dropdown-menu
+    %h6.dropdown-header.hidden-xs= current_user.screen_name
+    %a.dropdown-item{href: show_user_profile_path(current_user.screen_name)}
+      %i.fa.fa-fw.fa-user
+      = t('views.navigation.show')
+    %a.dropdown-item{href: edit_user_registration_path}
+      %i.fa.fa-fw.fa-cog
+      = t('views.navigation.settings')
+    .dropdown-divider
     - if current_user.admin?
-      %li
-        %a{href: rails_admin_path}
-          %i.fa.fa-fw.fa-cogs
-          = t('views.navigation.admin')
-      %li
-        %a{href: sidekiq_web_path}
-          %i.fa.fa-fw.fa-bar-chart
-          = t('views.navigation.sidekiq')
-      %li
-        %a{href: pghero_path}
-          %i.fa.fa-fw.fa-database
-          Database Monitor
-      %li.divider
+      %a.dropdown-item{href: rails_admin_path}
+        %i.fa.fa-fw.fa-cogs
+        = t('views.navigation.admin')
+      %a.dropdown-item{href: sidekiq_web_path}
+        %i.fa.fa-fw.fa-bar-chart
+        = t('views.navigation.sidekiq')
+      %a.dropdown-item{href: pghero_path}
+        %i.fa.fa-fw.fa-database
+        Database Monitor
+      .dropdown-divider
     - if current_user.mod?
-      %li
-        %a{href: moderation_path}
-          %i.fa.fa-fw.fa-gavel
-          = t('views.navigation.moderation')
-      %li.divider
-    %li
-      %a{href: destroy_user_session_path, data: {method: :delete} }
-        %i.fa.fa-fw.fa-sign-out
-        = t 'views.sessions.destroy'
+      %a.dropdown-item{href: moderation_path}
+        %i.fa.fa-fw.fa-gavel
+        = t('views.navigation.moderation')
+      .dropdown-divider
+    %a.dropdown-item{href: destroy_user_session_path, data: {method: :delete} }
+      %i.fa.fa-fw.fa-sign-out
+      = t 'views.sessions.destroy'
diff --git a/app/views/moderation/_discussion.html.haml b/app/views/moderation/_discussion.html.haml
index 66a41285..2872f42a 100644
--- a/app/views/moderation/_discussion.html.haml
+++ b/app/views/moderation/_discussion.html.haml
@@ -17,11 +17,10 @@
                 .btn-group
                   %button.btn.btn-link.btn-sm.dropdown-toggle{data: { toggle: :dropdown }, aria: { expanded: :false }}
                     %span.caret
-                  %ul.dropdown-menu.dropdown-menu-right{role: :menu}
-                    %li.text-danger
-                      %a{href: '#', tabindex: -1, data: { action: 'mod-comment-destroy', id: comment.id }}
-                        %i.fa.fa-trash-o
-                        = t 'views.actions.delete'
+                  .dropdown-menu.dropdown-menu-right{role: :menu}
+                    %a.dropdown-item.text-danger{href: '#', tabindex: -1, data: { action: 'mod-comment-destroy', id: comment.id }}
+                      %i.fa.fa-trash-o
+                      = t 'views.actions.delete'
             %p.comments--content= comment.content
 .form-group.has-feedback{name: 'mod-comment-new-group', data: { id: report.id }}
   %input.form-control.comments--box{type: :text, placeholder: t('views.placeholder.comment'), name: 'mod-comment-new', data: { id: report.id }}
diff --git a/app/views/shared/_answerbox.html.haml b/app/views/shared/_answerbox.html.haml
index 7439f1d9..03d0b851 100644
--- a/app/views/shared/_answerbox.html.haml
+++ b/app/views/shared/_answerbox.html.haml
@@ -1,6 +1,6 @@
-.panel.panel-default.answerbox{data: { id: a.id, q_id: a.question.id }}
+.card.card-default.answerbox{data: { id: a.id, q_id: a.question.id }}
   - if @question.nil?
-    .panel-heading
+    .card-header
       .media.question-media
         - unless a.question.author_is_anonymous
           %a.pull-left{href: show_user_profile_path(a.question.user.screen_name)}
@@ -11,17 +11,15 @@
               .btn-group
                 %button.btn.btn-link.btn-sm.dropdown-toggle{data: { toggle: :dropdown }, aria: { expanded: :false }}
                   %span.caret
-                %ul.dropdown-menu.dropdown-menu-right{role: :menu}
+                .dropdown-menu.dropdown-menu-right{role: :menu}
                   - if current_user.mod? or a.question.user == current_user
-                    %li.text-danger
-                      %a{href: '#', tabindex: -1, data: { action: 'ab-question-destroy', q_id: a.question.id }}
-                        %i.fa.fa-trash-o
-                        = t 'views.actions.delete'
+                    %a.dropdown-item.text-danger{href: '#', tabindex: -1, data: { action: 'ab-question-destroy', q_id: a.question.id }}
+                      %i.fa.fa-trash-o
+                      = t 'views.actions.delete'
                   - unless a.question.user == current_user
-                    %li
-                      %a{href: '#', tabindex: -1, data: { action: 'ab-question-report', q_id: a.question.id }}
-                        %i.fa.fa-exclamation-triangle
-                        = t 'views.actions.report'
+                    %a.dropdown-item{href: '#', tabindex: -1, data: { action: 'ab-question-report', q_id: a.question.id }}
+                      %i.fa.fa-exclamation-triangle
+                      = t 'views.actions.report'
           %h6.text-muted.media-heading.answerbox--question-user
             = raw t('views.answerbox.asked', user: user_screen_name(a.question.user, anonymous: a.question.author_is_anonymous), time: time_tooltip(a.question))
             - unless a.question.author_is_anonymous
@@ -31,7 +29,7 @@
                   = pluralize(a.question.answer_count, t('views.general.answer'))
           .answerbox--question-text
             = a.question.content
-  .panel-body
+  .card-body
     - if @display_all.nil?
       .answerbox--answer-text
         = markdown a.content[0..255]
@@ -64,6 +62,6 @@
           = link_to(raw(t('views.answerbox.time', time: time_tooltip(a))), show_user_answer_path(a.user.screen_name, a.id))
         .col-md-6.col-sm-8.col-xs-6.text-right
           = render 'shared/answerbox_buttons', a: a
-  .panel-footer{id: "ab-comments-section-#{a.id}", style: @display_all.nil? ? 'display: none' : nil }
+  .card-footer{id: "ab-comments-section-#{a.id}", style: @display_all.nil? ? 'display: none' : nil }
     %div{id: "ab-smiles-#{a.id}"}= render 'shared/smiles', a: a
     %div{id: "ab-comments-#{a.id}"}= render 'shared/comments', a: a
diff --git a/app/views/shared/_answerbox_buttons.html.haml b/app/views/shared/_answerbox_buttons.html.haml
index b8de32c4..d6aacc01 100644
--- a/app/views/shared/_answerbox_buttons.html.haml
+++ b/app/views/shared/_answerbox_buttons.html.haml
@@ -21,25 +21,21 @@
   .btn-group
     %button.btn.btn-default.btn-sm.dropdown-toggle{data: { toggle: :dropdown }, aria: { expanded: :false }}
       %span.caret
-    %ul.dropdown-menu.dropdown-menu-right{role: :menu}
+    .dropdown-menu.dropdown-menu-right{role: :menu}
       - if Subscription.is_subscribed(current_user, a)
-        %li
-          -#                                            fun joke    should subscribe?
-          %a{href: '#', data: { a_id: a.id, action: 'ab-submarine', torpedo: "no" }}
-            %i.fa.fa-anchor
-            = t 'views.actions.unsubscribe'
+        -#                                            fun joke    should subscribe?
+        %a.dropdown-item{href: '#', data: { a_id: a.id, action: 'ab-submarine', torpedo: "no" }}
+          %i.fa.fa-anchor
+          = t 'views.actions.unsubscribe'
       - else
-        %li
-          %a{href: '#', data: { a_id: a.id, action: 'ab-submarine', torpedo: "yes" }}
-            %i.fa.fa-anchor
-            = t 'views.actions.subscribe'
+        %a.dropdown-item{href: '#', data: { a_id: a.id, action: 'ab-submarine', torpedo: "yes" }}
+          %i.fa.fa-anchor
+          = t 'views.actions.subscribe'
       - if privileged? a.user
-        %li.text-danger
-          %a{href: '#', data: { a_id: a.id, action: 'ab-destroy' }}
-            %i.fa.fa-trash-o
-            = t 'views.actions.return'
+        %a.dropdown-item.text-danger{href: '#', data: { a_id: a.id, action: 'ab-destroy' }}
+          %i.fa.fa-trash-o
+          = t 'views.actions.return'
       - unless a.user == current_user
-        %li
-          %a{href: '#', data: { a_id: a.id, action: 'ab-report' }}
-            %i.fa.fa-exclamation-triangle
-            = t 'views.actions.report'
+        %a.dropdown-item{href: '#', data: { a_id: a.id, action: 'ab-report' }}
+          %i.fa.fa-exclamation-triangle
+          = t 'views.actions.report'
diff --git a/app/views/shared/_comments.html.haml b/app/views/shared/_comments.html.haml
index aa22431d..cf0c13c9 100644
--- a/app/views/shared/_comments.html.haml
+++ b/app/views/shared/_comments.html.haml
@@ -32,21 +32,18 @@
                 .btn-group
                   %button.btn.btn-link.btn-sm.dropdown-toggle{data: { toggle: :dropdown }, aria: { expanded: :false }}
                     %span.caret
-                  %ul.dropdown-menu.dropdown-menu-right{role: :menu}
-                    %li
-                      %a{href: '#', type: :button, data: { target: "#modal-view-comment#{comment.id}-smiles", toggle: :modal}}
-                        %i.fa.fa-smile-o
-                        = t 'views.actions.view'
+                  .dropdown-menu.dropdown-menu-right{role: :menu}
+                    %a.dropdown-item{href: '#', type: :button, data: { target: "#modal-view-comment#{comment.id}-smiles", toggle: :modal}}
+                      %i.fa.fa-smile-o
+                      = t 'views.actions.view'
                     - if privileged?(comment.user) or privileged?(a.user)
-                      %li.text-danger
-                        %a{href: '#', data: { action: 'ab-comment-destroy', c_id: comment.id }}
-                          %i.fa.fa-trash-o
-                          = t 'views.actions.delete'
+                      %a.dropdown-item.text-danger{href: '#', data: { action: 'ab-comment-destroy', c_id: comment.id }}
+                        %i.fa.fa-trash-o
+                        = t 'views.actions.delete'
                     - unless comment.user == current_user
-                      %li
-                        %a{href: '#', data: { action: 'ab-comment-report', c_id: comment.id }}
-                          %i.fa.fa-exclamation-triangle
-                          = t 'views.acions.report'
+                      %a.dropdown-item{href: '#', data: { action: 'ab-comment-report', c_id: comment.id }}
+                        %i.fa.fa-exclamation-triangle
+                        = t 'views.acions.report'
             .comments--content
               = markdown comment.content
 - if user_signed_in?

From efd2ff4db0b3042f426dc7ff3e28e665e1b7b6b4 Mon Sep 17 00:00:00 2001
From: Andreas Nedbal <andy@pixelde.su>
Date: Sun, 19 Apr 2020 23:14:05 +0200
Subject: [PATCH 007/172] Convert visibility classes to Bootstrap 4

---
 app/views/inbox/show.html.haml | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/app/views/inbox/show.html.haml b/app/views/inbox/show.html.haml
index 45c62ba0..84e6dfdd 100644
--- a/app/views/inbox/show.html.haml
+++ b/app/views/inbox/show.html.haml
@@ -1,7 +1,7 @@
 - provide(:title, generate_title("Inbox"))
 .container.j2-page
   .row
-    .col-md-3.col-xs-12.col-sm-4.hidden-xs
+    .col-md-3.col-xs-12.col-sm-4.d-none.d-sm-block
       = render 'inbox/sidebar'
     .col-md-9.col-xs-12.col-sm-8
       = render 'layouts/messages'
@@ -18,7 +18,7 @@
         %button#load-more-btn.btn.btn-default{type: :button, data: { current_page: @inbox.current_page }}
           = t 'views.actions.load'
 
-    .col-md-9.col-xs-12.col-sm-8.visible-xs
+    .col-md-9.col-xs-12.col-sm-8.d-block.d-sm-none
       = render 'inbox/sidebar'
 
 = render "shared/links"

From 21fceccf2f0209dcbac79da7decc4bdabe3a4e2b Mon Sep 17 00:00:00 2001
From: Andreas Nedbal <andy@pixelde.su>
Date: Sun, 19 Apr 2020 23:26:29 +0200
Subject: [PATCH 008/172] Adjust modal layouts to Bootstrap 4

---
 app/views/shared/_comment_smiles.html.haml        | 2 +-
 app/views/shared/_modal_ask_followers.html.haml   | 2 +-
 app/views/user/_account.html.haml                 | 2 +-
 app/views/user/_modal_ban.html.haml               | 4 ++--
 app/views/user/_modal_group_memberships.html.haml | 2 +-
 app/views/user/_modal_privileges.html.haml        | 4 ++--
 6 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/app/views/shared/_comment_smiles.html.haml b/app/views/shared/_comment_smiles.html.haml
index f3b8aebb..8eeb73c1 100644
--- a/app/views/shared/_comment_smiles.html.haml
+++ b/app/views/shared/_comment_smiles.html.haml
@@ -2,10 +2,10 @@
   .modal-dialog
     .modal-content
       .modal-header
+        %h5#modal-ask-followers-label.modal-title= t 'views.answerbox.commentsmile'
         %button.close{"data-dismiss" => "modal", :type => "button"}
           %span{"aria-hidden" => "true"} ×
           %span.sr-only Close
-        %h4#modal-ask-followers-label.modal-title= t 'views.answerbox.commentsmile'
       .modal-body
         - if comment.smiles.all.count == 0
           = t 'views.answerbox.no_smile'
diff --git a/app/views/shared/_modal_ask_followers.html.haml b/app/views/shared/_modal_ask_followers.html.haml
index c7d14b21..43d295d5 100644
--- a/app/views/shared/_modal_ask_followers.html.haml
+++ b/app/views/shared/_modal_ask_followers.html.haml
@@ -2,10 +2,10 @@
   .modal-dialog
     .modal-content
       .modal-header
+        %h5#modal-ask-followers-label.modal-title= t 'views.modal.ask.title'
         %button.close{"data-dismiss" => "modal", :type => "button"}
           %span{"aria-hidden" => "true"} ×
           %span.sr-only= t 'views.actions.close'
-        %h4#modal-ask-followers-label.modal-title= t 'views.modal.ask.title'
       .modal-body
         %textarea.form-control{:name => "qb-all-question", :placeholder => t('views.placeholder.question')}
       .modal-footer
diff --git a/app/views/user/_account.html.haml b/app/views/user/_account.html.haml
index f59e7a0c..ad597d53 100644
--- a/app/views/user/_account.html.haml
+++ b/app/views/user/_account.html.haml
@@ -12,10 +12,10 @@
               .modal-dialog
                 .modal-content
                   .modal-header
+                    %h5#modal-passwd-label.modal-title= t 'views.settings.account.modal.title'
                     %button.close{"data-dismiss" => "modal", :type => "button"}
                       %span{"aria-hidden" => "true"} ×
                       %span.sr-only= t 'views.actions.close'
-                    %h4#modal-passwd-label.modal-title= t 'views.settings.account.modal.title'
                   .modal-body
                     = f.password_field :current_password, autocomplete: "off", label: t('views.settings.account.password_current'), help: t('views.settings.account.password_current_help')
                   .modal-footer
diff --git a/app/views/user/_modal_ban.html.haml b/app/views/user/_modal_ban.html.haml
index 63b374bd..0e1d5752 100644
--- a/app/views/user/_modal_ban.html.haml
+++ b/app/views/user/_modal_ban.html.haml
@@ -2,11 +2,11 @@
   .modal-dialog
     .modal-content
       .modal-header
+        %h5#modal-ban-label.modal-title
+          = t 'views.modal.bancontrol.title'
         %button.close{"data-dismiss" => "modal", :type => "button"}
           %span{"aria-hidden" => "true"} ×
           %span.sr-only Close
-        %h4#modal-ban-label.modal-title
-          = t 'views.modal.bancontrol.title'
       = bootstrap_form_tag(url: '/mod/ban', html: { method: :post, novalidate: "novalidate" }) do |f|
         = f.hidden_field :user, value: @user.screen_name
         #ban-control-super.modal-body
diff --git a/app/views/user/_modal_group_memberships.html.haml b/app/views/user/_modal_group_memberships.html.haml
index b8b1265a..e9b144be 100644
--- a/app/views/user/_modal_group_memberships.html.haml
+++ b/app/views/user/_modal_group_memberships.html.haml
@@ -2,10 +2,10 @@
   .modal-dialog
     .modal-content
       .modal-header
+        %h5#modal-group-memberships-label.modal-title= t 'views.modal.group.title'
         %button.close{"data-dismiss" => "modal", :type => "button"}
           %span{"aria-hidden" => "true"} ×
           %span.sr-only= t 'views.actions.close'
-        %h4#modal-group-memberships-label.modal-title= t 'views.modal.group.title'
       %div{role: "tabpanel"}
         %ul.nav.nav-tabs{role: "tablist"}
           %li.active{role: "presentation"}
diff --git a/app/views/user/_modal_privileges.html.haml b/app/views/user/_modal_privileges.html.haml
index 351e030c..8bcfd008 100644
--- a/app/views/user/_modal_privileges.html.haml
+++ b/app/views/user/_modal_privileges.html.haml
@@ -2,11 +2,11 @@
   .modal-dialog
     .modal-content
       .modal-header
+        %h5#modal-privileges-label.modal-title
+          = raw t('views.actions.privilege', user: @user.screen_name)
         %button.close{"data-dismiss" => "modal", :type => "button"}
           %span{"aria-hidden" => "true"} ×
           %span.sr-only= t 'views.actions.close'
-        %h4#modal-privileges-label.modal-title
-          = raw t('views.actions.privilege', user: @user.screen_name)
       %ul.list-group.groups--list
         = render 'user/modal_privileges_item', privilege: 'blogger', description: t('views.modal.privilege.blogger'), user: @user
         = render 'user/modal_privileges_item', privilege: 'contributor', description: t('views.modal.privilege.contributor'), user: @user

From b5a833e917c712c474d41361b1dd98a939409b20 Mon Sep 17 00:00:00 2001
From: Andreas Nedbal <andy@pixelde.su>
Date: Sun, 19 Apr 2020 23:31:24 +0200
Subject: [PATCH 009/172] Remove superfluous card-default class

---
 app/views/discover/_userbox.html.haml                | 2 +-
 app/views/inbox/_sidebar.html.haml                   | 8 ++++----
 app/views/moderation/_moderation_tabs.html.haml      | 2 +-
 app/views/moderation/_moderationbox.html.haml        | 2 +-
 app/views/moderation/_userbox.html.haml              | 2 +-
 app/views/notifications/_notification_tabs.html.haml | 4 ++--
 app/views/notifications/index.html.haml              | 2 +-
 app/views/question/show.html.haml                    | 2 +-
 app/views/services/index.html.haml                   | 2 +-
 app/views/shared/_answerbox.html.haml                | 2 +-
 app/views/shared/_question.html.haml                 | 2 +-
 app/views/shared/_questionbox.html.haml              | 2 +-
 app/views/shared/_sidebar.html.haml                  | 6 +++---
 app/views/shared/_userbox.html.haml                  | 2 +-
 app/views/static/about.html.haml                     | 6 +++---
 app/views/static/faq.html.haml                       | 2 +-
 app/views/static/privacy_policy.html.haml            | 2 +-
 app/views/static/terms.html.haml                     | 2 +-
 app/views/user/_account.html.haml                    | 2 +-
 app/views/user/_profile_info.html.haml               | 2 +-
 app/views/user/_settings_tabs.html.haml              | 2 +-
 app/views/user/_stats.html.haml                      | 2 +-
 app/views/user/data.html.haml                        | 2 +-
 app/views/user/edit.html.haml                        | 2 +-
 app/views/user/edit_privacy.html.haml                | 2 +-
 app/views/user/edit_theme.html.haml                  | 2 +-
 app/views/user/export.haml                           | 2 +-
 27 files changed, 35 insertions(+), 35 deletions(-)

diff --git a/app/views/discover/_userbox.html.haml b/app/views/discover/_userbox.html.haml
index 2bbb3407..a61ba4d1 100644
--- a/app/views/discover/_userbox.html.haml
+++ b/app/views/discover/_userbox.html.haml
@@ -1,4 +1,4 @@
-.card.card-default.questionbox{data: { id: u.id }}
+.card.questionbox{data: { id: u.id }}
   .card-body
     .media
       .pull-left
diff --git a/app/views/inbox/_sidebar.html.haml b/app/views/inbox/_sidebar.html.haml
index 2f7fb425..06c5f8dc 100644
--- a/app/views/inbox/_sidebar.html.haml
+++ b/app/views/inbox/_sidebar.html.haml
@@ -1,9 +1,9 @@
-.card.card-default.inbox--panel
+.card.inbox--panel
   .card-header
     %h3.card-title= t 'views.inbox.sidebar.questions.title'
   .card-body
     %button.btn.btn-block.btn-info{type: :button, id: 'ib-generate-question'}= t 'views.inbox.sidebar.questions.button'
-.card.card-default.inbox--panel
+.card.inbox--panel
   .card-header
     %h3.card-title= t 'views.inbox.sidebar.share.title'
   .card-body
@@ -13,7 +13,7 @@
     %a.btn.btn-block.btn-primary{target: '_blank', href: "http://www.tumblr.com/share/link?url=#{show_user_profile_url(current_user.screen_name)}&name=Ask%20me%20anything%21"}
       %i.fa.fa-fw.fa-tumblr
       = raw t('views.inbox.sidebar.share.button', service: "Tumblr")
-.card.card-default.inbox--panel
+.card.inbox--panel
   .card-header
     %h3.card-title Show author
   .card-body
@@ -21,7 +21,7 @@
       = bootstrap_form_tag url: inbox_path, method: :get do |f|
         = f.text_field :author, value: params[:author], placeholder: "username", prepend: "@" , hide_label: true
         = f.button "Show", name: nil, class: "btn btn-default btn-block btn-sm", id: "ib-author"
-.card.card-default.warning--panel
+.card.warning--panel
   .card-header
     %h3.card-title= t 'views.inbox.sidebar.actions.title'
   .card-body
diff --git a/app/views/moderation/_moderation_tabs.html.haml b/app/views/moderation/_moderation_tabs.html.haml
index 22e410ec..5dbe3c6a 100644
--- a/app/views/moderation/_moderation_tabs.html.haml
+++ b/app/views/moderation/_moderation_tabs.html.haml
@@ -1,5 +1,5 @@
 .col-md-3.col-sm-4.col-xs-12
-  .card.card-default.hidden-xs
+  .card.hidden-xs
     .list-group
       = list_group_item t('views.moderation.tabs.all'), moderation_path
       = list_group_item t('views.general.answer').pluralize(2),     moderation_path('answer')
diff --git a/app/views/moderation/_moderationbox.html.haml b/app/views/moderation/_moderationbox.html.haml
index d0a1424e..2f74aba7 100644
--- a/app/views/moderation/_moderationbox.html.haml
+++ b/app/views/moderation/_moderationbox.html.haml
@@ -1,5 +1,5 @@
 - unless report.nil? or report.target.nil? or report.user.nil? or report.type.nil?
-  .card.card-default.moderationbox{data: { id: report.id }}
+  .card.moderationbox{data: { id: report.id }}
     .card-header
       %img.img-rounded.answerbox--img{src: gravatar_url(report.user)}
       = raw t('views.moderation.moderationbox.reported', user: user_screen_name(report.user), content: report.type.sub('Reports::', ''), time: time_tooltip(report))
diff --git a/app/views/moderation/_userbox.html.haml b/app/views/moderation/_userbox.html.haml
index 125ff753..07640f1b 100644
--- a/app/views/moderation/_userbox.html.haml
+++ b/app/views/moderation/_userbox.html.haml
@@ -1,5 +1,5 @@
 - header_class = if user.profile_header.exists? then "userbox--header-container" else "userbox--no-header" end
-.card.card-default
+.card
   %div{class: header_class}
     %img.userbox--header{src: user.profile_header.url(:mobile)}
   .card-body
diff --git a/app/views/notifications/_notification_tabs.html.haml b/app/views/notifications/_notification_tabs.html.haml
index 8ce3a95c..7d4389c0 100644
--- a/app/views/notifications/_notification_tabs.html.haml
+++ b/app/views/notifications/_notification_tabs.html.haml
@@ -1,10 +1,10 @@
 .col-md-3.col-xs-12.col-sm-4
-  .card.card-default.hidden-xs
+  .card.hidden-xs
     .list-group
       = list_group_item "New Notifications", notifications_path, badge: Notification.for(current_user).where(new: true).count
       = list_group_item "All Notifications", notifications_path('all')
 
-  .card.card-default.hidden-xs
+  .card.hidden-xs
     .card-header
       Filter by Type
     .list-group
diff --git a/app/views/notifications/index.html.haml b/app/views/notifications/index.html.haml
index 0b89b94f..7d75ef93 100644
--- a/app/views/notifications/index.html.haml
+++ b/app/views/notifications/index.html.haml
@@ -3,7 +3,7 @@
 .container.j2-page
   = render 'notification_tabs'
   .col-md-9.col-xs-12.col-sm-8
-    .card.card-default
+    .card
       %ul#notifications.list-group
         - if @notifications.count == 0
           %li.list-group-item.text-center
diff --git a/app/views/question/show.html.haml b/app/views/question/show.html.haml
index 073b074f..a5510141 100644
--- a/app/views/question/show.html.haml
+++ b/app/views/question/show.html.haml
@@ -15,7 +15,7 @@
       Load more
 
   - if user_signed_in? and !current_user.answered? @question and current_user != @question.user and @question.user.privacy_allow_stranger_answers
-    .card.card-default#q-answer-box
+    .card#q-answer-box
       .card-header
         %h3.card-title= t('views.question.title')
       .card-body
diff --git a/app/views/services/index.html.haml b/app/views/services/index.html.haml
index 6062d91b..597eb966 100644
--- a/app/views/services/index.html.haml
+++ b/app/views/services/index.html.haml
@@ -4,7 +4,7 @@
     = render 'user/settings_tabs'
     .col-md-9.col-xs-12.col-sm-8
       = render 'layouts/messages'
-      .card.card-default
+      .card
         .card-body
           - if @services.count > 0
             = t 'views.settings.service.enabled'
diff --git a/app/views/shared/_answerbox.html.haml b/app/views/shared/_answerbox.html.haml
index 03d0b851..2bf170e4 100644
--- a/app/views/shared/_answerbox.html.haml
+++ b/app/views/shared/_answerbox.html.haml
@@ -1,4 +1,4 @@
-.card.card-default.answerbox{data: { id: a.id, q_id: a.question.id }}
+.card.answerbox{data: { id: a.id, q_id: a.question.id }}
   - if @question.nil?
     .card-header
       .media.question-media
diff --git a/app/views/shared/_question.html.haml b/app/views/shared/_question.html.haml
index b4d04d56..ff0f5e4d 100644
--- a/app/views/shared/_question.html.haml
+++ b/app/views/shared/_question.html.haml
@@ -1,5 +1,5 @@
 - type ||= nil
-.card.card-default.questionbox{data: { id: q.id }}
+.card.questionbox{data: { id: q.id }}
   .card-body
     .media
       - if type == "discover"
diff --git a/app/views/shared/_questionbox.html.haml b/app/views/shared/_questionbox.html.haml
index 4233f71b..f79ade27 100644
--- a/app/views/shared/_questionbox.html.haml
+++ b/app/views/shared/_questionbox.html.haml
@@ -1,4 +1,4 @@
-.card.card-default
+.card
   .card-header
     %h3.card-title
       - if @user.motivation_header.blank?
diff --git a/app/views/shared/_sidebar.html.haml b/app/views/shared/_sidebar.html.haml
index 8e6d8e92..e73bba24 100644
--- a/app/views/shared/_sidebar.html.haml
+++ b/app/views/shared/_sidebar.html.haml
@@ -1,5 +1,5 @@
 - header_class = if current_user.profile_header.exists? then "userbox--header-container" else "userbox--no-header" end
-.card.card-default.hidden-xs
+.card.hidden-xs
   %div{class: header_class}
     %img.userbox--header{src: current_user.profile_header.url(:mobile)}
   .card-body
@@ -22,7 +22,7 @@
         .col-md-6.col-sm-6.col-xs-6
           %h4.entry-text#friend-count= current_user.friend_count
           %h6.entry-subtext= t('views.general.following')
-.card.card-default.hidden-xs
+.card.hidden-xs
   .list-group
     = list_group_item t('views.general.timeline'), root_path
     - if APP_CONFIG.dig(:features, :public, :enabled)
@@ -30,7 +30,7 @@
     - current_user.groups.each do |group|
       = list_group_item group.display_name, group_timeline_path(group.name)
 - unless @group.nil?
-  .card.card-default.profile--panel.hidden-xs
+  .card.profile--panel.hidden-xs
     .card-header
       %h3.card-title= t('views.group.members')
     .card-body
diff --git a/app/views/shared/_userbox.html.haml b/app/views/shared/_userbox.html.haml
index 84b5dd28..8757615a 100644
--- a/app/views/shared/_userbox.html.haml
+++ b/app/views/shared/_userbox.html.haml
@@ -1,6 +1,6 @@
 - type ||= @type || :nil
 - header_class = if user.profile_header.exists? then "userbox--header-container" else "userbox--no-header" end
-.card.card-default
+.card
   %div{class: header_class}
     %img.userbox--header{src: user.profile_header.url(:mobile)}
   .card-body
diff --git a/app/views/static/about.html.haml b/app/views/static/about.html.haml
index 771f34bd..ba1d0645 100644
--- a/app/views/static/about.html.haml
+++ b/app/views/static/about.html.haml
@@ -5,7 +5,7 @@
     %h1= APP_CONFIG['site_name']
     %p= t 'views.about.subtitle'
 .container
-  .card.card-default
+  .card
     .card-body
       .row
         .col-md-4
@@ -23,7 +23,7 @@
               %i.fa.fa-question
           %h4.heading-about.text-center
             FAQ
-  .card.card-default
+  .card
     .card-body
       .row
         .col-md-4
@@ -45,7 +45,7 @@
             - User.where(contributor: true).each do |sup|
               %a{href: show_user_profile_path(sup.screen_name), title: sup.screen_name, data: { toggle: :tooltip, placement: :top }}
                 %img.img-rounded.answerbox--img-small{src: sup.profile_picture.url(:medium)}
-  .card.card-default
+  .card
     .card-body
       .row
         .col-md-3.col-sm-12.col-xs-12
diff --git a/app/views/static/faq.html.haml b/app/views/static/faq.html.haml
index 976e3e0b..d1030093 100644
--- a/app/views/static/faq.html.haml
+++ b/app/views/static/faq.html.haml
@@ -8,6 +8,6 @@
       = succeed '!' do
         = APP_CONFIG['site_name']
 .container
-  .card.card-default
+  .card
     .card-body
       = raw_markdown_io "service-docs/en/help/faq.md"
diff --git a/app/views/static/privacy_policy.html.haml b/app/views/static/privacy_policy.html.haml
index 1ba41719..f4efae48 100644
--- a/app/views/static/privacy_policy.html.haml
+++ b/app/views/static/privacy_policy.html.haml
@@ -1,5 +1,5 @@
 - provide(:title, generate_title("Privacy Policy"))
 .container.j2-page
-  .card.card-default
+  .card
     .card-body
       = raw_markdown_io "service-docs/en/policy/privacy.md"
diff --git a/app/views/static/terms.html.haml b/app/views/static/terms.html.haml
index 646e5c14..c474715e 100644
--- a/app/views/static/terms.html.haml
+++ b/app/views/static/terms.html.haml
@@ -1,5 +1,5 @@
 - provide(:title, generate_title("Terms of Service"))
 .container.j2-page
-  .card.card-default
+  .card
     .card-body
       = raw_markdown_io "service-docs/en/policy/terms.md"
diff --git a/app/views/user/_account.html.haml b/app/views/user/_account.html.haml
index ad597d53..f4fd1b98 100644
--- a/app/views/user/_account.html.haml
+++ b/app/views/user/_account.html.haml
@@ -4,7 +4,7 @@
     = render 'user/settings_tabs'
     .col-md-9.col-xs-12.col-sm-8
       = render 'layouts/messages'
-      .card.card-default
+      .card
         .card-body
           = bootstrap_form_for(resource, as: resource_name, url: '/settings/account', html: { method: :put }) do |f|
             / Password field modal
diff --git a/app/views/user/_profile_info.html.haml b/app/views/user/_profile_info.html.haml
index a80c0cc4..c00d5533 100644
--- a/app/views/user/_profile_info.html.haml
+++ b/app/views/user/_profile_info.html.haml
@@ -1,4 +1,4 @@
-.card.card-default#profile
+.card#profile
   %img.profile--avatar{src: @user.profile_picture.url(:large)}
   - if user_signed_in? && current_user.admin?
     - if @user.admin?
diff --git a/app/views/user/_settings_tabs.html.haml b/app/views/user/_settings_tabs.html.haml
index 6cfec4d7..d12b60fc 100644
--- a/app/views/user/_settings_tabs.html.haml
+++ b/app/views/user/_settings_tabs.html.haml
@@ -1,5 +1,5 @@
 .col-md-3.col-xs-12.col-sm-4
-  .card.card-default
+  .card
     .list-group
       = list_group_item t('views.settings.tabs.account'), edit_user_registration_path
       = list_group_item t('views.settings.tabs.profile'), edit_user_profile_path
diff --git a/app/views/user/_stats.html.haml b/app/views/user/_stats.html.haml
index 3937687d..189da614 100644
--- a/app/views/user/_stats.html.haml
+++ b/app/views/user/_stats.html.haml
@@ -1,4 +1,4 @@
-.card.card-default.profile--panel#profile-stats
+.card.profile--panel#profile-stats
   .card-header
     %h3.card-title Stats
   .card-body
diff --git a/app/views/user/data.html.haml b/app/views/user/data.html.haml
index 80442463..5e5d4b86 100644
--- a/app/views/user/data.html.haml
+++ b/app/views/user/data.html.haml
@@ -3,7 +3,7 @@
   .row
     = render 'settings_tabs'
     .col-md-9.col-xs-12.col-sm-8
-      .card.card-default
+      .card
         .card-body
           %h2 Your Profile Data
           %p Everything we have about you! Really, not that much as you might expect.
diff --git a/app/views/user/edit.html.haml b/app/views/user/edit.html.haml
index 76c635ae..6dd70f53 100644
--- a/app/views/user/edit.html.haml
+++ b/app/views/user/edit.html.haml
@@ -4,7 +4,7 @@
     = render 'settings_tabs'
     .col-md-9.col-xs-12.col-sm-9
       = render 'layouts/messages'
-      .card.card-default
+      .card
         .card-body
           = bootstrap_form_for(current_user, url: {action: "edit"}, :html => { :multipart => true }, method: "patch") do |f|
 
diff --git a/app/views/user/edit_privacy.html.haml b/app/views/user/edit_privacy.html.haml
index a5524f60..11d2920a 100644
--- a/app/views/user/edit_privacy.html.haml
+++ b/app/views/user/edit_privacy.html.haml
@@ -4,7 +4,7 @@
     = render 'settings_tabs'
     .col-md-9.col-xs-12.col-sm-8
       = render 'layouts/messages'
-      .card.card-default
+      .card
         .card-body
           = bootstrap_form_for(current_user, url: {action: "edit_privacy"}, method: "patch") do |f|
 
diff --git a/app/views/user/edit_theme.html.haml b/app/views/user/edit_theme.html.haml
index f82546a3..b551db07 100644
--- a/app/views/user/edit_theme.html.haml
+++ b/app/views/user/edit_theme.html.haml
@@ -4,7 +4,7 @@
     = render 'settings_tabs'
     .col-md-9.col-xs-12.col-sm-8
       = render 'layouts/messages'
-      .card.card-default
+      .card
         .card-body
           %b Presets:
           %a{href: '#', class: 'theme_preset', data: {preset: 'rs'}} Retrospring Purple,
diff --git a/app/views/user/export.haml b/app/views/user/export.haml
index 91e58bd8..acbc41ff 100644
--- a/app/views/user/export.haml
+++ b/app/views/user/export.haml
@@ -4,7 +4,7 @@
     = render 'settings_tabs'
     .col-md-9.col-xs-12.col-sm-8
       = render 'layouts/messages'
-      .card.card-default
+      .card
         .card-body
           %h2 Export your data
           %p

From 0c3dee30ae5949bc32790e189b85614b7b89c356 Mon Sep 17 00:00:00 2001
From: Andreas Nedbal <andy@pixelde.su>
Date: Sun, 19 Apr 2020 23:34:09 +0200
Subject: [PATCH 010/172] Add row to notification list

---
 app/views/notifications/index.html.haml | 41 +++++++++++++------------
 1 file changed, 21 insertions(+), 20 deletions(-)

diff --git a/app/views/notifications/index.html.haml b/app/views/notifications/index.html.haml
index 7d75ef93..ec63b653 100644
--- a/app/views/notifications/index.html.haml
+++ b/app/views/notifications/index.html.haml
@@ -1,26 +1,27 @@
 - provide(:title, generate_title("Notifications"))
 = render 'notifications/notification_nav'
 .container.j2-page
-  = render 'notification_tabs'
-  .col-md-9.col-xs-12.col-sm-8
-    .card
-      %ul#notifications.list-group
-        - if @notifications.count == 0
-          %li.list-group-item.text-center
-            .notifications--none
-              %i.fa.fa-bell-o.no-notifications
-            %p
-              - if params[:type] != "all"
-                No new notifications.
-              - else
-                No notifications.
-        - else
-          - @notifications.each do |notification|
-            = render 'notifications/notification', notification: notification
+  .row
+    = render 'notification_tabs'
+    .col-md-9.col-xs-12.col-sm-8
+      .card
+        %ul#notifications.list-group
+          - if @notifications.count == 0
+            %li.list-group-item.text-center
+              .notifications--none
+                %i.fa.fa-bell-o.no-notifications
+              %p
+                - if params[:type] != "all"
+                  No new notifications.
+                - else
+                  No notifications.
+          - else
+            - @notifications.each do |notification|
+              = render 'notifications/notification', notification: notification
 
-    #pagination= will_paginate @notifications, renderer: BootstrapPagination::Rails, page_links: false
+      #pagination= will_paginate @notifications, renderer: BootstrapPagination::Rails, page_links: false
 
-    - if @notifications.next_page
-      %button#load-more-btn.btn.btn-default{type: :button, data: { current_page: @notifications.current_page }}
-        Load more
+      - if @notifications.next_page
+        %button#load-more-btn.btn.btn-default{type: :button, data: { current_page: @notifications.current_page }}
+          Load more
 - Notification.for(current_user).update_all(new: false)

From 3994917ce9dcee42c60a0498084fb5871580a38e Mon Sep 17 00:00:00 2001
From: Andreas Nedbal <andy@pixelde.su>
Date: Sun, 19 Apr 2020 23:42:37 +0200
Subject: [PATCH 011/172] Adjust notification navigation to Bootstrap 4

---
 app/views/notifications/_notification_nav.html.haml | 13 +++++--------
 1 file changed, 5 insertions(+), 8 deletions(-)

diff --git a/app/views/notifications/_notification_nav.html.haml b/app/views/notifications/_notification_nav.html.haml
index 59a54d56..cc71f8cb 100644
--- a/app/views/notifications/_notification_nav.html.haml
+++ b/app/views/notifications/_notification_nav.html.haml
@@ -1,12 +1,9 @@
-%nav.navbar.navbar-default.navbar-static-top.j2-navbar.visible-xs{role: "navigation"}
+%nav.navbar.navbar-default.navbar-static-top.j2-navbar.d-block.d-sm-none{role: "navigation"}
   .container
-    .navbar-header
-      %button.navbar-toggle{"data-target" => "#j2-tl-navbar-collapse", "data-toggle" => "collapse", type: "button"}
-        %span.sr-only Toggle navigation
-        %span.icon-bar
-        %span.icon-bar
-        %span.icon-bar
-      %a.navbar-brand{href: notifications_path} Notifications
+    %a.navbar-brand{href: notifications_path} Notifications
+    %button.navbar-toggler{"data-target" => "#j2-tl-navbar-collapse", "data-toggle" => "collapse", type: "button"}
+      %span.sr-only Toggle navigation
+      %span.navbar-toggler-icon
     #j2-tl-navbar-collapse.collapse.navbar-collapse
       %ul.nav.navbar-nav
         = nav_entry "New Notifications", notifications_path

From 2dbc6eff0146e007287ecf897b790940446eefc8 Mon Sep 17 00:00:00 2001
From: Andreas Nedbal <andy@pixelde.su>
Date: Mon, 20 Apr 2020 00:04:01 +0200
Subject: [PATCH 012/172] Adjust navbar styling

---
 app/assets/stylesheets/scss/navbar.scss | 42 +++----------------------
 app/views/layouts/_header.html.haml     |  2 +-
 2 files changed, 6 insertions(+), 38 deletions(-)

diff --git a/app/assets/stylesheets/scss/navbar.scss b/app/assets/stylesheets/scss/navbar.scss
index d6ee5188..6dd81f30 100644
--- a/app/assets/stylesheets/scss/navbar.scss
+++ b/app/assets/stylesheets/scss/navbar.scss
@@ -123,49 +123,17 @@
 }
 
 .profile--image-avatar {
-  min-height: 50px;
-  min-width: 50px;
-  height: 50px;
-  width: 50px;
+  min-height: 40px;
+  min-width: 40px;
+  height: 40px;
+  width: 40px;
+  border-radius: 4px;
 }
 
 .navbar-inverse {
   border: none;
 }
 
-@media (min-width: 769px) {
-  nav.navbar .nav > li:not(.profile--image-dropdown) {
-    -moz-osx-font-smoothing: grayscale;
-    position: relative;
-
-    &:before {
-        content: "";
-        position: absolute;
-        left: 0;
-        right: 0;
-        bottom: 0;
-        background: $navbar-inverse-link-color;
-        height: 0px;
-        -webkit-transition-property: height;
-        transition-property: height;
-        -webkit-transition-duration: 0.3s;
-        transition-duration: 0.3s;
-        -webkit-transition-timing-function: ease-out;
-        transition-timing-function: ease-out;
-    }
-
-    &:hover, &:focus, &:active {
-      &:before {
-        height: 4px
-      }
-    }
-
-    &.active:before {
-      height: 4px;
-    }
-  }
-}
-
 @media (max-width: 768px) {
   nav.navbar .nav {
     margin-bottom: 0;
diff --git a/app/views/layouts/_header.html.haml b/app/views/layouts/_header.html.haml
index bbd1d14d..897295f9 100644
--- a/app/views/layouts/_header.html.haml
+++ b/app/views/layouts/_header.html.haml
@@ -1,4 +1,4 @@
-%nav.navbar.navbar-light.navbar-expand-lg.bg-primary.fixed-top{role: "navigation"}
+%nav.navbar.navbar-dark.navbar-expand-lg.bg-primary.fixed-top{role: "navigation"}
   .container{class: ios_web_app? ? "ios-web-app" : ''}
     %a.navbar-brand{href: "/"}= APP_CONFIG['site_name']
     %button.navbar-toggler{"data-target" => "#j2-main-navbar-collapse", "data-toggle" => "collapse", type: "button"}

From 1aec0f95a41c5cdb523eb80a04043394a6f9ae4b Mon Sep 17 00:00:00 2001
From: Andreas Nedbal <andy@pixelde.su>
Date: Sat, 25 Apr 2020 13:02:20 +0200
Subject: [PATCH 013/172] Add configurable asset caching for Docker on Windows
 environments

---
 config/initializers/assets.rb | 10 +++++++++-
 docker-compose.yml            |  4 +++-
 2 files changed, 12 insertions(+), 2 deletions(-)

diff --git a/config/initializers/assets.rb b/config/initializers/assets.rb
index e321065f..75540cd5 100644
--- a/config/initializers/assets.rb
+++ b/config/initializers/assets.rb
@@ -1,5 +1,13 @@
 # Be sure to restart your server when you modify this file.
 
+Rails.application.config.assets.configure do |env|
+  env.cache = Sprockets::Cache::FileStore.new(
+    ENV.fetch("SPROCKETS_CACHE", "#{env.root}/tmp/cache/assets"),
+    Rails.application.config.assets.cache_limit,
+    env.logger
+  )
+end
+
 # Version of your assets, change this if you want to expire all your assets.
 Rails.application.config.assets.version = '1.0'
 
@@ -9,4 +17,4 @@ Rails.application.config.assets.version = '1.0'
 # Precompile additional assets.
 # application.js, application.css, and all non-JS/CSS in app/assets folder are already added.
 Rails.application.config.assets.precompile += %w( moderation.js )
-Rails.application.config.assets.precompile += %w( i18n.js )
+Rails.application.config.assets.precompile += %w( i18n.js )
\ No newline at end of file
diff --git a/docker-compose.yml b/docker-compose.yml
index 42c43d33..659d7afe 100644
--- a/docker-compose.yml
+++ b/docker-compose.yml
@@ -10,9 +10,11 @@ services:
     links:
       - postgres
       - redis
+    environment:
+      - SPROCKETS_CACHE=/cache
     volumes:
       - ./:/app
-      - cache:/app/tmp/cache
+      - cache:/cache
     ports:
       - 3000:3000
 

From 3885c24825afa625fa7d470ad3bef38d421c24b4 Mon Sep 17 00:00:00 2001
From: Andreas Nedbal <andy@pixelde.su>
Date: Sat, 25 Apr 2020 14:29:52 +0200
Subject: [PATCH 014/172] Properly align navbar when not signed in

---
 app/views/layouts/_header.html.haml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/views/layouts/_header.html.haml b/app/views/layouts/_header.html.haml
index 897295f9..5a403c0c 100644
--- a/app/views/layouts/_header.html.haml
+++ b/app/views/layouts/_header.html.haml
@@ -24,7 +24,7 @@
               %i.fa.fa-pencil-square-o
           = render "layouts/profile"
       - else
-        %ul.nav.navbar-nav.navbar-right
+        %ul.nav.navbar-nav.ml-auto
           = nav_entry t('views.sessions.create'), new_user_session_path
           = nav_entry t('views.sessions.new'), new_user_registration_path
 

From 96309eb8bacfa45134d9a0708dd5d6787c076cae Mon Sep 17 00:00:00 2001
From: Andreas Nedbal <andy@pixelde.su>
Date: Sat, 25 Apr 2020 15:16:45 +0200
Subject: [PATCH 015/172] Move all modals into shared views/modal directory

---
 app/controllers/ajax/group_controller.rb      |  2 +-
 app/views/layouts/_header.html.haml           |  2 +-
 .../_ask.html.haml}                           |  0
 .../_ban.html.haml}                           |  0
 .../_comment_smiles.html.haml                 |  0
 .../_group.html.haml}                         |  2 +-
 app/views/modal/_password.html.haml           | 13 +++++++++++++
 app/views/modal/_privileges.html.haml         | 19 +++++++++++++++++++
 .../group/_item.html.haml}                    |  0
 .../privileges/_item.html.haml}               |  0
 app/views/shared/_comments.html.haml          |  2 +-
 app/views/user/_account.html.haml             | 15 +--------------
 app/views/user/_modal_privileges.html.haml    | 19 -------------------
 app/views/user/show.html.haml                 |  6 +++---
 14 files changed, 40 insertions(+), 40 deletions(-)
 rename app/views/{shared/_modal_ask_followers.html.haml => modal/_ask.html.haml} (100%)
 rename app/views/{user/_modal_ban.html.haml => modal/_ban.html.haml} (100%)
 rename app/views/{shared => modal}/_comment_smiles.html.haml (100%)
 rename app/views/{user/_modal_group_memberships.html.haml => modal/_group.html.haml} (95%)
 create mode 100644 app/views/modal/_password.html.haml
 create mode 100644 app/views/modal/_privileges.html.haml
 rename app/views/{user/_modal_group_item.html.haml => modal/group/_item.html.haml} (100%)
 rename app/views/{user/_modal_privileges_item.html.haml => modal/privileges/_item.html.haml} (100%)
 delete mode 100644 app/views/user/_modal_privileges.html.haml

diff --git a/app/controllers/ajax/group_controller.rb b/app/controllers/ajax/group_controller.rb
index 0c803c4f..b3102489 100644
--- a/app/controllers/ajax/group_controller.rb
+++ b/app/controllers/ajax/group_controller.rb
@@ -45,7 +45,7 @@ class Ajax::GroupController < ApplicationController
     @status = :okay
     @success = true
     @message = I18n.t('messages.group.create.okay')
-    @render = render_to_string(partial: 'user/modal_group_item', locals: { group: group, user: target_user })
+    @render = render_to_string(partial: 'modal/group/item', locals: { group: group, user: target_user })
   end
 
   def destroy
diff --git a/app/views/layouts/_header.html.haml b/app/views/layouts/_header.html.haml
index 5a403c0c..07087947 100644
--- a/app/views/layouts/_header.html.haml
+++ b/app/views/layouts/_header.html.haml
@@ -29,6 +29,6 @@
           = nav_entry t('views.sessions.new'), new_user_registration_path
 
 - if user_signed_in?
-  = render 'shared/modal_ask_followers'
+  = render 'modal/ask'
   %button.btn.btn-primary.btn-fab.d-block.d-sm-none{"data-target" => "#modal-ask-followers", "data-toggle" => "modal", :type => "button"}
     %i.fa.fa-pencil-square-o
diff --git a/app/views/shared/_modal_ask_followers.html.haml b/app/views/modal/_ask.html.haml
similarity index 100%
rename from app/views/shared/_modal_ask_followers.html.haml
rename to app/views/modal/_ask.html.haml
diff --git a/app/views/user/_modal_ban.html.haml b/app/views/modal/_ban.html.haml
similarity index 100%
rename from app/views/user/_modal_ban.html.haml
rename to app/views/modal/_ban.html.haml
diff --git a/app/views/shared/_comment_smiles.html.haml b/app/views/modal/_comment_smiles.html.haml
similarity index 100%
rename from app/views/shared/_comment_smiles.html.haml
rename to app/views/modal/_comment_smiles.html.haml
diff --git a/app/views/user/_modal_group_memberships.html.haml b/app/views/modal/_group.html.haml
similarity index 95%
rename from app/views/user/_modal_group_memberships.html.haml
rename to app/views/modal/_group.html.haml
index e9b144be..2d735306 100644
--- a/app/views/user/_modal_group_memberships.html.haml
+++ b/app/views/modal/_group.html.haml
@@ -19,7 +19,7 @@
           .tab-pane.active{role:"tabpanel", id: "grouplist"}
             %ul.list-group.groups--list
               - current_user.groups.each do |group|
-                = render 'user/modal_group_item', group: group, user: @user
+                = render 'modal/group/item', group: group, user: @user
           .tab-pane{role:"tabpanel", id: "create"}
             .modal-body
               %input#new-group-name.form-control{type: :text, placeholder: t('views.modal.group.name')}
diff --git a/app/views/modal/_password.html.haml b/app/views/modal/_password.html.haml
new file mode 100644
index 00000000..7d411fb8
--- /dev/null
+++ b/app/views/modal/_password.html.haml
@@ -0,0 +1,13 @@
+#modal-passwd.modal.fade{"aria-hidden" => "true", "aria-labelledby" => "modal-passwd-label", :role => "dialog", :tabindex => "-1"}
+  .modal-dialog
+    .modal-content
+      .modal-header
+        %h5#modal-passwd-label.modal-title= t 'views.settings.account.modal.title'
+        %button.close{"data-dismiss" => "modal", :type => "button"}
+          %span{"aria-hidden" => "true"} ×
+          %span.sr-only= t 'views.actions.close'
+      .modal-body
+        = f.password_field :current_password, autocomplete: "off", label: t('views.settings.account.password_current'), help: t('views.settings.account.password_current_help')
+      .modal-footer
+        %button.btn.btn-default{"data-dismiss" => "modal", :type => "button"}= t 'views.actions.cancel'
+        %button.btn.btn-primary{:type => "submit"}= t 'views.actions.save'
\ No newline at end of file
diff --git a/app/views/modal/_privileges.html.haml b/app/views/modal/_privileges.html.haml
new file mode 100644
index 00000000..99d77ed9
--- /dev/null
+++ b/app/views/modal/_privileges.html.haml
@@ -0,0 +1,19 @@
+#modal-privileges.modal.fade{"aria-hidden" => "true", "aria-labelledby" => "modal-privileges-label", :role => "dialog", :tabindex => "-1"}
+  .modal-dialog
+    .modal-content
+      .modal-header
+        %h5#modal-privileges-label.modal-title
+          = raw t('views.actions.privilege', user: @user.screen_name)
+        %button.close{"data-dismiss" => "modal", :type => "button"}
+          %span{"aria-hidden" => "true"} ×
+          %span.sr-only= t 'views.actions.close'
+      %ul.list-group.groups--list
+        = render :partial 'modal/privileges/item', privilege: 'blogger', description: t('views.modal.privilege.blogger'), user: @user
+        = render :partial 'modal/privileges/item', privilege: 'contributor', description: t('views.modal.privilege.contributor'), user: @user
+        = render :partial 'modal/privileges/item', privilege: 'translator', description: t('views.modal.privilege.translator'), user: @user
+        - if current_user.has_role?(:administrator)
+          = render :partial 'modal/privileges/item', privilege: 'supporter', description: t('views.modal.privilege.supporter'), user: @user
+          = render :partial 'modal/privileges/item', privilege: 'moderator', description: t('views.modal.privilege.moderator'),user: @user
+          = render :partial 'modal/privileges/item', privilege: 'admin', description: t('views.modal.privilege.admin'), user: @user
+      .modal-footer
+        %button.btn.btn-primary{name: 'checked-privileges', type: :button, data: { dismiss: :modal }}= t 'views.actions.done'
diff --git a/app/views/user/_modal_group_item.html.haml b/app/views/modal/group/_item.html.haml
similarity index 100%
rename from app/views/user/_modal_group_item.html.haml
rename to app/views/modal/group/_item.html.haml
diff --git a/app/views/user/_modal_privileges_item.html.haml b/app/views/modal/privileges/_item.html.haml
similarity index 100%
rename from app/views/user/_modal_privileges_item.html.haml
rename to app/views/modal/privileges/_item.html.haml
diff --git a/app/views/shared/_comments.html.haml b/app/views/shared/_comments.html.haml
index cf0c13c9..d51d096d 100644
--- a/app/views/shared/_comments.html.haml
+++ b/app/views/shared/_comments.html.haml
@@ -4,7 +4,7 @@
   %ul.comments
     - a.comments.order(:created_at).each do |comment|
       %li{data: { comment_id: comment.id }}
-        %div{class: "ab-comment-smile-list", style: "height: 0; width: 0"}= render "shared/comment_smiles", comment: comment
+        %div{class: "ab-comment-smile-list", style: "height: 0; width: 0"}= render "modal/comment_smiles", comment: comment
         .media.comments--media
           .pull-left
             %img.img-rounded.answerbox--img{src: gravatar_url(comment.user)}
diff --git a/app/views/user/_account.html.haml b/app/views/user/_account.html.haml
index f4fd1b98..0f5ee2b0 100644
--- a/app/views/user/_account.html.haml
+++ b/app/views/user/_account.html.haml
@@ -7,20 +7,7 @@
       .card
         .card-body
           = bootstrap_form_for(resource, as: resource_name, url: '/settings/account', html: { method: :put }) do |f|
-            / Password field modal
-            #modal-passwd.modal.fade{"aria-hidden" => "true", "aria-labelledby" => "modal-passwd-label", :role => "dialog", :tabindex => "-1"}
-              .modal-dialog
-                .modal-content
-                  .modal-header
-                    %h5#modal-passwd-label.modal-title= t 'views.settings.account.modal.title'
-                    %button.close{"data-dismiss" => "modal", :type => "button"}
-                      %span{"aria-hidden" => "true"} ×
-                      %span.sr-only= t 'views.actions.close'
-                  .modal-body
-                    = f.password_field :current_password, autocomplete: "off", label: t('views.settings.account.password_current'), help: t('views.settings.account.password_current_help')
-                  .modal-footer
-                    %button.btn.btn-default{"data-dismiss" => "modal", :type => "button"}= t 'views.actions.cancel'
-                    %button.btn.btn-primary{:type => "submit"}= t 'views.actions.save'
+            = render 'modal/password', f: f
 
             = devise_error_messages!
 
diff --git a/app/views/user/_modal_privileges.html.haml b/app/views/user/_modal_privileges.html.haml
deleted file mode 100644
index 634a9cf5..00000000
--- a/app/views/user/_modal_privileges.html.haml
+++ /dev/null
@@ -1,19 +0,0 @@
-#modal-privileges.modal.fade{"aria-hidden" => "true", "aria-labelledby" => "modal-privileges-label", :role => "dialog", :tabindex => "-1"}
-  .modal-dialog
-    .modal-content
-      .modal-header
-        %h5#modal-privileges-label.modal-title
-          = raw t('views.actions.privilege', user: @user.screen_name)
-        %button.close{"data-dismiss" => "modal", :type => "button"}
-          %span{"aria-hidden" => "true"} ×
-          %span.sr-only= t 'views.actions.close'
-      %ul.list-group.groups--list
-        = render 'user/modal_privileges_item', privilege: 'blogger', description: t('views.modal.privilege.blogger'), user: @user
-        = render 'user/modal_privileges_item', privilege: 'contributor', description: t('views.modal.privilege.contributor'), user: @user
-        = render 'user/modal_privileges_item', privilege: 'translator', description: t('views.modal.privilege.translator'), user: @user
-        - if current_user.has_role?(:administrator)
-          = render 'user/modal_privileges_item', privilege: 'supporter', description: t('views.modal.privilege.supporter'), user: @user
-          = render 'user/modal_privileges_item', privilege: 'moderator', description: t('views.modal.privilege.moderator'),user: @user
-          = render 'user/modal_privileges_item', privilege: 'admin', description: t('views.modal.privilege.admin'), user: @user
-      .modal-footer
-        %button.btn.btn-primary{name: 'checked-privileges', type: :button, data: { dismiss: :modal }}= t 'views.actions.done'
diff --git a/app/views/user/show.html.haml b/app/views/user/show.html.haml
index 099f7d76..8eedcc97 100644
--- a/app/views/user/show.html.haml
+++ b/app/views/user/show.html.haml
@@ -22,7 +22,7 @@
           = t 'views.actions.load'
   .visible-xs= render 'shared/links'
 - if user_signed_in?
-  = render 'user/modal_group_memberships'
+  = render 'modal/group'
   - if current_user.mod? and @user != current_user
-    = render 'user/modal_privileges'
-    = render 'user/modal_ban'
+    = render 'modal/privileges'
+    = render 'modal/ban'

From 9ee5811243486424fb8a5f1b102b92d0e4d057b0 Mon Sep 17 00:00:00 2001
From: Andreas Nedbal <andy@pixelde.su>
Date: Sat, 25 Apr 2020 16:18:49 +0200
Subject: [PATCH 016/172] Remove piwik

---
 app/assets/javascripts/application.js.erb.coffee |  1 -
 app/assets/javascripts/piwik.js.erb              | 16 ----------------
 app/views/layouts/application.html.haml          |  4 ----
 3 files changed, 21 deletions(-)
 delete mode 100644 app/assets/javascripts/piwik.js.erb

diff --git a/app/assets/javascripts/application.js.erb.coffee b/app/assets/javascripts/application.js.erb.coffee
index 9689b1cf..454b5670 100644
--- a/app/assets/javascripts/application.js.erb.coffee
+++ b/app/assets/javascripts/application.js.erb.coffee
@@ -25,7 +25,6 @@
 #= require memes
 #= require notifications
 #= require pagination
-#= require piwik
 #= require question
 #= require settings
 #= require user
diff --git a/app/assets/javascripts/piwik.js.erb b/app/assets/javascripts/piwik.js.erb
deleted file mode 100644
index 3a410d8f..00000000
--- a/app/assets/javascripts/piwik.js.erb
+++ /dev/null
@@ -1,16 +0,0 @@
-<% if Rails.env.production? %>
-var _paq = _paq || [];
-_paq.push(['trackPageView']);
-_paq.push(['enableLinkTracking']);
-_paq.push(['setCustomUrl', document.location]);
-_paq.push(['setDocumentTitle', document.title]);
-(function() {
-    var u="//stat.rrerr.net/";
-    _paq.push(['setTrackerUrl', u+'piwik.php']);
-    _paq.push(['setSiteId', 9]);
-    var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
-    g.type='text/javascript'; g.async=true; g.defer=true; g.src=u+'piwik.js'; s.parentNode.insertBefore(g,s);
-})();
-<% elsif !Rails.env.test? %>
-console.log("i track'd ur bich");
-<% end %>
\ No newline at end of file
diff --git a/app/views/layouts/application.html.haml b/app/views/layouts/application.html.haml
index d40a87d8..0c6d626e 100644
--- a/app/views/layouts/application.html.haml
+++ b/app/views/layouts/application.html.haml
@@ -40,7 +40,3 @@
               = `git rev-parse --short HEAD`.strip
           %p.text-danger Debug params:
           = debug params
-    - if Rails.env.production?
-      %noscript
-        %p
-          %img{:alt => "", :src => "//stat.rrerr.net/piwik.php?idsite=9", :style => "border:0;"}/

From 8b8a5a1e7206957135536662fdbb52abbba7f921 Mon Sep 17 00:00:00 2001
From: Andreas Nedbal <andy@pixelde.su>
Date: Sat, 25 Apr 2020 17:02:59 +0200
Subject: [PATCH 017/172] Add parent_layout helper

---
 app/helpers/layouts_helper.rb | 10 ++++++++++
 1 file changed, 10 insertions(+)
 create mode 100644 app/helpers/layouts_helper.rb

diff --git a/app/helpers/layouts_helper.rb b/app/helpers/layouts_helper.rb
new file mode 100644
index 00000000..20784840
--- /dev/null
+++ b/app/helpers/layouts_helper.rb
@@ -0,0 +1,10 @@
+# frozen_string_literal: true
+
+module LayoutsHelper
+  def parent_layout(layout)
+    @view_flow.set(:layout, output_buffer)
+    output = render(file: "layouts/#{layout}")
+    @haml_buffer.buffer.replace output
+    self.output_buffer = ActionView::OutputBuffer.new(output)
+  end
+end
\ No newline at end of file

From ea77168b50a512f74a8a65155384abfc15ffab5a Mon Sep 17 00:00:00 2001
From: Andreas Nedbal <andy@pixelde.su>
Date: Sat, 25 Apr 2020 17:03:59 +0200
Subject: [PATCH 018/172] Port application layout to use parent_layout

---
 app/views/layouts/application.haml                     | 3 +++
 app/views/layouts/{application.html.haml => base.haml} | 2 +-
 2 files changed, 4 insertions(+), 1 deletion(-)
 create mode 100644 app/views/layouts/application.haml
 rename app/views/layouts/{application.html.haml => base.haml} (98%)

diff --git a/app/views/layouts/application.haml b/app/views/layouts/application.haml
new file mode 100644
index 00000000..001462ad
--- /dev/null
+++ b/app/views/layouts/application.haml
@@ -0,0 +1,3 @@
+= yield
+
+- parent_layout "base"
diff --git a/app/views/layouts/application.html.haml b/app/views/layouts/base.haml
similarity index 98%
rename from app/views/layouts/application.html.haml
rename to app/views/layouts/base.haml
index 0c6d626e..92a27661 100644
--- a/app/views/layouts/application.html.haml
+++ b/app/views/layouts/base.haml
@@ -39,4 +39,4 @@
             = succeed ')' do
               = `git rev-parse --short HEAD`.strip
           %p.text-danger Debug params:
-          = debug params
+          = debug params
\ No newline at end of file

From c870b00f650ddcda05d40adaf3a834298ad7d679 Mon Sep 17 00:00:00 2001
From: Andreas Nedbal <andy@pixelde.su>
Date: Sat, 25 Apr 2020 17:04:23 +0200
Subject: [PATCH 019/172] Clean up user setting layouts

---
 app/views/devise/registrations/edit.html.haml |  29 +--
 app/views/layouts/user/settings.haml          |   7 +
 app/views/services/index.haml                 |   4 +
 app/views/services/index.html.haml            |  25 ---
 app/views/settings/_account.haml              |  29 +++
 app/views/settings/_data.haml                 | 189 +++++++++++++++++
 app/views/settings/_export.haml               |  32 +++
 app/views/settings/_privacy.haml              |   9 +
 app/views/settings/_profile.haml              |  57 +++++
 app/views/settings/_services.haml             |  19 ++
 app/views/settings/_theme.haml                |  67 ++++++
 app/views/tabs/_settings.haml                 |  11 +
 app/views/user/_account.html.haml             |  33 ---
 app/views/user/_settings_tabs.html.haml       |  12 --
 app/views/user/data.haml                      |   4 +
 app/views/user/data.html.haml                 | 194 ------------------
 app/views/user/edit.haml                      |   4 +
 app/views/user/edit.html.haml                 |  63 ------
 app/views/user/edit_privacy.haml              |   4 +
 app/views/user/edit_privacy.html.haml         |  15 --
 app/views/user/edit_theme.haml                |   4 +
 app/views/user/edit_theme.html.haml           |  73 -------
 app/views/user/export.haml                    |  40 +---
 23 files changed, 446 insertions(+), 478 deletions(-)
 create mode 100644 app/views/layouts/user/settings.haml
 create mode 100644 app/views/services/index.haml
 delete mode 100644 app/views/services/index.html.haml
 create mode 100644 app/views/settings/_account.haml
 create mode 100644 app/views/settings/_data.haml
 create mode 100644 app/views/settings/_export.haml
 create mode 100644 app/views/settings/_privacy.haml
 create mode 100644 app/views/settings/_profile.haml
 create mode 100644 app/views/settings/_services.haml
 create mode 100644 app/views/settings/_theme.haml
 create mode 100644 app/views/tabs/_settings.haml
 delete mode 100644 app/views/user/_account.html.haml
 delete mode 100644 app/views/user/_settings_tabs.html.haml
 create mode 100644 app/views/user/data.haml
 delete mode 100644 app/views/user/data.html.haml
 create mode 100644 app/views/user/edit.haml
 delete mode 100644 app/views/user/edit.html.haml
 create mode 100644 app/views/user/edit_privacy.haml
 delete mode 100644 app/views/user/edit_privacy.html.haml
 create mode 100644 app/views/user/edit_theme.haml
 delete mode 100644 app/views/user/edit_theme.html.haml

diff --git a/app/views/devise/registrations/edit.html.haml b/app/views/devise/registrations/edit.html.haml
index e6ab70f8..77d692f8 100644
--- a/app/views/devise/registrations/edit.html.haml
+++ b/app/views/devise/registrations/edit.html.haml
@@ -1,27 +1,4 @@
-- case resource_name
-  - when :user
-    = render 'user/account'
-  - else
-    .container
-      %h1 Edit #{resource_name.to_s.humanize}
-      = bootstrap_form_for(resource, as: resource_name, url: registration_path(resource_name), html: { method: :put }) do |f|
-        = devise_error_messages!
+= render "settings/account"
 
-        = f.text_field :screen_name, autofocus: true, label: "User name"
-
-        = f.email_field :email, label: "Email address"
-        - if devise_mapping.confirmable? && resource.pending_reconfirmation?
-          %div
-            Currently waiting confirmation for: #{resource.unconfirmed_email}
-
-        = f.password_field :password, autocomplete: "off", label: "Password", help: "Leave this blank if you don't want to change it"
-        = f.password_field :password_confirmation, autocomplete: "off", label: "Confirm password"
-
-        = f.password_field :current_password, autocomplete: "off", label: "Current password", help: "We need your current password to confirm your changes"
-
-        = f.submit "Update"
-      %p
-        =button_to "Delete my account", registration_path(resource_name), data: { confirm: "Are you sure?" }, method: :delete, class: "btn btn-danger btn-sm"
-
-      = link_to "Back", :back
-    = render 'shared/links'
+- provide(:title, generate_title("Account Settings"))
+- parent_layout "user/settings"
diff --git a/app/views/layouts/user/settings.haml b/app/views/layouts/user/settings.haml
new file mode 100644
index 00000000..ab396d4b
--- /dev/null
+++ b/app/views/layouts/user/settings.haml
@@ -0,0 +1,7 @@
+.container.j2-page
+  .row
+    .col-md-3.col-xs-12.col-sm-4
+      = render 'tabs/settings'
+    .col-md-9.col-xs-12.col-sm-8
+      = render 'layouts/messages'
+      = yield
\ No newline at end of file
diff --git a/app/views/services/index.haml b/app/views/services/index.haml
new file mode 100644
index 00000000..691d5076
--- /dev/null
+++ b/app/views/services/index.haml
@@ -0,0 +1,4 @@
+= render "settings/services"
+
+- provide(:title, generate_title("Service Settings"))
+- parent_layout "user/settings"
diff --git a/app/views/services/index.html.haml b/app/views/services/index.html.haml
deleted file mode 100644
index 597eb966..00000000
--- a/app/views/services/index.html.haml
+++ /dev/null
@@ -1,25 +0,0 @@
-- provide(:title, generate_title("Service Settings"))
-.container.j2-page
-  .row
-    = render 'user/settings_tabs'
-    .col-md-9.col-xs-12.col-sm-8
-      = render 'layouts/messages'
-      .card
-        .card-body
-          - if @services.count > 0
-            = t 'views.settings.service.enabled'
-          - else
-            = t 'views.settings.service.none'
-
-          - APP_CONFIG['sharing'].each do |service, service_options|
-            - if service_options['enabled'] and !@services.any? { |x| x.provider == service.to_s }
-              %p=link_to t('views.settings.service.connect', service: service.capitalize), "/auth/#{service}"
-
-        - if @services.count > 0
-          %ul.list-group
-            - @services.each do |service|
-              %li.list-group-item
-                %i{class: "fa fa-#{service.provider}"}
-                %strong= service.provider.capitalize
-                (#{service.nickname})
-                = link_to t('views.settings.service.disconnect'), service_path(service), data: { confirm: t('views.settings.service.confirm', service: service.provider.capitalize) }, method: :delete
diff --git a/app/views/settings/_account.haml b/app/views/settings/_account.haml
new file mode 100644
index 00000000..bc34b0a9
--- /dev/null
+++ b/app/views/settings/_account.haml
@@ -0,0 +1,29 @@
+.card
+  .card-body
+    = bootstrap_form_for(resource, as: resource_name, url: '/settings/account', html: { method: :put }) do |f|
+      = render 'modal/password', f: f
+
+      = devise_error_messages!
+
+      = f.text_field :screen_name, autofocus: true, label: t('views.settings.account.username')
+
+      = f.email_field :email, label: t('views.settings.account.email')
+      - if devise_mapping.confirmable? && resource.pending_reconfirmation?
+        %div= raw t('views.settings.account.email_confirm', resource: resource.unconfirmed_email)
+
+      = f.password_field :password, autocomplete: "off", label: t('views.settings.account.password'), help: t('views.settings.account.password_help')
+      = f.password_field :password_confirmation, autocomplete: "off", label: t('views.settings.account.password_confirm')
+
+      %button.btn.btn-primary{"data-target" => "#modal-passwd", "data-toggle" => "modal", :type => "button"}
+        = t 'views.actions.save'
+
+      %hr/
+    %p
+      = t 'views.settings.account.unsatisfied'
+      =button_to t('views.settings.account.delete'), '/settings/account', data: { confirm: "Are you sure?" }, method: :delete, class: "btn btn-danger btn-xs"
+
+    = link_to t('views.settings.account.back'), :back
+
+.visible-xs= render "shared/links"
+
+
diff --git a/app/views/settings/_data.haml b/app/views/settings/_data.haml
new file mode 100644
index 00000000..35f0c3d1
--- /dev/null
+++ b/app/views/settings/_data.haml
@@ -0,0 +1,189 @@
+.card
+  .card-body
+    %h2 Your Profile Data
+    %p Everything we have about you! Really, not that much as you might expect.
+
+    %h3 General
+    .row
+      .col-md-6.col-sm-6.col-xs-12
+        %h4 Profile
+
+        %p.data-heading User name
+        %p.text-muted= current_user.screen_name
+
+        %p.data-heading Display name
+        %p.text-muted
+          - if current_user.display_name.blank?
+            None set!
+          - else
+            = current_user.display_name
+
+        %p.data-heading Bio
+        %p.text-muted
+          - if current_user.bio.blank?
+            None set!
+          - else
+            = current_user.bio
+
+        %p.data-heading Location
+        %p.text-muted
+          - if current_user.location.blank?
+            None set!
+          - else
+            = current_user.location
+
+        %p.data-heading Website
+        %p.text-muted
+          - if current_user.website.blank?
+            None set!
+          - else
+            = current_user.website
+      .col-md-6.col-sm-6.col-xs-12
+        %h4 Pictures
+        %p.data-heading Profile picture
+        .media
+          .pull-left
+            %img.profile--img{src: current_user.profile_picture.url(:medium)}
+          .media-body
+            %ul
+              %li
+                %a{href: current_user.profile_picture.url(:small)} Small
+              %li
+                %a{href: current_user.profile_picture.url(:medium)} Medium
+              %li
+                %a{href: current_user.profile_picture.url(:large)} Large
+              %li
+                %a{href: current_user.profile_picture.url(:original)} Original image
+
+        %p.data-heading Header picture
+        %img.data-header-preview{src: current_user.profile_header.url(:mobile)}
+        %p
+          %a{href: current_user.profile_header.url(:mobile)} Mobile
+          |
+          %a{href: current_user.profile_header.url(:web)} Web
+          |
+          %a{href: current_user.profile_header.url(:retina)} Retina
+          |
+          %a{href: current_user.profile_header.url(:original)} Original image
+    .row
+      .col-md-6.col-sm-6.col-xs-12
+        %h4 Statistics
+
+        %p.data-heading Answers
+        %p.text-muted= current_user.answered_count
+
+        %p.data-heading Questions
+        %p.text-muted= current_user.asked_count
+
+        %p.data-heading Following
+        %p.text-muted= current_user.friend_count
+
+        %p.data-heading Followers
+        %p.text-muted= current_user.follower_count
+
+        %p.data-heading Smiles
+        %p.text-muted= current_user.smiled_count + current_user.comment_smiled_count
+
+        %p.data-heading Comments
+        %p.text-muted= current_user.commented_count
+      .col-md-6.col-sm-6.col-xs-12
+        %h4 Badges
+
+        %p.data-heading Admin
+        %p
+          - if current_user.admin?
+            %span.label.label-success
+              %i.fa.fa-fw.fa-check
+          - else
+            %span.label.label-danger
+              %i.fa.fa-fw.fa-close
+
+        %p.data-heading Moderator
+        %p
+          - if current_user.mod?
+            %span.label.label-success
+              %i.fa.fa-fw.fa-check
+          - else
+            %span.label.label-danger
+              %i.fa.fa-fw.fa-close
+
+        %p.data-heading Supporter
+        %p
+          - if current_user.supporter?
+            %span.label.label-success
+              %i.fa.fa-fw.fa-check
+          - else
+            %span.label.label-danger
+              %i.fa.fa-fw.fa-close
+
+        %p.data-heading Contributor
+        %p
+          - if current_user.contributor?
+            %span.label.label-success
+              %i.fa.fa-fw.fa-check
+          - else
+            %span.label.label-danger
+              %i.fa.fa-fw.fa-close
+
+        %p.data-heading Blogger
+        %p
+          - if current_user.blogger?
+            %span.label.label-success
+              %i.fa.fa-fw.fa-check
+          - else
+            %span.label.label-danger
+              %i.fa.fa-fw.fa-close
+
+        %p.data-heading Translator
+        %p
+          - if current_user.translator?
+            %span.label.label-success
+              %i.fa.fa-fw.fa-check
+          - else
+            %span.label.label-danger
+              %i.fa.fa-fw.fa-close
+    .row
+      .col-md-6.col-sm-6.col-xs-12
+        %h3 IP
+        %p.data-heading Current Sign In
+        %p.text-muted= current_user.current_sign_in_ip
+
+        %p.data-heading Last Sign In
+        %p.text-muted= current_user.last_sign_in_ip
+      .col-md-6.col-sm-6.col-xs-12
+        %h3 Miscellaneous
+
+        %p.data-heading Locale
+        %p.text-muted
+          - if current_user.locale.blank?
+            None set!
+          - else
+            = current_user.locale
+
+        %p.data-heading Sign In count
+        %p.text-muted= current_user.sign_in_count
+    %h3 Dates
+    .row
+      .col-md-6.col-sm-6.col-xs-12
+        %h4 Sign In
+
+        %p.data-heading Current Sign In
+        %p.text-muted= localize(current_user.current_sign_in_at)
+
+        %p.data-heading Last Sign In
+        %p.text-muted= localize(current_user.last_sign_in_at)
+
+        %p.data-heading Remember me set at
+        %p.text-muted= localize(current_user.remember_created_at)
+      .col-md-6.col-sm-6.col-xs-12
+        %h4 Create/Update
+
+        %p.data-heading Account created
+        %p.text-muted
+          = localize(current_user.created_at)
+          = " (#{time_ago_in_words(current_user.created_at)} ago)"
+
+        %p.data-heading Account last updated
+        %p.text-muted
+          = localize(current_user.updated_at)
+          = " (#{time_ago_in_words(current_user.updated_at)} ago)"
\ No newline at end of file
diff --git a/app/views/settings/_export.haml b/app/views/settings/_export.haml
new file mode 100644
index 00000000..dd668173
--- /dev/null
+++ b/app/views/settings/_export.haml
@@ -0,0 +1,32 @@
+.card
+  .card-body
+    %h2 Export your data
+    %p
+      With the announcement of
+      = succeed ',' do
+        %a{href: 'http://blog.retrospring.net/saying-goodbye/'} shutting down Retrospring on June 8 2016
+      we promised you one last feature: exporting all your data.  The data is inside a
+      %code= ".tar.gz"
+      archive and available in three formats: YAML, JSON, and XML.  The archive also contains a copy of your
+      profile picture and header picture in all sizes.
+    %p
+      Please note that you can only export your data once a week.  Exporting your data
+      will take a while, so please be patient.  You will receive a question once exporting
+      is done.
+    - if current_user.can_export?
+      %form{action: begin_user_export_path, method: 'POST'}
+        %p.centre
+          %button#export-btn.btn.btn-lg.btn-primary{type: :submit} Export
+        = hidden_field_tag :authenticity_token, form_authenticity_token
+    - else
+      %p.centre
+        %button.btn.btn-lg.btn-primary.disabled{disabled: :disabled} Export
+    %p
+      - if current_user.export_url.nil?
+        Once exporting your account is done, a download link will appear here.
+      - else
+        Here is your export from
+        = succeed ':' do
+          = current_user.export_created_at
+        %a{href: current_user.export_url}
+          = File.basename current_user.export_url
\ No newline at end of file
diff --git a/app/views/settings/_privacy.haml b/app/views/settings/_privacy.haml
new file mode 100644
index 00000000..e3edd407
--- /dev/null
+++ b/app/views/settings/_privacy.haml
@@ -0,0 +1,9 @@
+.card
+  .card-body
+    = bootstrap_form_for(current_user, url: {action: "edit_privacy"}, method: "patch") do |f|
+
+      = f.check_box :privacy_allow_anonymous_questions, label: t('views.settings.privacy.anonymous')
+      = f.check_box :privacy_allow_public_timeline, label: t('views.settings.privacy.public')
+      = f.check_box :privacy_allow_stranger_answers, label: t('views.settings.privacy.stranger')
+
+      = f.submit t('views.actions.save'), class: 'btn btn-primary'
\ No newline at end of file
diff --git a/app/views/settings/_profile.haml b/app/views/settings/_profile.haml
new file mode 100644
index 00000000..a6abf43b
--- /dev/null
+++ b/app/views/settings/_profile.haml
@@ -0,0 +1,57 @@
+.card
+  .card-body
+    = bootstrap_form_for(current_user, url: {action: "edit"}, :html => { :multipart => true }, method: "patch") do |f|
+
+      = f.text_field :display_name, label: t('views.settings.profile.displayname')
+
+      .media#profile-picture-media
+        .pull-left
+          %img.img-rounded.profile--img{src: current_user.profile_picture.url(:medium)}
+        .media-body
+          = f.file_field :profile_picture, label: t('views.settings.profile.avatar')
+
+      .row#profile-picture-crop-controls{style: 'display: none;'}
+        .col-sm-10.col-md-8
+          %strong= t('views.settings.profile.avatar_adjust')
+          %img#profile-picture-cropper{src: current_user.profile_picture.url(:medium)}
+        .col-sm-2.col-md-4
+          .btn-group
+            %button#cropper-zoom-out.btn.btn-inverse{type: :button}
+              %i.fa.fa-search-minus
+            %button#cropper-zoom-in.btn.btn-inverse{type: :button}
+              %i.fa.fa-search-plus
+
+      .media#profile-header-media
+        .pull-left
+          %img.img-rounded.header--img{src: current_user.profile_header.url(:mobile)}
+        .media-body
+          = f.file_field :profile_header, label: t('views.settings.profile.header')
+
+      .row#profile-header-crop-controls{style: 'display: none;'}
+        .col-sm-10.col-md-8
+          %strong= t('views.settings.profile.header_adjust')
+          %img#profile-header-cropper{src: current_user.profile_header.url(:web)}
+        .col-sm-2.col-md-4
+          .btn-group
+            %button#cropper-header-zoom-out.btn.btn-inverse{type: :button}
+              %i.fa.fa-search-minus
+            %button#cropper-header-zoom-in.btn.btn-inverse{type: :button}
+              %i.fa.fa-search-plus
+
+      = f.text_field :motivation_header, label: t('views.settings.profile.motivation'), placeholder: t('views.settings.profile.placeholder.motivation')
+
+      = f.text_field :website, label: t('views.settings.profile.website'), placeholder: 'http://example.com'
+
+      = f.text_field :location, label: t('views.settings.profile.location'), placeholder: t('views.settings.profile.placeholder.location')
+
+      = f.text_area :bio, label: t('views.settings.profile.bio'), placeholder: t('views.settings.profile.placeholder.bio')
+
+      = f.check_box :show_foreign_themes, label: 'Render other user themes when visiting their profile'
+
+      - for attrib in %i(crop_x crop_y crop_w crop_h)
+        = f.hidden_field attrib, id: attrib
+
+      - for attrib in %i(crop_h_x crop_h_y crop_h_w crop_h_h)
+        = f.hidden_field attrib, id: attrib
+
+      = f.submit t('views.actions.save'), class: 'btn btn-primary'
\ No newline at end of file
diff --git a/app/views/settings/_services.haml b/app/views/settings/_services.haml
new file mode 100644
index 00000000..6967f0fc
--- /dev/null
+++ b/app/views/settings/_services.haml
@@ -0,0 +1,19 @@
+.card
+  .card-body
+    - if @services.count > 0
+      = t 'views.settings.service.enabled'
+    - else
+      = t 'views.settings.service.none'
+
+    - APP_CONFIG['sharing'].each do |service, service_options|
+      - if service_options['enabled'] and !@services.any? { |x| x.provider == service.to_s }
+        %p=link_to t('views.settings.service.connect', service: service.capitalize), "/auth/#{service}"
+
+  - if @services.count > 0
+    %ul.list-group
+      - @services.each do |service|
+        %li.list-group-item
+          %i{class: "fa fa-#{service.provider}"}
+          %strong= service.provider.capitalize
+          (#{service.nickname})
+          = link_to t('views.settings.service.disconnect'), service_path(service), data: { confirm: t('views.settings.service.confirm', service: service.provider.capitalize) }, method: :delete
\ No newline at end of file
diff --git a/app/views/settings/_theme.haml b/app/views/settings/_theme.haml
new file mode 100644
index 00000000..e10a2a94
--- /dev/null
+++ b/app/views/settings/_theme.haml
@@ -0,0 +1,67 @@
+.card
+  .card-body
+    %b Presets:
+    %a{href: '#', class: 'theme_preset', data: {preset: 'rs'}} Retrospring Purple,
+    %a{href: '#', class: 'theme_preset', data: {preset: 'dc'}} Dark Copycat,
+    %a{href: '#', class: 'theme_preset', data: {preset: 'lc'}} Light Copycat
+    = bootstrap_form_for(current_user.theme || Theme.new, url: {action: "update_theme"}, html: {id: 'update_theme'}, method: "patch") do |f|
+      .row
+        .col-md-6
+          = f.text_field :primary_color, class: 'color', data: {default: 0x5E35B1}
+        .col-md-6
+          = f.text_field :primary_text, class: 'color', data: {default: 0xFFFFFF}
+      .row
+        .col-md-6
+          = f.text_field :danger_color, class: 'color', data: {default: 0xFF0039}
+        .col-md-6
+          = f.text_field :danger_text, class: 'color', data: {default: 0xFFFFFF}
+      .row
+        .col-md-6
+          = f.text_field :success_color, class: 'color', data: {default: 0x3FB618}
+        .col-md-6
+          = f.text_field :success_text, class: 'color', data: {default: 0xFFFFFF}
+      .row
+        .col-md-6
+          = f.text_field :warning_color, class: 'color', data: {default: 0xFF7518}
+        .col-md-6
+          = f.text_field :warning_text, class: 'color', data: {default: 0xFFFFFF}
+      .row
+        .col-md-6
+          = f.text_field :info_color, class: 'color', data: {default: 0x9954BB}
+        .col-md-6
+          = f.text_field :info_text, class: 'color', data: {default: 0xFFFFFF}
+      .row
+        .col-md-6
+          = f.text_field :default_color, class: 'color', data: {default: 0x222222}
+        .col-md-6
+          = f.text_field :default_text, class: 'color', data: {default: 0xEEEEEE}
+      .row
+        .col-md-6
+          = f.text_field :panel_color, class: 'color', data: {default: 0xF9F9F9}
+        .col-md-6
+          = f.text_field :panel_text, class: 'color', data: {default: 0x151515}
+      .row
+        .col-md-6
+          = f.text_field :link_color, class: 'color', data: {default: 0x5E35B1}
+        .col-md-6
+          = f.text_field :background_color, class: 'color', data: {default: 0xFFFFFF}
+      .row
+        .col-md-6
+          = f.text_field :background_text, class: 'color', data: {default: 0x222222}
+        .col-md-6
+          = f.text_field :background_muted, class: 'color', data: {default: 0xBBBBBB}
+      .row
+        .col-md-6
+          = f.text_field :input_color, class: 'color', data: {default: 0xFFFFFF}
+        .col-md-6
+          = f.text_field :input_text, class: 'color', data: {default: 0x000000}
+      .row
+        .col-md-6
+          = f.text_field :outline_color, class: 'color', data: {default: 0x5E35B1}
+        .col-md-6
+
+      .pull-left
+        = f.submit t('views.actions.save'), class: 'btn btn-primary'
+
+    .pull-right
+      =button_to 'Delete Theme', delete_user_theme_path, data: { confirm: "Are you sure?" }, tabindex: -1, method: :delete, class: "btn btn-danger"
diff --git a/app/views/tabs/_settings.haml b/app/views/tabs/_settings.haml
new file mode 100644
index 00000000..9eceb89a
--- /dev/null
+++ b/app/views/tabs/_settings.haml
@@ -0,0 +1,11 @@
+.card
+  .list-group
+    = list_group_item t('views.settings.tabs.account'), edit_user_registration_path
+    = list_group_item t('views.settings.tabs.profile'), edit_user_profile_path
+    = list_group_item t('views.settings.tabs.privacy'), edit_user_privacy_path
+    = list_group_item t('views.settings.tabs.sharing'), services_path
+    = list_group_item 'Theme', edit_user_theme_path
+    = list_group_item "Your Data", user_data_path
+    = list_group_item 'Export', user_export_path
+
+.hidden-xs= render "shared/links"
\ No newline at end of file
diff --git a/app/views/user/_account.html.haml b/app/views/user/_account.html.haml
deleted file mode 100644
index 0f5ee2b0..00000000
--- a/app/views/user/_account.html.haml
+++ /dev/null
@@ -1,33 +0,0 @@
-- provide(:title, generate_title("Account Settings"))
-.container.j2-page
-  .row
-    = render 'user/settings_tabs'
-    .col-md-9.col-xs-12.col-sm-8
-      = render 'layouts/messages'
-      .card
-        .card-body
-          = bootstrap_form_for(resource, as: resource_name, url: '/settings/account', html: { method: :put }) do |f|
-            = render 'modal/password', f: f
-
-            = devise_error_messages!
-
-            = f.text_field :screen_name, autofocus: true, label: t('views.settings.account.username')
-
-            = f.email_field :email, label: t('views.settings.account.email')
-            - if devise_mapping.confirmable? && resource.pending_reconfirmation?
-              %div= raw t('views.settings.account.email_confirm', resource: resource.unconfirmed_email)
-
-            = f.password_field :password, autocomplete: "off", label: t('views.settings.account.password'), help: t('views.settings.account.password_help')
-            = f.password_field :password_confirmation, autocomplete: "off", label: t('views.settings.account.password_confirm')
-
-            %button.btn.btn-primary{"data-target" => "#modal-passwd", "data-toggle" => "modal", :type => "button"}
-              = t 'views.actions.save'
-
-            %hr/
-          %p
-            = t 'views.settings.account.unsatisfied'
-            =button_to t('views.settings.account.delete'), '/settings/account', data: { confirm: "Are you sure?" }, method: :delete, class: "btn btn-danger btn-xs"
-
-          = link_to t('views.settings.account.back'), :back
-
-.visible-xs= render "shared/links"
diff --git a/app/views/user/_settings_tabs.html.haml b/app/views/user/_settings_tabs.html.haml
deleted file mode 100644
index d12b60fc..00000000
--- a/app/views/user/_settings_tabs.html.haml
+++ /dev/null
@@ -1,12 +0,0 @@
-.col-md-3.col-xs-12.col-sm-4
-  .card
-    .list-group
-      = list_group_item t('views.settings.tabs.account'), edit_user_registration_path
-      = list_group_item t('views.settings.tabs.profile'), edit_user_profile_path
-      = list_group_item t('views.settings.tabs.privacy'), edit_user_privacy_path
-      = list_group_item t('views.settings.tabs.sharing'), services_path
-      = list_group_item 'Theme', edit_user_theme_path
-      = list_group_item "Your Data", user_data_path
-      = list_group_item 'Export', user_export_path
-
-  .hidden-xs= render "shared/links"
diff --git a/app/views/user/data.haml b/app/views/user/data.haml
new file mode 100644
index 00000000..f2093748
--- /dev/null
+++ b/app/views/user/data.haml
@@ -0,0 +1,4 @@
+= render "settings/data"
+
+- provide(:title, generate_title("Your Data"))
+- parent_layout "user/settings"
diff --git a/app/views/user/data.html.haml b/app/views/user/data.html.haml
deleted file mode 100644
index 5e5d4b86..00000000
--- a/app/views/user/data.html.haml
+++ /dev/null
@@ -1,194 +0,0 @@
-- provide(:title, generate_title("Your Data"))
-.container.j2-page
-  .row
-    = render 'settings_tabs'
-    .col-md-9.col-xs-12.col-sm-8
-      .card
-        .card-body
-          %h2 Your Profile Data
-          %p Everything we have about you! Really, not that much as you might expect.
-
-          %h3 General
-          .row
-            .col-md-6.col-sm-6.col-xs-12
-              %h4 Profile
-
-              %p.data-heading User name
-              %p.text-muted= current_user.screen_name
-
-              %p.data-heading Display name
-              %p.text-muted
-                - if current_user.display_name.blank?
-                  None set!
-                - else
-                  = current_user.display_name
-
-              %p.data-heading Bio
-              %p.text-muted
-                - if current_user.bio.blank?
-                  None set!
-                - else
-                  = current_user.bio
-
-              %p.data-heading Location
-              %p.text-muted
-                - if current_user.location.blank?
-                  None set!
-                - else
-                  = current_user.location
-
-              %p.data-heading Website
-              %p.text-muted
-                - if current_user.website.blank?
-                  None set!
-                - else
-                  = current_user.website
-            .col-md-6.col-sm-6.col-xs-12
-              %h4 Pictures
-              %p.data-heading Profile picture
-              .media
-                .pull-left
-                  %img.profile--img{src: current_user.profile_picture.url(:medium)}
-                .media-body
-                  %ul
-                    %li
-                      %a{href: current_user.profile_picture.url(:small)} Small
-                    %li
-                      %a{href: current_user.profile_picture.url(:medium)} Medium
-                    %li
-                      %a{href: current_user.profile_picture.url(:large)} Large
-                    %li
-                      %a{href: current_user.profile_picture.url(:original)} Original image
-
-              %p.data-heading Header picture
-              %img.data-header-preview{src: current_user.profile_header.url(:mobile)}
-              %p
-                %a{href: current_user.profile_header.url(:mobile)} Mobile
-                |
-                %a{href: current_user.profile_header.url(:web)} Web
-                |
-                %a{href: current_user.profile_header.url(:retina)} Retina
-                |
-                %a{href: current_user.profile_header.url(:original)} Original image
-          .row
-            .col-md-6.col-sm-6.col-xs-12
-              %h4 Statistics
-
-              %p.data-heading Answers
-              %p.text-muted= current_user.answered_count
-
-              %p.data-heading Questions
-              %p.text-muted= current_user.asked_count
-
-              %p.data-heading Following
-              %p.text-muted= current_user.friend_count
-
-              %p.data-heading Followers
-              %p.text-muted= current_user.follower_count
-
-              %p.data-heading Smiles
-              %p.text-muted= current_user.smiled_count + current_user.comment_smiled_count
-
-              %p.data-heading Comments
-              %p.text-muted= current_user.commented_count
-            .col-md-6.col-sm-6.col-xs-12
-              %h4 Badges
-
-              %p.data-heading Admin
-              %p
-                - if current_user.admin?
-                  %span.label.label-success
-                    %i.fa.fa-fw.fa-check
-                - else
-                  %span.label.label-danger
-                    %i.fa.fa-fw.fa-close
-
-              %p.data-heading Moderator
-              %p
-                - if current_user.mod?
-                  %span.label.label-success
-                    %i.fa.fa-fw.fa-check
-                - else
-                  %span.label.label-danger
-                    %i.fa.fa-fw.fa-close
-
-              %p.data-heading Supporter
-              %p
-                - if current_user.supporter?
-                  %span.label.label-success
-                    %i.fa.fa-fw.fa-check
-                - else
-                  %span.label.label-danger
-                    %i.fa.fa-fw.fa-close
-
-              %p.data-heading Contributor
-              %p
-                - if current_user.contributor?
-                  %span.label.label-success
-                    %i.fa.fa-fw.fa-check
-                - else
-                  %span.label.label-danger
-                    %i.fa.fa-fw.fa-close
-
-              %p.data-heading Blogger
-              %p
-                - if current_user.blogger?
-                  %span.label.label-success
-                    %i.fa.fa-fw.fa-check
-                - else
-                  %span.label.label-danger
-                    %i.fa.fa-fw.fa-close
-
-              %p.data-heading Translator
-              %p
-                - if current_user.translator?
-                  %span.label.label-success
-                    %i.fa.fa-fw.fa-check
-                - else
-                  %span.label.label-danger
-                    %i.fa.fa-fw.fa-close
-          .row
-            .col-md-6.col-sm-6.col-xs-12
-              %h3 IP
-              %p.data-heading Current Sign In
-              %p.text-muted= current_user.current_sign_in_ip
-
-              %p.data-heading Last Sign In
-              %p.text-muted= current_user.last_sign_in_ip
-            .col-md-6.col-sm-6.col-xs-12
-              %h3 Miscellaneous
-
-              %p.data-heading Locale
-              %p.text-muted
-                - if current_user.locale.blank?
-                  None set!
-                - else
-                  = current_user.locale
-
-              %p.data-heading Sign In count
-              %p.text-muted= current_user.sign_in_count
-          %h3 Dates
-          .row
-            .col-md-6.col-sm-6.col-xs-12
-              %h4 Sign In
-
-              %p.data-heading Current Sign In
-              %p.text-muted= localize(current_user.current_sign_in_at)
-
-              %p.data-heading Last Sign In
-              %p.text-muted= localize(current_user.last_sign_in_at)
-
-              %p.data-heading Remember me set at
-              %p.text-muted= localize(current_user.remember_created_at)
-            .col-md-6.col-sm-6.col-xs-12
-              %h4 Create/Update
-
-              %p.data-heading Account created
-              %p.text-muted
-                = localize(current_user.created_at)
-                = " (#{time_ago_in_words(current_user.created_at)} ago)"
-
-              %p.data-heading Account last updated
-              %p.text-muted
-                = localize(current_user.updated_at)
-                = " (#{time_ago_in_words(current_user.updated_at)} ago)"
diff --git a/app/views/user/edit.haml b/app/views/user/edit.haml
new file mode 100644
index 00000000..43a76cb4
--- /dev/null
+++ b/app/views/user/edit.haml
@@ -0,0 +1,4 @@
+= render "settings/profile"
+
+- provide(:title, generate_title("Profile Settings"))
+- parent_layout "user/settings"
\ No newline at end of file
diff --git a/app/views/user/edit.html.haml b/app/views/user/edit.html.haml
deleted file mode 100644
index 6dd70f53..00000000
--- a/app/views/user/edit.html.haml
+++ /dev/null
@@ -1,63 +0,0 @@
-- provide(:title, generate_title("Profile Settings"))
-.container.j2-page
-  .row
-    = render 'settings_tabs'
-    .col-md-9.col-xs-12.col-sm-9
-      = render 'layouts/messages'
-      .card
-        .card-body
-          = bootstrap_form_for(current_user, url: {action: "edit"}, :html => { :multipart => true }, method: "patch") do |f|
-
-            = f.text_field :display_name, label: t('views.settings.profile.displayname')
-
-            .media#profile-picture-media
-              .pull-left
-                %img.img-rounded.profile--img{src: current_user.profile_picture.url(:medium)}
-              .media-body
-                = f.file_field :profile_picture, label: t('views.settings.profile.avatar')
-
-            .row#profile-picture-crop-controls{style: 'display: none;'}
-              .col-sm-10.col-md-8
-                %strong= t('views.settings.profile.avatar_adjust')
-                %img#profile-picture-cropper{src: current_user.profile_picture.url(:medium)}
-              .col-sm-2.col-md-4
-                .btn-group
-                  %button#cropper-zoom-out.btn.btn-inverse{type: :button}
-                    %i.fa.fa-search-minus
-                  %button#cropper-zoom-in.btn.btn-inverse{type: :button}
-                    %i.fa.fa-search-plus
-
-            .media#profile-header-media
-              .pull-left
-                %img.img-rounded.header--img{src: current_user.profile_header.url(:mobile)}
-              .media-body
-                = f.file_field :profile_header, label: t('views.settings.profile.header')
-
-            .row#profile-header-crop-controls{style: 'display: none;'}
-              .col-sm-10.col-md-8
-                %strong= t('views.settings.profile.header_adjust')
-                %img#profile-header-cropper{src: current_user.profile_header.url(:web)}
-              .col-sm-2.col-md-4
-                .btn-group
-                  %button#cropper-header-zoom-out.btn.btn-inverse{type: :button}
-                    %i.fa.fa-search-minus
-                  %button#cropper-header-zoom-in.btn.btn-inverse{type: :button}
-                    %i.fa.fa-search-plus
-
-            = f.text_field :motivation_header, label: t('views.settings.profile.motivation'), placeholder: t('views.settings.profile.placeholder.motivation')
-
-            = f.text_field :website, label: t('views.settings.profile.website'), placeholder: 'http://example.com'
-
-            = f.text_field :location, label: t('views.settings.profile.location'), placeholder: t('views.settings.profile.placeholder.location')
-
-            = f.text_area :bio, label: t('views.settings.profile.bio'), placeholder: t('views.settings.profile.placeholder.bio')
-
-            = f.check_box :show_foreign_themes, label: 'Render other user themes when visiting their profile'
-
-            - for attrib in %i(crop_x crop_y crop_w crop_h)
-              = f.hidden_field attrib, id: attrib
-
-            - for attrib in %i(crop_h_x crop_h_y crop_h_w crop_h_h)
-              = f.hidden_field attrib, id: attrib
-
-            = f.submit t('views.actions.save'), class: 'btn btn-primary'
diff --git a/app/views/user/edit_privacy.haml b/app/views/user/edit_privacy.haml
new file mode 100644
index 00000000..c422fb37
--- /dev/null
+++ b/app/views/user/edit_privacy.haml
@@ -0,0 +1,4 @@
+= render "settings/privacy"
+
+- provide(:title, generate_title("Privacy Settings"))
+- parent_layout "user/settings"
diff --git a/app/views/user/edit_privacy.html.haml b/app/views/user/edit_privacy.html.haml
deleted file mode 100644
index 11d2920a..00000000
--- a/app/views/user/edit_privacy.html.haml
+++ /dev/null
@@ -1,15 +0,0 @@
-- provide(:title, generate_title("Privacy Settings"))
-.container.j2-page
-  .row
-    = render 'settings_tabs'
-    .col-md-9.col-xs-12.col-sm-8
-      = render 'layouts/messages'
-      .card
-        .card-body
-          = bootstrap_form_for(current_user, url: {action: "edit_privacy"}, method: "patch") do |f|
-
-            = f.check_box :privacy_allow_anonymous_questions, label: t('views.settings.privacy.anonymous')
-            = f.check_box :privacy_allow_public_timeline, label: t('views.settings.privacy.public')
-            = f.check_box :privacy_allow_stranger_answers, label: t('views.settings.privacy.stranger')
-
-            = f.submit t('views.actions.save'), class: 'btn btn-primary'
diff --git a/app/views/user/edit_theme.haml b/app/views/user/edit_theme.haml
new file mode 100644
index 00000000..38fec528
--- /dev/null
+++ b/app/views/user/edit_theme.haml
@@ -0,0 +1,4 @@
+= render "settings/theme"
+
+- provide(:title, generate_title("Theme Settings"))
+- parent_layout "user/settings"
\ No newline at end of file
diff --git a/app/views/user/edit_theme.html.haml b/app/views/user/edit_theme.html.haml
deleted file mode 100644
index b551db07..00000000
--- a/app/views/user/edit_theme.html.haml
+++ /dev/null
@@ -1,73 +0,0 @@
-- provide(:title, generate_title("Theme Settings"))
-.container.j2-page
-  .row
-    = render 'settings_tabs'
-    .col-md-9.col-xs-12.col-sm-8
-      = render 'layouts/messages'
-      .card
-        .card-body
-          %b Presets:
-          %a{href: '#', class: 'theme_preset', data: {preset: 'rs'}} Retrospring Purple,
-          %a{href: '#', class: 'theme_preset', data: {preset: 'dc'}} Dark Copycat,
-          %a{href: '#', class: 'theme_preset', data: {preset: 'lc'}} Light Copycat
-          = bootstrap_form_for(current_user.theme || Theme.new, url: {action: "update_theme"}, html: {id: 'update_theme'}, method: "patch") do |f|
-            .row
-              .col-md-6
-                = f.text_field :primary_color, class: 'color', data: {default: 0x5E35B1}
-              .col-md-6
-                = f.text_field :primary_text, class: 'color', data: {default: 0xFFFFFF}
-            .row
-              .col-md-6
-                = f.text_field :danger_color, class: 'color', data: {default: 0xFF0039}
-              .col-md-6
-                = f.text_field :danger_text, class: 'color', data: {default: 0xFFFFFF}
-            .row
-              .col-md-6
-                = f.text_field :success_color, class: 'color', data: {default: 0x3FB618}
-              .col-md-6
-                = f.text_field :success_text, class: 'color', data: {default: 0xFFFFFF}
-            .row
-              .col-md-6
-                = f.text_field :warning_color, class: 'color', data: {default: 0xFF7518}
-              .col-md-6
-                = f.text_field :warning_text, class: 'color', data: {default: 0xFFFFFF}
-            .row
-              .col-md-6
-                = f.text_field :info_color, class: 'color', data: {default: 0x9954BB}
-              .col-md-6
-                = f.text_field :info_text, class: 'color', data: {default: 0xFFFFFF}
-            .row
-              .col-md-6
-                = f.text_field :default_color, class: 'color', data: {default: 0x222222}
-              .col-md-6
-                = f.text_field :default_text, class: 'color', data: {default: 0xEEEEEE}
-            .row
-              .col-md-6
-                = f.text_field :panel_color, class: 'color', data: {default: 0xF9F9F9}
-              .col-md-6
-                = f.text_field :panel_text, class: 'color', data: {default: 0x151515}
-            .row
-              .col-md-6
-                = f.text_field :link_color, class: 'color', data: {default: 0x5E35B1}
-              .col-md-6
-                = f.text_field :background_color, class: 'color', data: {default: 0xFFFFFF}
-            .row
-              .col-md-6
-                = f.text_field :background_text, class: 'color', data: {default: 0x222222}
-              .col-md-6
-                = f.text_field :background_muted, class: 'color', data: {default: 0xBBBBBB}
-            .row
-              .col-md-6
-                = f.text_field :input_color, class: 'color', data: {default: 0xFFFFFF}
-              .col-md-6
-                = f.text_field :input_text, class: 'color', data: {default: 0x000000}
-            .row
-              .col-md-6
-                = f.text_field :outline_color, class: 'color', data: {default: 0x5E35B1}
-              .col-md-6
-
-            .pull-left
-              = f.submit t('views.actions.save'), class: 'btn btn-primary'
-
-          .pull-right
-            =button_to 'Delete Theme', delete_user_theme_path, data: { confirm: "Are you sure?" }, tabindex: -1, method: :delete, class: "btn btn-danger"
diff --git a/app/views/user/export.haml b/app/views/user/export.haml
index acbc41ff..bc025d90 100644
--- a/app/views/user/export.haml
+++ b/app/views/user/export.haml
@@ -1,38 +1,4 @@
+= render "settings/export"
+
 - provide(:title, generate_title("Export"))
-.container.j2-page
-  .row
-    = render 'settings_tabs'
-    .col-md-9.col-xs-12.col-sm-8
-      = render 'layouts/messages'
-      .card
-        .card-body
-          %h2 Export your data
-          %p
-            With the announcement of
-            = succeed ',' do
-              %a{href: 'http://blog.retrospring.net/saying-goodbye/'} shutting down Retrospring on June 8 2016
-            we promised you one last feature: exporting all your data.  The data is inside a
-            %code= ".tar.gz"
-            archive and available in three formats: YAML, JSON, and XML.  The archive also contains a copy of your
-            profile picture and header picture in all sizes.
-          %p
-            Please note that you can only export your data once a week.  Exporting your data
-            will take a while, so please be patient.  You will receive a question once exporting
-            is done.
-          - if current_user.can_export?
-            %form{action: begin_user_export_path, method: 'POST'}
-              %p.centre
-                %button#export-btn.btn.btn-lg.btn-primary{type: :submit} Export
-              = hidden_field_tag :authenticity_token, form_authenticity_token
-          - else
-            %p.centre
-              %button.btn.btn-lg.btn-primary.disabled{disabled: :disabled} Export
-          %p
-            - if current_user.export_url.nil?
-              Once exporting your account is done, a download link will appear here.
-            - else
-              Here is your export from
-              = succeed ':' do
-                = current_user.export_created_at
-              %a{href: current_user.export_url}
-                = File.basename current_user.export_url
+- parent_layout "user/settings"

From 6e22e840814bed4b9d6e255ff2dd0c7b5aac8ecf Mon Sep 17 00:00:00 2001
From: Andreas Nedbal <andy@pixelde.su>
Date: Sat, 25 Apr 2020 17:21:39 +0200
Subject: [PATCH 020/172] Clean up user profile layouts

---
 .../user/profile.haml}                        | 16 ++----------
 app/views/user/groups.haml                    | 12 +++++++++
 app/views/user/groups.html.haml               | 23 -----------------
 app/views/user/questions.haml                 | 14 +++++++++++
 app/views/user/questions.html.haml            | 22 ----------------
 app/views/user/show.haml                      | 16 ++++++++++++
 app/views/user/show_follow.haml               | 15 +++++++++++
 app/views/user/show_follow.html.haml          | 25 -------------------
 8 files changed, 59 insertions(+), 84 deletions(-)
 rename app/views/{user/show.html.haml => layouts/user/profile.haml} (50%)
 create mode 100644 app/views/user/groups.haml
 delete mode 100644 app/views/user/groups.html.haml
 create mode 100644 app/views/user/questions.haml
 delete mode 100644 app/views/user/questions.html.haml
 create mode 100644 app/views/user/show.haml
 create mode 100644 app/views/user/show_follow.haml
 delete mode 100644 app/views/user/show_follow.html.haml

diff --git a/app/views/user/show.html.haml b/app/views/layouts/user/profile.haml
similarity index 50%
rename from app/views/user/show.html.haml
rename to app/views/layouts/user/profile.haml
index 8eedcc97..de62b178 100644
--- a/app/views/user/show.html.haml
+++ b/app/views/layouts/user/profile.haml
@@ -1,4 +1,3 @@
-- provide(:title, user_title(@user))
 - no_header = unless @user.profile_header.exists? then "profile--no-header" else "" end
 #profile--header{class: no_header}
   %img.profile--header-img{src: @user.profile_header.url(:web)}
@@ -8,21 +7,10 @@
       = render 'user/profile_info'
       .hidden-xs= render 'shared/links'
     .col-md-9.col-xs-12.col-sm-8.j2-col-reset
-      .profile--panel-push-inner.hidden-xs{class: no_header}
-      = render 'shared/questionbox'
-      - unless @user.banned?
-        #answers
-          - @answers.each do |a|
-            = render 'shared/answerbox', a: a
-
-      = render 'shared/cursored_pagination_dummy', more_data_available: @more_data_available, last_id: @answers_last_id
-
-      - if @more_data_available
-        %button#load-more-btn.btn.btn-default{type: :button, data: { last_id: @answers_last_id }}
-          = t 'views.actions.load'
+      = yield
   .visible-xs= render 'shared/links'
 - if user_signed_in?
   = render 'modal/group'
   - if current_user.mod? and @user != current_user
     = render 'modal/privileges'
-    = render 'modal/ban'
+    = render 'modal/ban'
\ No newline at end of file
diff --git a/app/views/user/groups.haml b/app/views/user/groups.haml
new file mode 100644
index 00000000..9d550b37
--- /dev/null
+++ b/app/views/user/groups.haml
@@ -0,0 +1,12 @@
+%h1.j2-lh.hidden-xs Groups
+%h1.visible-xs Groups
+
+%ul
+  - @groups.each do |group|
+    %li
+      - if group.private?
+        %i.fa.fa-lock
+      = group.display_name
+
+- provide(:title, user_title(@user, "groups"))
+- parent_layout "user/profile"
diff --git a/app/views/user/groups.html.haml b/app/views/user/groups.html.haml
deleted file mode 100644
index 4dbd3927..00000000
--- a/app/views/user/groups.html.haml
+++ /dev/null
@@ -1,23 +0,0 @@
-- provide(:title, user_title(@user, "groups"))
-- no_header = unless @user.profile_header.exists? then "profile--no-header" else "" end
-#profile--header{class: no_header}
-  %img.profile--header-img{src: @user.profile_header.url(:web)}
-.container.j2-page.headerable{class: no_header}
-  .row
-    .col-md-3.col-xs-12.col-sm-4
-      = render 'user/profile_info'
-      .hidden-xs= render 'shared/links'
-    .col-md-9.col-xs-12.col-sm-8
-      %h1.j2-lh.hidden-xs Groups
-      %h1.visible-xs Groups
-
-      %ul
-        - @groups.each do |group|
-          %li
-            - if group.private?
-              %i.fa.fa-lock
-            = group.display_name
-
-  .visible-xs= render 'shared/links'
-- if user_signed_in?
-  = render 'user/modal_group_memberships'
diff --git a/app/views/user/questions.haml b/app/views/user/questions.haml
new file mode 100644
index 00000000..17e137ef
--- /dev/null
+++ b/app/views/user/questions.haml
@@ -0,0 +1,14 @@
+%h1.j2-lh.hidden-xs= @title
+%h1.visible-xs= @title
+#questions
+  - @questions.each do |q|
+    = render 'shared/question', q: q, type: nil
+
+= render 'shared/cursored_pagination_dummy', more_data_available: @more_data_available, last_id: @questions_last_id
+
+- if @more_data_available
+  %button#load-more-btn.btn.btn-default{type: :button, data: { last_id: @questions_last_id }}
+    = t 'views.actions.load'
+
+- provide(:title, questions_title(@user))
+- parent_layout "user/profile"
\ No newline at end of file
diff --git a/app/views/user/questions.html.haml b/app/views/user/questions.html.haml
deleted file mode 100644
index 62a3f606..00000000
--- a/app/views/user/questions.html.haml
+++ /dev/null
@@ -1,22 +0,0 @@
-- provide(:title, questions_title(@user))
-- no_header = unless @user.profile_header.exists? then "profile--no-header" else "" end
-#profile--header{class: no_header}
-  %img.profile--header-img{src: @user.profile_header.url(:web)}
-.container.j2-page.headerable{class: no_header}
-  .row
-    .col-md-3.col-xs-12.col-sm-4.j2-col-reset
-      = render 'user/profile_info'
-      .hidden-xs= render 'shared/links'
-    .col-md-9.col-xs-12.col-sm-8.j2-col-reset
-      %h1.j2-lh.hidden-xs= @title
-      %h1.visible-xs= @title
-      #questions
-        - @questions.each do |q|
-          = render 'shared/question', q: q, type: nil
-
-    = render 'shared/cursored_pagination_dummy', more_data_available: @more_data_available, last_id: @questions_last_id
-
-    - if @more_data_available
-      %button#load-more-btn.btn.btn-default{type: :button, data: { last_id: @questions_last_id }}
-        = t 'views.actions.load'
-  .visible-xs= render 'shared/links'
diff --git a/app/views/user/show.haml b/app/views/user/show.haml
new file mode 100644
index 00000000..e1734f5d
--- /dev/null
+++ b/app/views/user/show.haml
@@ -0,0 +1,16 @@
+- no_header = unless @user.profile_header.exists? then "profile--no-header" else "" end
+.profile--panel-push-inner.hidden-xs{class: no_header}
+= render 'shared/questionbox'
+- unless @user.banned?
+  #answers
+    - @answers.each do |a|
+      = render 'shared/answerbox', a: a
+
+= render 'shared/cursored_pagination_dummy', more_data_available: @more_data_available, last_id: @answers_last_id
+
+- if @more_data_available
+  %button#load-more-btn.btn.btn-default{type: :button, data: { last_id: @answers_last_id }}
+    = t 'views.actions.load'
+
+- provide(:title, user_title(@user))
+- parent_layout "user/profile"
diff --git a/app/views/user/show_follow.haml b/app/views/user/show_follow.haml
new file mode 100644
index 00000000..fe026028
--- /dev/null
+++ b/app/views/user/show_follow.haml
@@ -0,0 +1,15 @@
+%h1.j2-lh.hidden-xs= @title
+%h1.visible-xs= @title
+#users
+  - @users.each do |user|
+    .col-md-4.col-sm-6.col-xs-12
+      = render 'shared/userbox', user: user
+
+= render 'shared/cursored_pagination_dummy', more_data_available: @more_data_available, last_id: @users_last_id
+
+- if @more_data_available
+  %button#load-more-btn.btn.btn-default{type: :button, data: { last_id: @users_last_id }}
+    = t 'views.actions.load'
+
+- provide(:title, user_title(@user, "friends and followers"))
+- parent_layout "user/profile"
diff --git a/app/views/user/show_follow.html.haml b/app/views/user/show_follow.html.haml
deleted file mode 100644
index 4c81002e..00000000
--- a/app/views/user/show_follow.html.haml
+++ /dev/null
@@ -1,25 +0,0 @@
-- provide(:title, user_title(@user, "friends and followers"))
-- no_header = unless @user.profile_header.exists? then "profile--no-header" else "" end
-#profile--header{class: no_header}
-  %img.profile--header-img{src: @user.profile_header.url(:web)}
-.container.j2-page.headerable{class: no_header}
-  .row
-    .col-md-3.col-xs-12.col-sm-4.j2-col-reset
-      = render 'user/profile_info'
-      .hidden-xs= render 'shared/links'
-    .col-md-9.col-xs-12.col-sm-8.j2-col-reset
-      %h1.j2-lh.hidden-xs= @title
-      %h1.visible-xs= @title
-      #users
-        - @users.each do |user|
-          .col-md-4.col-sm-6.col-xs-12
-            = render 'shared/userbox', user: user
-
-    = render 'shared/cursored_pagination_dummy', more_data_available: @more_data_available, last_id: @users_last_id
-
-    - if @more_data_available
-      %button#load-more-btn.btn.btn-default{type: :button, data: { last_id: @users_last_id }}
-        = t 'views.actions.load'
-  .visible-xs= render 'shared/links'
-- if user_signed_in?
-  = render 'user/modal_group_memberships'

From 245c6493d3a8b46e901136bceb348288b7155678 Mon Sep 17 00:00:00 2001
From: Andreas Nedbal <andy@pixelde.su>
Date: Sat, 25 Apr 2020 17:51:00 +0200
Subject: [PATCH 021/172] Clean up notifications layout

---
 app/views/layouts/notification.haml           | 10 +++++++
 .../_notification_tabs.html.haml              | 15 -----------
 app/views/notifications/index.haml            | 22 +++++++++++++++
 app/views/notifications/index.html.haml       | 27 -------------------
 app/views/tabs/_notifications.haml            | 14 ++++++++++
 5 files changed, 46 insertions(+), 42 deletions(-)
 create mode 100644 app/views/layouts/notification.haml
 delete mode 100644 app/views/notifications/_notification_tabs.html.haml
 create mode 100644 app/views/notifications/index.haml
 delete mode 100644 app/views/notifications/index.html.haml
 create mode 100644 app/views/tabs/_notifications.haml

diff --git a/app/views/layouts/notification.haml b/app/views/layouts/notification.haml
new file mode 100644
index 00000000..30ffd22d
--- /dev/null
+++ b/app/views/layouts/notification.haml
@@ -0,0 +1,10 @@
+= render 'notifications/notification_nav'
+.container.j2-page
+  .row
+    .col-md-3.col-xs-12.col-sm-4
+      = render 'tabs/notifications'
+    .col-md-9.col-xs-12.col-sm-8
+      = yield
+
+- Notification.for(current_user).update_all(new: false)
+- provide(:title, generate_title("Notifications"))
\ No newline at end of file
diff --git a/app/views/notifications/_notification_tabs.html.haml b/app/views/notifications/_notification_tabs.html.haml
deleted file mode 100644
index 7d4389c0..00000000
--- a/app/views/notifications/_notification_tabs.html.haml
+++ /dev/null
@@ -1,15 +0,0 @@
-.col-md-3.col-xs-12.col-sm-4
-  .card.hidden-xs
-    .list-group
-      = list_group_item "New Notifications", notifications_path, badge: Notification.for(current_user).where(new: true).count
-      = list_group_item "All Notifications", notifications_path('all')
-
-  .card.hidden-xs
-    .card-header
-      Filter by Type
-    .list-group
-      = list_group_item t('views.notifications.tabs.answer'), notifications_path('answer'), badge: Notification.for(current_user).where(target_type: "Answer", new: true).count
-      = list_group_item t('views.notifications.tabs.smile'), notifications_path('smile'), badge: Notification.for(current_user).where(target_type: "Smile", new: true).count
-      = list_group_item t('views.notifications.tabs.comment'), notifications_path('comment'), badge: Notification.for(current_user).where(target_type: "Comment", new: true).count
-      = list_group_item t('views.notifications.tabs.commentsmile'), notifications_path('commentsmile'), badge: Notification.for(current_user).where(target_type: "CommentSmile", new: true).count
-      = list_group_item t('views.notifications.tabs.relationship'), notifications_path('relationship'), badge: Notification.for(current_user).where(target_type: "Relationship", new: true).count
diff --git a/app/views/notifications/index.haml b/app/views/notifications/index.haml
new file mode 100644
index 00000000..249a825c
--- /dev/null
+++ b/app/views/notifications/index.haml
@@ -0,0 +1,22 @@
+.card
+  %ul#notifications.list-group
+    - if @notifications.count == 0
+      %li.list-group-item.text-center
+        .notifications--none
+          %i.fa.fa-bell-o.no-notifications
+        %p
+          - if params[:type] != "all"
+            No new notifications.
+          - else
+            No notifications.
+    - else
+      - @notifications.each do |notification|
+        = render 'notifications/notification', notification: notification
+
+      = render 'shared/cursored_pagination_dummy', more_data_available: @more_data_available, last_id: @notifications_last_id, permitted_params: %i[type]
+
+      - if @more_data_available
+        %button#load-more-btn.btn.btn-default{type: :button, data: { last_id: @notifications_last_id }}
+          Load more
+
+- parent_layout "notification"
\ No newline at end of file
diff --git a/app/views/notifications/index.html.haml b/app/views/notifications/index.html.haml
deleted file mode 100644
index 054362c0..00000000
--- a/app/views/notifications/index.html.haml
+++ /dev/null
@@ -1,27 +0,0 @@
-- provide(:title, generate_title("Notifications"))
-= render 'notifications/notification_nav'
-.container.j2-page
-  .row
-    = render 'notification_tabs'
-    .col-md-9.col-xs-12.col-sm-8
-      .card
-        %ul#notifications.list-group
-          - if @notifications.count == 0
-            %li.list-group-item.text-center
-              .notifications--none
-                %i.fa.fa-bell-o.no-notifications
-              %p
-                - if params[:type] != "all"
-                  No new notifications.
-                - else
-                  No notifications.
-          - else
-            - @notifications.each do |notification|
-              = render 'notifications/notification', notification: notification
-
-    = render 'shared/cursored_pagination_dummy', more_data_available: @more_data_available, last_id: @notifications_last_id, permitted_params: %i[type]
-
-    - if @more_data_available
-      %button#load-more-btn.btn.btn-default{type: :button, data: { last_id: @notifications_last_id }}
-        Load more
-- Notification.for(current_user).update_all(new: false)
diff --git a/app/views/tabs/_notifications.haml b/app/views/tabs/_notifications.haml
new file mode 100644
index 00000000..fd06ace9
--- /dev/null
+++ b/app/views/tabs/_notifications.haml
@@ -0,0 +1,14 @@
+.card.hidden-xs
+  .list-group
+    = list_group_item "New Notifications", notifications_path, badge: Notification.for(current_user).where(new: true).count
+    = list_group_item "All Notifications", notifications_path('all')
+
+.card.hidden-xs
+  .card-header
+    Filter by Type
+  .list-group
+    = list_group_item t('views.notifications.tabs.answer'), notifications_path('answer'), badge: Notification.for(current_user).where(target_type: "Answer", new: true).count
+    = list_group_item t('views.notifications.tabs.smile'), notifications_path('smile'), badge: Notification.for(current_user).where(target_type: "Smile", new: true).count
+    = list_group_item t('views.notifications.tabs.comment'), notifications_path('comment'), badge: Notification.for(current_user).where(target_type: "Comment", new: true).count
+    = list_group_item t('views.notifications.tabs.commentsmile'), notifications_path('commentsmile'), badge: Notification.for(current_user).where(target_type: "CommentSmile", new: true).count
+    = list_group_item t('views.notifications.tabs.relationship'), notifications_path('relationship'), badge: Notification.for(current_user).where(target_type: "Relationship", new: true).count
\ No newline at end of file

From 19e7ed557ec497192d07cda4efd2168a9fbac424 Mon Sep 17 00:00:00 2001
From: Andreas Nedbal <andy@pixelde.su>
Date: Sat, 25 Apr 2020 17:52:24 +0200
Subject: [PATCH 022/172] Remove .html.haml prefix from modal files

---
 app/views/modal/{_ask.html.haml => _ask.haml}                     | 0
 app/views/modal/{_ban.html.haml => _ban.haml}                     | 0
 .../modal/{_comment_smiles.html.haml => _comment_smiles.haml}     | 0
 app/views/modal/{_group.html.haml => _group.haml}                 | 0
 app/views/modal/{_password.html.haml => _password.haml}           | 0
 app/views/modal/{_privileges.html.haml => _privileges.haml}       | 0
 app/views/modal/group/{_item.html.haml => _item.haml}             | 0
 app/views/modal/privileges/{_item.html.haml => _item.haml}        | 0
 8 files changed, 0 insertions(+), 0 deletions(-)
 rename app/views/modal/{_ask.html.haml => _ask.haml} (100%)
 rename app/views/modal/{_ban.html.haml => _ban.haml} (100%)
 rename app/views/modal/{_comment_smiles.html.haml => _comment_smiles.haml} (100%)
 rename app/views/modal/{_group.html.haml => _group.haml} (100%)
 rename app/views/modal/{_password.html.haml => _password.haml} (100%)
 rename app/views/modal/{_privileges.html.haml => _privileges.haml} (100%)
 rename app/views/modal/group/{_item.html.haml => _item.haml} (100%)
 rename app/views/modal/privileges/{_item.html.haml => _item.haml} (100%)

diff --git a/app/views/modal/_ask.html.haml b/app/views/modal/_ask.haml
similarity index 100%
rename from app/views/modal/_ask.html.haml
rename to app/views/modal/_ask.haml
diff --git a/app/views/modal/_ban.html.haml b/app/views/modal/_ban.haml
similarity index 100%
rename from app/views/modal/_ban.html.haml
rename to app/views/modal/_ban.haml
diff --git a/app/views/modal/_comment_smiles.html.haml b/app/views/modal/_comment_smiles.haml
similarity index 100%
rename from app/views/modal/_comment_smiles.html.haml
rename to app/views/modal/_comment_smiles.haml
diff --git a/app/views/modal/_group.html.haml b/app/views/modal/_group.haml
similarity index 100%
rename from app/views/modal/_group.html.haml
rename to app/views/modal/_group.haml
diff --git a/app/views/modal/_password.html.haml b/app/views/modal/_password.haml
similarity index 100%
rename from app/views/modal/_password.html.haml
rename to app/views/modal/_password.haml
diff --git a/app/views/modal/_privileges.html.haml b/app/views/modal/_privileges.haml
similarity index 100%
rename from app/views/modal/_privileges.html.haml
rename to app/views/modal/_privileges.haml
diff --git a/app/views/modal/group/_item.html.haml b/app/views/modal/group/_item.haml
similarity index 100%
rename from app/views/modal/group/_item.html.haml
rename to app/views/modal/group/_item.haml
diff --git a/app/views/modal/privileges/_item.html.haml b/app/views/modal/privileges/_item.haml
similarity index 100%
rename from app/views/modal/privileges/_item.html.haml
rename to app/views/modal/privileges/_item.haml

From ae4c68a10bf9a9dcd7add4f760bdc43d767cb61e Mon Sep 17 00:00:00 2001
From: Andreas Nedbal <andy@pixelde.su>
Date: Sat, 25 Apr 2020 17:54:52 +0200
Subject: [PATCH 023/172] Use layout inheritance by convention

---
 app/views/layouts/{notification.haml => notifications.haml} | 3 ++-
 app/views/notifications/index.haml                          | 4 +---
 2 files changed, 3 insertions(+), 4 deletions(-)
 rename app/views/layouts/{notification.haml => notifications.haml} (76%)

diff --git a/app/views/layouts/notification.haml b/app/views/layouts/notifications.haml
similarity index 76%
rename from app/views/layouts/notification.haml
rename to app/views/layouts/notifications.haml
index 30ffd22d..5d015895 100644
--- a/app/views/layouts/notification.haml
+++ b/app/views/layouts/notifications.haml
@@ -7,4 +7,5 @@
       = yield
 
 - Notification.for(current_user).update_all(new: false)
-- provide(:title, generate_title("Notifications"))
\ No newline at end of file
+- provide(:title, generate_title("Notifications"))
+- parent_layout "base"
\ No newline at end of file
diff --git a/app/views/notifications/index.haml b/app/views/notifications/index.haml
index 249a825c..16947232 100644
--- a/app/views/notifications/index.haml
+++ b/app/views/notifications/index.haml
@@ -17,6 +17,4 @@
 
       - if @more_data_available
         %button#load-more-btn.btn.btn-default{type: :button, data: { last_id: @notifications_last_id }}
-          Load more
-
-- parent_layout "notification"
\ No newline at end of file
+          Load more
\ No newline at end of file

From baf5ba698dac19f3f184b3548c8907177196c0f3 Mon Sep 17 00:00:00 2001
From: Andreas Nedbal <andy@pixelde.su>
Date: Sat, 25 Apr 2020 18:05:35 +0200
Subject: [PATCH 024/172] Clean up moderation layout

---
 app/views/layouts/moderation.haml             | 10 ++++++++
 .../moderation/_moderation_tabs.html.haml     |  9 -------
 app/views/moderation/index.html.haml          | 10 ++------
 app/views/moderation/priority.html.haml       | 24 +++++++------------
 app/views/tabs/_moderation.haml               |  8 +++++++
 5 files changed, 29 insertions(+), 32 deletions(-)
 create mode 100644 app/views/layouts/moderation.haml
 delete mode 100644 app/views/moderation/_moderation_tabs.html.haml
 create mode 100644 app/views/tabs/_moderation.haml

diff --git a/app/views/layouts/moderation.haml b/app/views/layouts/moderation.haml
new file mode 100644
index 00000000..59bb4fe9
--- /dev/null
+++ b/app/views/layouts/moderation.haml
@@ -0,0 +1,10 @@
+= render 'moderation/moderation_nav'
+.container.j2-page
+  .row
+    .col-md-3.col-sm-4.col-xs-12
+      = render 'tabs/moderation'
+    .col-md-9.col-sm-8.col-xs-12
+      = yield
+
+- provide(:title, generate_title("Moderation"))
+- parent_layout "base"
\ No newline at end of file
diff --git a/app/views/moderation/_moderation_tabs.html.haml b/app/views/moderation/_moderation_tabs.html.haml
deleted file mode 100644
index 5dbe3c6a..00000000
--- a/app/views/moderation/_moderation_tabs.html.haml
+++ /dev/null
@@ -1,9 +0,0 @@
-.col-md-3.col-sm-4.col-xs-12
-  .card.hidden-xs
-    .list-group
-      = list_group_item t('views.moderation.tabs.all'), moderation_path
-      = list_group_item t('views.general.answer').pluralize(2),     moderation_path('answer')
-      = list_group_item t('views.general.comment').pluralize(2),    moderation_path('comment')
-      = list_group_item t('views.general.user').pluralize(2),       moderation_path('user')
-      = list_group_item t('views.general.question').pluralize(2),   moderation_path('question')
-      = list_group_item 'Priority',   moderation_priority_path
diff --git a/app/views/moderation/index.html.haml b/app/views/moderation/index.html.haml
index 6d381d42..0e7b0a7a 100644
--- a/app/views/moderation/index.html.haml
+++ b/app/views/moderation/index.html.haml
@@ -1,8 +1,2 @@
-- provide(:title, generate_title("Moderation"))
-= render 'moderation/moderation_nav'
-.container.j2-page
-  .row
-    = render 'moderation/moderation_tabs'
-    .col-md-9.col-sm-8.col-xs-12
-      - @reports.each do |r|
-        = render 'moderation/moderationbox', report: r
+- @reports.each do |r|
+  = render 'moderation/moderationbox', report: r
diff --git a/app/views/moderation/priority.html.haml b/app/views/moderation/priority.html.haml
index 0291c89d..92e1ff87 100644
--- a/app/views/moderation/priority.html.haml
+++ b/app/views/moderation/priority.html.haml
@@ -1,16 +1,10 @@
-- provide(:title, generate_title("Moderation"))
-= render 'moderation/moderation_nav'
-.container.j2-page
+%h2
+  - if @host.nil?
+    Users sorted by reports
+  - else
+    Users with the same IP
+#users
   .row
-    = render 'moderation/moderation_tabs'
-    .col-md-9.col-sm-9.col-xs-12
-      %h2
-        - if @host.nil?
-          Users sorted by reports
-        - else
-          Users with the same IP
-      #users
-        .row
-          - @users.each do |u, c|
-            .col-md-4.col-sm-12col-xs-12
-              = render 'moderation/userbox', user: u, count: c
+    - @users.each do |u, c|
+      .col-md-4.col-sm-12col-xs-12
+        = render 'moderation/userbox', user: u, count: c
diff --git a/app/views/tabs/_moderation.haml b/app/views/tabs/_moderation.haml
new file mode 100644
index 00000000..d6615055
--- /dev/null
+++ b/app/views/tabs/_moderation.haml
@@ -0,0 +1,8 @@
+.card.hidden-xs
+  .list-group
+    = list_group_item t('views.moderation.tabs.all'), moderation_path
+    = list_group_item t('views.general.answer').pluralize(2),     moderation_path('answer')
+    = list_group_item t('views.general.comment').pluralize(2),    moderation_path('comment')
+    = list_group_item t('views.general.user').pluralize(2),       moderation_path('user')
+    = list_group_item t('views.general.question').pluralize(2),   moderation_path('question')
+    = list_group_item 'Priority',   moderation_priority_path
\ No newline at end of file

From 2a074227acf79bd9dee8676baac7c833f515ca75 Mon Sep 17 00:00:00 2001
From: Andreas Nedbal <andy@pixelde.su>
Date: Sat, 25 Apr 2020 18:10:48 +0200
Subject: [PATCH 025/172] Clean up inbox layouts

---
 app/views/inbox/show.html.haml | 31 +++++++++----------------------
 app/views/layouts/inbox.haml   | 16 ++++++++++++++++
 2 files changed, 25 insertions(+), 22 deletions(-)
 create mode 100644 app/views/layouts/inbox.haml

diff --git a/app/views/inbox/show.html.haml b/app/views/inbox/show.html.haml
index 778e0a43..be2abe85 100644
--- a/app/views/inbox/show.html.haml
+++ b/app/views/inbox/show.html.haml
@@ -1,25 +1,12 @@
-- provide(:title, generate_title("Inbox"))
-.container.j2-page
-  .row
-    .col-md-3.col-xs-12.col-sm-4.d-none.d-sm-block
-      = render 'inbox/sidebar'
-    .col-md-9.col-xs-12.col-sm-8
-      = render 'layouts/messages'
-      #entries
-        - @inbox.each do |i|
-          = render 'inbox/entry', i: i
+#entries
+  - @inbox.each do |i|
+    = render 'inbox/entry', i: i
 
-        - if @inbox.empty?
-          = t 'views.inbox.empty'
+  - if @inbox.empty?
+    = t 'views.inbox.empty'
 
-      = render 'shared/cursored_pagination_dummy', more_data_available: @more_data_available, last_id: @inbox_last_id
+  = render 'shared/cursored_pagination_dummy', more_data_available: @more_data_available, last_id: @inbox_last_id
 
-      - if @more_data_available
-        %button#load-more-btn.btn.btn-default{type: :button, data: { last_id: @inbox_last_id }}
-          = t 'views.actions.load'
-
-    .col-md-9.col-xs-12.col-sm-8.d-block.d-sm-none
-      = render 'inbox/sidebar'
-
-= render "shared/links"
-- Inbox.where(id: @inbox.ids).update_all(new: false)
+  - if @more_data_available
+    %button#load-more-btn.btn.btn-default{type: :button, data: { last_id: @inbox_last_id }}
+      = t 'views.actions.load'
diff --git a/app/views/layouts/inbox.haml b/app/views/layouts/inbox.haml
new file mode 100644
index 00000000..80848805
--- /dev/null
+++ b/app/views/layouts/inbox.haml
@@ -0,0 +1,16 @@
+.container.j2-page
+  .row
+    .col-md-3.col-xs-12.col-sm-4.d-none.d-sm-block
+      = render 'inbox/sidebar'
+    .col-md-9.col-xs-12.col-sm-8
+      = render 'layouts/messages'
+      = yield
+
+    .col-md-9.col-xs-12.col-sm-8.d-block.d-sm-none
+      = render 'inbox/sidebar'
+
+= render "shared/links"
+
+- Inbox.where(id: @inbox.ids).update_all(new: false)
+- provide(:title, generate_title("Inbox"))
+- parent_layout "base"
\ No newline at end of file

From a9812f58003056251dd8daefb8472290708bc344 Mon Sep 17 00:00:00 2001
From: Andreas Nedbal <andy@pixelde.su>
Date: Sat, 25 Apr 2020 18:23:02 +0200
Subject: [PATCH 026/172] Clean up feed layouts

---
 app/views/group/index.haml       | 12 ++++++++++++
 app/views/group/index.html.haml  | 19 -------------------
 app/views/layouts/feed.haml      |  9 +++++++++
 app/views/public/index.haml      | 12 ++++++++++++
 app/views/public/index.html.haml | 19 -------------------
 app/views/static/index.haml      | 12 ++++++++++++
 app/views/static/index.html.haml | 18 ------------------
 7 files changed, 45 insertions(+), 56 deletions(-)
 create mode 100644 app/views/group/index.haml
 delete mode 100644 app/views/group/index.html.haml
 create mode 100644 app/views/layouts/feed.haml
 create mode 100644 app/views/public/index.haml
 delete mode 100644 app/views/public/index.html.haml
 create mode 100644 app/views/static/index.haml
 delete mode 100644 app/views/static/index.html.haml

diff --git a/app/views/group/index.haml b/app/views/group/index.haml
new file mode 100644
index 00000000..878d73fc
--- /dev/null
+++ b/app/views/group/index.haml
@@ -0,0 +1,12 @@
+#timeline
+  - @timeline.each do |answer|
+    = render 'shared/answerbox', a: answer
+
+  = render 'shared/cursored_pagination_dummy', more_data_available: @more_data_available, last_id: @timeline_last_id
+
+  - if @more_data_available
+    %button#load-more-btn.btn.btn-default{type: :button, data: { last_id: @timeline_last_id }}
+      = t 'views.actions.load'
+
+- provide(:title, group_title(@group))
+- parent_layout "feed"
diff --git a/app/views/group/index.html.haml b/app/views/group/index.html.haml
deleted file mode 100644
index e7a72d20..00000000
--- a/app/views/group/index.html.haml
+++ /dev/null
@@ -1,19 +0,0 @@
-- provide(:title, group_title(@group))
-= render 'static/mobile_nav'
-.container.j2-page
-  .row
-    .col-md-3.col-sm-4
-      = render 'shared/sidebar'
-    .col-md-9.col-xs-12.col-sm-8.j2-col-reset
-      = render 'layouts/messages'
-
-      #timeline
-        - @timeline.each do |answer|
-          = render 'shared/answerbox', a: answer
-
-    = render 'shared/cursored_pagination_dummy', more_data_available: @more_data_available, last_id: @timeline_last_id
-
-    - if @more_data_available
-      %button#load-more-btn.btn.btn-default{type: :button, data: { last_id: @timeline_last_id }}
-        = t 'views.actions.load'
-.visible-xs= render 'shared/links'
diff --git a/app/views/layouts/feed.haml b/app/views/layouts/feed.haml
new file mode 100644
index 00000000..b4f84f0a
--- /dev/null
+++ b/app/views/layouts/feed.haml
@@ -0,0 +1,9 @@
+= render 'static/mobile_nav'
+.container.j2-page
+  .row
+    .col-md-3.col-sm-4
+      = render 'shared/sidebar'
+    .col-md-9.col-xs-12.col-sm-8.j2-col-reset
+      = render 'layouts/messages'
+      = yield
+  .visible-xs= render 'shared/links'
\ No newline at end of file
diff --git a/app/views/public/index.haml b/app/views/public/index.haml
new file mode 100644
index 00000000..50f62dd9
--- /dev/null
+++ b/app/views/public/index.haml
@@ -0,0 +1,12 @@
+#timeline
+  - @timeline.each do |answer|
+    = render 'shared/answerbox', a: answer
+
+  = render 'shared/cursored_pagination_dummy', more_data_available: @more_data_available, last_id: @timeline_last_id
+
+  - if @more_data_available
+    %button#load-more-btn.btn.btn-default{type: :button, data: { last_id: @timeline_last_id }}
+      Load more
+
+- provide(:title, generate_title("Public Timeline"))
+- parent_layout "feed"
\ No newline at end of file
diff --git a/app/views/public/index.html.haml b/app/views/public/index.html.haml
deleted file mode 100644
index cfb05625..00000000
--- a/app/views/public/index.html.haml
+++ /dev/null
@@ -1,19 +0,0 @@
-- provide(:title, generate_title("Public Timeline"))
-= render 'static/mobile_nav'
-.container.j2-page
-  .row
-    .col-md-3.col-sm-4
-      = render 'shared/sidebar'
-    .col-md-9.col-xs-12.col-sm-8
-      = render 'layouts/messages'
-
-      #timeline
-        - @timeline.each do |answer|
-          = render 'shared/answerbox', a: answer
-
-    = render 'shared/cursored_pagination_dummy', more_data_available: @more_data_available, last_id: @timeline_last_id
-
-    - if @more_data_available
-      %button#load-more-btn.btn.btn-default{type: :button, data: { last_id: @timeline_last_id }}
-        Load more
-.visible-xs= render 'shared/links'
diff --git a/app/views/static/index.haml b/app/views/static/index.haml
new file mode 100644
index 00000000..12355001
--- /dev/null
+++ b/app/views/static/index.haml
@@ -0,0 +1,12 @@
+#timeline
+  - @timeline.each do |answer|
+    = render 'shared/answerbox', a: answer
+
+  = render 'shared/cursored_pagination_dummy', more_data_available: @more_data_available, last_id: @timeline_last_id
+
+  - if @more_data_available
+    %button#load-more-btn.btn.btn-default{type: :button, data: { last_id: @timeline_last_id }}
+      Load more
+
+- provide(:title, "#{APP_CONFIG['site_name']}")
+- parent_layout "feed"
\ No newline at end of file
diff --git a/app/views/static/index.html.haml b/app/views/static/index.html.haml
deleted file mode 100644
index bc3f90f5..00000000
--- a/app/views/static/index.html.haml
+++ /dev/null
@@ -1,18 +0,0 @@
-- provide(:title, "#{APP_CONFIG['site_name']}")
-= render 'static/mobile_nav'
-.container.j2-page
-  .row
-    .col-md-3.col-sm-4
-      = render 'shared/sidebar'
-    .col-md-9.col-xs-12.col-sm-8.j2-col-reset
-      = render 'layouts/messages'
-      #timeline
-        - @timeline.each do |answer|
-          = render 'shared/answerbox', a: answer
-
-    = render 'shared/cursored_pagination_dummy', more_data_available: @more_data_available, last_id: @timeline_last_id
-
-    - if @more_data_available
-      %button#load-more-btn.btn.btn-default{type: :button, data: { last_id: @timeline_last_id }}
-        Load more
-  .visible-xs= render 'shared/links'

From e15cedd56cb9c21faf228474a0f6022b7564431d Mon Sep 17 00:00:00 2001
From: Andreas Nedbal <andy@pixelde.su>
Date: Sat, 25 Apr 2020 19:02:39 +0200
Subject: [PATCH 027/172] Adjust tab classes to Bootstrap 4

---
 app/views/discover/index.html.haml | 24 ++++++++++++------------
 app/views/modal/_group.haml        |  8 ++++----
 2 files changed, 16 insertions(+), 16 deletions(-)

diff --git a/app/views/discover/index.html.haml b/app/views/discover/index.html.haml
index 810b577a..5ea1f039 100644
--- a/app/views/discover/index.html.haml
+++ b/app/views/discover/index.html.haml
@@ -11,12 +11,12 @@
       %p= t 'views.discover.content.desc'
       %div{role: "tabpanel"}
         %ul.nav.nav-tabs{role: "tablist"}
-          %li.active{role: "presentation"}
-            %a{href: "#answers", role: "tab", aria: {controls: "answers"}, data: {toggle: "tab"}}= t 'views.discover.content.tab.answers'
-          %li{role: "presentation"}
-            %a{href: "#questions", role: "tab", aria: {controls: "questions"}, data: {toggle: "tab"}}= t 'views.discover.content.tab.questions'
-          %li{role: "presentation"}
-            %a{href: "#comments", role: "tab", aria: {controls: "comments"}, data: {toggle: "tab"}}= t 'views.discover.content.tab.comments'
+          %li.nav-item{role: "presentation"}
+            %a.nav-link.active{href: "#answers", role: "tab", aria: {controls: "answers"}, data: {toggle: "tab"}}= t 'views.discover.content.tab.answers'
+          %li.nav-item{role: "presentation"}
+            %a.nav-link{href: "#questions", role: "tab", aria: {controls: "questions"}, data: {toggle: "tab"}}= t 'views.discover.content.tab.questions'
+          %li.nav-item{role: "presentation"}
+            %a.nav-link{href: "#comments", role: "tab", aria: {controls: "comments"}, data: {toggle: "tab"}}= t 'views.discover.content.tab.comments'
         .tab-content.discover
           = render 'discover/tab_answers', answers: @popular_answers
           = render 'discover/tab_questions', questions: @popular_questions
@@ -26,12 +26,12 @@
       %p= t 'views.discover.people.desc'
       %div{role: "tabpanel"}
         %ul.nav.nav-tabs{role: "tablist"}
-          %li.active{role: "presentation"}
-            %a{href: "#new", role: "tab", aria: {controls: "new"}, data: {toggle: "tab"}}= t 'views.discover.people.tab.new'
-          %li{role: "presentation"}
-            %a{href: "#asked", role: "tab", aria: {controls: "asked"}, data: {toggle: "tab"}}= t 'views.discover.people.tab.questions'
-          %li{role: "presentation"}
-            %a{href: "#answered", role: "tab", aria: {controls: "answered"}, data: {toggle: "tab"}}= t 'views.discover.people.tab.answers'
+          %li.nav-item{role: "presentation"}
+            %a.nav-link.active{href: "#new", role: "tab", aria: {controls: "new"}, data: {toggle: "tab"}}= t 'views.discover.people.tab.new'
+          %li.nav-item{role: "presentation"}
+            %a.nav-link{href: "#asked", role: "tab", aria: {controls: "asked"}, data: {toggle: "tab"}}= t 'views.discover.people.tab.questions'
+          %li.nav-item{role: "presentation"}
+            %a.nav-link{href: "#answered", role: "tab", aria: {controls: "answered"}, data: {toggle: "tab"}}= t 'views.discover.people.tab.answers'
         .tab-content.discover
           = render 'discover/tab_new', new: @new_users
           = render 'discover/tab_asked', asked: @users_with_most_questions
diff --git a/app/views/modal/_group.haml b/app/views/modal/_group.haml
index 2d735306..ecb94df7 100644
--- a/app/views/modal/_group.haml
+++ b/app/views/modal/_group.haml
@@ -8,11 +8,11 @@
           %span.sr-only= t 'views.actions.close'
       %div{role: "tabpanel"}
         %ul.nav.nav-tabs{role: "tablist"}
-          %li.active{role: "presentation"}
-            %a{href: "#grouplist", aria: {controls: "grouplist"}, data: {toggle: "tab"}, role: "tab"}
+          %li.nav-item{role: "presentation"}
+            %a.nav-link.active{href: "#grouplist", aria: {controls: "grouplist"}, data: {toggle: "tab"}, role: "tab"}
               = t 'views.modal.group.tabs.main'
-          %li{role: "presentation"}
-            %a{href: "#create", aria: {controls: "create"}, data: {toggle: "tab"}, role: "tab"}
+          %li.nav-item{role: "presentation"}
+            %a.nav-link{href: "#create", aria: {controls: "create"}, data: {toggle: "tab"}, role: "tab"}
               = t 'views.modal.group.tabs.create'
 
         .tab-content

From e56e65cf40a9f612f33e52253988011c56a13111 Mon Sep 17 00:00:00 2001
From: Andreas Nedbal <andy@pixelde.su>
Date: Sat, 25 Apr 2020 19:45:53 +0200
Subject: [PATCH 028/172] Further adjustments to inbox layout

- Fixed base styling of cards due to layout differences between panels of Bootstrap 3
- Removed duplicate rendering of sidebar
---
 app/views/inbox/_entry.html.haml   |  2 +-
 app/views/inbox/_sidebar.html.haml | 22 +++++++++-------------
 app/views/layouts/inbox.haml       |  7 ++-----
 3 files changed, 12 insertions(+), 19 deletions(-)

diff --git a/app/views/inbox/_entry.html.haml b/app/views/inbox/_entry.html.haml
index dd509f5b..2c54d5f1 100644
--- a/app/views/inbox/_entry.html.haml
+++ b/app/views/inbox/_entry.html.haml
@@ -1,4 +1,4 @@
-.card.inbox-box{class: "panel-#{i.new? ? 'primary' : 'default'}", data: { id: i.id }}
+.card.mb-3.inbox-box{class: "bg-#{i.new? ? 'primary' : 'default'}", data: { id: i.id }}
   .card-header
     .media
       - unless i.question.author_is_anonymous
diff --git a/app/views/inbox/_sidebar.html.haml b/app/views/inbox/_sidebar.html.haml
index 06c5f8dc..415bfd7f 100644
--- a/app/views/inbox/_sidebar.html.haml
+++ b/app/views/inbox/_sidebar.html.haml
@@ -1,11 +1,9 @@
-.card.inbox--panel
-  .card-header
-    %h3.card-title= t 'views.inbox.sidebar.questions.title'
+.card.mb-3.inbox--panel
+  .card-header= t 'views.inbox.sidebar.questions.title'
   .card-body
     %button.btn.btn-block.btn-info{type: :button, id: 'ib-generate-question'}= t 'views.inbox.sidebar.questions.button'
-.card.inbox--panel
-  .card-header
-    %h3.card-title= t 'views.inbox.sidebar.share.title'
+.card.mb-3.inbox--panel
+  .card-header= t 'views.inbox.sidebar.share.title'
   .card-body
     %a.btn.btn-block.btn-primary{target: '_blank', href: "https://twitter.com/intent/tweet?text=Ask%20me%20anything%21&url=#{show_user_profile_url(current_user.screen_name)}"}
       %i.fa.fa-fw.fa-twitter
@@ -13,17 +11,15 @@
     %a.btn.btn-block.btn-primary{target: '_blank', href: "http://www.tumblr.com/share/link?url=#{show_user_profile_url(current_user.screen_name)}&name=Ask%20me%20anything%21"}
       %i.fa.fa-fw.fa-tumblr
       = raw t('views.inbox.sidebar.share.button', service: "Tumblr")
-.card.inbox--panel
-  .card-header
-    %h3.card-title Show author
+.card.mb-3.inbox--panel
+  .card-header Show author
   .card-body
     %form#author_form
       = bootstrap_form_tag url: inbox_path, method: :get do |f|
         = f.text_field :author, value: params[:author], placeholder: "username", prepend: "@" , hide_label: true
-        = f.button "Show", name: nil, class: "btn btn-default btn-block btn-sm", id: "ib-author"
-.card.warning--panel
-  .card-header
-    %h3.card-title= t 'views.inbox.sidebar.actions.title'
+        = f.button "Show", name: nil, class: "btn btn-light btn-block btn-sm", id: "ib-author"
+.card.mb-3.warning--panel
+  .card-header= t 'views.inbox.sidebar.actions.title'
   .card-body
     %button.btn.btn-block.btn-danger{type: :button, id: @delete_id , disabled: (@disabled ? 'disabled' : nil), data: { ib_count: @inbox_count }}= t 'views.inbox.sidebar.actions.button'
 
diff --git a/app/views/layouts/inbox.haml b/app/views/layouts/inbox.haml
index 80848805..085b0aee 100644
--- a/app/views/layouts/inbox.haml
+++ b/app/views/layouts/inbox.haml
@@ -1,14 +1,11 @@
 .container.j2-page
   .row
-    .col-md-3.col-xs-12.col-sm-4.d-none.d-sm-block
+    .col-md-3.col-xs-12.col-sm-4.order-2.order-sm-1
       = render 'inbox/sidebar'
-    .col-md-9.col-xs-12.col-sm-8
+    .col-md-9.col-xs-12.col-sm-8.order-1.order-sm-2
       = render 'layouts/messages'
       = yield
 
-    .col-md-9.col-xs-12.col-sm-8.d-block.d-sm-none
-      = render 'inbox/sidebar'
-
 = render "shared/links"
 
 - Inbox.where(id: @inbox.ids).update_all(new: false)

From 2fb1966c5b8c3f59d5ee864fcdf6ece3c5f3228e Mon Sep 17 00:00:00 2001
From: Andreas Nedbal <andy@pixelde.su>
Date: Sat, 25 Apr 2020 20:11:33 +0200
Subject: [PATCH 029/172] Move feed navigation to new location

---
 app/views/layouts/feed.haml            |  2 +-
 app/views/navigation/_feed.haml        | 10 ++++++++++
 app/views/static/_mobile_nav.html.haml | 11 -----------
 3 files changed, 11 insertions(+), 12 deletions(-)
 create mode 100644 app/views/navigation/_feed.haml
 delete mode 100644 app/views/static/_mobile_nav.html.haml

diff --git a/app/views/layouts/feed.haml b/app/views/layouts/feed.haml
index b4f84f0a..99fcc1fd 100644
--- a/app/views/layouts/feed.haml
+++ b/app/views/layouts/feed.haml
@@ -1,4 +1,4 @@
-= render 'static/mobile_nav'
+= render 'navigation/feed'
 .container.j2-page
   .row
     .col-md-3.col-sm-4
diff --git a/app/views/navigation/_feed.haml b/app/views/navigation/_feed.haml
new file mode 100644
index 00000000..acbfaeec
--- /dev/null
+++ b/app/views/navigation/_feed.haml
@@ -0,0 +1,10 @@
+%nav.navbar.navbar-light.navbar-static-top.j2-navbar.d-flex.d-sm-none.bg-white{role: "navigation"}
+  %a.navbar-brand{href: "/"} Timelines
+  %button.navbar-toggler{"data-target" => "#j2-tl-navbar-collapse", "data-toggle" => "collapse", type: "button"}
+    %span.sr-only Toggle navigation
+    %span.navbar-toggler-icon
+  #j2-tl-navbar-collapse.collapse.navbar-collapse
+    %ul.nav.navbar-nav
+      = nav_entry "Public", public_timeline_path
+      - current_user.groups.each do |group|
+        = nav_entry group.display_name, group_timeline_path(group.name)
\ No newline at end of file
diff --git a/app/views/static/_mobile_nav.html.haml b/app/views/static/_mobile_nav.html.haml
deleted file mode 100644
index 379ca143..00000000
--- a/app/views/static/_mobile_nav.html.haml
+++ /dev/null
@@ -1,11 +0,0 @@
-%nav.navbar.navbar-light.navbar-static-top.j2-navbar.d-flex.d-sm-none.bg-default{role: "navigation"}
-  .container
-    %a.navbar-brand{href: "/"} Timelines
-    %button.navbar-toggler{"data-target" => "#j2-tl-navbar-collapse", "data-toggle" => "collapse", type: "button"}
-      %span.sr-only Toggle navigation
-      %span.navbar-toggler-icon
-    #j2-tl-navbar-collapse.collapse.navbar-collapse
-      %ul.nav.navbar-nav
-        = nav_entry "Public", public_timeline_path
-        - current_user.groups.each do |group|
-          = nav_entry group.display_name, group_timeline_path(group.name)

From aeedee8b2ff63dafa3a26dbdabdf6e9a8403527d Mon Sep 17 00:00:00 2001
From: Andreas Nedbal <andy@pixelde.su>
Date: Sat, 25 Apr 2020 20:20:00 +0200
Subject: [PATCH 030/172] Move moderation navigation to new location

---
 app/views/layouts/moderation.haml              |  2 +-
 app/views/moderation/_moderation_nav.html.haml | 14 --------------
 app/views/navigation/_moderation.haml          | 13 +++++++++++++
 app/views/tabs/_moderation.haml                |  2 +-
 4 files changed, 15 insertions(+), 16 deletions(-)
 delete mode 100644 app/views/moderation/_moderation_nav.html.haml
 create mode 100644 app/views/navigation/_moderation.haml

diff --git a/app/views/layouts/moderation.haml b/app/views/layouts/moderation.haml
index 59bb4fe9..761fae5f 100644
--- a/app/views/layouts/moderation.haml
+++ b/app/views/layouts/moderation.haml
@@ -1,4 +1,4 @@
-= render 'moderation/moderation_nav'
+= render 'navigation/moderation'
 .container.j2-page
   .row
     .col-md-3.col-sm-4.col-xs-12
diff --git a/app/views/moderation/_moderation_nav.html.haml b/app/views/moderation/_moderation_nav.html.haml
deleted file mode 100644
index d214c66a..00000000
--- a/app/views/moderation/_moderation_nav.html.haml
+++ /dev/null
@@ -1,14 +0,0 @@
-%nav.navbar.navbar-default.navbar-static-top.j2-navbar.d-flex.d-sm-none{role: "navigation"}
-  .container
-    %a.navbar-brand{href: moderation_path} Moderation
-    %button.navbar-toggler{"data-target" => "#j2-tl-navbar-collapse", "data-toggle" => "collapse", type: "button"}
-      %span.sr-only Toggle navigation
-      %span.navbar-toggler-icon
-    #j2-tl-navbar-collapse.collapse.navbar-collapse
-      %ul.nav.navbar-nav
-        = nav_entry t('views.moderation.tabs.all'), moderation_path
-        = nav_entry t('views.general.answer').pluralize(2)  ,     moderation_path('answer')
-        = nav_entry t('views.general.comment').pluralize(2),    moderation_path('comment')
-        = nav_entry t('views.general.user').pluralize(2)    ,       moderation_path('user')
-        = nav_entry t('views.general.question').pluralize(2),   moderation_path('question')
-        = nav_entry 'Priority',   moderation_priority_path
diff --git a/app/views/navigation/_moderation.haml b/app/views/navigation/_moderation.haml
new file mode 100644
index 00000000..e97f466d
--- /dev/null
+++ b/app/views/navigation/_moderation.haml
@@ -0,0 +1,13 @@
+%nav.navbar.navbar-light.bg-light.navbar-static-top.j2-navbar.d-flex.d-sm-none{role: "navigation"}
+  %a.navbar-brand{href: moderation_path} Moderation
+  %button.navbar-toggler{"data-target" => "#j2-tl-navbar-collapse", "data-toggle" => "collapse", type: "button"}
+    %span.sr-only Toggle navigation
+    %span.navbar-toggler-icon
+  #j2-tl-navbar-collapse.collapse.navbar-collapse
+    %ul.nav.navbar-nav
+      = nav_entry t('views.moderation.tabs.all'), moderation_path
+      = nav_entry t('views.general.answer').pluralize(2)  ,     moderation_path('answer')
+      = nav_entry t('views.general.comment').pluralize(2),    moderation_path('comment')
+      = nav_entry t('views.general.user').pluralize(2)    ,       moderation_path('user')
+      = nav_entry t('views.general.question').pluralize(2),   moderation_path('question')
+      = nav_entry 'Priority',   moderation_priority_path
diff --git a/app/views/tabs/_moderation.haml b/app/views/tabs/_moderation.haml
index d6615055..d8c83463 100644
--- a/app/views/tabs/_moderation.haml
+++ b/app/views/tabs/_moderation.haml
@@ -1,4 +1,4 @@
-.card.hidden-xs
+.card.d-none.d-sm-block
   .list-group
     = list_group_item t('views.moderation.tabs.all'), moderation_path
     = list_group_item t('views.general.answer').pluralize(2),     moderation_path('answer')

From 18d4fad00e0206c7487685d8505dabe2404e98a8 Mon Sep 17 00:00:00 2001
From: Andreas Nedbal <andy@pixelde.su>
Date: Sat, 25 Apr 2020 20:27:56 +0200
Subject: [PATCH 031/172] Move notification navigation to new location

---
 app/views/layouts/notifications.haml              |  2 +-
 app/views/navigation/_notification.haml           | 14 ++++++++++++++
 .../notifications/_notification_nav.html.haml     | 15 ---------------
 app/views/tabs/_notifications.haml                |  4 ++--
 4 files changed, 17 insertions(+), 18 deletions(-)
 create mode 100644 app/views/navigation/_notification.haml
 delete mode 100644 app/views/notifications/_notification_nav.html.haml

diff --git a/app/views/layouts/notifications.haml b/app/views/layouts/notifications.haml
index 5d015895..fe56bcbd 100644
--- a/app/views/layouts/notifications.haml
+++ b/app/views/layouts/notifications.haml
@@ -1,4 +1,4 @@
-= render 'notifications/notification_nav'
+= render 'navigation/notification'
 .container.j2-page
   .row
     .col-md-3.col-xs-12.col-sm-4
diff --git a/app/views/navigation/_notification.haml b/app/views/navigation/_notification.haml
new file mode 100644
index 00000000..c2be678a
--- /dev/null
+++ b/app/views/navigation/_notification.haml
@@ -0,0 +1,14 @@
+%nav.navbar.navbar-light.bg-white.navbar-static-top.j2-navbar.d-flex.d-sm-none{role: "navigation"}
+  %a.navbar-brand{href: notifications_path} Notifications
+  %button.navbar-toggler{"data-target" => "#j2-tl-navbar-collapse", "data-toggle" => "collapse", type: "button"}
+    %span.sr-only Toggle navigation
+    %span.navbar-toggler-icon
+  #j2-tl-navbar-collapse.collapse.navbar-collapse
+    %ul.nav.navbar-nav
+      = nav_entry "New Notifications", notifications_path
+      = nav_entry "All Notifications", notifications_path('all')
+      = nav_entry t('views.notifications.tabs.answer'), notifications_path('answer')
+      = nav_entry t('views.notifications.tabs.smile'), notifications_path('smile')
+      = nav_entry t('views.notifications.tabs.comment'), notifications_path('comment')
+      = nav_entry t('views.notifications.tabs.commentsmile'), notifications_path('commentsmile')
+      = nav_entry t('views.notifications.tabs.relationship'), notifications_path('relationship')
diff --git a/app/views/notifications/_notification_nav.html.haml b/app/views/notifications/_notification_nav.html.haml
deleted file mode 100644
index cc71f8cb..00000000
--- a/app/views/notifications/_notification_nav.html.haml
+++ /dev/null
@@ -1,15 +0,0 @@
-%nav.navbar.navbar-default.navbar-static-top.j2-navbar.d-block.d-sm-none{role: "navigation"}
-  .container
-    %a.navbar-brand{href: notifications_path} Notifications
-    %button.navbar-toggler{"data-target" => "#j2-tl-navbar-collapse", "data-toggle" => "collapse", type: "button"}
-      %span.sr-only Toggle navigation
-      %span.navbar-toggler-icon
-    #j2-tl-navbar-collapse.collapse.navbar-collapse
-      %ul.nav.navbar-nav
-        = nav_entry "New Notifications", notifications_path
-        = nav_entry "All Notifications", notifications_path('all')
-        = nav_entry t('views.notifications.tabs.answer'), notifications_path('answer')
-        = nav_entry t('views.notifications.tabs.smile'), notifications_path('smile')
-        = nav_entry t('views.notifications.tabs.comment'), notifications_path('comment')
-        = nav_entry t('views.notifications.tabs.commentsmile'), notifications_path('commentsmile')
-        = nav_entry t('views.notifications.tabs.relationship'), notifications_path('relationship')
diff --git a/app/views/tabs/_notifications.haml b/app/views/tabs/_notifications.haml
index fd06ace9..983d3ae7 100644
--- a/app/views/tabs/_notifications.haml
+++ b/app/views/tabs/_notifications.haml
@@ -1,9 +1,9 @@
-.card.hidden-xs
+.card.d-none.d-sm-block
   .list-group
     = list_group_item "New Notifications", notifications_path, badge: Notification.for(current_user).where(new: true).count
     = list_group_item "All Notifications", notifications_path('all')
 
-.card.hidden-xs
+.card.d-none.d-sm-block
   .card-header
     Filter by Type
   .list-group

From 1885343900c3750796c1bdfaf46b65b018e52cbb Mon Sep 17 00:00:00 2001
From: Andreas Nedbal <andy@pixelde.su>
Date: Sun, 26 Apr 2020 14:29:23 +0200
Subject: [PATCH 032/172] Clean up main navigation

- Move main navigation into views/navigation
- Split guest navigation into seperate file
- Move main navigation partials into subfolder
- Further adjustments for Bootstrap 4 compatibility
---
 app/views/layouts/_header.html.haml           | 34 -------------------
 app/views/layouts/base.haml                   |  5 ++-
 app/views/navigation/_guest.haml              | 10 ++++++
 app/views/navigation/_main.haml               | 28 +++++++++++++++
 .../main/_notifications.haml}                 |  6 ++--
 .../main/_profile.haml}                       |  4 +--
 6 files changed, 47 insertions(+), 40 deletions(-)
 delete mode 100644 app/views/layouts/_header.html.haml
 create mode 100644 app/views/navigation/_guest.haml
 create mode 100644 app/views/navigation/_main.haml
 rename app/views/{layouts/_notifications.html.haml => navigation/main/_notifications.haml} (97%)
 rename app/views/{layouts/_profile.html.haml => navigation/main/_profile.haml} (92%)

diff --git a/app/views/layouts/_header.html.haml b/app/views/layouts/_header.html.haml
deleted file mode 100644
index 07087947..00000000
--- a/app/views/layouts/_header.html.haml
+++ /dev/null
@@ -1,34 +0,0 @@
-%nav.navbar.navbar-dark.navbar-expand-lg.bg-primary.fixed-top{role: "navigation"}
-  .container{class: ios_web_app? ? "ios-web-app" : ''}
-    %a.navbar-brand{href: "/"}= APP_CONFIG['site_name']
-    %button.navbar-toggler{"data-target" => "#j2-main-navbar-collapse", "data-toggle" => "collapse", type: "button"}
-      %span.sr-only Toggle navigation
-      %span.navbar-toggler-icon
-    #j2-main-navbar-collapse.collapse.navbar-collapse
-      - if user_signed_in?
-        %ul.nav.navbar-nav.mr-auto
-          = nav_entry t('views.navigation.timeline'), root_path
-          = nav_entry t('views.navigation.inbox'), "/inbox", badge: inbox_count
-          - if APP_CONFIG.dig(:features, :discover, :enabled) || current_user.mod?
-            = nav_entry t('views.navigation.discover'), discover_path
-        %ul.nav.navbar-nav
-          - unless @user.nil?
-            - unless @user == current_user
-              %li.nav-item.hidden-xs{"data-toggle" => "tooltip", "data-placement" => "bottom", title: t('views.actions.group')}
-                %a.nav-link{href: '#', data: { target: "#modal-group-memberships", toggle: :modal }}
-                  %i.fa.fa-users.hidden-xs
-                  %span.d-none.d-sm-inline.d-md-none= t('views.actions.group')
-          = render "layouts/notifications"
-          %li.nav-item.hidden-xs{"data-toggle" => "tooltip", "data-placement" => "bottom", title: t('views.actions.ask_question')}
-            .btn.btn-link.navbar-btn{name: "toggle-all-ask", "data-target" => "#modal-ask-followers", "data-toggle" => "modal", :type => "button"}
-              %i.fa.fa-pencil-square-o
-          = render "layouts/profile"
-      - else
-        %ul.nav.navbar-nav.ml-auto
-          = nav_entry t('views.sessions.create'), new_user_session_path
-          = nav_entry t('views.sessions.new'), new_user_registration_path
-
-- if user_signed_in?
-  = render 'modal/ask'
-  %button.btn.btn-primary.btn-fab.d-block.d-sm-none{"data-target" => "#modal-ask-followers", "data-toggle" => "modal", :type => "button"}
-    %i.fa.fa-pencil-square-o
diff --git a/app/views/layouts/base.haml b/app/views/layouts/base.haml
index 92a27661..87f68301 100644
--- a/app/views/layouts/base.haml
+++ b/app/views/layouts/base.haml
@@ -24,7 +24,10 @@
         = javascript_include_tag 'moderation', 'data-turbolinks-track' => true
     = csrf_meta_tags
   %body#version1
-    = render 'layouts/header'
+    - if user_signed_in?
+      = render 'navigation/main'
+    - else
+      = render 'navigation/guest'
     = render 'shared/announcements'
     = yield
     = render 'shared/locales'
diff --git a/app/views/navigation/_guest.haml b/app/views/navigation/_guest.haml
new file mode 100644
index 00000000..d06d91c8
--- /dev/null
+++ b/app/views/navigation/_guest.haml
@@ -0,0 +1,10 @@
+%nav.navbar.navbar-dark.navbar-expand-lg.bg-primary.fixed-top{role: "navigation"}
+  .container{class: ios_web_app? ? "ios-web-app" : ''}
+    %a.navbar-brand{href: "/"}= APP_CONFIG['site_name']
+    %button.navbar-toggler{"data-target" => "#j2-main-navbar-collapse", "data-toggle" => "collapse", type: "button"}
+      %span.sr-only Toggle navigation
+      %span.navbar-toggler-icon
+    #j2-main-navbar-collapse.collapse.navbar-collapse
+      %ul.nav.navbar-nav.ml-auto
+        = nav_entry t('views.sessions.create'), new_user_session_path
+        = nav_entry t('views.sessions.new'), new_user_registration_path
\ No newline at end of file
diff --git a/app/views/navigation/_main.haml b/app/views/navigation/_main.haml
new file mode 100644
index 00000000..a24f0fd9
--- /dev/null
+++ b/app/views/navigation/_main.haml
@@ -0,0 +1,28 @@
+%nav.navbar.navbar-dark.navbar-expand-lg.bg-primary.fixed-top{role: "navigation"}
+  .container{class: ios_web_app? ? "ios-web-app" : ''}
+    %a.navbar-brand{href: "/"}= APP_CONFIG['site_name']
+    %button.navbar-toggler{"data-target" => "#j2-main-navbar-collapse", "data-toggle" => "collapse", type: "button"}
+      %span.sr-only Toggle navigation
+      %span.navbar-toggler-icon
+    #j2-main-navbar-collapse.collapse.navbar-collapse
+      %ul.nav.navbar-nav.mr-auto
+        = nav_entry t('views.navigation.timeline'), root_path
+        = nav_entry t('views.navigation.inbox'), "/inbox", badge: inbox_count
+        - if APP_CONFIG.dig(:features, :discover, :enabled) || current_user.mod?
+          = nav_entry t('views.navigation.discover'), discover_path
+      %ul.nav.navbar-nav
+        - unless @user.nil?
+          - unless @user == current_user
+            %li.nav-item.d-none.d-sm-block{"data-toggle" => "tooltip", "data-placement" => "bottom", title: t('views.actions.group')}
+              %a.nav-link{href: '#', data: { target: "#modal-group-memberships", toggle: :modal }}
+                %i.fa.fa-users.hidden-xs
+                %span.d-none.d-sm-inline.d-md-none= t('views.actions.group')
+        = render "navigation/main/notifications"
+        %li.nav-item.d-none.d-sm-block{"data-toggle" => "tooltip", "data-placement" => "bottom", title: t('views.actions.ask_question')}
+          %a.nav-link{href: "#", name: "toggle-all-ask", "data-target" => "#modal-ask-followers", "data-toggle" => "modal"}
+            %i.fa.fa-pencil-square-o
+        = render "navigation/main/profile"
+
+= render 'modal/ask'
+%button.btn.btn-primary.btn-fab.d-block.d-sm-none{"data-target" => "#modal-ask-followers", "data-toggle" => "modal", :type => "button"}
+  %i.fa.fa-pencil-square-o
\ No newline at end of file
diff --git a/app/views/layouts/_notifications.html.haml b/app/views/navigation/main/_notifications.haml
similarity index 97%
rename from app/views/layouts/_notifications.html.haml
rename to app/views/navigation/main/_notifications.haml
index 4a3583ff..369e5135 100644
--- a/app/views/layouts/_notifications.html.haml
+++ b/app/views/navigation/main/_notifications.haml
@@ -1,7 +1,7 @@
-= nav_entry t('views.navigation.notifications'), notifications_path, badge: notification_count, class: 'visible-xs'
+= nav_entry t('views.navigation.notifications'), notifications_path, badge: notification_count, class: 'd-block d-sm-none'
 - notifications = Notification.for(current_user).where(new: true).limit(4)
-%li.dropdown.hidden-xs
-  %a.dropdown-toggle{href: "#", "data-toggle" => "dropdown"}
+%li.nav-item.dropdown.d-none.d-sm-block
+  %a.nav-link.dropdown-toggle{href: "#", "data-toggle" => "dropdown"}
     - if notification_count.nil?
       %i.fa.fa-bell-o
     - else
diff --git a/app/views/layouts/_profile.html.haml b/app/views/navigation/main/_profile.haml
similarity index 92%
rename from app/views/layouts/_profile.html.haml
rename to app/views/navigation/main/_profile.haml
index 59da0113..4af63732 100644
--- a/app/views/layouts/_profile.html.haml
+++ b/app/views/navigation/main/_profile.haml
@@ -1,5 +1,5 @@
-%li.dropdown.profile--image-dropdown
-  %a.dropdown-toggle{href: "#", "data-toggle" => "dropdown"}
+%li.nav-item.dropdown.profile--image-dropdown
+  %a.nav-link.dropdown-toggle{href: "#", "data-toggle" => "dropdown"}
     %img.profile--image-avatar.hidden-xs{src: current_user.profile_picture.url(:small)}
     %span.d-none.d-sm-inline.d-md-none
       = current_user.screen_name

From 4917ce46d3b193da03b17fdc3ddc3fe75048ab64 Mon Sep 17 00:00:00 2001
From: Andreas Nedbal <andy@pixelde.su>
Date: Sun, 26 Apr 2020 14:30:23 +0200
Subject: [PATCH 033/172] Fix "nav-item" assigning class in nav_entry helper

---
 app/helpers/application_helper.rb | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/helpers/application_helper.rb b/app/helpers/application_helper.rb
index 4997da15..7f353e1e 100644
--- a/app/helpers/application_helper.rb
+++ b/app/helpers/application_helper.rb
@@ -18,7 +18,7 @@ module ApplicationHelper
         }"))}"
     end
 
-    content_tag(:li, link_to(body.html_safe, path, class: "nav-link"), class: ("#{'nav-item active ' if current_page? path}#{options[:class]}"))
+    content_tag(:li, link_to(body.html_safe, path, class: "nav-link"), class: ("nav-item#{' active' if current_page? path} #{options[:class]}"))
   end
 
   def list_group_item(body, path, options = {})

From b550e7827251446d7500b287062dc146d23e486e Mon Sep 17 00:00:00 2001
From: Andreas Nedbal <andy@pixelde.su>
Date: Sun, 26 Apr 2020 15:26:55 +0200
Subject: [PATCH 034/172] Refactor notifications into partials

All notification type layouts have been:

1) present in both the navigation layout and the notification page
2) in a single file

This commit addresses both issues and creates partials for all notfication types.
---
 app/views/navigation/main/_notifications.haml | 100 +-----------------
 .../notifications/_notification.html.haml     | 100 ------------------
 app/views/notifications/index.haml            |   4 +-
 app/views/notifications/type/_answer.haml     |  23 ++++
 app/views/notifications/type/_comment.haml    |  28 +++++
 .../notifications/type/_commentsmile.haml     |  17 +++
 .../notifications/type/_relationship.haml     |   7 ++
 app/views/notifications/type/_smile.haml      |  17 +++
 8 files changed, 97 insertions(+), 199 deletions(-)
 delete mode 100644 app/views/notifications/_notification.html.haml
 create mode 100644 app/views/notifications/type/_answer.haml
 create mode 100644 app/views/notifications/type/_comment.haml
 create mode 100644 app/views/notifications/type/_commentsmile.haml
 create mode 100644 app/views/notifications/type/_relationship.haml
 create mode 100644 app/views/notifications/type/_smile.haml

diff --git a/app/views/navigation/main/_notifications.haml b/app/views/navigation/main/_notifications.haml
index 369e5135..584cc8b9 100644
--- a/app/views/navigation/main/_notifications.haml
+++ b/app/views/navigation/main/_notifications.haml
@@ -19,104 +19,8 @@
     - else
       - notifications.each do |notification|
         .dropdown-item.media.notification--dropdown-media
-          - case notification.target_type
-            - when "Answer"
-              .pull-left
-                %i.fa.fa-2x.fa-fw.fa-exclamation
-              .media-body
-                .notification--heading
-                  %img.notification--img-sm{src: notification.target.user.profile_picture.url(:small)}
-                  = user_screen_name notification.target.user
-                  answered
-                  = link_to "your question", show_user_answer_path(username: notification.target.user.screen_name, id: notification.target.id)
-                  = time_tooltip(notification.target)
-                  ago
-                .list-group.notification--list
-                  .list-group-item
-                    .media.question-media
-                      .media-body
-                        %h6.notification--list-heading question
-                        .notification--list-content
-                          = markdown notification.target.question.content[0..60] + "#{notification.target.question.content.length > 60 ? '[...]' : ''}"
-                  .list-group-item
-                    .media.question-media
-                      .media-body
-                        %h6.notification--list-heading answer
-                        .notification--list-content
-                          = markdown notification.target.content[0..60] + "#{notification.target.content.length > 60 ? '[...]' : ''}"
-            - when "Relationship"
-              .pull-left
-                %img.img-rounded.notification--dropdown-img{src: notification.target.source.profile_picture.url(:small)}
-              .media-body
-                %h6.media-heading.notification--dropdown-user
-                  = user_screen_name notification.target.source
-                .notification--dropdown-text
-                  = raw t('views.notifications.relationship.body', time: time_ago_in_words(notification.target.created_at))
-            - when "Smile"
-              .pull-left
-                %i.fa.fa-2x.fa-fw.fa-smile-o
-              .media-body
-                .notification--heading
-                  %img.notification--img-sm{src: notification.target.user.profile_picture.url(:small)}
-                  = user_screen_name notification.target.user
-                  smiled
-                  = link_to "your answer", show_user_answer_path(username: notification.target.user.screen_name, id: notification.target.answer.id)
-                  = time_tooltip(notification.target)
-                  ago
-                .list-group.notification--list
-                  .list-group-item
-                    .media.question-media
-                      .media-body
-                        %h6.notification--list-heading answer
-                        .notification--list-content
-                          = markdown notification.target.answer.content[0..60] + "#{notification.target.answer.content.length > 60 ? '[...]' : ''}"
-            - when "CommentSmile"
-              .pull-left
-                %i.fa.fa-2x.fa-fw.fa-smile-o
-              .media-body
-                .notification--heading
-                  %img.notification--img-sm{src: notification.target.user.profile_picture.url(:small)}
-                  = user_screen_name notification.target.user
-                  smiled
-                  = link_to "your comment", show_user_answer_path(username: notification.target.user.screen_name, id: notification.target.comment.answer.id)
-                  = time_tooltip(notification.target)
-                  ago
-                .list-group.notification--list
-                  .list-group-item
-                    .media.question-media
-                      .media-body
-                        %h6.notification--list-heading comment
-                        .notification--list-content
-                          = markdown notification.target.comment.content[0..60] + "#{notification.target.comment.content.length > 60 ? '[...]' : ''}"
-            - when "Comment"
-              .pull-left
-                %i.fa.fa-2x.fa-fw.fa-comments
-              .media-body
-                .notification--heading
-                  %img.notification--img-sm{src: notification.target.user.profile_picture.url(:small)}
-                  = user_screen_name notification.target.user
-                  commented on
-                  - if notification.target.answer.user == current_user
-                    = link_to "your answer", show_user_answer_path(username: notification.target.user.screen_name, id: notification.target.answer.id)
-                  - elsif notification.target.user == notification.target.answer.user
-                    = link_to "their answer", show_user_answer_path(username: notification.target.user.screen_name, id: notification.target.answer.id)
-                  - else
-                    = link_to "#{notification.target.answer.user.screen_name}'s answer", show_user_answer_path(username: notification.target.user.screen_name, id: notification.target.answer.id)
-                  = time_tooltip(notification.target)
-                  ago
-                .list-group.notification--list
-                  .list-group-item
-                    .media.question-media
-                      .media-body
-                        %h6.notification--list-heading answer
-                        .notification--list-content
-                          = markdown notification.target.answer.content[0..60] + "#{notification.target.answer.content.length > 60 ? '[...]' : ''}"
-                  .list-group-item
-                    .media.question-media
-                      .media-body
-                        %h6.notification--list-heading comment
-                        .notification--list-content
-                          = markdown notification.target.content[0..60] + "#{notification.target.content.length > 60 ? '[...]' : ''}"
+          = render "notifications/type/#{notification.target_type.downcase}", notification: notification
+
       %a.dropdown-item.text-center{href: notifications_path}
         %i.fa.fa-fw.fa-chevron-right
         Show all new notifications
diff --git a/app/views/notifications/_notification.html.haml b/app/views/notifications/_notification.html.haml
deleted file mode 100644
index 594ec85c..00000000
--- a/app/views/notifications/_notification.html.haml
+++ /dev/null
@@ -1,100 +0,0 @@
-%li.list-group-item
-  .media
-    - case notification.target_type
-      - when "Answer"
-        .pull-left
-          %i.fa.fa-2x.fa-fw.fa-exclamation
-        .media-body
-          .notification--heading
-            %img.notification--img-sm{src: notification.target.user.profile_picture.url(:small)}
-            = user_screen_name notification.target.user
-            answered
-            = link_to "your question", show_user_answer_path(username: notification.target.user.screen_name, id: notification.target.id)
-            = time_tooltip(notification.target)
-            ago
-          .list-group.notification--list
-            .list-group-item
-              .media.question-media
-                .media-body
-                  %h6.notification--list-heading question
-                  .notification--list-content
-                    = markdown notification.target.question.content
-            .list-group-item
-              .media.question-media
-                .media-body
-                  %h6.notification--list-heading answer
-                  .notification--list-content
-                    = markdown notification.target.content[0..255] + "#{notification.target.content.length > 255 ? '[...]' : ''}"
-      - when "Relationship"
-        .pull-left
-          %img.img-rounded.notification--dropdown-img{src: notification.target.source.profile_picture.url(:small)}
-        .media-body
-          %h6.media-heading.notification--dropdown-user
-            = user_screen_name notification.target.source
-          .notification--dropdown-text
-            = raw t('views.notifications.relationship.body', time: time_ago_in_words(notification.target.created_at))
-      - when "Smile"
-        .pull-left
-          %i.fa.fa-2x.fa-fw.fa-smile-o
-        .media-body
-          .notification--heading
-            %img.notification--img-sm{src: notification.target.user.profile_picture.url(:small)}
-            = user_screen_name notification.target.user
-            smiled
-            = link_to "your answer", show_user_answer_path(username: notification.target.user.screen_name, id: notification.target.answer.id)
-            = time_tooltip(notification.target)
-            ago
-          .list-group.notification--list
-            .list-group-item
-              .media.question-media
-                .media-body
-                  %h6.notification--list-heading answer
-                  .notification--list-content
-                    = markdown notification.target.answer.content[0..255] + "#{notification.target.answer.content.length > 255 ? '[...]' : ''}"
-      - when "CommentSmile"
-        .pull-left
-          %i.fa.fa-2x.fa-fw.fa-smile-o
-        .media-body
-          .notification--heading
-            %img.notification--img-sm{src: notification.target.user.profile_picture.url(:small)}
-            = user_screen_name notification.target.user
-            smiled
-            = link_to "your comment", show_user_answer_path(username: notification.target.user.screen_name, id: notification.target.comment.answer.id)
-            = time_tooltip(notification.target)
-            ago
-          .list-group.notification--list
-            .list-group-item
-              .media.question-media
-                .media-body
-                  %h6.notification--list-heading comment
-                  .notification--list-content
-                    = markdown notification.target.comment.content
-      - when "Comment"
-        .pull-left
-          %i.fa.fa-2x.fa-fw.fa-comments
-        .media-body
-          .notification--heading
-            %img.notification--img-sm{src: notification.target.user.profile_picture.url(:small)}
-            = user_screen_name notification.target.user
-            commented on
-            - if notification.target.answer.user == current_user
-              = link_to "your answer", show_user_answer_path(username: notification.target.user.screen_name, id: notification.target.answer.id)
-            - elsif notification.target.user == notification.target.answer.user
-              = link_to "their answer", show_user_answer_path(username: notification.target.user.screen_name, id: notification.target.answer.id)
-            - else
-              = link_to "#{notification.target.answer.user.screen_name}'s answer", show_user_answer_path(username: notification.target.user.screen_name, id: notification.target.answer.id)
-            = time_tooltip(notification.target)
-            ago
-          .list-group.notification--list
-            .list-group-item
-              .media.question-media
-                .media-body
-                  %h6.notification--list-heading answer
-                  .notification--list-content
-                    = markdown notification.target.answer.content[0..255] + "#{notification.target.answer.content.length > 255 ? '[...]' : ''}"
-            .list-group-item
-              .media.question-media
-                .media-body
-                  %h6.notification--list-heading comment
-                  .notification--list-content
-                    = markdown notification.target.content
diff --git a/app/views/notifications/index.haml b/app/views/notifications/index.haml
index 16947232..11a923af 100644
--- a/app/views/notifications/index.haml
+++ b/app/views/notifications/index.haml
@@ -11,7 +11,9 @@
             No notifications.
     - else
       - @notifications.each do |notification|
-        = render 'notifications/notification', notification: notification
+        %li.list-group-item
+          .media
+            = render "notifications/type/#{notification.target_type.downcase}", notification: notification
 
       = render 'shared/cursored_pagination_dummy', more_data_available: @more_data_available, last_id: @notifications_last_id, permitted_params: %i[type]
 
diff --git a/app/views/notifications/type/_answer.haml b/app/views/notifications/type/_answer.haml
new file mode 100644
index 00000000..ee395f77
--- /dev/null
+++ b/app/views/notifications/type/_answer.haml
@@ -0,0 +1,23 @@
+.pull-left
+  %i.fa.fa-2x.fa-fw.fa-exclamation
+.media-body
+  .notification--heading
+    %img.notification--img-sm{src: notification.target.user.profile_picture.url(:small)}
+    = user_screen_name notification.target.user
+    answered
+    = link_to "your question", show_user_answer_path(username: notification.target.user.screen_name, id: notification.target.id)
+    = time_tooltip(notification.target)
+    ago
+  .list-group.notification--list
+    .list-group-item
+      .media.question-media
+        .media-body
+          %h6.notification--list-heading question
+          .notification--list-content
+            = markdown notification.target.question.content[0..60] + "#{notification.target.question.content.length > 60 ? '[...]' : ''}"
+    .list-group-item
+      .media.question-media
+        .media-body
+          %h6.notification--list-heading answer
+          .notification--list-content
+            = markdown notification.target.content[0..60] + "#{notification.target.content.length > 60 ? '[...]' : ''}"
\ No newline at end of file
diff --git a/app/views/notifications/type/_comment.haml b/app/views/notifications/type/_comment.haml
new file mode 100644
index 00000000..6ab20dc1
--- /dev/null
+++ b/app/views/notifications/type/_comment.haml
@@ -0,0 +1,28 @@
+.pull-left
+  %i.fa.fa-2x.fa-fw.fa-comments
+.media-body
+  .notification--heading
+    %img.notification--img-sm{src: notification.target.user.profile_picture.url(:small)}
+    = user_screen_name notification.target.user
+    commented on
+    - if notification.target.answer.user == current_user
+      = link_to "your answer", show_user_answer_path(username: notification.target.user.screen_name, id: notification.target.answer.id)
+    - elsif notification.target.user == notification.target.answer.user
+      = link_to "their answer", show_user_answer_path(username: notification.target.user.screen_name, id: notification.target.answer.id)
+    - else
+      = link_to "#{notification.target.answer.user.screen_name}'s answer", show_user_answer_path(username: notification.target.user.screen_name, id: notification.target.answer.id)
+    = time_tooltip(notification.target)
+    ago
+  .list-group.notification--list
+    .list-group-item
+      .media.question-media
+        .media-body
+          %h6.notification--list-heading answer
+          .notification--list-content
+            = markdown notification.target.answer.content[0..60] + "#{notification.target.answer.content.length > 60 ? '[...]' : ''}"
+    .list-group-item
+      .media.question-media
+        .media-body
+          %h6.notification--list-heading comment
+          .notification--list-content
+            = markdown notification.target.content[0..60] + "#{notification.target.content.length > 60 ? '[...]' : ''}"
\ No newline at end of file
diff --git a/app/views/notifications/type/_commentsmile.haml b/app/views/notifications/type/_commentsmile.haml
new file mode 100644
index 00000000..5c06ce2e
--- /dev/null
+++ b/app/views/notifications/type/_commentsmile.haml
@@ -0,0 +1,17 @@
+.pull-left
+  %i.fa.fa-2x.fa-fw.fa-smile-o
+.media-body
+  .notification--heading
+    %img.notification--img-sm{src: notification.target.user.profile_picture.url(:small)}
+    = user_screen_name notification.target.user
+    smiled
+    = link_to "your comment", show_user_answer_path(username: notification.target.user.screen_name, id: notification.target.comment.answer.id)
+    = time_tooltip(notification.target)
+    ago
+  .list-group.notification--list
+    .list-group-item
+      .media.question-media
+        .media-body
+          %h6.notification--list-heading comment
+          .notification--list-content
+            = markdown notification.target.comment.content[0..60] + "#{notification.target.comment.content.length > 60 ? '[...]' : ''}"
\ No newline at end of file
diff --git a/app/views/notifications/type/_relationship.haml b/app/views/notifications/type/_relationship.haml
new file mode 100644
index 00000000..8ee7cde9
--- /dev/null
+++ b/app/views/notifications/type/_relationship.haml
@@ -0,0 +1,7 @@
+.pull-left
+  %img.img-rounded.notification--dropdown-img{src: notification.target.source.profile_picture.url(:small)}
+.media-body
+  %h6.media-heading.notification--dropdown-user
+    = user_screen_name notification.target.source
+  .notification--dropdown-text
+    = raw t('views.notifications.relationship.body', time: time_ago_in_words(notification.target.created_at))
\ No newline at end of file
diff --git a/app/views/notifications/type/_smile.haml b/app/views/notifications/type/_smile.haml
new file mode 100644
index 00000000..01ff40b8
--- /dev/null
+++ b/app/views/notifications/type/_smile.haml
@@ -0,0 +1,17 @@
+.pull-left
+  %i.fa.fa-2x.fa-fw.fa-smile-o
+.media-body
+  .notification--heading
+    %img.notification--img-sm{src: notification.target.user.profile_picture.url(:small)}
+    = user_screen_name notification.target.user
+    smiled
+    = link_to "your answer", show_user_answer_path(username: notification.target.user.screen_name, id: notification.target.answer.id)
+    = time_tooltip(notification.target)
+    ago
+  .list-group.notification--list
+    .list-group-item
+      .media.question-media
+        .media-body
+          %h6.notification--list-heading answer
+          .notification--list-content
+            = markdown notification.target.answer.content[0..60] + "#{notification.target.answer.content.length > 60 ? '[...]' : ''}"
\ No newline at end of file

From 1f678b80c1079bf45b775ca791df66868c984d36 Mon Sep 17 00:00:00 2001
From: Andreas Nedbal <andy@pixelde.su>
Date: Sun, 26 Apr 2020 15:27:19 +0200
Subject: [PATCH 035/172] Fixed issue rendering privilege item partials

---
 app/views/modal/_privileges.haml | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/app/views/modal/_privileges.haml b/app/views/modal/_privileges.haml
index 99d77ed9..0fb30de0 100644
--- a/app/views/modal/_privileges.haml
+++ b/app/views/modal/_privileges.haml
@@ -8,12 +8,12 @@
           %span{"aria-hidden" => "true"} ×
           %span.sr-only= t 'views.actions.close'
       %ul.list-group.groups--list
-        = render :partial 'modal/privileges/item', privilege: 'blogger', description: t('views.modal.privilege.blogger'), user: @user
-        = render :partial 'modal/privileges/item', privilege: 'contributor', description: t('views.modal.privilege.contributor'), user: @user
-        = render :partial 'modal/privileges/item', privilege: 'translator', description: t('views.modal.privilege.translator'), user: @user
+        = render 'modal/privileges/item', privilege: 'blogger', description: t('views.modal.privilege.blogger'), user: @user
+        = render 'modal/privileges/item', privilege: 'contributor', description: t('views.modal.privilege.contributor'), user: @user
+        = render 'modal/privileges/item', privilege: 'translator', description: t('views.modal.privilege.translator'), user: @user
         - if current_user.has_role?(:administrator)
-          = render :partial 'modal/privileges/item', privilege: 'supporter', description: t('views.modal.privilege.supporter'), user: @user
-          = render :partial 'modal/privileges/item', privilege: 'moderator', description: t('views.modal.privilege.moderator'),user: @user
-          = render :partial 'modal/privileges/item', privilege: 'admin', description: t('views.modal.privilege.admin'), user: @user
+          = render 'modal/privileges/item', privilege: 'supporter', description: t('views.modal.privilege.supporter'), user: @user
+          = render 'modal/privileges/item', privilege: 'moderator', description: t('views.modal.privilege.moderator'),user: @user
+          = render 'modal/privileges/item', privilege: 'admin', description: t('views.modal.privilege.admin'), user: @user
       .modal-footer
         %button.btn.btn-primary{name: 'checked-privileges', type: :button, data: { dismiss: :modal }}= t 'views.actions.done'

From 0afff3f84d20bfec77c8e88c20ae4bd942e625c6 Mon Sep 17 00:00:00 2001
From: Andreas Nedbal <andy@pixelde.su>
Date: Sun, 26 Apr 2020 16:25:54 +0200
Subject: [PATCH 036/172] Adjustments and smaller fixes

- Fixed initially selected Discover tabs being empty
- Removed spacing classes from inbox templates
- Fixed feed layout and sidebar display
- Adjust some profile layout nits
---
 app/views/discover/_tab_answers.html.haml |  2 +-
 app/views/discover/_tab_new.html.haml     |  2 +-
 app/views/inbox/_entry.html.haml          |  2 +-
 app/views/inbox/_sidebar.html.haml        |  8 ++++----
 app/views/layouts/feed.haml               |  4 ++--
 app/views/navigation/main/_profile.haml   |  4 ++--
 app/views/shared/_questionbox.html.haml   |  9 ++++-----
 app/views/shared/_sidebar.html.haml       | 16 ++++++++--------
 app/views/user/_stats.html.haml           | 19 +++++++++----------
 9 files changed, 32 insertions(+), 34 deletions(-)

diff --git a/app/views/discover/_tab_answers.html.haml b/app/views/discover/_tab_answers.html.haml
index ed290d50..35438dd3 100644
--- a/app/views/discover/_tab_answers.html.haml
+++ b/app/views/discover/_tab_answers.html.haml
@@ -1,3 +1,3 @@
-.tab-pane.active.fade.in{role: "tabpanel", id: "answers"}
+.tab-pane.active.fade.show{role: "tabpanel", id: "answers"}
   - answers.each do |a|
     = render 'shared/answerbox', a: a
diff --git a/app/views/discover/_tab_new.html.haml b/app/views/discover/_tab_new.html.haml
index 261f904c..016a9612 100644
--- a/app/views/discover/_tab_new.html.haml
+++ b/app/views/discover/_tab_new.html.haml
@@ -1,3 +1,3 @@
-.tab-pane.active.fade.in{role: "tabpanel", id: "new"}
+.tab-pane.active.fade.show{role: "tabpanel", id: "new"}
   - new.each do |user|
     = render 'discover/userbox', u: user, type: "new"
diff --git a/app/views/inbox/_entry.html.haml b/app/views/inbox/_entry.html.haml
index 2c54d5f1..9fa0ec04 100644
--- a/app/views/inbox/_entry.html.haml
+++ b/app/views/inbox/_entry.html.haml
@@ -1,4 +1,4 @@
-.card.mb-3.inbox-box{class: "bg-#{i.new? ? 'primary' : 'default'}", data: { id: i.id }}
+.card.inbox-box{class: "bg-#{i.new? ? 'primary' : 'default'}", data: { id: i.id }}
   .card-header
     .media
       - unless i.question.author_is_anonymous
diff --git a/app/views/inbox/_sidebar.html.haml b/app/views/inbox/_sidebar.html.haml
index 415bfd7f..c460ad5f 100644
--- a/app/views/inbox/_sidebar.html.haml
+++ b/app/views/inbox/_sidebar.html.haml
@@ -1,8 +1,8 @@
-.card.mb-3.inbox--panel
+.card.inbox--panel
   .card-header= t 'views.inbox.sidebar.questions.title'
   .card-body
     %button.btn.btn-block.btn-info{type: :button, id: 'ib-generate-question'}= t 'views.inbox.sidebar.questions.button'
-.card.mb-3.inbox--panel
+.card.inbox--panel
   .card-header= t 'views.inbox.sidebar.share.title'
   .card-body
     %a.btn.btn-block.btn-primary{target: '_blank', href: "https://twitter.com/intent/tweet?text=Ask%20me%20anything%21&url=#{show_user_profile_url(current_user.screen_name)}"}
@@ -11,14 +11,14 @@
     %a.btn.btn-block.btn-primary{target: '_blank', href: "http://www.tumblr.com/share/link?url=#{show_user_profile_url(current_user.screen_name)}&name=Ask%20me%20anything%21"}
       %i.fa.fa-fw.fa-tumblr
       = raw t('views.inbox.sidebar.share.button', service: "Tumblr")
-.card.mb-3.inbox--panel
+.card.inbox--panel
   .card-header Show author
   .card-body
     %form#author_form
       = bootstrap_form_tag url: inbox_path, method: :get do |f|
         = f.text_field :author, value: params[:author], placeholder: "username", prepend: "@" , hide_label: true
         = f.button "Show", name: nil, class: "btn btn-light btn-block btn-sm", id: "ib-author"
-.card.mb-3.warning--panel
+.card.warning--panel
   .card-header= t 'views.inbox.sidebar.actions.title'
   .card-body
     %button.btn.btn-block.btn-danger{type: :button, id: @delete_id , disabled: (@disabled ? 'disabled' : nil), data: { ib_count: @inbox_count }}= t 'views.inbox.sidebar.actions.button'
diff --git a/app/views/layouts/feed.haml b/app/views/layouts/feed.haml
index 99fcc1fd..a6400fa7 100644
--- a/app/views/layouts/feed.haml
+++ b/app/views/layouts/feed.haml
@@ -1,9 +1,9 @@
 = render 'navigation/feed'
 .container.j2-page
   .row
-    .col-md-3.col-sm-4
+    .col-md-3.col-sm-4.d-none.d-sm-block
       = render 'shared/sidebar'
-    .col-md-9.col-xs-12.col-sm-8.j2-col-reset
+    .col-md-9.col-xs-12.col-sm-8
       = render 'layouts/messages'
       = yield
   .visible-xs= render 'shared/links'
\ No newline at end of file
diff --git a/app/views/navigation/main/_profile.haml b/app/views/navigation/main/_profile.haml
index 4af63732..f19af864 100644
--- a/app/views/navigation/main/_profile.haml
+++ b/app/views/navigation/main/_profile.haml
@@ -1,11 +1,11 @@
 %li.nav-item.dropdown.profile--image-dropdown
   %a.nav-link.dropdown-toggle{href: "#", "data-toggle" => "dropdown"}
-    %img.profile--image-avatar.hidden-xs{src: current_user.profile_picture.url(:small)}
+    %img.profile--image-avatar.d-none.d-sm-inline{src: current_user.profile_picture.url(:small)}
     %span.d-none.d-sm-inline.d-md-none
       = current_user.screen_name
       %b.caret
   .dropdown-menu
-    %h6.dropdown-header.hidden-xs= current_user.screen_name
+    %h6.dropdown-header.d-none.d-sm-block= current_user.screen_name
     %a.dropdown-item{href: show_user_profile_path(current_user.screen_name)}
       %i.fa.fa-fw.fa-user
       = t('views.navigation.show')
diff --git a/app/views/shared/_questionbox.html.haml b/app/views/shared/_questionbox.html.haml
index f79ade27..37e7678c 100644
--- a/app/views/shared/_questionbox.html.haml
+++ b/app/views/shared/_questionbox.html.haml
@@ -1,10 +1,9 @@
 .card
   .card-header
-    %h3.card-title
-      - if @user.motivation_header.blank?
-        = t 'views.questionbox.title'
-      - else
-        = @user.motivation_header
+    - if @user.motivation_header.blank?
+      = t 'views.questionbox.title'
+    - else
+      = @user.motivation_header
   .card-body
     - if @user.banned?
       .row
diff --git a/app/views/shared/_sidebar.html.haml b/app/views/shared/_sidebar.html.haml
index e73bba24..fc27a3e6 100644
--- a/app/views/shared/_sidebar.html.haml
+++ b/app/views/shared/_sidebar.html.haml
@@ -1,5 +1,5 @@
 - header_class = if current_user.profile_header.exists? then "userbox--header-container" else "userbox--no-header" end
-.card.hidden-xs
+.card
   %div{class: header_class}
     %img.userbox--header{src: current_user.profile_header.url(:mobile)}
   .card-body
@@ -14,15 +14,15 @@
         %span.profile--username
           = current_user.screen_name
     .row
-      %a{href: show_user_followers_path(current_user.screen_name)}
-        .col-md-6.col-sm-6.col-xs-6
+      .col-md-6.col-sm-6.col-xs-6
+        %a{href: show_user_followers_path(current_user.screen_name)}
           %h4.entry-text#follower-count= current_user.follower_count
           %h6.entry-subtext= t('views.general.follower').pluralize(current_user.follower_count)
-      %a{href: show_user_friends_path(current_user.screen_name)}
-        .col-md-6.col-sm-6.col-xs-6
+      .col-md-6.col-sm-6.col-xs-6
+        %a{href: show_user_friends_path(current_user.screen_name)}
           %h4.entry-text#friend-count= current_user.friend_count
           %h6.entry-subtext= t('views.general.following')
-.card.hidden-xs
+.card
   .list-group
     = list_group_item t('views.general.timeline'), root_path
     - if APP_CONFIG.dig(:features, :public, :enabled)
@@ -30,7 +30,7 @@
     - current_user.groups.each do |group|
       = list_group_item group.display_name, group_timeline_path(group.name)
 - unless @group.nil?
-  .card.profile--panel.hidden-xs
+  .card.profile--panel
     .card-header
       %h3.card-title= t('views.group.members')
     .card-body
@@ -38,4 +38,4 @@
         %a{href: show_user_profile_path(member.user.screen_name), title: member.user.screen_name, data: { toggle: :tooltip, placement: :top }}
           %img.img-rounded.answerbox--img-small{src: member.user.profile_picture.url(:medium)}
 
-.hidden-xs= render 'shared/links'
+= render 'shared/links'
diff --git a/app/views/user/_stats.html.haml b/app/views/user/_stats.html.haml
index 189da614..3e2c81ca 100644
--- a/app/views/user/_stats.html.haml
+++ b/app/views/user/_stats.html.haml
@@ -1,22 +1,21 @@
 .card.profile--panel#profile-stats
-  .card-header
-    %h3.card-title Stats
+  .card-header Stats
   .card-body
     .row
-      %a{href: show_user_followers_path(@user.screen_name)}
-        .col-md-6.col-sm-6.col-xs-6
+      .col-md-6.col-sm-6.col-xs-6
+        %a{href: show_user_followers_path(@user.screen_name)}
           %h4.entry-text#follower-count= @user.follower_count
           %h6.entry-subtext= t('views.general.follower').pluralize(@user.follower_count)
-      %a{href: show_user_friends_path(@user.screen_name)}
-        .col-md-6.col-sm-6.col-xs-6
+      .col-md-6.col-sm-6.col-xs-6
+        %a{href: show_user_friends_path(@user.screen_name)}
           %h4.entry-text#friend-count= @user.friend_count
           %h6.entry-subtext= t('views.general.following')
     .row
-      %a{href: show_user_questions_path(@user.screen_name)}
-        .col-md-6.col-sm-6.col-xs-6
+      .col-md-6.col-sm-6.col-xs-6
+        %a{href: show_user_questions_path(@user.screen_name)}
           %h4.entry-text#asked-count= @user.asked_count
           %h6.entry-subtext= t('views.general.question').pluralize(@user.asked_count)
-      %a{href: show_user_profile_path(@user.screen_name)}
-        .col-md-6.col-sm-6.col-xs-6
+      .col-md-6.col-sm-6.col-xs-6
+        %a{href: show_user_profile_path(@user.screen_name)}
           %h4.entry-text#answered-count= @user.answered_count
           %h6.entry-subtext= t('views.general.answer').pluralize(@user.answered_count)

From 7513ef2b9e3d209ec4d362ddda2893991c056b16 Mon Sep 17 00:00:00 2001
From: Andreas Nedbal <andy@pixelde.su>
Date: Sun, 26 Apr 2020 17:13:31 +0200
Subject: [PATCH 037/172] Clean up answerbox layout

---
 app/views/answer/show.html.haml               |  3 -
 .../_actions.haml}                            |  2 +-
 .../_comments.haml}                           |  0
 app/views/answerbox/_header.haml              | 29 ++++++++
 .../_smiles.haml}                             |  0
 app/views/application/_answerbox.haml         | 39 +++++++++++
 app/views/discover/_tab_answers.html.haml     |  2 +-
 app/views/discover/_tab_discussed.html.haml   |  2 +-
 app/views/group/index.haml                    |  2 +-
 app/views/group/index.js.erb                  |  2 +-
 app/views/public/index.haml                   |  2 +-
 app/views/public/index.js.erb                 |  2 +-
 app/views/question/show.html.haml             |  2 +-
 app/views/question/show.js.erb                |  2 +-
 app/views/shared/_answerbox.html.haml         | 67 -------------------
 app/views/static/index.haml                   |  2 +-
 app/views/static/index.js.erb                 |  2 +-
 app/views/user/show.haml                      |  2 +-
 app/views/user/show.js.erb                    |  2 +-
 19 files changed, 81 insertions(+), 83 deletions(-)
 delete mode 100644 app/views/answer/show.html.haml
 rename app/views/{shared/_answerbox_buttons.html.haml => answerbox/_actions.haml} (98%)
 rename app/views/{shared/_comments.html.haml => answerbox/_comments.haml} (100%)
 create mode 100644 app/views/answerbox/_header.haml
 rename app/views/{shared/_smiles.html.haml => answerbox/_smiles.haml} (100%)
 create mode 100644 app/views/application/_answerbox.haml
 delete mode 100644 app/views/shared/_answerbox.html.haml

diff --git a/app/views/answer/show.html.haml b/app/views/answer/show.html.haml
deleted file mode 100644
index 9c1b3f1d..00000000
--- a/app/views/answer/show.html.haml
+++ /dev/null
@@ -1,3 +0,0 @@
-- provide(:title, answer_title(@answer))
-.container.j2-page
-  = render 'shared/answerbox', a: @answer
diff --git a/app/views/shared/_answerbox_buttons.html.haml b/app/views/answerbox/_actions.haml
similarity index 98%
rename from app/views/shared/_answerbox_buttons.html.haml
rename to app/views/answerbox/_actions.haml
index d6aacc01..a41345cb 100644
--- a/app/views/shared/_answerbox_buttons.html.haml
+++ b/app/views/answerbox/_actions.haml
@@ -38,4 +38,4 @@
       - unless a.user == current_user
         %a.dropdown-item{href: '#', data: { a_id: a.id, action: 'ab-report' }}
           %i.fa.fa-exclamation-triangle
-          = t 'views.actions.report'
+          = t 'views.actions.report'
\ No newline at end of file
diff --git a/app/views/shared/_comments.html.haml b/app/views/answerbox/_comments.haml
similarity index 100%
rename from app/views/shared/_comments.html.haml
rename to app/views/answerbox/_comments.haml
diff --git a/app/views/answerbox/_header.haml b/app/views/answerbox/_header.haml
new file mode 100644
index 00000000..282116c1
--- /dev/null
+++ b/app/views/answerbox/_header.haml
@@ -0,0 +1,29 @@
+.card-header
+  .media.question-media
+    - unless a.question.author_is_anonymous
+      %a.pull-left{href: show_user_profile_path(a.question.user.screen_name)}
+        %img.img-rounded.answerbox--img{src: gravatar_url(a.question.user)}
+    .media-body.question-body
+      - if user_signed_in?
+        .pull-right
+          .btn-group
+            %button.btn.btn-link.btn-sm.dropdown-toggle{data: { toggle: :dropdown }, aria: { expanded: :false }}
+              %span.caret
+            .dropdown-menu.dropdown-menu-right{role: :menu}
+              - if current_user.mod? or a.question.user == current_user
+                %a.dropdown-item.text-danger{href: '#', tabindex: -1, data: { action: 'ab-question-destroy', q_id: a.question.id }}
+                  %i.fa.fa-trash-o
+                  = t 'views.actions.delete'
+              - unless a.question.user == current_user
+                %a.dropdown-item{href: '#', tabindex: -1, data: { action: 'ab-question-report', q_id: a.question.id }}
+                  %i.fa.fa-exclamation-triangle
+                  = t 'views.actions.report'
+      %h6.text-muted.media-heading.answerbox--question-user
+        = raw t('views.answerbox.asked', user: user_screen_name(a.question.user, anonymous: a.question.author_is_anonymous), time: time_tooltip(a.question))
+        - unless a.question.author_is_anonymous
+          - if a.question.answer_count > 1
+            ·
+            %a{href: show_user_question_path(a.question.user.screen_name, a.question.id)}
+              = pluralize(a.question.answer_count, t('views.general.answer'))
+      .answerbox--question-text
+        = a.question.content
\ No newline at end of file
diff --git a/app/views/shared/_smiles.html.haml b/app/views/answerbox/_smiles.haml
similarity index 100%
rename from app/views/shared/_smiles.html.haml
rename to app/views/answerbox/_smiles.haml
diff --git a/app/views/application/_answerbox.haml b/app/views/application/_answerbox.haml
new file mode 100644
index 00000000..1c1566b9
--- /dev/null
+++ b/app/views/application/_answerbox.haml
@@ -0,0 +1,39 @@
+.card.answerbox{data: { id: a.id, q_id: a.question.id }}
+  - if @question.nil?
+    = render "answerbox/header", a: a
+  .card-body
+    - if @display_all.nil?
+      .answerbox--answer-text
+        = markdown a.content[0..255]
+        - if a.content.length > 255
+          [...]
+          %p
+            %a.btn.btn-primary{href: show_user_answer_path(a.user.screen_name, a.id)}
+              = t 'views.answerbox.read'
+    - else
+      .answerbox--answer-text
+        = markdown a.content
+    - if @user.nil?
+      .row
+        .col-md-6.col-sm-4.col-xs-6.text-left.text-muted
+          .media
+            .pull-left
+              %a{href: show_user_profile_path(a.user.screen_name)}
+                %img.img-rounded.answerbox--img{src: gravatar_url(a.user)}
+            .media-body
+              %h6.media-heading.answerbox--answer-user
+                = raw t('views.answerbox.answered', hide: hidespan(t('views.answerbox.hide'), "xs"), user: user_screen_name(a.user))
+              .answerbox--answer-date
+                = link_to(raw(t('views.answerbox.time', time: time_tooltip(a))), show_user_answer_path(a.user.screen_name, a.id))
+        .col-md-6.col-sm-8.col-xs-6.text-right
+          = render 'answerbox/actions', a: a
+    - else
+      .row
+        .col-md-6.col-sm-4.col-xs-6.text-left.text-muted
+          %i.fa.fa-clock-o
+          = link_to(raw(t('views.answerbox.time', time: time_tooltip(a))), show_user_answer_path(a.user.screen_name, a.id))
+        .col-md-6.col-sm-8.col-xs-6.text-right
+          = render 'answerbox/actions', a: a
+  .card-footer{id: "ab-comments-section-#{a.id}", style: @display_all.nil? ? 'display: none' : nil }
+    %div{id: "ab-smiles-#{a.id}"}= render 'answerbox/smiles', a: a
+    %div{id: "ab-comments-#{a.id}"}= render 'answerbox/comments', a: a
\ No newline at end of file
diff --git a/app/views/discover/_tab_answers.html.haml b/app/views/discover/_tab_answers.html.haml
index 35438dd3..0738798d 100644
--- a/app/views/discover/_tab_answers.html.haml
+++ b/app/views/discover/_tab_answers.html.haml
@@ -1,3 +1,3 @@
 .tab-pane.active.fade.show{role: "tabpanel", id: "answers"}
   - answers.each do |a|
-    = render 'shared/answerbox', a: a
+    = render 'answerbox', a: a
diff --git a/app/views/discover/_tab_discussed.html.haml b/app/views/discover/_tab_discussed.html.haml
index a6b73b4f..1dafe7ce 100644
--- a/app/views/discover/_tab_discussed.html.haml
+++ b/app/views/discover/_tab_discussed.html.haml
@@ -1,3 +1,3 @@
 .tab-pane.fade{role: "tabpanel", id: "comments"}
   - comments.each do |a|
-    = render 'shared/answerbox', a: a
+    = render 'answerbox', a: a
diff --git a/app/views/group/index.haml b/app/views/group/index.haml
index 878d73fc..61e139a3 100644
--- a/app/views/group/index.haml
+++ b/app/views/group/index.haml
@@ -1,6 +1,6 @@
 #timeline
   - @timeline.each do |answer|
-    = render 'shared/answerbox', a: answer
+    = render 'answerbox', a: answer
 
   = render 'shared/cursored_pagination_dummy', more_data_available: @more_data_available, last_id: @timeline_last_id
 
diff --git a/app/views/group/index.js.erb b/app/views/group/index.js.erb
index fd1ddb36..59591f8d 100644
--- a/app/views/group/index.js.erb
+++ b/app/views/group/index.js.erb
@@ -1,5 +1,5 @@
 $('#timeline').append('<% @timeline.each do |answer|
-  %><%= j render 'shared/answerbox', a: answer
+  %><%= j render 'answerbox', a: answer
 %><% end %>');
 <% if @more_data_available %>
   $('#pagination').html('<%= j render 'shared/cursored_pagination_dummy', more_data_available: @more_data_available, last_id: @timeline_last_id %>');
diff --git a/app/views/public/index.haml b/app/views/public/index.haml
index 50f62dd9..18a8e660 100644
--- a/app/views/public/index.haml
+++ b/app/views/public/index.haml
@@ -1,6 +1,6 @@
 #timeline
   - @timeline.each do |answer|
-    = render 'shared/answerbox', a: answer
+    = render 'answerbox', a: answer
 
   = render 'shared/cursored_pagination_dummy', more_data_available: @more_data_available, last_id: @timeline_last_id
 
diff --git a/app/views/public/index.js.erb b/app/views/public/index.js.erb
index fd1ddb36..59591f8d 100644
--- a/app/views/public/index.js.erb
+++ b/app/views/public/index.js.erb
@@ -1,5 +1,5 @@
 $('#timeline').append('<% @timeline.each do |answer|
-  %><%= j render 'shared/answerbox', a: answer
+  %><%= j render 'answerbox', a: answer
 %><% end %>');
 <% if @more_data_available %>
   $('#pagination').html('<%= j render 'shared/cursored_pagination_dummy', more_data_available: @more_data_available, last_id: @timeline_last_id %>');
diff --git a/app/views/question/show.html.haml b/app/views/question/show.html.haml
index 72b7991f..224bb758 100644
--- a/app/views/question/show.html.haml
+++ b/app/views/question/show.html.haml
@@ -6,7 +6,7 @@
 
   #answers
     - @answers.each do |a|
-      = render 'shared/answerbox', a: a, show_question: false
+      = render 'answerbox', a: a, show_question: false
 
   = render 'shared/cursored_pagination_dummy', more_data_available: @more_data_available, last_id: @answers_last_id
 
diff --git a/app/views/question/show.js.erb b/app/views/question/show.js.erb
index 10610656..fbbf582f 100644
--- a/app/views/question/show.js.erb
+++ b/app/views/question/show.js.erb
@@ -1,5 +1,5 @@
 $('#answers').append('<% @answers.each do |answer|
-  %><%= j render 'shared/answerbox', a: answer, show_question: false
+  %><%= j render 'answerbox', a: answer, show_question: false
 %><% end %>');
 <% if @more_data_available %>
   $('#pagination').html('<%= j render 'shared/cursored_pagination_dummy', more_data_available: @more_data_available, last_id: @answers_last_id %>');
diff --git a/app/views/shared/_answerbox.html.haml b/app/views/shared/_answerbox.html.haml
deleted file mode 100644
index 2bf170e4..00000000
--- a/app/views/shared/_answerbox.html.haml
+++ /dev/null
@@ -1,67 +0,0 @@
-.card.answerbox{data: { id: a.id, q_id: a.question.id }}
-  - if @question.nil?
-    .card-header
-      .media.question-media
-        - unless a.question.author_is_anonymous
-          %a.pull-left{href: show_user_profile_path(a.question.user.screen_name)}
-            %img.img-rounded.answerbox--img{src: gravatar_url(a.question.user)}
-        .media-body.question-body
-          - if user_signed_in?
-            .pull-right
-              .btn-group
-                %button.btn.btn-link.btn-sm.dropdown-toggle{data: { toggle: :dropdown }, aria: { expanded: :false }}
-                  %span.caret
-                .dropdown-menu.dropdown-menu-right{role: :menu}
-                  - if current_user.mod? or a.question.user == current_user
-                    %a.dropdown-item.text-danger{href: '#', tabindex: -1, data: { action: 'ab-question-destroy', q_id: a.question.id }}
-                      %i.fa.fa-trash-o
-                      = t 'views.actions.delete'
-                  - unless a.question.user == current_user
-                    %a.dropdown-item{href: '#', tabindex: -1, data: { action: 'ab-question-report', q_id: a.question.id }}
-                      %i.fa.fa-exclamation-triangle
-                      = t 'views.actions.report'
-          %h6.text-muted.media-heading.answerbox--question-user
-            = raw t('views.answerbox.asked', user: user_screen_name(a.question.user, anonymous: a.question.author_is_anonymous), time: time_tooltip(a.question))
-            - unless a.question.author_is_anonymous
-              - if a.question.answer_count > 1
-                ·
-                %a{href: show_user_question_path(a.question.user.screen_name, a.question.id)}
-                  = pluralize(a.question.answer_count, t('views.general.answer'))
-          .answerbox--question-text
-            = a.question.content
-  .card-body
-    - if @display_all.nil?
-      .answerbox--answer-text
-        = markdown a.content[0..255]
-        - if a.content.length > 255
-          [...]
-          %p
-            %a.btn.btn-primary{href: show_user_answer_path(a.user.screen_name, a.id)}
-              = t 'views.answerbox.read'
-    - else
-      .answerbox--answer-text
-        = markdown a.content
-    - if @user.nil?
-      .row
-        .col-md-6.col-sm-4.col-xs-6.text-left.text-muted
-          .media
-            .pull-left
-              %a{href: show_user_profile_path(a.user.screen_name)}
-                %img.img-rounded.answerbox--img{src: gravatar_url(a.user)}
-            .media-body
-              %h6.media-heading.answerbox--answer-user
-                = raw t('views.answerbox.answered', hide: hidespan(t('views.answerbox.hide'), "xs"), user: user_screen_name(a.user))
-              .answerbox--answer-date
-                = link_to(raw(t('views.answerbox.time', time: time_tooltip(a))), show_user_answer_path(a.user.screen_name, a.id))
-        .col-md-6.col-sm-8.col-xs-6.text-right
-          = render 'shared/answerbox_buttons', a: a
-    - else
-      .row
-        .col-md-6.col-sm-4.col-xs-6.text-left.text-muted
-          %i.fa.fa-clock-o
-          = link_to(raw(t('views.answerbox.time', time: time_tooltip(a))), show_user_answer_path(a.user.screen_name, a.id))
-        .col-md-6.col-sm-8.col-xs-6.text-right
-          = render 'shared/answerbox_buttons', a: a
-  .card-footer{id: "ab-comments-section-#{a.id}", style: @display_all.nil? ? 'display: none' : nil }
-    %div{id: "ab-smiles-#{a.id}"}= render 'shared/smiles', a: a
-    %div{id: "ab-comments-#{a.id}"}= render 'shared/comments', a: a
diff --git a/app/views/static/index.haml b/app/views/static/index.haml
index 12355001..5b4eda6d 100644
--- a/app/views/static/index.haml
+++ b/app/views/static/index.haml
@@ -1,6 +1,6 @@
 #timeline
   - @timeline.each do |answer|
-    = render 'shared/answerbox', a: answer
+    = render 'answerbox', a: answer
 
   = render 'shared/cursored_pagination_dummy', more_data_available: @more_data_available, last_id: @timeline_last_id
 
diff --git a/app/views/static/index.js.erb b/app/views/static/index.js.erb
index fd1ddb36..59591f8d 100644
--- a/app/views/static/index.js.erb
+++ b/app/views/static/index.js.erb
@@ -1,5 +1,5 @@
 $('#timeline').append('<% @timeline.each do |answer|
-  %><%= j render 'shared/answerbox', a: answer
+  %><%= j render 'answerbox', a: answer
 %><% end %>');
 <% if @more_data_available %>
   $('#pagination').html('<%= j render 'shared/cursored_pagination_dummy', more_data_available: @more_data_available, last_id: @timeline_last_id %>');
diff --git a/app/views/user/show.haml b/app/views/user/show.haml
index e1734f5d..a7e81008 100644
--- a/app/views/user/show.haml
+++ b/app/views/user/show.haml
@@ -4,7 +4,7 @@
 - unless @user.banned?
   #answers
     - @answers.each do |a|
-      = render 'shared/answerbox', a: a
+      = render 'answerbox', a: a
 
 = render 'shared/cursored_pagination_dummy', more_data_available: @more_data_available, last_id: @answers_last_id
 
diff --git a/app/views/user/show.js.erb b/app/views/user/show.js.erb
index 443b9d7b..be445de6 100644
--- a/app/views/user/show.js.erb
+++ b/app/views/user/show.js.erb
@@ -1,5 +1,5 @@
 $('#answers').append('<% @answers.each do |a|
-  %><%= j render 'shared/answerbox', a: a
+  %><%= j render 'answerbox', a: a
 %><% end %>');
 <% if @more_data_available %>
   $('#pagination').html('<%= j render 'shared/cursored_pagination_dummy', more_data_available: @more_data_available, last_id: @answers_last_id %>');

From c124138a4aabf4590cf4799a7623901d806ad806 Mon Sep 17 00:00:00 2001
From: Andreas Nedbal <andy@pixelde.su>
Date: Sun, 26 Apr 2020 17:30:06 +0200
Subject: [PATCH 038/172] Fix layout issues in questionbox

---
 .../_questionbox.haml}                        | 25 +++++++------------
 app/views/user/show.haml                      |  2 +-
 2 files changed, 10 insertions(+), 17 deletions(-)
 rename app/views/{shared/_questionbox.html.haml => application/_questionbox.haml} (75%)

diff --git a/app/views/shared/_questionbox.html.haml b/app/views/application/_questionbox.haml
similarity index 75%
rename from app/views/shared/_questionbox.html.haml
rename to app/views/application/_questionbox.haml
index 37e7678c..78f0cd2d 100644
--- a/app/views/shared/_questionbox.html.haml
+++ b/app/views/application/_questionbox.haml
@@ -6,17 +6,14 @@
       = @user.motivation_header
   .card-body
     - if @user.banned?
-      .row
-        .col-xs-12.text-center
-          %strong= t 'views.questionbox.banned'
+      .text-center
+        %strong= t 'views.questionbox.banned'
     - else
       - if user_signed_in? or @user.privacy_allow_anonymous_questions?
         #question-box
-          .row
-            .col-xs-12
-              %textarea.form-control{:name => "qb-question", :placeholder => t('views.placeholder.question')}
+          %textarea.form-control{:name => "qb-question", :placeholder => t('views.placeholder.question')}
           .row{:style => "padding-top: 5px; padding-left: 5px; padding-right: 5px;"}
-            .col-xs-6
+            .col-6
               - if user_signed_in?
                 - if @user.privacy_allow_anonymous_questions?
                   %input{:name => "qb-anonymous", :type => "checkbox"}/
@@ -24,27 +21,23 @@
                   %br/
                 - else
                   %input{:name => "qb-anonymous", :type => "hidden", :value => "false"}/
-            .col-xs-6
+            .col-6
               %p.pull-right
                 %input{name: 'qb-to', type: 'hidden', :value => @user.id}/
                 %button.btn.btn-primary{name: 'qb-ask', :type => "button", data: {loading_text: t('views.questionbox.load'), promote: user_signed_in? ? "false" : "true" }} Ask
       - unless user_signed_in?
         - if @user.privacy_allow_anonymous_questions?
-          #question-box-promote.row{:style => "display: none;"}
+          #question-box-promote{:style => "display: none;"}
             .row
-              .col-xs-12.text-center
+              .col-12.text-center
                 %strong= t 'views.questionbox.promote.message'
             .row
-              .col-sm-1
-              .col-sm-5
+              .col-sm-5.offset-sm-1
                 %button#create-account.btn.btn-block.btn-primary= t 'views.questionbox.promote.create'
               .col-sm-5
                 %button#new-question.btn.btn-block.btn-default= t 'views.questionbox.promote.another'
-              .col-sm-1
             .row
-              .col-sm-1
-              .col-xs-12.col-sm-10.text-center
+              .col-xs-12.col-sm-10.offset-sm-1.text-center
                 %small= t('views.questionbox.promote.join', app_title: APP_CONFIG['site_name'])
-              .col-sm-1
         - else
           %p= raw t 'views.questionbox.required', signup: link_to(t('views.sessions.new'),new_user_registration_path)
diff --git a/app/views/user/show.haml b/app/views/user/show.haml
index a7e81008..aaa34263 100644
--- a/app/views/user/show.haml
+++ b/app/views/user/show.haml
@@ -1,6 +1,6 @@
 - no_header = unless @user.profile_header.exists? then "profile--no-header" else "" end
 .profile--panel-push-inner.hidden-xs{class: no_header}
-= render 'shared/questionbox'
+= render 'questionbox'
 - unless @user.banned?
   #answers
     - @answers.each do |a|

From 8d9f1d5efb19325d2b3922c9d2b931c45ce54964 Mon Sep 17 00:00:00 2001
From: Andreas Nedbal <andy@pixelde.su>
Date: Sun, 26 Apr 2020 21:48:02 +0200
Subject: [PATCH 039/172] Adjust list_group_item helper for Bootstrap 4

---
 app/helpers/application_helper.rb | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/helpers/application_helper.rb b/app/helpers/application_helper.rb
index 7f353e1e..ea0c4fa1 100644
--- a/app/helpers/application_helper.rb
+++ b/app/helpers/application_helper.rb
@@ -36,7 +36,7 @@ module ApplicationHelper
         }"))}"
     end
 
-    content_tag(:a, body.html_safe, href: path, class: ("list-group-item #{'active ' if current_page? path}#{options[:class]}"))
+    content_tag(:a, body.html_safe, href: path, class: ("list-group-item list-group-item-action #{'active ' if current_page? path}#{options[:class]}"))
   end
 
   def tooltip(body, tooltip_content, placement = "bottom")

From 711d6a9f4ee066e2431a5c569c596f81dbee01b7 Mon Sep 17 00:00:00 2001
From: Andreas Nedbal <andy@pixelde.su>
Date: Sun, 26 Apr 2020 21:48:25 +0200
Subject: [PATCH 040/172] WIP: Add initial overrides for Bootstrap 4 styling

---
 app/assets/stylesheets/application.css.scss      | 6 ++++++
 app/assets/stylesheets/base.css.scss             | 2 +-
 app/assets/stylesheets/overrides/_card.scss      | 4 ++++
 app/assets/stylesheets/overrides/_variables.scss | 8 ++++++++
 4 files changed, 19 insertions(+), 1 deletion(-)
 create mode 100644 app/assets/stylesheets/overrides/_card.scss
 create mode 100644 app/assets/stylesheets/overrides/_variables.scss

diff --git a/app/assets/stylesheets/application.css.scss b/app/assets/stylesheets/application.css.scss
index 4b60bbf4..1731bad8 100644
--- a/app/assets/stylesheets/application.css.scss
+++ b/app/assets/stylesheets/application.css.scss
@@ -45,8 +45,14 @@ $navbar-inverse-toggle-hover-bg: #512da8;
 $navbar-inverse-toggle-icon-bar-bg: #7e57c2;
 $navbar-inverse-toggle-border-color: #512da8;
 
+
+
+@import "overrides/variables";
+
 @import "bootstrap";
 
+@import "overrides/card";
+
 body { padding-top: 50px; }
 
 @import 'bootstrap-datetimepicker';
diff --git a/app/assets/stylesheets/base.css.scss b/app/assets/stylesheets/base.css.scss
index 4c5c3eb6..81ee0ff7 100644
--- a/app/assets/stylesheets/base.css.scss
+++ b/app/assets/stylesheets/base.css.scss
@@ -3,7 +3,7 @@
 body {
   overflow-y: scroll;
   word-wrap: break-word;
-  background-color: #fafafa;
+  background-color: $gray-100;
 }
 
 @import "scss/flags";
diff --git a/app/assets/stylesheets/overrides/_card.scss b/app/assets/stylesheets/overrides/_card.scss
new file mode 100644
index 00000000..51b1622d
--- /dev/null
+++ b/app/assets/stylesheets/overrides/_card.scss
@@ -0,0 +1,4 @@
+.card {
+  margin-bottom: map-get($spacers, 3);
+  box-shadow: $box-shadow-sm;
+}
\ No newline at end of file
diff --git a/app/assets/stylesheets/overrides/_variables.scss b/app/assets/stylesheets/overrides/_variables.scss
new file mode 100644
index 00000000..49b0308f
--- /dev/null
+++ b/app/assets/stylesheets/overrides/_variables.scss
@@ -0,0 +1,8 @@
+// Colors
+$primary: #5e35b1;
+
+// Cards
+$card-border-width: 0;
+
+// List Groups
+$list-group-border-width: 0;
\ No newline at end of file

From dcb314d9a5e14ecd5288692bc783b7237f5f1034 Mon Sep 17 00:00:00 2001
From: Andreas Nedbal <andy@pixelde.su>
Date: Sun, 26 Apr 2020 23:54:02 +0200
Subject: [PATCH 041/172] Adjust footer link visibilty to work with Bootstrap 4

---
 app/views/layouts/feed.haml        | 2 +-
 app/views/tabs/_moderation.haml    | 4 +++-
 app/views/tabs/_notifications.haml | 4 +++-
 app/views/tabs/_settings.haml      | 2 +-
 4 files changed, 8 insertions(+), 4 deletions(-)

diff --git a/app/views/layouts/feed.haml b/app/views/layouts/feed.haml
index a6400fa7..25701108 100644
--- a/app/views/layouts/feed.haml
+++ b/app/views/layouts/feed.haml
@@ -6,4 +6,4 @@
     .col-md-9.col-xs-12.col-sm-8
       = render 'layouts/messages'
       = yield
-  .visible-xs= render 'shared/links'
\ No newline at end of file
+  .d-block.d-sm-none= render 'shared/links'
\ No newline at end of file
diff --git a/app/views/tabs/_moderation.haml b/app/views/tabs/_moderation.haml
index d8c83463..180922c7 100644
--- a/app/views/tabs/_moderation.haml
+++ b/app/views/tabs/_moderation.haml
@@ -5,4 +5,6 @@
     = list_group_item t('views.general.comment').pluralize(2),    moderation_path('comment')
     = list_group_item t('views.general.user').pluralize(2),       moderation_path('user')
     = list_group_item t('views.general.question').pluralize(2),   moderation_path('question')
-    = list_group_item 'Priority',   moderation_priority_path
\ No newline at end of file
+    = list_group_item 'Priority',   moderation_priority_path
+
+.d-none.d-sm-block= render "shared/links"
\ No newline at end of file
diff --git a/app/views/tabs/_notifications.haml b/app/views/tabs/_notifications.haml
index 983d3ae7..d282b911 100644
--- a/app/views/tabs/_notifications.haml
+++ b/app/views/tabs/_notifications.haml
@@ -11,4 +11,6 @@
     = list_group_item t('views.notifications.tabs.smile'), notifications_path('smile'), badge: Notification.for(current_user).where(target_type: "Smile", new: true).count
     = list_group_item t('views.notifications.tabs.comment'), notifications_path('comment'), badge: Notification.for(current_user).where(target_type: "Comment", new: true).count
     = list_group_item t('views.notifications.tabs.commentsmile'), notifications_path('commentsmile'), badge: Notification.for(current_user).where(target_type: "CommentSmile", new: true).count
-    = list_group_item t('views.notifications.tabs.relationship'), notifications_path('relationship'), badge: Notification.for(current_user).where(target_type: "Relationship", new: true).count
\ No newline at end of file
+    = list_group_item t('views.notifications.tabs.relationship'), notifications_path('relationship'), badge: Notification.for(current_user).where(target_type: "Relationship", new: true).count
+
+.d-none.d-sm-block= render "shared/links"
\ No newline at end of file
diff --git a/app/views/tabs/_settings.haml b/app/views/tabs/_settings.haml
index 9eceb89a..a3b91589 100644
--- a/app/views/tabs/_settings.haml
+++ b/app/views/tabs/_settings.haml
@@ -8,4 +8,4 @@
     = list_group_item "Your Data", user_data_path
     = list_group_item 'Export', user_export_path
 
-.hidden-xs= render "shared/links"
\ No newline at end of file
+.d-none.d-sm-block= render "shared/links"
\ No newline at end of file

From 84ee5eec686fa76cbf3955aae772aee3029269d1 Mon Sep 17 00:00:00 2001
From: Andreas Nedbal <andy@pixelde.su>
Date: Sun, 26 Apr 2020 23:54:26 +0200
Subject: [PATCH 042/172] Adjust background color of website

---
 app/assets/stylesheets/base.css.scss             | 2 +-
 app/assets/stylesheets/overrides/_variables.scss | 6 +++++-
 2 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/app/assets/stylesheets/base.css.scss b/app/assets/stylesheets/base.css.scss
index 81ee0ff7..2b4d7fb7 100644
--- a/app/assets/stylesheets/base.css.scss
+++ b/app/assets/stylesheets/base.css.scss
@@ -3,7 +3,7 @@
 body {
   overflow-y: scroll;
   word-wrap: break-word;
-  background-color: $gray-100;
+  background-color: var(--background);
 }
 
 @import "scss/flags";
diff --git a/app/assets/stylesheets/overrides/_variables.scss b/app/assets/stylesheets/overrides/_variables.scss
index 49b0308f..1e342d6a 100644
--- a/app/assets/stylesheets/overrides/_variables.scss
+++ b/app/assets/stylesheets/overrides/_variables.scss
@@ -5,4 +5,8 @@ $primary: #5e35b1;
 $card-border-width: 0;
 
 // List Groups
-$list-group-border-width: 0;
\ No newline at end of file
+$list-group-border-width: 0;
+
+:root {
+  --background: #f0edf4;
+}
\ No newline at end of file

From 5550dd91009853208e2293b2327fd994abf315c5 Mon Sep 17 00:00:00 2001
From: Andreas Nedbal <andy@pixelde.su>
Date: Sun, 26 Apr 2020 23:55:28 +0200
Subject: [PATCH 043/172] Move variables to style root

---
 app/assets/stylesheets/{overrides => }/_variables.scss | 0
 app/assets/stylesheets/application.css.scss            | 2 +-
 2 files changed, 1 insertion(+), 1 deletion(-)
 rename app/assets/stylesheets/{overrides => }/_variables.scss (100%)

diff --git a/app/assets/stylesheets/overrides/_variables.scss b/app/assets/stylesheets/_variables.scss
similarity index 100%
rename from app/assets/stylesheets/overrides/_variables.scss
rename to app/assets/stylesheets/_variables.scss
diff --git a/app/assets/stylesheets/application.css.scss b/app/assets/stylesheets/application.css.scss
index 1731bad8..71f17ff5 100644
--- a/app/assets/stylesheets/application.css.scss
+++ b/app/assets/stylesheets/application.css.scss
@@ -47,7 +47,7 @@ $navbar-inverse-toggle-border-color: #512da8;
 
 
 
-@import "overrides/variables";
+@import "variables";
 
 @import "bootstrap";
 

From 05efd4a42e71e81314ed8a4bd08b7dcf50f25234 Mon Sep 17 00:00:00 2001
From: Andreas Nedbal <andy@pixelde.su>
Date: Mon, 27 Apr 2020 00:59:53 +0200
Subject: [PATCH 044/172] Refactor jumbotron styles

---
 app/assets/stylesheets/_variables.scss        |  1 +
 app/assets/stylesheets/application.css.scss   |  2 +
 app/assets/stylesheets/base.css.scss          | 82 -------------------
 .../stylesheets/components/_jumbotron.scss    | 73 +++++++++++++++++
 app/views/discover/index.html.haml            |  6 +-
 app/views/static/about.html.haml              |  6 +-
 app/views/static/faq.html.haml                |  6 +-
 app/views/static/front.html.haml              | 10 +--
 8 files changed, 90 insertions(+), 96 deletions(-)
 create mode 100644 app/assets/stylesheets/components/_jumbotron.scss

diff --git a/app/assets/stylesheets/_variables.scss b/app/assets/stylesheets/_variables.scss
index 1e342d6a..91f8ace7 100644
--- a/app/assets/stylesheets/_variables.scss
+++ b/app/assets/stylesheets/_variables.scss
@@ -9,4 +9,5 @@ $list-group-border-width: 0;
 
 :root {
   --background: #f0edf4;
+  --primary-text: #ffffff;
 }
\ No newline at end of file
diff --git a/app/assets/stylesheets/application.css.scss b/app/assets/stylesheets/application.css.scss
index 71f17ff5..4ea479bf 100644
--- a/app/assets/stylesheets/application.css.scss
+++ b/app/assets/stylesheets/application.css.scss
@@ -60,6 +60,8 @@ body { padding-top: 50px; }
   display: none
 }
 
+@import "components/jumbotron";
+
 @import "base";
 
 @import "font-awesome";
diff --git a/app/assets/stylesheets/base.css.scss b/app/assets/stylesheets/base.css.scss
index 2b4d7fb7..7df05422 100644
--- a/app/assets/stylesheets/base.css.scss
+++ b/app/assets/stylesheets/base.css.scss
@@ -36,28 +36,6 @@ body {
   margin-bottom: 1.5em;
 }
 
-.j2-jumbo {
-  background-color: darken($navbar-inverse-bg, 10%);
-  color: #fff;
-}
-
-.j2-jumbo h1, .j2-jumbo h2, .j2-jumbo h3, .j2-jumbo h4, .j2-jumbo h5, .j2-jumbo h6 {
-  color: #fff;
-}
-
-.j2-jumbo a, .j2-jumbo a:hover {
-  color: #fff;
-  opacity: 0.6;
-}
-
-.j2-jumbo a:hover {
-  opacity: 1;
-}
-
-.j2-jumbo a .btn {
-  opacity: 1;
-}
-
 .smiles {
   margin-bottom: 7px;
 }
@@ -162,29 +140,6 @@ body {
   border-bottom-right-radius: 2px;
 }
 
-.frontpage {
-  margin-top: -50px;
-  height: 100vh;
-  display: table;
-}
-
-.frontpage-scroll {
-  display: block;
-  position: absolute;
-  bottom: 0;
-  margin: 0 auto;
-  padding: 20px;
-  text-align: center;
-  z-index: 1000;
-  font-size: 32px;
-  width: 100%;
-}
-
-.frontpage-content {
-  display: table-cell;
-  vertical-align: middle;
-}
-
 .frontpage-features {
   padding-top: 20px;
   padding-bottom: 10px;
@@ -229,47 +184,10 @@ body {
   margin: 10px;
 }
 
-.btn-register {
-  opacity: 1 !important;
-  background: transparent;
-  color: #fff;
-  border: 4px #fff solid;
-  border-radius: 4px;
-  transition: background-color .25s ease-in-out;
-
-  &:hover {
-    background-color: #fff;
-    color: darken($navbar-inverse-bg, 10%) !important;
-    transition: background-color .25s ease-in-out;
-  }
-}
-
 .lead {
   margin-bottom: 3px;
 }
 
-.particle-jumbotron {
-  padding: 0px;
-  overflow: hidden;
-  position: relative;
-  width: 100%;
-}
-
-.particle-content {
-  position: relative;
-  top: 0;
-  padding-top: 48px;
-  padding-bottom: 48px;
-  padding-left: 30px;
-  padding-right: 30px;
-}
-
-#particles {
-  position: absolute;
-  width: 100%;
-  height: 100%;
-}
-
 .icon-showcase {
   font-size: 78px;
   text-align: center;
diff --git a/app/assets/stylesheets/components/_jumbotron.scss b/app/assets/stylesheets/components/_jumbotron.scss
new file mode 100644
index 00000000..c0a77dba
--- /dev/null
+++ b/app/assets/stylesheets/components/_jumbotron.scss
@@ -0,0 +1,73 @@
+.jumbotron {
+  $this: &;
+  display: flex;
+  background-color: var(--primary);
+  color: var(--primary-text);
+  text-align: center;
+
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    color: var(--primary-text);
+  }
+
+  a:not(.btn) {
+    color: var(--primary-text);
+    opacity: 0.6;
+
+    &:hover {
+      opacity: 1;
+    }
+
+    .btn {
+      opacity: 1;
+    }
+  }
+
+  &__scroller {
+    display: block;
+    position: absolute;
+    bottom: 0;
+    margin: 0 auto;
+    padding: 20px;
+    text-align: center;
+    z-index: 1000;
+    font-size: 32px;
+    width: 100%;
+  }
+
+  &__content {
+    width: 100%;
+    align-self: center;
+  }
+
+  &--frontpage {
+    margin-top: -50px;
+    height: 100vh;
+  }
+
+  &--particles {
+    padding: 0px;
+    overflow: hidden;
+    position: relative;
+    width: 100%;
+
+    #{$this}__particles {
+      position: absolute;
+      width: 100%;
+      height: 100%;
+    }
+
+    #{$this}__content {
+      position: relative;
+      top: 0;
+      padding-top: 48px;
+      padding-bottom: 48px;
+      padding-left: 30px;
+      padding-right: 30px;
+    }
+  }
+}
\ No newline at end of file
diff --git a/app/views/discover/index.html.haml b/app/views/discover/index.html.haml
index 5ea1f039..d92126aa 100644
--- a/app/views/discover/index.html.haml
+++ b/app/views/discover/index.html.haml
@@ -1,7 +1,7 @@
 - provide(:title, generate_title("Discover"))
-.jumbotron.j2-jumbo.text-center.particle-jumbotron
-  #particles
-  .particle-content
+.jumbotron.jumbotron--particles
+  #particles.jumbotron__particles
+  .jumbotron__content
     %h1= t 'views.discover.title'
     %p= t('views.discover.subtitle', app_title: APP_CONFIG['site_name'])
 .container
diff --git a/app/views/static/about.html.haml b/app/views/static/about.html.haml
index ba1d0645..8042cdcf 100644
--- a/app/views/static/about.html.haml
+++ b/app/views/static/about.html.haml
@@ -1,7 +1,7 @@
 - provide(:title, generate_title("About"))
-.jumbotron.j2-jumbo.text-center.particle-jumbotron
-  #particles
-  .particle-content
+.jumbotron.jumbotron--particles
+  #particles.jumbotron__particles
+  .jumbotron__content
     %h1= APP_CONFIG['site_name']
     %p= t 'views.about.subtitle'
 .container
diff --git a/app/views/static/faq.html.haml b/app/views/static/faq.html.haml
index d1030093..0b126b30 100644
--- a/app/views/static/faq.html.haml
+++ b/app/views/static/faq.html.haml
@@ -1,7 +1,7 @@
 - provide(:title, generate_title("Frequently Asked Questions"))
-.jumbotron.j2-jumbo.text-center.particle-jumbotron
-  #particles
-  .particle-content
+.jumbotron.jumbotron--particles
+  #particles.jumbotron__particles
+  .jumbotron__content
     %h1 Frequently Asked Questions
     %p
       Everything you want to know about
diff --git a/app/views/static/front.html.haml b/app/views/static/front.html.haml
index 7eb781b2..792a90f2 100644
--- a/app/views/static/front.html.haml
+++ b/app/views/static/front.html.haml
@@ -1,16 +1,16 @@
 - provide(:title, "#{APP_CONFIG['site_name']}")
-.jumbotron.j2-jumbo.text-center.particle-jumbotron.frontpage
-  .frontpage-scroll
+.jumbotron.jumbotron--particles.jumbotron--frontpage
+  .jumbotron__scroller
     %a.arctic_scroll{href: "#content", data: {offset: "-80"} }
       %i.fa.fa-chevron-down
-  #particles
-  .particle-content.frontpage-content
+  #particles.jumbotron__particles
+  .jumbotron__content
     .container
       = render 'layouts/messages'
       %h1= APP_CONFIG['site_name']
       %p= t 'views.front.subtitle'
       %p
-        %a.btn.btn-register.btn-lg{href: url_for(new_user_registration_path)}
+        %a.btn.btn-outline-light.btn-lg{href: url_for(new_user_registration_path)}
           Register now
       %small
         Already a member?

From e8a6644998f05bf87ff25dc0790236da11d0ddbf Mon Sep 17 00:00:00 2001
From: Andreas Nedbal <andy@pixelde.su>
Date: Mon, 27 Apr 2020 01:18:46 +0200
Subject: [PATCH 045/172] Refactor frontpage design and styles

---
 app/assets/stylesheets/base.css.scss        |  67 -------
 app/assets/stylesheets/overrides/_card.scss |   4 +
 app/views/static/front.html.haml            | 183 ++++++++++----------
 3 files changed, 96 insertions(+), 158 deletions(-)

diff --git a/app/assets/stylesheets/base.css.scss b/app/assets/stylesheets/base.css.scss
index 7df05422..6fd2283a 100644
--- a/app/assets/stylesheets/base.css.scss
+++ b/app/assets/stylesheets/base.css.scss
@@ -140,73 +140,6 @@ body {
   border-bottom-right-radius: 2px;
 }
 
-.frontpage-features {
-  padding-top: 20px;
-  padding-bottom: 10px;
-}
-
-.features-heading {
-  margin-bottom: 20px;
-}
-
-.frontpage-fluid {
-  background-color: darken($navbar-inverse-bg, 10%);
-  color: #fff;
-
-  a {
-    color: #fff;
-    font-weight: bold;
-
-    &:hover {
-      opacity: 0.8;
-    }
-  }
-
-  p {
-    margin: 20px;
-    text-align: center;
-  }
-}
-
-.frontpage-heading {
-  margin-top: 0px;
-}
-
-#content {
-  padding-bottom: 30px;
-}
-
-#register {
-  padding: 20px;
-}
-
-.register-now {
-  margin: 10px;
-}
-
-.lead {
-  margin-bottom: 3px;
-}
-
-.icon-showcase {
-  font-size: 78px;
-  text-align: center;
-  display: block;
-}
-
-.colored-icon:before {
-  color: theme-color('primary');
-}
-
-.colored-icon {
-  padding-left: 3px;
-  padding-right: 5px;
-}
-
-.heading-showcase {
-  margin-top: 5px;
-}
-
 .heading-about {
   margin-top: 0px;
 }
diff --git a/app/assets/stylesheets/overrides/_card.scss b/app/assets/stylesheets/overrides/_card.scss
index 51b1622d..ef1111ae 100644
--- a/app/assets/stylesheets/overrides/_card.scss
+++ b/app/assets/stylesheets/overrides/_card.scss
@@ -1,4 +1,8 @@
 .card {
   margin-bottom: map-get($spacers, 3);
   box-shadow: $box-shadow-sm;
+
+  p:only-child {
+    margin-bottom: 0;
+  }
 }
\ No newline at end of file
diff --git a/app/views/static/front.html.haml b/app/views/static/front.html.haml
index 792a90f2..bdfcba2c 100644
--- a/app/views/static/front.html.haml
+++ b/app/views/static/front.html.haml
@@ -15,102 +15,103 @@
       %small
         Already a member?
         = link_to 'Sign in', new_user_session_path
-.container-fluid#content
-  .container.text-center
-    %h1.frontpage-heading= "What is #{APP_CONFIG['site_name']}?"
-    %p.lead
-      A
-      %abbr{title: "Question and Answer"} Q/A
-      based social network
-    %p Most of the people already know how these sorts of networks already work. You have a profile and other users (or even anonymous people without accounts) can ask you any question to find out more about you, so can you do the same with others. Finding friends with the same interests, people that share your opinion (and people that probably don't), you can find everything here!
-    %p.lead
-      But what makes
-      = APP_CONFIG['site_name']
-      special?
-    %p
-      = APP_CONFIG['site_name']
-      tries to take aspects from other popular or now gone platforms and combine them to get the best result possible. Also, we take in the ideas and feedback of our community so we can build a service that's even closer to being exactly the service people want to use!
-
-  .container.frontpage-features
-    %h2.features-heading.text-center Awesome Features
-    .row
-      .col-md-4.col-sm-4.col-xs-12
-        %h3.heading-showcase
-          %i.fa.fa-fw.fa-comments.colored-icon
-          Discussion
-        %p= "With #{APP_CONFIG['site_name']}, you can ask and answer questions from other users as well as receive anonymous questions. Want to know something? Keep the conversation alive with interactive comments."
-      .col-md-4.col-sm-4.col-xs-12
-        %h3.heading-showcase
-          %i.fa.fa-fw.fa-user-plus.colored-icon
-          Following
-        %p
-          Following users allows you to get a personalized feed of all people you want to know more about. You can also send a question to all your followers at once!
-      .col-md-4.col-sm-4.col-xs-12
-        %h3.heading-showcase
-          %i.fa.fa-fw.fa-share-square-o.colored-icon
-          Sharing
-        %p
-          Want to share your answer to a question so that more people read it? With a simple click on the answer button, your answer is shared wherever you want!
-    .row
-      .col-md-4.col-sm-4.col-xs-12
-        %h3.heading-showcase
-          %i.fa.fa-fw.fa-users.colored-icon
-          Groups
-        %p
-          Want to ask a question to a specific set of people? No problem! Set up unique groups of users and send them questions apart from everyone else.
-      .col-md-4.col-sm-4.col-xs-12
-        %h3.heading-showcase
-          %i.fa.fa-fw.fa-image.colored-icon
-          Images
-        %p
-          Express yourself with images and upload an avatar and a header of your liking. And soon you'll be able to attach images to answers and questions as well!
-      .col-md-4.col-sm-4.col-xs-12
-        %h3.heading-showcase
-          %i.fa.fa-fw.fa-paint-brush.colored-icon
-          Themes
-        %p
-          Don't like the default purple or don't like light interfaces in general? On
-          = APP_CONFIG['site_name']
-          you can change every color aspect of the site with Themes!
-    .row
-      .col-md-4.col-sm-4.col-xs-12
-        %h3.heading-showcase
-          %i.fa.fa-fw.fa-globe.colored-icon
-          Open Source
-        %p
-          You heard it right!
-          = APP_CONFIG['site_name']
-          and all of it's core components are open source! Everyone can help and improve the service!
-      .col-md-4.col-sm-4.col-xs-12
-        %h3.heading-showcase
-          %i.fa.fa-fw.fa-eye-slash.colored-icon
-          No Ads
-        %p
-          We don't like them ourselves, really.
-          = APP_CONFIG['site_name']
-          just runs with community funding over
-          %a{href: "http://patreon.com/retrospring"} Patreon
-          which is way better than displaying annoying stuff.
-      .col-md-4.col-sm-4.col-xs-12
-        %h3.heading-showcase
-          %i.fa.fa-fw.fa-user-secret.colored-icon
-          Your Data is yours
-        %p
-          Today the most precious things on the internet is your data.
-          = APP_CONFIG['site_name']
-          doesn't sell any data that is collected. It remains encrypted on our servers!
-.container-fluid.frontpage-fluid
+#content.container.text-center
+  %h1= "What is #{APP_CONFIG['site_name']}?"
+  %p.lead
+    A
+    %abbr{title: "Question and Answer"} Q/A
+    based social network
+  %p Most of the people already know how these sorts of networks already work. You have a profile and other users (or even anonymous people without accounts) can ask you any question to find out more about you, so can you do the same with others. Finding friends with the same interests, people that share your opinion (and people that probably don't), you can find everything here!
+  %p.lead
+    But what makes
+    = APP_CONFIG['site_name']
+    special?
   %p
-    Any questions? Ask us on
-    %a{href: "https://twitter.com/retrospringnet"} Twitter
-    or visit one of the administrator profiles you can find on the
-    %a{href: about_path} About page!
-.container.text-center#register
+    = APP_CONFIG['site_name']
+    tries to take aspects from other popular or now gone platforms and combine them to get the best result possible. Also, we take in the ideas and feedback of our community so we can build a service that's even closer to being exactly the service people want to use!
+
+
+  %h2 Awesome Features
+  .row
+    .col-md-4.col-sm-4.col-xs-12
+      %h3
+        %i.fa.fa-fw.fa-comments.text-primary
+        Discussion
+      %p= "With #{APP_CONFIG['site_name']}, you can ask and answer questions from other users as well as receive anonymous questions. Want to know something? Keep the conversation alive with interactive comments."
+    .col-md-4.col-sm-4.col-xs-12
+      %h3
+        %i.fa.fa-fw.fa-user-plus.text-primary
+        Following
+      %p
+        Following users allows you to get a personalized feed of all people you want to know more about. You can also send a question to all your followers at once!
+    .col-md-4.col-sm-4.col-xs-12
+      %h3
+        %i.fa.fa-fw.fa-share-square-o.text-primary
+        Sharing
+      %p
+        Want to share your answer to a question so that more people read it? With a simple click on the answer button, your answer is shared wherever you want!
+  .row
+    .col-md-4.col-sm-4.col-xs-12
+      %h3
+        %i.fa.fa-fw.fa-users.text-primary
+        Groups
+      %p
+        Want to ask a question to a specific set of people? No problem! Set up unique groups of users and send them questions apart from everyone else.
+    .col-md-4.col-sm-4.col-xs-12
+      %h3
+        %i.fa.fa-fw.fa-image.text-primary
+        Images
+      %p
+        Express yourself with images and upload an avatar and a header of your liking. And soon you'll be able to attach images to answers and questions as well!
+    .col-md-4.col-sm-4.col-xs-12
+      %h3
+        %i.fa.fa-fw.fa-paint-brush.text-primary
+        Themes
+      %p
+        Don't like the default purple or don't like light interfaces in general? On
+        = APP_CONFIG['site_name']
+        you can change every color aspect of the site with Themes!
+  .row
+    .col-md-4.col-sm-4.col-xs-12
+      %h3
+        %i.fa.fa-fw.fa-globe.text-primary
+        Open Source
+      %p
+        You heard it right!
+        = APP_CONFIG['site_name']
+        and all of it's core components are open source! Everyone can help and improve the service!
+    .col-md-4.col-sm-4.col-xs-12
+      %h3
+        %i.fa.fa-fw.fa-eye-slash.text-primary
+        No Ads
+      %p
+        We don't like them ourselves, really.
+        = APP_CONFIG['site_name']
+        just runs with community funding over
+        %a{href: "http://patreon.com/retrospring"} Patreon
+        which is way better than displaying annoying stuff.
+    .col-md-4.col-sm-4.col-xs-12
+      %h3
+        %i.fa.fa-fw.fa-user-secret.text-primary
+        Your Data is yours
+      %p
+        Today the most precious things on the internet is your data.
+        = APP_CONFIG['site_name']
+        doesn't sell any data that is collected. It remains encrypted on our servers!
+  
+  .card
+    .card-body
+      %p
+        Any questions? Ask us on
+        %a{href: "https://twitter.com/retrospringnet"} Twitter
+        or visit one of the administrator profiles you can find on the
+        %a{href: about_path} About page!
+  
   %h2 What are you waiting for?
   %p
     Registering takes less than 5 minutes!
   %p
-    %a.btn.btn-primary.btn-lg.register-now{href: url_for(new_user_registration_path)}
+    %a.btn.btn-primary.btn-lg{href: url_for(new_user_registration_path)}
       Register now
 
 = render "shared/links"

From 416a12f956deb3cc090eb920153534a5ec447ae5 Mon Sep 17 00:00:00 2001
From: Andreas Nedbal <andy@pixelde.su>
Date: Mon, 27 Apr 2020 01:31:43 +0200
Subject: [PATCH 046/172] Remove "centre" class

---
 app/assets/stylesheets/base.css.scss | 4 ----
 app/views/settings/_export.haml      | 4 ++--
 app/views/shared/_links.html.haml    | 2 +-
 3 files changed, 3 insertions(+), 7 deletions(-)

diff --git a/app/assets/stylesheets/base.css.scss b/app/assets/stylesheets/base.css.scss
index 6fd2283a..730d45f4 100644
--- a/app/assets/stylesheets/base.css.scss
+++ b/app/assets/stylesheets/base.css.scss
@@ -24,10 +24,6 @@ body {
   padding-top: 30px;
 }
 
-.centre {
-  text-align: center;
-}
-
 .ios-web-app {
   padding-top: 1em;
 }
diff --git a/app/views/settings/_export.haml b/app/views/settings/_export.haml
index dd668173..24aaebe5 100644
--- a/app/views/settings/_export.haml
+++ b/app/views/settings/_export.haml
@@ -15,11 +15,11 @@
       is done.
     - if current_user.can_export?
       %form{action: begin_user_export_path, method: 'POST'}
-        %p.centre
+        %p.text-center
           %button#export-btn.btn.btn-lg.btn-primary{type: :submit} Export
         = hidden_field_tag :authenticity_token, form_authenticity_token
     - else
-      %p.centre
+      %p.text-center
         %button.btn.btn-lg.btn-primary.disabled{disabled: :disabled} Export
     %p
       - if current_user.export_url.nil?
diff --git a/app/views/shared/_links.html.haml b/app/views/shared/_links.html.haml
index ed2f92b4..17d1d71c 100644
--- a/app/views/shared/_links.html.haml
+++ b/app/views/shared/_links.html.haml
@@ -1,4 +1,4 @@
-.centre.text-muted.links
+.text-center.text-muted.links
   &copy;
   = Date.today.year
   = APP_CONFIG['site_name']

From 61dbfda39568bf33a0e7dab328cc57525672db94 Mon Sep 17 00:00:00 2001
From: Andreas Nedbal <andy@pixelde.su>
Date: Mon, 27 Apr 2020 01:36:37 +0200
Subject: [PATCH 047/172] Remove panel overide styles

---
 app/assets/stylesheets/base.css.scss | 26 --------------------------
 1 file changed, 26 deletions(-)

diff --git a/app/assets/stylesheets/base.css.scss b/app/assets/stylesheets/base.css.scss
index 730d45f4..1d81e758 100644
--- a/app/assets/stylesheets/base.css.scss
+++ b/app/assets/stylesheets/base.css.scss
@@ -105,37 +105,11 @@ body {
   padding-bottom: 10px;
 }
 
-.panel {
-  box-shadow: 0px 0px 20px rgba(0,0,0,0.1);
-}
-
-.panel-default > .panel-heading {
-  box-shadow: inset 0 -10px 10px -10px rgba(0,0,0,0.1);
-}
-
-.panel-default > .panel-footer {
-  box-shadow: inset 0 10px 10px -10px rgba(0,0,0,0.1);
-}
-
 #profile {
   border-color: transparent;
   border-width: 0px;
 }
 
-.panel {
-  border-radius: 2px;
-}
-
-.panel > .panel-heading {
-  border-top-left-radius: 2px;
-  border-top-right-radius: 2px;
-}
-
-.panel > .panel-footer {
-  border-bottom-left-radius: 2px;
-  border-bottom-right-radius: 2px;
-}
-
 .heading-about {
   margin-top: 0px;
 }

From 40df3a59d8881e8c39523f51b8ff421c85f8ac73 Mon Sep 17 00:00:00 2001
From: Andreas Nedbal <andy@pixelde.su>
Date: Mon, 27 Apr 2020 01:55:31 +0200
Subject: [PATCH 048/172] Remove "discover" class

---
 app/assets/stylesheets/base.css.scss | 4 ----
 app/views/discover/index.html.haml   | 4 ++--
 2 files changed, 2 insertions(+), 6 deletions(-)

diff --git a/app/assets/stylesheets/base.css.scss b/app/assets/stylesheets/base.css.scss
index 1d81e758..3d8219b8 100644
--- a/app/assets/stylesheets/base.css.scss
+++ b/app/assets/stylesheets/base.css.scss
@@ -114,10 +114,6 @@ body {
   margin-top: 0px;
 }
 
-.discover {
-  padding-top: 20px;
-}
-
 .row-eq-height {
   display: -webkit-box;
   display: -webkit-flex;
diff --git a/app/views/discover/index.html.haml b/app/views/discover/index.html.haml
index d92126aa..b20a58b3 100644
--- a/app/views/discover/index.html.haml
+++ b/app/views/discover/index.html.haml
@@ -17,7 +17,7 @@
             %a.nav-link{href: "#questions", role: "tab", aria: {controls: "questions"}, data: {toggle: "tab"}}= t 'views.discover.content.tab.questions'
           %li.nav-item{role: "presentation"}
             %a.nav-link{href: "#comments", role: "tab", aria: {controls: "comments"}, data: {toggle: "tab"}}= t 'views.discover.content.tab.comments'
-        .tab-content.discover
+        .tab-content.mt-3
           = render 'discover/tab_answers', answers: @popular_answers
           = render 'discover/tab_questions', questions: @popular_questions
           = render 'discover/tab_discussed', comments: @most_discussed
@@ -32,7 +32,7 @@
             %a.nav-link{href: "#asked", role: "tab", aria: {controls: "asked"}, data: {toggle: "tab"}}= t 'views.discover.people.tab.questions'
           %li.nav-item{role: "presentation"}
             %a.nav-link{href: "#answered", role: "tab", aria: {controls: "answered"}, data: {toggle: "tab"}}= t 'views.discover.people.tab.answers'
-        .tab-content.discover
+        .tab-content.mt-3
           = render 'discover/tab_new', new: @new_users
           = render 'discover/tab_asked', asked: @users_with_most_questions
           = render 'discover/tab_most', answered: @users_with_most_answers

From 76c91180b0dfe09a1c74aef2cbca0966ffa4d120 Mon Sep 17 00:00:00 2001
From: Andreas Nedbal <andy@pixelde.su>
Date: Mon, 27 Apr 2020 18:38:24 +0200
Subject: [PATCH 049/172] Added overrides for Bootstrap styles to use CSS
 variables

---
 app/assets/stylesheets/application.css.scss   | 58 +++++++++++++++----
 .../stylesheets/overrides/_buttons.scss       | 14 +++++
 app/assets/stylesheets/overrides/_card.scss   |  6 ++
 app/assets/stylesheets/overrides/_colors.scss | 17 ++++++
 app/assets/stylesheets/overrides/_links.scss  |  7 +++
 .../stylesheets/overrides/_list-group.scss    |  4 ++
 6 files changed, 95 insertions(+), 11 deletions(-)
 create mode 100644 app/assets/stylesheets/overrides/_buttons.scss
 create mode 100644 app/assets/stylesheets/overrides/_colors.scss
 create mode 100644 app/assets/stylesheets/overrides/_links.scss
 create mode 100644 app/assets/stylesheets/overrides/_list-group.scss

diff --git a/app/assets/stylesheets/application.css.scss b/app/assets/stylesheets/application.css.scss
index 4ea479bf..516d937c 100644
--- a/app/assets/stylesheets/application.css.scss
+++ b/app/assets/stylesheets/application.css.scss
@@ -45,13 +45,57 @@ $navbar-inverse-toggle-hover-bg: #512da8;
 $navbar-inverse-toggle-icon-bar-bg: #7e57c2;
 $navbar-inverse-toggle-border-color: #512da8;
 
+/**
+ SETTINGS
+ ----------------------------------------------
+ Variable definitions, tools and mixins used
+ across all styling definitions.
+ */
 
+@import
+"variables";
 
-@import "variables";
+/**
+ VENDOR
+ ----------------------------------------------
+ Imported vendor assets used by Retrospring.
+ */
 
-@import "bootstrap";
+@import
+"bootstrap",
+"font-awesome",
+"nprogress",
+"nprogress-bootstrap";
 
-@import "overrides/card";
+/**
+ OVERRIDES
+ ----------------------------------------------
+ The imports from "overrides/" define almost barely
+ any style adjustments but rather override default
+ Bootstrap behaviour.
+
+ The largest change to regular bootstrap is the switch
+ to using the available CSS variables for most elements
+ used on the site, so theming can be done with changing
+ only those.
+ */
+
+@import
+"overrides/buttons",
+"overrides/colors",
+"overrides/card",
+"overrides/links",
+"overrides/list-group",
+"overrides/navbar";
+
+/**
+ COMPONENTS
+ ----------------------------------------------
+ Custom components defined for Retrospring.
+ */
+
+@import
+"components/jumbotron";
 
 body { padding-top: 50px; }
 
@@ -60,16 +104,8 @@ body { padding-top: 50px; }
   display: none
 }
 
-@import "components/jumbotron";
-
 @import "base";
 
-@import "font-awesome";
-
-$nprogress-color: lighten($navbar-inverse-bg, 25%);
-@import 'nprogress';
-@import 'nprogress-bootstrap';
-
 .minicolors-theme-bootstrap .minicolors-swatch {
   top:           0;
   left:          0;
diff --git a/app/assets/stylesheets/overrides/_buttons.scss b/app/assets/stylesheets/overrides/_buttons.scss
new file mode 100644
index 00000000..2c443789
--- /dev/null
+++ b/app/assets/stylesheets/overrides/_buttons.scss
@@ -0,0 +1,14 @@
+$colors: (
+  "primary", 
+  "danger",
+  "warning",
+  "info",
+  "success"
+);
+
+@each $color in $colors {
+  .btn-#{$color} {
+    background-color: var(--#{$color});
+    border-color: var(--#{$color});
+  }
+}
\ No newline at end of file
diff --git a/app/assets/stylesheets/overrides/_card.scss b/app/assets/stylesheets/overrides/_card.scss
index ef1111ae..a6f6d434 100644
--- a/app/assets/stylesheets/overrides/_card.scss
+++ b/app/assets/stylesheets/overrides/_card.scss
@@ -1,8 +1,14 @@
 .card {
   margin-bottom: map-get($spacers, 3);
   box-shadow: $box-shadow-sm;
+  background-color: var(--card-bg);
 
   p:only-child {
     margin-bottom: 0;
   }
+}
+
+.card-header,
+.card-footer {
+  background-color: var(--card-cap-bg);
 }
\ No newline at end of file
diff --git a/app/assets/stylesheets/overrides/_colors.scss b/app/assets/stylesheets/overrides/_colors.scss
new file mode 100644
index 00000000..2b25c91e
--- /dev/null
+++ b/app/assets/stylesheets/overrides/_colors.scss
@@ -0,0 +1,17 @@
+$colors: (
+  "primary", 
+  "danger",
+  "warning",
+  "info",
+  "success"
+);
+
+@each $color in $colors {
+  .bg-#{$color} {
+    background-color: var(--#{$color}) !important;
+  }
+
+  .text-#{$color} {
+    color: var(--#{$color}) !important;
+  }
+}
\ No newline at end of file
diff --git a/app/assets/stylesheets/overrides/_links.scss b/app/assets/stylesheets/overrides/_links.scss
new file mode 100644
index 00000000..34bbae92
--- /dev/null
+++ b/app/assets/stylesheets/overrides/_links.scss
@@ -0,0 +1,7 @@
+a {
+  color: var(--primary);
+
+  &:hover {
+    color: var(--primary);
+  }
+}
\ No newline at end of file
diff --git a/app/assets/stylesheets/overrides/_list-group.scss b/app/assets/stylesheets/overrides/_list-group.scss
new file mode 100644
index 00000000..a10a8df5
--- /dev/null
+++ b/app/assets/stylesheets/overrides/_list-group.scss
@@ -0,0 +1,4 @@
+.list-group-item.active {
+  background-color: var(--primary);
+  border-color: var(--primary);
+}
\ No newline at end of file

From 56b63d60b7428a55eb1a7d364c1f79464354836b Mon Sep 17 00:00:00 2001
From: Andreas Nedbal <andy@pixelde.su>
Date: Mon, 27 Apr 2020 18:39:01 +0200
Subject: [PATCH 050/172] Add "navbar-themed" class to use CSS variables in
 navigation

---
 app/assets/stylesheets/_variables.scss        | 27 +++++++++-
 app/assets/stylesheets/overrides/_navbar.scss | 50 +++++++++++++++++++
 app/views/navigation/_main.haml               |  2 +-
 3 files changed, 77 insertions(+), 2 deletions(-)
 create mode 100644 app/assets/stylesheets/overrides/_navbar.scss

diff --git a/app/assets/stylesheets/_variables.scss b/app/assets/stylesheets/_variables.scss
index 91f8ace7..cd0ef8a5 100644
--- a/app/assets/stylesheets/_variables.scss
+++ b/app/assets/stylesheets/_variables.scss
@@ -7,7 +7,32 @@ $card-border-width: 0;
 // List Groups
 $list-group-border-width: 0;
 
+// nProgress
+$nprogress-color: lighten($navbar-inverse-bg, 25%);
+
 :root {
   --background: #f0edf4;
-  --primary-text: #ffffff;
+  --card-bg: #ffffff;
+  --card-cap-bg: #f7f7f7;
+
+  /**
+   NOTE for all *-text variables
+   ----------------------------------------------
+   The text-variables are present as triplets
+   because in some places it's required to adjust
+   their transparency.
+
+   So, for general usage, use:
+   color: RGB(var(--*-text));
+
+   And for transparent usage, use:
+   color: rgba(var(--*-text), .7); 
+
+   The uppercase RGB is required because internally
+   SassC wants more than one argument for rgb(),
+   hence writing RGB() bypasses that check, but
+   browsers interpret it correctly.
+   */
+
+  --primary-text: 255, 255, 255;
 }
\ No newline at end of file
diff --git a/app/assets/stylesheets/overrides/_navbar.scss b/app/assets/stylesheets/overrides/_navbar.scss
new file mode 100644
index 00000000..f5959ff0
--- /dev/null
+++ b/app/assets/stylesheets/overrides/_navbar.scss
@@ -0,0 +1,50 @@
+.navbar-themed {
+  .navbar-brand {
+    color: RGB(var(--primary-text));
+
+    &:hover,
+    &:focus {
+      color: RGB(var(--primary-text));
+    }
+  }
+
+  .navbar-nav {
+    .nav-link {
+      color: rgba(var(--primary-text), .5);
+
+      &:hover,
+      &:focus {
+        color: rgba(var(--primary-text), .75);
+      }
+
+      &.disabled {
+        color: rgba(var(--primary-text), .25);
+      }
+    }
+
+    .show > .nav-link,
+    .active > .nav-link,
+    .nav-link.show,
+    .nav-link.active {
+      color: RGB(var(--primary-text));
+    }
+  }
+
+  .navbar-toggler {
+    color: RGB(var(--primary-text));
+    border-color: RGB(var(--primary-text));
+  }
+
+  .navbar-toggler-icon {
+    background-image: escape-svg($navbar-dark-toggler-icon-bg);
+  }
+
+  .navbar-text {
+    color: RGB(var(--primary-text));
+    a,
+    a:hover,
+    a:focus {
+      color: RGB(var(--primary-text));
+    }
+  }
+}
\ No newline at end of file
diff --git a/app/views/navigation/_main.haml b/app/views/navigation/_main.haml
index a24f0fd9..8e0aea46 100644
--- a/app/views/navigation/_main.haml
+++ b/app/views/navigation/_main.haml
@@ -1,4 +1,4 @@
-%nav.navbar.navbar-dark.navbar-expand-lg.bg-primary.fixed-top{role: "navigation"}
+%nav.navbar.navbar-themed.navbar-expand-lg.bg-primary.fixed-top{role: "navigation"}
   .container{class: ios_web_app? ? "ios-web-app" : ''}
     %a.navbar-brand{href: "/"}= APP_CONFIG['site_name']
     %button.navbar-toggler{"data-target" => "#j2-main-navbar-collapse", "data-toggle" => "collapse", type: "button"}

From 1951779c0027bc0a2c5b5b2d71800a9dafb17c6e Mon Sep 17 00:00:00 2001
From: Andreas Nedbal <andy@pixelde.su>
Date: Mon, 27 Apr 2020 18:39:24 +0200
Subject: [PATCH 051/172] Fix Jumbotron styles being broken due to adjusted
 *-text behaviour

---
 app/assets/stylesheets/components/_jumbotron.scss | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/app/assets/stylesheets/components/_jumbotron.scss b/app/assets/stylesheets/components/_jumbotron.scss
index c0a77dba..42d4d1ff 100644
--- a/app/assets/stylesheets/components/_jumbotron.scss
+++ b/app/assets/stylesheets/components/_jumbotron.scss
@@ -2,7 +2,7 @@
   $this: &;
   display: flex;
   background-color: var(--primary);
-  color: var(--primary-text);
+  color: RGB(var(--primary-text));
   text-align: center;
 
   h1,
@@ -11,11 +11,11 @@
   h4,
   h5,
   h6 {
-    color: var(--primary-text);
+    color: RGB(var(--primary-text));
   }
 
   a:not(.btn) {
-    color: var(--primary-text);
+    color: RGB(var(--primary-text));
     opacity: 0.6;
 
     &:hover {

From a7cefa11b3be3430d4d8cd55f7543bb88fbf467e Mon Sep 17 00:00:00 2001
From: Andreas Nedbal <andy@pixelde.su>
Date: Mon, 27 Apr 2020 19:57:10 +0200
Subject: [PATCH 052/172] Add customizable hover styles to buttons

---
 app/assets/stylesheets/overrides/_buttons.scss | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/app/assets/stylesheets/overrides/_buttons.scss b/app/assets/stylesheets/overrides/_buttons.scss
index 2c443789..222b4112 100644
--- a/app/assets/stylesheets/overrides/_buttons.scss
+++ b/app/assets/stylesheets/overrides/_buttons.scss
@@ -10,5 +10,13 @@ $colors: (
   .btn-#{$color} {
     background-color: var(--#{$color});
     border-color: var(--#{$color});
+
+    &:hover {
+      background: linear-gradient(
+        to top,
+        rgba(0, 0, 0, 0.10),
+        rgba(0, 0, 0, 0.10)
+      ) var(--#{$color});
+    }
   }
 }
\ No newline at end of file

From aa453ab770ff8a7e9794daa80e9b0466d6570f5d Mon Sep 17 00:00:00 2001
From: Andreas Nedbal <andy@pixelde.su>
Date: Tue, 28 Apr 2020 13:07:16 +0200
Subject: [PATCH 053/172] Moved $colors list into variables

Also renamed it because it would cause a collission with Bootstraps $colors surely at some point.
---
 app/assets/stylesheets/_variables.scss         | 11 ++++++++++-
 app/assets/stylesheets/overrides/_buttons.scss | 10 +---------
 app/assets/stylesheets/overrides/_colors.scss  | 10 +---------
 3 files changed, 12 insertions(+), 19 deletions(-)

diff --git a/app/assets/stylesheets/_variables.scss b/app/assets/stylesheets/_variables.scss
index cd0ef8a5..88ffc36e 100644
--- a/app/assets/stylesheets/_variables.scss
+++ b/app/assets/stylesheets/_variables.scss
@@ -1,4 +1,4 @@
-// Colors
+// Color overrides for Bootstrap
 $primary: #5e35b1;
 
 // Cards
@@ -10,6 +10,15 @@ $list-group-border-width: 0;
 // nProgress
 $nprogress-color: lighten($navbar-inverse-bg, 25%);
 
+// Color names for theme generation
+$colorNames: (
+  "primary", 
+  "danger",
+  "warning",
+  "info",
+  "success"
+);
+
 :root {
   --background: #f0edf4;
   --card-bg: #ffffff;
diff --git a/app/assets/stylesheets/overrides/_buttons.scss b/app/assets/stylesheets/overrides/_buttons.scss
index 222b4112..9ee4ab69 100644
--- a/app/assets/stylesheets/overrides/_buttons.scss
+++ b/app/assets/stylesheets/overrides/_buttons.scss
@@ -1,12 +1,4 @@
-$colors: (
-  "primary", 
-  "danger",
-  "warning",
-  "info",
-  "success"
-);
-
-@each $color in $colors {
+@each $color in $colorNames {
   .btn-#{$color} {
     background-color: var(--#{$color});
     border-color: var(--#{$color});
diff --git a/app/assets/stylesheets/overrides/_colors.scss b/app/assets/stylesheets/overrides/_colors.scss
index 2b25c91e..e8491aa5 100644
--- a/app/assets/stylesheets/overrides/_colors.scss
+++ b/app/assets/stylesheets/overrides/_colors.scss
@@ -1,12 +1,4 @@
-$colors: (
-  "primary", 
-  "danger",
-  "warning",
-  "info",
-  "success"
-);
-
-@each $color in $colors {
+@each $color in $colorNames {
   .bg-#{$color} {
     background-color: var(--#{$color}) !important;
   }

From 93fc9c296345dbd1913cc3718d2fb06ede03b63c Mon Sep 17 00:00:00 2001
From: Andreas Nedbal <andy@pixelde.su>
Date: Tue, 28 Apr 2020 13:07:58 +0200
Subject: [PATCH 054/172] Add Bootstrap alert CSS variable overrides

---
 app/assets/stylesheets/application.css.scss   | 1 +
 app/assets/stylesheets/overrides/_alerts.scss | 7 +++++++
 2 files changed, 8 insertions(+)
 create mode 100644 app/assets/stylesheets/overrides/_alerts.scss

diff --git a/app/assets/stylesheets/application.css.scss b/app/assets/stylesheets/application.css.scss
index 516d937c..78fa7777 100644
--- a/app/assets/stylesheets/application.css.scss
+++ b/app/assets/stylesheets/application.css.scss
@@ -81,6 +81,7 @@ $navbar-inverse-toggle-border-color: #512da8;
  */
 
 @import
+"overrides/alerts",
 "overrides/buttons",
 "overrides/colors",
 "overrides/card",
diff --git a/app/assets/stylesheets/overrides/_alerts.scss b/app/assets/stylesheets/overrides/_alerts.scss
new file mode 100644
index 00000000..ab27cb79
--- /dev/null
+++ b/app/assets/stylesheets/overrides/_alerts.scss
@@ -0,0 +1,7 @@
+@each $color in $colorNames {
+  .alert-#{$color} {
+    color: RGB(var(--#{$color}-text));
+    background-color: var(--#{$color});
+    border-color: var(--#{$color});
+  }
+}
\ No newline at end of file

From e7d076d699830cea4ee1f3eb58eb4264c134ab89 Mon Sep 17 00:00:00 2001
From: Andreas Nedbal <andy@pixelde.su>
Date: Tue, 28 Apr 2020 13:19:59 +0200
Subject: [PATCH 055/172] Add missing --color-text variables for themes

---
 app/assets/stylesheets/_variables.scss | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/app/assets/stylesheets/_variables.scss b/app/assets/stylesheets/_variables.scss
index 88ffc36e..a53a5c94 100644
--- a/app/assets/stylesheets/_variables.scss
+++ b/app/assets/stylesheets/_variables.scss
@@ -44,4 +44,8 @@ $colorNames: (
    */
 
   --primary-text: 255, 255, 255;
+  --danger-text: 255, 255, 255;
+  --warning-text: 255, 255, 255;
+  --info-text: 255, 255, 255;
+  --success-text: 255, 255, 255;
 }
\ No newline at end of file

From a0c99574ba7ef15cbd1293c383c5de0ad0250596 Mon Sep 17 00:00:00 2001
From: Andreas Nedbal <andy@pixelde.su>
Date: Tue, 28 Apr 2020 13:26:20 +0200
Subject: [PATCH 056/172] Fix usage of deprecated size() method

---
 app/assets/javascripts/pagination.coffee | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/assets/javascripts/pagination.coffee b/app/assets/javascripts/pagination.coffee
index 17ad5e14..4a825b94 100644
--- a/app/assets/javascripts/pagination.coffee
+++ b/app/assets/javascripts/pagination.coffee
@@ -1,5 +1,5 @@
 jQuery ->
-  if $('#pagination').size() > 0
+  if $('#pagination').length > 0
     $('#pagination').hide()
     loading_posts = false
 

From ddb253792649946a6713e58342b1901af66ecc6f Mon Sep 17 00:00:00 2001
From: Andreas Nedbal <andy@pixelde.su>
Date: Tue, 28 Apr 2020 15:02:23 +0200
Subject: [PATCH 057/172] Add Bootstrap dropdown CSS variable overrides

---
 app/assets/stylesheets/application.css.scss     | 1 +
 app/assets/stylesheets/overrides/_dropdown.scss | 4 ++++
 2 files changed, 5 insertions(+)
 create mode 100644 app/assets/stylesheets/overrides/_dropdown.scss

diff --git a/app/assets/stylesheets/application.css.scss b/app/assets/stylesheets/application.css.scss
index 78fa7777..92995622 100644
--- a/app/assets/stylesheets/application.css.scss
+++ b/app/assets/stylesheets/application.css.scss
@@ -85,6 +85,7 @@ $navbar-inverse-toggle-border-color: #512da8;
 "overrides/buttons",
 "overrides/colors",
 "overrides/card",
+"overrides/dropdown",
 "overrides/links",
 "overrides/list-group",
 "overrides/navbar";
diff --git a/app/assets/stylesheets/overrides/_dropdown.scss b/app/assets/stylesheets/overrides/_dropdown.scss
new file mode 100644
index 00000000..8579eabe
--- /dev/null
+++ b/app/assets/stylesheets/overrides/_dropdown.scss
@@ -0,0 +1,4 @@
+.dropdown-item.active, .dropdown-item:active {
+  color: RGB(var(--primary-text));
+  background-color: var(--primary);
+}
\ No newline at end of file

From 650751e8757882117419c9221f64065e708e2e09 Mon Sep 17 00:00:00 2001
From: Andreas Nedbal <andy@pixelde.su>
Date: Tue, 28 Apr 2020 15:03:51 +0200
Subject: [PATCH 058/172] Adjust profile statistics layout

- Instead of being in the sidebar, they are now present as a tabbed navigation
- The questionbox is now present on any layout
---
 app/views/layouts/user/profile.haml    |  5 +++--
 app/views/tabs/_profile.haml           |  6 ++++++
 app/views/user/_profile_info.html.haml |  1 -
 app/views/user/_stats.html.haml        | 21 ---------------------
 app/views/user/questions.haml          |  2 --
 app/views/user/show.haml               |  1 -
 app/views/user/show_follow.haml        |  2 --
 7 files changed, 9 insertions(+), 29 deletions(-)
 create mode 100644 app/views/tabs/_profile.haml
 delete mode 100644 app/views/user/_stats.html.haml

diff --git a/app/views/layouts/user/profile.haml b/app/views/layouts/user/profile.haml
index de62b178..3c0edd84 100644
--- a/app/views/layouts/user/profile.haml
+++ b/app/views/layouts/user/profile.haml
@@ -5,10 +5,11 @@
   .row
     #profile-info.col-md-3.col-xs-12.col-sm-4.j2-col-reset
       = render 'user/profile_info'
-      .hidden-xs= render 'shared/links'
+      .d-none.d-sm-block= render 'shared/links'
     .col-md-9.col-xs-12.col-sm-8.j2-col-reset
+      = render "questionbox"
+      = render "tabs/profile"
       = yield
-  .visible-xs= render 'shared/links'
 - if user_signed_in?
   = render 'modal/group'
   - if current_user.mod? and @user != current_user
diff --git a/app/views/tabs/_profile.haml b/app/views/tabs/_profile.haml
new file mode 100644
index 00000000..f49f17dd
--- /dev/null
+++ b/app/views/tabs/_profile.haml
@@ -0,0 +1,6 @@
+.card
+  .list-group.list-group-horizontal-sm.text-center
+    = list_group_item "Answers", show_user_profile_path(@user.screen_name), badge: @user.answered_count
+    = list_group_item "Questions", show_user_questions_path(@user.screen_name), badge: @user.asked_count
+    = list_group_item "Followers", show_user_followers_path(@user.screen_name), badge: @user.follower_count
+    = list_group_item "Following", show_user_friends_path(@user.screen_name), badge: @user.friend_count
\ No newline at end of file
diff --git a/app/views/user/_profile_info.html.haml b/app/views/user/_profile_info.html.haml
index ca00a8a3..29a833e7 100644
--- a/app/views/user/_profile_info.html.haml
+++ b/app/views/user/_profile_info.html.haml
@@ -37,4 +37,3 @@
         %i.fa.fa-location-arrow
         = @user.location
     = render 'user/actions', user: @user, type: :follower
-= render 'user/stats', user: @user
diff --git a/app/views/user/_stats.html.haml b/app/views/user/_stats.html.haml
deleted file mode 100644
index 3e2c81ca..00000000
--- a/app/views/user/_stats.html.haml
+++ /dev/null
@@ -1,21 +0,0 @@
-.card.profile--panel#profile-stats
-  .card-header Stats
-  .card-body
-    .row
-      .col-md-6.col-sm-6.col-xs-6
-        %a{href: show_user_followers_path(@user.screen_name)}
-          %h4.entry-text#follower-count= @user.follower_count
-          %h6.entry-subtext= t('views.general.follower').pluralize(@user.follower_count)
-      .col-md-6.col-sm-6.col-xs-6
-        %a{href: show_user_friends_path(@user.screen_name)}
-          %h4.entry-text#friend-count= @user.friend_count
-          %h6.entry-subtext= t('views.general.following')
-    .row
-      .col-md-6.col-sm-6.col-xs-6
-        %a{href: show_user_questions_path(@user.screen_name)}
-          %h4.entry-text#asked-count= @user.asked_count
-          %h6.entry-subtext= t('views.general.question').pluralize(@user.asked_count)
-      .col-md-6.col-sm-6.col-xs-6
-        %a{href: show_user_profile_path(@user.screen_name)}
-          %h4.entry-text#answered-count= @user.answered_count
-          %h6.entry-subtext= t('views.general.answer').pluralize(@user.answered_count)
diff --git a/app/views/user/questions.haml b/app/views/user/questions.haml
index 17e137ef..f606d663 100644
--- a/app/views/user/questions.haml
+++ b/app/views/user/questions.haml
@@ -1,5 +1,3 @@
-%h1.j2-lh.hidden-xs= @title
-%h1.visible-xs= @title
 #questions
   - @questions.each do |q|
     = render 'shared/question', q: q, type: nil
diff --git a/app/views/user/show.haml b/app/views/user/show.haml
index aaa34263..964e7918 100644
--- a/app/views/user/show.haml
+++ b/app/views/user/show.haml
@@ -1,6 +1,5 @@
 - no_header = unless @user.profile_header.exists? then "profile--no-header" else "" end
 .profile--panel-push-inner.hidden-xs{class: no_header}
-= render 'questionbox'
 - unless @user.banned?
   #answers
     - @answers.each do |a|
diff --git a/app/views/user/show_follow.haml b/app/views/user/show_follow.haml
index fe026028..19d0938a 100644
--- a/app/views/user/show_follow.haml
+++ b/app/views/user/show_follow.haml
@@ -1,5 +1,3 @@
-%h1.j2-lh.hidden-xs= @title
-%h1.visible-xs= @title
 #users
   - @users.each do |user|
     .col-md-4.col-sm-6.col-xs-12

From 01499797a193fc7f9d22afc2f4c2737693d045a3 Mon Sep 17 00:00:00 2001
From: Andreas Nedbal <andy@pixelde.su>
Date: Tue, 28 Apr 2020 15:52:20 +0200
Subject: [PATCH 059/172] Add Bootstrap text-muted CSS variable override

---
 app/assets/stylesheets/_variables.scss        | 2 ++
 app/assets/stylesheets/overrides/_colors.scss | 4 ++++
 2 files changed, 6 insertions(+)

diff --git a/app/assets/stylesheets/_variables.scss b/app/assets/stylesheets/_variables.scss
index a53a5c94..d46ead86 100644
--- a/app/assets/stylesheets/_variables.scss
+++ b/app/assets/stylesheets/_variables.scss
@@ -48,4 +48,6 @@ $colorNames: (
   --warning-text: 255, 255, 255;
   --info-text: 255, 255, 255;
   --success-text: 255, 255, 255;
+
+  --muted-text: 108, 117, 125;
 }
\ No newline at end of file
diff --git a/app/assets/stylesheets/overrides/_colors.scss b/app/assets/stylesheets/overrides/_colors.scss
index e8491aa5..e18d8dd9 100644
--- a/app/assets/stylesheets/overrides/_colors.scss
+++ b/app/assets/stylesheets/overrides/_colors.scss
@@ -6,4 +6,8 @@
   .text-#{$color} {
     color: var(--#{$color}) !important;
   }
+}
+
+.text-muted {
+  color: RGB(var(--muted-text));
 }
\ No newline at end of file

From 22197a9e51304e9912c63a23ff5fb42c3f663b91 Mon Sep 17 00:00:00 2001
From: Andreas Nedbal <andy@pixelde.su>
Date: Tue, 28 Apr 2020 15:56:38 +0200
Subject: [PATCH 060/172] Add Bootstrap input CSS variable overrides

---
 app/assets/stylesheets/_variables.scss        | 3 +++
 app/assets/stylesheets/application.css.scss   | 1 +
 app/assets/stylesheets/overrides/_inputs.scss | 4 ++++
 3 files changed, 8 insertions(+)
 create mode 100644 app/assets/stylesheets/overrides/_inputs.scss

diff --git a/app/assets/stylesheets/_variables.scss b/app/assets/stylesheets/_variables.scss
index d46ead86..ccd6fad1 100644
--- a/app/assets/stylesheets/_variables.scss
+++ b/app/assets/stylesheets/_variables.scss
@@ -23,6 +23,7 @@ $colorNames: (
   --background: #f0edf4;
   --card-bg: #ffffff;
   --card-cap-bg: #f7f7f7;
+  --input-bg: #ffffff;
 
   /**
    NOTE for all *-text variables
@@ -50,4 +51,6 @@ $colorNames: (
   --success-text: 255, 255, 255;
 
   --muted-text: 108, 117, 125;
+
+  --input-text: 0, 0, 0;
 }
\ No newline at end of file
diff --git a/app/assets/stylesheets/application.css.scss b/app/assets/stylesheets/application.css.scss
index 92995622..f9f299cd 100644
--- a/app/assets/stylesheets/application.css.scss
+++ b/app/assets/stylesheets/application.css.scss
@@ -86,6 +86,7 @@ $navbar-inverse-toggle-border-color: #512da8;
 "overrides/colors",
 "overrides/card",
 "overrides/dropdown",
+"overrides/inputs",
 "overrides/links",
 "overrides/list-group",
 "overrides/navbar";
diff --git a/app/assets/stylesheets/overrides/_inputs.scss b/app/assets/stylesheets/overrides/_inputs.scss
new file mode 100644
index 00000000..d96894f7
--- /dev/null
+++ b/app/assets/stylesheets/overrides/_inputs.scss
@@ -0,0 +1,4 @@
+.form-control {
+  background-color: var(--input-bg);
+  color: RGB(var(--input-text));
+}
\ No newline at end of file

From d53abd307d6ce48765923efd1df816365815efd7 Mon Sep 17 00:00:00 2001
From: Andreas Nedbal <andy@pixelde.su>
Date: Tue, 28 Apr 2020 19:33:54 +0200
Subject: [PATCH 061/172] Remove no-header classes from profile page

---
 app/views/layouts/user/profile.haml | 5 ++---
 app/views/user/show.haml            | 3 +--
 2 files changed, 3 insertions(+), 5 deletions(-)

diff --git a/app/views/layouts/user/profile.haml b/app/views/layouts/user/profile.haml
index 3c0edd84..7d35c155 100644
--- a/app/views/layouts/user/profile.haml
+++ b/app/views/layouts/user/profile.haml
@@ -1,7 +1,6 @@
-- no_header = unless @user.profile_header.exists? then "profile--no-header" else "" end
-#profile--header{class: no_header}
+#profile--header
   %img.profile--header-img{src: @user.profile_header.url(:web)}
-.container.j2-page.headerable{class: no_header}
+.container.j2-page.headerable
   .row
     #profile-info.col-md-3.col-xs-12.col-sm-4.j2-col-reset
       = render 'user/profile_info'
diff --git a/app/views/user/show.haml b/app/views/user/show.haml
index 964e7918..486b25e7 100644
--- a/app/views/user/show.haml
+++ b/app/views/user/show.haml
@@ -1,5 +1,4 @@
-- no_header = unless @user.profile_header.exists? then "profile--no-header" else "" end
-.profile--panel-push-inner.hidden-xs{class: no_header}
+.profile--panel-push-inner.hidden-xs
 - unless @user.banned?
   #answers
     - @answers.each do |a|

From b22c7d358c14d0c474e3e09445176b56e765abfd Mon Sep 17 00:00:00 2001
From: Andreas Nedbal <andy@pixelde.su>
Date: Wed, 29 Apr 2020 13:33:53 +0200
Subject: [PATCH 062/172] Fix wrong partial path in
 Ajax::AnswerController#create

---
 app/controllers/ajax/answer_controller.rb | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/controllers/ajax/answer_controller.rb b/app/controllers/ajax/answer_controller.rb
index 05a7ba7e..37bc1ec0 100644
--- a/app/controllers/ajax/answer_controller.rb
+++ b/app/controllers/ajax/answer_controller.rb
@@ -57,7 +57,7 @@ class Ajax::AnswerController < AjaxController
     unless inbox
       # this assign is needed because shared/_answerbox relies on it, I think
       @question = 1
-      @response[:render] = render_to_string(partial: 'shared/answerbox', locals: { a: answer, show_question: false })
+      @response[:render] = render_to_string(partial: 'answerbox', locals: { a: answer, show_question: false })
     end
   end
 

From 91a7f7ed33fa53ca4174feacf9f601c9ad04408b Mon Sep 17 00:00:00 2001
From: Andreas Nedbal <andy@pixelde.su>
Date: Wed, 29 Apr 2020 14:01:48 +0200
Subject: [PATCH 063/172] Fix wrong partial in Ajax::CommentController#create

---
 app/controllers/ajax/comment_controller.rb | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/controllers/ajax/comment_controller.rb b/app/controllers/ajax/comment_controller.rb
index 283da8d7..9ba83fcc 100644
--- a/app/controllers/ajax/comment_controller.rb
+++ b/app/controllers/ajax/comment_controller.rb
@@ -17,7 +17,7 @@ class Ajax::CommentController < AjaxController
     @response[:status] = :okay
     @response[:message] = I18n.t('messages.comment.create.okay')
     @response[:success] = true
-    @response[:render] = render_to_string(partial: 'shared/comments', locals: { a: answer })
+    @response[:render] = render_to_string(partial: 'answerbox/comments', locals: { a: answer })
     @response[:count] = answer.comment_count
   end
 

From ea36f7e21888cf859c9b62cd4deea8071ff25060 Mon Sep 17 00:00:00 2001
From: Andreas Nedbal <andy@pixelde.su>
Date: Wed, 29 Apr 2020 14:48:35 +0200
Subject: [PATCH 064/172] Remove mobile specific profile styles

---
 app/assets/stylesheets/scss/mobile.scss       |  4 -
 .../stylesheets/scss/mobile/profile.scss      | 76 -------------------
 .../stylesheets/scss/mobile/settings.scss     | 11 ---
 3 files changed, 91 deletions(-)
 delete mode 100644 app/assets/stylesheets/scss/mobile.scss
 delete mode 100644 app/assets/stylesheets/scss/mobile/profile.scss
 delete mode 100644 app/assets/stylesheets/scss/mobile/settings.scss

diff --git a/app/assets/stylesheets/scss/mobile.scss b/app/assets/stylesheets/scss/mobile.scss
deleted file mode 100644
index 8279eb21..00000000
--- a/app/assets/stylesheets/scss/mobile.scss
+++ /dev/null
@@ -1,4 +0,0 @@
-@media (max-width: 768px) {
-  @import "mobile/settings";
-  @import "mobile/profile";
-}
diff --git a/app/assets/stylesheets/scss/mobile/profile.scss b/app/assets/stylesheets/scss/mobile/profile.scss
deleted file mode 100644
index 3799ba3b..00000000
--- a/app/assets/stylesheets/scss/mobile/profile.scss
+++ /dev/null
@@ -1,76 +0,0 @@
-.container.headerable:not(.profile--no-header) {
-  margin-top: 0;
-  padding-top: 0;
-}
-
-#profile--header:not(.profile--no-header) {
-  min-width: 0px;
-  * {
-    min-width: 0px;
-  }
-}
-
-
-.container.headerable {
-  #profile-info {
-    box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.1);
-    margin-bottom: 15px;
-    
-    #profile.panel, #profile-stats.panel {
-      box-shadow: none;
-      margin-bottom: 0;
-    }
-
-    #profile.panel {
-      font-size: 0;
-
-      .profile--avatar {
-        width: 64px;
-        position: relative;
-        top: -15px;
-        left: 5px;
-        display: inline;
-      }
-
-      .profile--panel-badge {
-        display: inline-block;
-        padding: 0 5px;
-        vertical-align: top;
-        width: auto;
-        margin-top: -15px;
-        &:nth-child(2) {
-          margin-left: 5px;
-        }
-        .fa {
-          font-size: 15px;
-        }
-      }
-
-      .panel-body {
-        font-size: 15px;
-        .profile--panel-name {
-          margin-top: -75px;
-          margin-left: 60px
-        }
-      }
-    }
-
-    #profile-stats {
-      border: none;
-      .panel-heading {
-        display: none;
-      }
-
-      .panel-body {
-        font-size: 0px;
-        padding: 0;
-        .row {
-          width: 50%;
-          display: inline-block;
-          font-size: 12px;
-          margin: 0;
-        }
-      }
-    }
-  }
-}
diff --git a/app/assets/stylesheets/scss/mobile/settings.scss b/app/assets/stylesheets/scss/mobile/settings.scss
deleted file mode 100644
index a9b4f2cf..00000000
--- a/app/assets/stylesheets/scss/mobile/settings.scss
+++ /dev/null
@@ -1,11 +0,0 @@
-#profile-header-media {
-  clear: both;
-  display: block;
-  .pull-left {
-    float: none !important;
-    clear: both;
-    img {
-      width: 100%
-    }
-  }
-}

From 56bef6a4aa2d0477104944fd68519a3282529adb Mon Sep 17 00:00:00 2001
From: Andreas Nedbal <andy@pixelde.su>
Date: Wed, 29 Apr 2020 14:49:24 +0200
Subject: [PATCH 065/172] Remove unnecessary styles for "data" page

---
 app/assets/stylesheets/base.css.scss  |  2 --
 app/assets/stylesheets/scss/data.scss | 10 ------
 app/views/settings/_data.haml         | 52 +++++++++++++--------------
 3 files changed, 26 insertions(+), 38 deletions(-)
 delete mode 100644 app/assets/stylesheets/scss/data.scss

diff --git a/app/assets/stylesheets/base.css.scss b/app/assets/stylesheets/base.css.scss
index 3d8219b8..9f1470e1 100644
--- a/app/assets/stylesheets/base.css.scss
+++ b/app/assets/stylesheets/base.css.scss
@@ -17,8 +17,6 @@ body {
 @import "scss/user";
 @import "scss/notifications";
 @import "scss/groups";
-@import "scss/data";
-@import "scss/mobile";
 
 .j2-page {
   padding-top: 30px;
diff --git a/app/assets/stylesheets/scss/data.scss b/app/assets/stylesheets/scss/data.scss
deleted file mode 100644
index c4aa26c0..00000000
--- a/app/assets/stylesheets/scss/data.scss
+++ /dev/null
@@ -1,10 +0,0 @@
-.data-heading {
-  margin-bottom: 0;
-  font-weight: bold;
-  font-size: 1.1em;
-}
-
-.data-header-preview {
-  height: auto;
-  width: 100%;
-}
diff --git a/app/views/settings/_data.haml b/app/views/settings/_data.haml
index f0d277d9..b30acf87 100644
--- a/app/views/settings/_data.haml
+++ b/app/views/settings/_data.haml
@@ -8,31 +8,31 @@
       .col-md-6.col-sm-6.col-xs-12
         %h4 Profile
 
-        %p.data-heading User name
+        %p.font-weight-bold.mb-0 User name
         %p.text-muted= current_user.screen_name
 
-        %p.data-heading Display name
+        %p.font-weight-bold.mb-0 Display name
         %p.text-muted
           - if current_user.display_name.blank?
             None set!
           - else
             = current_user.display_name
 
-        %p.data-heading Bio
+        %p.font-weight-bold.mb-0 Bio
         %p.text-muted
           - if current_user.bio.blank?
             None set!
           - else
             = current_user.bio
 
-        %p.data-heading Location
+        %p.font-weight-bold.mb-0 Location
         %p.text-muted
           - if current_user.location.blank?
             None set!
           - else
             = current_user.location
 
-        %p.data-heading Website
+        %p.font-weight-bold.mb-0 Website
         %p.text-muted
           - if current_user.website.blank?
             None set!
@@ -40,7 +40,7 @@
             = current_user.website
       .col-md-6.col-sm-6.col-xs-12
         %h4 Pictures
-        %p.data-heading Profile picture
+        %p.font-weight-bold.mb-0 Profile picture
         .media
           .pull-left
             %img.profile--img{src: current_user.profile_picture.url(:medium)}
@@ -55,8 +55,8 @@
               %li
                 %a{href: current_user.profile_picture.url(:original)} Original image
 
-        %p.data-heading Header picture
-        %img.data-header-preview{src: current_user.profile_header.url(:mobile)}
+        %p.font-weight-bold.mb-0 Header picture
+        %img{src: current_user.profile_header.url(:mobile), style: 'width: 100%'}
         %p
           %a{href: current_user.profile_header.url(:mobile)} Mobile
           |
@@ -69,36 +69,36 @@
       .col-md-6.col-sm-6.col-xs-12
         %h4 Statistics
 
-        %p.data-heading Answers
+        %p.font-weight-bold.mb-0 Answers
         %p.text-muted= current_user.answered_count
 
-        %p.data-heading Questions
+        %p.font-weight-bold.mb-0 Questions
         %p.text-muted= current_user.asked_count
 
-        %p.data-heading Following
+        %p.font-weight-bold.mb-0 Following
         %p.text-muted= current_user.friend_count
 
-        %p.data-heading Followers
+        %p.font-weight-bold.mb-0 Followers
         %p.text-muted= current_user.follower_count
 
-        %p.data-heading Smiles
+        %p.font-weight-bold.mb-0 Smiles
         %p.text-muted= current_user.smiled_count + current_user.comment_smiled_count
 
-        %p.data-heading Comments
+        %p.font-weight-bold.mb-0 Comments
         %p.text-muted= current_user.commented_count
       .col-md-6.col-sm-6.col-xs-12
         %h4 Badges
 
-        %p.data-heading Admin
+        %p.font-weight-bold.mb-0 Admin
         %p
-          - if current_user.admin?
+          - if current_user.has_role? :administrator
             %span.label.label-success
               %i.fa.fa-fw.fa-check
           - else
             %span.label.label-danger
               %i.fa.fa-fw.fa-close
 
-        %p.data-heading Moderator
+        %p.font-weight-bold.mb-0 Moderator
         %p
           - if current_user.mod?
             %span.label.label-success
@@ -109,45 +109,45 @@
     .row
       .col-md-6.col-sm-6.col-xs-12
         %h3 IP
-        %p.data-heading Current Sign In
+        %p.font-weight-bold.mb-0 Current Sign In
         %p.text-muted= current_user.current_sign_in_ip
 
-        %p.data-heading Last Sign In
+        %p.font-weight-bold.mb-0 Last Sign In
         %p.text-muted= current_user.last_sign_in_ip
       .col-md-6.col-sm-6.col-xs-12
         %h3 Miscellaneous
 
-        %p.data-heading Locale
+        %p.font-weight-bold.mb-0 Locale
         %p.text-muted
           - if current_user.locale.blank?
             None set!
           - else
             = current_user.locale
 
-        %p.data-heading Sign In count
+        %p.font-weight-bold.mb-0 Sign In count
         %p.text-muted= current_user.sign_in_count
     %h3 Dates
     .row
       .col-md-6.col-sm-6.col-xs-12
         %h4 Sign In
 
-        %p.data-heading Current Sign In
+        %p.font-weight-bold.mb-0 Current Sign In
         %p.text-muted= localize(current_user.current_sign_in_at)
 
-        %p.data-heading Last Sign In
+        %p.font-weight-bold.mb-0 Last Sign In
         %p.text-muted= localize(current_user.last_sign_in_at)
 
-        %p.data-heading Remember me set at
+        %p.font-weight-bold.mb-0 Remember me set at
         %p.text-muted= localize(current_user.remember_created_at)
       .col-md-6.col-sm-6.col-xs-12
         %h4 Create/Update
 
-        %p.data-heading Account created
+        %p.font-weight-bold.mb-0 Account created
         %p.text-muted
           = localize(current_user.created_at)
           = " (#{time_ago_in_words(current_user.created_at)} ago)"
 
-        %p.data-heading Account last updated
+        %p.font-weight-bold.mb-0 Account last updated
         %p.text-muted
           = localize(current_user.updated_at)
           = " (#{time_ago_in_words(current_user.updated_at)} ago)"
\ No newline at end of file

From 0bf0b7d6da2f0c7355e6dadc3c51bb818070e36e Mon Sep 17 00:00:00 2001
From: Andreas Nedbal <andy@pixelde.su>
Date: Wed, 29 Apr 2020 14:49:43 +0200
Subject: [PATCH 066/172] Remove more "no-header" styles for profiles

---
 app/assets/stylesheets/scss/user.scss | 11 +----------
 1 file changed, 1 insertion(+), 10 deletions(-)

diff --git a/app/assets/stylesheets/scss/user.scss b/app/assets/stylesheets/scss/user.scss
index 781ad48d..507ce9c7 100644
--- a/app/assets/stylesheets/scss/user.scss
+++ b/app/assets/stylesheets/scss/user.scss
@@ -37,10 +37,6 @@
   max-height: 440px;
 }
 
-#profile--header.profile--no-header {
-  position: absolute;
-}
-
 .profile--panel .panel-heading {
   color: theme-color('primary');
   border-bottom: 2px solid theme-color('primary');
@@ -104,11 +100,6 @@ $colours: danger theme-color('danger'),
   text-decoration: line-through !important;
 }
 
-.profile--panel-push-inner:not(.profile--no-header) {
-  display: block;
-  height: 60px;
-}
-
 .profile--header-img {
   display: block;
   min-width: 900px;
@@ -116,7 +107,7 @@ $colours: danger theme-color('danger'),
 }
 
 @media(min-width: 767px) {
-  .container.headerable:not(.profile--no-header) {
+  .container.headerable {
     padding-top: 0;
     margin-top: -30px;
   }

From cc5489c35784f604c12db6dbc64e60d1dfdd05ed Mon Sep 17 00:00:00 2001
From: Andreas Nedbal <andy@pixelde.su>
Date: Wed, 29 Apr 2020 15:26:50 +0200
Subject: [PATCH 067/172] Remove group styles and adjust group modal layout

---
 app/assets/stylesheets/base.css.scss    |  1 -
 app/assets/stylesheets/scss/groups.scss | 14 --------------
 app/views/modal/_group.haml             |  4 ++--
 app/views/modal/group/_item.haml        |  8 +++++---
 4 files changed, 7 insertions(+), 20 deletions(-)
 delete mode 100644 app/assets/stylesheets/scss/groups.scss

diff --git a/app/assets/stylesheets/base.css.scss b/app/assets/stylesheets/base.css.scss
index 9f1470e1..29a67498 100644
--- a/app/assets/stylesheets/base.css.scss
+++ b/app/assets/stylesheets/base.css.scss
@@ -16,7 +16,6 @@ body {
 @import "scss/panel";
 @import "scss/user";
 @import "scss/notifications";
-@import "scss/groups";
 
 .j2-page {
   padding-top: 30px;
diff --git a/app/assets/stylesheets/scss/groups.scss b/app/assets/stylesheets/scss/groups.scss
deleted file mode 100644
index f8910279..00000000
--- a/app/assets/stylesheets/scss/groups.scss
+++ /dev/null
@@ -1,14 +0,0 @@
-.groups--list .list-group-item-heading {
-  margin-top: 0px;
-  margin-bottom: 0px;
-  line-height: 1.3;
-}
-
-.groups--list .list-group-item {
-  padding: 5px 7px;
-}
-
-a[role="tab"] {
-  outline: 0px none;
-  border: none !important;
-}
\ No newline at end of file
diff --git a/app/views/modal/_group.haml b/app/views/modal/_group.haml
index ecb94df7..4b7b45c4 100644
--- a/app/views/modal/_group.haml
+++ b/app/views/modal/_group.haml
@@ -7,7 +7,7 @@
           %span{"aria-hidden" => "true"} ×
           %span.sr-only= t 'views.actions.close'
       %div{role: "tabpanel"}
-        %ul.nav.nav-tabs{role: "tablist"}
+        %ul.nav.nav-tabs.mt-1{role: "tablist"}
           %li.nav-item{role: "presentation"}
             %a.nav-link.active{href: "#grouplist", aria: {controls: "grouplist"}, data: {toggle: "tab"}, role: "tab"}
               = t 'views.modal.group.tabs.main'
@@ -17,7 +17,7 @@
 
         .tab-content
           .tab-pane.active{role:"tabpanel", id: "grouplist"}
-            %ul.list-group.groups--list
+            %ul.list-group
               - current_user.groups.each do |group|
                 = render 'modal/group/item', group: group, user: @user
           .tab-pane{role:"tabpanel", id: "create"}
diff --git a/app/views/modal/group/_item.haml b/app/views/modal/group/_item.haml
index 820d88d8..043810ce 100644
--- a/app/views/modal/group/_item.haml
+++ b/app/views/modal/group/_item.haml
@@ -1,10 +1,12 @@
 %li.list-group-item{id: "group-#{group.name}"}
   .media
-    .pull-left.j2-table
-      %input.input--center{type: :checkbox, name: 'gm-group-check', data: { group: group.name, user: user.screen_name }, checked: user.member_of?(group), autocomplete: 'off'}
+    .pull-left
+      .custom-control.custom-checkbox
+        %input.custom-control-input{type: :checkbox, id: "groupCheck#{group.id}", name: 'gm-group-check', data: { group: group.name, user: user.screen_name }, checked: user.member_of?(group), autocomplete: 'off'}
+        %label.custom-control-label{for: "groupCheck#{group.id}"}
     .media-body
       .list-group-item-heading= group.display_name
-      .list-group-item-text.text-muted.j2-up
+      .list-group-item-text.text-muted
         %span{id: "#{group.name}-members"}= group.members.count
         = t 'views.modal.group.members'
         ·

From 77b650ed860af294a806e61cc313d6eab858c829 Mon Sep 17 00:00:00 2001
From: Andreas Nedbal <andy@pixelde.su>
Date: Wed, 29 Apr 2020 15:49:13 +0200
Subject: [PATCH 068/172] Remove unused "about--moderator" styles

---
 app/assets/stylesheets/base.css.scss | 15 ---------------
 1 file changed, 15 deletions(-)

diff --git a/app/assets/stylesheets/base.css.scss b/app/assets/stylesheets/base.css.scss
index 29a67498..4cb701f0 100644
--- a/app/assets/stylesheets/base.css.scss
+++ b/app/assets/stylesheets/base.css.scss
@@ -36,21 +36,6 @@ body {
 .j2-lh {
   margin-top: 48px;
 }
-.about--moderator {
-  padding-left: 0px;
-}
-
-.about--moderator li {
-  list-style: none;
-}
-
-.about--moderator a {
-  text-decoration: none;
-}
-
-.about--moderator a:hover {
-  text-decoration: none;
-}
 
 .j2-up {
   text-transform: uppercase;

From c4c0c44eec734666c999a1cc1cb0e0b219ee2340 Mon Sep 17 00:00:00 2001
From: Andreas Nedbal <andy@pixelde.su>
Date: Wed, 29 Apr 2020 18:15:52 +0200
Subject: [PATCH 069/172] Remove old navbar styles and refactor navigation

- Create components/buttons for btn-fab element
- Create components/avatars for defined avatar size classes and behaviour
---
 app/assets/stylesheets/_variables.scss        |  10 ++
 app/assets/stylesheets/application.css.scss   |   2 +
 app/assets/stylesheets/base.css.scss          |   1 -
 .../stylesheets/components/_avatars.scss      |  12 ++
 .../stylesheets/components/_buttons.scss      |  19 +++
 app/assets/stylesheets/scss/navbar.scss       | 158 ------------------
 app/views/navigation/main/_profile.haml       |   6 +-
 7 files changed, 46 insertions(+), 162 deletions(-)
 create mode 100644 app/assets/stylesheets/components/_avatars.scss
 create mode 100644 app/assets/stylesheets/components/_buttons.scss
 delete mode 100644 app/assets/stylesheets/scss/navbar.scss

diff --git a/app/assets/stylesheets/_variables.scss b/app/assets/stylesheets/_variables.scss
index ccd6fad1..af33971f 100644
--- a/app/assets/stylesheets/_variables.scss
+++ b/app/assets/stylesheets/_variables.scss
@@ -19,6 +19,16 @@ $colorNames: (
   "success"
 );
 
+// Avatar variables
+$avatar-border-radius: 4px;
+
+$avatar-sizes: (
+  "xs": 20px,
+  "sm": 30px,
+  "md": 40px,
+  "lg": 80px
+);
+
 :root {
   --background: #f0edf4;
   --card-bg: #ffffff;
diff --git a/app/assets/stylesheets/application.css.scss b/app/assets/stylesheets/application.css.scss
index f9f299cd..62025e44 100644
--- a/app/assets/stylesheets/application.css.scss
+++ b/app/assets/stylesheets/application.css.scss
@@ -98,6 +98,8 @@ $navbar-inverse-toggle-border-color: #512da8;
  */
 
 @import
+"components/avatars",
+"components/buttons",
 "components/jumbotron";
 
 body { padding-top: 50px; }
diff --git a/app/assets/stylesheets/base.css.scss b/app/assets/stylesheets/base.css.scss
index 4cb701f0..9e9abbed 100644
--- a/app/assets/stylesheets/base.css.scss
+++ b/app/assets/stylesheets/base.css.scss
@@ -12,7 +12,6 @@ body {
 @import "scss/answerbox";
 @import "scss/comments";
 @import "scss/entry";
-@import "scss/navbar";
 @import "scss/panel";
 @import "scss/user";
 @import "scss/notifications";
diff --git a/app/assets/stylesheets/components/_avatars.scss b/app/assets/stylesheets/components/_avatars.scss
new file mode 100644
index 00000000..6d2bf1cf
--- /dev/null
+++ b/app/assets/stylesheets/components/_avatars.scss
@@ -0,0 +1,12 @@
+[class^="avatar-"] {
+  border-radius: $avatar-border-radius;
+}
+
+@each $name, $size in $avatar-sizes {
+  .avatar-#{$name} {
+    min-height: $size;
+    min-width: $size;
+    height: $size;
+    width: $size;
+  }
+}
\ No newline at end of file
diff --git a/app/assets/stylesheets/components/_buttons.scss b/app/assets/stylesheets/components/_buttons.scss
new file mode 100644
index 00000000..142b73fb
--- /dev/null
+++ b/app/assets/stylesheets/components/_buttons.scss
@@ -0,0 +1,19 @@
+.btn-fab {
+  border-radius: 100%;
+  box-shadow: 0px 1px 6px rgba(0, 0, 0, 0.12), 0px 1px 6px rgba(0, 0, 0, 0.12);
+  margin: 0px;
+  padding: 3px 5px 4px 8px;
+  font-size: 26px;
+  width: 56px;
+  height: 56px;
+  transition: box-shadow 0.28s cubic-bezier(0.4, 0, 0.2, 1) 0s;
+  outline: medium none !important;
+  text-transform: uppercase;
+  text-decoration: none;
+  position: fixed;
+  bottom: 0px;
+  right: 0px;
+  margin-right: 7px;
+  margin-bottom: 7px;
+  z-index: 99;
+}
\ No newline at end of file
diff --git a/app/assets/stylesheets/scss/navbar.scss b/app/assets/stylesheets/scss/navbar.scss
deleted file mode 100644
index 6dd81f30..00000000
--- a/app/assets/stylesheets/scss/navbar.scss
+++ /dev/null
@@ -1,158 +0,0 @@
-.navbar .nav .badge {
-  padding: 3px 6px 3px;
-  background-color: $navbar-inverse-link-active-bg;
-  color: #fff;
-}
-
-.navbar .nav .active .badge, li.dropdown.open a.dropdown-toggle span.badge {
-  padding: 3px 6px 3px;
-  background-color: $navbar-inverse-bg;
-  color: #fff;
-}
-
-.navbar--inbox-animation {
-  animation: animationFrames ease-in-out 1.5s;
-  animation-iteration-count: infinite;
-  -webkit-animation: animationFrames ease-in-out 1.5s;
-  -webkit-animation-iteration-count: infinite;
-  -moz-animation: animationFrames ease-in-out 1.5s;
-  -moz-animation-iteration-count: infinite;
-  -o-animation: animationFrames ease-in-out 1.5s;
-  -o-animation-iteration-count: infinite;
-  -ms-animation: animationFrames ease-in-out 1.5s;
-  -ms-animation-iteration-count: infinite;
-}
-
-@keyframes animationFrames{
-  0% {
-    background-color: #fff;
-  }
-  100% {
-    background-color: $navbar-inverse-toggle-border-color;
-  }
-}
-
-@-moz-keyframes animationFrames{
-  0% {
-    background-color: #fff;
-  }
-  100% {
-    background-color: $navbar-inverse-toggle-border-color;
-  }
-}
-
-@-webkit-keyframes animationFrames {
-  0% {
-    background-color: #fff;
-  }
-  100% {
-    background-color: $navbar-inverse-toggle-border-color;
-  }
-}
-
-@-o-keyframes animationFrames {
-  0% {
-    background-color: #fff;
-  }
-  100% {
-    background-color: $navbar-inverse-toggle-border-color;
-  }
-}
-
-@-ms-keyframes animationFrames {
-  0% {
-    background-color: #fff;
-  }
-  100% {
-    background-color: $navbar-inverse-toggle-border-color;
-  }
-}
-
-.btn-fab {
-  border-radius: 100%;
-  box-shadow: 0px 1px 6px rgba(0, 0, 0, 0.12), 0px 1px 6px rgba(0, 0, 0, 0.12);
-  margin: 0px;
-  padding: 3px 5px 4px 8px;
-  font-size: 26px;
-  width: 56px;
-  height: 56px;
-  transition: box-shadow 0.28s cubic-bezier(0.4, 0, 0.2, 1) 0s;
-  outline: medium none !important;
-  text-transform: uppercase;
-  text-decoration: none;
-  position: fixed;
-  bottom: 0px;
-  right: 0px;
-  margin-right: 7px;
-  margin-bottom: 7px;
-  z-index: 99;
-}
-
-.profile--dropdown {
-  min-width: 220px;
-  margin-top: 0px !important;
-}
-
-.profile--dropdown-media {
-  padding: 3px 15px;
-}
-
-.profile--dropdown-img {
-  min-height: 45px;
-  min-width: 45px;
-  height: 45px;
-  width: 45px;
-}
-
-.profile--dropdown-username {
-  font-weight: 700;
-  font-size: 1.2em;
-  line-height: 1.33em;
-  margin-top: 10px;
-}
-
-.profile--dropdown-displayname {
-  font-weight: 700;
-  font-size: 1.2em;
-  line-height: 1.33em;
-  margin-top: 2px;
-}
-
-.profile--image-dropdown > a {
-  padding: 0px !important;
-}
-
-.profile--image-avatar {
-  min-height: 40px;
-  min-width: 40px;
-  height: 40px;
-  width: 40px;
-  border-radius: 4px;
-}
-
-.navbar-inverse {
-  border: none;
-}
-
-@media (max-width: 768px) {
-  nav.navbar .nav {
-    margin-bottom: 0;
-    margin-top: 0;
-
-    & > li {
-      &.active a {
-        background-color: $navbar-inverse-link-active-bg-mobile !important;
-      }
-
-      &.dropdown.profile--image-dropdown a .visible-xs {
-        padding-left: 15px;
-        line-height: 40px;
-        margin: 0;
-      }
-    }
-  }
-
-  body {
-    padding-bottom: 60px;
-  }
-}
diff --git a/app/views/navigation/main/_profile.haml b/app/views/navigation/main/_profile.haml
index f19af864..2aef7ad5 100644
--- a/app/views/navigation/main/_profile.haml
+++ b/app/views/navigation/main/_profile.haml
@@ -1,7 +1,7 @@
 %li.nav-item.dropdown.profile--image-dropdown
-  %a.nav-link.dropdown-toggle{href: "#", "data-toggle" => "dropdown"}
-    %img.profile--image-avatar.d-none.d-sm-inline{src: current_user.profile_picture.url(:small)}
-    %span.d-none.d-sm-inline.d-md-none
+  %a.nav-link.dropdown-toggle.p-sm-0{href: "#", "data-toggle" => "dropdown"}
+    %img.avatar-md.d-none.d-sm-inline{src: current_user.profile_picture.url(:small)}
+    %span.d-inline.d-sm-none
       = current_user.screen_name
       %b.caret
   .dropdown-menu

From e8bbf2c2f1be2545bcd4189df4e4f3427118ed33 Mon Sep 17 00:00:00 2001
From: Andreas Nedbal <andy@pixelde.su>
Date: Wed, 29 Apr 2020 18:17:10 +0200
Subject: [PATCH 070/172] Adjust casing of $colorNames variable

---
 app/assets/stylesheets/_variables.scss         | 2 +-
 app/assets/stylesheets/overrides/_alerts.scss  | 2 +-
 app/assets/stylesheets/overrides/_buttons.scss | 2 +-
 app/assets/stylesheets/overrides/_colors.scss  | 2 +-
 4 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/app/assets/stylesheets/_variables.scss b/app/assets/stylesheets/_variables.scss
index af33971f..819418b6 100644
--- a/app/assets/stylesheets/_variables.scss
+++ b/app/assets/stylesheets/_variables.scss
@@ -11,7 +11,7 @@ $list-group-border-width: 0;
 $nprogress-color: lighten($navbar-inverse-bg, 25%);
 
 // Color names for theme generation
-$colorNames: (
+$color-names: (
   "primary", 
   "danger",
   "warning",
diff --git a/app/assets/stylesheets/overrides/_alerts.scss b/app/assets/stylesheets/overrides/_alerts.scss
index ab27cb79..79be6fee 100644
--- a/app/assets/stylesheets/overrides/_alerts.scss
+++ b/app/assets/stylesheets/overrides/_alerts.scss
@@ -1,4 +1,4 @@
-@each $color in $colorNames {
+@each $color in $color-names {
   .alert-#{$color} {
     color: RGB(var(--#{$color}-text));
     background-color: var(--#{$color});
diff --git a/app/assets/stylesheets/overrides/_buttons.scss b/app/assets/stylesheets/overrides/_buttons.scss
index 9ee4ab69..08200b67 100644
--- a/app/assets/stylesheets/overrides/_buttons.scss
+++ b/app/assets/stylesheets/overrides/_buttons.scss
@@ -1,4 +1,4 @@
-@each $color in $colorNames {
+@each $color in $color-names {
   .btn-#{$color} {
     background-color: var(--#{$color});
     border-color: var(--#{$color});
diff --git a/app/assets/stylesheets/overrides/_colors.scss b/app/assets/stylesheets/overrides/_colors.scss
index e18d8dd9..30b0ea44 100644
--- a/app/assets/stylesheets/overrides/_colors.scss
+++ b/app/assets/stylesheets/overrides/_colors.scss
@@ -1,4 +1,4 @@
-@each $color in $colorNames {
+@each $color in $color-names {
   .bg-#{$color} {
     background-color: var(--#{$color}) !important;
   }

From d61fa91f0d5926dc383f26495619459b19d54a7e Mon Sep 17 00:00:00 2001
From: Andreas Nedbal <andy@pixelde.su>
Date: Thu, 30 Apr 2020 00:44:43 +0200
Subject: [PATCH 071/172] Refactor question styles

- Created styles in component/question
- Removed old styles from scss/panel
- Moved question partial to question controller resource, as it is only used there, not shared
---
 app/assets/stylesheets/application.css.scss   |  3 ++-
 .../stylesheets/components/_question.scss     | 14 +++++++++++
 app/assets/stylesheets/scss/panel.scss        | 25 -------------------
 .../_question.haml}                           |  2 +-
 .../question/{show.html.haml => show.haml}    |  6 ++---
 5 files changed, 19 insertions(+), 31 deletions(-)
 create mode 100644 app/assets/stylesheets/components/_question.scss
 rename app/views/{shared/_question_header.haml => question/_question.haml} (92%)
 rename app/views/question/{show.html.haml => show.haml} (84%)

diff --git a/app/assets/stylesheets/application.css.scss b/app/assets/stylesheets/application.css.scss
index 62025e44..6401bf6b 100644
--- a/app/assets/stylesheets/application.css.scss
+++ b/app/assets/stylesheets/application.css.scss
@@ -100,7 +100,8 @@ $navbar-inverse-toggle-border-color: #512da8;
 @import
 "components/avatars",
 "components/buttons",
-"components/jumbotron";
+"components/jumbotron",
+"components/question";
 
 body { padding-top: 50px; }
 
diff --git a/app/assets/stylesheets/components/_question.scss b/app/assets/stylesheets/components/_question.scss
new file mode 100644
index 00000000..3b2af72b
--- /dev/null
+++ b/app/assets/stylesheets/components/_question.scss
@@ -0,0 +1,14 @@
+.question {
+  &--fixed {
+    position: fixed;
+    width: 100%;
+    z-index: 999;
+  }
+
+  &--hidden {
+    visibility: hidden;
+    position: relative;
+    box-shadow: none;
+    z-index: -1;
+  }
+}
\ No newline at end of file
diff --git a/app/assets/stylesheets/scss/panel.scss b/app/assets/stylesheets/scss/panel.scss
index 91c39e4f..7ae74344 100644
--- a/app/assets/stylesheets/scss/panel.scss
+++ b/app/assets/stylesheets/scss/panel.scss
@@ -12,28 +12,3 @@
 .panel-primary .answerbox--question-text {
   color: #fff;
 }
-
-#questions .panel-body .media {
-  &, .media-body {
-    overflow: visible;
-  }
-}
-
-.panel-question {
-  position: fixed;
-  border-top: 1px solid #fff;
-  width: 100%;
-  z-index: 999;
-  border-color: #fff;
-}
-
-.panel-question.question-hidden {
-  visibility: hidden;
-  position: relative;
-  box-shadow: none;
-  z-index: -1;
-}
-
-.answerbox--question-media, .question-media, .question-body {
-  overflow: visible !important;
-}
diff --git a/app/views/shared/_question_header.haml b/app/views/question/_question.haml
similarity index 92%
rename from app/views/shared/_question_header.haml
rename to app/views/question/_question.haml
index 1eadf01d..456d79fa 100644
--- a/app/views/shared/_question_header.haml
+++ b/app/views/question/_question.haml
@@ -1,4 +1,4 @@
-.card.card-question{class: if hidden then 'question-hidden' end, tabindex: if hidden then '-1' end, aria: { hidden: if hidden then :true end }}
+.card.question--fixed{class: if hidden then 'question--hidden' end, tabindex: if hidden then '-1' end, aria: { hidden: if hidden then :true end }}
   .container
     .card-body
       .media.question-media
diff --git a/app/views/question/show.html.haml b/app/views/question/show.haml
similarity index 84%
rename from app/views/question/show.html.haml
rename to app/views/question/show.haml
index 224bb758..3460c3fe 100644
--- a/app/views/question/show.html.haml
+++ b/app/views/question/show.haml
@@ -1,9 +1,7 @@
 - provide(:title, question_title(@question))
-= render 'shared/question_header', question: @question, hidden: false
-= render 'shared/question_header', question: @question, hidden: true
+= render 'question', question: @question, hidden: false
+= render 'question', question: @question, hidden: true
 .container.question-page
-  / TODO: make this pretty (it's currently C-c'd straight from shared/_answerbox)
-
   #answers
     - @answers.each do |a|
       = render 'answerbox', a: a, show_question: false

From 3f0d84a4ad40d7f686fc0ebec08344fb68a28e13 Mon Sep 17 00:00:00 2001
From: Andreas Nedbal <andy@pixelde.su>
Date: Thu, 30 Apr 2020 20:33:05 +0200
Subject: [PATCH 072/172] Re-add answer/show template

---
 app/views/answer/show.haml | 3 +++
 1 file changed, 3 insertions(+)
 create mode 100644 app/views/answer/show.haml

diff --git a/app/views/answer/show.haml b/app/views/answer/show.haml
new file mode 100644
index 00000000..f929089c
--- /dev/null
+++ b/app/views/answer/show.haml
@@ -0,0 +1,3 @@
+- provide(:title, answer_title(@answer))
+.container.j2-page
+  = render 'answerbox', a: @answer
\ No newline at end of file

From 7bd7b91ea47d5c7abd273e60870f1bb963589451 Mon Sep 17 00:00:00 2001
From: Andreas Nedbal <andy@pixelde.su>
Date: Thu, 30 Apr 2020 20:35:22 +0200
Subject: [PATCH 073/172] Refactor and redesign user profile section

---
 app/assets/stylesheets/_variables.scss        |   3 +-
 app/assets/stylesheets/application.css.scss   |   1 +
 .../stylesheets/components/_profile.scss      |  62 ++++++++++
 app/assets/stylesheets/scss/user.scss         | 115 ------------------
 app/views/layouts/user/profile.haml           |  12 +-
 app/views/user/_actions.haml                  |  32 +++++
 app/views/user/_actions.html.haml             |  40 ------
 app/views/user/_profile.haml                  |  38 ++++++
 app/views/user/_profile_info.html.haml        |  39 ------
 9 files changed, 141 insertions(+), 201 deletions(-)
 create mode 100644 app/assets/stylesheets/components/_profile.scss
 create mode 100644 app/views/user/_actions.haml
 delete mode 100644 app/views/user/_actions.html.haml
 create mode 100644 app/views/user/_profile.haml
 delete mode 100644 app/views/user/_profile_info.html.haml

diff --git a/app/assets/stylesheets/_variables.scss b/app/assets/stylesheets/_variables.scss
index 819418b6..f57f46c3 100644
--- a/app/assets/stylesheets/_variables.scss
+++ b/app/assets/stylesheets/_variables.scss
@@ -26,7 +26,8 @@ $avatar-sizes: (
   "xs": 20px,
   "sm": 30px,
   "md": 40px,
-  "lg": 80px
+  "lg": 80px,
+  "xl": 160px,
 );
 
 :root {
diff --git a/app/assets/stylesheets/application.css.scss b/app/assets/stylesheets/application.css.scss
index 6401bf6b..eb59637c 100644
--- a/app/assets/stylesheets/application.css.scss
+++ b/app/assets/stylesheets/application.css.scss
@@ -101,6 +101,7 @@ $navbar-inverse-toggle-border-color: #512da8;
 "components/avatars",
 "components/buttons",
 "components/jumbotron",
+"components/profile",
 "components/question";
 
 body { padding-top: 50px; }
diff --git a/app/assets/stylesheets/components/_profile.scss b/app/assets/stylesheets/components/_profile.scss
new file mode 100644
index 00000000..5674db9a
--- /dev/null
+++ b/app/assets/stylesheets/components/_profile.scss
@@ -0,0 +1,62 @@
+.profile {
+  &__avatar {
+    display: block;
+    width: map-get($avatar-sizes, "xl");
+    height: map-get($avatar-sizes, "xl");
+    margin: -(map-get($avatar-sizes, "xl") / 2) auto 0;
+    border-radius: $avatar-border-radius;
+    box-shadow: $box-shadow;
+  }
+
+  &__header-container {
+    margin-bottom: map-get($spacers, 3);
+    position: relative;
+    z-index: -1;
+    width: 100%;
+    overflow: hidden;
+    background: linear-gradient(
+      to top,
+      rgba(0, 0, 0, 0.10),
+      rgba(0, 0, 0, 0.10)
+    ) var(--primary);
+    max-height: 440px;
+  }
+
+  &__header-image {
+    display: block;
+    min-width: 900px;
+    width: 100%;
+  }
+
+  &__name,
+  &__biography,
+  &__website,
+  &__location {
+    margin-bottom: map-get($spacers, 3);
+  }
+
+  &__actions,
+  &__biography {
+    margin-top: map-get($spacers, 3);
+  }
+
+  &__display-name {
+    font-weight: bold;
+    font-size: 1.1em;
+  }
+
+  &__screen-name {
+    &:only-child {
+      @extend .profile__display-name;
+    }
+
+    &:not(:only-child) {
+      font-size: 0.9em;
+      color: RGB(var(--muted-text));
+    }
+  }
+}
+
+.user--banned {
+  text-decoration: line-through !important;
+}
\ No newline at end of file
diff --git a/app/assets/stylesheets/scss/user.scss b/app/assets/stylesheets/scss/user.scss
index 507ce9c7..ea9dada6 100644
--- a/app/assets/stylesheets/scss/user.scss
+++ b/app/assets/stylesheets/scss/user.scss
@@ -1,118 +1,3 @@
-.profile--img {
-  min-height: 80px;
-  min-width: 80px;
-  height: 80px;
-  width: 8px;
-}
-
-.profile--displayname {
-  font-weight: 700;
-  font-size: 1.2em;
-  margin-top: -0.165em;
-  line-height: 1.33em;
-}
-
-.profile--username {
-  font-size: 0.9em;
-  color: rgba(0, 0, 0, 0.4);
-  line-height: 1.33;
-}
-
-.profile--followtag {
-  margin: 0px 0px 0.2em;
-}
-
-.profile--text {
-  margin-bottom: 2px;
-  line-height: 1.5em;
-  margin-top: 0.65em;
-}
-
-#profile--header {
-  position: relative;
-  z-index: -1;
-  width: 100%;
-  overflow: hidden;
-  background-color: darken($navbar-inverse-bg, 10%);
-  max-height: 440px;
-}
-
-.profile--panel .panel-heading {
-  color: theme-color('primary');
-  border-bottom: 2px solid theme-color('primary');
-  background-color: #fff;
-  text-transform: uppercase;
-}
-
-.profile--panel .panel-body {
-  padding-top: 0px;
-}
-
-.inbox--panel .panel-heading {
-  color: theme-color('info');
-  border-bottom: 2px solid theme-color('info');
-  background-color: #fff;
-  text-transform: uppercase;
-}
-
-.warning--panel .panel-heading {
-  color: theme-color('danger');
-  border-bottom: 2px solid theme-color('danger');
-  background-color: #fff;
-  text-transform: uppercase;
-}
-
-.profile--follow-btn {
-  margin-top: 5px;
-}
-
-.profile--avatar {
-  width: 100%;
-  height: auto;
-  border: medium none;
-}
-
-.profile--panel-badge {
-  width: 100%;
-  text-align: center;
-  padding-top: 0.15em;
-  padding-bottom: 0.15em;
-  text-transform: uppercase;
-  font-weight: bold;
-  margin: 0;
-  color: #fff;
-}
-
-$colours: danger theme-color('danger'),
-          default #BBB,
-          success theme-color('success'),
-          warning theme-color('warning'),
-          primary theme-color('primary'),
-          info #2980b9;
-
-@each $colour in $colours {
-  .panel-badge-#{nth($colour, 1)} {
-    background-color: nth($colour, 2);
-  }
-}
-
-.user--banned {
-  text-decoration: line-through !important;
-}
-
-.profile--header-img {
-  display: block;
-  min-width: 900px;
-  width: 100%;
-}
-
-@media(min-width: 767px) {
-  .container.headerable {
-    padding-top: 0;
-    margin-top: -30px;
-  }
-}
-
 .userbox--header {
   width: 100%;
   height: auto;
diff --git a/app/views/layouts/user/profile.haml b/app/views/layouts/user/profile.haml
index 7d35c155..c551a4c3 100644
--- a/app/views/layouts/user/profile.haml
+++ b/app/views/layouts/user/profile.haml
@@ -1,11 +1,11 @@
-#profile--header
-  %img.profile--header-img{src: @user.profile_header.url(:web)}
-.container.j2-page.headerable
+.profile__header-container
+  %img.profile__header-image{src: @user.profile_header.url(:web)}
+.container
   .row
-    #profile-info.col-md-3.col-xs-12.col-sm-4.j2-col-reset
-      = render 'user/profile_info'
+    .col-md-3.col-xs-12.col-sm-4
+      = render 'user/profile'
       .d-none.d-sm-block= render 'shared/links'
-    .col-md-9.col-xs-12.col-sm-8.j2-col-reset
+    .col-md-9.col-xs-12.col-sm-8
       = render "questionbox"
       = render "tabs/profile"
       = yield
diff --git a/app/views/user/_actions.haml b/app/views/user/_actions.haml
new file mode 100644
index 00000000..f257fb09
--- /dev/null
+++ b/app/views/user/_actions.haml
@@ -0,0 +1,32 @@
+.profile__actions
+  - if user_signed_in?
+    - type ||= :nil
+    - if user == current_user
+      %a.btn.btn-dark.btn-block{href: edit_user_profile_path} Edit profile
+    - else
+      - if current_user.following? user
+        %button#editprofile.btn.btn-primary.btn-block{type: :button, name: 'user-action', data: { action: :unfollow, type: type, target: user.screen_name }}
+          = t 'views.actions.unfollow'
+      - else
+        %button#editprofile.btn.btn-primary.btn-block{type: :button, name: 'user-action', data: { action: :follow, type: type, target: user.screen_name }}
+          = t 'views.actions.follow'
+    - unless user == current_user
+      .btn-group.btn-block
+        %button.btn.btn-light.btn-block.btn-sm.dropdown-toggle{data: { toggle: :dropdown }, aria: { expanded: :false }}
+          = t 'views.actions.title'
+          %span.caret
+        .dropdown-menu
+          %a.dropdown-item.d-block.d-sm-none{href: '#', data: { target: "#modal-group-memberships", toggle: :modal }}
+            %i.fa.fa-users
+            = t 'views.actions.group'
+          %a.dropdown-item{href: '#', data: { action: 'report-user', target: user.screen_name }}
+            %i.fa.fa-exclamation-triangle
+            = t 'views.actions.report'
+          - if current_user.mod?
+            %a.dropdown-item{href: '#', data: { target: "#modal-privileges", toggle: :modal }}
+              %i.fa.fa-wrench
+              = raw t('views.actions.privilege', user: user.screen_name)
+            - unless user.has_role?(:administrator)
+              %a.dropdown-item{href: '#', data: { target: "#modal-ban", toggle: :modal }}
+                %i.fa.fa-ban
+                = t 'views.actions.ban'
diff --git a/app/views/user/_actions.html.haml b/app/views/user/_actions.html.haml
deleted file mode 100644
index 7f3ae676..00000000
--- a/app/views/user/_actions.html.haml
+++ /dev/null
@@ -1,40 +0,0 @@
-- if user_signed_in?
-  - type ||= :nil
-  - if user == current_user
-    %a.btn.btn-default.btn-block.profile--follow-btn{href: edit_user_profile_path} Edit profile
-  - else
-    - if current_user.following? user
-      %button#editprofile.btn.btn-default.btn-block.profile--follow-btn{type: :button, name: 'user-action', data: { action: :unfollow, type: type, target: user.screen_name }}
-        = t 'views.actions.unfollow'
-    - else
-      %button#editprofile.btn.btn-primary.btn-block.profile--follow-btn{type: :button, name: 'user-action', data: { action: :follow, type: type, target: user.screen_name }}
-        = t 'views.actions.follow'
-  - unless user == current_user
-    .btn-group.btn-block
-      %button.btn.btn-default.btn-block.btn-sm.dropdown-toggle{data: { toggle: :dropdown }, aria: { expanded: :false }}
-        = t 'views.actions.title'
-        %span.caret
-      %ul.dropdown-menu
-        /
-          %li
-            %a{href: '#', name: 'user-action', data: { action: :block, type: type, target: user.screen_name }}
-              %i.fa.fa-minus-circle
-              Block
-        %li.visible-xs
-          %a{href: '#', data: { target: "#modal-group-memberships", toggle: :modal }}
-            %i.fa.fa-users
-            = t 'views.actions.group'
-        %li
-          %a{href: '#', data: { action: 'report-user', target: user.screen_name }}
-            %i.fa.fa-exclamation-triangle
-            = t 'views.actions.report'
-        - if current_user.mod?
-          %li
-            %a{href: '#', data: { target: "#modal-privileges", toggle: :modal }}
-              %i.fa.fa-wrench
-              = raw t('views.actions.privilege', user: user.screen_name)
-          - unless user.has_role?(:administrator)
-            %li
-              %a{href: '#', data: { target: "#modal-ban", toggle: :modal }}
-                %i.fa.fa-ban
-                = t 'views.actions.ban'
diff --git a/app/views/user/_profile.haml b/app/views/user/_profile.haml
new file mode 100644
index 00000000..55783cd2
--- /dev/null
+++ b/app/views/user/_profile.haml
@@ -0,0 +1,38 @@
+.card#profile
+  %img.profile__avatar{src: @user.profile_picture.url(:large)}
+  .card-body
+    .profile__name
+      - unless @user.display_name.blank?
+        .profile__display-name
+          = @user.display_name
+      .profile__screen-name
+        = @user.screen_name
+    .profile__badge-container
+      - if @user.banned?
+        %span.badge.badge-dark
+          %i.fa.fa-fw.fa-ban
+          = t 'views.user.title.banned'
+      - if @user.following? current_user
+        .badge.badge-light
+          = t 'views.user.follows_you'
+      - if user_signed_in? && current_user.has_role?(:administrator)
+        - if @user.has_role?(:administrator)
+          %span.badge.badge-danger
+            %i.fa.fa-fw.fa-flask
+            = t 'views.user.title.admin'
+        - if @user.has_role?(:moderator)
+          %span.badge.badge-success
+            %i.fa.fa-fw.fa-users
+            = t 'views.user.title.moderator'
+    - unless @user.bio.blank?
+      .profile__biography
+        = markdown @user.bio
+    - unless @user.website.blank?
+      .profile__website
+        %i.fa.fa-fw.fa-globe
+        %a{href: @user.website}= @user.display_website
+    - unless @user.location.blank?
+      .profile__location
+        %i.fa.fa-fw.fa-location-arrow
+        = @user.location
+    = render 'user/actions', user: @user, type: :follower
diff --git a/app/views/user/_profile_info.html.haml b/app/views/user/_profile_info.html.haml
deleted file mode 100644
index 29a833e7..00000000
--- a/app/views/user/_profile_info.html.haml
+++ /dev/null
@@ -1,39 +0,0 @@
-.card#profile
-  %img.profile--avatar{src: @user.profile_picture.url(:large)}
-  - if user_signed_in? && current_user.has_role?(:administrator)
-    - if @user.has_role?(:administrator)
-      .profile--panel-badge.panel-badge-danger
-        %i.fa.fa-flask
-        = t 'views.user.title.admin'
-    - if @user.has_role?(:moderator)
-      .profile--panel-badge.panel-badge-success
-        %i.fa.fa-users
-        = t 'views.user.title.moderator'
-  - if @user.banned?
-    .profile--panel-badge.panel-badge-default
-      %i.fa.fa-ban
-      = t 'views.user.title.banned'
-  - if @user.following? current_user
-    .profile--panel-badge.panel-badge-default
-      = t 'views.user.follows_you'
-  .card-body
-    .profile--panel-name
-      - if @user.display_name.blank?
-        .profile--displayname
-          = @user.screen_name
-      - else
-        .profile--displayname
-          = @user.display_name
-        .profile--username
-          = @user.screen_name
-    - unless @user.bio.blank?
-      %p.profile--text= markdown @user.bio
-    - unless @user.website.blank?
-      %p.profile--text
-        %i.fa.fa-globe
-        %a{href: @user.website}= @user.display_website
-    - unless @user.location.blank?
-      %p.profile--text
-        %i.fa.fa-location-arrow
-        = @user.location
-    = render 'user/actions', user: @user, type: :follower

From 86744a3da49fadc2bec74072ed1e902088773e53 Mon Sep 17 00:00:00 2001
From: Andreas Nedbal <andy@pixelde.su>
Date: Fri, 1 May 2020 18:38:29 +0200
Subject: [PATCH 074/172] Refactor userbox styling and layout

---
 app/assets/stylesheets/application.css.scss   | 21 +++-------
 app/assets/stylesheets/base.css.scss          |  2 +-
 .../stylesheets/components/_userbox.scss      | 39 +++++++++++++++++++
 app/assets/stylesheets/scss/user.scss         | 18 ---------
 app/views/shared/_userbox.haml                | 12 ++++++
 app/views/shared/_userbox.html.haml           | 24 ------------
 app/views/user/show_follow.haml               |  4 +-
 app/views/user/show_follow.js.erb             |  2 +-
 8 files changed, 60 insertions(+), 62 deletions(-)
 create mode 100644 app/assets/stylesheets/components/_userbox.scss
 delete mode 100644 app/assets/stylesheets/scss/user.scss
 create mode 100644 app/views/shared/_userbox.haml
 delete mode 100644 app/views/shared/_userbox.html.haml

diff --git a/app/assets/stylesheets/application.css.scss b/app/assets/stylesheets/application.css.scss
index eb59637c..fb746561 100644
--- a/app/assets/stylesheets/application.css.scss
+++ b/app/assets/stylesheets/application.css.scss
@@ -63,6 +63,7 @@ $navbar-inverse-toggle-border-color: #512da8;
 
 @import
 "bootstrap",
+"bootstrap-datetimepicker",
 "font-awesome",
 "nprogress",
 "nprogress-bootstrap";
@@ -82,6 +83,7 @@ $navbar-inverse-toggle-border-color: #512da8;
 
 @import
 "overrides/alerts",
+"overrides/bootstrap-datetimepicker",
 "overrides/buttons",
 "overrides/colors",
 "overrides/card",
@@ -89,6 +91,7 @@ $navbar-inverse-toggle-border-color: #512da8;
 "overrides/inputs",
 "overrides/links",
 "overrides/list-group",
+"overrides/minicolors",
 "overrides/navbar";
 
 /**
@@ -102,21 +105,7 @@ $navbar-inverse-toggle-border-color: #512da8;
 "components/buttons",
 "components/jumbotron",
 "components/profile",
-"components/question";
-
-body { padding-top: 50px; }
-
-@import 'bootstrap-datetimepicker';
-.remove-native-picker::-webkit-calendar-picker-indicator{
-  display: none
-}
+"components/question",
+"components/userbox";
 
 @import "base";
-
-.minicolors-theme-bootstrap .minicolors-swatch {
-  top:           0;
-  left:          0;
-  width:         42px;
-  height:        42px;
-  border-radius: 0;
-}
diff --git a/app/assets/stylesheets/base.css.scss b/app/assets/stylesheets/base.css.scss
index 9e9abbed..6b4f84d4 100644
--- a/app/assets/stylesheets/base.css.scss
+++ b/app/assets/stylesheets/base.css.scss
@@ -4,6 +4,7 @@ body {
   overflow-y: scroll;
   word-wrap: break-word;
   background-color: var(--background);
+  padding-top: 50px;
 }
 
 @import "scss/flags";
@@ -13,7 +14,6 @@ body {
 @import "scss/comments";
 @import "scss/entry";
 @import "scss/panel";
-@import "scss/user";
 @import "scss/notifications";
 
 .j2-page {
diff --git a/app/assets/stylesheets/components/_userbox.scss b/app/assets/stylesheets/components/_userbox.scss
new file mode 100644
index 00000000..42d7463a
--- /dev/null
+++ b/app/assets/stylesheets/components/_userbox.scss
@@ -0,0 +1,39 @@
+.userbox {
+  overflow: hidden;
+
+  &__header {
+    width: 100%;
+    height: auto;
+    max-height: 70px;
+
+    @include media-breakpoint-up(sm) { 
+      max-height: 60px;
+    }
+  }
+
+  &__avatar {
+    display: block;
+    width: map-get($avatar-sizes, "lg");
+    height: map-get($avatar-sizes, "lg");
+    margin-top: -(map-get($avatar-sizes, "lg") / 2);
+    margin-left: auto;
+    margin-right: auto;
+    border-radius: $avatar-border-radius;
+    box-shadow: $box-shadow;
+  }
+
+  .profile__name {
+    display: block;
+    margin: map-get($spacers, 3) 0;
+    text-align: center;
+  }
+
+  .card-body {
+    display: flex;
+    flex-direction: column;
+  }
+
+  .profile__actions {
+    margin-top: auto;
+  }
+}
diff --git a/app/assets/stylesheets/scss/user.scss b/app/assets/stylesheets/scss/user.scss
deleted file mode 100644
index ea9dada6..00000000
--- a/app/assets/stylesheets/scss/user.scss
+++ /dev/null
@@ -1,18 +0,0 @@
-.userbox--header {
-  width: 100%;
-  height: auto;
-}
-
-.userbox--avatar {
-  display: block;
-  margin-left: auto;
-  margin-right: auto;
-  margin-top: -60px;
-  border-radius: 5px;
-}
-
-.userbox--username {
-  text-align: center;
-  margin-top: 10px;
-  margin-bottom: 5px;
-}
diff --git a/app/views/shared/_userbox.haml b/app/views/shared/_userbox.haml
new file mode 100644
index 00000000..67a4472e
--- /dev/null
+++ b/app/views/shared/_userbox.haml
@@ -0,0 +1,12 @@
+- type ||= @type || :nil
+.card.h-100.userbox
+  %img.userbox__header{src: user.profile_header.url(:mobile)}
+  .card-body
+    %img.userbox__avatar{src: user.profile_picture.url(:small)}
+    %a.profile__name{href: show_user_profile_path(user.screen_name)}
+      - unless user.display_name.blank?
+        .profile__display-name
+          = user.display_name
+      .profile__screen-name
+        = user.screen_name
+    = render 'user/actions', user: user, type: type
diff --git a/app/views/shared/_userbox.html.haml b/app/views/shared/_userbox.html.haml
deleted file mode 100644
index 8757615a..00000000
--- a/app/views/shared/_userbox.html.haml
+++ /dev/null
@@ -1,24 +0,0 @@
-- type ||= @type || :nil
-- header_class = if user.profile_header.exists? then "userbox--header-container" else "userbox--no-header" end
-.card
-  %div{class: header_class}
-    %img.userbox--header{src: user.profile_header.url(:mobile)}
-  .card-body
-    %img.userbox--avatar{src: user.profile_picture.url(:small)}
-    %p.userbox--username
-      - if user.display_name.blank?
-        %a.profile--displayname{href: show_user_profile_path(user.screen_name)}
-          = user.screen_name
-      - else
-        %a.profile--displayname{href: show_user_profile_path(user.screen_name)}
-          = user.display_name
-        %span.profile--username
-          = user.screen_name
-    .row
-      .col-md-6.col-sm-6.col-xs-6
-        %h4.entry-text#asked-count= user.asked_count
-        %h6.entry-subtext= t('views.general.question').pluralize(user.asked_count)
-      .col-md-6.col-sm-6.col-xs-6
-        %h4.entry-text#answered-count= user.answered_count
-        %h6.entry-subtext= t('views.general.answer').pluralize(user.answered_count)
-    = render 'user/actions', user: user, type: type
diff --git a/app/views/user/show_follow.haml b/app/views/user/show_follow.haml
index 19d0938a..15cf82e6 100644
--- a/app/views/user/show_follow.haml
+++ b/app/views/user/show_follow.haml
@@ -1,6 +1,6 @@
-#users
+#users.row.row-cols-1.row-cols-sm-2.row-cols-md-3
   - @users.each do |user|
-    .col-md-4.col-sm-6.col-xs-12
+    .col
       = render 'shared/userbox', user: user
 
 = render 'shared/cursored_pagination_dummy', more_data_available: @more_data_available, last_id: @users_last_id
diff --git a/app/views/user/show_follow.js.erb b/app/views/user/show_follow.js.erb
index 6857406a..213d55f3 100644
--- a/app/views/user/show_follow.js.erb
+++ b/app/views/user/show_follow.js.erb
@@ -1,5 +1,5 @@
 $('#users').append('<% @users.each do |user|
-  %><div class="col-md-4 col-sm-6 col-xs-12"><%= j render 'shared/userbox', user: user
+  %><div class="col"><%= j render 'shared/userbox', user: user
 %></div><% end %>');
 <% if @more_data_available %>
   $('#pagination').html('<%= j render 'shared/cursored_pagination_dummy', more_data_available: @more_data_available, last_id: @users_last_id %>');

From 33e25334676f91e3f253cb900d7676c1a7f99594 Mon Sep 17 00:00:00 2001
From: Andreas Nedbal <andy@pixelde.su>
Date: Fri, 1 May 2020 18:38:49 +0200
Subject: [PATCH 075/172] Add overrides files for bs-datetimepicker and
 minicolors

---
 .../stylesheets/overrides/_bootstrap-datetimepicker.scss   | 3 +++
 app/assets/stylesheets/overrides/_minicolors.scss          | 7 +++++++
 2 files changed, 10 insertions(+)
 create mode 100644 app/assets/stylesheets/overrides/_bootstrap-datetimepicker.scss
 create mode 100644 app/assets/stylesheets/overrides/_minicolors.scss

diff --git a/app/assets/stylesheets/overrides/_bootstrap-datetimepicker.scss b/app/assets/stylesheets/overrides/_bootstrap-datetimepicker.scss
new file mode 100644
index 00000000..c7a66d09
--- /dev/null
+++ b/app/assets/stylesheets/overrides/_bootstrap-datetimepicker.scss
@@ -0,0 +1,3 @@
+.remove-native-picker::-webkit-calendar-picker-indicator{
+  display: none
+}
\ No newline at end of file
diff --git a/app/assets/stylesheets/overrides/_minicolors.scss b/app/assets/stylesheets/overrides/_minicolors.scss
new file mode 100644
index 00000000..ac9aae0e
--- /dev/null
+++ b/app/assets/stylesheets/overrides/_minicolors.scss
@@ -0,0 +1,7 @@
+.minicolors-theme-bootstrap .minicolors-swatch {
+  top:           0;
+  left:          0;
+  width:         42px;
+  height:        42px;
+  border-radius: 0;
+}
\ No newline at end of file

From 932c611dab8a666e6d67f236a8f6832e06be7732 Mon Sep 17 00:00:00 2001
From: Andreas Nedbal <andy@pixelde.su>
Date: Fri, 1 May 2020 18:55:18 +0200
Subject: [PATCH 076/172] Fix userbox layout on frontpage

---
 .../{_sidebar.html.haml => _sidebar.haml}     | 21 +++++++------------
 1 file changed, 8 insertions(+), 13 deletions(-)
 rename app/views/shared/{_sidebar.html.haml => _sidebar.haml} (70%)

diff --git a/app/views/shared/_sidebar.html.haml b/app/views/shared/_sidebar.haml
similarity index 70%
rename from app/views/shared/_sidebar.html.haml
rename to app/views/shared/_sidebar.haml
index fc27a3e6..0bc5ef37 100644
--- a/app/views/shared/_sidebar.html.haml
+++ b/app/views/shared/_sidebar.haml
@@ -1,18 +1,13 @@
-- header_class = if current_user.profile_header.exists? then "userbox--header-container" else "userbox--no-header" end
-.card
-  %div{class: header_class}
-    %img.userbox--header{src: current_user.profile_header.url(:mobile)}
+.card.userbox
+  %img.userbox__header{src: current_user.profile_header.url(:mobile)}
   .card-body
-    %img.userbox--avatar{src: current_user.profile_picture.url(:small)}
-    %p.userbox--username
-      - if current_user.display_name.blank?
-        %span.profile--displayname
-          = current_user.screen_name
-      - else
-        %span.profile--displayname
-          = current_user.display_name
-        %span.profile--username
+    %img.userbox__avatar{src: current_user.profile_picture.url(:small)}
+    .profile__name
+      - unless current_user.display_name.blank?
+        .profile__display-name
           = current_user.screen_name
+      .profile__screen-name
+        = current_user.screen_name
     .row
       .col-md-6.col-sm-6.col-xs-6
         %a{href: show_user_followers_path(current_user.screen_name)}

From e8b003fde4d44dfecd2620b188b28e55d479a450 Mon Sep 17 00:00:00 2001
From: Andreas Nedbal <andy@pixelde.su>
Date: Fri, 1 May 2020 19:29:05 +0200
Subject: [PATCH 077/172] Refactor entry styling and adjust layouts where used

---
 app/assets/stylesheets/application.css.scss   |  1 +
 app/assets/stylesheets/base.css.scss          |  1 -
 app/assets/stylesheets/components/_entry.scss | 48 +++++++++++++++++++
 app/assets/stylesheets/scss/entry.scss        | 45 -----------------
 app/views/shared/_sidebar.haml                | 11 +----
 .../static/{about.html.haml => about.haml}    | 31 +++++++-----
 6 files changed, 68 insertions(+), 69 deletions(-)
 create mode 100644 app/assets/stylesheets/components/_entry.scss
 delete mode 100644 app/assets/stylesheets/scss/entry.scss
 rename app/views/static/{about.html.haml => about.haml} (63%)

diff --git a/app/assets/stylesheets/application.css.scss b/app/assets/stylesheets/application.css.scss
index fb746561..b8f75233 100644
--- a/app/assets/stylesheets/application.css.scss
+++ b/app/assets/stylesheets/application.css.scss
@@ -103,6 +103,7 @@ $navbar-inverse-toggle-border-color: #512da8;
 @import
 "components/avatars",
 "components/buttons",
+"components/entry",
 "components/jumbotron",
 "components/profile",
 "components/question",
diff --git a/app/assets/stylesheets/base.css.scss b/app/assets/stylesheets/base.css.scss
index 6b4f84d4..0ae5baa6 100644
--- a/app/assets/stylesheets/base.css.scss
+++ b/app/assets/stylesheets/base.css.scss
@@ -12,7 +12,6 @@ body {
 @import "scss/generic";
 @import "scss/answerbox";
 @import "scss/comments";
-@import "scss/entry";
 @import "scss/panel";
 @import "scss/notifications";
 
diff --git a/app/assets/stylesheets/components/_entry.scss b/app/assets/stylesheets/components/_entry.scss
new file mode 100644
index 00000000..50f36a47
--- /dev/null
+++ b/app/assets/stylesheets/components/_entry.scss
@@ -0,0 +1,48 @@
+.entry {
+  $this: &;
+
+  &__value {
+    margin-bottom: 0;
+  }
+
+  &__description {
+    color: var(--primary);
+    text-transform: uppercase;
+    font-weight: bold;
+    font-size: .8rem;
+    margin-top: 0px;
+  }
+
+  &--statistics {
+    #{$this}__value,
+    #{$this}__description {
+      display: block;
+      text-align: center;
+    }
+
+    #{$this}__value {
+      margin-top: map-get($spacers, 3);
+    }
+
+    #{$this}__description {
+      margin-bottom: map-get($spacers, 3);
+    }
+  }
+
+  &--users {
+    #{$this}__value,
+    #{$this}__description {
+      display: block;
+      text-align: center;
+    }
+
+    #{$this}__value {
+      font-size: 4rem;
+      margin-top: map-get($spacers, 3);
+    }
+
+    #{$this}__description {
+      margin-bottom: map-get($spacers, 3);
+    }
+  }
+}
\ No newline at end of file
diff --git a/app/assets/stylesheets/scss/entry.scss b/app/assets/stylesheets/scss/entry.scss
deleted file mode 100644
index 6dda7023..00000000
--- a/app/assets/stylesheets/scss/entry.scss
+++ /dev/null
@@ -1,45 +0,0 @@
-.entry-subtext {
-  color: $navbar-inverse-bg;
-  margin-top: 0px;
-  text-transform: uppercase;
-  font-weight: bold;
-  font-size: 80%;
-}
-
-.entry-text {
-  margin-bottom: 0px;
-}
-
-.entry-about {
-  margin-top: 0px;
-}
-
-.statistics {
-  .entry-text {
-    display: block;
-    text-align: center;
-    margin-top: 5px;
-  }
-
-  .entry-subtext {
-    text-align: center;
-    display: block;
-    margin-bottom: 5px;
-  }
-}
-
-.users {
-  .entry-text {
-    display: block;
-    text-align: center;
-    margin-top: 7px;
-    font-size: 78px;
-    line-height: 1;
-  }
-
-  .entry-subtext {
-    text-align: center;
-    display: block;
-    margin-bottom: 5px;
-  }
-}
\ No newline at end of file
diff --git a/app/views/shared/_sidebar.haml b/app/views/shared/_sidebar.haml
index 0bc5ef37..02d57908 100644
--- a/app/views/shared/_sidebar.haml
+++ b/app/views/shared/_sidebar.haml
@@ -5,18 +5,9 @@
     .profile__name
       - unless current_user.display_name.blank?
         .profile__display-name
-          = current_user.screen_name
+          = current_user.display_name
       .profile__screen-name
         = current_user.screen_name
-    .row
-      .col-md-6.col-sm-6.col-xs-6
-        %a{href: show_user_followers_path(current_user.screen_name)}
-          %h4.entry-text#follower-count= current_user.follower_count
-          %h6.entry-subtext= t('views.general.follower').pluralize(current_user.follower_count)
-      .col-md-6.col-sm-6.col-xs-6
-        %a{href: show_user_friends_path(current_user.screen_name)}
-          %h4.entry-text#friend-count= current_user.friend_count
-          %h6.entry-subtext= t('views.general.following')
 .card
   .list-group
     = list_group_item t('views.general.timeline'), root_path
diff --git a/app/views/static/about.html.haml b/app/views/static/about.haml
similarity index 63%
rename from app/views/static/about.html.haml
rename to app/views/static/about.haml
index de63f8a1..2471b269 100644
--- a/app/views/static/about.html.haml
+++ b/app/views/static/about.haml
@@ -43,18 +43,23 @@
         .col-md-3.col-sm-12.col-xs-12
           %h3= t 'views.about.statistics.title'
           %p= t('views.about.statistics.desc', app_title: APP_CONFIG['site_name'])
-        .col-md-3.col-sm-6.col-xs-6.statistics
-          %h2.entry-text#asked-count= Question.count
-          %h4.entry-subtext= t('views.general.question').pluralize(Question.count)
-          %h2.entry-text#answered-count= Answer.count
-          %h4.entry-subtext= t('views.general.answer').pluralize(Answer.count)
-        .col-md-3.col-sm-6.col-xs-6.statistics
-          %h2.entry-text#comment-count= Comment.count
-          %h4.entry-subtext= t('views.general.comment').pluralize(Comment.count)
-          %h2.entry-text#smile-count= Smile.count + CommentSmile.count
-          %h4.entry-subtext= t('views.general.smile').pluralize(Smile.count)
-        .col-md-3.col-sm-12.col-xs-12.users
-          .entry-text#follower-count= User.count
-          %h6.entry-subtext= t('views.general.user').pluralize(User.count)
+        .col-md-3.col-sm-6.col-xs-6
+          .entry.entry--statistics
+            %h2.entry__value#asked-count= Question.count
+            %h4.entry__description= t('views.general.question').pluralize(Question.count)
+          .entry.entry--statistics
+            %h2.entry__value#answered-count= Answer.count
+            %h4.entry__description= t('views.general.answer').pluralize(Answer.count)
+        .col-md-3.col-sm-6.col-xs-6
+          .entry.entry--statistics
+            %h2.entry__value#comment-count= Comment.count
+            %h4.entry__description= t('views.general.comment').pluralize(Comment.count)
+          .entry.entry--statistics
+            %h2.entry__value#smile-count= Smile.count + CommentSmile.count
+            %h4.entry__description= t('views.general.smile').pluralize(Smile.count)
+        .col-md-3.col-sm-12.col-xs-12
+          .entry.entry--users
+            .entry__value#follower-count= User.count
+            %h4.entry__description= t('views.general.user').pluralize(User.count)
 
 = render "shared/links"

From aa5ca6c64aa23a81565574e045eb90480ae77840 Mon Sep 17 00:00:00 2001
From: Andreas Nedbal <andy@pixelde.su>
Date: Fri, 1 May 2020 19:50:51 +0200
Subject: [PATCH 078/172] Remove unused variables and move remaining ones to
 proper file

---
 app/assets/stylesheets/_variables.scss      |  25 ++++-
 app/assets/stylesheets/application.css.scss | 112 --------------------
 app/assets/stylesheets/application.scss     |  75 +++++++++++++
 3 files changed, 98 insertions(+), 114 deletions(-)
 delete mode 100644 app/assets/stylesheets/application.css.scss
 create mode 100644 app/assets/stylesheets/application.scss

diff --git a/app/assets/stylesheets/_variables.scss b/app/assets/stylesheets/_variables.scss
index f57f46c3..ec118189 100644
--- a/app/assets/stylesheets/_variables.scss
+++ b/app/assets/stylesheets/_variables.scss
@@ -1,3 +1,22 @@
+// Font settings
+@import url(https://fonts.googleapis.com/css?family=Lato:400,700);
+
+$font-family-sans-serif:  "Lato","Open Sans", "Helvetica Neue", Helvetica, "DejaVu Sans", Arial, sans-serif;
+$font-family-serif:       Georgia, "DejaVu Serif", "Times New Roman", Times, serif;
+$font-family-monospace:   "PragmataPro", Monaco, "Ubuntu Mono", Menlo, "DejaVu Sans Mono", monospace;
+$font-family-base:        $font-family-sans-serif;
+
+$font-size-base:          1rem;
+$font-size-large:         ceil(($font-size-base * 1.25)); // ~18px
+$font-size-small:         ceil(($font-size-base * 0.85)); // ~12px
+
+$font-size-h1:            floor(($font-size-base * 2.6)); // ~36px
+$font-size-h2:            floor(($font-size-base * 2.15)); // ~30px
+$font-size-h3:            ceil(($font-size-base * 1.7)); // ~24px
+$font-size-h4:            ceil(($font-size-base * 1.25)); // ~18px
+$font-size-h5:            $font-size-base;
+$font-size-h6:            ceil(($font-size-base * 0.85)); // ~12px
+
 // Color overrides for Bootstrap
 $primary: #5e35b1;
 
@@ -8,7 +27,7 @@ $card-border-width: 0;
 $list-group-border-width: 0;
 
 // nProgress
-$nprogress-color: lighten($navbar-inverse-bg, 25%);
+$nprogress-color: lighten($primary, 25%);
 
 // Color names for theme generation
 $color-names: (
@@ -64,4 +83,6 @@ $avatar-sizes: (
   --muted-text: 108, 117, 125;
 
   --input-text: 0, 0, 0;
-}
\ No newline at end of file
+}
+
+$gray: #e2e2e2;
\ No newline at end of file
diff --git a/app/assets/stylesheets/application.css.scss b/app/assets/stylesheets/application.css.scss
deleted file mode 100644
index b8f75233..00000000
--- a/app/assets/stylesheets/application.css.scss
+++ /dev/null
@@ -1,112 +0,0 @@
-/*
- *= require rails_bootstrap_forms
- *= require growl
- *= require jquery.guillotine
- *= require sweetalert
- *= require jquery.minicolors
- *= require flags
- *= require_self
- */
-
-@import url(https://fonts.googleapis.com/css?family=Lato:400,700);
-
-$font-family-sans-serif:  "Lato","Open Sans", "Helvetica Neue", Helvetica, "DejaVu Sans", Arial, sans-serif;
-$font-family-serif:       Georgia, "DejaVu Serif", "Times New Roman", Times, serif;
-//** Default monospace fonts for `<code>`, `<kbd>`, and `<pre>`.
-$font-family-monospace:   "PragmataPro", Monaco, "Ubuntu Mono", Menlo, "DejaVu Sans Mono", monospace;
-$font-family-base:        $font-family-sans-serif;
-
-$font-size-base:          1rem;
-$font-size-large:         ceil(($font-size-base * 1.25)); // ~18px
-$font-size-small:         ceil(($font-size-base * 0.85)); // ~12px
-
-$font-size-h1:            floor(($font-size-base * 2.6)); // ~36px
-$font-size-h2:            floor(($font-size-base * 2.15)); // ~30px
-$font-size-h3:            ceil(($font-size-base * 1.7)); // ~24px
-$font-size-h4:            ceil(($font-size-base * 1.25)); // ~18px
-$font-size-h5:            $font-size-base;
-$font-size-h6:            ceil(($font-size-base * 0.85)); // ~12px
-
-$gray: #e2e2e2;
-$brand-primary: #5e35b1;
-$navbar-inverse-bg: #5e35b1;
-$navbar-inverse-link-color: #ffffff;
-$navbar-inverse-link-hover-color: #ffffff;
-$navbar-inverse-link-hover-bg: transparent;
-$navbar-inverse-link-active-color: #ffffff;
-$navbar-inverse-link-active-bg: transparent;
-$navbar-inverse-link-active-bg-mobile: darken(#5e35b1, 7%);
-$navbar-inverse-link-disabled-color: darken(#fff, 12.5%);
-$navbar-inverse-link-disabled-bg: transparent;
-$navbar-inverse-brand-color: $navbar-inverse-link-color;
-$navbar-inverse-brand-hover-color: darken($navbar-inverse-link-color, 10%);
-$navbar-inverse-brand-hover-bg: transparent;
-$navbar-inverse-toggle-hover-bg: #512da8;
-$navbar-inverse-toggle-icon-bar-bg: #7e57c2;
-$navbar-inverse-toggle-border-color: #512da8;
-
-/**
- SETTINGS
- ----------------------------------------------
- Variable definitions, tools and mixins used
- across all styling definitions.
- */
-
-@import
-"variables";
-
-/**
- VENDOR
- ----------------------------------------------
- Imported vendor assets used by Retrospring.
- */
-
-@import
-"bootstrap",
-"bootstrap-datetimepicker",
-"font-awesome",
-"nprogress",
-"nprogress-bootstrap";
-
-/**
- OVERRIDES
- ----------------------------------------------
- The imports from "overrides/" define almost barely
- any style adjustments but rather override default
- Bootstrap behaviour.
-
- The largest change to regular bootstrap is the switch
- to using the available CSS variables for most elements
- used on the site, so theming can be done with changing
- only those.
- */
-
-@import
-"overrides/alerts",
-"overrides/bootstrap-datetimepicker",
-"overrides/buttons",
-"overrides/colors",
-"overrides/card",
-"overrides/dropdown",
-"overrides/inputs",
-"overrides/links",
-"overrides/list-group",
-"overrides/minicolors",
-"overrides/navbar";
-
-/**
- COMPONENTS
- ----------------------------------------------
- Custom components defined for Retrospring.
- */
-
-@import
-"components/avatars",
-"components/buttons",
-"components/entry",
-"components/jumbotron",
-"components/profile",
-"components/question",
-"components/userbox";
-
-@import "base";
diff --git a/app/assets/stylesheets/application.scss b/app/assets/stylesheets/application.scss
new file mode 100644
index 00000000..e8e093af
--- /dev/null
+++ b/app/assets/stylesheets/application.scss
@@ -0,0 +1,75 @@
+/*
+ *= require rails_bootstrap_forms
+ *= require growl
+ *= require jquery.guillotine
+ *= require sweetalert
+ *= require jquery.minicolors
+ *= require flags
+ *= require_self
+ */
+
+/**
+ SETTINGS
+ ----------------------------------------------
+ Variable definitions, tools and mixins used
+ across all styling definitions.
+ */
+
+@import
+"variables";
+
+/**
+ VENDOR
+ ----------------------------------------------
+ Imported vendor assets used by Retrospring.
+ */
+
+@import
+"bootstrap",
+"bootstrap-datetimepicker",
+"font-awesome",
+"nprogress",
+"nprogress-bootstrap";
+
+/**
+ OVERRIDES
+ ----------------------------------------------
+ The imports from "overrides/" define almost barely
+ any style adjustments but rather override default
+ Bootstrap behaviour.
+
+ The largest change to regular bootstrap is the switch
+ to using the available CSS variables for most elements
+ used on the site, so theming can be done with changing
+ only those.
+ */
+
+@import
+"overrides/alerts",
+"overrides/bootstrap-datetimepicker",
+"overrides/buttons",
+"overrides/colors",
+"overrides/card",
+"overrides/dropdown",
+"overrides/inputs",
+"overrides/links",
+"overrides/list-group",
+"overrides/minicolors",
+"overrides/navbar";
+
+/**
+ COMPONENTS
+ ----------------------------------------------
+ Custom components defined for Retrospring.
+ */
+
+@import
+"components/avatars",
+"components/buttons",
+"components/entry",
+"components/jumbotron",
+"components/profile",
+"components/question",
+"components/userbox";
+
+@import "base";

From 185b5a65c8e89ea4df5d0bed2360590139fff55a Mon Sep 17 00:00:00 2001
From: Andreas Nedbal <andy@pixelde.su>
Date: Fri, 1 May 2020 21:57:14 +0200
Subject: [PATCH 079/172] Refactor notification styling and layout

---
 app/assets/stylesheets/application.scss       |   1 +
 app/assets/stylesheets/base.css.scss          |   8 --
 .../components/_notifications.scss            |  50 ++++++++
 .../stylesheets/scss/notifications.scss       | 110 ------------------
 app/views/navigation/main/_notifications.haml |   8 +-
 app/views/notifications/type/_answer.haml     |  41 ++++---
 app/views/notifications/type/_comment.haml    |  51 ++++----
 .../notifications/type/_commentsmile.haml     |  32 ++---
 .../notifications/type/_relationship.haml     |  15 +--
 app/views/notifications/type/_smile.haml      |  32 ++---
 10 files changed, 140 insertions(+), 208 deletions(-)
 create mode 100644 app/assets/stylesheets/components/_notifications.scss
 delete mode 100644 app/assets/stylesheets/scss/notifications.scss

diff --git a/app/assets/stylesheets/application.scss b/app/assets/stylesheets/application.scss
index e8e093af..4e62ff6d 100644
--- a/app/assets/stylesheets/application.scss
+++ b/app/assets/stylesheets/application.scss
@@ -68,6 +68,7 @@
 "components/buttons",
 "components/entry",
 "components/jumbotron",
+"components/notifications",
 "components/profile",
 "components/question",
 "components/userbox";
diff --git a/app/assets/stylesheets/base.css.scss b/app/assets/stylesheets/base.css.scss
index 0ae5baa6..0b993c18 100644
--- a/app/assets/stylesheets/base.css.scss
+++ b/app/assets/stylesheets/base.css.scss
@@ -13,7 +13,6 @@ body {
 @import "scss/answerbox";
 @import "scss/comments";
 @import "scss/panel";
-@import "scss/notifications";
 
 .j2-page {
   padding-top: 30px;
@@ -93,10 +92,3 @@ body {
 .heading-about {
   margin-top: 0px;
 }
-
-.row-eq-height {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display:         flex;
-}
diff --git a/app/assets/stylesheets/components/_notifications.scss b/app/assets/stylesheets/components/_notifications.scss
new file mode 100644
index 00000000..5c1c7282
--- /dev/null
+++ b/app/assets/stylesheets/components/_notifications.scss
@@ -0,0 +1,50 @@
+.notification {
+  &__user {
+    margin-top: 0;
+  }
+
+  &__user,
+  &__text {
+    margin-bottom: 0;
+  }
+
+  &__icon {
+    margin-right: map-get($spacers, 2);
+    min-width: 40px;
+  }
+
+  &__heading {
+    margin-bottom: 0;
+  }
+
+  &__list-heading {
+    margin: 0px;
+    text-transform: uppercase;
+    font-weight: bold;
+    color: RGB(var(--muted-text));
+  }
+
+  &__bell-icon:before {
+    font-size: 64px;
+    text-align: center;
+    display: block;
+    margin-bottom: 2px;
+  }
+
+  &-dropdown {
+    min-width: 400px;
+  }
+
+  .dropdown-item > & {
+    padding: 5px 10px;
+  }
+
+  .list-group-item {
+    margin-top: map-get($spacers, 2);
+    background-color: var(--card-cap-bg);
+
+    p {
+      margin-bottom: 0;
+    }
+  }
+}
\ No newline at end of file
diff --git a/app/assets/stylesheets/scss/notifications.scss b/app/assets/stylesheets/scss/notifications.scss
deleted file mode 100644
index e8be9bcf..00000000
--- a/app/assets/stylesheets/scss/notifications.scss
+++ /dev/null
@@ -1,110 +0,0 @@
-.notification--img {
-  min-height: 32px;
-  min-width: 32px;
-  height: 32px;
-  width: 32px;
-}
-
-.notification--img-sm {
-  min-height: 18px;
-  min-width: 18px;
-  height: 18px;
-  width: 18px;
-  -webkit-border-radius: 4px;
-  -moz-border-radius: 4px;
-  border-radius: 4px;
-}
-
-.notification--user, .notification--text {
-  z-index: 99;
-  margin-bottom: 0px;
-}
-
-.notification--icon {
-  position: absolute;
-  right: 0px;
-  bottom: 0px;
-  padding: 5px;
-  font-size: 36px;
-  color: $gray;
-  opacity: 0.4;
-  z-index: 0;
-}
-
-.notification--dropdown {
-  min-width: 370px;
-  margin-top: 0px !important;
-}
-
-.notification--dropdown-media {
-  padding: 5px 10px;
-}
-
-.notification--dropdown-user, .notification--dropdown-text {
-  margin-bottom: 0px;
-  overflow: hidden;
-  line-height: 1.3em;
-}
-
-.notification--dropdown-user {
-  margin-top: 0px;
-}
-
-.notification--dropdown-img {
-  min-height: 32px;
-  min-width: 32px;
-  height: 32px;
-  width: 32px;
-  -webkit-border-radius: 4px;
-  -moz-border-radius: 4px;
-  border-radius: 4px;
-}
-
-.notification-center {
-  min-width: 400px;
-  margin-top: 0px !important;
-}
-
-.no-notifications:before {
-  font-size: 64px;
-  text-align: center;
-  display: block;
-  margin-bottom: 2px;
-}
-
-.notification--heading {
-  margin-bottom: 4px;
-
-  a {
-    border-bottom: 1px dotted $link-color;
-
-    &:hover {
-      text-decoration: none;
-      border-bottom: 1px solid $link-color;
-    }
-  }
-}
-
-.notification--list-heading {
-  margin: 0px;
-  position: absolute;
-  top: 1px;
-  left: 3px;
-  margin: 0px;
-  text-transform: uppercase;
-  font-weight: bold;
-  opacity: 0.3;
-}
-
-.notification--list-content {
-  line-height: 1.3em;
-  padding-top: 3px;
-}
-
-.notification--list {
-  margin: 0px;
-}
-
-.notifications--none {
-  padding: 10px;
-}
\ No newline at end of file
diff --git a/app/views/navigation/main/_notifications.haml b/app/views/navigation/main/_notifications.haml
index 584cc8b9..0d11877e 100644
--- a/app/views/navigation/main/_notifications.haml
+++ b/app/views/navigation/main/_notifications.haml
@@ -8,17 +8,17 @@
       %i.fa.fa-bell
     %span.sr-only Notifications
     %span.badge= notification_count
-  .dropdown-menu.notification-center
+  .dropdown-menu.notification-dropdown
     - if notifications.count == 0
-      .dropdown-item.text-center.notifications--none
-        %i.fa.fa-bell-o.no-notifications
+      .dropdown-item.text-center.p-2
+        %i.fa.fa-bell-o.notification__bell-icon
         %p No new notifications.
       %a.dropdown-item.text-center{href: notifications_path('all')}
         %i.fa.fa-fw.fa-chevron-right
         Show all notifications
     - else
       - notifications.each do |notification|
-        .dropdown-item.media.notification--dropdown-media
+        .dropdown-item
           = render "notifications/type/#{notification.target_type.downcase}", notification: notification
 
       %a.dropdown-item.text-center{href: notifications_path}
diff --git a/app/views/notifications/type/_answer.haml b/app/views/notifications/type/_answer.haml
index ee395f77..f8d8539e 100644
--- a/app/views/notifications/type/_answer.haml
+++ b/app/views/notifications/type/_answer.haml
@@ -1,23 +1,22 @@
-.pull-left
-  %i.fa.fa-2x.fa-fw.fa-exclamation
-.media-body
-  .notification--heading
-    %img.notification--img-sm{src: notification.target.user.profile_picture.url(:small)}
-    = user_screen_name notification.target.user
-    answered
-    = link_to "your question", show_user_answer_path(username: notification.target.user.screen_name, id: notification.target.id)
-    = time_tooltip(notification.target)
-    ago
-  .list-group.notification--list
-    .list-group-item
-      .media.question-media
-        .media-body
-          %h6.notification--list-heading question
-          .notification--list-content
+.media.notification
+  .notification__icon
+    %i.fa.fa-2x.fa-fw.fa-exclamation
+  .media-body
+    .notification__heading
+      %img.avatar-xs{src: notification.target.user.profile_picture.url(:small)}
+      = user_screen_name notification.target.user
+      answered
+      = link_to "your question", show_user_answer_path(username: notification.target.user.screen_name, id: notification.target.id)
+      = time_tooltip(notification.target)
+      ago
+    .list-group
+      .list-group-item
+        .media.question-media
+          .media-body
+            %h6.notification__list-heading question
             = markdown notification.target.question.content[0..60] + "#{notification.target.question.content.length > 60 ? '[...]' : ''}"
-    .list-group-item
-      .media.question-media
-        .media-body
-          %h6.notification--list-heading answer
-          .notification--list-content
+      .list-group-item
+        .media.question-media
+          .media-body
+            %h6.notification__list-heading answer
             = markdown notification.target.content[0..60] + "#{notification.target.content.length > 60 ? '[...]' : ''}"
\ No newline at end of file
diff --git a/app/views/notifications/type/_comment.haml b/app/views/notifications/type/_comment.haml
index 6ab20dc1..91f58666 100644
--- a/app/views/notifications/type/_comment.haml
+++ b/app/views/notifications/type/_comment.haml
@@ -1,28 +1,27 @@
-.pull-left
-  %i.fa.fa-2x.fa-fw.fa-comments
-.media-body
-  .notification--heading
-    %img.notification--img-sm{src: notification.target.user.profile_picture.url(:small)}
-    = user_screen_name notification.target.user
-    commented on
-    - if notification.target.answer.user == current_user
-      = link_to "your answer", show_user_answer_path(username: notification.target.user.screen_name, id: notification.target.answer.id)
-    - elsif notification.target.user == notification.target.answer.user
-      = link_to "their answer", show_user_answer_path(username: notification.target.user.screen_name, id: notification.target.answer.id)
-    - else
-      = link_to "#{notification.target.answer.user.screen_name}'s answer", show_user_answer_path(username: notification.target.user.screen_name, id: notification.target.answer.id)
-    = time_tooltip(notification.target)
-    ago
-  .list-group.notification--list
-    .list-group-item
-      .media.question-media
-        .media-body
-          %h6.notification--list-heading answer
-          .notification--list-content
+.media.notification
+  .notification__icon
+    %i.fa.fa-2x.fa-fw.fa-comments
+  .media-body
+    .notification__heading
+      %img.avatar-xs{src: notification.target.user.profile_picture.url(:small)}
+      = user_screen_name notification.target.user
+      commented on
+      - if notification.target.answer.user == current_user
+        = link_to "your answer", show_user_answer_path(username: notification.target.user.screen_name, id: notification.target.answer.id)
+      - elsif notification.target.user == notification.target.answer.user
+        = link_to "their answer", show_user_answer_path(username: notification.target.user.screen_name, id: notification.target.answer.id)
+      - else
+        = link_to "#{notification.target.answer.user.screen_name}'s answer", show_user_answer_path(username: notification.target.user.screen_name, id: notification.target.answer.id)
+      = time_tooltip(notification.target)
+      ago
+    .list-group
+      .list-group-item
+        .media.question-media
+          .media-body
+            %h6.notification__list-heading answer
             = markdown notification.target.answer.content[0..60] + "#{notification.target.answer.content.length > 60 ? '[...]' : ''}"
-    .list-group-item
-      .media.question-media
-        .media-body
-          %h6.notification--list-heading comment
-          .notification--list-content
+      .list-group-item
+        .media.question-media
+          .media-body
+            %h6.notification__list-heading comment
             = markdown notification.target.content[0..60] + "#{notification.target.content.length > 60 ? '[...]' : ''}"
\ No newline at end of file
diff --git a/app/views/notifications/type/_commentsmile.haml b/app/views/notifications/type/_commentsmile.haml
index 5c06ce2e..09833486 100644
--- a/app/views/notifications/type/_commentsmile.haml
+++ b/app/views/notifications/type/_commentsmile.haml
@@ -1,17 +1,17 @@
-.pull-left
-  %i.fa.fa-2x.fa-fw.fa-smile-o
-.media-body
-  .notification--heading
-    %img.notification--img-sm{src: notification.target.user.profile_picture.url(:small)}
-    = user_screen_name notification.target.user
-    smiled
-    = link_to "your comment", show_user_answer_path(username: notification.target.user.screen_name, id: notification.target.comment.answer.id)
-    = time_tooltip(notification.target)
-    ago
-  .list-group.notification--list
-    .list-group-item
-      .media.question-media
-        .media-body
-          %h6.notification--list-heading comment
-          .notification--list-content
+.media.notification
+  .notification__icon
+    %i.fa.fa-2x.fa-fw.fa-smile-o
+  .media-body
+    .notification__heading
+      %img.avatar-xs{src: notification.target.user.profile_picture.url(:small)}
+      = user_screen_name notification.target.user
+      smiled
+      = link_to "your comment", show_user_answer_path(username: notification.target.user.screen_name, id: notification.target.comment.answer.id)
+      = time_tooltip(notification.target)
+      ago
+    .list-group
+      .list-group-item
+        .media.question-media
+          .media-body
+            %h6.notification__list-heading comment
             = markdown notification.target.comment.content[0..60] + "#{notification.target.comment.content.length > 60 ? '[...]' : ''}"
\ No newline at end of file
diff --git a/app/views/notifications/type/_relationship.haml b/app/views/notifications/type/_relationship.haml
index 8ee7cde9..c5654ae5 100644
--- a/app/views/notifications/type/_relationship.haml
+++ b/app/views/notifications/type/_relationship.haml
@@ -1,7 +1,8 @@
-.pull-left
-  %img.img-rounded.notification--dropdown-img{src: notification.target.source.profile_picture.url(:small)}
-.media-body
-  %h6.media-heading.notification--dropdown-user
-    = user_screen_name notification.target.source
-  .notification--dropdown-text
-    = raw t('views.notifications.relationship.body', time: time_ago_in_words(notification.target.created_at))
\ No newline at end of file
+.media.notification
+  .notification__icon
+    %img.avatar-sm{src: notification.target.source.profile_picture.url(:small)}
+  .media-body
+    %h6.media-heading.notification__user
+      = user_screen_name notification.target.source
+    .notification__text
+      = raw t('views.notifications.relationship.body', time: time_ago_in_words(notification.target.created_at))
\ No newline at end of file
diff --git a/app/views/notifications/type/_smile.haml b/app/views/notifications/type/_smile.haml
index 01ff40b8..eabe35c1 100644
--- a/app/views/notifications/type/_smile.haml
+++ b/app/views/notifications/type/_smile.haml
@@ -1,17 +1,17 @@
-.pull-left
-  %i.fa.fa-2x.fa-fw.fa-smile-o
-.media-body
-  .notification--heading
-    %img.notification--img-sm{src: notification.target.user.profile_picture.url(:small)}
-    = user_screen_name notification.target.user
-    smiled
-    = link_to "your answer", show_user_answer_path(username: notification.target.user.screen_name, id: notification.target.answer.id)
-    = time_tooltip(notification.target)
-    ago
-  .list-group.notification--list
-    .list-group-item
-      .media.question-media
-        .media-body
-          %h6.notification--list-heading answer
-          .notification--list-content
+.media.notification
+  .notification__icon
+    %i.fa.fa-2x.fa-fw.fa-smile-o
+  .media-body
+    .notification__heading
+      %img.avatar-xs{src: notification.target.user.profile_picture.url(:small)}
+      = user_screen_name notification.target.user
+      smiled
+      = link_to "your answer", show_user_answer_path(username: notification.target.user.screen_name, id: notification.target.answer.id)
+      = time_tooltip(notification.target)
+      ago
+    .list-group
+      .list-group-item
+        .media.question-media
+          .media-body
+            %h6.notification__list-heading answer
             = markdown notification.target.answer.content[0..60] + "#{notification.target.answer.content.length > 60 ? '[...]' : ''}"
\ No newline at end of file

From 8c3ff8f31d7f357fd2bb225e2cd71d5d424a7dd0 Mon Sep 17 00:00:00 2001
From: Andreas Nedbal <andy@pixelde.su>
Date: Sat, 2 May 2020 17:36:05 +0200
Subject: [PATCH 080/172] Add overrides for growls and sweet-alert

---
 app/assets/stylesheets/overrides/_growls.scss      | 4 ++++
 app/assets/stylesheets/overrides/_sweet-alert.scss | 3 +++
 2 files changed, 7 insertions(+)
 create mode 100644 app/assets/stylesheets/overrides/_growls.scss
 create mode 100644 app/assets/stylesheets/overrides/_sweet-alert.scss

diff --git a/app/assets/stylesheets/overrides/_growls.scss b/app/assets/stylesheets/overrides/_growls.scss
new file mode 100644
index 00000000..0e906324
--- /dev/null
+++ b/app/assets/stylesheets/overrides/_growls.scss
@@ -0,0 +1,4 @@
+#growls.default{
+  top:64px;
+  right:10px
+}
\ No newline at end of file
diff --git a/app/assets/stylesheets/overrides/_sweet-alert.scss b/app/assets/stylesheets/overrides/_sweet-alert.scss
new file mode 100644
index 00000000..cd16be18
--- /dev/null
+++ b/app/assets/stylesheets/overrides/_sweet-alert.scss
@@ -0,0 +1,3 @@
+.sweet-overlay {
+  z-index: 1031;
+}
\ No newline at end of file

From 2c11272bd49388482f25314ce902cc5b900a5d49 Mon Sep 17 00:00:00 2001
From: Andreas Nedbal <andy@pixelde.su>
Date: Sat, 2 May 2020 17:36:22 +0200
Subject: [PATCH 081/172] Move utility class to utilities file

---
 app/assets/stylesheets/_utilities.scss | 3 +++
 1 file changed, 3 insertions(+)
 create mode 100644 app/assets/stylesheets/_utilities.scss

diff --git a/app/assets/stylesheets/_utilities.scss b/app/assets/stylesheets/_utilities.scss
new file mode 100644
index 00000000..a9330909
--- /dev/null
+++ b/app/assets/stylesheets/_utilities.scss
@@ -0,0 +1,3 @@
+.ios-web-app {
+  padding-top: 1em;
+}
\ No newline at end of file

From 4e9311c25be032244744e758e6d9a1e12c6c88ac Mon Sep 17 00:00:00 2001
From: Andreas Nedbal <andy@pixelde.su>
Date: Sat, 2 May 2020 17:36:40 +0200
Subject: [PATCH 082/172] Add generic navbar-height variable

---
 app/assets/stylesheets/_variables.scss | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/app/assets/stylesheets/_variables.scss b/app/assets/stylesheets/_variables.scss
index ec118189..9ee03557 100644
--- a/app/assets/stylesheets/_variables.scss
+++ b/app/assets/stylesheets/_variables.scss
@@ -17,6 +17,9 @@ $font-size-h4:            ceil(($font-size-base * 1.25)); // ~18px
 $font-size-h5:            $font-size-base;
 $font-size-h6:            ceil(($font-size-base * 0.85)); // ~12px
 
+// Usual navbar height
+$navbar-height: 56px;
+
 // Color overrides for Bootstrap
 $primary: #5e35b1;
 

From 1e2259fe407b8448e764ff9520e2360dd4f99a12 Mon Sep 17 00:00:00 2001
From: Andreas Nedbal <andy@pixelde.su>
Date: Sat, 2 May 2020 17:37:19 +0200
Subject: [PATCH 083/172] Rename j2-page class to container--main

---
 app/assets/stylesheets/components/_container.scss | 4 ++++
 app/views/announcement/edit.html.haml             | 2 +-
 app/views/announcement/index.html.haml            | 2 +-
 app/views/announcement/new.html.haml              | 2 +-
 app/views/answer/show.haml                        | 2 +-
 app/views/layouts/feed.haml                       | 2 +-
 app/views/layouts/inbox.haml                      | 2 +-
 app/views/layouts/moderation.haml                 | 2 +-
 app/views/layouts/notifications.haml              | 2 +-
 app/views/layouts/user/settings.haml              | 2 +-
 app/views/modal/group/_item.haml                  | 2 +-
 app/views/modal/privileges/_item.haml             | 4 ++--
 app/views/shared/_links.html.haml                 | 2 +-
 app/views/static/privacy_policy.html.haml         | 2 +-
 app/views/static/terms.html.haml                  | 2 +-
 app/views/user/groups.haml                        | 3 ---
 16 files changed, 19 insertions(+), 18 deletions(-)
 create mode 100644 app/assets/stylesheets/components/_container.scss

diff --git a/app/assets/stylesheets/components/_container.scss b/app/assets/stylesheets/components/_container.scss
new file mode 100644
index 00000000..08d9bf08
--- /dev/null
+++ b/app/assets/stylesheets/components/_container.scss
@@ -0,0 +1,4 @@
+.container--main {
+  padding-top: map-get($spacers, 3);
+  padding-bottom: map-get($spacers, 3);
+}
\ No newline at end of file
diff --git a/app/views/announcement/edit.html.haml b/app/views/announcement/edit.html.haml
index ee7eb3ba..bef290f1 100644
--- a/app/views/announcement/edit.html.haml
+++ b/app/views/announcement/edit.html.haml
@@ -1,5 +1,5 @@
 - provide(:title, generate_title("Edit announcement"))
-.container.j2-page
+.container.container--main
   = bootstrap_form_for(@announcement, url: {action: "update"}, method: "PATCH") do |f|
     - if @announcement.errors.any?
       .row
diff --git a/app/views/announcement/index.html.haml b/app/views/announcement/index.html.haml
index 0d117c83..ad89c83f 100644
--- a/app/views/announcement/index.html.haml
+++ b/app/views/announcement/index.html.haml
@@ -1,5 +1,5 @@
 - provide(:title, generate_title("Announcements"))
-.container.j2-page
+.container.container--main
   .row
     .col-md-12
       = link_to "Add new", :announcement_new, class: "btn btn-default"
diff --git a/app/views/announcement/new.html.haml b/app/views/announcement/new.html.haml
index 25942f28..3afa8595 100644
--- a/app/views/announcement/new.html.haml
+++ b/app/views/announcement/new.html.haml
@@ -1,5 +1,5 @@
 - provide(:title, generate_title("Add new announcement"))
-.container.j2-page
+.container.container--main
   = bootstrap_form_for(@announcement, url: {action: "create"}) do |f|
     - if @announcement.errors.any?
       .row
diff --git a/app/views/answer/show.haml b/app/views/answer/show.haml
index f929089c..f1096f09 100644
--- a/app/views/answer/show.haml
+++ b/app/views/answer/show.haml
@@ -1,3 +1,3 @@
 - provide(:title, answer_title(@answer))
-.container.j2-page
+.container.container--main
   = render 'answerbox', a: @answer
\ No newline at end of file
diff --git a/app/views/layouts/feed.haml b/app/views/layouts/feed.haml
index 25701108..3f373b6d 100644
--- a/app/views/layouts/feed.haml
+++ b/app/views/layouts/feed.haml
@@ -1,5 +1,5 @@
 = render 'navigation/feed'
-.container.j2-page
+.container.container--main
   .row
     .col-md-3.col-sm-4.d-none.d-sm-block
       = render 'shared/sidebar'
diff --git a/app/views/layouts/inbox.haml b/app/views/layouts/inbox.haml
index 085b0aee..625bdfcd 100644
--- a/app/views/layouts/inbox.haml
+++ b/app/views/layouts/inbox.haml
@@ -1,4 +1,4 @@
-.container.j2-page
+.container.container--main
   .row
     .col-md-3.col-xs-12.col-sm-4.order-2.order-sm-1
       = render 'inbox/sidebar'
diff --git a/app/views/layouts/moderation.haml b/app/views/layouts/moderation.haml
index 761fae5f..18fb60a6 100644
--- a/app/views/layouts/moderation.haml
+++ b/app/views/layouts/moderation.haml
@@ -1,5 +1,5 @@
 = render 'navigation/moderation'
-.container.j2-page
+.container.container--main
   .row
     .col-md-3.col-sm-4.col-xs-12
       = render 'tabs/moderation'
diff --git a/app/views/layouts/notifications.haml b/app/views/layouts/notifications.haml
index fe56bcbd..83d74825 100644
--- a/app/views/layouts/notifications.haml
+++ b/app/views/layouts/notifications.haml
@@ -1,5 +1,5 @@
 = render 'navigation/notification'
-.container.j2-page
+.container.container--main
   .row
     .col-md-3.col-xs-12.col-sm-4
       = render 'tabs/notifications'
diff --git a/app/views/layouts/user/settings.haml b/app/views/layouts/user/settings.haml
index ab396d4b..e63f29ba 100644
--- a/app/views/layouts/user/settings.haml
+++ b/app/views/layouts/user/settings.haml
@@ -1,4 +1,4 @@
-.container.j2-page
+.container.container--main
   .row
     .col-md-3.col-xs-12.col-sm-4
       = render 'tabs/settings'
diff --git a/app/views/modal/group/_item.haml b/app/views/modal/group/_item.haml
index 043810ce..c060abc8 100644
--- a/app/views/modal/group/_item.haml
+++ b/app/views/modal/group/_item.haml
@@ -10,6 +10,6 @@
         %span{id: "#{group.name}-members"}= group.members.count
         = t 'views.modal.group.members'
         ·
-        %a.j2-delete#delete-group{href: "#", data: { group: group.name }}
+        %a.text-danger#delete-group{href: "#", data: { group: group.name }}
           %i.fa.fa-close
           = t 'views.actions.delete'
diff --git a/app/views/modal/privileges/_item.haml b/app/views/modal/privileges/_item.haml
index 5164a049..47c6380e 100644
--- a/app/views/modal/privileges/_item.haml
+++ b/app/views/modal/privileges/_item.haml
@@ -4,8 +4,8 @@
 - checked = requires_role ? user.has_role?(role_mapping.fetch(privilege, privilege).to_sym) : user.public_send("#{privilege}?")
 %li.list-group-item{id: "privilege-#{privilege}"}
   .media
-    .pull-left.j2-table
-      %input.input--center{type: :checkbox, name: 'check-your-privileges', data: { type: privilege, user: user.screen_name }, checked: checked, autocomplete: 'off'}
+    .pull-left
+      %input{type: :checkbox, name: 'check-your-privileges', data: { type: privilege, user: user.screen_name }, checked: checked, autocomplete: 'off'}
     .media-body
       .list-group-item-heading= privilege.capitalize
       - unless description.blank?
diff --git a/app/views/shared/_links.html.haml b/app/views/shared/_links.html.haml
index fc06b75c..2c85b582 100644
--- a/app/views/shared/_links.html.haml
+++ b/app/views/shared/_links.html.haml
@@ -1,4 +1,4 @@
-.text-center.text-muted.links
+.text-center.text-muted.pb-3
   &copy;
   = Date.today.year
   = APP_CONFIG['site_name']
diff --git a/app/views/static/privacy_policy.html.haml b/app/views/static/privacy_policy.html.haml
index f4efae48..15c9f8aa 100644
--- a/app/views/static/privacy_policy.html.haml
+++ b/app/views/static/privacy_policy.html.haml
@@ -1,5 +1,5 @@
 - provide(:title, generate_title("Privacy Policy"))
-.container.j2-page
+.container.container--main
   .card
     .card-body
       = raw_markdown_io "service-docs/en/policy/privacy.md"
diff --git a/app/views/static/terms.html.haml b/app/views/static/terms.html.haml
index c474715e..792ede73 100644
--- a/app/views/static/terms.html.haml
+++ b/app/views/static/terms.html.haml
@@ -1,5 +1,5 @@
 - provide(:title, generate_title("Terms of Service"))
-.container.j2-page
+.container.container--main
   .card
     .card-body
       = raw_markdown_io "service-docs/en/policy/terms.md"
diff --git a/app/views/user/groups.haml b/app/views/user/groups.haml
index 9d550b37..0f08b0cf 100644
--- a/app/views/user/groups.haml
+++ b/app/views/user/groups.haml
@@ -1,6 +1,3 @@
-%h1.j2-lh.hidden-xs Groups
-%h1.visible-xs Groups
-
 %ul
   - @groups.each do |group|
     %li

From 948bc27810c15db7b0da57031c2c84884e17429f Mon Sep 17 00:00:00 2001
From: Andreas Nedbal <andy@pixelde.su>
Date: Sat, 2 May 2020 17:37:42 +0200
Subject: [PATCH 084/172] Add body element scss file for body style adjustments

---
 app/assets/stylesheets/elements/_body.scss | 6 ++++++
 1 file changed, 6 insertions(+)
 create mode 100644 app/assets/stylesheets/elements/_body.scss

diff --git a/app/assets/stylesheets/elements/_body.scss b/app/assets/stylesheets/elements/_body.scss
new file mode 100644
index 00000000..f2cec521
--- /dev/null
+++ b/app/assets/stylesheets/elements/_body.scss
@@ -0,0 +1,6 @@
+body {
+  overflow-y: scroll;
+  word-wrap: break-word;
+  background-color: var(--background);
+  padding-top: $navbar-height;
+}
\ No newline at end of file

From 22ef4f4656cc81611aa6c0bbe987d310643299a2 Mon Sep 17 00:00:00 2001
From: Andreas Nedbal <andy@pixelde.su>
Date: Sat, 2 May 2020 17:37:58 +0200
Subject: [PATCH 085/172] Add smiles scss component

---
 app/assets/stylesheets/components/_smiles.scss | 3 +++
 1 file changed, 3 insertions(+)
 create mode 100644 app/assets/stylesheets/components/_smiles.scss

diff --git a/app/assets/stylesheets/components/_smiles.scss b/app/assets/stylesheets/components/_smiles.scss
new file mode 100644
index 00000000..ddb2d86a
--- /dev/null
+++ b/app/assets/stylesheets/components/_smiles.scss
@@ -0,0 +1,3 @@
+.smiles {
+  margin-bottom: map-get($spacers, 2);
+}
\ No newline at end of file

From f40435da4bbe07c09f0c97e295b9a6dafe120f97 Mon Sep 17 00:00:00 2001
From: Andreas Nedbal <andy@pixelde.su>
Date: Sat, 2 May 2020 17:38:23 +0200
Subject: [PATCH 086/172] Remove unused classes from base and add imports to
 main file

---
 app/assets/stylesheets/application.scss | 25 ++++++-
 app/assets/stylesheets/base.css.scss    | 88 +------------------------
 2 files changed, 25 insertions(+), 88 deletions(-)

diff --git a/app/assets/stylesheets/application.scss b/app/assets/stylesheets/application.scss
index 4e62ff6d..38e150ea 100644
--- a/app/assets/stylesheets/application.scss
+++ b/app/assets/stylesheets/application.scss
@@ -51,11 +51,22 @@
 "overrides/colors",
 "overrides/card",
 "overrides/dropdown",
+"overrides/growls",
 "overrides/inputs",
 "overrides/links",
 "overrides/list-group",
 "overrides/minicolors",
-"overrides/navbar";
+"overrides/navbar",
+"overrides/sweet-alert";
+
+/**
+ ELEMENTS
+ ----------------------------------------------
+ Styles directly applied to HTML elements
+ */
+
+@import
+"elements/body";
 
 /**
  COMPONENTS
@@ -66,11 +77,23 @@
 @import
 "components/avatars",
 "components/buttons",
+"components/container",
 "components/entry",
 "components/jumbotron",
 "components/notifications",
 "components/profile",
 "components/question",
+"components/smiles",
 "components/userbox";
 
+/**
+ UTILITIES
+ ----------------------------------------------
+ Classes used for very specific cases
+ */
+
+@import
+"utilities";
+
+
 @import "base";
diff --git a/app/assets/stylesheets/base.css.scss b/app/assets/stylesheets/base.css.scss
index 0b993c18..4e4f9f9f 100644
--- a/app/assets/stylesheets/base.css.scss
+++ b/app/assets/stylesheets/base.css.scss
@@ -1,94 +1,8 @@
 /* all custom SCSS should go into here */
 
-body {
-  overflow-y: scroll;
-  word-wrap: break-word;
-  background-color: var(--background);
-  padding-top: 50px;
-}
-
 @import "scss/flags";
 @import "scss/variable";
 @import "scss/generic";
 @import "scss/answerbox";
 @import "scss/comments";
-@import "scss/panel";
-
-.j2-page {
-  padding-top: 30px;
-}
-
-.ios-web-app {
-  padding-top: 1em;
-}
-
-#load-more-btn {
-  margin-bottom: 1.5em;
-}
-
-.smiles {
-  margin-bottom: 7px;
-}
-
-.j2-lh {
-  margin-top: 48px;
-}
-
-.j2-up {
-  text-transform: uppercase;
-}
-
-.j2-label {
-  display: inline-block;
-}
-
-.j2-table {
-  display: table;
-}
-
-.input--center {
-  display: table-cell;
-  vertical-align: middle;
-}
-
-.sweet-overlay {
-  z-index: 1031;
-}
-
-#create-group {
-  margin-top: 5px;
-}
-
-.j2-delete {
-  color: theme-color('danger');
-  text-decoration: none;
-}
-
-.j2-navbar {
-  margin-bottom: 0px;
-}
-
-@include media-breakpoint-down(xs) {
-  .j2-col-reset {
-    padding-left: 0px;
-    padding-right: 0px;
-  }
-}
-
-#growls.default{
-  top:64px;
-  right:10px
-}
-
-.links {
-  padding-bottom: 10px;
-}
-
-#profile {
-  border-color: transparent;
-  border-width: 0px;
-}
-
-.heading-about {
-  margin-top: 0px;
-}
+@import "scss/panel";
\ No newline at end of file

From 7601da1975bc89d44fff5cf5576965959e92b0eb Mon Sep 17 00:00:00 2001
From: Andreas Nedbal <andy@pixelde.su>
Date: Sat, 2 May 2020 17:44:43 +0200
Subject: [PATCH 087/172] Remove unused panel styles

---
 app/assets/stylesheets/base.css.scss   |  3 +--
 app/assets/stylesheets/scss/panel.scss | 14 --------------
 2 files changed, 1 insertion(+), 16 deletions(-)
 delete mode 100644 app/assets/stylesheets/scss/panel.scss

diff --git a/app/assets/stylesheets/base.css.scss b/app/assets/stylesheets/base.css.scss
index 4e4f9f9f..6102afb4 100644
--- a/app/assets/stylesheets/base.css.scss
+++ b/app/assets/stylesheets/base.css.scss
@@ -4,5 +4,4 @@
 @import "scss/variable";
 @import "scss/generic";
 @import "scss/answerbox";
-@import "scss/comments";
-@import "scss/panel";
\ No newline at end of file
+@import "scss/comments";
\ No newline at end of file
diff --git a/app/assets/stylesheets/scss/panel.scss b/app/assets/stylesheets/scss/panel.scss
deleted file mode 100644
index 7ae74344..00000000
--- a/app/assets/stylesheets/scss/panel.scss
+++ /dev/null
@@ -1,14 +0,0 @@
-.panel-primary .text-muted a, .panel-primary .text-muted a:hover {
-  color: #fff;
-  text-decoration: none;
-  opacity: 1;
-}
-
-.panel-primary .text-muted {
-  color: #fff;
-  opacity: 0.7;
-}
-
-.panel-primary .answerbox--question-text {
-  color: #fff;
-}

From 1f5ec4e28d71fe3e30ec22938fc715d845b731b2 Mon Sep 17 00:00:00 2001
From: Andreas Nedbal <andy@pixelde.su>
Date: Sat, 2 May 2020 17:47:07 +0200
Subject: [PATCH 088/172] Remove unused variable file

---
 app/assets/stylesheets/base.css.scss      | 1 -
 app/assets/stylesheets/scss/variable.scss | 2 --
 2 files changed, 3 deletions(-)
 delete mode 100644 app/assets/stylesheets/scss/variable.scss

diff --git a/app/assets/stylesheets/base.css.scss b/app/assets/stylesheets/base.css.scss
index 6102afb4..21cd5a7b 100644
--- a/app/assets/stylesheets/base.css.scss
+++ b/app/assets/stylesheets/base.css.scss
@@ -1,7 +1,6 @@
 /* all custom SCSS should go into here */
 
 @import "scss/flags";
-@import "scss/variable";
 @import "scss/generic";
 @import "scss/answerbox";
 @import "scss/comments";
\ No newline at end of file
diff --git a/app/assets/stylesheets/scss/variable.scss b/app/assets/stylesheets/scss/variable.scss
deleted file mode 100644
index 56c04a46..00000000
--- a/app/assets/stylesheets/scss/variable.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-$main-color: #5e35b1;
-$black: #000;

From 28c21dcc3d8280a9bdc6652c6c6fd024a558129d Mon Sep 17 00:00:00 2001
From: Andreas Nedbal <andy@pixelde.su>
Date: Sat, 2 May 2020 18:12:55 +0200
Subject: [PATCH 089/172] Refactor smile user list styles

---
 app/assets/stylesheets/base.css.scss          |  1 -
 .../stylesheets/components/_smiles.scss       | 24 +++++++++++++++++
 app/assets/stylesheets/scss/generic.scss      | 26 -------------------
 app/views/modal/_comment_smiles.haml          |  6 ++---
 4 files changed, 27 insertions(+), 30 deletions(-)
 delete mode 100644 app/assets/stylesheets/scss/generic.scss

diff --git a/app/assets/stylesheets/base.css.scss b/app/assets/stylesheets/base.css.scss
index 21cd5a7b..19298aba 100644
--- a/app/assets/stylesheets/base.css.scss
+++ b/app/assets/stylesheets/base.css.scss
@@ -1,6 +1,5 @@
 /* all custom SCSS should go into here */
 
 @import "scss/flags";
-@import "scss/generic";
 @import "scss/answerbox";
 @import "scss/comments";
\ No newline at end of file
diff --git a/app/assets/stylesheets/components/_smiles.scss b/app/assets/stylesheets/components/_smiles.scss
index ddb2d86a..fa1aceae 100644
--- a/app/assets/stylesheets/components/_smiles.scss
+++ b/app/assets/stylesheets/components/_smiles.scss
@@ -1,3 +1,27 @@
 .smiles {
   margin-bottom: map-get($spacers, 2);
+
+  &__user-list {
+    margin: 0;
+    padding: 0;
+  }
+    
+  &__user-list-entry {
+    margin-bottom: map-get($spacers, 3);
+    
+    * {
+      display: inline-block;
+      vertical-align: middle;
+    }
+  
+    img {
+      height: map-get($avatar-sizes, "lg");
+      width: map-get($avatar-sizes, "lg");
+      border-radius: $avatar-border-radius;
+    }
+  
+    span {
+      margin-left: 5px;
+    }
+  }
 }
\ No newline at end of file
diff --git a/app/assets/stylesheets/scss/generic.scss b/app/assets/stylesheets/scss/generic.scss
deleted file mode 100644
index f4ecb99c..00000000
--- a/app/assets/stylesheets/scss/generic.scss
+++ /dev/null
@@ -1,26 +0,0 @@
-.user-list {
-  margin: 0;
-  padding: 0;
-}
-
-.user-list-entry-smiles {
-  * {
-    display: inline-block;
-    vertical-align: middle;
-  }
-
-  img {
-    height: 64px
-  }
-
-  span {
-    margin-left: 5px;
-  }
-
-  a:hover {
-    text-decoration: none;
-    span {
-      text-decoration: underline;
-    }
-  }
-}
diff --git a/app/views/modal/_comment_smiles.haml b/app/views/modal/_comment_smiles.haml
index 53f5caef..0e15e327 100644
--- a/app/views/modal/_comment_smiles.haml
+++ b/app/views/modal/_comment_smiles.haml
@@ -10,9 +10,9 @@
         - if comment.smiles.all.count == 0
           = t 'views.answerbox.no_smile'
         - else
-          %ul.user-list.user-list-smiles
+          %ul.smiles__user-list
             - comment.smiles.all.each do |smile|
-              %li.user-list-entry.user-list-entry-smiles
+              %li.smiles__user-list-entry
                 %a{href: show_user_profile_path(smile.user.screen_name)}
-                  %img.img-rounded{src: smile.user.profile_picture.url(:medium), alt: user_screen_name(smile.user, url: false)}
+                  %img{src: smile.user.profile_picture.url(:medium), alt: user_screen_name(smile.user, url: false)}
                   %span= user_screen_name(smile.user, url: false)

From 2a8a80e859f839c4fedcd7bf8a1192f820916fd2 Mon Sep 17 00:00:00 2001
From: Andreas Nedbal <andy@pixelde.su>
Date: Sat, 2 May 2020 18:29:04 +0200
Subject: [PATCH 090/172] Refactor locale panel styles

---
 app/assets/stylesheets/application.scss                  | 1 +
 app/assets/stylesheets/base.css.scss                     | 1 -
 .../{scss/flags.scss => components/_locales.scss}        | 9 ++++-----
 app/views/shared/_locales.haml                           | 2 +-
 4 files changed, 6 insertions(+), 7 deletions(-)
 rename app/assets/stylesheets/{scss/flags.scss => components/_locales.scss} (79%)

diff --git a/app/assets/stylesheets/application.scss b/app/assets/stylesheets/application.scss
index 38e150ea..bc77e7ca 100644
--- a/app/assets/stylesheets/application.scss
+++ b/app/assets/stylesheets/application.scss
@@ -80,6 +80,7 @@
 "components/container",
 "components/entry",
 "components/jumbotron",
+"components/locales",
 "components/notifications",
 "components/profile",
 "components/question",
diff --git a/app/assets/stylesheets/base.css.scss b/app/assets/stylesheets/base.css.scss
index 19298aba..75cb4c14 100644
--- a/app/assets/stylesheets/base.css.scss
+++ b/app/assets/stylesheets/base.css.scss
@@ -1,5 +1,4 @@
 /* all custom SCSS should go into here */
 
-@import "scss/flags";
 @import "scss/answerbox";
 @import "scss/comments";
\ No newline at end of file
diff --git a/app/assets/stylesheets/scss/flags.scss b/app/assets/stylesheets/components/_locales.scss
similarity index 79%
rename from app/assets/stylesheets/scss/flags.scss
rename to app/assets/stylesheets/components/_locales.scss
index cee8e6e2..48a6ff5c 100644
--- a/app/assets/stylesheets/scss/flags.scss
+++ b/app/assets/stylesheets/components/_locales.scss
@@ -1,16 +1,15 @@
 .locales {
   text-align: center;
 
-  #locales-panel {
+  &__panel {
     position: relative;
     display:  none;
     padding:  5px;
 
     ul {
-      border-top:      1px solid #aaa;
       margin:          0;
       padding:         0;
-      padding-top:     5px;
+      padding-top:     map-get($spacers, 3);
       width:           100%;
       list-style:      none;
       display:         inline-flex;
@@ -18,9 +17,9 @@
       flex-wrap:       wrap;
       align-items:     center;
       justify-content: center;
+      
       li {
-        margin:     5px 10px;
-        margin-top: 0;
+        margin:     0 5px 10px 5px;
         flex:       0 0 auto;
 
         * {
diff --git a/app/views/shared/_locales.haml b/app/views/shared/_locales.haml
index 70a187f5..36b3e4cc 100644
--- a/app/views/shared/_locales.haml
+++ b/app/views/shared/_locales.haml
@@ -4,7 +4,7 @@
       %a{href: '#', id: 'locale-switch'}
         %i.fa.fa-globe
         = t('views.locale.languages')
-    #locales-panel
+    #locales-panel.locales__panel
       %ul
         - APP_LOCALES.each do |key, value|
           %li

From b508eb3f21ee83e359694b6295aa82d0ccddc86f Mon Sep 17 00:00:00 2001
From: Andreas Nedbal <andy@pixelde.su>
Date: Sat, 2 May 2020 20:35:28 +0200
Subject: [PATCH 091/172] Refactor and adjust answerbox styles

---
 app/assets/javascripts/answerbox/smile.coffee |  6 +-
 app/assets/javascripts/memes.coffee           |  2 +-
 app/assets/stylesheets/application.scss       |  1 +
 app/assets/stylesheets/base.css.scss          |  1 -
 .../stylesheets/components/_answerbox.scss    | 63 +++++++++++++++++++
 app/assets/stylesheets/scss/answerbox.scss    | 59 -----------------
 app/views/answerbox/_actions.haml             | 14 ++---
 app/views/answerbox/_comments.haml            |  2 +-
 app/views/answerbox/_header.haml              | 10 +--
 app/views/answerbox/_smiles.haml              |  2 +-
 app/views/application/_answerbox.haml         | 10 +--
 11 files changed, 87 insertions(+), 83 deletions(-)
 create mode 100644 app/assets/stylesheets/components/_answerbox.scss
 delete mode 100644 app/assets/stylesheets/scss/answerbox.scss

diff --git a/app/assets/javascripts/answerbox/smile.coffee b/app/assets/javascripts/answerbox/smile.coffee
index 8a9b9769..b16adb66 100644
--- a/app/assets/javascripts/answerbox/smile.coffee
+++ b/app/assets/javascripts/answerbox/smile.coffee
@@ -3,7 +3,7 @@ $(document).on "click", "button[name=ab-smile]", ->
   aid = btn[0].dataset.aId
   action = btn[0].dataset.action
   count = Number $("span#ab-smile-count-#{aid}").html()
-  btn[0].dataset.loadingText = "<i class=\"fa fa-meh-o fa-spin\"></i> <span id=\"ab-smile-count-#{aid}\">#{count}</span>"
+  btn[0].dataset.loadingText = "<i class=\"fa fa-fw fa-meh-o fa-spin\"></i> <span id=\"ab-smile-count-#{aid}\">#{count}</span>"
   btn.button "loading"
 
   target_url = switch action
@@ -36,8 +36,8 @@ $(document).on "click", "button[name=ab-smile]", ->
           switch action
             when 'smile'
               btn[0].dataset.action = 'unsmile'
-              btn.html "<i class=\"fa fa-frown-o\"></i> <span id=\"ab-smile-count-#{aid}\">#{count}</span>"
+              btn.html "<i class=\"fa fa-fw fa-frown-o\"></i> <span id=\"ab-smile-count-#{aid}\">#{count}</span>"
             when 'unsmile'
               btn[0].dataset.action = 'smile'
-              btn.html "<i class=\"fa fa-smile-o\"></i> <span id=\"ab-smile-count-#{aid}\">#{count}</span>"
+              btn.html "<i class=\"fa fa-fw fa-smile-o\"></i> <span id=\"ab-smile-count-#{aid}\">#{count}</span>"
       , 20
diff --git a/app/assets/javascripts/memes.coffee b/app/assets/javascripts/memes.coffee
index 873d34d0..33cc2341 100644
--- a/app/assets/javascripts/memes.coffee
+++ b/app/assets/javascripts/memes.coffee
@@ -1,3 +1,3 @@
 cheet 'up up down down left right left right b a', ->
   ($ "body").addClass 'fa-spin'
-  ($ "p.answerbox--question-text").each (i) -> ($ this).html ":^)"
\ No newline at end of file
+  ($ "p.answerbox__question-text").each (i) -> ($ this).html ":^)"
\ No newline at end of file
diff --git a/app/assets/stylesheets/application.scss b/app/assets/stylesheets/application.scss
index bc77e7ca..30ef570f 100644
--- a/app/assets/stylesheets/application.scss
+++ b/app/assets/stylesheets/application.scss
@@ -75,6 +75,7 @@
  */
 
 @import
+"components/answerbox",
 "components/avatars",
 "components/buttons",
 "components/container",
diff --git a/app/assets/stylesheets/base.css.scss b/app/assets/stylesheets/base.css.scss
index 75cb4c14..f647663d 100644
--- a/app/assets/stylesheets/base.css.scss
+++ b/app/assets/stylesheets/base.css.scss
@@ -1,4 +1,3 @@
 /* all custom SCSS should go into here */
 
-@import "scss/answerbox";
 @import "scss/comments";
\ No newline at end of file
diff --git a/app/assets/stylesheets/components/_answerbox.scss b/app/assets/stylesheets/components/_answerbox.scss
new file mode 100644
index 00000000..198efc7f
--- /dev/null
+++ b/app/assets/stylesheets/components/_answerbox.scss
@@ -0,0 +1,63 @@
+.answerbox {
+  &__question-text, 
+  &__question-user, 
+  &__answer-user, 
+  &__answer-date {
+    margin-bottom: 0px;
+    overflow: hidden;
+  }
+  
+  &__answer-date {
+    font-size: .8rem;
+    line-height: .8;
+    overflow: visible;
+  }
+
+  &__answer-text {
+    margin-bottom: map-get($spacers, 3);
+  }
+
+  &__question-user-avatar,
+  &__answer-user-avatar {
+    margin-right: map-get($spacers, 2);
+    border-radius: $avatar-border-radius;
+  }
+
+  & .text-muted a, 
+  & .text-muted a:hover {
+    color: var(--muted-text);
+    text-decoration: none;
+  }
+
+  &__action {
+    padding-left: map-get($spacers, 1);
+    padding-right: map-get($spacers, 1);
+
+    & i {
+      font-size: 1.4rem;
+      vertical-align: top;
+    }
+
+    &:hover,
+    &:focus,
+    &:active {
+      text-decoration: none;
+    }
+
+    &[name="ab-smile"] {
+      color: var(--primary);
+
+      &:hover {
+        color: var(--success);
+      }
+
+      &[data-action="unsmile"] {
+        color: var(--success);
+        
+        &:hover {
+          color: var(--danger);
+        }
+      }
+    }
+  }
+}
\ No newline at end of file
diff --git a/app/assets/stylesheets/scss/answerbox.scss b/app/assets/stylesheets/scss/answerbox.scss
deleted file mode 100644
index 362efe92..00000000
--- a/app/assets/stylesheets/scss/answerbox.scss
+++ /dev/null
@@ -1,59 +0,0 @@
-.answerbox .text-muted a, .answerbox .text-muted a:hover {
-  color: $gray;
-  text-decoration: none;
-}
-
-.answerbox--img {
-  min-height: 32px;
-  min-width: 32px;
-  height: 32px;
-  width: 32px;
-}
-
-.answerbox--img-small {
-  min-height: 20px;
-  min-width: 20px;
-  height: 20px;
-  width: 20px;
-}
-
-.answerbox--question-text, .answerbox--question-user, .answerbox--answer-user, .answerbox--answer-date {
-  margin-bottom: 0px;
-  overflow: hidden;
-}
-
-.answerbox--question-text {
-  color: $gray;
-}
-
-.answerbox--answer-text {
-  font-size: 16px;
-  color: #000;
-  line-height: 1.3em;
-}
-
-.answerbox--question-text {
-  line-height: 1.3em;
-  overflow: hidden;
-}
-
-.answerbox--answer-date {
-  font-size: 12px;
-  line-height: 1.3em;
-}
-
-.answerbox [name="ab-smile"], .answerbox [name="ab-smile-comment"] {
-  padding: 6px 11px;
-  padding-left: 21px;
-  position: relative;
-  overflow: hidden;
-  border: none;
-
-  i.fa.fa-smile-o, i.fa.fa-frown-o, i.fa.fa-meh-o {
-    position: absolute;
-    font-size: 3em;
-    left: -13px;
-    top: -10px;
-    display: block;
-  }
-}
diff --git a/app/views/answerbox/_actions.haml b/app/views/answerbox/_actions.haml
index a41345cb..6f04c009 100644
--- a/app/views/answerbox/_actions.haml
+++ b/app/views/answerbox/_actions.haml
@@ -1,4 +1,4 @@
-%span.hidden-xs.text-muted
+%span.d-none.d-sm-inline.text-muted
   - unless user_signed_in?
     - if a.smile_count > 0
       %button.btn.btn-info.btn-sm{name: 'ab-smile', disabled: true}
@@ -6,16 +6,16 @@
         %span{id: "ab-smile-count-#{a.id}"}= a.smile_count
 - if user_signed_in?
   - if current_user.smiled? a
-    %button.btn.btn-info.btn-sm{type: :button, name: 'ab-smile', data: { a_id: a.id, action: :unsmile }}
-      %i.fa.fa-frown-o
+    %button.btn.btn-link.answerbox__action{type: :button, name: 'ab-smile', data: { a_id: a.id, action: :unsmile }}
+      %i.fa.fa-fw.fa-frown-o
       %span{id: "ab-smile-count-#{a.id}"}= a.smile_count
   - else
-    %button.btn.btn-info.btn-sm{type: :button, name: 'ab-smile', data: { a_id: a.id, action: :smile }}
-      %i.fa.fa-smile-o
+    %button.btn.btn-link.answerbox__action{type: :button, name: 'ab-smile', data: { a_id: a.id, action: :smile }}
+      %i.fa.fa-fw.fa-smile-o
       %span{id: "ab-smile-count-#{a.id}"}= a.smile_count
 - unless @display_all
-  %button.btn.btn-primary.btn-sm{type: :button, name: 'ab-comments', data: { a_id: a.id, state: :hidden }}
-    %i.fa.fa-comments
+  %button.btn.btn-link.answerbox__action{type: :button, name: 'ab-comments', data: { a_id: a.id, state: :hidden }}
+    %i.fa.fa-fw.fa-comments
     %span{id: "ab-comment-count-#{a.id}"}= a.comment_count
 - if user_signed_in?
   .btn-group
diff --git a/app/views/answerbox/_comments.haml b/app/views/answerbox/_comments.haml
index 17eacd2b..ce4687c8 100644
--- a/app/views/answerbox/_comments.haml
+++ b/app/views/answerbox/_comments.haml
@@ -7,7 +7,7 @@
         %div{class: "ab-comment-smile-list", style: "height: 0; width: 0"}= render "modal/comment_smiles", comment: comment
         .media.comments--media
           .pull-left
-            %img.img-rounded.answerbox--img{src: comment.user.profile_picture.url(:medium)}
+            %img.avatar-sm{src: comment.user.profile_picture.url(:medium)}
           .media-body.comments--body
             %h6.media-heading.answerbox--question-user
               = user_screen_name comment.user
diff --git a/app/views/answerbox/_header.haml b/app/views/answerbox/_header.haml
index db7b486e..d4d7c8ab 100644
--- a/app/views/answerbox/_header.haml
+++ b/app/views/answerbox/_header.haml
@@ -1,9 +1,9 @@
 .card-header
-  .media.question-media
+  .media
     - unless a.question.author_is_anonymous
       %a.pull-left{href: show_user_profile_path(a.question.user.screen_name)}
-        %img.img-rounded.answerbox--img{src: a.question.user.profile_picture.url(:medium)}
-    .media-body.question-body
+        %img.answerbox__question-user-avatar.avatar-md{src: a.question.user.profile_picture.url(:medium)}
+    .media-body
       - if user_signed_in?
         .pull-right
           .btn-group
@@ -18,12 +18,12 @@
                 %a.dropdown-item{href: '#', tabindex: -1, data: { action: 'ab-question-report', q_id: a.question.id }}
                   %i.fa.fa-exclamation-triangle
                   = t 'views.actions.report'
-      %h6.text-muted.media-heading.answerbox--question-user
+      %h6.text-muted.media-heading.answerbox__question-user
         = raw t('views.answerbox.asked', user: user_screen_name(a.question.user, anonymous: a.question.author_is_anonymous), time: time_tooltip(a.question))
         - unless a.question.author_is_anonymous
           - if a.question.answer_count > 1
             ·
             %a{href: show_user_question_path(a.question.user.screen_name, a.question.id)}
               = pluralize(a.question.answer_count, t('views.general.answer'))
-      .answerbox--question-text
+      .answerbox__question-text
         = a.question.content
\ No newline at end of file
diff --git a/app/views/answerbox/_smiles.haml b/app/views/answerbox/_smiles.haml
index 119086a6..ef9a8a4f 100644
--- a/app/views/answerbox/_smiles.haml
+++ b/app/views/answerbox/_smiles.haml
@@ -7,4 +7,4 @@
     - else
       - a.smiles.all.each do |smile|
         %a{href: show_user_profile_path(smile.user.screen_name), title: smile.user.screen_name, data: { toggle: :tooltip, placement: :top, smile_id: smile.id }}
-          %img.img-rounded.answerbox--img-small{src: smile.user.profile_picture.url(:medium)}
\ No newline at end of file
+          %img.avatar-xs{src: smile.user.profile_picture.url(:medium)}
\ No newline at end of file
diff --git a/app/views/application/_answerbox.haml b/app/views/application/_answerbox.haml
index 43d86916..b7c343fc 100644
--- a/app/views/application/_answerbox.haml
+++ b/app/views/application/_answerbox.haml
@@ -3,7 +3,7 @@
     = render "answerbox/header", a: a
   .card-body
     - if @display_all.nil?
-      .answerbox--answer-text
+      .answerbox__answer-text
         = markdown a.content[0..255]
         - if a.content.length > 255
           [...]
@@ -11,7 +11,7 @@
             %a.btn.btn-primary{href: show_user_answer_path(a.user.screen_name, a.id)}
               = t 'views.answerbox.read'
     - else
-      .answerbox--answer-text
+      .answerbox__answer-text
         = markdown a.content
     - if @user.nil?
       .row
@@ -19,11 +19,11 @@
           .media
             .pull-left
               %a{href: show_user_profile_path(a.user.screen_name)}
-                %img.img-rounded.answerbox--img{src: a.user.profile_picture.url(:medium)}
+                %img.answerbox__answer-user-avatar.avatar-sm{src: a.user.profile_picture.url(:medium)}
             .media-body
-              %h6.media-heading.answerbox--answer-user
+              %h6.media-heading.answerbox__answer-user
                 = raw t('views.answerbox.answered', hide: hidespan(t('views.answerbox.hide'), "xs"), user: user_screen_name(a.user))
-              .answerbox--answer-date
+              .answerbox__answer-date
                 = link_to(raw(t('views.answerbox.time', time: time_tooltip(a))), show_user_answer_path(a.user.screen_name, a.id))
         .col-md-6.col-sm-8.col-xs-6.text-right
           = render 'answerbox/actions', a: a

From 85d97b0c7188479bb7b67751f649ee4689388d35 Mon Sep 17 00:00:00 2001
From: Andreas Nedbal <andy@pixelde.su>
Date: Sat, 2 May 2020 20:35:48 +0200
Subject: [PATCH 092/172] Rename changed classes across templates

---
 app/views/discover/_userbox.html.haml         | 2 +-
 app/views/inbox/_entry.html.haml              | 4 ++--
 app/views/moderation/_discussion.html.haml    | 2 +-
 app/views/moderation/_moderationbox.html.haml | 2 +-
 app/views/question/_question.haml             | 4 ++--
 app/views/shared/_question.html.haml          | 2 +-
 app/views/shared/_sidebar.haml                | 2 +-
 7 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/app/views/discover/_userbox.html.haml b/app/views/discover/_userbox.html.haml
index a61ba4d1..0f0fa626 100644
--- a/app/views/discover/_userbox.html.haml
+++ b/app/views/discover/_userbox.html.haml
@@ -13,7 +13,7 @@
             %a{href: show_user_profile_path(u.screen_name)}
               %span= u.display_name
             %span.text-muted= "@#{u.screen_name}"
-        %p.answerbox--question-text
+        %p.answerbox__question-text
           - if type == "new"
             = t('views.discover.userbox.new', time: time_ago_in_words(u.created_at))
           - elsif type == "most"
diff --git a/app/views/inbox/_entry.html.haml b/app/views/inbox/_entry.html.haml
index fa42ad80..a93b6338 100644
--- a/app/views/inbox/_entry.html.haml
+++ b/app/views/inbox/_entry.html.haml
@@ -3,7 +3,7 @@
     .media
       - unless i.question.author_is_anonymous
         %a.pull-left{href: show_user_profile_path(i.question.user.screen_name)}
-          %img.img-rounded.answerbox--img{src: i.question.user.profile_picture.url(:medium)}
+          %img.avatar-sm{src: i.question.user.profile_picture.url(:medium)}
       .media-body
         %h6.text-muted.media-heading.answerbox--question-user
           = raw t('views.inbox.entry.asked', user: user_screen_name(i.question.user, anonymous: i.question.author_is_anonymous), time: time_tooltip(i.question))
@@ -12,7 +12,7 @@
               ·
               %a{href: show_user_question_path(i.question.user.screen_name, i.question.id)}
                 = pluralize(i.question.answer_count, t('views.inbox.entry.response'))
-        %p.answerbox--question-text= i.question.content
+        %p.answerbox__question-text= i.question.content
   .card-body
     %textarea.form-control{name: 'ib-answer', placeholder: t('views.placeholder.inbox'), data: { id: i.id }}
     %br/
diff --git a/app/views/moderation/_discussion.html.haml b/app/views/moderation/_discussion.html.haml
index 6e791284..715ccc18 100644
--- a/app/views/moderation/_discussion.html.haml
+++ b/app/views/moderation/_discussion.html.haml
@@ -6,7 +6,7 @@
       %li{data: { comment_id: comment.id }}
         .media.comments--media
           .pull-left
-            %img.img-rounded.answerbox--img{src: comment.user.profile_picture.url(:medium)}
+            %img.avatar-sm{src: comment.user.profile_picture.url(:medium)}
           .media-body.comments--body
             %h6.media-heading.answerbox--question-user
               = user_screen_name comment.user
diff --git a/app/views/moderation/_moderationbox.html.haml b/app/views/moderation/_moderationbox.html.haml
index 78daa565..122582cb 100644
--- a/app/views/moderation/_moderationbox.html.haml
+++ b/app/views/moderation/_moderationbox.html.haml
@@ -1,7 +1,7 @@
 - unless report.nil? or report.target.nil? or report.user.nil? or report.type.nil?
   .card.moderationbox{data: { id: report.id }}
     .card-header
-      %img.img-rounded.answerbox--img{src: report.user.profile_picture.url(:medium)}
+      %img.avatar-sm{src: report.user.profile_picture.url(:medium)}
       = raw t('views.moderation.moderationbox.reported', user: user_screen_name(report.user), content: report.type.sub('Reports::', ''), time: time_tooltip(report))
     .card-body
       %p
diff --git a/app/views/question/_question.haml b/app/views/question/_question.haml
index 456d79fa..ef1e336d 100644
--- a/app/views/question/_question.haml
+++ b/app/views/question/_question.haml
@@ -4,7 +4,7 @@
       .media.question-media
         - unless question.author_is_anonymous
           %a.pull-left{href: unless hidden then show_user_profile_path(question.user.screen_name) end}
-            %img.img-rounded.answerbox--img{src: question.user.profile_picture.url(:medium)}
+            %img.avatar-sm{src: question.user.profile_picture.url(:medium)}
         .media-body.question-body
           - if user_signed_in?
             .pull-right
@@ -28,4 +28,4 @@
               = user_screen_name question.user, anonymous: question.author_is_anonymous, url: false
             - else
               = raw t('views.answerbox.asked', user: user_screen_name(question.user, anonymous: question.author_is_anonymous), time: time_tooltip(question))
-          %p.answerbox--question-text= question.content
+          %p.answerbox__question-text= question.content
diff --git a/app/views/shared/_question.html.haml b/app/views/shared/_question.html.haml
index ff0f5e4d..e621ffcf 100644
--- a/app/views/shared/_question.html.haml
+++ b/app/views/shared/_question.html.haml
@@ -29,5 +29,5 @@
             ·
             %a{href: show_user_question_path(q.user.screen_name, q.id)}
               = pluralize(q.answer_count, t('views.general.answer'))
-        %p.answerbox--question-text
+        %p.answerbox__question-text
           = q.content
diff --git a/app/views/shared/_sidebar.haml b/app/views/shared/_sidebar.haml
index 02d57908..555d3079 100644
--- a/app/views/shared/_sidebar.haml
+++ b/app/views/shared/_sidebar.haml
@@ -22,6 +22,6 @@
     .card-body
       - @group.members.each do |member|
         %a{href: show_user_profile_path(member.user.screen_name), title: member.user.screen_name, data: { toggle: :tooltip, placement: :top }}
-          %img.img-rounded.answerbox--img-small{src: member.user.profile_picture.url(:medium)}
+          %img.avatar-xs{src: member.user.profile_picture.url(:medium)}
 
 = render 'shared/links'

From 9b38b1d7361e0d4633e24cf66362e5aa56492dc1 Mon Sep 17 00:00:00 2001
From: Andreas Nedbal <andy@pixelde.su>
Date: Sat, 2 May 2020 21:23:04 +0200
Subject: [PATCH 093/172] Refactor comment styles and layout

---
 app/assets/stylesheets/application.scss       |  4 +-
 app/assets/stylesheets/base.css.scss          |  3 -
 .../stylesheets/components/_answerbox.scss    |  3 +-
 .../stylesheets/components/_comments.scss     | 34 ++++++++
 app/assets/stylesheets/inbox.css.scss         |  3 -
 app/assets/stylesheets/scss/comments.scss     | 37 ---------
 app/assets/stylesheets/user.css.scss          |  3 -
 app/views/answerbox/_comments.haml            | 80 +++++++++----------
 8 files changed, 77 insertions(+), 90 deletions(-)
 delete mode 100644 app/assets/stylesheets/base.css.scss
 create mode 100644 app/assets/stylesheets/components/_comments.scss
 delete mode 100644 app/assets/stylesheets/inbox.css.scss
 delete mode 100644 app/assets/stylesheets/scss/comments.scss
 delete mode 100644 app/assets/stylesheets/user.css.scss

diff --git a/app/assets/stylesheets/application.scss b/app/assets/stylesheets/application.scss
index 30ef570f..745ee6f1 100644
--- a/app/assets/stylesheets/application.scss
+++ b/app/assets/stylesheets/application.scss
@@ -78,6 +78,7 @@
 "components/answerbox",
 "components/avatars",
 "components/buttons",
+"components/comments",
 "components/container",
 "components/entry",
 "components/jumbotron",
@@ -96,6 +97,3 @@
 
 @import
 "utilities";
-
-
-@import "base";
diff --git a/app/assets/stylesheets/base.css.scss b/app/assets/stylesheets/base.css.scss
deleted file mode 100644
index f647663d..00000000
--- a/app/assets/stylesheets/base.css.scss
+++ /dev/null
@@ -1,3 +0,0 @@
-/* all custom SCSS should go into here */
-
-@import "scss/comments";
\ No newline at end of file
diff --git a/app/assets/stylesheets/components/_answerbox.scss b/app/assets/stylesheets/components/_answerbox.scss
index 198efc7f..1c1209d6 100644
--- a/app/assets/stylesheets/components/_answerbox.scss
+++ b/app/assets/stylesheets/components/_answerbox.scss
@@ -44,7 +44,8 @@
       text-decoration: none;
     }
 
-    &[name="ab-smile"] {
+    &[name="ab-smile"],
+    &[name="ab-smile-comment"] {
       color: var(--primary);
 
       &:hover {
diff --git a/app/assets/stylesheets/components/_comments.scss b/app/assets/stylesheets/components/_comments.scss
new file mode 100644
index 00000000..2cadc515
--- /dev/null
+++ b/app/assets/stylesheets/components/_comments.scss
@@ -0,0 +1,34 @@
+.comment {
+  list-style-type: none;
+
+  &__container {
+    padding-left: 0;
+  }
+
+  &__user,
+  &__content {
+    margin-bottom: 0px;
+  }
+
+  &__user-avatar {
+    margin-right: map-get($spacers, 2);
+    border-radius: $avatar-border-radius;
+  }
+
+  &__input-group {
+    position: relative;
+  }
+
+  &__input {
+    z-index: 99;
+    padding-right: 2.5rem;
+  }
+
+  &__character-count {
+    position: absolute;
+    z-index: 100;
+    right: .5rem;
+    top: .5rem;
+  }
+}
+
diff --git a/app/assets/stylesheets/inbox.css.scss b/app/assets/stylesheets/inbox.css.scss
deleted file mode 100644
index 07a9c997..00000000
--- a/app/assets/stylesheets/inbox.css.scss
+++ /dev/null
@@ -1,3 +0,0 @@
-// Place all the styles related to the inbox controller here.
-// They will automatically be included in application.css.
-// You can use Sass (SCSS) here: http://sass-lang.com/
diff --git a/app/assets/stylesheets/scss/comments.scss b/app/assets/stylesheets/scss/comments.scss
deleted file mode 100644
index 08b73e2d..00000000
--- a/app/assets/stylesheets/scss/comments.scss
+++ /dev/null
@@ -1,37 +0,0 @@
-.comments {
-  padding-left: 0;
-}
-
-.comments li {
-  list-style-type: none;
-}
-
-.comments .pull-right {
-  margin-top: -13px;
-}
-
-.comments--box {
-  z-index: 99;
-}
-
-.comments--count {
-  z-index: 0;
-  margin-top: -2em;
-}
-
-.comments--body {
-  overflow: visible !important;
-}
-
-.comments--content {
-  overflow: hidden;
-  word-break: normal;
-}
-
-.comments--content p {
-  margin-bottom: 0px;
-}
-
-.comments--media {
-  overflow: visible !important;
-}
\ No newline at end of file
diff --git a/app/assets/stylesheets/user.css.scss b/app/assets/stylesheets/user.css.scss
deleted file mode 100644
index 7c5eca9c..00000000
--- a/app/assets/stylesheets/user.css.scss
+++ /dev/null
@@ -1,3 +0,0 @@
-// Place all the styles related to the user controller here.
-// They will automatically be included in application.css.
-// You can use Sass (SCSS) here: http://sass-lang.com/
diff --git a/app/views/answerbox/_comments.haml b/app/views/answerbox/_comments.haml
index ce4687c8..b543a5c5 100644
--- a/app/views/answerbox/_comments.haml
+++ b/app/views/answerbox/_comments.haml
@@ -1,52 +1,52 @@
 - if a.comments.all.count == 0
   = t 'views.answerbox.no_comment'
 - else
-  %ul.comments
+  %ul.comment__container
     - a.comments.order(:created_at).each do |comment|
-      %li{data: { comment_id: comment.id }}
+      %li.comment{data: { comment_id: comment.id }}
         %div{class: "ab-comment-smile-list", style: "height: 0; width: 0"}= render "modal/comment_smiles", comment: comment
-        .media.comments--media
+        .media
           .pull-left
-            %img.avatar-sm{src: comment.user.profile_picture.url(:medium)}
-          .media-body.comments--body
-            %h6.media-heading.answerbox--question-user
+            %img.comment__user-avatar.avatar-md{src: comment.user.profile_picture.url(:medium)}
+          .media-body
+            %h6.media-heading.comment__user
               = user_screen_name comment.user
               %span.text-muted{title: comment.created_at, data: { toggle: :tooltip, placement: :right }}
                 = "#{time_ago_in_words(comment.created_at)} ago"
-            .pull-right
-              %span.hidden-xs.text-muted
-                - unless user_signed_in?
-                  - if comment.smile_count > 0
-                    %button.btn.btn-info.btn-sm{name: 'ab-smile-comment', disabled: true}
-                      %i.fa.fa-smile-o
-                      %span{id: "ab-comment-smile-count-#{comment.id}"}= comment.smile_count
-              - if user_signed_in?
-                - if current_user.smiled_comment? comment
-                  %button.btn.btn-info.btn-sm{type: :button, name: 'ab-smile-comment', data: { c_id: comment.id, action: :unsmile }}
-                    %i.fa.fa-frown-o
-                    %span{id: "ab-comment-smile-count-#{comment.id}"}= comment.smile_count
-                - else
-                  %button.btn.btn-info.btn-sm{type: :button, name: 'ab-smile-comment', data: { c_id: comment.id, action: :smile }}
+            .comment__content
+              = markdown comment.content
+          .pull-right
+            %span.d-none.d-sm-inline.text-muted
+              - unless user_signed_in?
+                - if comment.smile_count > 0
+                  %button.btn.btn-link.answerbox__action{name: 'ab-smile-comment', disabled: true}
                     %i.fa.fa-smile-o
                     %span{id: "ab-comment-smile-count-#{comment.id}"}= comment.smile_count
-                .btn-group
-                  %button.btn.btn-link.btn-sm.dropdown-toggle{data: { toggle: :dropdown }, aria: { expanded: :false }}
-                    %span.caret
-                  .dropdown-menu.dropdown-menu-right{role: :menu}
-                    %a.dropdown-item{href: '#', type: :button, data: { target: "#modal-view-comment#{comment.id}-smiles", toggle: :modal}}
-                      %i.fa.fa-smile-o
-                      = t 'views.actions.view'
-                    - if privileged?(comment.user) or privileged?(a.user)
-                      %a.dropdown-item.text-danger{href: '#', data: { action: 'ab-comment-destroy', c_id: comment.id }}
-                        %i.fa.fa-trash-o
-                        = t 'views.actions.delete'
-                    - unless comment.user == current_user
-                      %a.dropdown-item{href: '#', data: { action: 'ab-comment-report', c_id: comment.id }}
-                        %i.fa.fa-exclamation-triangle
-                        = t 'views.acions.report'
-            .comments--content
-              = markdown comment.content
+            - if user_signed_in?
+              - if current_user.smiled_comment? comment
+                %button.btn.btn-link.answerbox__action{type: :button, name: 'ab-smile-comment', data: { c_id: comment.id, action: :unsmile }}
+                  %i.fa.fa-fw.fa-frown-o
+                  %span{id: "ab-comment-smile-count-#{comment.id}"}= comment.smile_count
+              - else
+                %button.btn.btn-link.answerbox__action{type: :button, name: 'ab-smile-comment', data: { c_id: comment.id, action: :smile }}
+                  %i.fa.fa-fw.fa-smile-o
+                  %span{id: "ab-comment-smile-count-#{comment.id}"}= comment.smile_count
+              .btn-group
+                %button.btn.btn-link.btn-sm.dropdown-toggle{data: { toggle: :dropdown }, aria: { expanded: :false }}
+                  %span.caret
+                .dropdown-menu.dropdown-menu-right{role: :menu}
+                  %a.dropdown-item{href: '#', type: :button, data: { target: "#modal-view-comment#{comment.id}-smiles", toggle: :modal}}
+                    %i.fa.fa-smile-o
+                    = t 'views.actions.view'
+                  - if privileged?(comment.user) or privileged?(a.user)
+                    %a.dropdown-item.text-danger{href: '#', data: { action: 'ab-comment-destroy', c_id: comment.id }}
+                      %i.fa.fa-trash-o
+                      = t 'views.actions.delete'
+                  - unless comment.user == current_user
+                    %a.dropdown-item{href: '#', data: { action: 'ab-comment-report', c_id: comment.id }}
+                      %i.fa.fa-exclamation-triangle
+                      = t 'views.acions.report'
 - if user_signed_in?
-  .form-group.has-feedback{name: 'ab-comment-new-group', data: { a_id: a.id }}
-    %input.form-control.comments--box{type: :text, placeholder: t('views.placeholder.comment'), name: 'ab-comment-new', data: {a_id: a.id }}
-    %span.text-muted.form-control-feedback.comments--count{id: "ab-comment-charcount-#{a.id}"} 160
+  .form-group.has-feedback.comment__input-group{name: 'ab-comment-new-group', data: { a_id: a.id }}
+    %input.form-control.comment__input{type: :text, placeholder: t('views.placeholder.comment'), name: 'ab-comment-new', data: {a_id: a.id }}
+    %span.text-muted.form-control-feedback.comment__character-count{id: "ab-comment-charcount-#{a.id}"} 160

From 51bef29acec57ecec287bc0dc751b2bfade521b5 Mon Sep 17 00:00:00 2001
From: Andreas Nedbal <andy@pixelde.su>
Date: Sun, 3 May 2020 17:28:19 +0200
Subject: [PATCH 094/172] More style adjustments to default and core elements

---
 app/assets/stylesheets/_variables.scss            |  2 +-
 app/assets/stylesheets/elements/_body.scss        |  1 +
 app/assets/stylesheets/overrides/_list-group.scss | 10 +++++++---
 3 files changed, 9 insertions(+), 4 deletions(-)

diff --git a/app/assets/stylesheets/_variables.scss b/app/assets/stylesheets/_variables.scss
index 9ee03557..58001523 100644
--- a/app/assets/stylesheets/_variables.scss
+++ b/app/assets/stylesheets/_variables.scss
@@ -83,8 +83,8 @@ $avatar-sizes: (
   --info-text: 255, 255, 255;
   --success-text: 255, 255, 255;
 
+  --body-text: 0, 0, 0;
   --muted-text: 108, 117, 125;
-
   --input-text: 0, 0, 0;
 }
 
diff --git a/app/assets/stylesheets/elements/_body.scss b/app/assets/stylesheets/elements/_body.scss
index f2cec521..92aa0578 100644
--- a/app/assets/stylesheets/elements/_body.scss
+++ b/app/assets/stylesheets/elements/_body.scss
@@ -1,6 +1,7 @@
 body {
   overflow-y: scroll;
   word-wrap: break-word;
+  color: RGB(var(--body-text));
   background-color: var(--background);
   padding-top: $navbar-height;
 }
\ No newline at end of file
diff --git a/app/assets/stylesheets/overrides/_list-group.scss b/app/assets/stylesheets/overrides/_list-group.scss
index a10a8df5..dfe82813 100644
--- a/app/assets/stylesheets/overrides/_list-group.scss
+++ b/app/assets/stylesheets/overrides/_list-group.scss
@@ -1,4 +1,8 @@
-.list-group-item.active {
-  background-color: var(--primary);
-  border-color: var(--primary);
+.list-group-item {
+  background-color: transparent;
+  
+  &.active {
+    background-color: var(--primary);
+    border-color: var(--primary);
+  }
 }
\ No newline at end of file

From 02cc1c418dc3ea0475ac61bf77d4e7a7bdf92636 Mon Sep 17 00:00:00 2001
From: Andreas Nedbal <andy@pixelde.su>
Date: Sun, 3 May 2020 17:28:41 +0200
Subject: [PATCH 095/172] WIP: Initial implementation of CSS variable based
 theming

---
 app/helpers/theme_helper.rb | 62 +++++++++++++++++++++++++++++++++++++
 app/models/theme.rb         | 20 ------------
 app/views/layouts/base.haml |  7 +----
 3 files changed, 63 insertions(+), 26 deletions(-)

diff --git a/app/helpers/theme_helper.rb b/app/helpers/theme_helper.rb
index 1202588c..d75d2cb4 100644
--- a/app/helpers/theme_helper.rb
+++ b/app/helpers/theme_helper.rb
@@ -51,4 +51,66 @@ module ThemeHelper
 
     return klass.new(context).render
   end
+
+  def render_theme
+    theme_attribute_map = {
+      'primary_color' => 'primary',
+      'primary_text' => 'primary-text',
+      'danger_color' => 'danger',
+      'danger_text' => 'danger-text',
+      'warning_color' => 'warning',
+      'warning_text' => 'warning-text',
+      'info_color' => 'info',
+      'info_text' => 'info-text',
+      'success_color' => 'success',
+      'success_text' => 'success-text',
+      'panel_color' => 'card-bg',
+      'background_color' => 'background',
+      'background_text' => 'body-text',
+      'input_color' => 'input-bg',
+      'input_text' => 'input-text' 
+    }
+
+    theme = get_active_theme
+
+    if theme
+
+    body = ":root {\n"
+      theme.attributes.each do |k, v|
+        if theme_attribute_map[k]
+          if k.include? "text"
+            hex = get_hex_color_from_theme_value(v)
+            body += "\t--#{theme_attribute_map[k]}: #{get_decimal_triplet_from_hex(hex)};\n"
+          else
+            body += "\t--#{theme_attribute_map[k]}: ##{get_hex_color_from_theme_value(v)};\n"
+          end
+        end
+      end
+
+      body += "}"
+
+      content_tag(:style, body)
+    end
+  end
+
+  def get_active_theme
+    if current_user&.theme
+      current_user.theme
+    elsif @user&.theme
+      if user_signed_in?
+        @user.theme unless !current_user&.show_foreign_themes?
+      else
+        @user.theme
+      end
+    end
+  end
+
+  def get_hex_color_from_theme_value(value)
+    ('0000000' + value.to_s(16))[-6, 6]
+  end
+
+  def get_decimal_triplet_from_hex(value)
+    hexes = value.split(/(.{2})/).reject { |c| c.empty? }
+    hexes.map(&:hex).join(", ")
+  end
 end
diff --git a/app/models/theme.rb b/app/models/theme.rb
index 74700a54..32479e2a 100644
--- a/app/models/theme.rb
+++ b/app/models/theme.rb
@@ -17,26 +17,6 @@ class Theme < ApplicationRecord
     greater_than_or_equal_to: 0, less_than_or_equal_to: 0xFFFFFF,
     allow_nil: true, only_integer: true
 
-  has_attached_file :css, use_timestamp: false, s3_headers: {
-    'Content-Type' => 'text/css'
-  }, fog_file: {
-    content_type: 'text/css'
-  }
-  validates_attachment_content_type :css, content_type: /^text\//
-
-  before_save do
-    self.css = nil
-
-    style = StringIO.new(render_theme_with_context(self))
-
-    style.class.class_eval { attr_accessor :original_filename, :content_type }
-
-    style.content_type = 'text/css'
-    style.original_filename = 'theme.css'
-
-    self.css = style
-  end
-
   def theme_color
     ('#' + ('0000000' + primary_color.to_s(16))[-6, 6])
   end
diff --git a/app/views/layouts/base.haml b/app/views/layouts/base.haml
index 87f68301..2c6d0181 100644
--- a/app/views/layouts/base.haml
+++ b/app/views/layouts/base.haml
@@ -12,17 +12,12 @@
     %title= yield(:title)
     = javascript_include_tag 'i18n', 'data-turbolinks-track' => true
     = stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track' => true
-    - if user_signed_in? and not current_user.theme.nil? and (@user.nil? || @user.theme.nil?)
-      %link{rel: 'stylesheet', href: current_user.theme.css.url, media: :all, 'data-turbolinks-track' => "false"}
-      %meta{name: 'theme-color', content: current_user.theme.theme_color}
-    - if (not @user.nil?) and (not @user.theme.nil?) and (if user_signed_in? then current_user.show_foreign_themes? else true end)
-      %link{rel: 'stylesheet', href: @user.theme.css.url, media: :all, 'data-turbolinks-track' => "false"}
-      %meta{name: 'theme-color', content: @user.theme.theme_color}
     = javascript_include_tag 'application', 'data-turbolinks-track' => true
     - if user_signed_in?
       - if current_user.mod?
         = javascript_include_tag 'moderation', 'data-turbolinks-track' => true
     = csrf_meta_tags
+    = render_theme
   %body#version1
     - if user_signed_in?
       = render 'navigation/main'

From 241b8cbdcbb9cd3b1f18ad5bce3f992fc37c31b9 Mon Sep 17 00:00:00 2001
From: Andreas Nedbal <andy@pixelde.su>
Date: Sun, 3 May 2020 20:10:50 +0200
Subject: [PATCH 096/172] Rename card variables to "raised"

---
 app/assets/stylesheets/_variables.scss                | 4 ++--
 app/assets/stylesheets/components/_notifications.scss | 2 +-
 app/assets/stylesheets/overrides/_card.scss           | 4 ++--
 app/helpers/theme_helper.rb                           | 2 +-
 4 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/app/assets/stylesheets/_variables.scss b/app/assets/stylesheets/_variables.scss
index 58001523..0cde0d68 100644
--- a/app/assets/stylesheets/_variables.scss
+++ b/app/assets/stylesheets/_variables.scss
@@ -54,9 +54,9 @@ $avatar-sizes: (
 
 :root {
   --background: #f0edf4;
-  --card-bg: #ffffff;
-  --card-cap-bg: #f7f7f7;
   --input-bg: #ffffff;
+  --raised-bg: #ffffff;
+  --raised-accent: #f7f7f7;
 
   /**
    NOTE for all *-text variables
diff --git a/app/assets/stylesheets/components/_notifications.scss b/app/assets/stylesheets/components/_notifications.scss
index 5c1c7282..e8c43d1f 100644
--- a/app/assets/stylesheets/components/_notifications.scss
+++ b/app/assets/stylesheets/components/_notifications.scss
@@ -41,7 +41,7 @@
 
   .list-group-item {
     margin-top: map-get($spacers, 2);
-    background-color: var(--card-cap-bg);
+    background-color: var(--raised-accent);
 
     p {
       margin-bottom: 0;
diff --git a/app/assets/stylesheets/overrides/_card.scss b/app/assets/stylesheets/overrides/_card.scss
index a6f6d434..2b31a72a 100644
--- a/app/assets/stylesheets/overrides/_card.scss
+++ b/app/assets/stylesheets/overrides/_card.scss
@@ -1,7 +1,7 @@
 .card {
   margin-bottom: map-get($spacers, 3);
   box-shadow: $box-shadow-sm;
-  background-color: var(--card-bg);
+  background-color: var(--raised-bg);
 
   p:only-child {
     margin-bottom: 0;
@@ -10,5 +10,5 @@
 
 .card-header,
 .card-footer {
-  background-color: var(--card-cap-bg);
+  background-color: var(--raised-accent);
 }
\ No newline at end of file
diff --git a/app/helpers/theme_helper.rb b/app/helpers/theme_helper.rb
index d75d2cb4..cf436ca3 100644
--- a/app/helpers/theme_helper.rb
+++ b/app/helpers/theme_helper.rb
@@ -64,7 +64,7 @@ module ThemeHelper
       'info_text' => 'info-text',
       'success_color' => 'success',
       'success_text' => 'success-text',
-      'panel_color' => 'card-bg',
+      'panel_color' => 'raised-bg',
       'background_color' => 'background',
       'background_text' => 'body-text',
       'input_color' => 'input-bg',

From a6b21a85e57b790e216b7e8ed5154329bf16f820 Mon Sep 17 00:00:00 2001
From: Andreas Nedbal <andy@pixelde.su>
Date: Sun, 3 May 2020 20:24:32 +0200
Subject: [PATCH 097/172] Add more theming changes to dropdowns

---
 .../stylesheets/overrides/_dropdown.scss      | 27 ++++++++++++++++---
 1 file changed, 24 insertions(+), 3 deletions(-)

diff --git a/app/assets/stylesheets/overrides/_dropdown.scss b/app/assets/stylesheets/overrides/_dropdown.scss
index 8579eabe..5c0d58ce 100644
--- a/app/assets/stylesheets/overrides/_dropdown.scss
+++ b/app/assets/stylesheets/overrides/_dropdown.scss
@@ -1,4 +1,25 @@
-.dropdown-item.active, .dropdown-item:active {
-  color: RGB(var(--primary-text));
-  background-color: var(--primary);
+.dropdown-menu {
+  color: RGB(var(--body-text));
+  background-color: var(--raised-bg);
+  box-shadow: $box-shadow-lg;
+  border: none;
+}
+
+.dropdown-item {
+  color: RGB(var(--body-text));
+
+  &.active, 
+  &:active,
+  &:active:hover {
+    color: RGB(var(--primary-text));
+    background-color: var(--primary);
+  }
+
+  &:hover {
+    background-color: var(--raised-accent);
+  }
+}
+
+.dropdown-divider {
+  border-top: 1px solid var(--raised-accent);
 }
\ No newline at end of file

From 1eddb0ad36e6d02f7a4fad58f7f8c76a5fc0a361 Mon Sep 17 00:00:00 2001
From: Andreas Nedbal <andy@pixelde.su>
Date: Sun, 3 May 2020 20:39:21 +0200
Subject: [PATCH 098/172] Adjust input styling to be a bit more lenient in
 themes

---
 app/assets/stylesheets/_variables.scss        | 2 +-
 app/assets/stylesheets/overrides/_inputs.scss | 8 ++++++++
 2 files changed, 9 insertions(+), 1 deletion(-)

diff --git a/app/assets/stylesheets/_variables.scss b/app/assets/stylesheets/_variables.scss
index 0cde0d68..76e0dadc 100644
--- a/app/assets/stylesheets/_variables.scss
+++ b/app/assets/stylesheets/_variables.scss
@@ -54,7 +54,7 @@ $avatar-sizes: (
 
 :root {
   --background: #f0edf4;
-  --input-bg: #ffffff;
+  --input-bg: var(--background);
   --raised-bg: #ffffff;
   --raised-accent: #f7f7f7;
 
diff --git a/app/assets/stylesheets/overrides/_inputs.scss b/app/assets/stylesheets/overrides/_inputs.scss
index d96894f7..68f9d348 100644
--- a/app/assets/stylesheets/overrides/_inputs.scss
+++ b/app/assets/stylesheets/overrides/_inputs.scss
@@ -1,4 +1,12 @@
 .form-control {
   background-color: var(--input-bg);
   color: RGB(var(--input-text));
+  border: 0;
+
+  &:focus {
+    background-color: var(--input-bg);
+    color: RGB(var(--input-text));
+    border-color: var(--primary);
+    box-shadow: .5px 0 0 0.1rem var(--primary);
+  }
 }
\ No newline at end of file

From ea638305ccb4b4bcf1bb86291e6d648922729fba Mon Sep 17 00:00:00 2001
From: Andreas Nedbal <andy@pixelde.su>
Date: Sun, 3 May 2020 20:39:45 +0200
Subject: [PATCH 099/172] Fix customized hover/focus styles for list group
 items

---
 app/assets/stylesheets/overrides/_list-group.scss | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/app/assets/stylesheets/overrides/_list-group.scss b/app/assets/stylesheets/overrides/_list-group.scss
index dfe82813..d7446478 100644
--- a/app/assets/stylesheets/overrides/_list-group.scss
+++ b/app/assets/stylesheets/overrides/_list-group.scss
@@ -1,8 +1,15 @@
 .list-group-item {
   background-color: transparent;
   
-  &.active {
+  &.active,
+  &.active:hover {
     background-color: var(--primary);
     border-color: var(--primary);
   }
+}
+
+.list-group-item-action {
+  &:hover, &:focus {
+    background-color: var(--raised-accent);
+  }
 }
\ No newline at end of file

From a36bcf6cd3885aa7774b1b7fdb6ac0139297ffad Mon Sep 17 00:00:00 2001
From: Andreas Nedbal <andy@pixelde.su>
Date: Sun, 3 May 2020 21:44:12 +0200
Subject: [PATCH 100/172] Add Bootstrap modal overrides for CSS variables

---
 app/assets/stylesheets/application.scss      |  1 +
 app/assets/stylesheets/overrides/_modal.scss | 13 +++++++++++++
 2 files changed, 14 insertions(+)
 create mode 100644 app/assets/stylesheets/overrides/_modal.scss

diff --git a/app/assets/stylesheets/application.scss b/app/assets/stylesheets/application.scss
index 745ee6f1..4df19f85 100644
--- a/app/assets/stylesheets/application.scss
+++ b/app/assets/stylesheets/application.scss
@@ -56,6 +56,7 @@
 "overrides/links",
 "overrides/list-group",
 "overrides/minicolors",
+"overrides/modal",
 "overrides/navbar",
 "overrides/sweet-alert";
 
diff --git a/app/assets/stylesheets/overrides/_modal.scss b/app/assets/stylesheets/overrides/_modal.scss
new file mode 100644
index 00000000..04773c30
--- /dev/null
+++ b/app/assets/stylesheets/overrides/_modal.scss
@@ -0,0 +1,13 @@
+.modal-content {
+  background-color: var(--raised-bg);
+  border: 0;
+}
+
+.modal-header {
+  border-bottom: 0;
+}
+
+.modal-footer {
+  background-color: var(--raised-accent);
+  border-top: 0;
+}
\ No newline at end of file

From 9235533f59b0f979b9a314bb3d396d8cb6a2b620 Mon Sep 17 00:00:00 2001
From: Andreas Nedbal <andy@pixelde.su>
Date: Sun, 3 May 2020 21:57:19 +0200
Subject: [PATCH 101/172] Adjust button styles for theming

- Default (unstyled) buttons use the body text color
- Colored buttons use their text color equivalent
---
 app/assets/stylesheets/overrides/_buttons.scss | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/app/assets/stylesheets/overrides/_buttons.scss b/app/assets/stylesheets/overrides/_buttons.scss
index 08200b67..2238d82f 100644
--- a/app/assets/stylesheets/overrides/_buttons.scss
+++ b/app/assets/stylesheets/overrides/_buttons.scss
@@ -1,5 +1,10 @@
+.btn {
+  color: RGB(var(--body-text));
+}
+
 @each $color in $color-names {
   .btn-#{$color} {
+    color: RGB(var(--#{$color}-text));
     background-color: var(--#{$color});
     border-color: var(--#{$color});
 

From fe357eaa07c9d251022858a2fd5110e866b4dce0 Mon Sep 17 00:00:00 2001
From: Andreas Nedbal <andy@pixelde.su>
Date: Mon, 4 May 2020 15:37:13 +0200
Subject: [PATCH 102/172] Update layout of the theme settings page

---
 app/views/settings/_theme.haml | 172 +++++++++++++++++++++------------
 1 file changed, 109 insertions(+), 63 deletions(-)

diff --git a/app/views/settings/_theme.haml b/app/views/settings/_theme.haml
index e10a2a94..da0bd20d 100644
--- a/app/views/settings/_theme.haml
+++ b/app/views/settings/_theme.haml
@@ -1,67 +1,113 @@
-.card
-  .card-body
-    %b Presets:
-    %a{href: '#', class: 'theme_preset', data: {preset: 'rs'}} Retrospring Purple,
-    %a{href: '#', class: 'theme_preset', data: {preset: 'dc'}} Dark Copycat,
-    %a{href: '#', class: 'theme_preset', data: {preset: 'lc'}} Light Copycat
-    = bootstrap_form_for(current_user.theme || Theme.new, url: {action: "update_theme"}, html: {id: 'update_theme'}, method: "patch") do |f|
-      .row
-        .col-md-6
-          = f.text_field :primary_color, class: 'color', data: {default: 0x5E35B1}
-        .col-md-6
-          = f.text_field :primary_text, class: 'color', data: {default: 0xFFFFFF}
-      .row
-        .col-md-6
-          = f.text_field :danger_color, class: 'color', data: {default: 0xFF0039}
-        .col-md-6
-          = f.text_field :danger_text, class: 'color', data: {default: 0xFFFFFF}
-      .row
-        .col-md-6
-          = f.text_field :success_color, class: 'color', data: {default: 0x3FB618}
-        .col-md-6
-          = f.text_field :success_text, class: 'color', data: {default: 0xFFFFFF}
-      .row
-        .col-md-6
-          = f.text_field :warning_color, class: 'color', data: {default: 0xFF7518}
-        .col-md-6
-          = f.text_field :warning_text, class: 'color', data: {default: 0xFFFFFF}
-      .row
-        .col-md-6
-          = f.text_field :info_color, class: 'color', data: {default: 0x9954BB}
-        .col-md-6
-          = f.text_field :info_text, class: 'color', data: {default: 0xFFFFFF}
-      .row
-        .col-md-6
-          = f.text_field :default_color, class: 'color', data: {default: 0x222222}
-        .col-md-6
-          = f.text_field :default_text, class: 'color', data: {default: 0xEEEEEE}
-      .row
-        .col-md-6
-          = f.text_field :panel_color, class: 'color', data: {default: 0xF9F9F9}
-        .col-md-6
-          = f.text_field :panel_text, class: 'color', data: {default: 0x151515}
-      .row
-        .col-md-6
-          = f.text_field :link_color, class: 'color', data: {default: 0x5E35B1}
-        .col-md-6
-          = f.text_field :background_color, class: 'color', data: {default: 0xFFFFFF}
-      .row
-        .col-md-6
-          = f.text_field :background_text, class: 'color', data: {default: 0x222222}
-        .col-md-6
-          = f.text_field :background_muted, class: 'color', data: {default: 0xBBBBBB}
-      .row
-        .col-md-6
-          = f.text_field :input_color, class: 'color', data: {default: 0xFFFFFF}
-        .col-md-6
-          = f.text_field :input_text, class: 'color', data: {default: 0x000000}
-      .row
-        .col-md-6
-          = f.text_field :outline_color, class: 'color', data: {default: 0x5E35B1}
-        .col-md-6
+= bootstrap_form_for(current_user.theme || Theme.new, url: {action: "update_theme"}, html: {id: 'update_theme'}, method: "patch") do |f|
+  .card
+    .card-body
+      %h1 Theming
+      %p.lead Welcome to the Theme Editor!
+      %p 
+        Here you'll be able to modify your Retrospring experience by adjusting all available colors. 
+        To further help you with adjusting needs, there are a few example elements using the specified colors, and sections will include 
+        descriptions on their general use on the site!
 
+      %p 
+        And with that:
+        %b Happy Theming!
+  .card
+    .card-body
+      %h2 General
+      %p
+        Here you'll find general page values that are basically visible all across the page.
+      .row
+        .col-sm-6
+          = f.text_field :background_color, class: 'color', data: {default: 0xFFFFFF}
+        .col-sm-6
+          = f.text_field :background_text, class: 'color', data: {default: 0x222222}
+  .card
+    .card-body
+      %h2 Forms and Inputs
+      %p
+        Styles for form inputs, like textfields.
+      .row
+        .col-sm-6
+          = f.text_field :input_color, class: 'color', data: {default: 0xFFFFFF}
+        .col-sm-6
+          = f.text_field :input_text, class: 'color', data: {default: 0x000000}
+  .card
+    .card-body
+      %h2 Raised Content
+      %p
+        Raised content basically describes all the different boxes and panels you can see across the site.
+      .row
+        .col-sm-6
+          = f.text_field :panel_color, class: 'color', data: {default: 0xF9F9F9}
+        .col-sm-6
+          = f.text_field :panel_text, class: 'color', data: {default: 0x151515}
+  .card
+    .card-body
+      %h2 Colors
+      %p
+        Colors you can find used on the site. The names of the colors usually describe the context.
+        The "text" colors for all styles represent the color that text on top of these colors has.
+
+      %ul
+        %li
+          %b Primary:
+          The primary/brand color of the site, used for navigation, links, etc.
+        %li
+          %b Danger:
+          Color used for errors or critical actions like deleting something.
+        %li
+          %b Warning:
+          Color used for warnings if something non-critical has happened.
+        %li
+          %b Info:
+          Color used for informational popups or messages.
+        %li
+          %b Success:
+          Color used for messages if something went through successfully.
+      .row
+        .col-sm-6
+          = f.text_field :primary_color, class: 'color', data: {default: 0x5E35B1}
+        .col-sm-6
+          = f.text_field :primary_text, class: 'color', data: {default: 0xFFFFFF}
+        .col-sm-12
+          .alert.alert-primary
+            A simple primary alert—check it out!
+      .row
+        .col-sm-6
+          = f.text_field :danger_color, class: 'color', data: {default: 0xFF0039}
+        .col-sm-6
+          = f.text_field :danger_text, class: 'color', data: {default: 0xFFFFFF}
+        .col-sm-12
+          .alert.alert-danger
+            A simple danger alert—check it out!
+      .row
+        .col-sm-6
+          = f.text_field :warning_color, class: 'color', data: {default: 0xFF7518}
+        .col-sm-6
+          = f.text_field :warning_text, class: 'color', data: {default: 0xFFFFFF}
+        .col-sm-12
+          .alert.alert-warning
+            A simple warning alert—check it out!
+      .row
+        .col-sm-6
+          = f.text_field :info_color, class: 'color', data: {default: 0x9954BB}
+        .col-sm-6
+          = f.text_field :info_text, class: 'color', data: {default: 0xFFFFFF}
+        .col-sm-12
+          .alert.alert-info
+            A simple info alert—check it out!
+      .row
+        .col-sm-6
+          = f.text_field :success_color, class: 'color', data: {default: 0x3FB618}
+        .col-sm-6
+          = f.text_field :success_text, class: 'color', data: {default: 0xFFFFFF}
+        .col-sm-12
+          .alert.alert-success
+            A simple success alert—check it out!
+  .card
+    .card-body
       .pull-left
         = f.submit t('views.actions.save'), class: 'btn btn-primary'
 
-    .pull-right
-      =button_to 'Delete Theme', delete_user_theme_path, data: { confirm: "Are you sure?" }, tabindex: -1, method: :delete, class: "btn btn-danger"
+      .pull-right
+        = button_to 'Delete Theme', delete_user_theme_path, data: { confirm: "Are you sure?" }, tabindex: -1, method: :delete, class: "btn btn-danger"

From 582f8606b0f09b1be08186e3b4c8000e47c78a6b Mon Sep 17 00:00:00 2001
From: Andreas Nedbal <andy@pixelde.su>
Date: Mon, 4 May 2020 17:26:18 +0200
Subject: [PATCH 103/172] Changed theme preview to work without hitting an
 endpoint

---
 app/assets/javascripts/settings.coffee | 93 ++++++++++++++++++--------
 1 file changed, 66 insertions(+), 27 deletions(-)

diff --git a/app/assets/javascripts/settings.coffee b/app/assets/javascripts/settings.coffee
index 6b00cf65..09dabb8b 100644
--- a/app/assets/javascripts/settings.coffee
+++ b/app/assets/javascripts/settings.coffee
@@ -107,35 +107,10 @@ document.head.appendChild previewStyle
 
 previewTimeout = null
 
-previewTheme = ->
-  payload = {}
-
-  $('#update_theme').find('.color').each ->
-    n = this.name.substr 6, this.name.length - 7
-    payload[n] = parseInt this.value.substr(1, 6), 16
-
-  $.post '/settings/theme/preview.css', payload, (data) ->
-    previewStyle.innerHTML = data
-  , 'text'
-
-  null
-
-themePresets = {
-  rs: [0x5E35B1, 0xFFFFFF, 0xFF0039, 0xFFFFFF, 0x3FB618, 0xFFFFFF, 0xFF7518, 0xFFFFFF, 0x9954BB, 0xFFFFFF, 0x222222, 0xEEEEEE, 0xF9F9F9, 0x151515, 0x5E35B1, 0xFFFFFF, 0x222222, 0xbbbbbb, 0xFFFFFF, 0x000000, 0x5E35B1],
-  dc: [0x141414, 0xeeeeee, 0x362222, 0xeeeeee, 0x1d2e1d, 0xeeeeee, 0x404040, 0xeeeeee, 0xb8b8b8, 0x3b3b3b, 0x303030, 0xEEEEEE, 0x202020, 0xeeeeee, 0x9c9a9a, 0x363636, 0xe6e6e6, 0xbbbbbb, 0x383838, 0xebebeb, 0x787676],
-  lc: [0xebebeb, 0x111111, 0xf76363, 0x111111, 0x8aff94, 0x111111, 0xffbd7f, 0x111111, 0x474747, 0xc4c4c4, 0xcfcfcf, 0x111111, 0xdfdfdf, 0x111111, 0x636565, 0xc9c9c9, 0x191919, 0x444444, 0xc7c7c7, 0x141414, 0x878989]
-}
-
-$(document).on 'submit', '#update_theme', (event) ->
-  $this = $ this
-  $this.find('.color').each ->
-    this.value = parseInt this.value.substr(1, 6), 16
-  true
-
 $(document).ready ->
   $('#update_theme .color').each ->
     $this = $ this
-    this.value = '#' + ('000000' + parseInt(this.value).toString(16)).substr(-6, 6)
+    this.value = '#' + getHexColorFromThemeValue(this.value)
 
     $this.minicolors
       control:      'hue'
@@ -152,4 +127,68 @@ $(document).ready ->
 $(document).on 'click', 'a.theme_preset', (event) ->
   preset = [].concat themePresets[this.dataset.preset]
   $('#update_theme .color').each ->
-    $(this).minicolors 'value', '#' + ('000000' + parseInt(preset.shift()).toString(16)).substr(-6, 6)
+    $(this).minicolors 'value', '#' + getHexColorFromThemeValue(preset.shift())
+
+previewTheme = ->
+  payload = {}
+
+  $('#update_theme').find('.color').each ->
+    n = this.name.substr 6, this.name.length - 7
+    payload[n] = parseInt this.value.substr(1, 6), 16
+
+  generateTheme payload
+
+  null
+
+generateTheme = (payload) ->
+  theme_attribute_map = {
+    'primary_color': 'primary',
+    'primary_text': 'primary-text',
+    'danger_color': 'danger',
+    'danger_text': 'danger-text',
+    'warning_color': 'warning',
+    'warning_text': 'warning-text',
+    'info_color': 'info',
+    'info_text': 'info-text',
+    'success_color': 'success',
+    'success_text': 'success-text',
+    'panel_color': 'raised-bg',
+    'background_color': 'background',
+    'background_text': 'body-text',
+    'input_color': 'input-bg',
+    'input_text': 'input-text' 
+  }
+
+  body = ":root {\n"
+
+  (Object.keys(payload)).forEach (plKey) ->
+    console.log plKey
+    if theme_attribute_map[plKey]
+      if theme_attribute_map[plKey].includes 'text'
+        console.log "aaa"
+        hex = getHexColorFromThemeValue(payload[plKey])
+        body += "--#{theme_attribute_map[plKey]}: #{getDecimalTripletsFromHex(hex)};\n"
+      else
+        body += "--#{theme_attribute_map[plKey]}: ##{getHexColorFromThemeValue(payload[plKey])};\n"
+
+  body += "}"
+
+  previewStyle.innerHTML = body
+
+getHexColorFromThemeValue = (themeValue) ->
+  return ('000000' + parseInt(themeValue).toString(16)).substr(-6, 6)
+
+getDecimalTripletsFromHex = (hex) ->
+  return hex.match(/.{1,2}/g).map((value) -> parseInt(value, 16)).join(', ')
+
+themePresets = {
+  rs: [0x5E35B1, 0xFFFFFF, 0xFF0039, 0xFFFFFF, 0x3FB618, 0xFFFFFF, 0xFF7518, 0xFFFFFF, 0x9954BB, 0xFFFFFF, 0x222222, 0xEEEEEE, 0xF9F9F9, 0x151515, 0x5E35B1, 0xFFFFFF, 0x222222, 0xbbbbbb, 0xFFFFFF, 0x000000, 0x5E35B1],
+  dc: [0x141414, 0xeeeeee, 0x362222, 0xeeeeee, 0x1d2e1d, 0xeeeeee, 0x404040, 0xeeeeee, 0xb8b8b8, 0x3b3b3b, 0x303030, 0xEEEEEE, 0x202020, 0xeeeeee, 0x9c9a9a, 0x363636, 0xe6e6e6, 0xbbbbbb, 0x383838, 0xebebeb, 0x787676],
+  lc: [0xebebeb, 0x111111, 0xf76363, 0x111111, 0x8aff94, 0x111111, 0xffbd7f, 0x111111, 0x474747, 0xc4c4c4, 0xcfcfcf, 0x111111, 0xdfdfdf, 0x111111, 0x636565, 0xc9c9c9, 0x191919, 0x444444, 0xc7c7c7, 0x141414, 0x878989]
+}
+
+$(document).on 'submit', '#update_theme', (event) ->
+  $this = $ this
+  $this.find('.color').each ->
+    this.value = parseInt this.value.substr(1, 6), 16
+  true

From e7c5b1a4a3bd80844c90e4b5fef06183c50345cb Mon Sep 17 00:00:00 2001
From: Andreas Nedbal <andy@pixelde.su>
Date: Mon, 4 May 2020 17:26:38 +0200
Subject: [PATCH 104/172] Remove theme preview route and logic

---
 app/controllers/user_controller.rb | 23 -----------------------
 config/routes.rb                   |  1 -
 2 files changed, 24 deletions(-)

diff --git a/app/controllers/user_controller.rb b/app/controllers/user_controller.rb
index 931d113c..ff7ca87d 100644
--- a/app/controllers/user_controller.rb
+++ b/app/controllers/user_controller.rb
@@ -110,29 +110,6 @@ class UserController < ApplicationController
     redirect_to edit_user_profile_path
   end
 
-  # NOTE: Yes, I am storing and transmitting values as 3 byte numbers because false sense of security.
-  def preview_theme
-    attrib = params.permit([
-      :primary_color, :primary_text,
-      :danger_color, :danger_text,
-      :success_color, :success_text,
-      :warning_color, :warning_text,
-      :info_color, :info_text,
-      :default_color, :default_text,
-      :panel_color, :panel_text,
-      :link_color, :background_color,
-      :background_text, :background_muted,
-      :input_color, :input_text,
-      :outline_color
-    ])
-
-    attrib.each do |k ,v|
-      attrib[k] = v.to_i
-    end
-
-    render plain: render_theme_with_context(attrib)
-  end
-
   def update_theme
     update_attributes = params.require(:theme).permit([
       :primary_color, :primary_text,
diff --git a/config/routes.rb b/config/routes.rb
index 7ffc9036..c9e051e2 100644
--- a/config/routes.rb
+++ b/config/routes.rb
@@ -65,7 +65,6 @@ Rails.application.routes.draw do
 
   match '/settings/theme', to: 'user#edit_theme', via: 'get', as: :edit_user_theme
   match '/settings/theme', to: 'user#update_theme', via: 'patch', as: :update_user_theme
-  match '/settings/theme/preview.css', to: 'user#preview_theme', via: 'post', as: :preview_user_theme
   match '/settings/theme/delete', to: 'user#delete_theme', via: 'delete', as: :delete_user_theme
 
   # resources :services, only: [:index, :destroy]

From d93548891d15f5b389776f04d86025353ebdf50f Mon Sep 17 00:00:00 2001
From: Andreas Nedbal <andy@pixelde.su>
Date: Mon, 4 May 2020 17:26:57 +0200
Subject: [PATCH 105/172] Remove obsolete render_theme_with_context

---
 app/helpers/theme_helper.rb | 53 -------------------------------------
 1 file changed, 53 deletions(-)

diff --git a/app/helpers/theme_helper.rb b/app/helpers/theme_helper.rb
index cf436ca3..c4a689f4 100644
--- a/app/helpers/theme_helper.rb
+++ b/app/helpers/theme_helper.rb
@@ -1,57 +1,4 @@
 module ThemeHelper
-  def render_theme_with_context(context = {})
-    klass = Class.new do
-      def initialize(hash = {})
-        if hash.is_a? ApplicationRecord
-          x = [
-            :primary_color, :primary_text,
-            :danger_color, :danger_text,
-            :success_color, :success_text,
-            :warning_color, :warning_text,
-            :info_color, :info_text,
-            :default_color, :default_text,
-            :panel_color, :panel_text,
-            :link_color, :background_color,
-            :background_text, :background_muted,
-            :input_color, :input_text,
-            :outline_color
-          ]
-
-          x.each do |v|
-            next if hash[v].nil?
-            self.instance_variable_set "@#{v}", ('#' + ('0000000' + hash[v].to_s(16))[-6, 6])
-          end
-        elsif hash.is_a? Hash
-          hash.each do |k, v|
-            next unless v.is_a? Integer
-
-            self.instance_variable_set "@#{k}", ('#' + ('0000000' + hash[k].to_s(16))[-6, 6])
-          end
-        end
-      end
-
-      def render
-        style = if Rails.env == 'production'
-          :compressed
-        else
-          :compact
-        end.freeze
-
-        css = if $__THEME_CSS_CACHE_V1.nil?
-          File.read Rails.root.join 'app/views/user/theme.css.scss.erb'
-        else
-          $__THEME_CSS_CACHE_V1
-        end
-
-        erb = ERB.new css
-        sass = Sass::Engine.new erb.result(binding), style: style, cache: false, load_paths: [], syntax: :scss
-        return sass.render.to_s
-      end
-    end
-
-    return klass.new(context).render
-  end
-
   def render_theme
     theme_attribute_map = {
       'primary_color' => 'primary',

From a3a1250dcf5557e9baa409637be87470168b56e8 Mon Sep 17 00:00:00 2001
From: Andreas Nedbal <andy@pixelde.su>
Date: Mon, 4 May 2020 20:47:00 +0200
Subject: [PATCH 106/172] Fix default text color of list group actions

---
 app/assets/stylesheets/overrides/_list-group.scss | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/app/assets/stylesheets/overrides/_list-group.scss b/app/assets/stylesheets/overrides/_list-group.scss
index d7446478..88aee252 100644
--- a/app/assets/stylesheets/overrides/_list-group.scss
+++ b/app/assets/stylesheets/overrides/_list-group.scss
@@ -9,6 +9,8 @@
 }
 
 .list-group-item-action {
+  color: RGB(var(--body-text));
+  
   &:hover, &:focus {
     background-color: var(--raised-accent);
   }

From af91fe6d03de94cd1d694ad96ebedbce03d572b6 Mon Sep 17 00:00:00 2001
From: Andreas Nedbal <andy@pixelde.su>
Date: Tue, 5 May 2020 01:49:01 +0200
Subject: [PATCH 107/172] Update theme fields

- Create migration
  - Remove CSS file fields
  - Rename panel fields to "raised" fields
  - Rename "default" to "dark" fields
  - Add "light" color fields
  - Rename "background_" fields
  - Remove unused fields
  - Adjust column default values
  - Add rollback migrations
---
 .../20200504214933_update_theme_fields.rb     | 75 +++++++++++++++++++
 db/schema.rb                                  | 34 ++++-----
 2 files changed, 90 insertions(+), 19 deletions(-)
 create mode 100644 db/migrate/20200504214933_update_theme_fields.rb

diff --git a/db/migrate/20200504214933_update_theme_fields.rb b/db/migrate/20200504214933_update_theme_fields.rb
new file mode 100644
index 00000000..f6855550
--- /dev/null
+++ b/db/migrate/20200504214933_update_theme_fields.rb
@@ -0,0 +1,75 @@
+class UpdateThemeFields < ActiveRecord::Migration[5.2]
+  def up
+    # CSS file related fields
+    remove_column :themes, :css_file_name
+    remove_column :themes, :css_content_type
+    remove_column :themes, :css_file_size
+    remove_column :themes, :css_updated_at
+
+    # Panel color fields -> Raised fields
+    rename_column :themes, :panel_color, :raised_background
+    remove_column :themes, :panel_text
+    add_column :themes, :raised_accent, :integer, default: 0xF7F7F7
+
+    # Default color -> Dark color
+    rename_column :themes, :default_color, :dark_color
+    rename_column :themes, :default_text, :dark_text
+
+    # Light color fields
+    add_column :themes, :light_color, :integer, default: 0xF8F9FA
+    add_column :themes, :light_text, :integer, default: 0x000000
+
+    # Rename some background_ fields
+    rename_column :themes, :background_text, :body_text
+    rename_column :themes, :background_muted, :muted_text
+
+    # Remove obsolete fields
+    remove_column :themes, :link_color
+    remove_column :themes, :outline_color
+
+    change_column_default :themes, :raised_background, 0xFFFFFF
+    change_column_default :themes, :dark_color, 0x343A40
+    change_column_default :themes, :body_text, 0x000000
+    change_column_default :themes, :muted_text, 0x6C757D
+    change_column_default :themes, :background_color, 0xF0EDF4
+    change_column_default :themes, :danger_color, 0xDC3545
+    change_column_default :themes, :warning_color, 0xFFC107
+    change_column_default :themes, :info_color, 0x17A2B8
+    change_column_default :themes, :success_color, 0x28A745
+    change_column_default :themes, :input_color, 0xF0EDF4
+  end
+
+  def down
+    add_column :themes, :css_file_name, :string
+    add_column :themes, :css_content_type, :string
+    add_column :themes, :css_file_size, :integer
+    add_column :themes, :css_updated_at, :datetime
+
+    rename_column :themes, :raised_background, :panel_color 
+    add_column :themes, :panel_text, :integer
+    remove_column :themes, :raised_accent
+
+    rename_column :themes, :dark_color, :default_color 
+    rename_column :themes, :dark_text, :default_text
+
+    remove_column :themes, :light_color
+    remove_column :themes, :light_text
+
+    rename_column :themes, :body_text, :background_text
+    rename_column :themes, :muted_text, :background_muted
+
+    add_column :themes, :link_color, :integer
+    add_column :themes, :outline_color, :integer
+
+    change_column_default :themes, :panel_color, 0xF9F9F9
+    change_column_default :themes, :default_color, 0x222222
+    change_column_default :themes, :background_text, 0x222222
+    change_column_default :themes, :background_muted, 0xBBBBBB
+    change_column_default :themes, :background_color, 0xFFFFFF
+    change_column_default :themes, :danger_color, 0xFF0039
+    change_column_default :themes, :warning_color, 0xFF7518
+    change_column_default :themes, :info_color, 0x9954BB
+    change_column_default :themes, :success_color, 0x3FB618
+    change_column_default :themes, :input_color, 0xFFFFFF
+  end
+end
diff --git a/db/schema.rb b/db/schema.rb
index 91feb5b1..b0275eb9 100644
--- a/db/schema.rb
+++ b/db/schema.rb
@@ -10,7 +10,7 @@
 #
 # It's strongly recommended that you check this file into your version control system.
 
-ActiveRecord::Schema.define(version: 2020_04_25_194536) do
+ActiveRecord::Schema.define(version: 2020_05_04_214933) do
 
   # These are extensions that must be enabled in order to support this database
   enable_extension "plpgsql"
@@ -192,31 +192,27 @@ ActiveRecord::Schema.define(version: 2020_04_25_194536) do
     t.integer "user_id", null: false
     t.integer "primary_color", default: 6174129
     t.integer "primary_text", default: 16777215
-    t.integer "danger_color", default: 16711737
+    t.integer "danger_color", default: 14431557
     t.integer "danger_text", default: 16777215
-    t.integer "success_color", default: 4175384
+    t.integer "success_color", default: 2664261
     t.integer "success_text", default: 16777215
-    t.integer "warning_color", default: 16741656
+    t.integer "warning_color", default: 16761095
     t.integer "warning_text", default: 16777215
-    t.integer "info_color", default: 10048699
+    t.integer "info_color", default: 1548984
     t.integer "info_text", default: 16777215
-    t.integer "default_color", default: 2236962
-    t.integer "default_text", default: 15658734
-    t.integer "panel_color", default: 16382457
-    t.integer "panel_text", default: 1381653
-    t.integer "link_color", default: 6174129
-    t.integer "background_color", default: 16777215
-    t.integer "background_text", default: 2236962
-    t.integer "background_muted", default: 12303291
-    t.string "css_file_name"
-    t.string "css_content_type"
-    t.integer "css_file_size"
-    t.datetime "css_updated_at"
+    t.integer "dark_color", default: 3422784
+    t.integer "dark_text", default: 15658734
+    t.integer "raised_background", default: 16777215
+    t.integer "background_color", default: 15789556
+    t.integer "body_text", default: 0
+    t.integer "muted_text", default: 7107965
     t.datetime "created_at", null: false
     t.datetime "updated_at", null: false
-    t.integer "input_color", default: 16777215, null: false
+    t.integer "input_color", default: 15789556, null: false
     t.integer "input_text", default: 0, null: false
-    t.integer "outline_color", default: 6174129, null: false
+    t.integer "raised_accent", default: 16250871
+    t.integer "light_color", default: 16316922
+    t.integer "light_text", default: 0
     t.index ["user_id", "created_at"], name: "index_themes_on_user_id_and_created_at"
   end
 

From 880429f5f92d509cde682dd90cd48693d637af47 Mon Sep 17 00:00:00 2001
From: Andreas Nedbal <andy@pixelde.su>
Date: Tue, 5 May 2020 02:02:16 +0200
Subject: [PATCH 108/172] Add new fields for themes

- In the settings view
- In the model validation
- In the controller parameter permissions
- In the CoffeeScript/Ruby helpers
---
 app/assets/javascripts/settings.coffee | 12 ++++++--
 app/controllers/user_controller.rb     | 12 ++++----
 app/helpers/theme_helper.rb            | 12 ++++++--
 app/models/theme.rb                    | 12 ++++----
 app/views/settings/_theme.haml         | 42 ++++++++++++++++++++------
 5 files changed, 62 insertions(+), 28 deletions(-)

diff --git a/app/assets/javascripts/settings.coffee b/app/assets/javascripts/settings.coffee
index 09dabb8b..13ff10ed 100644
--- a/app/assets/javascripts/settings.coffee
+++ b/app/assets/javascripts/settings.coffee
@@ -152,11 +152,17 @@ generateTheme = (payload) ->
     'info_text': 'info-text',
     'success_color': 'success',
     'success_text': 'success-text',
-    'panel_color': 'raised-bg',
+    'dark_color': 'dark',
+    'dark_text': 'dark-text',
+    'light_color': 'light',
+    'light_text': 'light-text',
+    'raised_background': 'raised-bg',
+    'raised_accent': 'raised-accent',
     'background_color': 'background',
-    'background_text': 'body-text',
+    'body_text': 'body-text',
     'input_color': 'input-bg',
-    'input_text': 'input-text' 
+    'input_text': 'input-text',
+    'muted_text': 'muted-text'
   }
 
   body = ":root {\n"
diff --git a/app/controllers/user_controller.rb b/app/controllers/user_controller.rb
index ff7ca87d..507fb93a 100644
--- a/app/controllers/user_controller.rb
+++ b/app/controllers/user_controller.rb
@@ -117,12 +117,12 @@ class UserController < ApplicationController
       :success_color, :success_text,
       :warning_color, :warning_text,
       :info_color, :info_text,
-      :default_color, :default_text,
-      :panel_color, :panel_text,
-      :link_color, :background_color,
-      :background_text, :background_muted,
-      :input_color, :input_text,
-      :outline_color
+      :dark_color, :dark_text,
+      :light_color, :light_text,
+      :raised_background, :raised_accent,
+      :background_color, :body_text, 
+      :muted_text, :input_color, 
+      :input_text
     ])
 
     if current_user.theme.nil?
diff --git a/app/helpers/theme_helper.rb b/app/helpers/theme_helper.rb
index c4a689f4..99e1ce7d 100644
--- a/app/helpers/theme_helper.rb
+++ b/app/helpers/theme_helper.rb
@@ -11,11 +11,17 @@ module ThemeHelper
       'info_text' => 'info-text',
       'success_color' => 'success',
       'success_text' => 'success-text',
-      'panel_color' => 'raised-bg',
+      'dark_color' => 'dark',
+      'dark_text' => 'dark-text',
+      'light_color' => 'light',
+      'light_text' => 'light-text',
+      'raised_background' => 'raised-bg',
+      'raised_accent' => 'raised-accent',
       'background_color' => 'background',
-      'background_text' => 'body-text',
+      'body_text' => 'body-text',
       'input_color' => 'input-bg',
-      'input_text' => 'input-text' 
+      'input_text' => 'input-text',
+      'muted_text' => 'muted-text'
     }
 
     theme = get_active_theme
diff --git a/app/models/theme.rb b/app/models/theme.rb
index 32479e2a..bcdc5d05 100644
--- a/app/models/theme.rb
+++ b/app/models/theme.rb
@@ -8,12 +8,12 @@ class Theme < ApplicationRecord
     :success_color, :success_text,
     :warning_color, :warning_text,
     :info_color, :info_text,
-    :default_color, :default_text,
-    :panel_color, :panel_text,
-    :link_color, :background_color,
-    :background_text, :background_muted,
-    :input_color, :input_text,
-    :outline_color,
+    :dark_color, :dark_text,
+    :light_color, :light_text,
+    :raised_background, :raised_accent,
+    :background_color, :body_text, 
+    :muted_text, :input_color, 
+    :input_text,
     greater_than_or_equal_to: 0, less_than_or_equal_to: 0xFFFFFF,
     allow_nil: true, only_integer: true
 
diff --git a/app/views/settings/_theme.haml b/app/views/settings/_theme.haml
index da0bd20d..69896805 100644
--- a/app/views/settings/_theme.haml
+++ b/app/views/settings/_theme.haml
@@ -18,9 +18,9 @@
         Here you'll find general page values that are basically visible all across the page.
       .row
         .col-sm-6
-          = f.text_field :background_color, class: 'color', data: {default: 0xFFFFFF}
+          = f.text_field :background_color, class: 'color', data: {default: 0xF0EDF4}
         .col-sm-6
-          = f.text_field :background_text, class: 'color', data: {default: 0x222222}
+          = f.text_field :body_text, class: 'color', data: {default: 0x000000}
   .card
     .card-body
       %h2 Forms and Inputs
@@ -38,9 +38,11 @@
         Raised content basically describes all the different boxes and panels you can see across the site.
       .row
         .col-sm-6
-          = f.text_field :panel_color, class: 'color', data: {default: 0xF9F9F9}
+          = f.text_field :raised_background, class: 'color', data: {default: 0xFFFFFF}
         .col-sm-6
-          = f.text_field :panel_text, class: 'color', data: {default: 0x151515}
+          = f.text_field :raised_accent, class: 'color', data: {default: 0xF7F7F7}
+    .card-footer
+      %p Some text on top of a accented area on a raised element!
   .card
     .card-body
       %h2 Colors
@@ -74,7 +76,7 @@
             A simple primary alert—check it out!
       .row
         .col-sm-6
-          = f.text_field :danger_color, class: 'color', data: {default: 0xFF0039}
+          = f.text_field :danger_color, class: 'color', data: {default: 0xDC3545}
         .col-sm-6
           = f.text_field :danger_text, class: 'color', data: {default: 0xFFFFFF}
         .col-sm-12
@@ -82,7 +84,7 @@
             A simple danger alert—check it out!
       .row
         .col-sm-6
-          = f.text_field :warning_color, class: 'color', data: {default: 0xFF7518}
+          = f.text_field :warning_color, class: 'color', data: {default: 0xFFC107}
         .col-sm-6
           = f.text_field :warning_text, class: 'color', data: {default: 0xFFFFFF}
         .col-sm-12
@@ -90,7 +92,7 @@
             A simple warning alert—check it out!
       .row
         .col-sm-6
-          = f.text_field :info_color, class: 'color', data: {default: 0x9954BB}
+          = f.text_field :info_color, class: 'color', data: {default: 0x17A2B8}
         .col-sm-6
           = f.text_field :info_text, class: 'color', data: {default: 0xFFFFFF}
         .col-sm-12
@@ -98,16 +100,36 @@
             A simple info alert—check it out!
       .row
         .col-sm-6
-          = f.text_field :success_color, class: 'color', data: {default: 0x3FB618}
+          = f.text_field :success_color, class: 'color', data: {default: 0x28A745}
         .col-sm-6
           = f.text_field :success_text, class: 'color', data: {default: 0xFFFFFF}
         .col-sm-12
           .alert.alert-success
             A simple success alert—check it out!
+      .row
+        .col-sm-6
+          = f.text_field :dark_color, class: 'color', data: {default: 0x343A40}
+        .col-sm-6
+          = f.text_field :dark_text, class: 'color', data: {default: 0xFFFFFF}
+        .col-sm-12
+          %button.btn.btn-dark.mb-3 A dark button
+      .row
+        .col-sm-6
+          = f.text_field :light_color, class: 'color', data: {default: 0xF8F9FA}
+        .col-sm-6
+          = f.text_field :light_text, class: 'color', data: {default: 0xFFFFFF}
+        .col-sm-12
+          %button.btn.btn-light.mb-3 A light button
+      .row
+        .col-sm-6
+          = f.text_field :muted_text, class: 'color', data: {default: 0x6C757D}
+        .col-sm-6
+          %p.pt-4.text-muted Some muted text
   .card
     .card-body
       .pull-left
         = f.submit t('views.actions.save'), class: 'btn btn-primary'
 
-      .pull-right
-        = button_to 'Delete Theme', delete_user_theme_path, data: { confirm: "Are you sure?" }, tabindex: -1, method: :delete, class: "btn btn-danger"
+      - if current_user.theme
+        .pull-right
+          = button_to 'Delete Theme', delete_user_theme_path, data: { confirm: "Are you sure?" }, tabindex: -1, method: :delete, class: "btn btn-danger"

From 04c4e4c7f1aa67837806faacfe6610a06b0ff6a8 Mon Sep 17 00:00:00 2001
From: Andreas Nedbal <andy@pixelde.su>
Date: Tue, 5 May 2020 02:02:33 +0200
Subject: [PATCH 109/172] Add variables for light/dark color variants

---
 app/assets/stylesheets/_variables.scss | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/app/assets/stylesheets/_variables.scss b/app/assets/stylesheets/_variables.scss
index 76e0dadc..86000599 100644
--- a/app/assets/stylesheets/_variables.scss
+++ b/app/assets/stylesheets/_variables.scss
@@ -38,7 +38,9 @@ $color-names: (
   "danger",
   "warning",
   "info",
-  "success"
+  "success",
+  "dark",
+  "light"
 );
 
 // Avatar variables
@@ -82,6 +84,8 @@ $avatar-sizes: (
   --warning-text: 255, 255, 255;
   --info-text: 255, 255, 255;
   --success-text: 255, 255, 255;
+  --dark-text: 255, 255, 255;
+  --light-text: 0, 0, 0;
 
   --body-text: 0, 0, 0;
   --muted-text: 108, 117, 125;

From 9d5d205dede86a3c61edda118bddad342243d41d Mon Sep 17 00:00:00 2001
From: Andreas Nedbal <andy@pixelde.su>
Date: Tue, 5 May 2020 02:02:49 +0200
Subject: [PATCH 110/172] Fix muted text variant not overriding Bootstrap
 default

---
 app/assets/stylesheets/overrides/_colors.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/assets/stylesheets/overrides/_colors.scss b/app/assets/stylesheets/overrides/_colors.scss
index 30b0ea44..400c8d0d 100644
--- a/app/assets/stylesheets/overrides/_colors.scss
+++ b/app/assets/stylesheets/overrides/_colors.scss
@@ -9,5 +9,5 @@
 }
 
 .text-muted {
-  color: RGB(var(--muted-text));
+  color: RGB(var(--muted-text)) !important;
 }
\ No newline at end of file

From 83cebe4d9b609a81f7a9702a960730c238b6619c Mon Sep 17 00:00:00 2001
From: Andreas Nedbal <andy@pixelde.su>
Date: Tue, 5 May 2020 02:03:49 +0200
Subject: [PATCH 111/172] Fix theme preview not applying

This happens because the generated "preview style tag" is added before the main style one. This change makes sure the theme is rendered right after the application style
---
 app/views/layouts/base.haml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/views/layouts/base.haml b/app/views/layouts/base.haml
index 2c6d0181..08cffd36 100644
--- a/app/views/layouts/base.haml
+++ b/app/views/layouts/base.haml
@@ -12,12 +12,12 @@
     %title= yield(:title)
     = javascript_include_tag 'i18n', 'data-turbolinks-track' => true
     = stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track' => true
+    = render_theme
     = javascript_include_tag 'application', 'data-turbolinks-track' => true
     - if user_signed_in?
       - if current_user.mod?
         = javascript_include_tag 'moderation', 'data-turbolinks-track' => true
     = csrf_meta_tags
-    = render_theme
   %body#version1
     - if user_signed_in?
       = render 'navigation/main'

From aa25e8199ffde751114f8c441245ee6dcd754260 Mon Sep 17 00:00:00 2001
From: Andreas Nedbal <andy@pixelde.su>
Date: Tue, 5 May 2020 03:27:56 +0200
Subject: [PATCH 112/172] Remove old theme styling file

---
 app/views/user/theme.css.scss.erb | 542 ------------------------------
 1 file changed, 542 deletions(-)
 delete mode 100644 app/views/user/theme.css.scss.erb

diff --git a/app/views/user/theme.css.scss.erb b/app/views/user/theme.css.scss.erb
deleted file mode 100644
index b08d8cee..00000000
--- a/app/views/user/theme.css.scss.erb
+++ /dev/null
@@ -1,542 +0,0 @@
-// LEGEND
-
-// TYPE_COLOR:  BACKGROUND COLOR
-// TYPE_BORDER: BORDER COLOR
-// TYPE_TEXT:   TEXT COLOR
-
-// PRIMARY COLOR
-
-$primary_color:  <%= @primary_color  || "#5e35b1" %>;
-$primary_border: darken(adjust-hue($primary_color, -10), 5%);
-$primary_text:   <%= @primary_text   || "white" %>;
-
-// DANGER COLOR
-$danger_color:  <%= @danger_color  || "#FF0039" %>;
-$danger_border: darken(adjust-hue($danger_color, -10), 5%);
-$danger_text:   <%= @danger_text   || "white" %>;
-
-// SUCCESS COLOR
-
-$success_color:  <%= @success_color  || "#3FB618" %>;
-$success_border: darken(adjust-hue($success_color, -10), 5%);
-$success_text:   <%= @success_text   || "white" %>;
-
-// WARNING COLOR
-
-$warning_color:  <%= @warning_color  || "#FF7518" %>;
-$warning_border: darken(adjust-hue($warning_color, -10), 5%);
-$warning_text:   <%= @warning_text   || "white" %>;
-
-// INFO COLOR
-
-$info_color:  <%= @info_color  || "#9954BB" %>;
-$info_border: darken(adjust-hue($info_color, -10), 5%);
-$info_text:   <%= @info_text   || "white" %>;
-
-// DEFAULT COLOR
-
-$default_color:  <%= @default_color  || "#222222" %>;
-$default_border: darken(adjust-hue($default_color, -10), 5%);
-$default_text:   <%= @default_text   || "#eeeeee" %>;
-
-// PANEL COLOR
-
-$panel_color:  <%= @panel_color  || "#F9F9F9" %>;
-$panel_border: darken(adjust-hue($panel_color, -10), 5%);
-$panel_text:   <%= @panel_text   || "#151515" %>;
-
-// AUXILIARY COLOR
-
-$link_color:       <%= @link_color       || "#5E35B1" %>;
-
-$background_color: <%= @background_color || "#ffffff" %>;
-$background_text:  <%= @background_text  || "#222222" %>;
-$background_muted: <%= @background_muted || "#bbbbbb" %>;
-
-$input_color:  <%= @input_color || "#ffffff" %>;
-$input_border: darken(adjust-hue($input_color, -10), 5%);
-$input_text:   <%= @input_text   || "#000000" %>;
-
-$outline_color: <%= @outline_color || "#5E35B1" %>;
-
-body#version1 {
-  a, {
-    &, &:hover, &:active {
-      color: $link_color;
-    }
-  }
-
-  :not(.sweet-alert) {
-    h1, h2, h3, h4, h5, h6 {
-      color: $background_text;
-    }
-  }
-
-  &, * {
-    outline-color: $outline_color;
-  }
-
-  hr, .locales #locales-panel ul {
-    border-color: $link_color;
-  }
-
-  background-color: $background_color;
-  color:            $background_text;
-
-  // Navigation
-
-  nav.navbar {
-
-    .active, li:hover {
-      background: transparent;
-    }
-
-    .navbar-toggle {
-      &, &:hover, &:active {
-        border-color:     $primary_border;
-        background-color: $primary_color;
-
-        .icon-bar {
-          background-color: mix($primary_color, $primary_text, 70%);
-        }
-      }
-
-      &:hover {
-        background-color: mix($primary_color, $primary_text, 90%);
-      }
-    }
-
-    .navbar-collapse {
-      border-color: $primary_border;
-    }
-
-    // Nav Dropdown
-
-    .dropdown.open .dropdown-toggle .badge {
-      color:            $primary_text;
-      background-color: $primary_color;
-      border-color:     $primary_border;
-    }
-
-    &, .dropdown-menu {
-      background-color: $primary_color;
-      border-color:     $primary_border;
-      border-top:       none;
-
-      color:            $primary_text;
-
-      .media, .dropdown-header {
-        color: $primary_text;
-      }
-
-      .notification--dropdown-media .notification--list .list-group-item {
-          background-color: $primary_color;
-          border-color: $primary_border;
-
-          .notification--list-heading {
-              color: $primary_text;
-          }
-      }
-
-      .notification--heading a {
-          border-color: $primary_text;
-      }
-
-      > li.divider {
-        background-color: $primary_border;
-      }
-
-      > li {
-        > a:hover {
-          background-color: mix($primary_color, $primary_text, 80%);
-        }
-
-        a {
-          &, &:hover, &:active {
-            color: $primary_text;
-          }
-        }
-      }
-    }
-
-    .navbar-nav > li > .btn > i {
-      color: $primary_text;
-    }
-
-    // Nav Links
-
-    a {
-      &, &:hover, &:active {
-        color: $primary_text;
-      }
-    }
-
-    li:not(.profile--image-dropdown):before {
-      background-color: $primary_text;
-    }
-  }
-
-  // Notifications
-
-  .media, #notifications .list-group-item {
-    color:        $panel_text;
-    background:   $panel_color;
-    border-color: $panel_border;
-  }
-
-  #notifications .list-group-item:hover {
-    border-color: $panel_border !important;
-  }
-
-  .media {
-    background: transparent;
-  }
-
-  // Headers
-
-  .j2-jumbo {
-    background-color: $primary_color;
-    border-color:     $primary_border;
-  }
-
-  #profile--header.profile--no-header:before, .userbox--no-header:before {
-    content:    "";
-    position:   absolute;
-    top:        0;
-    left:       0;
-    right:      0;
-    bottom:     0;
-    background: $primary_color;
-
-    img {
-      opacity: 0;
-    }
-  }
-
-  .userbox--no-header, .panel-body {
-    position: relative;
-  }
-
-  // Panels, and modals
-
-  .panel, .modal-dialog {
-    border-color: $panel_border;
-
-    .panel-heading, .panel-footer, .panel-body, .modal-header, .modal-footer, .modal-body, .modal-content {
-      color: $panel_text;
-    }
-
-    a, a:hover, a:active {
-      color: $link_color;
-    }
-
-    .answerbox--question-user, .answerbox--question-text, .answerbox--answer-user, .answerbox--answer-text {
-      color: $panel_text;
-
-      &.text-muted {
-        color: mix($panel_text, $background_muted, 70%);
-      }
-    }
-
-    input, textarea {
-      background-color: $input_color;
-      border-color:     $input_border;
-      color:            $input_text;
-    }
-
-    select {
-      background-color: $panel_color;
-      border-color:     $panel_border;
-    }
-
-    .input-group-addon {
-      background: $panel_color;
-      border:     $panel_color;
-    }
-
-    &, .panel-heading, .panel-footer, .modal-header, .modal-footer {
-      background-color: mix($panel_color, $panel_text, 90%);
-      border-color:     mix($panel_color, $panel_text, 85%);
-    }
-
-    .panel-body, .modal-body, .modal-content, .panel-question {
-      background-color: $panel_color;
-    }
-  }
-
-  // Non-navigation dropdowns
-
-  .dropdown-menu {
-    background-color: $panel_color;
-    border-color:     $panel_border;
-    color:            $panel_text;
-
-    > li.divider {
-      background-color: $panel_border;
-    }
-
-    > li {
-      > a:hover {
-        background-color: mix($panel_color, $panel_text, 90%);
-      }
-
-      a {
-        &, &:hover, &:active {
-          color: $panel_text;
-        }
-      }
-    }
-  }
-
-  .text-muted {
-    color: $background_muted;
-  }
-
-  // Tabs
-  .nav-tabs {
-    border-color: transparent;
-    margin-top: -1px;
-
-    li.active a, li:active a, li:hover a {
-      background: mix($panel_color, $panel_text, 90%);
-      color:      mix($panel_text, $panel_color, 90%);
-    }
-  }
-
-  // Lists
-
-  .list-group .list-group-item {
-    background-color: $panel_color;
-    color:            $panel_text;
-    border-color:     $panel_border;
-
-    .badge {
-      background-color: $panel_text;
-      border-color:     $panel_border;
-      color:            $panel_color;
-    }
-
-    &.active, &:hover {
-      background-color: $primary_color;
-      color:            $primary_text;
-      border-color:     $primary_border;
-
-      .badge {
-        background-color: $primary_text;
-        border-color:     $primary_border;
-        color:            $primary_color;
-      }
-    }
-  }
-
-  // Buttons, Alerts, Labels, Panel Badges, Badges, List Items
-
-  .btn-primary, .alert-primary, .label-primary, .panel-badge-primary, .badge-primary, .list-group-item-primary {
-    color:            $primary_text !important;
-    background-color: $primary_color !important;
-    border-color:     $primary_border !important;
-
-    .badge {
-      color:            $primary_color !important;
-      background-color: $primary_text !important;
-      border-color:     $primary_border !important;
-    }
-  }
-
-  .btn-link {
-    color: $primary_text !important;
-  }
-
-  .panel-primary > .panel-heading {
-    background-color: mix($primary_color, $primary_text, 90%) !important;
-    border-color:     mix($primary_color, $primary_text, 85%) !important;
-    color:            mix($primary_text, $primary_color, 90%) !important;
-
-    &, .media * {
-      color: mix($primary_text, $primary_color, 90%) !important;
-    }
-
-    .media a {
-      color: mix(mix($primary_text, $primary_color, 90%), $link_color, 80%) !important;
-    }
-  }
-
-  .btn-primary:hover {
-    background-color: mix($primary_color, $primary_text, 90%) !important;
-  }
-
-  .btn-danger, .alert-danger, .label-danger, .panel-badge-danger, .badge-danger, .list-group-item-danger {
-    color:            $danger_text !important;
-    background-color: $danger_color !important;
-    border-color:     $danger_border !important;
-
-    .badge {
-      color:            $danger_color !important;
-      background-color: $danger_text !important;
-      border-color:     $danger_border !important;
-    }
-  }
-
-  .panel-danger > .panel-heading {
-    background-color: mix($danger_color, $danger_text, 90%) !important;
-    border-color:     mix($danger_color, $danger_text, 85%) !important;
-
-    &, .media * {
-      color: mix($danger_text, $danger_color, 90%) !important;
-    }
-
-    .media a {
-      color: mix(mix($danger_text, $danger_color, 90%), $link_color, 80%) !important;
-    }
-  }
-
-  .btn-danger:hover {
-    background-color: mix($danger_color, $danger_text, 90%) !important;
-  }
-
-  .btn-success, .alert-success, .label-success, .panel-badge-success, .badge-success, .list-group-item-success {
-    color:            $success_text !important;
-    background-color: $success_color !important;
-    border-color:     $success_border !important;
-
-    .badge {
-      color:            $success_color !important;
-      background-color: $success_text !important;
-      border-color:     $success_border !important;
-    }
-  }
-
-  .panel-success > .panel-heading {
-    background-color: mix($success_color, $success_text, 90%) !important;
-    border-color:     mix($success_color, $success_text, 85%) !important;
-    color:            mix($success_text, $success_color, 90%) !important;
-
-    &, .media * {
-      color: mix($success_text, $success_color, 90%) !important;
-    }
-
-    .media a {
-      color: mix(mix($success_text, $success_color, 90%), $link_color, 80%) !important;
-    }
-  }
-
-  .btn-success:hover {
-    background-color: mix($success_color, $success_text, 90%) !important;
-  }
-
-  .btn-warning, .alert-warning, .label-warning, .panel-badge-warning, .badge-warning, .list-group-item-warning {
-    color:            $warning_text !important;
-    background-color: $warning_color !important;
-    border-color:     $warning_border !important;
-
-    .badge {
-      color:            $warning_color !important;
-      background-color: $warning_text !important;
-      border-color:     $warning_border !important;
-    }
-  }
-
-  .panel-warning > .panel-heading {
-    background-color: mix($warning_color, $warning_text, 90%) !important;
-    border-color:     mix($warning_color, $warning_text, 85%) !important;
-    color:            mix($warning_text, $warning_color, 90%) !important;
-
-    &, .media * {
-      color: mix($warning_text, $warning_color, 90%) !important;
-    }
-
-    .media a {
-      color: mix(mix($warning_text, $warning_color, 90%), $link_color, 80%) !important;
-    }
-  }
-
-  .btn-warning:hover {
-    background-color: mix($warning_color, $warning_text, 90%) !important;
-  }
-
-  .btn-info, .alert-info, .label-info, .panel-badge-info, .badge-info, .list-group-item-info {
-    color:            $info_text !important;
-    background-color: $info_color !important;
-    border-color:     $info_border !important;
-
-    .badge {
-      color:            $info_color !important;
-      background-color: $info_text !important;
-      border-color:     $info_border !important;
-    }
-  }
-
-  .panel-info > .panel-heading {
-    background-color: mix($info_color, $info_text, 90%) !important;
-    border-color:     mix($info_color, $info_text, 85%) !important;
-    color:            mix($info_text, $info_color, 90%) !important;
-
-    &, .media * {
-      color: mix($info_text, $info_color, 90%) !important;
-    }
-
-    .media a {
-      color: mix(mix($info_text, $info_color, 90%), $link_color, 80%) !important;
-    }
-  }
-
-  .btn-info:hover {
-    background-color: mix($info_color, $info_text, 90%) !important;
-  }
-
-  .btn-default, .alert-default, .label-default, .panel-badge-default, .badge-default, .list-group-item-default {
-    color:            $default_text !important;
-    background-color: $default_color !important;
-    border-color:     $default_border !important;
-
-    .badge {
-      color:            $default_color !important;
-      background-color: $default_text !important;
-      border-color:     $default_border !important;
-    }
-  }
-
-  // .panel-default > .panel-heading {
-  //   background-color: mix($default_color, $default_text, 90%) !important;
-  //   border-color:     mix($default_color, $default_text, 85%) !important;
-  //   color:            mix($default_text, $default_color, 90%) !important;
-  // }
-
-  .btn-default:hover {
-    background-color: mix($default_color, $default_text, 90%) !important;
-  }
-
-  // Reset debug
-  #debug {
-    background: white;
-    color:      black;
-
-    hr {
-      background-color: inherit;
-      border-color:     inherit;
-    }
-  }
-
-  // Entry subtext
-  .entry-subtext {
-    color: mix($primary_color, $panel_text, 80%);
-  }
-
-  /* nprogress */
-  $nprogress-color: lighten($primary_color, 25%);
-
-  #nprogress {
-    .bar {
-      background: $nprogress-color;
-    }
-
-    .peg {
-      box-shadow: 0 0 10px $nprogress-color, 0 0 5px $nprogress-color;
-    }
-
-    .spinner-icon {
-      border-top-color:  $nprogress-color;
-      border-left-color: $nprogress-color;
-    }
-  }
-}

From 22ae1f6655db1067d691816a563f65288bfc8328 Mon Sep 17 00:00:00 2001
From: Andreas Nedbal <andy@pixelde.su>
Date: Tue, 5 May 2020 04:31:15 +0200
Subject: [PATCH 113/172] Adjust navigation layout on main feed pages

---
 app/views/layouts/feed.haml    |  2 +-
 app/views/shared/_sidebar.haml | 14 ++++----------
 app/views/tabs/_feed.haml      | 25 +++++++++++++++++++++++++
 3 files changed, 30 insertions(+), 11 deletions(-)
 create mode 100644 app/views/tabs/_feed.haml

diff --git a/app/views/layouts/feed.haml b/app/views/layouts/feed.haml
index 3f373b6d..dff4d4f9 100644
--- a/app/views/layouts/feed.haml
+++ b/app/views/layouts/feed.haml
@@ -1,9 +1,9 @@
-= render 'navigation/feed'
 .container.container--main
   .row
     .col-md-3.col-sm-4.d-none.d-sm-block
       = render 'shared/sidebar'
     .col-md-9.col-xs-12.col-sm-8
       = render 'layouts/messages'
+      = render 'tabs/feed'
       = yield
   .d-block.d-sm-none= render 'shared/links'
\ No newline at end of file
diff --git a/app/views/shared/_sidebar.haml b/app/views/shared/_sidebar.haml
index 555d3079..205d49ad 100644
--- a/app/views/shared/_sidebar.haml
+++ b/app/views/shared/_sidebar.haml
@@ -8,18 +8,12 @@
           = current_user.display_name
       .profile__screen-name
         = current_user.screen_name
-.card
-  .list-group
-    = list_group_item t('views.general.timeline'), root_path
-    - if APP_CONFIG.dig(:features, :public, :enabled)
-      = list_group_item t('views.general.public'), public_timeline_path
-    - current_user.groups.each do |group|
-      = list_group_item group.display_name, group_timeline_path(group.name)
 - unless @group.nil?
-  .card.profile--panel
-    .card-header
-      %h3.card-title= t('views.group.members')
+  .card
+    .card-header= t('views.group.members')
     .card-body
+      - if @group.members.empty?
+        %p.text-muted No members yet!
       - @group.members.each do |member|
         %a{href: show_user_profile_path(member.user.screen_name), title: member.user.screen_name, data: { toggle: :tooltip, placement: :top }}
           %img.avatar-xs{src: member.user.profile_picture.url(:medium)}
diff --git a/app/views/tabs/_feed.haml b/app/views/tabs/_feed.haml
new file mode 100644
index 00000000..a5cd710d
--- /dev/null
+++ b/app/views/tabs/_feed.haml
@@ -0,0 +1,25 @@
+.card
+  .list-group.list-group-horizontal-sm.text-center
+    = list_group_item t('views.general.timeline'), root_path
+    - if APP_CONFIG.dig(:features, :public, :enabled)
+      = list_group_item t('views.general.public'), public_timeline_path
+    .list-group-item.list-group-item-action.dropdown{class: "#{'active' if @group}"}
+      %a.dropdown-toggle{ type: 'button', data: { toggle: 'dropdown' }, aria: { haspopup: true, expanded: false }}
+        - if @group
+          = @group.display_name
+        - else
+          Groups
+      .dropdown-menu
+        - if current_user.groups.empty?
+          .p-3
+            %p Looks like you don't have any groups yet!
+            %p
+              You can create groups and add users to them using the
+              %i.fa.fa-fw.fa-users
+              icon in the navigation on user profiles (that are not yours)
+            %p.mb-0
+              Once you have done that, the groups will be listed here and
+              if selected, you'll get a timeline view of all users from
+              that group!
+        - current_user.groups.each do |group|
+          %a.dropdown-item{ href: group_timeline_path(group.name) }= group.display_name
\ No newline at end of file

From 0bc4a5b9685e4602ea4a7962bdfc861eae00a2ff Mon Sep 17 00:00:00 2001
From: Andreas Nedbal <andy@pixelde.su>
Date: Tue, 5 May 2020 05:04:43 +0200
Subject: [PATCH 114/172] Fix hidespan helper using not existing Bootstrap
 class

---
 app/helpers/application_helper.rb | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/helpers/application_helper.rb b/app/helpers/application_helper.rb
index 7e00636b..02861b61 100644
--- a/app/helpers/application_helper.rb
+++ b/app/helpers/application_helper.rb
@@ -48,7 +48,7 @@ module ApplicationHelper
   end
 
   def hidespan(body, hide)
-    content_tag(:span, body, class: "hidden-#{hide}")
+    content_tag(:span, body, class: hide)
   end
 
   ##

From c142920c6cbf0258c4032515b36b2895ceaa8cb7 Mon Sep 17 00:00:00 2001
From: Andreas Nedbal <andy@pixelde.su>
Date: Tue, 5 May 2020 05:04:54 +0200
Subject: [PATCH 115/172] Adjust answerbox layout on mobile

---
 app/assets/stylesheets/components/_comments.scss |  1 +
 app/views/answerbox/_comments.haml               |  2 +-
 app/views/application/_answerbox.haml            | 10 +++++-----
 3 files changed, 7 insertions(+), 6 deletions(-)

diff --git a/app/assets/stylesheets/components/_comments.scss b/app/assets/stylesheets/components/_comments.scss
index 2cadc515..70d35759 100644
--- a/app/assets/stylesheets/components/_comments.scss
+++ b/app/assets/stylesheets/components/_comments.scss
@@ -1,5 +1,6 @@
 .comment {
   list-style-type: none;
+  margin-bottom: map-get($spacers, 2);
 
   &__container {
     padding-left: 0;
diff --git a/app/views/answerbox/_comments.haml b/app/views/answerbox/_comments.haml
index b543a5c5..4e635a3d 100644
--- a/app/views/answerbox/_comments.haml
+++ b/app/views/answerbox/_comments.haml
@@ -7,7 +7,7 @@
         %div{class: "ab-comment-smile-list", style: "height: 0; width: 0"}= render "modal/comment_smiles", comment: comment
         .media
           .pull-left
-            %img.comment__user-avatar.avatar-md{src: comment.user.profile_picture.url(:medium)}
+            %img.comment__user-avatar.avatar-sm{src: comment.user.profile_picture.url(:medium)}
           .media-body
             %h6.media-heading.comment__user
               = user_screen_name comment.user
diff --git a/app/views/application/_answerbox.haml b/app/views/application/_answerbox.haml
index b7c343fc..92cc1063 100644
--- a/app/views/application/_answerbox.haml
+++ b/app/views/application/_answerbox.haml
@@ -15,24 +15,24 @@
         = markdown a.content
     - if @user.nil?
       .row
-        .col-md-6.col-sm-4.col-xs-6.text-left.text-muted
+        .col-4.col-sm-4.col-md-6.text-left.text-muted
           .media
             .pull-left
               %a{href: show_user_profile_path(a.user.screen_name)}
                 %img.answerbox__answer-user-avatar.avatar-sm{src: a.user.profile_picture.url(:medium)}
             .media-body
               %h6.media-heading.answerbox__answer-user
-                = raw t('views.answerbox.answered', hide: hidespan(t('views.answerbox.hide'), "xs"), user: user_screen_name(a.user))
+                = raw t('views.answerbox.answered', hide: hidespan(t('views.answerbox.hide'), "d-none d-sm-inline"), user: user_screen_name(a.user))
               .answerbox__answer-date
                 = link_to(raw(t('views.answerbox.time', time: time_tooltip(a))), show_user_answer_path(a.user.screen_name, a.id))
-        .col-md-6.col-sm-8.col-xs-6.text-right
+        .col-8.col-sm-8.col-md-6.text-right
           = render 'answerbox/actions', a: a
     - else
       .row
-        .col-md-6.col-sm-4.col-xs-6.text-left.text-muted
+        .col-4.col-sm-4.col-md-6.text-left.text-muted
           %i.fa.fa-clock-o
           = link_to(raw(t('views.answerbox.time', time: time_tooltip(a))), show_user_answer_path(a.user.screen_name, a.id))
-        .col-md-6.col-sm-8.col-xs-6.text-right
+        .col-8.col-sm-8.col-md-6.text-right
           = render 'answerbox/actions', a: a
   .card-footer{id: "ab-comments-section-#{a.id}", style: @display_all.nil? ? 'display: none' : nil }
     %div{id: "ab-smiles-#{a.id}"}= render 'answerbox/smiles', a: a

From b7b2adde4402cad7556d8b1efbe3920ffcbf170d Mon Sep 17 00:00:00 2001
From: Andreas Nedbal <andy@pixelde.su>
Date: Tue, 5 May 2020 20:17:29 +0200
Subject: [PATCH 116/172] Add specs for ThemeHelper

---
 spec/helpers/theme_helper_spec.rb | 108 ++++++++++++++++++++++++++++++
 spec/rails_helper.rb              |   1 +
 2 files changed, 109 insertions(+)
 create mode 100644 spec/helpers/theme_helper_spec.rb

diff --git a/spec/helpers/theme_helper_spec.rb b/spec/helpers/theme_helper_spec.rb
new file mode 100644
index 00000000..69f2b588
--- /dev/null
+++ b/spec/helpers/theme_helper_spec.rb
@@ -0,0 +1,108 @@
+# frozen_string_literal: true
+
+require "rails_helper"
+
+describe ThemeHelper, :type => :helper do
+  describe "#get_hex_color_from_theme_value" do
+    it "returns the proper hex value from the theme value" do
+      expect(helper.get_hex_color_from_theme_value(16777215)).to eq("ffffff")
+    end
+  end
+
+  describe "#get_decimal_triplet_from_hex" do
+    it "returns the proper decimal triplet from a hex value" do
+      expect(helper.get_decimal_triplet_from_hex("5e35b1")).to eq("94, 53, 177")
+    end
+  end
+
+  describe "#get_active_theme" do
+    context "when user is a guest" do
+      context "when target page doesn't have a theme" do
+        it "returns no theme" do
+          expect(helper.get_active_theme).to be_nil
+        end
+      end
+
+      context "when target page has a theme" do
+        before(:each) do
+          @user = FactoryBot.create(:user)
+          @user.theme = Theme.new
+          @user.save!
+        end
+
+        it "returns a theme" do
+          expect(helper.get_active_theme).to be_a(Theme)
+        end
+      end
+    end
+
+    context "when user is signed in" do
+      let(:user) { FactoryBot.create(:user) }
+
+      before(:each) { sign_in(user) }
+
+      context "when user has no theme" do
+        context "when target page has no theme" do
+          it "returns no theme" do
+            expect(helper.get_active_theme).to be_nil
+          end
+        end
+
+        context "when target page has a theme" do
+          let(:theme) { Theme.new }
+
+          before(:each) do
+            @user = FactoryBot.create(:user)
+            @user.theme = theme
+            @user.save!
+          end
+
+          it "returns a theme" do
+            expect(helper.get_active_theme).to be(theme)
+          end
+        end
+      end
+
+      context "when user has a theme" do
+        let(:theme) { Theme.new }
+
+        before(:each) do
+          user.theme = theme
+          user.show_foreign_themes = true
+          user.save!
+        end
+
+        context "when target page has no theme" do
+          it "returns the theme of the current user" do
+            expect(helper.get_active_theme).to eq(theme)
+          end
+        end
+
+        context "when target page has a theme" do
+          let(:user_theme) { Theme.new }
+
+          before(:each) do
+            @user = FactoryBot.create(:user)
+            @user.theme = user_theme
+            @user.save!
+          end
+
+          it "returns the theme of the current page" do
+            expect(helper.get_active_theme).to eq(user_theme)
+          end
+
+          context "when user doesn't allow foreign themes" do
+            before(:each) do
+              user.show_foreign_themes = false
+              user.save!
+            end
+
+            it "should return the users theme" do
+              expect(helper.get_active_theme).to eq(theme)
+            end
+          end
+        end
+      end
+    end
+  end
+end
\ No newline at end of file
diff --git a/spec/rails_helper.rb b/spec/rails_helper.rb
index 742cffa8..e2f13e87 100644
--- a/spec/rails_helper.rb
+++ b/spec/rails_helper.rb
@@ -77,6 +77,7 @@ RSpec.configure do |config|
   # config.filter_gems_from_backtrace("gem name")
 
   config.include Devise::Test::ControllerHelpers, type: :controller
+  config.include Devise::Test::ControllerHelpers, type: :helper
 end
 
 Dir[Rails.root.join "spec", "shared_examples", "*.rb"].sort.each { |f| require f }

From d9f67e86d991549dbf19b30f7319b12f7e55b138 Mon Sep 17 00:00:00 2001
From: Andreas Nedbal <andy@pixelde.su>
Date: Tue, 5 May 2020 20:17:49 +0200
Subject: [PATCH 117/172] Fix get_active_theme to return proper theme for user

---
 app/helpers/theme_helper.rb | 12 ++++++++----
 1 file changed, 8 insertions(+), 4 deletions(-)

diff --git a/app/helpers/theme_helper.rb b/app/helpers/theme_helper.rb
index 99e1ce7d..fea46af3 100644
--- a/app/helpers/theme_helper.rb
+++ b/app/helpers/theme_helper.rb
@@ -47,14 +47,18 @@ module ThemeHelper
   end
 
   def get_active_theme
-    if current_user&.theme
-      current_user.theme
-    elsif @user&.theme
+    if @user&.theme
       if user_signed_in?
-        @user.theme unless !current_user&.show_foreign_themes?
+        if current_user&.show_foreign_themes?
+          @user.theme
+        else
+          current_user&.theme
+        end
       else
         @user.theme
       end
+    elsif current_user&.theme
+      current_user.theme
     end
   end
 

From 892b708c6fe5c98335e97960a304b5ee0cbc63cf Mon Sep 17 00:00:00 2001
From: Andreas Nedbal <andy@pixelde.su>
Date: Wed, 6 May 2020 13:36:43 +0200
Subject: [PATCH 118/172] Implement changes to ThemeHelper requested by review

- turned theme_attribute_map into frozen constant ATTRIBUTE_MAP
- early return if no theme exists, instead of if-block
- usage of Hash#key? instead Hash[k] to confirm existence of key in hash
- Early skip/next if key is not present in Hash instead of if-block
---
 app/helpers/theme_helper.rb | 76 ++++++++++++++++++-------------------
 1 file changed, 38 insertions(+), 38 deletions(-)

diff --git a/app/helpers/theme_helper.rb b/app/helpers/theme_helper.rb
index fea46af3..13f74a0a 100644
--- a/app/helpers/theme_helper.rb
+++ b/app/helpers/theme_helper.rb
@@ -1,49 +1,49 @@
 module ThemeHelper
-  def render_theme
-    theme_attribute_map = {
-      'primary_color' => 'primary',
-      'primary_text' => 'primary-text',
-      'danger_color' => 'danger',
-      'danger_text' => 'danger-text',
-      'warning_color' => 'warning',
-      'warning_text' => 'warning-text',
-      'info_color' => 'info',
-      'info_text' => 'info-text',
-      'success_color' => 'success',
-      'success_text' => 'success-text',
-      'dark_color' => 'dark',
-      'dark_text' => 'dark-text',
-      'light_color' => 'light',
-      'light_text' => 'light-text',
-      'raised_background' => 'raised-bg',
-      'raised_accent' => 'raised-accent',
-      'background_color' => 'background',
-      'body_text' => 'body-text',
-      'input_color' => 'input-bg',
-      'input_text' => 'input-text',
-      'muted_text' => 'muted-text'
-    }
+  ATTRIBUTE_MAP = {
+    'primary_color' => 'primary',
+    'primary_text' => 'primary-text',
+    'danger_color' => 'danger',
+    'danger_text' => 'danger-text',
+    'warning_color' => 'warning',
+    'warning_text' => 'warning-text',
+    'info_color' => 'info',
+    'info_text' => 'info-text',
+    'success_color' => 'success',
+    'success_text' => 'success-text',
+    'dark_color' => 'dark',
+    'dark_text' => 'dark-text',
+    'light_color' => 'light',
+    'light_text' => 'light-text',
+    'raised_background' => 'raised-bg',
+    'raised_accent' => 'raised-accent',
+    'background_color' => 'background',
+    'body_text' => 'body-text',
+    'input_color' => 'input-bg',
+    'input_text' => 'input-text',
+    'muted_text' => 'muted-text'
+  }.freeze
 
+  def render_theme
     theme = get_active_theme
 
-    if theme
+    return unless theme
 
     body = ":root {\n"
-      theme.attributes.each do |k, v|
-        if theme_attribute_map[k]
-          if k.include? "text"
-            hex = get_hex_color_from_theme_value(v)
-            body += "\t--#{theme_attribute_map[k]}: #{get_decimal_triplet_from_hex(hex)};\n"
-          else
-            body += "\t--#{theme_attribute_map[k]}: ##{get_hex_color_from_theme_value(v)};\n"
-          end
-        end
+
+    theme.attributes.each do |k, v|
+      next unless ATTRIBUTE_MAP.key?(k)
+
+      if k.include? "text"
+        hex = get_hex_color_from_theme_value(v)
+        body += "\t--#{ATTRIBUTE_MAP[k]}: #{get_decimal_triplet_from_hex(hex)};\n"
+      else
+        body += "\t--#{ATTRIBUTE_MAP[k]}: ##{get_hex_color_from_theme_value(v)};\n"
       end
-
-      body += "}"
-
-      content_tag(:style, body)
     end
+
+    body += "}"
+
+    content_tag(:style, body)
   end
 
   def get_active_theme

From ec998686ffb93ff607062ec9a70e596e73304953 Mon Sep 17 00:00:00 2001
From: Andreas Nedbal <andy@pixelde.su>
Date: Wed, 6 May 2020 13:37:26 +0200
Subject: [PATCH 119/172] Add non-ffffff test for
 `ThemeHelper#get_hex_color_from_theme_value`

---
 spec/helpers/theme_helper_spec.rb | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/spec/helpers/theme_helper_spec.rb b/spec/helpers/theme_helper_spec.rb
index 69f2b588..820c8103 100644
--- a/spec/helpers/theme_helper_spec.rb
+++ b/spec/helpers/theme_helper_spec.rb
@@ -4,9 +4,13 @@ require "rails_helper"
 
 describe ThemeHelper, :type => :helper do
   describe "#get_hex_color_from_theme_value" do
-    it "returns the proper hex value from the theme value" do
+    it "returns the proper hex value from the decimal value for white" do
       expect(helper.get_hex_color_from_theme_value(16777215)).to eq("ffffff")
     end
+
+    it "returns the proper hex value from the decimal value for purple" do
+      expect(helper.get_hex_color_from_theme_value(6174129)).to eq("5e35b1")
+    end
   end
 
   describe "#get_decimal_triplet_from_hex" do

From 4044696a8a10b202026f51e52f5cd22c2478f201 Mon Sep 17 00:00:00 2001
From: Andreas Nedbal <andy@pixelde.su>
Date: Wed, 6 May 2020 13:48:16 +0200
Subject: [PATCH 120/172] Add specs for `ThemeHelper#render_theme`

---
 spec/helpers/theme_helper_spec.rb | 28 ++++++++++++++++++++++++++++
 1 file changed, 28 insertions(+)

diff --git a/spec/helpers/theme_helper_spec.rb b/spec/helpers/theme_helper_spec.rb
index 820c8103..1448c2fe 100644
--- a/spec/helpers/theme_helper_spec.rb
+++ b/spec/helpers/theme_helper_spec.rb
@@ -3,6 +3,34 @@
 require "rails_helper"
 
 describe ThemeHelper, :type => :helper do
+  describe "#render_theme" do
+    context "when target page doesn't have a theme" do
+      it "returns no theme" do
+        expect(helper.render_theme).to be_nil
+      end
+    end
+
+    context "when target page has a theme" do
+      before(:each) do
+        @user = FactoryBot.create(:user)
+        @user.theme = Theme.new
+        @user.save!
+      end
+
+      it "returns a theme" do
+        expect(helper.render_theme).to include("<style>:root {")
+      end
+
+      it "contains correct theme background colors" do
+        expect(helper.render_theme).to include("--primary: #5e35b1;")
+      end
+
+      it "properly converts color values for *-text theme attributes" do
+        expect(helper.render_theme).to include("--primary-text: 255, 255, 255;")
+      end
+    end
+  end
+
   describe "#get_hex_color_from_theme_value" do
     it "returns the proper hex value from the decimal value for white" do
       expect(helper.get_hex_color_from_theme_value(16777215)).to eq("ffffff")

From b16e1c1b581d95d90c21a5b92f8083cf82db3098 Mon Sep 17 00:00:00 2001
From: Andreas Nedbal <andy@pixelde.su>
Date: Wed, 6 May 2020 13:53:01 +0200
Subject: [PATCH 121/172] Turn UpdateThemeFields into an IrreversibleMigration

---
 .../20200504214933_update_theme_fields.rb     | 32 +------------------
 1 file changed, 1 insertion(+), 31 deletions(-)

diff --git a/db/migrate/20200504214933_update_theme_fields.rb b/db/migrate/20200504214933_update_theme_fields.rb
index f6855550..015f5969 100644
--- a/db/migrate/20200504214933_update_theme_fields.rb
+++ b/db/migrate/20200504214933_update_theme_fields.rb
@@ -40,36 +40,6 @@ class UpdateThemeFields < ActiveRecord::Migration[5.2]
   end
 
   def down
-    add_column :themes, :css_file_name, :string
-    add_column :themes, :css_content_type, :string
-    add_column :themes, :css_file_size, :integer
-    add_column :themes, :css_updated_at, :datetime
-
-    rename_column :themes, :raised_background, :panel_color 
-    add_column :themes, :panel_text, :integer
-    remove_column :themes, :raised_accent
-
-    rename_column :themes, :dark_color, :default_color 
-    rename_column :themes, :dark_text, :default_text
-
-    remove_column :themes, :light_color
-    remove_column :themes, :light_text
-
-    rename_column :themes, :body_text, :background_text
-    rename_column :themes, :muted_text, :background_muted
-
-    add_column :themes, :link_color, :integer
-    add_column :themes, :outline_color, :integer
-
-    change_column_default :themes, :panel_color, 0xF9F9F9
-    change_column_default :themes, :default_color, 0x222222
-    change_column_default :themes, :background_text, 0x222222
-    change_column_default :themes, :background_muted, 0xBBBBBB
-    change_column_default :themes, :background_color, 0xFFFFFF
-    change_column_default :themes, :danger_color, 0xFF0039
-    change_column_default :themes, :warning_color, 0xFF7518
-    change_column_default :themes, :info_color, 0x9954BB
-    change_column_default :themes, :success_color, 0x3FB618
-    change_column_default :themes, :input_color, 0xFFFFFF
+    raise ActiveRecord::IrreversibleMigration
   end
 end

From 47e5675d84037896c91cb1a50014fde37c7a9d25 Mon Sep 17 00:00:00 2001
From: Andreas Nedbal <andy@pixelde.su>
Date: Wed, 6 May 2020 13:53:43 +0200
Subject: [PATCH 122/172] Remove superfluous database migration

---
 db/20150724154106_create_themes_table.rb | 6 ------
 1 file changed, 6 deletions(-)
 delete mode 100644 db/20150724154106_create_themes_table.rb

diff --git a/db/20150724154106_create_themes_table.rb b/db/20150724154106_create_themes_table.rb
deleted file mode 100644
index 0d326836..00000000
--- a/db/20150724154106_create_themes_table.rb
+++ /dev/null
@@ -1,6 +0,0 @@
-class CreateThemesTable < ActiveRecord::Migration[4.2]
-  def change
-    create_table :themes do |t|
-    end
-  end
-end

From 689dd3880fae4a9def24b3b09ad77d769f89da77 Mon Sep 17 00:00:00 2001
From: Andreas Nedbal <andy@pixelde.su>
Date: Wed, 6 May 2020 13:56:09 +0200
Subject: [PATCH 123/172] Adjust texts in tabs/feed template

---
 app/views/tabs/_feed.haml | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/app/views/tabs/_feed.haml b/app/views/tabs/_feed.haml
index a5cd710d..8ee4fc1c 100644
--- a/app/views/tabs/_feed.haml
+++ b/app/views/tabs/_feed.haml
@@ -12,14 +12,14 @@
       .dropdown-menu
         - if current_user.groups.empty?
           .p-3
-            %p Looks like you don't have any groups yet!
+            %p Looks like you don't have any groups yet.
             %p
               You can create groups and add users to them using the
               %i.fa.fa-fw.fa-users
-              icon in the navigation on user profiles (that are not yours)
+              icon in the navigation on user profiles that are not yours.
             %p.mb-0
               Once you have done that, the groups will be listed here and
-              if selected, you'll get a timeline view of all users from
-              that group!
+              when selected, you'll get a timeline view of all users from
+              that group.
         - current_user.groups.each do |group|
           %a.dropdown-item{ href: group_timeline_path(group.name) }= group.display_name
\ No newline at end of file

From 859d2825d1bf9f10c5d35fd1dbcfc0ea4087755a Mon Sep 17 00:00:00 2001
From: Andreas Nedbal <andy@pixelde.su>
Date: Wed, 6 May 2020 14:23:11 +0200
Subject: [PATCH 124/172] Remove mention of shutdown from export page

---
 app/views/settings/_export.haml | 5 +----
 1 file changed, 1 insertion(+), 4 deletions(-)

diff --git a/app/views/settings/_export.haml b/app/views/settings/_export.haml
index 24aaebe5..91634d2c 100644
--- a/app/views/settings/_export.haml
+++ b/app/views/settings/_export.haml
@@ -2,10 +2,7 @@
   .card-body
     %h2 Export your data
     %p
-      With the announcement of
-      = succeed ',' do
-        %a{href: 'http://blog.retrospring.net/saying-goodbye/'} shutting down Retrospring on June 8 2016
-      we promised you one last feature: exporting all your data.  The data is inside a
+      The data is inside a
       %code= ".tar.gz"
       archive and available in three formats: YAML, JSON, and XML.  The archive also contains a copy of your
       profile picture and header picture in all sizes.

From 9961796e3beba1228abcc0d4c45460aac4ea2d2a Mon Sep 17 00:00:00 2001
From: Andreas Nedbal <andy@pixelde.su>
Date: Wed, 6 May 2020 14:30:12 +0200
Subject: [PATCH 125/172] Apply review suggestion for navigation tag helpers

---
 app/helpers/application_helper.rb | 17 +++++++++++++++--
 1 file changed, 15 insertions(+), 2 deletions(-)

diff --git a/app/helpers/application_helper.rb b/app/helpers/application_helper.rb
index 02861b61..d1c25e24 100644
--- a/app/helpers/application_helper.rb
+++ b/app/helpers/application_helper.rb
@@ -7,6 +7,12 @@ module ApplicationHelper
       class: ''
     }.merge(options)
 
+    classes = [
+      "nav-item",
+      current_page? ? "active" : nil,
+      options[:class]
+    ].compact.join(" ")
+
     unless options[:icon].nil?
       body = "#{content_tag(:i, '', class: "mdi-#{options[:icon]}")} #{body}"
     end
@@ -18,7 +24,7 @@ module ApplicationHelper
         }"))}"
     end
 
-    content_tag(:li, link_to(body.html_safe, path, class: "nav-link"), class: ("nav-item#{' active' if current_page? path} #{options[:class]}"))
+    content_tag(:li, link_to(body.html_safe, path, class: "nav-link"), class: classes)
   end
 
   def list_group_item(body, path, options = {})
@@ -28,6 +34,13 @@ module ApplicationHelper
       class: ''
     }.merge(options)
 
+    classes = [
+      "list-group-item",
+      "list-group-item-action",
+      current_page? ? "active" : nil,
+      options[:class]
+    ].compact.join(" ")
+
     unless options[:badge].nil? or options[:badge] == 0
       # TODO: make this prettier?
       body << " #{
@@ -36,7 +49,7 @@ module ApplicationHelper
         }"))}"
     end
 
-    content_tag(:a, body.html_safe, href: path, class: ("list-group-item list-group-item-action #{'active ' if current_page? path}#{options[:class]}"))
+    content_tag(:a, body.html_safe, href: path, class: classes)
   end
 
   def tooltip(body, tooltip_content, placement = "bottom")

From d5d5c5eb1991d4f276bf19cc8b932c7a06ad9d04 Mon Sep 17 00:00:00 2001
From: Andreas Nedbal <andy@pixelde.su>
Date: Wed, 6 May 2020 14:31:27 +0200
Subject: [PATCH 126/172] make sprockets cache definition development-only

---
 config/initializers/assets.rb | 14 ++++++++------
 1 file changed, 8 insertions(+), 6 deletions(-)

diff --git a/config/initializers/assets.rb b/config/initializers/assets.rb
index 75540cd5..bc49d7dd 100644
--- a/config/initializers/assets.rb
+++ b/config/initializers/assets.rb
@@ -1,11 +1,13 @@
 # Be sure to restart your server when you modify this file.
 
-Rails.application.config.assets.configure do |env|
-  env.cache = Sprockets::Cache::FileStore.new(
-    ENV.fetch("SPROCKETS_CACHE", "#{env.root}/tmp/cache/assets"),
-    Rails.application.config.assets.cache_limit,
-    env.logger
-  )
+unless Rails.env.production?
+  Rails.application.config.assets.configure do |env|
+    env.cache = Sprockets::Cache::FileStore.new(
+      ENV.fetch("SPROCKETS_CACHE", "#{env.root}/tmp/cache/assets"),
+      Rails.application.config.assets.cache_limit,
+      env.logger
+    )
+  end
 end
 
 # Version of your assets, change this if you want to expire all your assets.

From e1c1357d9b4efb17e854a366ce6d286635d85f05 Mon Sep 17 00:00:00 2001
From: Andreas Nedbal <andy@pixelde.su>
Date: Wed, 6 May 2020 14:49:35 +0200
Subject: [PATCH 127/172] Fix missing arguments on current_page?

---
 app/helpers/application_helper.rb | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/app/helpers/application_helper.rb b/app/helpers/application_helper.rb
index d1c25e24..d87d9704 100644
--- a/app/helpers/application_helper.rb
+++ b/app/helpers/application_helper.rb
@@ -9,7 +9,7 @@ module ApplicationHelper
 
     classes = [
       "nav-item",
-      current_page? ? "active" : nil,
+      current_page?(path) ? "active" : nil,
       options[:class]
     ].compact.join(" ")
 
@@ -37,7 +37,7 @@ module ApplicationHelper
     classes = [
       "list-group-item",
       "list-group-item-action",
-      current_page? ? "active" : nil,
+      current_page?(path) ? "active" : nil,
       options[:class]
     ].compact.join(" ")
 

From f6ca2176d321fd208864878f228ba31ebe25c8c0 Mon Sep 17 00:00:00 2001
From: Andreas Nedbal <andy@pixelde.su>
Date: Wed, 6 May 2020 18:13:51 +0200
Subject: [PATCH 128/172] Remove arctic_scroll

---
 .../javascripts/application.js.erb.coffee     |  3 --
 .../javascripts/jquery.arctic_scroll.js       | 36 -------------------
 2 files changed, 39 deletions(-)
 delete mode 100644 vendor/assets/javascripts/jquery.arctic_scroll.js

diff --git a/app/assets/javascripts/application.js.erb.coffee b/app/assets/javascripts/application.js.erb.coffee
index 454b5670..fd54a6d7 100644
--- a/app/assets/javascripts/application.js.erb.coffee
+++ b/app/assets/javascripts/application.js.erb.coffee
@@ -1,7 +1,6 @@
 #= require jquery3
 #= require jquery_ujs
 #= require jquery.turbolinks
-#= require jquery.arctic_scroll
 #= require turbolinks
 #= require popper
 #= require bootstrap
@@ -84,8 +83,6 @@ _ready = ->
     aId = announcement.dataset.announcementId
     window.localStorage.setItem("announcement#{aId}", true)
 
-  $('.arctic_scroll').arctic_scroll speed: 500
-
 
 $(document).ready _ready
 $(document).on 'page:load', _ready
diff --git a/vendor/assets/javascripts/jquery.arctic_scroll.js b/vendor/assets/javascripts/jquery.arctic_scroll.js
deleted file mode 100644
index 966b45dd..00000000
--- a/vendor/assets/javascripts/jquery.arctic_scroll.js
+++ /dev/null
@@ -1,36 +0,0 @@
-(function ($) {
-    $.fn.arctic_scroll = function (options) {
-
-        var defaults = {
-            elem: $(this),
-            speed: 500,
-            scroll_selector: 'html,body'
-        };
-        
-        var options = $.extend(defaults, options),
-            to_scroll = options.scroll_selector,
-            ua = $.browser;
-        /*
-        if ( ua.msie && ua.version.slice(0,1) == "8" ) {
-            to_scroll = window;
-        } else if ( ua.msie && ua.version.slice(0,1) == "7" ) {
-            to_scroll = window;
-        }
-        */
-        options.elem.click(function(event){     
-            event.preventDefault();
-            var offset = ($(this).attr('data-offset')) ? $(this).attr('data-offset') : false,
-                position = ($(this).attr('data-position')) ? $(this).attr('data-position') : false;         
-            if (offset) {
-                var toMove = parseInt(offset);
-                $(options.scroll_selector).stop(true, false).animate({scrollTop: ($(this.hash).offset().top + toMove) }, options.speed);
-            } else if (position) {
-                var toMove = parseInt(position);
-                $(options.scroll_selector).stop(true, false).animate({scrollTop: toMove }, options.speed);
-            } else {
-                $(options.scroll_selector).stop(true, false).animate({scrollTop: ($(this.hash).offset().top) }, options.speed);
-            }
-        });
-
-    };
-})(jQuery);
\ No newline at end of file

From f8448405a47d36cbb685b8b33c564891942c6cf7 Mon Sep 17 00:00:00 2001
From: Andreas Nedbal <andy@pixelde.su>
Date: Wed, 6 May 2020 18:42:53 +0200
Subject: [PATCH 129/172] Remove empty Helper classes

---
 app/helpers/announcement_helper.rb  | 2 --
 app/helpers/answer_helper.rb        | 2 --
 app/helpers/discover_helper.rb      | 2 --
 app/helpers/inbox_helper.rb         | 2 --
 app/helpers/notifications_helper.rb | 2 --
 app/helpers/public_helper.rb        | 2 --
 app/helpers/services_helper.rb      | 2 --
 app/helpers/static_helper.rb        | 2 --
 app/helpers/subscribe_helper.rb     | 2 --
 9 files changed, 18 deletions(-)
 delete mode 100644 app/helpers/announcement_helper.rb
 delete mode 100644 app/helpers/answer_helper.rb
 delete mode 100644 app/helpers/discover_helper.rb
 delete mode 100644 app/helpers/inbox_helper.rb
 delete mode 100644 app/helpers/notifications_helper.rb
 delete mode 100644 app/helpers/public_helper.rb
 delete mode 100644 app/helpers/services_helper.rb
 delete mode 100644 app/helpers/static_helper.rb
 delete mode 100644 app/helpers/subscribe_helper.rb

diff --git a/app/helpers/announcement_helper.rb b/app/helpers/announcement_helper.rb
deleted file mode 100644
index b71ddc14..00000000
--- a/app/helpers/announcement_helper.rb
+++ /dev/null
@@ -1,2 +0,0 @@
-module AnnouncementHelper
-end
diff --git a/app/helpers/answer_helper.rb b/app/helpers/answer_helper.rb
deleted file mode 100644
index 3b07ef9a..00000000
--- a/app/helpers/answer_helper.rb
+++ /dev/null
@@ -1,2 +0,0 @@
-module AnswerHelper
-end
diff --git a/app/helpers/discover_helper.rb b/app/helpers/discover_helper.rb
deleted file mode 100644
index 6d7d2ed7..00000000
--- a/app/helpers/discover_helper.rb
+++ /dev/null
@@ -1,2 +0,0 @@
-module DiscoverHelper
-end
diff --git a/app/helpers/inbox_helper.rb b/app/helpers/inbox_helper.rb
deleted file mode 100644
index 4c6ced5c..00000000
--- a/app/helpers/inbox_helper.rb
+++ /dev/null
@@ -1,2 +0,0 @@
-module InboxHelper
-end
diff --git a/app/helpers/notifications_helper.rb b/app/helpers/notifications_helper.rb
deleted file mode 100644
index 7342393a..00000000
--- a/app/helpers/notifications_helper.rb
+++ /dev/null
@@ -1,2 +0,0 @@
-module NotificationsHelper
-end
diff --git a/app/helpers/public_helper.rb b/app/helpers/public_helper.rb
deleted file mode 100644
index 0d8e188e..00000000
--- a/app/helpers/public_helper.rb
+++ /dev/null
@@ -1,2 +0,0 @@
-module PublicHelper
-end
diff --git a/app/helpers/services_helper.rb b/app/helpers/services_helper.rb
deleted file mode 100644
index de584353..00000000
--- a/app/helpers/services_helper.rb
+++ /dev/null
@@ -1,2 +0,0 @@
-module ServicesHelper
-end
diff --git a/app/helpers/static_helper.rb b/app/helpers/static_helper.rb
deleted file mode 100644
index 8cfc9af4..00000000
--- a/app/helpers/static_helper.rb
+++ /dev/null
@@ -1,2 +0,0 @@
-module StaticHelper
-end
diff --git a/app/helpers/subscribe_helper.rb b/app/helpers/subscribe_helper.rb
deleted file mode 100644
index e30187f5..00000000
--- a/app/helpers/subscribe_helper.rb
+++ /dev/null
@@ -1,2 +0,0 @@
-module SubscribeHelper
-end

From 65e66003ee6362ce345aca1e1ee5e342ee54ba1a Mon Sep 17 00:00:00 2001
From: Andreas Nedbal <andy@pixelde.su>
Date: Wed, 6 May 2020 18:51:06 +0200
Subject: [PATCH 130/172] Fix theme deletion not working

---
 app/views/settings/_theme.haml | 32 ++++++++++++++++----------------
 1 file changed, 16 insertions(+), 16 deletions(-)

diff --git a/app/views/settings/_theme.haml b/app/views/settings/_theme.haml
index 69896805..9c4b7160 100644
--- a/app/views/settings/_theme.haml
+++ b/app/views/settings/_theme.haml
@@ -1,16 +1,20 @@
-= bootstrap_form_for(current_user.theme || Theme.new, url: {action: "update_theme"}, html: {id: 'update_theme'}, method: "patch") do |f|
-  .card
-    .card-body
-      %h1 Theming
-      %p.lead Welcome to the Theme Editor!
-      %p 
-        Here you'll be able to modify your Retrospring experience by adjusting all available colors. 
-        To further help you with adjusting needs, there are a few example elements using the specified colors, and sections will include 
-        descriptions on their general use on the site!
+.card
+  .card-body
+    %h1 Theming
+    %p.lead Welcome to the Theme Editor!
+    %p 
+      Here you'll be able to modify your Retrospring experience by adjusting all available colors. 
+      To further help you with adjusting needs, there are a few example elements using the specified colors, and sections will include 
+      descriptions on their general use on the site!
 
-      %p 
-        And with that:
-        %b Happy Theming!
+    %p 
+      And with that:
+      %b Happy Theming!
+    
+    - if current_user.theme
+      .pull-right
+        = button_to 'Delete Theme', delete_user_theme_path, data: { confirm: "Are you sure?" }, tabindex: -1, method: :delete, class: "btn btn-danger"
+= bootstrap_form_for(current_user.theme || Theme.new, url: {action: "update_theme"}, html: {id: 'update_theme'}, method: "patch") do |f|
   .card
     .card-body
       %h2 General
@@ -129,7 +133,3 @@
     .card-body
       .pull-left
         = f.submit t('views.actions.save'), class: 'btn btn-primary'
-
-      - if current_user.theme
-        .pull-right
-          = button_to 'Delete Theme', delete_user_theme_path, data: { confirm: "Are you sure?" }, tabindex: -1, method: :delete, class: "btn btn-danger"

From f4da2b84c688c40193b421db2bd7d8d710042f56 Mon Sep 17 00:00:00 2001
From: Andreas Nedbal <andy@pixelde.su>
Date: Wed, 6 May 2020 21:19:49 +0200
Subject: [PATCH 131/172] Improve styling of minicolors swatch

---
 app/assets/stylesheets/overrides/_minicolors.scss | 13 ++++++++-----
 1 file changed, 8 insertions(+), 5 deletions(-)

diff --git a/app/assets/stylesheets/overrides/_minicolors.scss b/app/assets/stylesheets/overrides/_minicolors.scss
index ac9aae0e..bcfe2265 100644
--- a/app/assets/stylesheets/overrides/_minicolors.scss
+++ b/app/assets/stylesheets/overrides/_minicolors.scss
@@ -1,7 +1,10 @@
 .minicolors-theme-bootstrap .minicolors-swatch {
-  top:           0;
-  left:          0;
-  width:         42px;
-  height:        42px;
-  border-radius: 0;
+  top: 0;
+  left: 0;
+  width: 38px;
+  height: 38px;
+  border: 0;
+  border-top-left-radius: 4px;
+  border-bottom-left-radius: 4px;
+  border-right: 2px solid var(--raised-bg);
 }
\ No newline at end of file

From 6c54f8b79f86d580811719081eec60b59c41e320 Mon Sep 17 00:00:00 2001
From: Andreas Nedbal <andy@pixelde.su>
Date: Wed, 6 May 2020 21:29:06 +0200
Subject: [PATCH 132/172] Adjust image spacing in profile settings

---
 app/views/settings/_profile.haml | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/app/views/settings/_profile.haml b/app/views/settings/_profile.haml
index 9cf1a88c..b9a10692 100644
--- a/app/views/settings/_profile.haml
+++ b/app/views/settings/_profile.haml
@@ -6,7 +6,7 @@
 
       .media#profile-picture-media
         .pull-left
-          %img.img-rounded.profile--img{src: current_user.profile_picture.url(:medium)}
+          %img.avatar-lg.mr-3{src: current_user.profile_picture.url(:medium)}
         .media-body
           = f.file_field :profile_picture, label: t('views.settings.profile.avatar')
 
@@ -23,7 +23,7 @@
 
       .media#profile-header-media
         .pull-left
-          %img.img-rounded.header--img{src: current_user.profile_header.url(:mobile)}
+          %img.mr-3{src: current_user.profile_header.url(:mobile)}
         .media-body
           = f.file_field :profile_header, label: t('views.settings.profile.header')
 

From 83f51b64228a62209e410dc8cd1482da6f7a5a1f Mon Sep 17 00:00:00 2001
From: Andreas Nedbal <andy@pixelde.su>
Date: Wed, 6 May 2020 21:56:10 +0200
Subject: [PATCH 133/172] Add new styling for Devise views

---
 app/views/devise/confirmations/new.html.haml | 16 ++++++++-----
 app/views/devise/passwords/edit.html.haml    | 20 +++++++++-------
 app/views/devise/passwords/new.html.haml     | 16 ++++++++-----
 app/views/devise/registrations/new.html.haml | 25 +++++++++++---------
 app/views/devise/sessions/new.html.haml      | 23 ++++++++++--------
 5 files changed, 59 insertions(+), 41 deletions(-)

diff --git a/app/views/devise/confirmations/new.html.haml b/app/views/devise/confirmations/new.html.haml
index c6a533a1..da395950 100644
--- a/app/views/devise/confirmations/new.html.haml
+++ b/app/views/devise/confirmations/new.html.haml
@@ -1,11 +1,15 @@
 - provide(:title, generate_title("Resend confirmation instructions"))
 .container
-  %h1 Resend confirmation instructions
-  = bootstrap_form_for(resource, as: resource_name, url: confirmation_path(resource_name), html: { method: :post }) do |f|
-    = devise_error_messages!
+  .row
+    .col-sm-8.offset-sm-2
+      .card.mt-3
+        .card-body
+          %h1 Resend confirmation instructions
+          = bootstrap_form_for(resource, as: resource_name, url: confirmation_path(resource_name), html: { method: :post }) do |f|
+            = devise_error_messages!
 
-    = f.text_field :screen_name, autofocus: true, label: "User name"
-    = f.submit "Resend confirmation instructions"
+            = f.text_field :screen_name, autofocus: true, label: "User name"
+            = f.submit "Resend confirmation instructions", class: "btn btn-primary mb-3"
 
-  = render "devise/shared/links"
+          = render "devise/shared/links"
 = render "shared/links"
diff --git a/app/views/devise/passwords/edit.html.haml b/app/views/devise/passwords/edit.html.haml
index d773a8c1..7c052384 100644
--- a/app/views/devise/passwords/edit.html.haml
+++ b/app/views/devise/passwords/edit.html.haml
@@ -1,15 +1,19 @@
 - provide(:title, generate_title("Reset Password"))
 .container
-  %h1 Change your password
-  = bootstrap_form_for(resource, as: resource_name, url: password_path(resource_name), html: { method: :put }) do |f|
-    = devise_error_messages!
+  .row
+    .col-sm-4.offset-sm-4
+      .card.mt-3
+        .card-body
+          %h1 Change your password
+          = bootstrap_form_for(resource, as: resource_name, url: password_path(resource_name), html: { method: :put }) do |f|
+            = devise_error_messages!
 
-    = f.hidden_field :reset_password_token
+            = f.hidden_field :reset_password_token
 
-    = f.password_field :password, autofocus: true, autocomplete: "off", label: "New password"
-    = f.password_field :password_confirmation, autocomplete: "off", label: "Confirm new password"
+            = f.password_field :password, autofocus: true, autocomplete: "off", label: "New password"
+            = f.password_field :password_confirmation, autocomplete: "off", label: "Confirm new password"
 
-    = f.submit "Change my password"
+            = f.submit "Change my password"
 
-  = render "devise/shared/links"
+          = render "devise/shared/links"
 = render "shared/links"
diff --git a/app/views/devise/passwords/new.html.haml b/app/views/devise/passwords/new.html.haml
index ce106ef3..b3578cfe 100644
--- a/app/views/devise/passwords/new.html.haml
+++ b/app/views/devise/passwords/new.html.haml
@@ -1,11 +1,15 @@
 - provide(:title, generate_title("Forgot your Password?"))
 .container
-  %h1 Forgot your password?
-  = bootstrap_form_for(resource, as: resource_name, url: password_path(resource_name), html: { method: :post }) do |f|
-    = devise_error_messages!
+  .row
+    .col-sm-8.offset-sm-2
+      .card.mt-3
+        .card-body
+          %h1 Forgot your password?
+          = bootstrap_form_for(resource, as: resource_name, url: password_path(resource_name), html: { method: :post }) do |f|
+            = devise_error_messages!
 
-    = f.email_field :email, autofocus: true, label: "Email address"
-    = f.submit "Send me password reset instructions"
+            = f.email_field :email, autofocus: true, label: "Email address"
+            = f.submit "Send me password reset instructions", class: "btn btn-primary mb-3"
 
-  = render "devise/shared/links"
+          = render "devise/shared/links"
 = render "shared/links"
diff --git a/app/views/devise/registrations/new.html.haml b/app/views/devise/registrations/new.html.haml
index 67b09af8..7ed1f434 100644
--- a/app/views/devise/registrations/new.html.haml
+++ b/app/views/devise/registrations/new.html.haml
@@ -1,18 +1,21 @@
 - provide(:title, generate_title("Sign Up"))
 .container
-  %h1= t('views.sessions.new')
+  .row
+    .col-sm-8.offset-sm-2
+      .card.mt-3
+        .card-body
+          %h1= t('views.sessions.new')
+          = bootstrap_form_for(resource, as: resource_name, url: registration_path(resource_name)) do |f|
+            = devise_error_messages!
 
-  = bootstrap_form_for(resource, as: resource_name, url: registration_path(resource_name)) do |f|
-    = devise_error_messages!
+            = f.text_field :screen_name, autofocus: true, label: t('views.settings.account.username')
+            = f.email_field :email, autofocus: false, label: t('views.settings.account.email')
 
-    = f.text_field :screen_name, autofocus: true, label: t('views.settings.account.username')
-    = f.email_field :email, autofocus: false, label: t('views.settings.account.email')
+            = f.password_field :password, autocomplete: "off", label: t('views.settings.account.password')
+            = f.password_field :password_confirmation, autocomplete: "off", label: t('views.settings.account.password_confirm')
 
-    = f.password_field :password, autocomplete: "off", label: t('views.settings.account.password')
-    = f.password_field :password_confirmation, autocomplete: "off", label: t('views.settings.account.password_confirm')
+            %p= raw t('views.sessions.info', terms: link_to(t('views.general.terms'), terms_path))
+            = f.submit "Sign up", class: "btn btn-primary mb-3"
 
-    %p= raw t('views.sessions.info', terms: link_to(t('views.general.terms'), terms_path))
-    = f.submit "Sign up"
-
-  = render "devise/shared/links"
+          = render "devise/shared/links"
 = render 'shared/links'
diff --git a/app/views/devise/sessions/new.html.haml b/app/views/devise/sessions/new.html.haml
index 3ef2cdf2..c6d12ce8 100644
--- a/app/views/devise/sessions/new.html.haml
+++ b/app/views/devise/sessions/new.html.haml
@@ -1,17 +1,20 @@
 - provide(:title, generate_title("Sign In"))
 .container
-  %h1= t('views.sessions.create')
-  = render 'layouts/messages'
+  .row
+    .col-sm-4.offset-sm-4
+      = render 'layouts/messages'
+      .card.mt-3
+        .card-body
+          %h1.mb-3.mt-0= t('views.sessions.create')
+          = bootstrap_form_for(resource, as: resource_name, url: session_path(resource_name)) do |f|
 
-  = bootstrap_form_for(resource, as: resource_name, url: session_path(resource_name)) do |f|
+            = f.text_field :login, autofocus: true, label: t('views.settings.account.username')
+            = f.password_field :password, autocomplete: "off", label: t('views.settings.account.password')
 
-    = f.text_field :login, autofocus: true, label: t('views.settings.account.username')
-    = f.password_field :password, autocomplete: "off", label: t('views.settings.account.password')
+            - if devise_mapping.rememberable?
+              = f.check_box :remember_me
 
-    - if devise_mapping.rememberable?
-      = f.check_box :remember_me
+            = f.submit t('views.sessions.create'), class: "btn btn-primary mt-3 mb-3"
 
-    = f.submit t('views.sessions.create')
-
-  = render "devise/shared/links"
+          = render "devise/shared/links"
 = render "shared/links"

From 928eeb28f376939cbc0fc02d13a6f84318ff8636 Mon Sep 17 00:00:00 2001
From: Andreas Nedbal <andy@pixelde.su>
Date: Wed, 6 May 2020 22:19:30 +0200
Subject: [PATCH 134/172] Redirect user to edit_user_theme_path after deletion

---
 app/controllers/user_controller.rb | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/controllers/user_controller.rb b/app/controllers/user_controller.rb
index 507fb93a..9804a61e 100644
--- a/app/controllers/user_controller.rb
+++ b/app/controllers/user_controller.rb
@@ -107,7 +107,7 @@ class UserController < ApplicationController
 
   def delete_theme
     current_user.theme.destroy!
-    redirect_to edit_user_profile_path
+    redirect_to edit_user_theme_path
   end
 
   def update_theme

From e4561862e5153e04c752231763400dd7f12e7abe Mon Sep 17 00:00:00 2001
From: Andreas Nedbal <andy@pixelde.su>
Date: Wed, 6 May 2020 22:22:16 +0200
Subject: [PATCH 135/172] Adjust frontpage text to match master version

---
 app/views/static/front.html.haml | 2 --
 1 file changed, 2 deletions(-)

diff --git a/app/views/static/front.html.haml b/app/views/static/front.html.haml
index 27a1e6b9..c3dcb866 100644
--- a/app/views/static/front.html.haml
+++ b/app/views/static/front.html.haml
@@ -104,8 +104,6 @@
       %p
         Any questions? Ask us on
         %a{href: "https://twitter.com/retrospring"} Twitter
-        or visit one of the administrator profiles you can find on the
-        %a{href: about_path} About page!
   
   %h2 What are you waiting for?
   %p

From c261c85e220b9ab6d945d34fe5ceab27acdf90f5 Mon Sep 17 00:00:00 2001
From: Andreas Nedbal <andy@pixelde.su>
Date: Wed, 6 May 2020 22:24:56 +0200
Subject: [PATCH 136/172] Fix outline button styles

---
 app/assets/stylesheets/overrides/_buttons.scss | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/app/assets/stylesheets/overrides/_buttons.scss b/app/assets/stylesheets/overrides/_buttons.scss
index 2238d82f..f3d716bf 100644
--- a/app/assets/stylesheets/overrides/_buttons.scss
+++ b/app/assets/stylesheets/overrides/_buttons.scss
@@ -16,4 +16,8 @@
       ) var(--#{$color});
     }
   }
+
+  .btn-outline-#{$color} {
+    color: var(--#{$color});
+  }
 }
\ No newline at end of file

From 771e09133c05fc1d8cc663d71256363fc99e0a59 Mon Sep 17 00:00:00 2001
From: Andreas Nedbal <andy@pixelde.su>
Date: Wed, 6 May 2020 22:35:33 +0200
Subject: [PATCH 137/172] Add active styling for buttons

---
 app/assets/stylesheets/overrides/_buttons.scss | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/app/assets/stylesheets/overrides/_buttons.scss b/app/assets/stylesheets/overrides/_buttons.scss
index f3d716bf..33e5ef5b 100644
--- a/app/assets/stylesheets/overrides/_buttons.scss
+++ b/app/assets/stylesheets/overrides/_buttons.scss
@@ -15,6 +15,14 @@
         rgba(0, 0, 0, 0.10)
       ) var(--#{$color});
     }
+
+    &:active {
+      background: linear-gradient(
+        to top,
+        rgba(0, 0, 0, 0.25),
+        rgba(0, 0, 0, 0.25)
+      ) var(--#{$color});
+    }
   }
 
   .btn-outline-#{$color} {

From c75c86e16c588f74d69e5cb5aef42e1bac3c5296 Mon Sep 17 00:00:00 2001
From: Andreas Nedbal <andy@pixelde.su>
Date: Wed, 6 May 2020 22:48:07 +0200
Subject: [PATCH 138/172] Add focus and active override styles

---
 .../stylesheets/overrides/_buttons.scss       | 25 ++++++++++++++++++-
 1 file changed, 24 insertions(+), 1 deletion(-)

diff --git a/app/assets/stylesheets/overrides/_buttons.scss b/app/assets/stylesheets/overrides/_buttons.scss
index 33e5ef5b..8b2623ba 100644
--- a/app/assets/stylesheets/overrides/_buttons.scss
+++ b/app/assets/stylesheets/overrides/_buttons.scss
@@ -4,9 +4,11 @@
 
 @each $color in $color-names {
   .btn-#{$color} {
+
     color: RGB(var(--#{$color}-text));
     background-color: var(--#{$color});
     border-color: var(--#{$color});
+    border-width: 0;
 
     &:hover {
       background: linear-gradient(
@@ -16,12 +18,33 @@
       ) var(--#{$color});
     }
 
-    &:active {
+    &:not(:disabled):not(.disabled):active,
+    &:not(:disabled):not(.disabled).active {
+      border: none;
       background: linear-gradient(
         to top,
         rgba(0, 0, 0, 0.25),
         rgba(0, 0, 0, 0.25)
       ) var(--#{$color});
+
+      &:focus {
+        background: linear-gradient(
+          to top,
+          rgba(0, 0, 0, 0.30),
+          rgba(0, 0, 0, 0.30)
+        ) var(--#{$color});
+        box-shadow: none;
+      }
+    }
+
+    &:focus,
+    &:focus:hover {
+      background: linear-gradient(
+        to top,
+        rgba(0, 0, 0, 0.30),
+        rgba(0, 0, 0, 0.30)
+      ) var(--#{$color});
+      box-shadow: none;
     }
   }
 

From b443aff9642d98b0a28ba6dec7732032acaa0fdd Mon Sep 17 00:00:00 2001
From: Andreas Nedbal <andy@pixelde.su>
Date: Wed, 6 May 2020 22:54:36 +0200
Subject: [PATCH 139/172] Fix moderation comment layout

---
 app/views/moderation/_discussion.html.haml | 15 ++++++++-------
 1 file changed, 8 insertions(+), 7 deletions(-)

diff --git a/app/views/moderation/_discussion.html.haml b/app/views/moderation/_discussion.html.haml
index 715ccc18..4be392f0 100644
--- a/app/views/moderation/_discussion.html.haml
+++ b/app/views/moderation/_discussion.html.haml
@@ -1,14 +1,14 @@
 - if report.moderation_comments.all.count == 0
   = t 'views.answerbox.no_comment'
 - else
-  %ul.comments
+  %ul.comment__container
     - report.moderation_comments.order(:created_at).each do |comment|
-      %li{data: { comment_id: comment.id }}
-        .media.comments--media
+      %li.comment{data: { comment_id: comment.id }}
+        .media
           .pull-left
-            %img.avatar-sm{src: comment.user.profile_picture.url(:medium)}
-          .media-body.comments--body
-            %h6.media-heading.answerbox--question-user
+            %img.comment__user-avatar.avatar-sm{src: comment.user.profile_picture.url(:medium)}
+          .media-body
+            %h6.media-heading.comment__user
               = user_screen_name comment.user
               %span.text-muted{title: comment.created_at, data: { toggle: :tooltip, placement: :right }}
                 = "#{time_ago_in_words(comment.created_at)} ago"
@@ -21,7 +21,8 @@
                     %a.dropdown-item.text-danger{href: '#', tabindex: -1, data: { action: 'mod-comment-destroy', id: comment.id }}
                       %i.fa.fa-trash-o
                       = t 'views.actions.delete'
-            %p.comments--content= comment.content
+            .comment__content
+              = comment.content
 .form-group.has-feedback{name: 'mod-comment-new-group', data: { id: report.id }}
   %input.form-control.comments--box{type: :text, placeholder: t('views.placeholder.comment'), name: 'mod-comment-new', data: { id: report.id }}
   %span.text-muted.form-control-feedback.comments--count{id: "mod-comment-charcount-#{report.id}"} 160

From 12955cc6631a62041c8157997b973140fd6c467c Mon Sep 17 00:00:00 2001
From: Andreas Nedbal <andy@pixelde.su>
Date: Thu, 7 May 2020 02:12:44 +0200
Subject: [PATCH 140/172] Fix design of user and questionboxes

---
 app/views/discover/_userbox.html.haml | 6 +++---
 app/views/shared/_question.html.haml  | 6 +++---
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/app/views/discover/_userbox.html.haml b/app/views/discover/_userbox.html.haml
index 0f0fa626..c1d5cf9b 100644
--- a/app/views/discover/_userbox.html.haml
+++ b/app/views/discover/_userbox.html.haml
@@ -1,11 +1,11 @@
-.card.questionbox{data: { id: u.id }}
+.card{data: { id: u.id }}
   .card-body
     .media
       .pull-left
         %a{href: show_user_profile_path(u.screen_name)}
-          %img.answerbox--img{src: u.profile_picture.url(:medium)}
+          %img.avatar-md.mr-2{src: u.profile_picture.url(:medium)}
       .media-body
-        %h6.media-heading
+        %h6.media-heading.answerbox__question-user
           - if u.display_name.blank?
             %a{href: show_user_profile_path(u.screen_name)}
               %span= "@#{u.screen_name}"
diff --git a/app/views/shared/_question.html.haml b/app/views/shared/_question.html.haml
index e621ffcf..677c73ac 100644
--- a/app/views/shared/_question.html.haml
+++ b/app/views/shared/_question.html.haml
@@ -1,11 +1,11 @@
 - type ||= nil
-.card.questionbox{data: { id: q.id }}
+.card{data: { id: q.id }}
   .card-body
     .media
       - if type == "discover"
         .pull-left
           %a{href: user_screen_name(q.user, link_only: true)}
-            %img.answerbox--img{src: q.user&.profile_picture&.url(:medium)}
+            %img.avatar-md.mr-2{src: q.user&.profile_picture&.url(:medium)}
       .media-body
         - if user_signed_in?
           .pull-right
@@ -23,7 +23,7 @@
                     %a{href: '#', tabindex: -1, data: { action: 'ab-question-report', q_id: q.id }}
                       %i.fa.fa-exclamation-triangle
                       = t 'views.actions.report'
-        %h6.media-heading.text-muted.answerbox--question-user
+        %h6.media-heading.text-muted.answerbox__question-user
           = raw t('views.answerbox.asked', user: user_screen_name(q.user), time: time_tooltip(q))
           - if q.answer_count > 1
             ·

From 3a4b04b5da4a8cb80d542e9cf34bfc33107aefb7 Mon Sep 17 00:00:00 2001
From: Andreas Nedbal <andy@pixelde.su>
Date: Thu, 7 May 2020 02:13:07 +0200
Subject: [PATCH 141/172] Don't track theme style tags with turbolinks

---
 app/assets/javascripts/settings.coffee | 2 +-
 app/helpers/theme_helper.rb            | 2 +-
 spec/helpers/theme_helper_spec.rb      | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/app/assets/javascripts/settings.coffee b/app/assets/javascripts/settings.coffee
index 13ff10ed..bc6ac2e1 100644
--- a/app/assets/javascripts/settings.coffee
+++ b/app/assets/javascripts/settings.coffee
@@ -103,6 +103,7 @@ if window.URL? or window.webkitURL?
 # theming
 
 previewStyle = document.createElement 'style'
+previewStyle.setAttribute('data-turbolinks-track', 'false')
 document.head.appendChild previewStyle
 
 previewTimeout = null
@@ -171,7 +172,6 @@ generateTheme = (payload) ->
     console.log plKey
     if theme_attribute_map[plKey]
       if theme_attribute_map[plKey].includes 'text'
-        console.log "aaa"
         hex = getHexColorFromThemeValue(payload[plKey])
         body += "--#{theme_attribute_map[plKey]}: #{getDecimalTripletsFromHex(hex)};\n"
       else
diff --git a/app/helpers/theme_helper.rb b/app/helpers/theme_helper.rb
index 13f74a0a..16c26297 100644
--- a/app/helpers/theme_helper.rb
+++ b/app/helpers/theme_helper.rb
@@ -43,7 +43,7 @@ module ThemeHelper
 
     body += "}"
 
-    content_tag(:style, body)
+    content_tag(:style, body, data: { "turbolinks-track": false })
   end
 
   def get_active_theme
diff --git a/spec/helpers/theme_helper_spec.rb b/spec/helpers/theme_helper_spec.rb
index 1448c2fe..5db03987 100644
--- a/spec/helpers/theme_helper_spec.rb
+++ b/spec/helpers/theme_helper_spec.rb
@@ -18,7 +18,7 @@ describe ThemeHelper, :type => :helper do
       end
 
       it "returns a theme" do
-        expect(helper.render_theme).to include("<style>:root {")
+        expect(helper.render_theme).to include('<style data-turbolinks-track="false">:root {')
       end
 
       it "contains correct theme background colors" do

From 207769d164a7a17d2a951d5d40688d3e454496d1 Mon Sep 17 00:00:00 2001
From: Andreas Nedbal <andy@pixelde.su>
Date: Thu, 7 May 2020 02:30:50 +0200
Subject: [PATCH 142/172] Fix layout of profile header in profile settings

---
 app/views/settings/_profile.haml | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/app/views/settings/_profile.haml b/app/views/settings/_profile.haml
index b9a10692..1dcd3cda 100644
--- a/app/views/settings/_profile.haml
+++ b/app/views/settings/_profile.haml
@@ -21,10 +21,10 @@
             %button#cropper-zoom-in.btn.btn-inverse{type: :button}
               %i.fa.fa-search-plus
 
-      .media#profile-header-media
-        .pull-left
-          %img.mr-3{src: current_user.profile_header.url(:mobile)}
-        .media-body
+      .row.mb-2#profile-header-media
+        .col
+          %img.mw-100.mr-3{src: current_user.profile_header.url(:mobile)}
+        .col-xs-12.mt-3.mt-sm-0.pl-3.pr-3
           = f.file_field :profile_header, label: t('views.settings.profile.header')
 
       .row#profile-header-crop-controls{style: 'display: none;'}

From a3d302586da3d37c1b5d35e52a6911a9ca98a1d9 Mon Sep 17 00:00:00 2001
From: Andreas Nedbal <andy@pixelde.su>
Date: Thu, 7 May 2020 03:39:02 +0200
Subject: [PATCH 143/172] Remove border-radius from jumbotrons

---
 app/assets/stylesheets/components/_jumbotron.scss | 1 +
 1 file changed, 1 insertion(+)

diff --git a/app/assets/stylesheets/components/_jumbotron.scss b/app/assets/stylesheets/components/_jumbotron.scss
index 42d4d1ff..a0f388f1 100644
--- a/app/assets/stylesheets/components/_jumbotron.scss
+++ b/app/assets/stylesheets/components/_jumbotron.scss
@@ -4,6 +4,7 @@
   background-color: var(--primary);
   color: RGB(var(--primary-text));
   text-align: center;
+  border-radius: 0;
 
   h1,
   h2,

From 7c8809ce1402083db13da968161bc849963bd93b Mon Sep 17 00:00:00 2001
From: Andreas Nedbal <andy@pixelde.su>
Date: Thu, 7 May 2020 03:43:13 +0200
Subject: [PATCH 144/172] Remove iOS button style from dropdown toggle

---
 app/assets/stylesheets/overrides/_dropdown.scss | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/app/assets/stylesheets/overrides/_dropdown.scss b/app/assets/stylesheets/overrides/_dropdown.scss
index 5c0d58ce..6e38de4f 100644
--- a/app/assets/stylesheets/overrides/_dropdown.scss
+++ b/app/assets/stylesheets/overrides/_dropdown.scss
@@ -22,4 +22,8 @@
 
 .dropdown-divider {
   border-top: 1px solid var(--raised-accent);
+}
+
+.dropdown-toggle {
+  -webkit-appearance: none;
 }
\ No newline at end of file

From 787ec882c457ee24b85b28ebae1fc51a697e8e5b Mon Sep 17 00:00:00 2001
From: Andreas Nedbal <andy@pixelde.su>
Date: Thu, 7 May 2020 03:46:44 +0200
Subject: [PATCH 145/172] Fix answerbox text layout on mobile

---
 app/assets/stylesheets/components/_answerbox.scss | 2 +-
 app/views/application/_answerbox.haml             | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/app/assets/stylesheets/components/_answerbox.scss b/app/assets/stylesheets/components/_answerbox.scss
index 1c1209d6..d13f672f 100644
--- a/app/assets/stylesheets/components/_answerbox.scss
+++ b/app/assets/stylesheets/components/_answerbox.scss
@@ -30,7 +30,7 @@
   }
 
   &__action {
-    padding-left: map-get($spacers, 1);
+    padding-left: 0;
     padding-right: map-get($spacers, 1);
 
     & i {
diff --git a/app/views/application/_answerbox.haml b/app/views/application/_answerbox.haml
index 92cc1063..ed8a260d 100644
--- a/app/views/application/_answerbox.haml
+++ b/app/views/application/_answerbox.haml
@@ -15,7 +15,7 @@
         = markdown a.content
     - if @user.nil?
       .row
-        .col-4.col-sm-4.col-md-6.text-left.text-muted
+        .col.col-sm-4.col-md-6.text-left.text-muted
           .media
             .pull-left
               %a{href: show_user_profile_path(a.user.screen_name)}
@@ -25,7 +25,7 @@
                 = raw t('views.answerbox.answered', hide: hidespan(t('views.answerbox.hide'), "d-none d-sm-inline"), user: user_screen_name(a.user))
               .answerbox__answer-date
                 = link_to(raw(t('views.answerbox.time', time: time_tooltip(a))), show_user_answer_path(a.user.screen_name, a.id))
-        .col-8.col-sm-8.col-md-6.text-right
+        .col.col-sm-8.col-md-6.text-right
           = render 'answerbox/actions', a: a
     - else
       .row

From 0c0b8eaf16d6d09c5cb585e89bdf7657d83adbbc Mon Sep 17 00:00:00 2001
From: Andreas Nedbal <andy@pixelde.su>
Date: Thu, 7 May 2020 03:56:11 +0200
Subject: [PATCH 146/172] Remove log statement from theme code

---
 app/assets/javascripts/settings.coffee | 1 -
 1 file changed, 1 deletion(-)

diff --git a/app/assets/javascripts/settings.coffee b/app/assets/javascripts/settings.coffee
index bc6ac2e1..bdc5c6b0 100644
--- a/app/assets/javascripts/settings.coffee
+++ b/app/assets/javascripts/settings.coffee
@@ -169,7 +169,6 @@ generateTheme = (payload) ->
   body = ":root {\n"
 
   (Object.keys(payload)).forEach (plKey) ->
-    console.log plKey
     if theme_attribute_map[plKey]
       if theme_attribute_map[plKey].includes 'text'
         hex = getHexColorFromThemeValue(payload[plKey])

From d607a8790b76c26aa35a6df4018d5c917a2d8861 Mon Sep 17 00:00:00 2001
From: Andreas Nedbal <andy@pixelde.su>
Date: Thu, 7 May 2020 15:01:35 +0200
Subject: [PATCH 147/172] Fix styling of new inbox entries

---
 app/assets/stylesheets/application.scss            |  1 +
 .../stylesheets/components/_inbox-entry.scss       | 14 ++++++++++++++
 app/views/inbox/_entry.html.haml                   |  4 ++--
 3 files changed, 17 insertions(+), 2 deletions(-)
 create mode 100644 app/assets/stylesheets/components/_inbox-entry.scss

diff --git a/app/assets/stylesheets/application.scss b/app/assets/stylesheets/application.scss
index 4df19f85..f53ee7ed 100644
--- a/app/assets/stylesheets/application.scss
+++ b/app/assets/stylesheets/application.scss
@@ -82,6 +82,7 @@
 "components/comments",
 "components/container",
 "components/entry",
+"components/inbox-entry",
 "components/jumbotron",
 "components/locales",
 "components/notifications",
diff --git a/app/assets/stylesheets/components/_inbox-entry.scss b/app/assets/stylesheets/components/_inbox-entry.scss
new file mode 100644
index 00000000..3f549443
--- /dev/null
+++ b/app/assets/stylesheets/components/_inbox-entry.scss
@@ -0,0 +1,14 @@
+.inbox-entry {
+  &--new {
+    box-shadow: 0 0.125rem 0.25rem var(--primary);
+
+    .card-header {
+      background-color: var(--primary);
+      color: RGB(var(--primary-text));
+
+      .text-muted {
+        color: RGBA(var(--primary-text), 0.8) !important;
+      }
+    }
+  }
+}
\ No newline at end of file
diff --git a/app/views/inbox/_entry.html.haml b/app/views/inbox/_entry.html.haml
index a93b6338..06320b01 100644
--- a/app/views/inbox/_entry.html.haml
+++ b/app/views/inbox/_entry.html.haml
@@ -1,11 +1,11 @@
-.card.inbox-box{class: "bg-#{i.new? ? 'primary' : 'default'}", data: { id: i.id }}
+.card.inbox-box{class: i.new? ? 'inbox-entry--new' : '', data: { id: i.id }}
   .card-header
     .media
       - unless i.question.author_is_anonymous
         %a.pull-left{href: show_user_profile_path(i.question.user.screen_name)}
           %img.avatar-sm{src: i.question.user.profile_picture.url(:medium)}
       .media-body
-        %h6.text-muted.media-heading.answerbox--question-user
+        %h6.text-muted.media-heading.answerbox__question-user
           = raw t('views.inbox.entry.asked', user: user_screen_name(i.question.user, anonymous: i.question.author_is_anonymous), time: time_tooltip(i.question))
           - unless i.question.author_is_anonymous
             - if i.question.answer_count > 0

From 633f69c1636935703b3a8b4ea81e000af39a796e Mon Sep 17 00:00:00 2001
From: Andreas Nedbal <andy@pixelde.su>
Date: Thu, 7 May 2020 15:09:55 +0200
Subject: [PATCH 148/172] Fix about page icon styles

---
 app/assets/stylesheets/application.scss       | 1 +
 app/assets/stylesheets/components/_icons.scss | 4 ++++
 app/views/static/about.haml                   | 6 +++---
 3 files changed, 8 insertions(+), 3 deletions(-)
 create mode 100644 app/assets/stylesheets/components/_icons.scss

diff --git a/app/assets/stylesheets/application.scss b/app/assets/stylesheets/application.scss
index f53ee7ed..7ff8124a 100644
--- a/app/assets/stylesheets/application.scss
+++ b/app/assets/stylesheets/application.scss
@@ -82,6 +82,7 @@
 "components/comments",
 "components/container",
 "components/entry",
+"components/icons",
 "components/inbox-entry",
 "components/jumbotron",
 "components/locales",
diff --git a/app/assets/stylesheets/components/_icons.scss b/app/assets/stylesheets/components/_icons.scss
new file mode 100644
index 00000000..ef1db1ef
--- /dev/null
+++ b/app/assets/stylesheets/components/_icons.scss
@@ -0,0 +1,4 @@
+.icon--showcase {
+  text-align: center;
+  font-size: 5rem;
+}
\ No newline at end of file
diff --git a/app/views/static/about.haml b/app/views/static/about.haml
index 2471b269..dddc544c 100644
--- a/app/views/static/about.haml
+++ b/app/views/static/about.haml
@@ -13,13 +13,13 @@
           %p= t('views.about.links.desc', app_title: APP_CONFIG['site_name'])
         .col-md-4.col-sm-6
           %a{href: "https://twitter.com/retrospring"}
-            .icon-showcase
+            .icon--showcase
               %i.fa.fa-twitter
           %h4.heading-about.text-center
             Twitter
         .col-md-4.col-sm-6
           %a{href: help_faq_path}
-            .icon-showcase
+            .icon--showcase
               %i.fa.fa-question
           %h4.heading-about.text-center
             FAQ
@@ -32,7 +32,7 @@
           %p= raw t('views.about.opensource.desc', app_title: APP_CONFIG['site_name'], github: link_to(t('views.about.opensource.github'), "https://github.com/Retrospring/retrospring"), bugtracker: link_to(t('views.about.opensource.bugtracker'), "https://github.com/Retrospring/retrospring/issues"))
         .col-md-4
           %a{href: "https://github.com/Retrospring/retrospring"}
-            .icon-showcase
+            .icon--showcase
               %i.fa.fa-github
           %h4.heading-about.text-center= t 'views.about.repository.title'
           %p.text-center

From 1cc49cf03cdf149fa2ee510bdcc3d82208cdadd0 Mon Sep 17 00:00:00 2001
From: Andreas Nedbal <andy@pixelde.su>
Date: Thu, 7 May 2020 19:28:26 +0200
Subject: [PATCH 149/172] Adjust warning-text default theme value

---
 app/assets/stylesheets/_variables.scss           | 2 +-
 app/views/settings/_theme.haml                   | 2 +-
 db/migrate/20200504214933_update_theme_fields.rb | 1 +
 db/schema.rb                                     | 2 +-
 4 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/app/assets/stylesheets/_variables.scss b/app/assets/stylesheets/_variables.scss
index 86000599..b9db8934 100644
--- a/app/assets/stylesheets/_variables.scss
+++ b/app/assets/stylesheets/_variables.scss
@@ -81,7 +81,7 @@ $avatar-sizes: (
 
   --primary-text: 255, 255, 255;
   --danger-text: 255, 255, 255;
-  --warning-text: 255, 255, 255;
+  --warning-text: 41, 41, 41;
   --info-text: 255, 255, 255;
   --success-text: 255, 255, 255;
   --dark-text: 255, 255, 255;
diff --git a/app/views/settings/_theme.haml b/app/views/settings/_theme.haml
index 9c4b7160..a394c3ee 100644
--- a/app/views/settings/_theme.haml
+++ b/app/views/settings/_theme.haml
@@ -90,7 +90,7 @@
         .col-sm-6
           = f.text_field :warning_color, class: 'color', data: {default: 0xFFC107}
         .col-sm-6
-          = f.text_field :warning_text, class: 'color', data: {default: 0xFFFFFF}
+          = f.text_field :warning_text, class: 'color', data: {default: 0x292929}
         .col-sm-12
           .alert.alert-warning
             A simple warning alert—check it out!
diff --git a/db/migrate/20200504214933_update_theme_fields.rb b/db/migrate/20200504214933_update_theme_fields.rb
index 015f5969..ec577f1d 100644
--- a/db/migrate/20200504214933_update_theme_fields.rb
+++ b/db/migrate/20200504214933_update_theme_fields.rb
@@ -34,6 +34,7 @@ class UpdateThemeFields < ActiveRecord::Migration[5.2]
     change_column_default :themes, :background_color, 0xF0EDF4
     change_column_default :themes, :danger_color, 0xDC3545
     change_column_default :themes, :warning_color, 0xFFC107
+    change_column_default :themes, :warning_text, 0x292929
     change_column_default :themes, :info_color, 0x17A2B8
     change_column_default :themes, :success_color, 0x28A745
     change_column_default :themes, :input_color, 0xF0EDF4
diff --git a/db/schema.rb b/db/schema.rb
index b0275eb9..0c1e34b5 100644
--- a/db/schema.rb
+++ b/db/schema.rb
@@ -197,7 +197,7 @@ ActiveRecord::Schema.define(version: 2020_05_04_214933) do
     t.integer "success_color", default: 2664261
     t.integer "success_text", default: 16777215
     t.integer "warning_color", default: 16761095
-    t.integer "warning_text", default: 16777215
+    t.integer "warning_text", default: 2697513
     t.integer "info_color", default: 1548984
     t.integer "info_text", default: 16777215
     t.integer "dark_color", default: 3422784

From 501a2cce42b2d21bd3ea70755a34e64392db9f8a Mon Sep 17 00:00:00 2001
From: Andreas Nedbal <andy@pixelde.su>
Date: Thu, 7 May 2020 19:29:12 +0200
Subject: [PATCH 150/172] Replace bootstrap3-datetimepicker with a BS4
 equivalent

---
 Gemfile                                         |  3 ++-
 Gemfile.lock                                    | 11 ++++++++---
 app/assets/javascripts/moderation.js.erb.coffee |  4 +++-
 app/assets/stylesheets/application.scss         |  3 ++-
 4 files changed, 15 insertions(+), 6 deletions(-)

diff --git a/Gemfile b/Gemfile
index 2a61b709..470ffa08 100644
--- a/Gemfile
+++ b/Gemfile
@@ -34,7 +34,8 @@ gem 'fog-core'
 gem 'fog-aws'
 gem 'fog-local'
 gem 'momentjs-rails', '>= 2.9.0'
-gem 'bootstrap3-datetimepicker-rails', '~> 4.7.14'
+gem 'moment-timezone-rails', '~> 1.0'
+gem 'bootstrap4-datetime-picker-rails'
 gem 'tiny-color-rails'
 gem 'jquery-minicolors-rails'
 gem 'colorize'
diff --git a/Gemfile.lock b/Gemfile.lock
index 781aa040..fb1728a5 100644
--- a/Gemfile.lock
+++ b/Gemfile.lock
@@ -80,8 +80,10 @@ GEM
       autoprefixer-rails (>= 9.1.0)
       popper_js (>= 1.14.3, < 2)
       sassc-rails (>= 2.0.0)
-    bootstrap3-datetimepicker-rails (4.7.14)
-      momentjs-rails (>= 2.8.1)
+    bootstrap4-datetime-picker-rails (0.3.1)
+      jquery-rails (~> 4.2, >= 4.2.0)
+      moment-timezone-rails (~> 1.0)
+      momentjs-rails (>= 2.10.5, <= 3.0.0)
     bootstrap_form (4.4.0)
       actionpack (>= 5.0)
       activemodel (>= 5.0)
@@ -268,6 +270,8 @@ GEM
     mini_mime (1.0.2)
     mini_portile2 (2.4.0)
     minitest (5.14.0)
+    moment-timezone-rails (1.0.0)
+      momentjs-rails (>= 2.10.5, <= 3.0.0)
     momentjs-rails (2.20.1)
       railties (>= 3.1)
     multi_json (1.14.1)
@@ -512,7 +516,7 @@ DEPENDENCIES
   bcrypt (~> 3.1.7)
   better_errors
   bootstrap (~> 4.4, >= 4.4.1)
-  bootstrap3-datetimepicker-rails (~> 4.7.14)
+  bootstrap4-datetime-picker-rails
   bootstrap_form
   brakeman
   byebug
@@ -542,6 +546,7 @@ DEPENDENCIES
   jquery-rails
   jquery-turbolinks
   letter_opener
+  moment-timezone-rails (~> 1.0)
   momentjs-rails (>= 2.9.0)
   newrelic_rpm
   nprogress-rails
diff --git a/app/assets/javascripts/moderation.js.erb.coffee b/app/assets/javascripts/moderation.js.erb.coffee
index 60eefeaf..0eb4ec03 100644
--- a/app/assets/javascripts/moderation.js.erb.coffee
+++ b/app/assets/javascripts/moderation.js.erb.coffee
@@ -1,3 +1,5 @@
 #= require moment
-#= require bootstrap-datetimepicker
+#= require tempusdominus-bootstrap-4
 #= require_tree ./moderation
+
+$('.datetimepicker-input').datetimepicker();
\ No newline at end of file
diff --git a/app/assets/stylesheets/application.scss b/app/assets/stylesheets/application.scss
index 7ff8124a..768706ef 100644
--- a/app/assets/stylesheets/application.scss
+++ b/app/assets/stylesheets/application.scss
@@ -26,7 +26,7 @@
 
 @import
 "bootstrap",
-"bootstrap-datetimepicker",
+"tempusdominus-bootstrap-4",
 "font-awesome",
 "nprogress",
 "nprogress-bootstrap";
@@ -76,6 +76,7 @@
  */
 
 @import
+"components/announcements",
 "components/answerbox",
 "components/avatars",
 "components/buttons",

From 5d63d0ba27502ba972c4cf391119099be45fb7cf Mon Sep 17 00:00:00 2001
From: Andreas Nedbal <andy@pixelde.su>
Date: Thu, 7 May 2020 19:30:13 +0200
Subject: [PATCH 151/172] Update announcement styling and adjust announcement
 views

---
 .../components/_announcements.scss            | 16 ++++++
 app/views/announcement/edit.html.haml         | 56 ++++++++++---------
 app/views/announcement/new.html.haml          | 56 ++++++++++---------
 app/views/shared/_announcements.haml          | 16 +++---
 4 files changed, 83 insertions(+), 61 deletions(-)
 create mode 100644 app/assets/stylesheets/components/_announcements.scss

diff --git a/app/assets/stylesheets/components/_announcements.scss b/app/assets/stylesheets/components/_announcements.scss
new file mode 100644
index 00000000..f69e2c5b
--- /dev/null
+++ b/app/assets/stylesheets/components/_announcements.scss
@@ -0,0 +1,16 @@
+.announcement {
+  width: 100%;
+  border-radius: 0;
+  text-align: center;
+
+  p {
+    margin-bottom: 0;
+  }
+
+  &__container {
+    position: fixed;
+    top: $navbar-height;
+    width: 100%;
+    z-index: 1024;
+  }
+}
\ No newline at end of file
diff --git a/app/views/announcement/edit.html.haml b/app/views/announcement/edit.html.haml
index bef290f1..45f54008 100644
--- a/app/views/announcement/edit.html.haml
+++ b/app/views/announcement/edit.html.haml
@@ -1,29 +1,31 @@
 - provide(:title, generate_title("Edit announcement"))
 .container.container--main
-  = bootstrap_form_for(@announcement, url: {action: "update"}, method: "PATCH") do |f|
-    - if @announcement.errors.any?
-      .row
-        .col-md-12
-          .alert.alert-danger
-            %strong
-              = pluralize(@announcement.errors.count, "error")
-              prohibited this announcement from being saved:
-            %ul
-              - @announcement.errors.full_messages.each do |err|
-                %li= err
-    .row
-      .col-md-12
-        = f.text_area :content, label: "Content"
-    .row
-      .col-md-6
-        = f.url_field :link_href, label: "Link URL"
-      .col-md-6
-        = f.datetime_field :link_text, label: "Link text"
-    .row
-      .col-md-6
-        = f.datetime_field :starts_at, label: "Start time"
-      .col-md-6
-        = f.datetime_field :ends_at, label: "End time"
-    .row
-      .col-md-12.text-right
-        = f.submit class: "btn btn-primary"
+  .card
+    .card-body
+      = bootstrap_form_for(@announcement, url: {action: "update"}, method: "PATCH") do |f|
+        - if @announcement.errors.any?
+          .row
+            .col-md-12
+              .alert.alert-danger
+                %strong
+                  = pluralize(@announcement.errors.count, "error")
+                  prohibited this announcement from being saved:
+                %ul
+                  - @announcement.errors.full_messages.each do |err|
+                    %li= err
+        .row
+          .col-md-12
+            = f.text_area :content, label: "Content"
+        .row
+          .col-md-6
+            = f.url_field :link_href, label: "Link URL"
+          .col-md-6
+            = f.text_field :link_text, label: "Link text"
+        .row
+          .col-md-6
+            = f.datetime_field :starts_at, label: "Start time", class: "datetimepicker-input", data: { toggle: "datetimepicker", target: "#announcement_starts_at", "date-format": "YYYY-MM-DD hh:mm A" }
+          .col-md-6
+            = f.datetime_field :ends_at, label: "End time", class: "datetimepicker-input", data: { toggle: "datetimepicker", target: "#announcement_ends_at", "date-format": "YYYY-MM-DD hh:mm A" }
+        .row
+          .col-md-12.text-right
+            = f.submit class: "btn btn-primary"
diff --git a/app/views/announcement/new.html.haml b/app/views/announcement/new.html.haml
index 3afa8595..69e61d2c 100644
--- a/app/views/announcement/new.html.haml
+++ b/app/views/announcement/new.html.haml
@@ -1,29 +1,31 @@
 - provide(:title, generate_title("Add new announcement"))
 .container.container--main
-  = bootstrap_form_for(@announcement, url: {action: "create"}) do |f|
-    - if @announcement.errors.any?
-      .row
-        .col-md-12
-          .alert.alert-danger
-            %strong
-              = pluralize(@announcement.errors.count, "error")
-              prohibited this announcement from being saved:
-            %ul
-              - @announcement.errors.full_messages.each do |err|
-                %li= err
-    .row
-      .col-md-12
-        = f.text_area :content, label: "Content"
-    .row
-      .col-md-6
-        = f.url_field :link_href, label: "Link URL"
-      .col-md-6
-        = f.datetime_field :link_text, label: "Link text"
-    .row
-      .col-md-6
-        = f.datetime_field :starts_at, label: "Start time"
-      .col-md-6
-        = f.datetime_field :ends_at, label: "End time"
-    .row
-      .col-md-12.text-right
-        = f.submit class: "btn btn-primary"
+  .card
+    .card-body
+      = bootstrap_form_for(@announcement, url: {action: "create"}) do |f|
+        - if @announcement.errors.any?
+          .row
+            .col-md-12
+              .alert.alert-danger
+                %strong
+                  = pluralize(@announcement.errors.count, "error")
+                  prohibited this announcement from being saved:
+                %ul
+                  - @announcement.errors.full_messages.each do |err|
+                    %li= err
+        .row
+          .col-md-12
+            = f.text_area :content, label: "Content"
+        .row
+          .col-md-6
+            = f.url_field :link_href, label: "Link URL"
+          .col-md-6
+            = f.text_field :link_text, label: "Link text"
+        .row
+          .col-md-6
+            = f.datetime_field :starts_at, label: "Start time", class: "datetimepicker-input", data: { toggle: "datetimepicker", target: "#announcement_starts_at", "date-format": "YYYY-MM-DD hh:mm A" }
+          .col-md-6
+            = f.datetime_field :ends_at, label: "End time", class: "datetimepicker-input", data: { toggle: "datetimepicker", target: "#announcement_ends_at", "date-format": "YYYY-MM-DD hh:mm A" }
+        .row
+          .col-md-12.text-right
+            = f.submit class: "btn btn-primary"
diff --git a/app/views/shared/_announcements.haml b/app/views/shared/_announcements.haml
index 99fa74d6..68036ff8 100644
--- a/app/views/shared/_announcements.haml
+++ b/app/views/shared/_announcements.haml
@@ -1,8 +1,10 @@
-.container.announcements
+.announcement__container
   - @active_announcements.each do |announcement|
-    .alert.alert-announcement.alert-info.alert-dismissable.hidden{ data: { 'announcement-id': announcement.id } }
-      %button.close{ type: "button", "data-dismiss" => "alert" }
-        %span{ "aria-hidden" => "true" } &times;
-      %p= announcement.content
-      - if announcement.link_present?
-        %a.alert-link{ href: announcement.link_href }= announcement.link_text
+    .alert.announcement.alert-info.alert-dismissable.hidden{ data: { 'announcement-id': announcement.id } }
+      .container
+        %button.close{ type: "button", "data-dismiss" => "alert" }
+          %span{ "aria-hidden" => "true" } &times;
+        %p
+          = announcement.content
+          - if announcement.link_present?
+            %a.alert-link{ href: announcement.link_href }= announcement.link_text

From a9344f63a6aab67047bc0c154434666cbeec1d9a Mon Sep 17 00:00:00 2001
From: Andreas Nedbal <andy@pixelde.su>
Date: Thu, 7 May 2020 19:30:32 +0200
Subject: [PATCH 152/172] Override Bootstrap alert-link styling for CSS
 variables

---
 app/assets/stylesheets/overrides/_alerts.scss | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/app/assets/stylesheets/overrides/_alerts.scss b/app/assets/stylesheets/overrides/_alerts.scss
index 79be6fee..8e9c2073 100644
--- a/app/assets/stylesheets/overrides/_alerts.scss
+++ b/app/assets/stylesheets/overrides/_alerts.scss
@@ -3,5 +3,9 @@
     color: RGB(var(--#{$color}-text));
     background-color: var(--#{$color});
     border-color: var(--#{$color});
+
+    .alert-link {
+      color: RGB(var(--#{$color}-text));
+    }
   }
 }
\ No newline at end of file

From 6e51294ecaf35f6d541f680324dc13ae5ca7454e Mon Sep 17 00:00:00 2001
From: Andreas Nedbal <andy@pixelde.su>
Date: Thu, 7 May 2020 19:49:39 +0200
Subject: [PATCH 153/172] Adjust announcement index page design

---
 app/views/announcement/index.html.haml | 22 ++++++++++++----------
 1 file changed, 12 insertions(+), 10 deletions(-)

diff --git a/app/views/announcement/index.html.haml b/app/views/announcement/index.html.haml
index ad89c83f..bb8c3616 100644
--- a/app/views/announcement/index.html.haml
+++ b/app/views/announcement/index.html.haml
@@ -1,14 +1,16 @@
 - provide(:title, generate_title("Announcements"))
 .container.container--main
+  - @announcements.each do |announcement|
+    .card
+      .card-body
+        .d-flex.w-100.justify-content-between
+          %p.mb-3= announcement.content
+          %small.text-muted= announcement.starts_at
+        
+        .d-flex.w-100
+          = link_to "Edit", announcement_edit_path(id: announcement.id), class: 'btn btn-link text-primary'
+          = button_to "Delete", announcement_destroy_path(id: announcement.id), method: :delete, class: 'btn btn-link text-danger', confirm: 'Are you sure you want to delete this announcement?'
+
   .row
     .col-md-12
-      = link_to "Add new", :announcement_new, class: "btn btn-default"
-  - @announcements.each do |announcement|
-    .panel.panel-default
-      .panel-heading
-        = announcement.starts_at
-      .panel-body
-        = announcement.content
-      .panel-footer
-        = button_to "Edit", announcement_edit_path(id: announcement.id), method: :get, class: 'btn btn-link'
-        = button_to "Delete", announcement_destroy_path(id: announcement.id), method: :delete, class: 'btn btn-link', confirm: 'Are you sure you want to delete this announcement?'
\ No newline at end of file
+      = link_to "Add new", :announcement_new, class: "btn btn-primary"
\ No newline at end of file

From f11431279d2de4b7906d4e9fb274fefdbfc4b0c6 Mon Sep 17 00:00:00 2001
From: Andreas Nedbal <andy@pixelde.su>
Date: Thu, 7 May 2020 19:53:40 +0200
Subject: [PATCH 154/172] Fix header image not being centered

---
 app/assets/stylesheets/components/_profile.scss | 1 -
 1 file changed, 1 deletion(-)

diff --git a/app/assets/stylesheets/components/_profile.scss b/app/assets/stylesheets/components/_profile.scss
index 5674db9a..726bef72 100644
--- a/app/assets/stylesheets/components/_profile.scss
+++ b/app/assets/stylesheets/components/_profile.scss
@@ -24,7 +24,6 @@
 
   &__header-image {
     display: block;
-    min-width: 900px;
     width: 100%;
   }
 

From 57505b08120aa49e62112a7c4c1004112030bda9 Mon Sep 17 00:00:00 2001
From: Andreas Nedbal <andy@pixelde.su>
Date: Thu, 7 May 2020 20:19:00 +0200
Subject: [PATCH 155/172] Add hex color spec for pure blue

---
 spec/helpers/theme_helper_spec.rb | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/spec/helpers/theme_helper_spec.rb b/spec/helpers/theme_helper_spec.rb
index 5db03987..84467a90 100644
--- a/spec/helpers/theme_helper_spec.rb
+++ b/spec/helpers/theme_helper_spec.rb
@@ -39,6 +39,10 @@ describe ThemeHelper, :type => :helper do
     it "returns the proper hex value from the decimal value for purple" do
       expect(helper.get_hex_color_from_theme_value(6174129)).to eq("5e35b1")
     end
+
+    it "returns the proper hex value from the decimal value for blue" do
+      expect(helper.get_hex_color_from_theme_value(255)).to eq("0000ff")
+    end
   end
 
   describe "#get_decimal_triplet_from_hex" do

From 8a8c2667def196996dfb26d0b42f469ff2172d28 Mon Sep 17 00:00:00 2001
From: Andreas Nedbal <andy@pixelde.su>
Date: Thu, 7 May 2020 20:28:20 +0200
Subject: [PATCH 156/172] Adjust theme settings page layout

- Moved color section to come right after General
- Adjusted buttons for light/dark preview to not trigger form submit
---
 app/views/settings/_theme.haml | 48 +++++++++++++++++-----------------
 1 file changed, 24 insertions(+), 24 deletions(-)

diff --git a/app/views/settings/_theme.haml b/app/views/settings/_theme.haml
index a394c3ee..53f4ba6f 100644
--- a/app/views/settings/_theme.haml
+++ b/app/views/settings/_theme.haml
@@ -25,28 +25,6 @@
           = f.text_field :background_color, class: 'color', data: {default: 0xF0EDF4}
         .col-sm-6
           = f.text_field :body_text, class: 'color', data: {default: 0x000000}
-  .card
-    .card-body
-      %h2 Forms and Inputs
-      %p
-        Styles for form inputs, like textfields.
-      .row
-        .col-sm-6
-          = f.text_field :input_color, class: 'color', data: {default: 0xFFFFFF}
-        .col-sm-6
-          = f.text_field :input_text, class: 'color', data: {default: 0x000000}
-  .card
-    .card-body
-      %h2 Raised Content
-      %p
-        Raised content basically describes all the different boxes and panels you can see across the site.
-      .row
-        .col-sm-6
-          = f.text_field :raised_background, class: 'color', data: {default: 0xFFFFFF}
-        .col-sm-6
-          = f.text_field :raised_accent, class: 'color', data: {default: 0xF7F7F7}
-    .card-footer
-      %p Some text on top of a accented area on a raised element!
   .card
     .card-body
       %h2 Colors
@@ -116,19 +94,41 @@
         .col-sm-6
           = f.text_field :dark_text, class: 'color', data: {default: 0xFFFFFF}
         .col-sm-12
-          %button.btn.btn-dark.mb-3 A dark button
+          %a.btn.btn-dark.mb-3{ href: '#' } A dark button
       .row
         .col-sm-6
           = f.text_field :light_color, class: 'color', data: {default: 0xF8F9FA}
         .col-sm-6
           = f.text_field :light_text, class: 'color', data: {default: 0xFFFFFF}
         .col-sm-12
-          %button.btn.btn-light.mb-3 A light button
+          %a.btn.btn-light.mb-3{ href: '#' } A light button
       .row
         .col-sm-6
           = f.text_field :muted_text, class: 'color', data: {default: 0x6C757D}
         .col-sm-6
           %p.pt-4.text-muted Some muted text
+  .card
+    .card-body
+      %h2 Forms and Inputs
+      %p
+        Styles for form inputs, like textfields.
+      .row
+        .col-sm-6
+          = f.text_field :input_color, class: 'color', data: {default: 0xFFFFFF}
+        .col-sm-6
+          = f.text_field :input_text, class: 'color', data: {default: 0x000000}
+  .card
+    .card-body
+      %h2 Raised Content
+      %p
+        Raised content basically describes all the different boxes and panels you can see across the site.
+      .row
+        .col-sm-6
+          = f.text_field :raised_background, class: 'color', data: {default: 0xFFFFFF}
+        .col-sm-6
+          = f.text_field :raised_accent, class: 'color', data: {default: 0xF7F7F7}
+    .card-footer
+      %p Some text on top of a accented area on a raised element!
   .card
     .card-body
       .pull-left

From c76f839ea724da595522ad5033ace69c1a58acdc Mon Sep 17 00:00:00 2001
From: Andreas Nedbal <andy@pixelde.su>
Date: Thu, 7 May 2020 20:36:14 +0200
Subject: [PATCH 157/172] Fixed announcement JavaScript functionality

---
 app/assets/javascripts/application.js.erb.coffee | 8 ++++----
 app/views/shared/_announcements.haml             | 2 +-
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/app/assets/javascripts/application.js.erb.coffee b/app/assets/javascripts/application.js.erb.coffee
index fd54a6d7..ae5efb02 100644
--- a/app/assets/javascripts/application.js.erb.coffee
+++ b/app/assets/javascripts/application.js.erb.coffee
@@ -73,13 +73,13 @@ _ready = ->
       lineColor: bodyColor
       density: 23000
 
-  $(".alert-announcement").each ->
+  $(".announcement").each ->
     aId = $(this)[0].dataset.announcementId
     unless (window.localStorage.getItem("announcement#{aId}"))
-      $(this).toggleClass("hidden")
+      $(this).toggleClass("d-none")
 
-  $(document).on "click", ".alert-announcement button.close", (evt) ->
-    announcement = event.target.closest(".alert-announcement")
+  $(document).on "click", ".announcement button.close", (evt) ->
+    announcement = event.target.closest(".announcement")
     aId = announcement.dataset.announcementId
     window.localStorage.setItem("announcement#{aId}", true)
 
diff --git a/app/views/shared/_announcements.haml b/app/views/shared/_announcements.haml
index 68036ff8..3f4bab7b 100644
--- a/app/views/shared/_announcements.haml
+++ b/app/views/shared/_announcements.haml
@@ -1,6 +1,6 @@
 .announcement__container
   - @active_announcements.each do |announcement|
-    .alert.announcement.alert-info.alert-dismissable.hidden{ data: { 'announcement-id': announcement.id } }
+    .alert.announcement.alert-info.alert-dismissable.d-none{ data: { 'announcement-id': announcement.id } }
       .container
         %button.close{ type: "button", "data-dismiss" => "alert" }
           %span{ "aria-hidden" => "true" } &times;

From c724cecf57ccd8957a9d79202a61adaf3948dfa0 Mon Sep 17 00:00:00 2001
From: Georg Gadinger <nilsding@nilsding.org>
Date: Fri, 8 May 2020 15:54:43 +0200
Subject: [PATCH 158/172] refresh repositories before installing dependencies

---
 .github/workflows/retrospring.yml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.github/workflows/retrospring.yml b/.github/workflows/retrospring.yml
index b1ee1108..f6f1e23f 100644
--- a/.github/workflows/retrospring.yml
+++ b/.github/workflows/retrospring.yml
@@ -47,7 +47,7 @@ jobs:
         with:
           ruby-version: 2.7.x
       - name: Install dependencies
-        run: sudo apt-get install -y libpq-dev libxml2-dev libxslt1-dev libmagickwand-dev imagemagick
+        run: sudo apt update && sudo apt-get install -y libpq-dev libxml2-dev libxslt1-dev libmagickwand-dev imagemagick
       - name: Copy default configuration
         run: |
           cp config/database.yml.postgres config/database.yml

From 5966be5bd64a781f72f551da8b9993c12eee5aee Mon Sep 17 00:00:00 2001
From: Andreas Nedbal <andy@pixelde.su>
Date: Fri, 8 May 2020 23:28:56 +0200
Subject: [PATCH 159/172] Make rails_admin use the default
 ApplicationController

---
 config/initializers/rails_admin.rb | 1 +
 1 file changed, 1 insertion(+)

diff --git a/config/initializers/rails_admin.rb b/config/initializers/rails_admin.rb
index 1a6125be..f63405d2 100644
--- a/config/initializers/rails_admin.rb
+++ b/config/initializers/rails_admin.rb
@@ -3,6 +3,7 @@
 # workaround to get pagination right
 RailsAdmin.config do |config|
   config.main_app_name = ['justask', 'Kontrollzentrum']
+  config.parent_controller = '::ApplicationController'
 
   ## == Authentication ==
   config.authenticate_with do

From eec9637aefe86abed8affc40544efcbe23b00805 Mon Sep 17 00:00:00 2001
From: Andreas Nedbal <andy@pixelde.su>
Date: Sat, 9 May 2020 00:13:53 +0200
Subject: [PATCH 160/172] Add spacing to inbox user avatars

---
 app/views/inbox/_entry.html.haml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/views/inbox/_entry.html.haml b/app/views/inbox/_entry.html.haml
index 06320b01..04982e3e 100644
--- a/app/views/inbox/_entry.html.haml
+++ b/app/views/inbox/_entry.html.haml
@@ -3,7 +3,7 @@
     .media
       - unless i.question.author_is_anonymous
         %a.pull-left{href: show_user_profile_path(i.question.user.screen_name)}
-          %img.avatar-sm{src: i.question.user.profile_picture.url(:medium)}
+          %img.answerbox__question-user-avatar.avatar-md{src: i.question.user.profile_picture.url(:medium)}
       .media-body
         %h6.text-muted.media-heading.answerbox__question-user
           = raw t('views.inbox.entry.asked', user: user_screen_name(i.question.user, anonymous: i.question.author_is_anonymous), time: time_tooltip(i.question))

From e44be8fa0e2e07cafae328cf777ce3e6452d798f Mon Sep 17 00:00:00 2001
From: Andreas Nedbal <andy@pixelde.su>
Date: Sat, 9 May 2020 00:50:46 +0200
Subject: [PATCH 161/172] Use large bell icon for notifications page

---
 app/views/notifications/index.haml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/views/notifications/index.haml b/app/views/notifications/index.haml
index 11a923af..919cfb59 100644
--- a/app/views/notifications/index.haml
+++ b/app/views/notifications/index.haml
@@ -3,7 +3,7 @@
     - if @notifications.count == 0
       %li.list-group-item.text-center
         .notifications--none
-          %i.fa.fa-bell-o.no-notifications
+          %i.fa.fa-bell-o.notification__bell-icon
         %p
           - if params[:type] != "all"
             No new notifications.

From bc3c1f287ef97b395169df5dec1cf58ac7f4ece6 Mon Sep 17 00:00:00 2001
From: Andreas Nedbal <andy@pixelde.su>
Date: Sat, 9 May 2020 00:51:37 +0200
Subject: [PATCH 162/172] Add Bootstrap input-group-text overrides for CSS
 variables

---
 app/assets/stylesheets/overrides/_inputs.scss | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/app/assets/stylesheets/overrides/_inputs.scss b/app/assets/stylesheets/overrides/_inputs.scss
index 68f9d348..bb2c75ce 100644
--- a/app/assets/stylesheets/overrides/_inputs.scss
+++ b/app/assets/stylesheets/overrides/_inputs.scss
@@ -9,4 +9,10 @@
     border-color: var(--primary);
     box-shadow: .5px 0 0 0.1rem var(--primary);
   }
+}
+
+.input-group-text {
+  color: RGB(var(--body-text));
+  background-color: var(--raised-accent);
+  border: 0;
 }
\ No newline at end of file

From 925193548f0e67b1a7d8f1f6c5b221b6ee64ab71 Mon Sep 17 00:00:00 2001
From: Andreas Nedbal <andy@pixelde.su>
Date: Sat, 9 May 2020 00:53:24 +0200
Subject: [PATCH 163/172] Remove hover states from notification dropdown

---
 app/assets/stylesheets/components/_notifications.scss | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/app/assets/stylesheets/components/_notifications.scss b/app/assets/stylesheets/components/_notifications.scss
index e8c43d1f..d470978a 100644
--- a/app/assets/stylesheets/components/_notifications.scss
+++ b/app/assets/stylesheets/components/_notifications.scss
@@ -33,6 +33,12 @@
 
   &-dropdown {
     min-width: 400px;
+
+    & .dropdown-item:hover, 
+    & .dropdown-item:active {
+      background: transparent;
+      color: RGB(var(--body-text));
+    }
   }
 
   .dropdown-item > & {

From 07033545ee64a922ea7ca042ec6a8d4614d811de Mon Sep 17 00:00:00 2001
From: Andreas Nedbal <andy@pixelde.su>
Date: Sat, 9 May 2020 01:35:03 +0200
Subject: [PATCH 164/172] Fix smiling commits not setting proper classes

---
 app/assets/javascripts/answerbox/comment/smile.coffee | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/app/assets/javascripts/answerbox/comment/smile.coffee b/app/assets/javascripts/answerbox/comment/smile.coffee
index a85da543..90e664eb 100644
--- a/app/assets/javascripts/answerbox/comment/smile.coffee
+++ b/app/assets/javascripts/answerbox/comment/smile.coffee
@@ -3,7 +3,7 @@ $(document).on "click", "button[name=ab-smile-comment]", ->
   cid = btn[0].dataset.cId
   action = btn[0].dataset.action
   count = Number $("span#ab-comment-smile-count-#{cid}").html()
-  btn[0].dataset.loadingText = "<i class=\"fa fa-meh-o fa-spin\"></i> <span id=\"ab-smile-count-#{cid}\">#{count}</span>"
+  btn[0].dataset.loadingText = "<i class=\"fa fa-fw fa-meh-o fa-spin\"></i> <span id=\"ab-smile-count-#{cid}\">#{count}</span>"
   btn.button "loading"
 
   target_url = switch action
@@ -36,8 +36,8 @@ $(document).on "click", "button[name=ab-smile-comment]", ->
           switch action
             when 'smile'
               btn[0].dataset.action = 'unsmile'
-              btn.html "<i class=\"fa fa-frown-o\"></i> <span id=\"ab-comment-smile-count-#{cid}\">#{count}</span>"
+              btn.html "<i class=\"fa fa-fw fa-frown-o\"></i> <span id=\"ab-comment-smile-count-#{cid}\">#{count}</span>"
             when 'unsmile'
               btn[0].dataset.action = 'smile'
-              btn.html "<i class=\"fa fa-smile-o\"></i> <span id=\"ab-comment-smile-count-#{cid}\">#{count}</span>"
+              btn.html "<i class=\"fa fa-fw fa-smile-o\"></i> <span id=\"ab-comment-smile-count-#{cid}\">#{count}</span>"
       , 20

From d82b7006e8b9bc8105a8204f018b29a1b57cc61d Mon Sep 17 00:00:00 2001
From: Andreas Nedbal <andy@pixelde.su>
Date: Sat, 9 May 2020 01:57:20 +0200
Subject: [PATCH 165/172] Fix turbolinks loading being broken

---
 app/assets/javascripts/settings.coffee | 11 ++++++-----
 1 file changed, 6 insertions(+), 5 deletions(-)

diff --git a/app/assets/javascripts/settings.coffee b/app/assets/javascripts/settings.coffee
index bdc5c6b0..b2626aca 100644
--- a/app/assets/javascripts/settings.coffee
+++ b/app/assets/javascripts/settings.coffee
@@ -102,13 +102,14 @@ if window.URL? or window.webkitURL?
 
 # theming
 
-previewStyle = document.createElement 'style'
-previewStyle.setAttribute('data-turbolinks-track', 'false')
-document.head.appendChild previewStyle
-
-previewTimeout = null
+previewStyle = null
 
 $(document).ready ->
+  previewStyle = document.createElement 'style'
+  document.body.appendChild previewStyle
+
+  previewTimeout = null
+
   $('#update_theme .color').each ->
     $this = $ this
     this.value = '#' + getHexColorFromThemeValue(this.value)

From 65f152b76243671d9c474ce0faef31a12beb06cf Mon Sep 17 00:00:00 2001
From: Georg Gadinger <nilsding@nilsding.org>
Date: Sat, 9 May 2020 02:07:58 +0200
Subject: [PATCH 166/172] Move user theme to the end of the body --> turbolinks
 has turbo links again

---
 app/helpers/theme_helper.rb       | 2 +-
 app/views/layouts/base.haml       | 6 +++---
 spec/helpers/theme_helper_spec.rb | 4 ++--
 3 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/app/helpers/theme_helper.rb b/app/helpers/theme_helper.rb
index 16c26297..13f74a0a 100644
--- a/app/helpers/theme_helper.rb
+++ b/app/helpers/theme_helper.rb
@@ -43,7 +43,7 @@ module ThemeHelper
 
     body += "}"
 
-    content_tag(:style, body, data: { "turbolinks-track": false })
+    content_tag(:style, body)
   end
 
   def get_active_theme
diff --git a/app/views/layouts/base.haml b/app/views/layouts/base.haml
index 08cffd36..7e466fe6 100644
--- a/app/views/layouts/base.haml
+++ b/app/views/layouts/base.haml
@@ -12,13 +12,12 @@
     %title= yield(:title)
     = javascript_include_tag 'i18n', 'data-turbolinks-track' => true
     = stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track' => true
-    = render_theme
     = javascript_include_tag 'application', 'data-turbolinks-track' => true
     - if user_signed_in?
       - if current_user.mod?
         = javascript_include_tag 'moderation', 'data-turbolinks-track' => true
     = csrf_meta_tags
-  %body#version1
+  %body
     - if user_signed_in?
       = render 'navigation/main'
     - else
@@ -37,4 +36,5 @@
             = succeed ')' do
               = `git rev-parse --short HEAD`.strip
           %p.text-danger Debug params:
-          = debug params
\ No newline at end of file
+          = debug params
+    = render_theme
diff --git a/spec/helpers/theme_helper_spec.rb b/spec/helpers/theme_helper_spec.rb
index 84467a90..3776192d 100644
--- a/spec/helpers/theme_helper_spec.rb
+++ b/spec/helpers/theme_helper_spec.rb
@@ -18,7 +18,7 @@ describe ThemeHelper, :type => :helper do
       end
 
       it "returns a theme" do
-        expect(helper.render_theme).to include('<style data-turbolinks-track="false">:root {')
+        expect(helper.render_theme).to include('<style>:root {')
       end
 
       it "contains correct theme background colors" do
@@ -141,4 +141,4 @@ describe ThemeHelper, :type => :helper do
       end
     end
   end
-end
\ No newline at end of file
+end

From 3ae83d8d02599e2acd823a1b45af7ea2cbd6924f Mon Sep 17 00:00:00 2001
From: Georg Gadinger <nilsding@nilsding.org>
Date: Sat, 9 May 2020 02:18:23 +0200
Subject: [PATCH 167/172] Unbreak the "Your Data" page when some timestamps are
 not set

---
 app/views/settings/_data.haml | 20 +++++++++++++-------
 1 file changed, 13 insertions(+), 7 deletions(-)

diff --git a/app/views/settings/_data.haml b/app/views/settings/_data.haml
index b30acf87..fd6b4829 100644
--- a/app/views/settings/_data.haml
+++ b/app/views/settings/_data.haml
@@ -132,22 +132,28 @@
         %h4 Sign In
 
         %p.font-weight-bold.mb-0 Current Sign In
-        %p.text-muted= localize(current_user.current_sign_in_at)
+        %p.text-muted= current_user.current_sign_in_at ? localize(current_user.current_sign_in_at) : "Not set"
 
         %p.font-weight-bold.mb-0 Last Sign In
-        %p.text-muted= localize(current_user.last_sign_in_at)
+        %p.text-muted= current_user.last_sign_in_at ? localize(current_user.last_sign_in_at) : "Not set"
 
         %p.font-weight-bold.mb-0 Remember me set at
-        %p.text-muted= localize(current_user.remember_created_at)
+        %p.text-muted= current_user.remember_created_at ? localize(current_user.remember_created_at) : "Not set"
       .col-md-6.col-sm-6.col-xs-12
         %h4 Create/Update
 
         %p.font-weight-bold.mb-0 Account created
         %p.text-muted
-          = localize(current_user.created_at)
-          = " (#{time_ago_in_words(current_user.created_at)} ago)"
+          - if current_user.created_at
+            = localize(current_user.created_at)
+            = " (#{time_ago_in_words(current_user.created_at)} ago)"
+          - else
+            Not set
 
         %p.font-weight-bold.mb-0 Account last updated
         %p.text-muted
-          = localize(current_user.updated_at)
-          = " (#{time_ago_in_words(current_user.updated_at)} ago)"
\ No newline at end of file
+          - if current_user.created_at
+            = localize(current_user.updated_at)
+            = " (#{time_ago_in_words(current_user.updated_at)} ago)"
+          - else
+            Not set

From ae8e0b651a37059bf31a2c180052df2fcf239f3f Mon Sep 17 00:00:00 2001
From: Georg Gadinger <nilsding@nilsding.org>
Date: Sat, 9 May 2020 02:43:43 +0200
Subject: [PATCH 168/172] Fix Question#show view when user is nil

---
 app/views/question/show.haml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/views/question/show.haml b/app/views/question/show.haml
index 3460c3fe..c05bf2a8 100644
--- a/app/views/question/show.haml
+++ b/app/views/question/show.haml
@@ -12,7 +12,7 @@
     %button#load-more-btn.btn.btn-default{type: :button, data: { last_id: @answers_last_id }}
       Load more
 
-  - if user_signed_in? and !current_user.answered? @question and current_user != @question.user and @question.user.privacy_allow_stranger_answers
+  - if user_signed_in? && !current_user.answered?(@question) && current_user != @question.user && @question.user&.privacy_allow_stranger_answers
     .card#q-answer-box
       .card-header
         %h3.card-title= t('views.question.title')

From ba2e82d7ecfaed53bde8e911cb67a5f124b544e6 Mon Sep 17 00:00:00 2001
From: Andreas Nedbal <andy@pixelde.su>
Date: Sat, 9 May 2020 02:45:47 +0200
Subject: [PATCH 169/172] Fix moderation userbox layout

---
 app/views/moderation/_userbox.html.haml | 15 +++++++--------
 app/views/moderation/priority.html.haml |  4 ++--
 2 files changed, 9 insertions(+), 10 deletions(-)

diff --git a/app/views/moderation/_userbox.html.haml b/app/views/moderation/_userbox.html.haml
index 07640f1b..ad59b82e 100644
--- a/app/views/moderation/_userbox.html.haml
+++ b/app/views/moderation/_userbox.html.haml
@@ -1,12 +1,11 @@
-- header_class = if user.profile_header.exists? then "userbox--header-container" else "userbox--no-header" end
-.card
-  %div{class: header_class}
-    %img.userbox--header{src: user.profile_header.url(:mobile)}
+.card.h-100.userbox
+  %img.userbox__header{src: user.profile_header.url(:mobile)}
   .card-body
-    %img.userbox--avatar{src: user.profile_picture.url(:small)}
-    %p.userbox--username
-      %a.profile--displayname{href: show_user_profile_path(user.screen_name)}
-        = user.screen_name
+    %img.userbox__avatar{src: user.profile_picture.url(:small)}
+    %a.profile__name{href: show_user_profile_path(user.screen_name)}
+      - unless user.display_name.blank?
+        .profile__display-name
+          = user.display_name
     .row
       .col-md-12.col-sm-12.col-xs-12
         - unless count.nil?
diff --git a/app/views/moderation/priority.html.haml b/app/views/moderation/priority.html.haml
index 92e1ff87..436fb9ea 100644
--- a/app/views/moderation/priority.html.haml
+++ b/app/views/moderation/priority.html.haml
@@ -4,7 +4,7 @@
   - else
     Users with the same IP
 #users
-  .row
+  .row.row-cols-1.row-cols-sm-2.row-cols-md-3
     - @users.each do |u, c|
-      .col-md-4.col-sm-12col-xs-12
+      .col
         = render 'moderation/userbox', user: u, count: c

From b29d3309d08649783f3cdd5c7bbccc2af612bc53 Mon Sep 17 00:00:00 2001
From: Andreas Nedbal <andy@pixelde.su>
Date: Sat, 9 May 2020 02:45:57 +0200
Subject: [PATCH 170/172] Make default btn-link themable

---
 app/assets/stylesheets/overrides/_buttons.scss | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/app/assets/stylesheets/overrides/_buttons.scss b/app/assets/stylesheets/overrides/_buttons.scss
index 8b2623ba..4bfe6cb4 100644
--- a/app/assets/stylesheets/overrides/_buttons.scss
+++ b/app/assets/stylesheets/overrides/_buttons.scss
@@ -2,6 +2,10 @@
   color: RGB(var(--body-text));
 }
 
+.btn-link:hover {
+  color: RGB(var(--body-text));
+}
+
 @each $color in $color-names {
   .btn-#{$color} {
 

From 936969d72afe993ad6225a30d321dd9c07147621 Mon Sep 17 00:00:00 2001
From: Andreas Nedbal <andy@pixelde.su>
Date: Sat, 9 May 2020 03:09:12 +0200
Subject: [PATCH 171/172] Fix ban dialog functionality

---
 app/assets/javascripts/moderation.js.erb.coffee |  2 +-
 app/assets/javascripts/moderation/ban.coffee    | 15 ---------------
 app/views/modal/_ban.haml                       |  2 +-
 3 files changed, 2 insertions(+), 17 deletions(-)

diff --git a/app/assets/javascripts/moderation.js.erb.coffee b/app/assets/javascripts/moderation.js.erb.coffee
index 0eb4ec03..f42f8875 100644
--- a/app/assets/javascripts/moderation.js.erb.coffee
+++ b/app/assets/javascripts/moderation.js.erb.coffee
@@ -2,4 +2,4 @@
 #= require tempusdominus-bootstrap-4
 #= require_tree ./moderation
 
-$('.datetimepicker-input').datetimepicker();
\ No newline at end of file
+$('.datetimepicker-input').datetimepicker({});
\ No newline at end of file
diff --git a/app/assets/javascripts/moderation/ban.coffee b/app/assets/javascripts/moderation/ban.coffee
index fecd10cf..8530ff23 100644
--- a/app/assets/javascripts/moderation/ban.coffee
+++ b/app/assets/javascripts/moderation/ban.coffee
@@ -19,21 +19,6 @@ load = ->
     else
       $("#ban-controls-time").show()
 
-  untilInput = $ modalForm.elements["until"]
-  untilInput.datetimepicker
-    defaultDate: untilInput.val()
-    sideBySide: true
-    icons:
-      time: "fa fa-clock-o"
-      date: "fa fa-calendar"
-      up: "fa fa-chevron-up"
-      down: "fa fa-chevron-down"
-      previous: "fa fa-chevron-left"
-      next: "fa fa-chevron-right"
-      today: "fa fa-home"
-      clear: "fa fa-trash-o"
-      close: "fa fa-times"
-
   modalForm.addEventListener "submit", (event) ->
     event.preventDefault();
 
diff --git a/app/views/modal/_ban.haml b/app/views/modal/_ban.haml
index 0e1d5752..2eede521 100644
--- a/app/views/modal/_ban.haml
+++ b/app/views/modal/_ban.haml
@@ -14,7 +14,7 @@
           #ban-controls{style: "#{"display: none" unless @user.banned?}"}
             = f.check_box :permaban, label: t('views.modal.bancontrol.permanent'), checked: @user.permanently_banned?
             #ban-controls-time{style: "#{"display: none" unless not @user.permanently_banned?}"}
-              = f.text_field :until, label: "", required: true, value: (@user.banned_until || DateTime.current).strftime("%m/%d/%Y %I:%M %p")
+              = f.text_field :until, label: "", required: true, value: (@user.banned_until || DateTime.current).strftime("%m/%d/%Y %I:%M %p"), class: "datetimepicker-input", data: { toggle: "datetimepicker", target: "#until" }
             = f.text_field :reason, placeholder: t('views.modal.bancontrol.reason'), value: @user.ban_reason
         .modal-footer
           %button.btn.btn-default{name: 'stop-time', type: :button, data: { dismiss: :modal }}= t 'views.actions.close'

From 4ae8b7ed818d67e0fc4866797c1f44331a0ee528 Mon Sep 17 00:00:00 2001
From: Andreas Nedbal <andy@pixelde.su>
Date: Sat, 9 May 2020 03:21:25 +0200
Subject: [PATCH 172/172] Remove timepicker from ban modal

---
 app/views/modal/_ban.haml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/views/modal/_ban.haml b/app/views/modal/_ban.haml
index 2eede521..0e1d5752 100644
--- a/app/views/modal/_ban.haml
+++ b/app/views/modal/_ban.haml
@@ -14,7 +14,7 @@
           #ban-controls{style: "#{"display: none" unless @user.banned?}"}
             = f.check_box :permaban, label: t('views.modal.bancontrol.permanent'), checked: @user.permanently_banned?
             #ban-controls-time{style: "#{"display: none" unless not @user.permanently_banned?}"}
-              = f.text_field :until, label: "", required: true, value: (@user.banned_until || DateTime.current).strftime("%m/%d/%Y %I:%M %p"), class: "datetimepicker-input", data: { toggle: "datetimepicker", target: "#until" }
+              = f.text_field :until, label: "", required: true, value: (@user.banned_until || DateTime.current).strftime("%m/%d/%Y %I:%M %p")
             = f.text_field :reason, placeholder: t('views.modal.bancontrol.reason'), value: @user.ban_reason
         .modal-footer
           %button.btn.btn-default{name: 'stop-time', type: :button, data: { dismiss: :modal }}= t 'views.actions.close'