Improve login form UI

SebKay · SebKay · commit ea59e2f841d9 · 2025-01-02T10:07:02.000Z
diff --git a/resources/css/forms.css b/resources/css/forms.css
@@ -18,7 +18,7 @@
     }
 
     .label {
-        @apply pb-3 block text-base font-medium;
+        @apply pb-3 block text-sm sm:text-base font-medium;
     }
 
     .small-label {
diff --git a/resources/js/Pages/Login/Show.vue b/resources/js/Pages/Login/Show.vue
@@ -3,7 +3,10 @@
     <Head :title="title" />
 
     <div class="mx-auto max-w-2xl">
-        <PageTitle class="mb-4 xl:mb-8" :text="title" />
+        <PageTitle
+            class="mb-4 xl:mb-8"
+            :text="title"
+        />
 
         <div class="bg-white rounded-2xl xl:p-10 p-6 border border-brand-200">
             <form @submit.prevent="submitForm">
@@ -26,10 +29,15 @@
 
                     <div class="form-col">
                         <label
-                            class="label"
+                            class="label flex justify-between"
                             for="password"
                         >
                             Password
+                            <Link
+                                class="underline hover:decoration-transparent transition-colors ease-in-out duration-200"
+                                :href="route('password')"
+                                text="Forgot password?"
+                            />
                         </label>
                         <input
                             id="password"
@@ -41,20 +49,19 @@
                     </div>
 
                     <div class="form-col">
-                        <div class="inline-label">
+                        <label class="inline-flex items-center gap-3 cursor-pointer">
                             <input
-                                id="remember"
-                                class="checkbox"
+                                class="sr-only peer"
                                 type="checkbox"
                                 v-model="loginForm.remember"
                             />
-                            <label
-                                class="small-label"
-                                for="remember"
-                            >
-                                Remember
-                            </label>
-                        </div>
+                            <div
+                                class="relative w-9 h-5 bg-neutral-200 peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:start-[2px] after:bg-white after:border-neutral-300 after:border after:rounded-full after:size-4 after:transition-all peer-checked:bg-brand-600">
+                            </div>
+                            <span class="text-sm font-medium">
+                                Remember me
+                            </span>
+                        </label>
                     </div>
 
                     <div class="form-col">
@@ -69,15 +76,8 @@
             </form>
 
             <div class="mt-6 xl:mt-10">
-                <p class="text-center">
-                    <Link
-                        class="underline hover:decoration-transparent transition-colors ease-in-out duration-200"
-                        :href="route('password')"
-                        text="Forgot your password?"
-                    />
-                </p>
-
                 <p class="text-center mt-3">
+                    Don't have an account?
                     <Link
                         class="underline hover:decoration-transparent transition-colors ease-in-out duration-200"
                         :href="route('register')"
diff --git a/resources/js/Pages/Register/Show.vue b/resources/js/Pages/Register/Show.vue
@@ -3,7 +3,10 @@
     <Head :title="title" />
 
     <div class="mx-auto max-w-2xl">
-        <PageTitle class="mb-4 xl:mb-8" :text="title" />
+        <PageTitle
+            class="mb-4 xl:mb-8"
+            :text="title"
+        />
 
         <div class="bg-white rounded-2xl xl:p-10 p-6 border border-brand-200">
             <form @submit.prevent="submitForm">
@@ -85,6 +88,7 @@
 
             <div class="mt-6 xl:mt-10">
                 <p class="text-center">
+                    Already have an account?
                     <Link
                         class="underline hover:decoration-transparent transition-colors ease-in-out duration-200"
                         :href="route('login')"
diff --git a/resources/js/Pages/ResetPassword/Show.vue b/resources/js/Pages/ResetPassword/Show.vue
@@ -3,7 +3,10 @@
     <Head :title="title" />
 
     <div class="mx-auto max-w-2xl">
-        <PageTitle class="mb-4 xl:mb-8" :text="title" />
+        <PageTitle
+            class="mb-4 xl:mb-8"
+            :text="title"
+        />
 
         <div class="bg-white rounded-2xl xl:p-10 p-6 border border-brand-200">
             <form @submit.prevent="submitForm">
@@ -37,6 +40,7 @@
 
             <div class="mt-6 xl:mt-10">
                 <p class="text-center">
+                    Remembered your password?
                     <Link
                         class="underline hover:decoration-transparent transition-colors ease-in-out duration-200"
                         :href="route('login')"

Original file line number	Diff line number	Diff line change
`@@ -18,7 +18,7 @@`
`18`	`18`	`}`
`19`	`19`
`20`	`20`	`.label {`
`21`		`- @apply pb-3 block text-base font-medium;`
	`21`	`+ @apply pb-3 block text-sm sm:text-base font-medium;`
`22`	`22`	`}`
`23`	`23`
`24`	`24`	`.small-label {`