chore: added app navbar; adjusted colors and global styles

src/App.vue

@@ -1,16 +1,19 @@
 <template>
-  <div id="app_wrapper">
+  <div>
     <transition name="slide-anim">
       <UpdateCard />
     </transition>
 
-    <RouterView />
-
     <transition name="slide-anim">
       <UpdatePrompt />
     </transition>
 
-    <AppFooter :version="appVersion" />
+    <div class="app-body">
+      <AppNavbar />
+      <main>
+        <RouterView />
+      </main>
+    </div>
   </div>
 </template>
 
@@ -25,11 +28,12 @@ import StorageManager from './managers/storageManager';
 import axios from 'axios';
 import UpdatePrompt from './components/Global/UpdatePrompt.vue';
 import AppFooter from './components/App/AppFooter.vue';
+import AppNavbar from './components/App/AppNavbar.vue';
 
 const STORAGE_VERSION_KEY = 'app_version';
 
 export default defineComponent({
-  components: { UpdateCard, UpdatePrompt, AppFooter },
+  components: { UpdateCard, UpdatePrompt, AppFooter, AppNavbar },
 
   mixins: [orderStorageMixin],
 
@@ -121,7 +125,6 @@ export default defineComponent({
 
 #app {
   color: white;
-
   min-height: 100vh;
 }
 

src/components/App/AppNavbar.vue

@@ -1,7 +1,61 @@
 <template>
-  <div></div>
+  <nav class="app-navbar">
+    <div class="navbar-brand">
+      <img src="/favicon.ico" alt="generator logo" width="30" />
+      <b>
+        GeneraTOR <sup>v{{ version }}</sup>
+      </b>
+    </div>
+
+    <div class="navbar-actions">
+      <button class="g-button action icon">
+        <LucideGlobe :size="20" />
+        <span>POL</span>
+      </button>
+
+      <button class="g-button action icon">
+        <LucideMoon :size="20" />
+      </button>
+    </div>
+  </nav>
 </template>
 
-<script setup lang="ts"></script>
+<script setup lang="ts">
+import { LucideGlobe, LucideMoon } from 'lucide-vue-next';
+import { version } from '../../../package.json';
+</script>
 
-<style scoped></style>
+<style lang="scss" scoped>
+.app-navbar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+
+  width: 100%;
+  height: 40px;
+  padding: 0.25em;
+  background-color: #1c1c1c;
+}
+
+.navbar-brand {
+  display: flex;
+  align-items: center;
+  gap: 0.5em;
+
+  sup {
+    font-size: 0.75em;
+  }
+}
+
+.navbar-actions {
+  display: flex;
+  align-items: center;
+  gap: 0.5em;
+
+  button {
+    padding: 0.5em;
+    gap: 0.25em;
+    border-radius: 0.5em;
+  }
+}
+</style>

src/styles/_colors.scss

@@ -1,4 +1,4 @@
-$bgCol: #141414;
+$bgCol: #0e0e0e;
 $bgColLighter: #292929;
 $bgColDarker: #080808;
 $accentCol: #ff6060;

src/styles/_global.scss

@@ -1,5 +1,6 @@
 @use 'fonts';
 @use 'colors';
+@use 'sass:color';
 
 // Global scrollbar style
 ::-webkit-scrollbar {
@@ -76,7 +77,7 @@ button.g-button {
     }
 
     &:hover:not([data-disabled='true']) {
-      background-color: colors.$bgColLighter;
+      background-color: color.adjust(colors.$bgColDarker, $lightness: 15%);
     }
   }
 
@@ -112,6 +113,10 @@ button.g-button {
     display: flex;
     justify-content: center;
     align-items: center;
+
+    &:focus-visible {
+      outline: 1px solid white;
+    }
   }
 }
 

src/styles/_order.scss

@@ -6,7 +6,7 @@ $darkModeTextCol: #eee;
   width: 100%;
   background-color: white;
   color: black;
-  max-height: 95vh;
+  height: 100%;
   overflow: auto;
 
   &.dark {

src/views/Home.vue

@@ -1,6 +1,4 @@
 <template>
-  <!-- <OrderHelper v-if="store.helperModalOpen" /> -->
-
   <div class="home">
     <div class="home_container">
       <div class="order_container">
@@ -110,7 +108,6 @@ export default defineComponent({
 @use '../styles/colors';
 
 .home {
-  min-height: 100vh;
   overflow-x: auto;
 
   display: flex;
@@ -125,18 +122,22 @@ export default defineComponent({
   flex-wrap: wrap;
   justify-content: center;
   gap: 2em 1em;
-  padding: 0.5em;
+  padding: 1em;
 
   width: 100%;
 
+  & > div {
+    max-height: calc(100vh - 5em);
+    overflow: auto;
+  }
+
   @media screen and (max-width: 650px) {
     padding: 1em 0.5em;
   }
 }
 
 .order_container {
-  width: 800px;
+  max-width: 800px;
-  overflow: auto;
 
   display: flex;
   align-items: start;
@@ -147,16 +148,11 @@ export default defineComponent({
 }
 
 .message_container {
+  width: 500px;
   padding: 2px;
 
-  width: 100%;
-  max-width: 500px;
-
   display: grid;
   grid-template-rows: auto auto 1fr;
-
-  height: 95vh;
-  overflow: auto;
 }
 
 .message_nav {