From b649a8343d00b4bc77cca5bdf0ab7a48837af567 Mon Sep 17 00:00:00 2001
From: Alessio Gravili <alessio@gravili.de>
Date: Sun, 20 Feb 2022 19:57:08 +0100
Subject: [PATCH] Improve header style on mobile

---
 frontend-new/src/components/Header.vue | 12 ++++++------
 frontend-new/src/styles/main.css       |  7 ++++++-
 frontend-new/windi.config.ts           |  3 +++
 3 files changed, 15 insertions(+), 7 deletions(-)

diff --git a/frontend-new/src/components/Header.vue b/frontend-new/src/components/Header.vue
index f72ee417f..925540c5d 100644
--- a/frontend-new/src/components/Header.vue
+++ b/frontend-new/src/components/Header.vue
@@ -24,16 +24,16 @@ const navBarLinks = [
     <template v-if="announcements">
         <Announcement v-for="(announcement, idx) in announcements" :key="idx" :announcement="announcement" />
     </template>
-    <header class="bg-white">
-        <div class="inner-header flex items-center max-w-1200px mx-auto justify-between">
+    <header class="bg-white dark:bg-headerDark">
+        <div class="inner-header flex items-center max-w-1200px mx-auto justify-between h-65px w-[calc(100%-40px)]">
             <div class="logo-and-nav flex items-center">
                 <button class="flex mr-4">
                     <icon-mdi-menu style="font-size: 1.2em;"/>
                 </button>
 
 
-                <div class="site-logo mr-4 h-60px">
-                    <img alt="Hangar Logo" src="/logo.svg" class="h-60px"/>
+                <div class="site-logo mr-4 h-60px flex items-center">
+                    <img alt="Hangar Logo" src="/logo.svg" class="h-50px"/>
                 </div>
                 <nav class="flex gap-3">
                     <router-link
@@ -47,8 +47,8 @@ const navBarLinks = [
                 </nav>
             </div>
 
-            <div class="login-buttons flex gap-2 dark:bg-gray-500">
-                <button @click="theme.toggleDarkMode()">
+            <div class="login-buttons flex gap-2 items-center">
+                <button class="flex" @click="theme.toggleDarkMode()">
                     <icon-mdi-weather-night v-if="theme.darkMode" style="font-size: 1.2em;"></icon-mdi-weather-night>
                     <icon-mdi-white-balance-sunny v-else style="font-size: 1.2em;"></icon-mdi-white-balance-sunny>
                 </button>
diff --git a/frontend-new/src/styles/main.css b/frontend-new/src/styles/main.css
index 2d9e22e34..9af6c7efe 100644
--- a/frontend-new/src/styles/main.css
+++ b/frontend-new/src/styles/main.css
@@ -19,10 +19,15 @@
 
 body {
     background-color: #f8faff;
+    color: #262626;
+}
+
+.dark body {
+    background-color: #181a1b;
+    color: #E0E6f0;
 }
 
 html {
     font-family: -apple-system,BlinkMacSystemFont,'Segoe UI','Oxygen','Ubuntu','Cantarell','Fira Sans','Droid Sans','Helvetica Neue',sans-serif;
     font-weight: 400;
-    color: #262626;
 }
diff --git a/frontend-new/windi.config.ts b/frontend-new/windi.config.ts
index 87da0f99e..dad71d06d 100644
--- a/frontend-new/windi.config.ts
+++ b/frontend-new/windi.config.ts
@@ -34,6 +34,9 @@ export default defineConfig({
           },
         },
       },
+      colors: {
+        headerDark: '#111111',
+      },
     },
   },
 });