modify login page

dashboard/resources/views/auth/login.blade.php

@@ -1,47 +1,83 @@
 <x-guest-layout>
-    <!-- Session Status -->
-    <x-auth-session-status class="mb-4" :status="session('status')" />
 
-    <form method="POST" action="{{ route('login') }}">
+    <x-auth-session-status
+        class="mb-4"
+        :status="session('status')"
+    />
+
+    <form method="POST" action="{{ route('login') }}" style="padding: 20px;">
         @csrf
 
-        <!-- Email Address -->
         <div>
-            <x-input-label for="email" :value="__('Email')" />
-            <x-text-input id="email" class="block mt-1 w-full" type="email" name="email" :value="old('email')" required autofocus autocomplete="username" />
-            <x-input-error :messages="$errors->get('email')" class="mt-2" />
-        </div>
-
-        <!-- Password -->
-        <div class="mt-4">
-            <x-input-label for="password" :value="__('Password')" />
-
-            <x-text-input id="password" class="block mt-1 w-full"
-                            type="password"
-                            name="password"
-                            required autocomplete="current-password" />
-
-            <x-input-error :messages="$errors->get('password')" class="mt-2" />
-        </div>
-
-        <!-- Remember Me -->
-        <div class="block mt-4">
-            <label for="remember_me" class="inline-flex items-center">
-                <input id="remember_me" type="checkbox" class="rounded dark:bg-gray-900 border-gray-300 dark:border-gray-700 text-indigo-600 shadow-sm focus:ring-indigo-500 dark:focus:ring-indigo-600 dark:focus:ring-offset-gray-800" name="remember">
-                <span class="ms-2 text-sm text-gray-600 dark:text-gray-400">{{ __('Remember me') }}</span>
+            <label class="block text-sm font-medium text-gray-700 mb-2">
+                Email Address
             </label>
+
+            <input
+                type="email"
+                name="email"
+                value="{{ old('email') }}"
+                required
+                autofocus
+                class="w-full rounded-md border-gray-300 focus:border-green-500 focus:ring-green-500"
+            >
+
+            <x-input-error
+                :messages="$errors->get('email')"
+                class="mt-2"
+            />
         </div>
 
-        <div class="flex items-center justify-end mt-4">
+        <div class="mt-4">
+            <label class="block text-sm font-medium text-gray-700 mb-2">
+                Password
+            </label>
+
+            <input
+                type="password"
+                name="password"
+                required
+                class="w-full rounded-md border-gray-300 focus:border-green-500 focus:ring-green-500"
+            >
+
+            <x-input-error
+                :messages="$errors->get('password')"
+                class="mt-2"
+            />
+        </div>
+
+        <div class="flex items-center justify-between mt-4">
+
+            <label class="flex items-center">
+                <input
+                    type="checkbox"
+                    name="remember"
+                    class="rounded border-gray-300"
+                >
+
+                <span class="ml-2 text-sm text-gray-600">
+                    Remember me
+                </span>
+            </label>
+
             @if (Route::has('password.request'))
-                <a class="underline text-sm text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100 rounded-md focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 dark:focus:ring-offset-gray-800" href="{{ route('password.request') }}">
-                    {{ __('Forgot your password?') }}
+                <a
+                    href="{{ route('password.request') }}"
+                    class="text-sm text-green-600 hover:text-green-700"
+                >
+                    Forgot password?
                 </a>
             @endif
 
-            <x-primary-button class="ms-3">
-                {{ __('Log in') }}
-            </x-primary-button>
         </div>
+
+        <button
+            type="submit"
+            class="w-full mt-6 bg-green-600 hover:bg-green-700 text-white font-medium py-3 rounded-md"
+        >
+            Sign In
+        </button>
+
     </form>
-</x-guest-layout>
+
+</x-guest-layout>