From ea3852724044441453abf712f15b78daa09220ac Mon Sep 17 00:00:00 2001
From: Dhairya <sharmadhairya024@gmail.com>
Date: Wed, 25 Feb 2026 09:00:18 +0530
Subject: [PATCH] Fix Create-Group-UI-Fixes

---
 web/templates/web/study/create_group.html | 168 +++++++++++++++++++---
 1 file changed, 149 insertions(+), 19 deletions(-)

diff --git a/web/templates/web/study/create_group.html b/web/templates/web/study/create_group.html
index 6fe66612e..65574b5b3 100644
--- a/web/templates/web/study/create_group.html
+++ b/web/templates/web/study/create_group.html
@@ -6,32 +6,162 @@
   Create Study Group
 {% endblock title %}
 {% block content %}
-  <div class="container mx-auto px-4 py-8">
-    <div class="max-w-md mx-auto bg-white dark:bg-gray-800 p-8 rounded-lg shadow border border-gray-300 dark:border-gray-700">
-      <div class="text-center mb-6">
+  <div class="container mx-auto px-4 sm:px-6 lg:px-8 py-10 sm:py-16">
+    <div class="max-w-lg mx-auto bg-white dark:bg-gray-800 p-6 sm:p-8 rounded-xl shadow-lg border border-gray-200 dark:border-gray-700">
+      <div class="text-center mb-8">
+        <div class="inline-flex items-center justify-center w-14 h-14 rounded-full bg-green-100 dark:bg-green-900 mb-4">
+          <i class="fas fa-users text-2xl text-green-600 dark:text-green-400"></i>
+        </div>
         <h2 class="text-3xl font-bold text-gray-900 dark:text-gray-100">Create a Study Group</h2>
-        <p class="mt-2 text-sm text-gray-600 dark:text-gray-300">Fill in the details below to get started.</p>
+        <p class="mt-2 text-sm text-gray-500 dark:text-gray-400">Fill in the details below to get started.</p>
       </div>
-      <!-- Inline styles to add borders to form inputs -->
-      <style>
-          form input,
-          form textarea,
-          form select {
-              border: 1px solid #ccc;
-              padding: 0.5rem;
-              border-radius: 0.375rem;
-          }
-      </style>
-      <form method="post" class="space-y-6">
+      {% if form.errors %}
+        <div class="mb-6 p-4 bg-red-50 dark:bg-red-900/30 border border-red-200 dark:border-red-800 text-red-700 dark:text-red-300 rounded-lg flex items-start gap-3"
+             role="alert">
+          <i class="fas fa-exclamation-circle mt-0.5 flex-shrink-0"></i>
+          <div>
+            <p class="font-semibold">Please correct the errors below.</p>
+            {% if form.non_field_errors %}
+              <ul class="mt-1 list-disc list-inside text-sm">
+                {% for error in form.non_field_errors %}<li>{{ error }}</li>{% endfor %}
+              </ul>
+            {% endif %}
+          </div>
+        </div>
+      {% endif %}
+      <form method="post" novalidate class="space-y-5">
         {% csrf_token %}
-        <div class="space-y-4">{{ form.as_p }}</div>
-        <div>
+        {% for field in form %}
+          <div>
+            {% if field.field.widget.input_type == "checkbox" %}
+              <label class="inline-flex items-center gap-3 cursor-pointer select-none">
+                {{ field }}
+                <span class="text-sm font-medium text-gray-700 dark:text-gray-300">{{ field.label }}</span>
+              </label>
+            {% else %}
+              <label for="{{ field.id_for_label }}"
+                     class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1.5">
+                {{ field.label }}
+              </label>
+              {{ field }}
+            {% endif %}
+            {% if field.help_text %}<p class="mt-1 text-xs text-gray-500 dark:text-gray-400">{{ field.help_text }}</p>{% endif %}
+            {% if field.errors %}
+              {% for error in field.errors %}
+                <p class="mt-1 text-sm text-red-600 dark:text-red-400">
+                  <i class="fas fa-exclamation-triangle mr-1 text-xs"></i>{{ error }}
+                </p>
+              {% endfor %}
+            {% endif %}
+          </div>
+        {% endfor %}
+        <div class="pt-2">
           <button type="submit"
