Finally I fixed the god damn navbar, tailwind to the rescue

17th Website/src/assets/main.css

@@ -1,23 +0,0 @@
-@import './base.css';
-
-#app {
-  /* max-width: 1280px; */
-  /* margin: 0 auto;
-  padding: 2rem; */
-
-  /* font-weight: normal; */
-}
-
-
-/* @media (min-width: 1024px) {
-  body {
-    display: flex;
-    place-items: center;
-  }
-
-  #app {
-    display: grid;
-    grid-template-columns: 1fr 1fr;
-    padding: 0 2rem;
-  }
-} */

17th Website/src/components/navigation/Navbar.vue

@@ -25,7 +25,7 @@ export default {
 
         <!-- TODO: Connect these buttons to the scripts, figure out if I can turn this into a component or summ -->
         <navitem icon="carbon:user" link="/profile" @click="setActive('#user')" :active="activeButton === '#user'" />
-        <hr>
+        <hr class="text-white">
         <navitem icon="carbon:home" link="/" @click="setActive('#home')" :active="activeButton === '#home'" />
         <navitem icon="carbon:events" link="/users" @click="setActive('#users')" :active="activeButton === '#users'"/>
         <navitem icon="carbon:align-box-bottom-left" link="#" @click="setActive('#docs')"  :active="activeButton === '#docs'"/>

17th Website/src/components/navigation/navitem.vue

@@ -35,23 +35,25 @@ export default {
 </script>
 
 <template>
+    <div class="aspect-square flex items-center place-content-center">
         <RouterLink :to="link" class="button" :class="{ active: active }">
             <Icon :icon="icon" />
         </RouterLink>
+    </div>
 </template>
 
 
 <style scoped>
 .button {
     color: var(--white);
-    font-size: 30px;
+    font-size: 35px;
-    overflow: hidden;
+    /* overflow: hidden; */
-    height: 40px;
+    /* height: 40px; */
     display: flex;
     align-items: center;
     justify-content: center;
-    margin: 10px 10px;
+    margin: 10px;
-    padding: 5px;
+    padding: 10px;
     transition: color 0.2s ease-in-out;
 }
 

17th Website/src/main.js

@@ -1,4 +1,5 @@
-import './assets/main.css'
+// import './assets/main.css'
+import './style.css'
 
 import { createApp } from 'vue'
 import App from './App.vue'

17th Website/src/views/users.vue

@@ -74,19 +74,25 @@ export default {
                 </select>
 
                 <Listbox v-model="unitFilter">
-                    <ListboxButton class="lbButton">
+                    <div class="relative">
+                        <ListboxButton class="bg-gray-dark text-white px-5 rounded-md hover:bg-blue transition-all">
                             {{ unitFilter.name }}
-                        <Icon icon="carbon:caret-down" />
+                            <!-- <Icon icon="carbon:caret-down" /> -->
                         </ListboxButton>
-                    <ListboxOptions class="lbOptions">
+                        <ListboxOptions class="bg-gray-dark last:rounded-b-md fixed text-white">
-                        <ListboxOption v-for="unit in unitFilters" :key="unit.id" :value="unit" :disabled="unit.disabled">
+                            <ListboxOption v-for="unit in unitFilters" :key="unit.id" :value="unit"
+                                :disabled="unit.disabled" v-slot="{ active, selected }" class="ui-active:text-white">
+                                <li :class="{ 'bg-blue': active }">
                                     {{ unit.name }}
+                                </li>
                             </ListboxOption>
                         </ListboxOptions>
+                    </div>
                 </Listbox>
 
                 <!-- This button needs to get finished -->
-                <button @click="resetFilters()">Clear Filters</button>
+                <button @click="resetFilters()"
+                    class="bg-gray-dark hover:bg-blue text-white transition-colors duration-0.5s">Clear Filters</button>
             </div>
         </div>
 
@@ -113,9 +119,6 @@ export default {
 </template>
 
 <style>
-@import '../assets/base.css';
-
-
 .lbButton {
     background-color: var(--background-secondary);
     border: none;
@@ -128,14 +131,14 @@ export default {
     position: absolute;
 }
 
-button {
+/* button {
     transition: all 0.2s ease-out;
     cursor: pointer;
 }
 
 button:hover {
     background-color: var(--accent-primary);
-}
+} */
 
 .clicked {
     filter: brightness(85%)

17th Website/tailwind.config.js

@@ -4,7 +4,15 @@ module.exports = {
     "./index.html",
     "./src/**/*.{vue,js,ts,jsx,tsx}",
   ],
+  darkMode: true,
   theme: {
+    colors: {
+      'white': '#EDF2F4',
+      'blue': '#01bde7',
+      'gray-dark': '#1C1C21',
+      'gray-light': '#272731'
+
+    },
     extend: {},
   },
   plugins: [],