#216 Dark UI changes (#219)

Co-authored-by: Omer Basar <[email protected]> Co-authored-by: aakashshankar <[email protected]>
gcivil-nyu-org · Nov 27, 2024 · c3c1fd7 · c3c1fd7
1 parent 9443e91
commit c3c1fd7
Show file tree

Hide file tree

Showing 34 changed files with 1,088 additions and 1,258 deletions.
diff --git a/src/accounts/forms.py b/src/accounts/forms.py
@@ -14,7 +14,7 @@ class UserRegisterForm(UserCreationForm):
         required=True,
         widget=forms.TextInput(
             attrs={
-                "class": "shadow appearance-none border rounded w-full py-2 px-3 text-gray-700",
+                "class": "w-full p-2 rounded bg-gray-700 text-gray-100 focus:outline-none focus:ring-2 focus:ring-blue-500 h-12 border border-gray-600",
                 "placeholder": "Username",
             }
         ),
@@ -23,7 +23,7 @@ class UserRegisterForm(UserCreationForm):
         required=True,
         widget=forms.EmailInput(
             attrs={
-                "class": "shadow appearance-none border rounded w-full py-2 px-3 text-gray-700",
+                "class": "w-full p-2 rounded bg-gray-700 text-gray-100 focus:outline-none focus:ring-2 focus:ring-blue-500 h-12 border border-gray-600",
                 "placeholder": "Email Address",
             }
         ),
@@ -33,7 +33,7 @@ class UserRegisterForm(UserCreationForm):
         required=True,
         widget=forms.TextInput(
             attrs={
-                "class": "shadow appearance-none border rounded w-full py-2 px-3 text-gray-700",
+                "class": "w-full p-2 rounded bg-gray-700 text-gray-100 focus:outline-none focus:ring-2 focus:ring-blue-500 h-12 border border-gray-600",
                 "placeholder": "First Name",
             }
         ),
@@ -43,7 +43,7 @@ class UserRegisterForm(UserCreationForm):
         required=True,
         widget=forms.TextInput(
             attrs={
-                "class": "shadow appearance-none border rounded w-full py-2 px-3 text-gray-700",
+                "class": "w-full p-2 rounded bg-gray-700 text-gray-100 focus:outline-none focus:ring-2 focus:ring-blue-500 h-12 border border-gray-600",
                 "placeholder": "Last Name",
             }
         ),
@@ -53,7 +53,7 @@ class UserRegisterForm(UserCreationForm):
         label="Password",
         widget=forms.PasswordInput(
             attrs={
-                "class": "shadow appearance-none border rounded w-full py-2 px-3 text-gray-700",
+                "class": "w-full p-2 rounded bg-gray-700 text-gray-100 focus:outline-none focus:ring-2 focus:ring-blue-500 h-12 border border-gray-600",
                 "placeholder": "Enter Password",
             }
         ),
@@ -63,7 +63,7 @@ class UserRegisterForm(UserCreationForm):
         label="Confirm Password",
         widget=forms.PasswordInput(
             attrs={
-                "class": "shadow appearance-none border rounded w-full py-2 px-3 text-gray-700",
+                "class": "w-full p-2 rounded bg-gray-700 text-gray-100 focus:outline-none focus:ring-2 focus:ring-blue-500 h-12 border border-gray-600",
                 "placeholder": "Confirm Password",
             }
         ),
@@ -75,7 +75,7 @@ class UserRegisterForm(UserCreationForm):
         required=True,
         widget=forms.Select(
             attrs={
-                "class": "shadow appearance-none border rounded w-full py-2 px-3 text-gray-700",
+                "class": "w-full p-2 rounded bg-gray-700 text-gray-100 focus:outline-none focus:ring-2 focus:ring-blue-500 h-12 border border-gray-600",
                 "placeholder": "Select User Type",
             }
         ),
@@ -99,7 +99,7 @@ class UserLoginForm(AuthenticationForm):
         label="Username",
         widget=forms.TextInput(
             attrs={
-                "class": "form-control",
+                "class": "form-control w-full p-2 rounded bg-gray-700 text-gray-100 focus:outline-none focus:ring-2 focus:ring-blue-500 h-12 border border-gray-600",
                 "placeholder": "Enter your username",
             }
         ),
@@ -108,7 +108,10 @@ class UserLoginForm(AuthenticationForm):
     password = forms.CharField(
         label="Password",
         widget=forms.PasswordInput(
-            attrs={"class": "form-control", "placeholder": "Enter your password"}
+            attrs={
+                "class": "form-control w-full p-2 rounded bg-gray-700 text-gray-100 focus:outline-none focus:ring-2 focus:ring-blue-500 h-12 border border-gray-600",
+                "placeholder": "Enter your password",
+            }
         ),
         required=True,
     )
@@ -141,14 +144,20 @@ class ServiceProviderLoginForm(AuthenticationForm):
     email = forms.EmailField(
         label="Email",
         widget=forms.EmailInput(
-            attrs={"class": "form-control", "placeholder": "Enter your email"}
+            attrs={
+                "class": "form-control w-full p-2 rounded bg-gray-700 text-gray-100 focus:outline-none focus:ring-2 focus:ring-blue-500 h-12 border border-gray-600",
+                "placeholder": "Enter your email",
+            }
         ),
         required=True,
     )
     password = forms.CharField(
         label="Password",
         widget=forms.PasswordInput(
-            attrs={"class": "form-control", "placeholder": "Enter your password"}
+            attrs={
+                "class": "form-control w-full p-2 rounded bg-gray-700 text-gray-100 focus:outline-none focus:ring-2 focus:ring-blue-500 h-12 border border-gray-600",
+                "placeholder": "Enter your password",
+            }
         ),
         required=True,
     )
