Update header styles with a cohesive color scheme

Revised the header component's CSS to utilize a consistent color palette centered around #2D3E50 and related shades for elements and hover effects. This change improves the visual coherence of the navbar and enhances readability by adjusting text colors to better contrast with the new background tones.
nfdi4plants · Dec 3, 2024 · 9e6bdf6 · 9e6bdf6
1 parent abff9b5
commit 9e6bdf6
Showing 1 changed file with 13 additions and 7 deletions.
diff --git a/archigator/src/app/header/header.component.css b/archigator/src/app/header/header.component.css
@@ -1,14 +1,16 @@
 .navbar-padding {
-    padding-top: 53px;
-    background-color: white;
+    /*padding-top: 53px;*/
+    background-color: #2D3E50;
 }
 
-back-button {
-    color: grey;
+.back-button {
+    color: #1fc2a7;
+    background: #1fc2a7;
 }
 
-back-button:hover {
-    color: blue;
+.back-button:hover {
+    color: #1fc2c4;
+    background: #19a891;
 }
 
 
@@ -139,7 +141,9 @@ header {
 }
 
 .dropdown-content {
-    background-color: #f5f5f5;
+    /*background-color: #f5f5f5;*/
+    background-color: #2d3e50;
+    color:white;
 }
 
 .back-button .icon {
@@ -149,12 +153,14 @@ header {
 .custom-navbar {
     /*height:60px;*/
     z-index: 9;
+    background-color: #2D3E50;
 }
 
 .navbar-title {
     font-size: 20px;
     font-weight: 600;
     white-space: nowrap; /* Prevent the title from wrapping to a new line */
+    color:white;
 }
 
 .navbar-item-content {