From 6cfeedc57a517f8aa5b182e0534104b2f9d191af Mon Sep 17 00:00:00 2001
From: Igor Scheller <igor.scheller@igorshp.de>
Date: Thu, 5 Aug 2021 01:00:12 +0200
Subject: [PATCH] Fixed more themes and styles/types

---
 config/config.default.php                     |  2 +-
 includes/sys_form.php                         | 16 ++++-----
 includes/sys_template.php                     |  8 ++++-
 resources/assets/themes/base.scss             | 12 +++++--
 resources/assets/themes/card-glow.scss        | 33 +++++++++++++++++++
 resources/assets/themes/cyborg_variables.scss |  4 +--
 resources/assets/themes/dark.scss             |  3 ++
 resources/assets/themes/light.scss            |  7 ++++
 resources/assets/themes/theme0.scss           |  1 +
 resources/assets/themes/theme1.scss           |  2 ++
 resources/assets/themes/theme10.scss          |  2 ++
 resources/assets/themes/theme11.scss          | 19 +++++++++--
 resources/assets/themes/theme12.scss          |  1 +
 resources/assets/themes/theme13.scss          |  4 ++-
 resources/assets/themes/theme14.scss          |  3 +-
 resources/assets/themes/theme15.scss          |  2 +-
 resources/assets/themes/theme2.scss           |  1 +
 resources/assets/themes/theme3.scss           |  9 +++++
 resources/assets/themes/theme4.scss           | 15 +++++++++
 resources/assets/themes/theme5.scss           |  3 +-
 resources/assets/themes/theme6.scss           |  5 ++-
 resources/assets/themes/theme7.scss           |  3 +-
 resources/assets/themes/theme8.scss           |  2 ++
 resources/assets/themes/theme9.scss           |  2 ++
 resources/views/errors/404.twig               |  2 +-
 resources/views/layouts/app.twig              |  2 +-
 resources/views/macros/base.twig              |  4 +++
 resources/views/macros/form.twig              |  2 +-
 resources/views/pages/design.twig             |  2 +-
 resources/views/pages/faq/edit.twig           |  4 +--
 resources/views/pages/faq/overview.twig       |  6 ++--
 resources/views/pages/login.twig              | 28 ++++++++--------
 resources/views/pages/news/edit.twig          |  2 +-
 resources/views/pages/news/news.twig          |  2 +-
 resources/views/pages/news/overview.twig      |  6 ++--
 resources/views/pages/questions/edit.twig     |  4 +--
 resources/views/pages/questions/overview.twig |  8 ++---
 resources/views/pages/user-shifts.html        |  6 ++--
 38 files changed, 178 insertions(+), 59 deletions(-)
 create mode 100644 resources/assets/themes/card-glow.scss
 create mode 100644 resources/assets/themes/dark.scss
 create mode 100644 resources/assets/themes/light.scss

