Merge pull request #1134 from liberu-genealogy/sweep/Enhance-User-Interface-with-Improved-Input-Styles-and-Accessibility

Enhance User Interface with Improved Input Styles and Accessibility

Author: curtisdelicata

resources/css/site.css

@@ -18,13 +18,13 @@ footer
 }
 
 /* Custom styles extracted from tailwind.css */
-.btn {
   @apply px-4 py-2 bg-blue-500 text-white font-semibold rounded-lg shadow-md hover:bg-blue-700;
 }
 .form-input {
-  @apply border-2 border-gray-300 p-3 rounded-lg focus:outline-none focus:border-blue-500;
+  @apply border-2 border-gray-300 p-3 rounded-lg focus:outline-none focus:border-blue-500 bg-white text-gray-900;
 }
 .container {
+  @apply max-w-6xl mx-auto px-4 sm:px-6 lg:px-8;
   @apply max-w-6xl mx-auto px-4 sm:px-6 lg:px-8;
   @media (max-width: 768px) {
     max-width: 100%;
@@ -173,4 +173,4 @@ footer
 }
 .xl\:container {
   @apply max-w-6xl;
-}
+}

resources/views/auth/login.blade.php

@@ -14,14 +14,14 @@
                     <label class="block font-medium text-sm text-gray-700" for="email">
                         {{ __('Email') }}
                     </label>
-                    <input class="border-gray-300 focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50 rounded-md shadow-sm block mt-1 w-full" id="email" type="email" name="email" required="required" autofocus="autofocus">
+                    <input class="border-gray-300 focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50 rounded-md shadow-sm block mt-1 w-full bg-white text-gray-900" id="email" type="email" name="email" required="required" autofocus="autofocus">
                 </div>
 
                 <div class="mt-4">
                     <label class="block font-medium text-sm text-gray-700" for="password">
                         {{ __('Password') }}
                     </label>
-                    <input class="border-gray-300 focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50 rounded-md shadow-sm block mt-1 w-full" id="password" type="password" name="password" required="required" autocomplete="current-password">
+                    <input class="border-gray-300 focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50 rounded-md shadow-sm block mt-1 w-full bg-white text-gray-900" id="password" type="password" name="password" required="required" autocomplete="current-password">
                 </div>
 
                 <div class="block mt-4">
@@ -41,4 +41,4 @@
             </form>
         </div>
     </div>
-@endsection
+@endsection

resources/views/components/input.blade.php

@@ -1,3 +1,3 @@
 @props(['disabled' => false])
 
-<input {{ $disabled ? 'disabled' : '' }} {!! $attributes->merge(['class' => 'border-gray-300 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-300 focus:border-gray-500 dark:focus:border-gray-600 focus:ring-gray-500 dark:focus:ring-gray-600 rounded-md shadow-sm']) !!}>
+<input {{ $disabled ? 'disabled' : '' }} {!! $attributes->merge(['class' => 'border-gray-300 focus:border-gray-500 focus:ring-gray-500 rounded-md shadow-sm bg-white text-gray-900']) !!}>