fix login form height & footer

ulf-frostypaw · Feb 28, 2023 · 1120522 · 1120522
1 parent f145d1b
commit 1120522
Show file tree

Hide file tree

Showing 3 changed files with 44 additions and 46 deletions.
diff --git a/website/components/Login/LoginForm.vue b/website/components/Login/LoginForm.vue
@@ -4,55 +4,56 @@ const password = ref("")
 </script>
 
 <template>
-  <form class="form-container">
-    <div class="field f-username">
-      <label for="username" :class="['form-label', username.length > 0 ? 'block' : 'invisible']">Username/Email</label>
-      <input name="username" type="username" class="form-textbox" v-model="username" placeholder="Username/Email" />
-    </div>
-    <div class="field f-password">
-      <label for="password" class="form-label">Password</label>
-      <input name="password" class="form-textbox" type="password" placeholder="Password" v-model="password" />
-      <NuxtLink to="#">Forgot password?</NuxtLink>
-    </div>
-    <div class="flex flex-col items-center w-full text-center buttons">
-      <NuxtLink to="#" class="submit-button">Submit</NuxtLink>
-    </div>
-  </form>
+	<form class="form-container">
+		<div class="field">
+			<label
+				for="username"
+				:class="['form-label', username.length > 0 ? 'block' : 'invisible']"
+				>Username/Email</label
+			>
+			<input
+				name="username"
+				type="username"
+				class="form-textbox"
+				v-model="username"
+				placeholder="Username/Email"
+			/>
+		</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"
+			/>
+			<NuxtLink to="#">Forgot password?</NuxtLink>
+		</div>
+		<div class="flex flex-col items-center w-full text-center buttons">
+			<NuxtLink to="#" class="submit-button">Submit</NuxtLink>
+		</div>
+	</form>
 </template>
 
 <style lang="scss" scoped>
 .form-container {
-  @apply grid w-1/2 h-1/6 place-items-center m-auto gap-y-1;
-  grid-template-areas:
-    "username"
-    "password"
-    "submit";
-}
-
-.f {
-  &-username {
-    grid-area: username;
-  }
-
-  &-password {
-    grid-area: password;
-  }
+	@apply grid w-1/2 place-items-center m-auto gap-y-1;
 }
 
 .submit-button {
-  grid-area: submit;
-  @apply w-full py-3 bg-blue-400 flex px-4 text-center;
+	@apply w-full py-3 hover:bg-blue-600 flex px-4 text-center rounded-3xl border border-base-200 justify-center font-inter font-semibold;
 }
 
 .field {
-  @apply w-full flex flex-col relative py-6;
+	@apply w-full flex flex-col relative py-6;
 }
 
 .form-label {
-  @apply absolute -top-4 text-base-500 font-inter uppercase font-bold opacity-75;
+	@apply absolute -top-4 text-base-500 font-inter uppercase font-bold opacity-75;
 }
 
 .form-textbox {
-  @apply px-4 py-3 text-white border-none outline-none rounded-md bg-base-800;
+	@apply px-4 py-3 text-white border-none outline-none rounded-md bg-base-800;
 }
 </style>
diff --git a/website/components/TheBaseFooter.vue b/website/components/TheBaseFooter.vue
@@ -1,7 +1,6 @@
 <script setup lang="ts">
 const links = [
 	{ link: "/about", text: "About" },
-	{ link: "#", text: "Terms" },
 	{ link: "#", text: "Legal" },
 	{ link: "#", text: "Privacy" },
 	{ link: "#", text: "API" },
@@ -21,23 +20,21 @@ const copyrightText = `© 2022-${currentYear} The MyFursona Project - MIT Licens
 			</NuxtLink>
 		</div>
 		<div
-			class="flex items-center gap-8 pt-10 pb-12 mx-auto mt-12 text-sm px-14 max-w-screen-2xl"
+			class="flex items-center flex-shrink-0 gap-8 pt-10 pb-12 mx-auto mt-12 text-sm px-14 max-w-screen-2xl"
 		>
-			<ul class="grid w-full grid-flow-col border-r border-base-500">
+			<ul
+				class="grid w-full grid-flow-col text-center border-r border-base-500"
+			>
 				<li v-for="items in links">
 					<NuxtLink
 						:to="items.link"
-						class="flex-shrink-0 text-opacity-50 transition-colors whitespace-nowrap hover:text-opacity-100 text-base-50 hover:text-base-100"
+						class="text-opacity-50 transition-colors whitespace-nowrap hover:text-opacity-100 text-base-50 hover:text-base-100"
 					>
 						{{ items.text }}
 					</NuxtLink>
 				</li>
 			</ul>
-			<div id="copyright">
-				<span class="text-opacity-50 text-base-50">
-					{{ copyrightText }}
-				</span>
-			</div>
+			<div id="copyright">{{ copyrightText }}</div>
 		</div>
 	</footer>
 </template>
@@ -62,6 +59,6 @@ const copyrightText = `© 2022-${currentYear} The MyFursona Project - MIT Licens
 }
 
 #copyright {
-	@apply flex gap-2.5 items-center flex-shrink-0;
+	@apply flex gap-2.5 items-center flex-shrink-0 text-opacity-50 text-base-50;
 }
 </style>
diff --git a/website/components/TheBaseNavbar.vue b/website/components/TheBaseNavbar.vue
@@ -82,7 +82,7 @@ onMounted(() => {
 	transition-duration: 300ms;
 
 	&.scrolled {
-		@apply backdrop-blur-md bg-opacity-75  border-base-500 bg-base-800;
+		@apply backdrop-blur-md bg-opacity-50  border-base-500 bg-base-800;
 	}
 }
 
@@ -99,7 +99,7 @@ onMounted(() => {
 }
 
 .navbar-sticky.scrolled input {
-  @apply border-base-600;
+	@apply border-base-600;
 }
 
 .search-input {