diff --git a/config/config.default.php b/config/config.default.php
index 1967e563..18892cb4 100644
--- a/config/config.default.php
+++ b/config/config.default.php
@@ -160,7 +160,7 @@ return [
         4 => [
             'name' => 'Engelsystem 33c3 (2016)',
             'type' => 'dark',
-            'navbar_classes' => 'navbar-dark bg-darker border-dark',
+            'navbar_classes' => 'navbar-dark bg-body border-dark',
         ],
         3 => [
             'name' => 'Engelsystem 32c3 (2015)',
diff --git a/includes/sys_form.php b/includes/sys_form.php
index d57e89b4..b9b7b92f 100644
--- a/includes/sys_form.php
+++ b/includes/sys_form.php
@@ -29,14 +29,12 @@ function form_spinner($name, $label, $value)
     return form_element($label, '
         <div class="input-group">
             <input id="spinner-' . $name . '" class="form-control" name="' . $name . '" value="' . $value . '" />
-            <div class="input-group-btn">
-                <button id="spinner-' . $name . '-down" class="btn btn-primary" type="button">
-                   ' . icon('dash-lg') . '
-                </button>
-                <button id="spinner-' . $name . '-up" class="btn btn-primary" type="button">
-                    ' . icon('plus-lg') . '
-                </button>
-            </div>
+            <button id="spinner-' . $name . '-down" class="btn btn-secondary" type="button">
+               ' . icon('dash-lg') . '
+            </button>
+            <button id="spinner-' . $name . '-up" class="btn btn-secondary" type="button">
+                ' . icon('plus-lg') . '
+            </button>
         </div>
         <script type="text/javascript">
             $(\'#spinner-' . $name . '-down\').click(function() {
@@ -72,7 +70,7 @@ function form_date($name, $label, $value, $start_date = '', $end_date = '')
     return form_element($label, '
     <div class="input-group date" id="' . $dom_id . '" data-min-date="' . $start_date . '" data-max-date="' . $end_date . '">
         <input type="date" placeholder="YYYY-MM-DD" name="' . $name . '" class="form-control" value="' . htmlspecialchars($value) . '" autocomplete="off">'
-        . '<span class="input-group-addon">' . icon('grid-3x3-gap-fill') . '</span>
+        . '<span class="input-group-text">' . icon('grid-3x3-gap-fill') . '</span>
     </div>
     ', $dom_id);
 }
diff --git a/includes/sys_template.php b/includes/sys_template.php
index 443024ab..83ad1d53 100644
--- a/includes/sys_template.php
+++ b/includes/sys_template.php
@@ -1,5 +1,7 @@
 <?php
 
+use Illuminate\Support\Str;
+
 /**
  * Render a stat for dashborad (big number with label).
  * If no style given, style is danger if number > 0, and success if number == 0.
@@ -391,7 +393,11 @@ function render_table($columns, $rows, $data = true)
  */
 function button($href, $label, $class = '')
 {
-    return '<a href="' . $href . '" class="btn btn-secondary ' . $class . '">' . $label . '</a>';
+    if (!Str::contains(Str::remove(['btn-sm', 'btn-xl'], $class), 'btn-')) {
+        $class = 'btn-secondary' . ($class ? ' ' . $class : '');
+    }
+
+    return '<a href="' . $href . '" class="btn ' . $class . '">' . $label . '</a>';
 }
 
 /**
diff --git a/resources/assets/themes/base.scss b/resources/assets/themes/base.scss
index d6776aaa..015272f2 100644
--- a/resources/assets/themes/base.scss
+++ b/resources/assets/themes/base.scss
@@ -60,6 +60,14 @@ body {
   mask-size: cover;
 }
 
+.text-light .icon-icon_angel {
+  background-color: map.get($theme-colors, "light");
+}
+
+.dark .icon-icon_angel {
+  background-color: map.get($theme-colors, "dark");
+}
+
 a .icon-icon_angel {
   background-color: $link-color;
 }
@@ -278,11 +286,11 @@ span.ref-id[id] {
 
 .card-header {
   &.bg-dark {
-    color: map.get($theme-colors, "light");;
+    color: map.get($theme-colors, "light");
   }
 
   &.bg-light {
-    color: map.get($theme-colors, "dark");;
+    color: map.get($theme-colors, "dark");
   }
 }
 
diff --git a/resources/assets/themes/card-glow.scss b/resources/assets/themes/card-glow.scss
new file mode 100644
index 00000000..2ab4bdf2
--- /dev/null
+++ b/resources/assets/themes/card-glow.scss
@@ -0,0 +1,33 @@
+// Used for shift overview cards headers
+@each $state, $value in $theme-colors {
+  $card-background: darken($value, 35%);
+  $card-border: $value;
+  $card-color: $value;
+
+  @if (contrast-ratio($card-background, $card-color) < $min-contrast-ratio*.7) {
+    $card-color: mix($value, color-contrast($card-background), 40%);
+  }
+
+  .card.bg-#{"" + $state} .card-header {
+    background-color: $card-background;
+    border-color: $card-border;
+
+    .badge.bg-light {
+      background-color: $card-color !important;
+    }
+
+    .badge.text-#{"" + $state} {
+      color: $card-background !important;
+    }
+
+    a.text-white {
+      color: $card-color !important;
+    }
+
+    .btn-#{"" + $state} {
+      background-color: $card-background;
+      border-color: $card-border !important;
+      color: $card-color;
+    }
+  }
+}
diff --git a/resources/assets/themes/cyborg_variables.scss b/resources/assets/themes/cyborg_variables.scss
index ea636d34..a5a79f85 100644
--- a/resources/assets/themes/cyborg_variables.scss
+++ b/resources/assets/themes/cyborg_variables.scss
@@ -50,10 +50,10 @@ $danger:          #d9534f !default;
 //## Settings for some of the most global styles.
 
 $body-bg:    #060606 !default;
-$body-color: $gray-light;
+$body-color: $gray-light !default;
 
 //** Global text color on `<body>`.
-$text-color: $gray-light;
+$text-color: $gray-light !default;
 $text-muted: $gray-light !default;
 
 //** Global textual link color.
diff --git a/resources/assets/themes/dark.scss b/resources/assets/themes/dark.scss
new file mode 100644
index 00000000..7faeffb8
--- /dev/null
+++ b/resources/assets/themes/dark.scss
@@ -0,0 +1,3 @@
+// All dark themes
+$input-group-addon-color: #222;
+$input-disabled-bg: #111;
diff --git a/resources/assets/themes/light.scss b/resources/assets/themes/light.scss
new file mode 100644
index 00000000..69c5f598
--- /dev/null
+++ b/resources/assets/themes/light.scss
@@ -0,0 +1,7 @@
+// All light themes
+
+$secondary: #bec4ce;
+
+.btn.btn-secondary {
+  background-color: rgba(255, 255, 255, 0.3);
+}
diff --git a/resources/assets/themes/theme0.scss b/resources/assets/themes/theme0.scss
index a59c740e..539bc67c 100644
--- a/resources/assets/themes/theme0.scss
+++ b/resources/assets/themes/theme0.scss
@@ -1,4 +1,5 @@
 // light theme
+@import "light";
 
 $primary: #337ab7;
 $light: #f5f5f5;
diff --git a/resources/assets/themes/theme1.scss b/resources/assets/themes/theme1.scss
index 651d73c1..44e093a9 100644
--- a/resources/assets/themes/theme1.scss
+++ b/resources/assets/themes/theme1.scss
@@ -1,6 +1,8 @@
 // Variables
 // --------------------------------------------------
 
+@import "dark";
+
 //== changed Colors
 
 $gray-darker:  #222;
diff --git a/resources/assets/themes/theme10.scss b/resources/assets/themes/theme10.scss
index e67d05ea..cbc4f615 100644
--- a/resources/assets/themes/theme10.scss
+++ b/resources/assets/themes/theme10.scss
@@ -2,6 +2,7 @@
 
 // Variables
 // --------------------------------------------------
+@import "dark";
 
 //== changed Colors
 
@@ -18,6 +19,7 @@ $text-muted: $primary;
 @import "cyborg_styles.scss";
 
 // Specials for cccamp19 design
+@import "card-glow";
 
 .navbar-brand {
   .icon-icon_angel {
diff --git a/resources/assets/themes/theme11.scss b/resources/assets/themes/theme11.scss
index 128f648e..cf6870c5 100644
--- a/resources/assets/themes/theme11.scss
+++ b/resources/assets/themes/theme11.scss
@@ -1,6 +1,7 @@
 // high contrast
 // Variables
 // --------------------------------------------------
+@import "dark";
 
 //== Colors
 
@@ -23,7 +24,7 @@ $warning:       $brand-warning;
 //== Scaffolding
 
 $body-bg:               #000;
-$text-color:            #fff;
+$body-color:            #fff;
 
 //== Buttons
 
@@ -45,6 +46,8 @@ $btn-warning-border:             darken($btn-default-bg, 10%);
 $btn-danger-color:               #000;
 $btn-danger-border:              darken($btn-default-bg, 10%);
 
+//= Navigation
+$nav-tabs-link-active-color: $gray-lighter;
 
 
 //== Forms
@@ -98,5 +101,17 @@ $headings-small-color:        $gray-lighter;
 // code tag
 code {
   background-color: $btn-default-bg;
-  color: $input-color;
+  color: #fff;
+}
+
+.navbar-dark .navbar-nav .nav-link {
+  color: #fff;
+}
+
+.badge {
+  color: #000 !important;
+
+  &.bg-dark {
+    color: #fff !important;
+  }
 }
diff --git a/resources/assets/themes/theme12.scss b/resources/assets/themes/theme12.scss
index df155cdc..114bf802 100644
--- a/resources/assets/themes/theme12.scss
+++ b/resources/assets/themes/theme12.scss
@@ -1,6 +1,7 @@
 // 36c3
 
 //== Colors
+@import "dark";
 
 $gray-dark:    #282828;
 $gray-darker:  #222;
diff --git a/resources/assets/themes/theme13.scss b/resources/assets/themes/theme13.scss
index 24ed287d..3936193b 100644
--- a/resources/assets/themes/theme13.scss
+++ b/resources/assets/themes/theme13.scss
@@ -1,6 +1,7 @@
-// rc3
+// rc3 violet
 
 //== Colors
+@import "dark";
 
 $gray-darker:            #100e23;
 $gray-dark:              lighten($gray-darker, 15%);
@@ -12,6 +13,7 @@ $black:                  #000;
 $brand-primary: #6800e7;
 $primary:       $brand-primary;
 $brand-success: #05b9ec;
+$secondary:     #3a327e;
 $success:       $brand-success;
 $brand-info:    #670295;
 $info:          $brand-info;
diff --git a/resources/assets/themes/theme14.scss b/resources/assets/themes/theme14.scss
index 7de23c85..265c3e38 100644
--- a/resources/assets/themes/theme14.scss
+++ b/resources/assets/themes/theme14.scss
@@ -1,6 +1,7 @@
 // rc3 teal
 
 //== Colors
+@import "dark";
 
 $gray-darker:            #0e1c23;
 $gray-dark:              lighten($gray-darker, 15%);
@@ -11,6 +12,7 @@ $black:                  #000;
 
 $brand-primary: #05b9ec;
 $primary:       $brand-primary;
+$secondary:     #32657e;
 $brand-success: #02fae0;
 $success:       $brand-success;
 $brand-info:    #025d83;
@@ -20,7 +22,6 @@ $warning:       $brand-warning;
 $brand-danger:  #b239ff;
 $danger:        $brand-danger;
 
-
 //== Scaffolding
 
 $body-bg:               #000;
diff --git a/resources/assets/themes/theme15.scss b/resources/assets/themes/theme15.scss
index 3612d51c..7ade7847 100644
--- a/resources/assets/themes/theme15.scss
+++ b/resources/assets/themes/theme15.scss
@@ -55,7 +55,7 @@ $plum: #1f0229;
 $dark-green: #00292d;
 $blue: darken(#009951, 10%);
 
-.label.label-warning,
+.badge.bg-warning,
 .progress-bar.progress-bar-warning {
   color:white;
 }
diff --git a/resources/assets/themes/theme2.scss b/resources/assets/themes/theme2.scss
index 9624e7dc..9e21b05c 100644
--- a/resources/assets/themes/theme2.scss
+++ b/resources/assets/themes/theme2.scss
@@ -1,4 +1,5 @@
 // cccamp15
+@import "light";
 
 $brand-primary: #758499;
 $primary:       #758499;
diff --git a/resources/assets/themes/theme3.scss b/resources/assets/themes/theme3.scss
index 2c8f35af..7ef9d52a 100644
--- a/resources/assets/themes/theme3.scss
+++ b/resources/assets/themes/theme3.scss
@@ -1,4 +1,5 @@
 // 32c3 (2015)
+@import "light";
 
 $brand-primary:         #f19224;
 $primary:         #f19224;
@@ -57,4 +58,12 @@ $navbar-default-brand-hover-bg:     #000;
   color: #000;
 }
 
+.card.bg-info .card-header a {
+  color: lighten($brand-info, 50%);
+
+  &:hover {
+    color: lighten($brand-info, 50%);
+  }
+}
+
 @import "base.scss";
diff --git a/resources/assets/themes/theme4.scss b/resources/assets/themes/theme4.scss
index ac83811a..a976e3f6 100644
--- a/resources/assets/themes/theme4.scss
+++ b/resources/assets/themes/theme4.scss
@@ -1,4 +1,5 @@
 // 33c3 (2016)
+@import "dark";
 
 // Variables
 
@@ -20,6 +21,8 @@ $warning: rgb(255, 244, 95);
 $brand-danger:  rgb(277, 38, 60);
 $danger:  rgb(277, 38, 60);
 
+$text-muted: lighten($gray-light, 25%);
+
 //== changed Scaffolding
 
 $body-bg:  #1d1d1b;
@@ -86,6 +89,9 @@ $badge-color:                 #fff;
 $headings-small-color:        $gray-light;
 
 
+// Navigation tabs
+$nav-tabs-link-active-color: $gray-light;
+
 // Bootswatch
 // -----------------------------------------------------
 @import "cyborg_variables.scss";
@@ -97,6 +103,15 @@ $headings-small-color:        $gray-light;
   background-color: $btn-default-bg;
 }
 
+.badge.bg-warning {
+  color: #000;
+}
+
+.card.bg-secondary .card-header,
+.card.bg-secondary .card-footer {
+  color: $gray-lighter;
+}
+
 // different code tag
 code {
   background-color: $state-info-bg;
diff --git a/resources/assets/themes/theme5.scss b/resources/assets/themes/theme5.scss
index 48649c0c..84900a28 100644
--- a/resources/assets/themes/theme5.scss
+++ b/resources/assets/themes/theme5.scss
@@ -1,4 +1,5 @@
 // 34c3 light (2017)
+@import "light";
 
 $brand-primary: rgb(164, 28, 49);
 $primary: rgb(164, 28, 49);
@@ -29,7 +30,7 @@ $state-danger-text:              darken($brand-danger,40%);
 $state-danger-bg:                lighten($brand-danger,40%);
 $state-danger-border:            $brand-danger;
 
-.label.label-warning {
+.badge.bg-warning {
   color: #000;
 }
 
diff --git a/resources/assets/themes/theme6.scss b/resources/assets/themes/theme6.scss
index 9b0c7aba..e1084bf9 100644
--- a/resources/assets/themes/theme6.scss
+++ b/resources/assets/themes/theme6.scss
@@ -1,6 +1,7 @@
 // 34c3 dark (2017)
 // Variables
 // --------------------------------------------------
+@import "dark";
 
 //== changed Colors
 
@@ -20,7 +21,9 @@ $warning:       rgb(255, 255, 51);
 $brand-danger:  rgb(255, 102, 0);
 $danger:        rgb(255, 102, 0);
 
-.label.label-warning, .progress-bar.progress-bar-warning {
+$secondary: #424242;
+
+.badge.bg-warning, .progress-bar.progress-bar-warning {
   color: #000;
 }
 
diff --git a/resources/assets/themes/theme7.scss b/resources/assets/themes/theme7.scss
index 24cd02ae..ac493b9a 100644
--- a/resources/assets/themes/theme7.scss
+++ b/resources/assets/themes/theme7.scss
@@ -2,6 +2,7 @@
 
 // Variables
 // --------------------------------------------------
+@import "dark";
 
 $gray-darker:            #000;
 $gray-dark:              #000;
@@ -255,7 +256,7 @@ table,
   background-image: linear-gradient(to right, rgb(0, 132, 176) , rgb(0, 163, 86));
 }
 
-.label-warning {
+.bg-warning {
   color: #000;
 }
 
diff --git a/resources/assets/themes/theme8.scss b/resources/assets/themes/theme8.scss
index db708806..ed536cc2 100644
--- a/resources/assets/themes/theme8.scss
+++ b/resources/assets/themes/theme8.scss
@@ -1,6 +1,7 @@
 // cccamp19 blue (2019)
 
 // Variables
+@import "dark";
 
 //== changed Colors
 
@@ -17,6 +18,7 @@ $text-muted: $primary;
 @import "cyborg_styles.scss";
 
 // Specials for cccamp19 design
+@import "card-glow";
 
 .navbar-brand {
   .icon-icon_angel {
diff --git a/resources/assets/themes/theme9.scss b/resources/assets/themes/theme9.scss
index 191a10df..254f3b25 100644
--- a/resources/assets/themes/theme9.scss
+++ b/resources/assets/themes/theme9.scss
@@ -2,6 +2,7 @@
 
 // Variables
 // --------------------------------------------------
+@import "dark";
 
 //== changed Colors
 
@@ -18,6 +19,7 @@ $text-muted: $primary;
 @import "cyborg_styles.scss";
 
 // Specials for cccamp19 design
+@import "card-glow";
 
 .navbar-brand {
   .icon-icon_angel {
diff --git a/resources/views/errors/404.twig b/resources/views/errors/404.twig
index 8a67d064..620aaa2d 100644
--- a/resources/views/errors/404.twig
+++ b/resources/views/errors/404.twig
@@ -4,7 +4,7 @@
 
 {% block content_container %}
     <div class="row">
-        <div class="col-sm-6 col-sm-offset-3 error-big">
+        <div class="col-md-6 offset-md-3 col-lg-4 offset-lg-4 error-big">
             <h2>
                 4<span class="pulse">:</span>{{ status|slice(1, 2) }}
                 <small class="text-muted">{{ __("No sleep found") }}</small>
diff --git a/resources/views/layouts/app.twig b/resources/views/layouts/app.twig
index 73e87602..de3ae985 100644
--- a/resources/views/layouts/app.twig
+++ b/resources/views/layouts/app.twig
@@ -14,7 +14,7 @@
         {% if page() in ['news', 'meetings'] and is_user() and has_permission_to('atom') -%}
             {% set parameters = {'key': user.api_key} -%}
             {% if page() == 'meetings' -%}
-                {% set parameters = parameters|merge({'meetings': 1}) -%}
+                {% set parameters = {'meetings': 1}|merge(parameters) -%}
             {% endif %}
             <link href="{{ url('atom', parameters) }}" type="application/atom+xml" rel="alternate" title="Atom Feed">
         {% endif %}
diff --git a/resources/views/macros/base.twig b/resources/views/macros/base.twig
index 5d3d42bc..dbc58acf 100644
--- a/resources/views/macros/base.twig
+++ b/resources/views/macros/base.twig
@@ -31,3 +31,7 @@
 {% macro type_bg_class() -%}
     {% if theme.type == 'light' %}bg-white{% else %}bg-dark{% endif %}
 {%- endmacro %}
+
+{% macro type_text_class() -%}
+    {% if theme.type == 'light' %}text-dark{% else %}text-light{% endif %}
+{%- endmacro %}
diff --git a/resources/views/macros/form.twig b/resources/views/macros/form.twig
index 8d99478b..cc9c7b45 100644
--- a/resources/views/macros/form.twig
+++ b/resources/views/macros/form.twig
@@ -79,5 +79,5 @@
 {%- endmacro %}
 
 {% macro submit(label, opt) %}
-    {{ _self.button(label|default(__('form.submit')), opt|default({})|merge({'type': 'submit', 'btn_type': 'primary'})) }}
+    {{ _self.button(label|default(__('form.submit')), {'type': 'submit', 'btn_type': 'primary'}|merge(opt|default({}))) }}
 {%- endmacro %}
diff --git a/resources/views/pages/design.twig b/resources/views/pages/design.twig
index de8f2458..204ab886 100644
--- a/resources/views/pages/design.twig
+++ b/resources/views/pages/design.twig
@@ -26,7 +26,7 @@
     ['light', 'dark'],
     ['dark', 'light'],
 ] %}
-{% set types_buttons=types|merge(['link']) %}
+{% set types_buttons=['link']|merge(types) %}
 {% set shortsum='Lorem ipsum dolor…' %}
 {% set lipsum='Lorem ipsum dolor sit amet, consectetur adipisici elit…' %}
 {% set linksum='Lorem ipsum! Dolor <a href="#">link</a> amet, consectetur adipisici elit!' %}
diff --git a/resources/views/pages/faq/edit.twig b/resources/views/pages/faq/edit.twig
index dbc97b74..d93ea2f3 100644
--- a/resources/views/pages/faq/edit.twig
+++ b/resources/views/pages/faq/edit.twig
@@ -51,11 +51,11 @@
                     <div class="col-md-12">
                         <h2>{{ __('form.preview') }}</h2>
 
-                        <div class="card {% if theme.type =='light' %}bg-light{% else %}bg-secondary{% endif %}">
+                        <div class="card {% if theme.type =='light' %}bg-light{% else %}bg-dark{% endif %}">
                             <div class="card-header">
                                 {{ faq.question }}
                             </div>
-                            <div class="card-body {{ m.type_bg_class() }}">
+                            <div class="card-body bg-body">
                                 {{ faq.text|markdown }}
                             </div>
                         </div>
diff --git a/resources/views/pages/faq/overview.twig b/resources/views/pages/faq/overview.twig
index 3c99ff10..e3762c09 100644
--- a/resources/views/pages/faq/overview.twig
+++ b/resources/views/pages/faq/overview.twig
@@ -30,7 +30,7 @@
                 {% for item in items %}
                     <div class="col-md-12 faq">
                         <span id="faq-{{ item.id }}" class="ref-id"></span>
-                        <div class="card {% if theme.type =='light' %}bg-light{% else %}bg-secondary{% endif %} mb-4">
+                        <div class="card {% if theme.type =='light' %}bg-light{% else %}bg-dark{% endif %} mb-4">
                             <h4 class="card-header">
                                 {{ item.question }}
                                 <small class="text-muted">
@@ -38,11 +38,11 @@
                                 </small>
                             </h4>
 
-                            <div class="card-body {{ m.type_bg_class() }}">
+                            <div class="card-body bg-body">
                                 {{ item.text|markdown }}
                             </div>
 
-                            <div class="card-footer d-flex align-items-center">
+                            <div class="card-footer {% if theme.type =='light' %}bg-light{% else %}bg-dark{% endif %} d-flex align-items-center">
                                 <div class="me-3">
                                     {{ m.icon('clock') }} {{ item.updated_at.format(__('Y-m-d H:i')) }}
                                 </div>
diff --git a/resources/views/pages/login.twig b/resources/views/pages/login.twig
index 0616336f..90160faf 100644
--- a/resources/views/pages/login.twig
+++ b/resources/views/pages/login.twig
@@ -29,8 +29,8 @@
         </div>
 
         <div class="row mb-5">
-            <div class="col-sm-6 offset-sm-6 col-md-4 offset-md-4">
-                <div class="card bg-dark">
+            <div class="col-md-6 offset-md-3 col-lg-4 offset-lg-4">
+                <div class="card {{ m.type_bg_class() }}">
                     <div class="card-body">
                         {% include 'layouts/parts/messages.twig' %}
 
@@ -38,7 +38,7 @@
                             {{ csrf() }}
                             <div class="mb-3">
                                 <div class="input-group input-group-lg">
-                                    <span class="input-group-text text-light">
+                                    <span class="input-group-text {{ m.type_text_class() }}">
                                         {{ m.angel }}
                                     </span>
                                     <input
@@ -54,7 +54,7 @@
 
                             <div class="mb-3">
                                 <div class="input-group input-group-lg">
-                                    <span class="input-group-text text-light">
+                                    <span class="input-group-text {{ m.type_text_class() }}">
                                         <i class="bi bi-key"></i>
                                     </span>
                                     <input
@@ -71,15 +71,17 @@
                             </div>
 
                             {%  if config('oauth') is not empty %}
-                                <div class="mb-3 btn-group btn-group-justified">
-                                    {% for name,config in config('oauth') %}
-                                        <a href="{{ url('oauth/' ~ name) }}" class="btn btn-primary btn-lg{% if config.hidden|default(false) %} d-none{% endif %}">
-                                            {{ __(
-                                                'oauth.login-using-provider',
-                                                [__(config.name|default(name|capitalize))]
-                                            ) }}
-                                        </a>
-                                    {% endfor %}
+                                <div class="row">
+                                    <div class="mb-3 btn-group">
+                                        {% for name,config in config('oauth') %}
+                                            <a href="{{ url('oauth/' ~ name) }}" class="btn btn-primary btn-lg{% if config.hidden|default(false) %} d-none{% endif %}">
+                                                {{ __(
+                                                    'oauth.login-using-provider',
+                                                    [__(config.name|default(name|capitalize))]
+                                                ) }}
+                                            </a>
+                                        {% endfor %}
+                                    </div>
                                 </div>
                             {% endif %}
 
diff --git a/resources/views/pages/news/edit.twig b/resources/views/pages/news/edit.twig
index c3f5be40..a1f8f63a 100644
--- a/resources/views/pages/news/edit.twig
+++ b/resources/views/pages/news/edit.twig
@@ -70,7 +70,7 @@
                                 {% if news.is_meeting %}{{ __('news.is_meeting') }}{% endif %}
                                 {{ news.title }}
                             </div>
-                            <div class="card-body {{ m.type_bg_class() }}">
+                            <div class="card-body bg-body">
                                 {{ news.text|raw|markdown(false) }}
                             </div>
                         </div>
diff --git a/resources/views/pages/news/news.twig b/resources/views/pages/news/news.twig
index dc3e8770..c8877f24 100644
--- a/resources/views/pages/news/news.twig
+++ b/resources/views/pages/news/news.twig
@@ -17,7 +17,7 @@
                 <div class="card-body {{ m.type_bg_class() }}">
                     {{ comment.text|nl2br }}
                 </div>
-                <div class="card-footer text-muted d-flex align-items-center">
+                <div class="card-footer {% if theme.type =='light' %}bg-light{% else %}bg-dark{% endif %} text-muted d-flex align-items-center">
                     <div class="me-3">
                         {{ m.icon('clock') }}
                         {{ comment.created_at.format(__('Y-m-d H:i')) }}
diff --git a/resources/views/pages/news/overview.twig b/resources/views/pages/news/overview.twig
index bb254e38..73f924e6 100644
--- a/resources/views/pages/news/overview.twig
+++ b/resources/views/pages/news/overview.twig
@@ -48,7 +48,7 @@
 {% endblock %}
 
 {% macro news(news, show_comments_link, is_overview) %}
-    <div class="card {% if news.is_meeting %}bg-info{% else %}{% if theme.type =='light' %}bg-light{% else %}bg-secondary{% endif %}{% endif %} mb-4">
+    <div class="card {% if news.is_meeting %}bg-info{% else %}{% if theme.type =='light' %}bg-light{% else %}bg-dark{% endif %}{% endif %} mb-4">
         {% if is_overview|default(false) %}
         <div class="card-header {% if news.is_meeting and theme.type == 'dark' %}text-white{% endif %}">
                 <a href="{{ url('news/' ~ news.id) }}" class="text-inherit">
@@ -59,11 +59,11 @@
             </div>
         {% endif %}
 
-        <div class="card-body {{ m.type_bg_class() }}">
+        <div class="card-body bg-body">
             {{ news.text|raw|markdown(false) }}
         </div>
 
-        <div class="card-footer {% if theme.type =='light' %}bg-light{% else %}bg-secondary{% endif %} text-muted">
+        <div class="card-footer {% if theme.type =='light' %}bg-light{% else %}bg-dark{% endif %} text-muted">
             {% if news.updated_at != news.created_at and not is_overview %}
                 <div class="d-flex align-items-center">
                     <div class="me-3">
diff --git a/resources/views/pages/questions/edit.twig b/resources/views/pages/questions/edit.twig
index 243947b6..c286497a 100644
--- a/resources/views/pages/questions/edit.twig
+++ b/resources/views/pages/questions/edit.twig
@@ -56,7 +56,7 @@
                         <h2>{{ __('form.preview') }}</h2>
 
                         <div class="card {% if theme.type =='light' %}bg-light{% else %}bg-secondary{% endif %} mb-4">
-                            <div class="card-body {{ m.type_bg_class() }}">
+                            <div class="card-body bg-body">
                                 {{ question.text|nl2br }}
                             </div>
                         </div>
@@ -65,7 +65,7 @@
                     {% if question.answer %}
                         <div class="col-md-11 offset-md-1">
                             <div class="card bg-info">
-                                <div class="card-body {{ m.type_bg_class() }}">
+                                <div class="card-body bg-body">
                                     {{ question.answer|markdown }}
                                 </div>
                             </div>
diff --git a/resources/views/pages/questions/overview.twig b/resources/views/pages/questions/overview.twig
index 7e629465..3b8f545f 100644
--- a/resources/views/pages/questions/overview.twig
+++ b/resources/views/pages/questions/overview.twig
@@ -28,11 +28,11 @@
                             <div class="row mb-4">
                                 <div class="col-md-12">
                                     <div class="card {% if theme.type =='light' %}bg-light{% else %}bg-secondary{% endif %}">
-                                        <div class="card-body {{ m.type_bg_class() }}">
+                                        <div class="card-body bg-body">
                                             {{ question.text|nl2br }}
                                         </div>
 
-                                        <div class="card-footer d-flex align-items-center">
+                                        <div class="card-footer {% if theme.type =='light' %}bg-light{% else %}bg-dark{% endif %} d-flex align-items-center">
                                             <div class="me-3">
                                                 {{ m.icon('clock') }} {{ question.created_at.format(__('Y-m-d H:i')) }}
                                             </div>
@@ -65,10 +65,10 @@
                                 {% if question.answer %}
                                     <div class="col-md-11 offset-md-1 mt-3">
                                         <div class="card bg-info">
-                                            <div class="card-body {{ m.type_bg_class() }}">
+                                            <div class="card-body bg-body">
                                                 {{ question.answer|markdown }}
                                             </div>
-                                            <div class="card-footer {% if theme.type =='light' %}bg-light{% else %}bg-secondary{% endif %} d-flex align-items-center">
+                                            <div class="card-footer {% if theme.type =='light' %}bg-light{% else %}bg-dark{% endif %} d-flex align-items-center">
                                                 <div class="me-3">
                                                     {{ m.icon('clock') }} {{ question.updated_at.format(__('Y-m-d H:i')) }}
                                                 </div>
diff --git a/resources/views/pages/user-shifts.html b/resources/views/pages/user-shifts.html
index e8828f0d..8b73e016 100644
--- a/resources/views/pages/user-shifts.html
+++ b/resources/views/pages/user-shifts.html
@@ -39,18 +39,18 @@
                 </div>
             </div>
             <div class="form-group d-print-none" style="margin-top: .5em">
-                <div class="btn-group">
+                <div class="btn-group mb-1">
                     <a href="javascript:setDay(-1)" class="btn btn-secondary ">%set_yesterday%</a>
                     <a href="javascript:setDay()" class="btn btn-secondary ">%set_today%</a>
                     <a href="javascript:setDay(1)" class="btn btn-secondary ">%set_tomorrow%</a>
                 </div>
-                <div class="btn-group">
+                <div class="btn-group mb-1">
                     <a href="javascript:setHours(-8)" class="btn btn-secondary ">%set_last_8h%</a>
                     <a href="javascript:setHours(-4)" class="btn btn-secondary ">%set_last_4h%</a>
                     <a href="javascript:setHours(4)" class="btn btn-secondary ">%set_next_4h%</a>
                     <a href="javascript:setHours(8)" class="btn btn-secondary ">%set_next_8h%</a>
                 </div>
-                <div class="btn-group">
+                <div class="btn-group mb-1">
                     %buttons%
                 </div>
             </div>