From 0f13944eb4d256695af90946bc239171be0649f2 Mon Sep 17 00:00:00 2001
From: ajdj100 <AJCampbell@conestogac.on.ca>
Date: Wed, 24 May 2023 07:24:31 -0400
Subject: [PATCH] Finally I fixed the god damn navbar, tailwind to the rescue

---
 17th Website/src/assets/main.css              | 23 -------------
 .../src/components/navigation/Navbar.vue      |  2 +-
 .../src/components/navigation/navitem.vue     | 18 +++++-----
 17th Website/src/main.js                      |  3 +-
 .../src/{assets/base.css => style.css}        |  0
 17th Website/src/views/users.vue              | 33 ++++++++++---------
 17th Website/tailwind.config.js               |  8 +++++
 7 files changed, 39 insertions(+), 48 deletions(-)
 delete mode 100644 17th Website/src/assets/main.css
 rename 17th Website/src/{assets/base.css => style.css} (100%)

diff --git a/17th Website/src/assets/main.css b/17th Website/src/assets/main.css
deleted file mode 100644
index 7e29a0a..0000000
--- a/17th Website/src/assets/main.css	
+++ /dev/null
@@ -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;
-  }
-} */
diff --git a/17th Website/src/components/navigation/Navbar.vue b/17th Website/src/components/navigation/Navbar.vue
index 5a6ffab..8dc57f2 100644
--- a/17th Website/src/components/navigation/Navbar.vue	
+++ b/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'"/>
diff --git a/17th Website/src/components/navigation/navitem.vue b/17th Website/src/components/navigation/navitem.vue
index ae88817..374e3fa 100644
--- a/17th Website/src/components/navigation/navitem.vue	
+++ b/17th Website/src/components/navigation/navitem.vue	
@@ -35,23 +35,25 @@ export default {
 </script>
 
 <template>
-    <RouterLink :to="link" class="button" :class="{active: active}">
-        <Icon :icon="icon" />
-    </RouterLink>
+    <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;
-    overflow: hidden;
-    height: 40px;
+    font-size: 35px;
+    /* overflow: hidden; */
+    /* height: 40px; */
     display: flex;
     align-items: center;
     justify-content: center;
-    margin: 10px 10px;
-    padding: 5px;
+    margin: 10px;
+    padding: 10px;
     transition: color 0.2s ease-in-out;
 }
 
diff --git a/17th Website/src/main.js b/17th Website/src/main.js
index c7a852f..b16dcfb 100644
--- a/17th Website/src/main.js	
+++ b/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'
diff --git a/17th Website/src/assets/base.css b/17th Website/src/style.css
similarity index 100%
rename from 17th Website/src/assets/base.css
rename to 17th Website/src/style.css
diff --git a/17th Website/src/views/users.vue b/17th Website/src/views/users.vue
index 3fa11f1..1413fdd 100644
--- a/17th Website/src/views/users.vue	
+++ b/17th Website/src/views/users.vue	
@@ -74,19 +74,25 @@ export default {
                 </select>
 
                 <Listbox v-model="unitFilter">
-                    <ListboxButton class="lbButton">
-                        {{ unitFilter.name }}
-                        <Icon icon="carbon:caret-down" />
-                    </ListboxButton>
-                    <ListboxOptions class="lbOptions">
-                        <ListboxOption v-for="unit in unitFilters" :key="unit.id" :value="unit" :disabled="unit.disabled">
-                            {{ unit.name }}
-                        </ListboxOption>
-                    </ListboxOptions>
+                    <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" /> -->
+                        </ListboxButton>
+                        <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" 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%)
diff --git a/17th Website/tailwind.config.js b/17th Website/tailwind.config.js
index 55d1fb9..3c42481 100644
--- a/17th Website/tailwind.config.js	
+++ b/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: [],