Improve forms

common/input.css

@@ -44,9 +44,9 @@
   transition: all 0.2s ease-out;
 } */
 
-form label {
+/* form label {
   @apply dark:text-slate-400;
-}
+} */
 
 .responsive-table {
   @apply dark:text-white mx-auto table-fixed;
@@ -90,37 +90,37 @@ form label {
   }
 }
 
-form input,
+/* form input,
 select,
 textarea {
   @apply dark:border dark:border-slate-900 dark:bg-slate-500 dark:text-slate-100;
-}
+} */
 
 form input:disabled,
 select:disabled,
 textarea:disabled {
-  @apply dark:bg-slate-700 dark:text-slate-400;
+  @apply dark:bg-slate-800 dark:text-slate-500 cursor-not-allowed;
 }
 
 .errorlist {
   @apply mt-4 mb-1 pl-3 py-2 bg-red-600 text-slate-200 w-[300px];
 }
 
-@media screen and (min-width: 768px) {
+/* @media screen and (min-width: 768px) {
   form input,
   select,
   textarea {
     width: 300px;
   }
-}
+} */
 
-@media screen and (max-width: 768px) {
+/* @media screen and (max-width: 768px) {
   form input,
   select,
   textarea {
     width: 150px;
   }
-}
+} */
 
 #button-container button {
   @apply mx-1;
@@ -169,3 +169,27 @@ textarea:disabled {
     
   }  
 } */
+
+label {
+  @apply dark:text-slate-500;
+}
+
+[type="text"], [type="datetime-local"], [type="datetime"], [type="date"], [type="number"], select, textarea {
+  @apply dark:bg-slate-600 dark:text-slate-300;
+}
+
+[type="submit"] {
+  @apply dark:text-white font-bold dark:bg-blue-600 px-4 py-2;
+}
+
+form div label {
+  @apply dark:text-white;
+}
+
+form div {
+  @apply flex flex-col;
+}
+
+div [type="submit"] {
+  @apply mt-3;
+}

games/static/base.css

@@ -1600,6 +1600,14 @@ input:checked + .toggle-bg {
   max-width: 20rem;
 }
 
+.max-w-full {
+  max-width: 100%;
+}
+
+.max-w-xl {
+  max-width: 36rem;
+}
+
 .flex-1 {
   flex: 1 1 0%;
 }
@@ -1688,10 +1696,6 @@ input:checked + .toggle-bg {
   grid-template-columns: repeat(7, minmax(0, 1fr));
 }
 
-.flex-row {
-  flex-direction: row;
-}
-
 .flex-col {
   flex-direction: column;
 }
@@ -1740,14 +1744,6 @@ input:checked + .toggle-bg {
   gap: 1.25rem;
 }
 
-.gap-3 {
-  gap: 0.75rem;
-}
-
-.gap-6 {
-  gap: 1.5rem;
-}
-
 .-space-x-px > :not([hidden]) ~ :not([hidden]) {
   --tw-space-x-reverse: 0;
   margin-right: calc(-1px * var(--tw-space-x-reverse));
@@ -2091,10 +2087,6 @@ input:checked + .toggle-bg {
   vertical-align: top;
 }
 
-.align-middle {
-  vertical-align: middle;
-}
-
 .font-mono {
   font-family: IBM Plex Mono, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
 }
@@ -2242,6 +2234,11 @@ input:checked + .toggle-bg {
   color: rgb(203 213 225 / var(--tw-text-opacity));
 }
 
+.text-slate-400 {
+  --tw-text-opacity: 1;
+  color: rgb(148 163 184 / var(--tw-text-opacity));
+}
+
 .text-slate-500 {
   --tw-text-opacity: 1;
   color: rgb(100 116 139 / var(--tw-text-opacity));
@@ -2257,11 +2254,6 @@ input:checked + .toggle-bg {
   color: rgb(250 202 21 / var(--tw-text-opacity));
 }
 
-.text-slate-400 {
-  --tw-text-opacity: 1;
-  color: rgb(148 163 184 / var(--tw-text-opacity));
-}
-
 .underline {
   text-decoration-line: underline;
 }
@@ -2419,10 +2411,9 @@ input:checked + .toggle-bg {
   transition: all 0.2s ease-out;
 } */
 
-form label:is(.dark *) {
+/* form label {
-  --tw-text-opacity: 1;
+  @apply dark:text-slate-400;
-  color: rgb(148 163 184 / var(--tw-text-opacity));
+} */
-}
 
 .responsive-table {
   margin-left: auto;
@@ -2461,25 +2452,25 @@ form label:is(.dark *) {
   border-left-color: rgb(100 116 139 / var(--tw-border-opacity));
 }
 
-form input:is(.dark *),
+/* form input,
-select:is(.dark *),
+select,
-textarea:is(.dark *) {
+textarea {
-  border-width: 1px;
+  @apply dark:border dark:border-slate-900 dark:bg-slate-500 dark:text-slate-100;
-  --tw-border-opacity: 1;
+} */
-  border-color: rgb(15 23 42 / var(--tw-border-opacity));
+
-  --tw-bg-opacity: 1;
+form input:disabled,
-  background-color: rgb(100 116 139 / var(--tw-bg-opacity));
+select:disabled,
-  --tw-text-opacity: 1;
+textarea:disabled {
-  color: rgb(241 245 249 / var(--tw-text-opacity));
+  cursor: not-allowed;
 }
 
 form input:disabled:is(.dark *),
 select:disabled:is(.dark *),
 textarea:disabled:is(.dark *) {
   --tw-bg-opacity: 1;
-  background-color: rgb(51 65 85 / var(--tw-bg-opacity));
+  background-color: rgb(30 41 59 / var(--tw-bg-opacity));
   --tw-text-opacity: 1;
-  color: rgb(148 163 184 / var(--tw-text-opacity));
+  color: rgb(100 116 139 / var(--tw-text-opacity));
 }
 
 .errorlist {
@@ -2495,21 +2486,21 @@ textarea:disabled:is(.dark *) {
   color: rgb(226 232 240 / var(--tw-text-opacity));
 }
 
-@media screen and (min-width: 768px) {
+/* @media screen and (min-width: 768px) {
   form input,
   select,
   textarea {
     width: 300px;
   }
-}
+} */
 
-@media screen and (max-width: 768px) {
+/* @media screen and (max-width: 768px) {
   form input,
   select,
   textarea {
     width: 150px;
   }
-}
+} */
 
 #button-container button {
   margin-left: 0.25rem;
@@ -2618,6 +2609,47 @@ textarea:disabled:is(.dark *) {
   }  
 } */
 
+label:is(.dark *) {
+  --tw-text-opacity: 1;
+  color: rgb(100 116 139 / var(--tw-text-opacity));
+}
+
+[type="text"]:is(.dark *), [type="datetime-local"]:is(.dark *), [type="datetime"]:is(.dark *), [type="date"]:is(.dark *), [type="number"]:is(.dark *), select:is(.dark *), textarea:is(.dark *) {
+  --tw-bg-opacity: 1;
+  background-color: rgb(71 85 105 / var(--tw-bg-opacity));
+  --tw-text-opacity: 1;
+  color: rgb(203 213 225 / var(--tw-text-opacity));
+}
+
+[type="submit"] {
+  padding-left: 1rem;
+  padding-right: 1rem;
+  padding-top: 0.5rem;
+  padding-bottom: 0.5rem;
+  font-weight: 700;
+}
+
+[type="submit"]:is(.dark *) {
+  --tw-bg-opacity: 1;
+  background-color: rgb(28 100 242 / var(--tw-bg-opacity));
+  --tw-text-opacity: 1;
+  color: rgb(255 255 255 / var(--tw-text-opacity));
+}
+
+form div label:is(.dark *) {
+  --tw-text-opacity: 1;
+  color: rgb(255 255 255 / var(--tw-text-opacity));
+}
+
+form div {
+  display: flex;
+  flex-direction: column;
+}
+
+div [type="submit"] {
+  margin-top: 0.75rem;
+}
+
 .odd\:bg-white:nth-child(odd) {
   --tw-bg-opacity: 1;
   background-color: rgb(255 255 255 / var(--tw-bg-opacity));

games/templates/add_game.html

@@ -1,12 +1,7 @@
 <c-layouts.add>
 <c-slot name="additional_row">
-<tr>
+    <input type="submit"
-    <td></td>
+                        name="submit_and_redirect"
-    <td>
+                        value="Submit & Create Purchase" />
-        <input type="submit"
-               name="submit_and_redirect"
-               value="Submit & Create Purchase" />
-    </td>
-</tr>
 </c-slot>
 </c-layouts.add>

games/templates/cotton/layouts/add.html

@@ -3,19 +3,18 @@
 {% if form_content %}
     {{ form_content }}
 {% else %}
-    <form method="post" enctype="multipart/form-data">
+<div class="max-width-container">
-        <table class="mx-auto">
+    <div class="form-container max-w-xl mx-auto">
+        <form method="post" enctype="multipart/form-data">
             {% csrf_token %}
-            {{ form.as_table }}
+            {{ form.as_div }}
-            <tr>
+            <div><input type="submit" value="Submit" /></div>
-                <td></td>
+            <div class="submit-button-container">
-                <td>
+                {{ additional_row }}
-                    <input type="submit" value="Submit" />
+            </div>
-                </td>
+        </form>
-            </tr>
+    </div>
-            {{ additional_row }}
+</div>
-        </table>
-    </form>
 {% endif %}
 <c-slot name="scripts">
 {% if script_name %}

games/views/session.py

@@ -217,7 +217,7 @@ def add_session(request: HttpRequest, game_id: int = 0) -> HttpResponse:
     context["title"] = "Add New Session"
     context["script_name"] = "add_session.js"
     context["form"] = form
-    return render(request, "add_session.html", context)
+    return render(request, "add.html", context)
 
 
 @login_required