@@ -196,27 +205,27 @@ class Meta:
         widgets = {
             "username": forms.TextInput(
                 attrs={
-                    "class": "shadow appearance-none border rounded w-full py-2 px-3 text-gray-700",
+                    "class": "w-full p-2 rounded bg-gray-700 text-gray-100 focus:outline-none focus:ring-2 focus:ring-blue-500 h-12 border border-gray-600",
                     "readonly": "readonly",  # Make username non-editable
                     "placeholder": "Username",
                 }
             ),
             "email": forms.EmailInput(
                 attrs={
-                    "class": "shadow appearance-none border rounded w-full py-2 px-3 text-gray-700",
+                    "class": "w-full p-2 rounded bg-gray-700 text-gray-100 focus:outline-none focus:ring-2 focus:ring-blue-500 h-12 border border-gray-600",
                     "readonly": "readonly",  # Make email non-editable
                     "placeholder": "Email Address",
                 }
             ),
             "first_name": forms.TextInput(
                 attrs={
-                    "class": "shadow appearance-none border rounded w-full py-2 px-3 text-gray-700",
+                    "class": "w-full p-2 rounded bg-gray-700 text-gray-100 focus:outline-none focus:ring-2 focus:ring-blue-500 h-12 border border-gray-600",
                     "placeholder": "First Name",
                 }
             ),
             "last_name": forms.TextInput(
                 attrs={
-                    "class": "shadow appearance-none border rounded w-full py-2 px-3 text-gray-700",
+                    "class": "w-full p-2 rounded bg-gray-700 text-gray-100 focus:outline-none focus:ring-2 focus:ring-blue-500 h-12 border border-gray-600",
                     "placeholder": "Last Name",
                 }
             ),
@@ -232,27 +241,27 @@ class Meta:
         widgets = {
             "username": forms.TextInput(
                 attrs={
-                    "class": "shadow appearance-none border rounded w-full py-2 px-3 text-gray-700",
+                    "class": "w-full p-2 rounded bg-gray-700 text-gray-100 focus:outline-none focus:ring-2 focus:ring-blue-500 h-12 border border-gray-600",
                     "readonly": "readonly",  # Make username non-editable
                     "placeholder": "Username",
                 }
             ),
             "email": forms.EmailInput(
                 attrs={
-                    "class": "shadow appearance-none border rounded w-full py-2 px-3 text-gray-700",
+                    "class": "w-full p-2 rounded bg-gray-700 text-gray-100 focus:outline-none focus:ring-2 focus:ring-blue-500 h-12 border border-gray-600",
                     "readonly": "readonly",  # Make email non-editable
                     "placeholder": "Email Address",
                 }
             ),
             "first_name": forms.TextInput(
                 attrs={
-                    "class": "shadow appearance-none border rounded w-full py-2 px-3 text-gray-700",
+                    "class": "w-full p-2 rounded bg-gray-700 text-gray-100 focus:outline-none focus:ring-2 focus:ring-blue-500 h-12 border border-gray-600",
                     "placeholder": "First Name",
                 }
             ),
             "last_name": forms.TextInput(
                 attrs={
-                    "class": "shadow appearance-none border rounded w-full py-2 px-3 text-gray-700",
+                    "class": "w-full p-2 rounded bg-gray-700 text-gray-100 focus:outline-none focus:ring-2 focus:ring-blue-500 h-12 border border-gray-600",
                     "placeholder": "Last Name",
                 }
             ),

diff --git a/src/accounts/templates/lockout.html b/src/accounts/templates/lockout.html
@@ -6,20 +6,20 @@
     <title>Account Locked</title>
     <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/tailwind.min.css" rel="stylesheet">
 </head>
-<body class="bg-gray-100 font-sans">
+<body class="bg-gray-900 font-sans text-gray-100">
     <div class="container mx-auto px-4 h-screen flex items-center justify-center">
         <div class="w-full max-w-md text-center">
-            <div class="bg-white shadow-md rounded-lg overflow-hidden p-6">
+            <div class="bg-gray-800 shadow-md rounded-lg overflow-hidden p-6">
                 <h3 class="text-2xl font-bold text-red-500">Account Locked</h3>
-                <p class="mt-4 text-gray-700">Too many failed login attempts have been detected.</p>
-                <p class="mt-2 text-gray-700">Please try again later or contact support for further assistance.</p>
+                <p class="mt-4 text-gray-300">Too many failed login attempts have been detected.</p>
+                <p class="mt-2 text-gray-300">Please try again later or contact support for further assistance.</p>
 
                 <!-- Home Button -->
-                <a href="{% url 'home' %}" class="mt-6 inline-block bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline transition duration-300">
+                <a href="{% url 'home' %}" class="mt-6 inline-block bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline transition duration-300">
                     Go to Home
                 </a>
             </div>
         </div>
     </div>
 </body>
-</html>
+</html>