From 645ffa0dadcbec5412a932d636941d3ed97741a8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Luk=C3=A1=C5=A1=20Kucharczyk?= <lukas@kucharczyk.xyz>
Date: Tue, 3 Sep 2024 22:39:25 +0200
Subject: [PATCH] update styles

---
 games/static/base.css                    | 32 ++++++++++++++++++++----
 games/templates/cotton/simple_table.html |  8 +++---
 games/templates/cotton/table_row.html    |  2 +-
 3 files changed, 32 insertions(+), 10 deletions(-)

diff --git a/games/static/base.css b/games/static/base.css
index ccaff9f..906e1c1 100644
--- a/games/static/base.css
+++ b/games/static/base.css
@@ -1,5 +1,5 @@
 /*
-! tailwindcss v3.4.7 | MIT License | https://tailwindcss.com
+! tailwindcss v3.4.10 | MIT License | https://tailwindcss.com
 */
 
 /*
@@ -1782,10 +1782,6 @@ input:checked + .toggle-bg {
   border-width: 0px;
 }
 
-.border-b {
-  border-bottom-width: 1px;
-}
-
 .border-blue-600 {
   --tw-border-opacity: 1;
   border-color: rgb(28 100 242 / var(--tw-border-opacity));
@@ -1816,6 +1812,11 @@ input:checked + .toggle-bg {
   border-color: rgb(220 215 254 / var(--tw-border-opacity));
 }
 
+.\!bg-gray-50 {
+  --tw-bg-opacity: 1 !important;
+  background-color: rgb(249 250 251 / var(--tw-bg-opacity)) !important;
+}
+
 .bg-blue-100 {
   --tw-bg-opacity: 1;
   background-color: rgb(225 239 254 / var(--tw-bg-opacity));
@@ -2692,6 +2693,12 @@ textarea:disabled:is(.dark *) {
   outline-color: #AC94FA;
 }
 
+.dark\:divide-y:is(.dark *) > :not([hidden]) ~ :not([hidden]) {
+  --tw-divide-y-reverse: 0;
+  border-top-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
+  border-bottom-width: calc(1px * var(--tw-divide-y-reverse));
+}
+
 .dark\:divide-gray-600:is(.dark *) > :not([hidden]) ~ :not([hidden]) {
   --tw-divide-opacity: 1;
   border-color: rgb(75 85 99 / var(--tw-divide-opacity));
@@ -2721,6 +2728,11 @@ textarea:disabled:is(.dark *) {
   border-color: transparent;
 }
 
+.dark\:\!bg-gray-700:is(.dark *) {
+  --tw-bg-opacity: 1 !important;
+  background-color: rgb(55 65 81 / var(--tw-bg-opacity)) !important;
+}
+
 .dark\:bg-blue-200:is(.dark *) {
   --tw-bg-opacity: 1;
   background-color: rgb(195 221 253 / var(--tw-bg-opacity));
@@ -2920,6 +2932,16 @@ textarea:disabled:is(.dark *) {
     border-radius: 0.5rem;
   }
 
+  .sm\:rounded-b-lg {
+    border-bottom-right-radius: 0.5rem;
+    border-bottom-left-radius: 0.5rem;
+  }
+
+  .sm\:rounded-t-lg {
+    border-top-left-radius: 0.5rem;
+    border-top-right-radius: 0.5rem;
+  }
+
   .sm\:px-4 {
     padding-left: 1rem;
     padding-right: 1rem;
diff --git a/games/templates/cotton/simple_table.html b/games/templates/cotton/simple_table.html
index 8f08b99..97ed1f5 100644
--- a/games/templates/cotton/simple_table.html
+++ b/games/templates/cotton/simple_table.html
@@ -1,6 +1,6 @@
 {% load param_utils %}
-<div class="shadow-md sm:rounded-lg" hx-boost="false">
-    <div class="relative overflow-x-auto sm:rounded-lg">
+<div class="shadow-md" hx-boost="false">
+    <div class="relative overflow-x-auto sm:rounded-t-lg">
         <table class="w-full text-sm text-left rtl:text-right text-gray-500 dark:text-gray-400">
             {% if header_action %}
                 <c-table-header>
@@ -12,13 +12,13 @@
                     {% for column in columns %}<th scope="col" class="px-6 py-3">{{ column }}</th>{% endfor %}
                 </tr>
             </thead>
-            <tbody>
+            <tbody class="dark:divide-y">
                 {% for row in rows %}<c-table-row :data=row />{% endfor %}
             </tbody>
         </table>
     </div>
     {% if page_obj and elided_page_range %}
-        <nav class="flex items-center flex-column md:flex-row justify-between px-6 py-4"
+        <nav class="flex items-center flex-column md:flex-row justify-between px-6 py-4 dark:bg-gray-900 sm:rounded-b-lg"
              aria-label="Table navigation">
             <span class="text-sm font-normal text-gray-500 dark:text-gray-400 mb-4 md:mb-0 block w-full md:inline md:w-auto">Showing <span class="font-semibold text-gray-900 dark:text-white">{{ page_obj.start_index }}</span>—<span class="font-semibold text-gray-900 dark:text-white">{{ page_obj.end_index }}</span> of <span class="font-semibold text-gray-900 dark:text-white">{{ page_obj.paginator.count }}</span></span>
             <ul class="inline-flex -space-x-px rtl:space-x-reverse text-sm h-8">
diff --git a/games/templates/cotton/table_row.html b/games/templates/cotton/table_row.html
index cd29516..2610d9a 100644
--- a/games/templates/cotton/table_row.html
+++ b/games/templates/cotton/table_row.html
@@ -1,4 +1,4 @@
-<tr class="odd:bg-white odd:dark:bg-gray-900 even:bg-gray-50 even:dark:bg-gray-800 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600 border-b [&_a]:underline [&_a]:underline-offset-4 [&_a]:decoration-2">
+<tr class="odd:bg-white odd:dark:bg-gray-900 even:bg-gray-50 even:dark:bg-gray-800 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600 [&_a]:underline [&_a]:underline-offset-4 [&_a]:decoration-2">
     {% if slot %}
         {{ slot }}
     {% else %}