From 4d13171644e7b9ad4d155f26aac85787c13d4f66 Mon Sep 17 00:00:00 2001
From: Kerby Keith Aquino <skepfoosky15@gmail.com>
Date: Mon, 13 Feb 2023 10:07:28 +0800
Subject: [PATCH] fix login form UI lol

---
 website/components/Landing/LandingThird.vue |  2 +-
 website/components/Login/LoginForm.vue      | 66 +++++++++++++++------
 website/pages/login.vue                     |  4 --
 3 files changed, 50 insertions(+), 22 deletions(-)

diff --git a/website/components/Landing/LandingThird.vue b/website/components/Landing/LandingThird.vue
index fc94ef59..6a433e08 100644
--- a/website/components/Landing/LandingThird.vue
+++ b/website/components/Landing/LandingThird.vue
@@ -45,7 +45,7 @@ onMounted(() => {
 </script>
 
 <template>
-	<section class="h-screen px-12">
+	<section class="px-12">
 		<h1 class="my-6 mt-[6.5rem] text-5xl font-bold text-center font-inter">
 			You're in control
 		</h1>
diff --git a/website/components/Login/LoginForm.vue b/website/components/Login/LoginForm.vue
index 117cf6b9..95dc501a 100644
--- a/website/components/Login/LoginForm.vue
+++ b/website/components/Login/LoginForm.vue
@@ -1,21 +1,53 @@
-
-<template>
-  <form class="w-3/6 p-48 m-auto">
-    <div class="flex flex-col relative my-3">
-      <label for="username" class="hidden absolute top-[-33px] text-white  ">Username</label>
-      <input name="username" id="username" type="username" class="text-black px-3 py-2 outline-none border-none"
-        v-model="username" placeholder="Username" />
-    </div>
-    <div class="flex flex-col bg-transparent border border-solid border-[#1834c9]">
-      <label for="password" class="peer-placeholder-shown:block ">Password</label>
-      <input name="password" id="password" class="peer text-black" type="password" placeholder="Password"
-        v-model="password" />
-    </div>
-  </form>
-</template> 
 <script lang="tsx" setup>
-import { ref } from 'vue'
 const username = ref("")
 const password = ref("")
-
 </script>
+
+<template>
+  <div>
+
+  </div>
+	<form class="form-container">
+		<div class="field">
+			<label for="username" class="form-label">Username</label>
+			<input
+				name="username"
+				type="username"
+				class="form-textbox"
+				v-model="username"
+				placeholder="Username"
+			/>
+		</div>
+		<div
+			class="field"
+		>
+			<label for="password" class="form-label">Password</label>
+			<input
+				name="password"
+				class="form-textbox"
+				type="password"
+				placeholder="Password"
+				v-model="password"
+			/>
+		</div>
+	</form>
+</template>
+
+<style lang="scss" scoped>
+.form-container {
+  @apply flex flex-col justify-center w-3/6 h-screen m-auto gap-y-3;
+}
+
+.field {
+  @apply flex flex-col relative py-4;
+}
+
+.form-label {
+  @apply absolute -top-4 text-white font-inter uppercase font-bold;
+}
+
+.form-textbox {
+	@apply px-3 py-2 text-black border-none outline-none rounded-md bg-zinc-800;
+}
+
+</style>
diff --git a/website/pages/login.vue b/website/pages/login.vue
index 396c67c6..067ca3f9 100644
--- a/website/pages/login.vue
+++ b/website/pages/login.vue
@@ -1,7 +1,3 @@
-<script setup lang="ts">
-import Form from '~~/components/Landing/Login/Form.vue';
-</script>
-
 <template>
   <Container title="MyFursona | Login" class="login-wrapper">
     <LoginForm />