-                  class="w-full py-3 px-4 bg-green-600 hover:bg-green-700 text-white rounded-md font-semibold focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-offset-2">
-            Create Group
+                  class="w-full py-3 px-4 bg-green-600 hover:bg-green-700 active:bg-green-800 text-white rounded-lg font-semibold transition duration-200 focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-offset-2 dark:focus:ring-offset-gray-800">
+            <i class="fas fa-plus-circle mr-2"></i>Create Group
           </button>
         </div>
       </form>
     </div>
   </div>
+  <style>
+      /* Style Django-rendered form widgets with Tailwind-compatible properties */
+      .space-y-5 input[type="text"],
+      .space-y-5 input[type="number"],
+      .space-y-5 input[type="email"],
+      .space-y-5 input[type="url"],
+      .space-y-5 textarea,
+      .space-y-5 select {
+          display: block;
+          width: 100%;
+          padding: 0.625rem 0.875rem;
+          border: 1px solid #d1d5db;
+          border-radius: 0.5rem;
+          font-size: 0.875rem;
+          line-height: 1.25rem;
+          color: #111827;
+          background-color: #fff;
+          transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
+      }
+
+      .space-y-5 input[type="text"]:focus,
+      .space-y-5 input[type="number"]:focus,
+      .space-y-5 input[type="email"]:focus,
+      .space-y-5 input[type="url"]:focus,
+      .space-y-5 textarea:focus,
+      .space-y-5 select:focus {
+          outline: none;
+          border-color: #22c55e;
+          box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.15);
+      }
+
+      .space-y-5 textarea {
+          min-height: 6rem;
+          resize: vertical;
+      }
+
+      .space-y-5 input[type="checkbox"] {
+          width: 1.125rem;
+          height: 1.125rem;
+          accent-color: #3b82f6;
+          border-radius: 0.25rem;
+          cursor: pointer;
+      }
+
+      /* Dark mode overrides */
+      .dark .space-y-5 input[type="text"],
+      .dark .space-y-5 input[type="number"],
+      .dark .space-y-5 input[type="email"],
+      .dark .space-y-5 input[type="url"],
+      .dark .space-y-5 textarea,
+      .dark .space-y-5 select {
+          background-color: #374151;
+          border-color: #4b5563;
+          color: #f3f4f6;
+      }
+
+      .dark .space-y-5 input[type="text"]:focus,
+      .dark .space-y-5 input[type="number"]:focus,
+      .dark .space-y-5 input[type="email"]:focus,
+      .dark .space-y-5 input[type="url"]:focus,
+      .dark .space-y-5 textarea:focus,
+      .dark .space-y-5 select:focus {
+          border-color: #22c55e;
+          box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.25);
+      }
+
+      .dark .space-y-5 select option {
+          background-color: #374151;
+          color: #f3f4f6;
+      }
+
+      /* Fix browser autofill/autocomplete background in light mode */
+      .space-y-5 input:-webkit-autofill,
+      .space-y-5 input:-webkit-autofill:hover,
+      .space-y-5 input:-webkit-autofill:focus,
+      .space-y-5 textarea:-webkit-autofill,
+      .space-y-5 select:-webkit-autofill {
+          -webkit-box-shadow: 0 0 0 1000px #fff inset;
+          -webkit-text-fill-color: #111827;
+          transition: background-color 5000s ease-in-out 0s;
+      }
+
+      /* Fix browser autofill/autocomplete background in dark mode */
+      .dark .space-y-5 input:-webkit-autofill,
+      .dark .space-y-5 input:-webkit-autofill:hover,
+      .dark .space-y-5 input:-webkit-autofill:focus,
+      .dark .space-y-5 textarea:-webkit-autofill,
+      .dark .space-y-5 select:-webkit-autofill {
+          -webkit-box-shadow: 0 0 0 1000px #374151 inset;
+          -webkit-text-fill-color: #f3f4f6;
+          transition: background-color 5000s ease-in-out 0s;
+      }
+
+      /* Ensure autocomplete dropdown uses dark theme in dark mode */
+      .dark .space-y-5 input,
+      .dark .space-y-5 textarea,
+      .dark .space-y-5 select {
+          color-scheme: dark;
+      }
+  </style>
 {% endblock content %}