From 163ef18f55305fb5cacf1e8f501502f432e9e9c6 Mon Sep 17 00:00:00 2001
From: Ethan <Pradhan751957@gmail.com>
Date: Thu, 4 Apr 2024 14:14:05 -0500
Subject: [PATCH] Tailwind fixes

---
 src/routes/login/+page.svelte | 37 +++++++++++++++++++++++------------
 1 file changed, 24 insertions(+), 13 deletions(-)

diff --git a/src/routes/login/+page.svelte b/src/routes/login/+page.svelte
index 9ea484f..595b50a 100644
--- a/src/routes/login/+page.svelte
+++ b/src/routes/login/+page.svelte
@@ -1,27 +1,38 @@
-<div class="grid  grid-cols-1  justify-items-center place-content-center font-inter h-screen" >
+<style lang="postcss">
+    .base{
+        @apply grid  grid-cols-1  justify-items-center place-content-center font-inter h-screen
+    }
+    .login_button {
+        @apply bg-transparent my-3 text-black font-semibold py-2 px-4 border border-black rounded flex items-center justify-center sm:w-1/3 w-1/2 p-5 hover:bg-slate-600 hover:text-white
+    }
+    .text_div {
+        @apply my-5 flex flex-row items-center text-base sm:w-1/3 w-1/2 before:bg-black before:m-2 before:content-[''] before:p-px before:flex-1 after:bg-black after:m-2 after:content-[''] after:p-px after:flex-1
+    }
+    .email_input {
+        @apply bg-transparent my-3 sm:text-xl text-base border p-3  border-black rounded-lg w-5/12 focus:ring-blue-500 focus:border-blue-500  
+    }
+</style>
+
+
+<div class="base" >
     <h1 class="text-4xl my-5">Welcome to Mind Palace</h1>
-    <p class="text-2xl  mb-8">To get started, sign in with Google or Github</p>
+    <p class="text-2xl  mb-8 text-center">To get started, sign in with Google or Github</p>
 
-    <button class="bg-transparent  text-left my-2 text-black font-semibold py-2 px-4 border border-black rounded inline-flex items-center w-1/2 max-h-16">
-        <svg class="w-1/2 h-1/2 me-2" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
+    <button class="login_button">
+        <svg class="w-8 h-8 me-2 px-1" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
             <path fill-rule="evenodd" d="M8.842 18.083a8.8 8.8 0 0 1-8.65-8.948 8.841 8.841 0 0 1 8.8-8.652h.153a8.464 8.464 0 0 1 5.7 2.257l-2.193 2.038A5.27 5.27 0 0 0 9.09 3.4a5.882 5.882 0 0 0-.2 11.76h.124a5.091 5.091 0 0 0 5.248-4.057L14.3 11H9V8h8.34c.066.543.095 1.09.088 1.636-.086 5.053-3.463 8.449-8.4 8.449l-.186-.002Z" clip-rule="evenodd"/>
         </svg>
         Login with Google
     </button>
-    <button class="bg-transparent text-left my-2 text-black font-semibold py-2 px-4 border border-black rounded inline-flex items-center w-1/2 max-h-16">
-        <svg class="w-1/2 h-1/2 me-2" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
+    <button class="login_button ">
+        <svg class="w-8 h-8 me-2 px-1" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
             <path fill-rule="evenodd" d="M10 .333A9.911 9.911 0 0 0 6.866 19.65c.5.092.678-.215.678-.477 0-.237-.01-1.017-.014-1.845-2.757.6-3.338-1.169-3.338-1.169a2.627 2.627 0 0 0-1.1-1.451c-.9-.615.07-.6.07-.6a2.084 2.084 0 0 1 1.518 1.021 2.11 2.11 0 0 0 2.884.823c.044-.503.268-.973.63-1.325-2.2-.25-4.516-1.1-4.516-4.9A3.832 3.832 0 0 1 4.7 7.068a3.56 3.56 0 0 1 .095-2.623s.832-.266 2.726 1.016a9.409 9.409 0 0 1 4.962 0c1.89-1.282 2.717-1.016 2.717-1.016.366.83.402 1.768.1 2.623a3.827 3.827 0 0 1 1.02 2.659c0 3.807-2.319 4.644-4.525 4.889a2.366 2.366 0 0 1 .673 1.834c0 1.326-.012 2.394-.012 2.72 0 .263.18.572.681.475A9.911 9.911 0 0 0 10 .333Z" clip-rule="evenodd"/>
         </svg>
     Login with Github
     </button>
 
-    <p class="flex flex-row items-center text-m w-1/3 before:bg-black before:m-2 before:content-[''] before:p-px before:flex-1 after:bg-black after:m-2 after:content-[''] after:p-px after:flex-1"> or log in with email</p>
+    <p class="text_div"> or log in with email</p>
 
-    <input type="text" placeholder="Type your email here..." class="bg-transparent text-xl border border-black rounded-lg w-1/2 focus:ring-blue-500 focus:border-blue-500">
-    <div class="flex flex-row space-x-4 justify-around text-blue-500 underline">
-        <a href="/app">Sign up</a>
-        <a href="/app">Forgot email?</a>
-        <a href="/app">Forgot password?</a>
-    </div>
+    <input type="text" placeholder="Type your email here..." class="email_input">
 </div>