From 038d74d17cb31aa6be972d273a836fa10a52012f Mon Sep 17 00:00:00 2001
From: "Luna D." <luna@nighty.cloud>
Date: Tue, 2 Jul 2024 21:35:38 +0200
Subject: [PATCH] change header

---
 assets/css/common/measurements.css            |  4 +-
 assets/css/elements/dropdown.css              | 39 +++++++++++++++++++
 assets/css/views/admin.css                    |  9 +++++
 assets/css/views/header.css                   |  7 ++--
 .../_header_navigation_staff.html.slime       |  4 +-
 5 files changed, 56 insertions(+), 7 deletions(-)

diff --git a/assets/css/common/measurements.css b/assets/css/common/measurements.css
index 81a7119c..d4cd5b03 100644
--- a/assets/css/common/measurements.css
+++ b/assets/css/common/measurements.css
@@ -22,8 +22,8 @@ $font-family-heading: $font-family-base;
   --block-header-height: 2rem;
 
   /* Navbar */
-  --navbar-size: 4rem;
-  --navbar-secondary-size: 2.25rem;
+  --navbar-size: 3rem;
+  --navbar-secondary-size: 2.5rem;
   --navbar-input-size: 2rem;
   --navbar-input-width: 18vw;
   --navbar-input-max-width: 22rem;
diff --git a/assets/css/elements/dropdown.css b/assets/css/elements/dropdown.css
index c7cb8f6a..53e556c6 100644
--- a/assets/css/elements/dropdown.css
+++ b/assets/css/elements/dropdown.css
@@ -1,3 +1,35 @@
+@define-mixin dropdown-type $type {
+  .dropdown--$(type) .dropdown__content {
+    background: var(--$(type)-muted-color);
+    border-color: var(--$(type)-border-color);
+  }
+
+  .dropdown--$(type) .dropdown__text {
+    background: var(--$(type)-muted-color);
+    border-color: var(--$(type)-border-color);
+  }
+
+  .dropdown--$(type) .dropdown__item:hover .dropdown__text {
+    background: var(--$(type)-color);
+  }
+  
+  .dropdown--$(type) .dropdown__icon {
+    background: var(--$(type)-dark-color);
+  }
+  
+  .dropdown--$(type) .dropdown__item:hover .dropdown__icon {
+    background: var(--$(type)-color);
+  }
+  
+  .dropdown--$(type) .dropdown__separator {
+    border-color: var(--$(type)-border-color);
+  }
+  
+  .dropdown--$(type) .dropdown__link:hover {
+    background: var(--$(type)-color);
+  }
+}
+
 .dropdown {
   position: relative;
   display: inline-block;
@@ -68,3 +100,10 @@
 .dropdown__link:hover {
   background: var(--primary-color);
 }
+
+@mixin dropdown-type secondary;
+@mixin dropdown-type success;
+@mixin dropdown-type warning;
+@mixin dropdown-type danger;
+@mixin dropdown-type information;
+@mixin dropdown-type special;
diff --git a/assets/css/views/admin.css b/assets/css/views/admin.css
index 25d18237..7cb54c65 100644
--- a/assets/css/views/admin.css
+++ b/assets/css/views/admin.css
@@ -2,6 +2,7 @@ nav.header__staff {
   display: flex;
   line-height: var(--navbar-secondary-size);
   border-radius: var(--border-radius-outer);
+  margin: auto;
 }
 
 .header__counter__admin {
@@ -25,6 +26,14 @@ nav.header__staff {
   border-radius: var(--border-radius-outer);
 }
 
+.header--secondary__admin-links .header__link {
+  color: var(--text-color) !important;
+}
+
+.header--secondary__admin-links .header__link:hover {
+  color: var(--danger-link-color) !important;
+}
+
 @mixin if-mobile {
   .header--secondary__admin-links {
     justify-content: center;
diff --git a/assets/css/views/header.css b/assets/css/views/header.css
index 96dc8cc7..87777c2c 100644
--- a/assets/css/views/header.css
+++ b/assets/css/views/header.css
@@ -5,12 +5,13 @@ header {
   font-size: var(--font-header-size);
   gap: var(--padding-large);
   align-items: center;
+  background: var(--primary-color);
 }
 
 .header__link {
   @mixin animated-transition;
   position: relative;
-  color: var(--text-color) !important;
+  color: var(--text-light-color) !important;
 }
 
 .header__link:hover {
@@ -58,6 +59,7 @@ header {
 }
 
 /* Old style counter */
+/* todo: remove */
 .header__counter--simple {
   display: inline-flex;
   padding: 0 var(--padding-small);
@@ -98,8 +100,8 @@ header {
 
 .nav-container {
   display: flex;
+  flex-flow: column;
   gap: var(--padding-normal);
-  padding: 0 var(--padding-normal);
   flex-wrap: wrap;
 }
 
@@ -107,7 +109,6 @@ nav.header__secondary {
   display: flex;
   flex: 1 0 auto;
   line-height: var(--navbar-secondary-size);
-  border-radius: var(--border-radius-outer);
   padding: 0 var(--padding-large);
   font-size: var(--font-header-size);
   gap: var(--padding-large);
diff --git a/lib/philomena_web/templates/layout/_header_navigation_staff.html.slime b/lib/philomena_web/templates/layout/_header_navigation_staff.html.slime
index 7b930042..bf5941f7 100644
--- a/lib/philomena_web/templates/layout/_header_navigation_staff.html.slime
+++ b/lib/philomena_web/templates/layout/_header_navigation_staff.html.slime
@@ -1,6 +1,6 @@
 .header--secondary__admin-links.js-staff-action
   = if manages_users?(@conn) do
-    .dropdown.hidden--mobile
+    .dropdown.dropdown--danger.hidden--mobile
       a.header__link title="Admin"
         i.fa.fa-bars>
         i.fa.fa-caret-down
@@ -108,7 +108,7 @@
         = @dnp_entry_count
 
   = if manages_bans?(@conn) do
-    .dropdown.hidden--mobile
+    .dropdown.dropdown--danger.hidden--mobile
       a.header__link title="Bans"
         i.fa.fa-gavel>
       span