From d8b9948cb57e3db049e12ed608a882b792afd9e8 Mon Sep 17 00:00:00 2001
From: ajdj100 <AJCampbell@conestogac.on.ca>
Date: Wed, 15 Nov 2023 16:40:05 -0500
Subject: [PATCH] Fixed issues with tailwind not extending default styles

---
 .../src/components/inputs/pingableTextBox.vue |  4 +-
 17th Website/src/forms/transferForm.vue       |  6 +--
 17th Website/tailwind.config.js               | 42 ++++++++++---------
 3 files changed, 27 insertions(+), 25 deletions(-)

diff --git a/17th Website/src/components/inputs/pingableTextBox.vue b/17th Website/src/components/inputs/pingableTextBox.vue
index 02e16cb..dcdeeb5 100644
--- a/17th Website/src/components/inputs/pingableTextBox.vue	
+++ b/17th Website/src/components/inputs/pingableTextBox.vue	
@@ -91,7 +91,7 @@ export default {
     <div class="relative">
         <input type="text" v-model="search" @input="onchange" @keydown.down="bumpDown" @keydown.up="bumpUp"
             @keydown.enter="select" @keydown.tab="select" :class="{}"
-            class="bg-gray-light rounded-md text-white"/>
+            class="bg-gray-light rounded-md text-white focus:outline-none p-1 px-2"/>
         <ul id="results" v-show="isOpen">
             <li class="result" v-for="(result, i) in results" :key="i" @click="setResult(result)"
                 :class="{ 'is-active': i === arrowCounter }">
@@ -122,7 +122,7 @@ export default {
 
 .result.is-active,
 .result:hover {
-    background-color: #4AAE9B;
+    background-color: #01bde7;
     color: white;
 }
 </style>
\ No newline at end of file
diff --git a/17th Website/src/forms/transferForm.vue b/17th Website/src/forms/transferForm.vue
index 2b8298c..a1e30dc 100644
--- a/17th Website/src/forms/transferForm.vue	
+++ b/17th Website/src/forms/transferForm.vue	
@@ -31,7 +31,7 @@ export default {
     <div class="bg-gray-dark rounded-xl max-w-4xl min-w-formWidth px-5">
         <h1 class="m-0">Unit Transfer</h1>
 
-        <div id="container mx-">
+        <div id="container" class="mx-auto">
             <div class="flex flex-row items-center">
                 <div id="from" class="flex flex-col items-center">
                     <img src="../components/icons/misc/test.png" class="h-40">
@@ -42,11 +42,11 @@ export default {
 
                 <div id="to" class="flex flex-col items-center">
                     <img src="../components/icons/misc/test.png" class="h-40">
-                    <p class="text-white text-3xl font-medium">Company</p>
+                    <Dropdown values="units"></Dropdown>
                 </div>
             </div>
         </div>
 
-        <Dropdown values="units"></Dropdown>
+        
     </div>
 </template>
\ No newline at end of file
diff --git a/17th Website/tailwind.config.js b/17th Website/tailwind.config.js
index 34c67af..660de61 100644
--- a/17th Website/tailwind.config.js	
+++ b/17th Website/tailwind.config.js	
@@ -6,29 +6,31 @@ module.exports = {
   ],
   darkMode: true,
   theme: {
-    colors: {
-      'transparent' : 'transparent',
-      'white': '#EDF2F4',
-      'blue': '#01bde7',
-      'gray-dark': '#1C1C21',
-      'gray-light': '#272731'
+    extend: {
+      colors: {
+        'transparent': 'transparent',
+        'white': '#EDF2F4',
+        'blue': '#01bde7',
+        'gray-dark': '#1C1C21',
+        'gray-light': '#272731'
 
+      },
+      screens: {
+        'sm': '640px',
+
+        'md': '768px',
+
+        'lg': '1024px',
+
+        'xl': '1376px',
+
+        '2xl': '1536px',
+      },
+      minWidth: {
+        'formWidth': '768px',
+      },
     },
-    screens: {
-      'sm': '640px',
 
-      'md': '768px',
-
-      'lg': '1024px',
-
-      'xl': '1376px',
-
-      '2xl': '1536px',
-    },
-    minWidth: {
-      'formWidth': '768px',
-    },
-    extend: {},
   },
   plugins: [],
 }