Merge pull request #92 from UTDallasEPICS/dev/surya/issue-87

Completed the UI for setting the username

components/LogInOverlay.vue

@@ -1,13 +1,14 @@
 <template>
-<div class="fixed w-full h-full inset-0 bg-black bg-opacity-80 flex" style="z-index: 2;">
-    <div class="w-min h-min rounded-lg p-2 bg-white" style="margin: auto;">
+<div class="fixed w-full h-full inset-0 backdrop-blur bg-black bg-opacity-25 flex" style="z-index: 2;">
+    <div class="rounded-lg p-2 bg-white border-black border-2" style="margin: auto; width: 35%; height: 75%;">
         <div class="w-min h-min text-black" style="margin-left: auto;">
-            <p class="cursor-pointer" @click="emitClose">X</p>
+            <p class="cursor-pointer" @click="emitClose" style="color: black; font-size: 24px;">X</p>
         </div>
-        <p class="text-black">Log In</p>
+        <p class="text-black font-black text-lg text-center" style="font-family: Inter; color: #154734; margin-top: 10%; margin-bottom: 3%;">Set Username</p>
         <form @submit.prevent="handleSubmit">
-            <label class="text-black">Username</label>
-            <input class="text-black border-2 border-black" type="text" v-model="username" required>
+            <label class="font-semibold text-lg block" style="font-family: Inter; color: #777070;margin-left:14.5%; letter-spacing: 1.5px;">USERNAME</label>
+            <input class="text-black border-2 border-black p-5 block font-semibold text-sm" placeholder="Enter username here" style="border-radius: 20px; border-color: #B6B6B6; width: 80%; margin-left: 10.5%; letter-spacing: 1.5px; font-family: Inter;;" type="text" v-model="username" required>  
+            <button class="text-white border p-4 font-semibold text-lg tracking-widest" style="background-color: #E87500; border-radius: 20px; width: 65%; margin-left: 17%; margin-top: 5%; font-family: Inter;">Set Username</button> 
         </form>
     </div>
 </div>
@@ -23,4 +24,8 @@ const emit = defineEmits(['closeLogInOverlay'])
 const emitClose = () => {
     emit('closeLogInOverlay')
 }
-</script>
+</script>
+
+<style>
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap');
+</style>