From 621aeb6d571b1ac60bbc5b3f0ac638a4cfc92ca7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sol=20Le=C3=B3n?= <solv.leong@gmail.com>
Date: Tue, 10 Oct 2023 19:33:23 -0300
Subject: [PATCH] Removed unused CSS and optimize responsive layout

Removed unnecessary/unused CSS classes in our styles.css which was causing performance issue. Updated templates to adopt grid layout for more efficient and easy arrangement of documents in CSS. This is accompanied by enhancing responsiveness at different breakpoints. This optimizes webpage loading speed and improve user experience for devices with different screen sizes.
---
 Cuentas/templates/alumni.html                 |  51 ++--
 Cuentas/templates/components/header.html      |   2 +-
 Cuentas/templates/components/user_card.html   |  16 +-
 Cuentas/templates/profesores.html             |  20 +-
 .../templates/components/ficha-list-card.html |   2 +-
 Fichas/templates/ficha_list.html              |  12 +-
 templates/components/login_modal.html         |   9 +-
 templates/landing.html                        |   2 +-
 theme/static/css/dist/styles.css              | 274 +++++++++---------
 9 files changed, 187 insertions(+), 201 deletions(-)

diff --git a/Cuentas/templates/alumni.html b/Cuentas/templates/alumni.html
index 3da1b3e..993a98b 100644
--- a/Cuentas/templates/alumni.html
+++ b/Cuentas/templates/alumni.html
@@ -7,43 +7,40 @@
 {% endblock %}
 
 {% block content %}
-    <div class="grid h-full grid-cols-12 grid-rows-6 font-primary">
-
-    {% include 'components/header.html' with header_title='Alumnes' %}
+    <div class="grid h-full grid-cols-12 font-primary">
+        <div class="col-span-1">
+            {% include 'components/sidebar.html' %}
+        </div>
+        <div class="col-start-2 col-span-full">
+            {% include 'components/header.html' with header_title='Alumnes' %}
+        </div>
 
-    <div class="container col-start-1 col-end-2 row-span-full my-1">
-        {% include 'components/sidebar.html' %}
-    </div>
 
-    <div id="content"
-         class="col-start-2 col-span-full row-start-1 mt-20 mr-8 row-span-full
-             items-start grid grid-rows-2 gap-3 h-full">
+        <div id="content"
+             class="col-start-2 col-span-full
+             items-start grid grid-rows-2 gap-3 pr-2">
 
-        <div id="tercero" class="relative row-start-1 flex flex-row border-4 p-1 border-bauyellow">
-            <div class="absolute inset-0 left-0 mr-12 flex h-full w-24 items-center justify-center bg-bauyellow">
+            <div id="tercero" class="relative row-span-1 flex flex-row border-4 p-1 border-bauyellow">
+                <div class="absolute inset-0 left-0 mr-12 flex h-full w-24 items-center justify-center bg-bauyellow">
                  <span class="flex h-full w-full items-center justify-center self-center text-center">
                     TERCERO
                 </span>
+                </div>
+                <div class="ml-24">
+                    {% include 'components/user_list.html' with users=users|filter_by_year:"3" %}
+                </div>
             </div>
-            <div class="ml-24">
-                {% include 'components/user_list.html' with users=users|filter_by_year:"3" %}
-            </div>
-        </div>
 
-        <div id="cuarto" class="relative row-start-2 flex flex-row border-4 p-1 border-baublue">
-            <div class="absolute inset-0 left-0 mr-12 flex h-full w-24 items-center justify-center text-zinc-50 bg-baublue">
+            <div id="cuarto" class="relative row-span-1 flex flex-row border-4 p-1 border-baublue">
+                <div class="absolute inset-0 left-0 mr-12 flex h-full w-24 items-center justify-center text-zinc-50 bg-baublue">
                 <span class="flex h-full w-full items-center justify-center self-center text-center">
                     CUARTO
                 </span>
+                </div>
+                <div class="ml-24">
+                    {% include 'components/user_list.html' with users=users|filter_by_year:"4" %}
+                </div>
             </div>
-            <div class="ml-24">
-                {% include 'components/user_list.html' with users=users|filter_by_year:"4" %}
-            </div>
-        </div>
 
-    </div>
-{% endblock content %}
-
-{% block footer %}
-    {% include 'components/footer.html' %}
-{% endblock %}
\ No newline at end of file
+        </div>
+{% endblock content %}
\ No newline at end of file
diff --git a/Cuentas/templates/components/header.html b/Cuentas/templates/components/header.html
index ad15a13..8dc69b9 100644
--- a/Cuentas/templates/components/header.html
+++ b/Cuentas/templates/components/header.html
@@ -1,4 +1,4 @@
-<div class="-z-10 col-span-full col-start-2 row-start-1 -ml-12 px-8">
+<div class="-z-10 col-span-full col-start-2 row-span-1 -ml-2 mr-2">
     <div class="h-12 w-full">
         <div id="header" class="items-center justify-center border-2 text-center border-baublack py-1.5 font-primary">
             <span class="text-center text-xl font-bold text-baublack">{{ header_title }}</span>
diff --git a/Cuentas/templates/components/user_card.html b/Cuentas/templates/components/user_card.html
index 56dffdd..7f95de1 100644
--- a/Cuentas/templates/components/user_card.html
+++ b/Cuentas/templates/components/user_card.html
@@ -3,27 +3,21 @@
 <a href="{% url 'Cuentas:user_detail' user.pk %}">
     {% if user.role == 'A' %}
         {% if user.studentprofile.year == '4' %}
-            <li class="my-1 self-center border-4 bg-zinc-100 bg-opacity-30 p-2 text-center transition-all duration-200 border-baublack hover:border-baublue hover:rounded-lg">
+            <li class="my-1 self-center border-4 bg-zinc-100 bg-opacity-30 p-2 text-center transition-all duration-200 border-baublack hover:border-baublue hover:rounded-lg aspect-[1/1]">
                 {% elif user.studentprofile.year == '3' %}
-            <li class="my-1 self-center border-4 bg-zinc-100 bg-opacity-30 p-2 text-center transition-all duration-200 border-baublack hover:border-bauyellow hover:rounded-lg">
+            <li class="my-1 self-center border-4 bg-zinc-100 bg-opacity-30 p-2 text-center transition-all duration-200 border-baublack hover:border-bauyellow hover:rounded-lg aspect-[1/1]">
         {% endif %}
     {% else %}
-        <li class="my-1 self-center border-4 bg-zinc-100 bg-opacity-30 p-2 text-center transition-all duration-200 border-baublack hover:border-baured hover:rounded-lg">
+        <li class="my-1 self-center border-4 bg-zinc-100 bg-opacity-30 p-2 text-center transition-all duration-200 border-baublack hover:border-baured hover:rounded-lg aspect-[1/1]">
     {% endif %}
 
-    <div class="relative flex h-full w-full flex-col items-center justify-center px-1 text-center pt-1.5">
+    <div class="relative flex h-full w-full flex-col items-center justify-center px-1 text-center pt-1.5 pb-2">
         <span>{{ user.first_name }} <b>{{ user.last_name }}</b></span>
         <hr>
         {% thumbnail user.avatar "200x200" crop="center" as im %}
-            <img class="self-center" src="{{ im.url }}" width="{{ im.width }}" height="{{ im.height }}"
+            <img class="self-center aspect-[1/1] p-1" src="{{ im.url }}" width="{{ im.width }}" height="{{ im.height }}"
                  alt="{{ user.first_name }} avatar">
         {% endthumbnail %}
     </div>
-    <div class="flex flex-col">
-        {#<span>{{ user.email }}</span>#}
-        {#            <span>{{ user.pronouns }}</span>#}
-        <span>{{ user.studentprofile.get_year_display }}</span>
-        {#<span>{{ user.get_role_display }}</span>#}
-    </div>
     </li>
 </a>
\ No newline at end of file
diff --git a/Cuentas/templates/profesores.html b/Cuentas/templates/profesores.html
index 74252a5..e693bbd 100644
--- a/Cuentas/templates/profesores.html
+++ b/Cuentas/templates/profesores.html
@@ -7,24 +7,20 @@
 {% endblock %}
 
 {% block content %}
-    <div class="grid h-full grid-cols-12 grid-rows-6 font-primary">
-        <div class="container col-start-1 col-end-2 row-span-full my-1">
+    <div class="grid h-full grid-cols-12 font-primary">
+        <div class="col-span-1">
             {% include 'components/sidebar.html' %}
         </div>
-
-
-        {% include 'components/header.html' with header_title='Profesores' %}
+        <div class="col-start-2 col-span-full">
+            {% include 'components/header.html' with header_title='Profesores' %}
+        </div>
 
 
         <div id="content"
-             class="col-start-2 col-span-full row-start-1 mt-20 mr-8 row-span-full
-             items-start grid grid-rows-2 gap-3 h-full">
+             class="col-start-2 col-span-full
+             items-start grid grid-rows-2 gap-3 pr-2">
             <!-- Teachers -->
             {% include 'components/user_list.html' with users=users|filter_by_role:"P" title="Profesores" %}
         </div>
     </div>
-{% endblock content %}
-
-{% block footer %}
-    {% include 'components/footer.html' %}
-{% endblock %}
+{% endblock content %}
\ No newline at end of file
diff --git a/Fichas/templates/components/ficha-list-card.html b/Fichas/templates/components/ficha-list-card.html
index 72ecb45..49ce0db 100644
--- a/Fichas/templates/components/ficha-list-card.html
+++ b/Fichas/templates/components/ficha-list-card.html
@@ -2,7 +2,7 @@
 <div @mouseover="showInfo{{ forloop.counter0 }} = true"
      @mouseleave="showInfo{{ forloop.counter0 }} = false"
      @click="window.location.href = '{% url 'Fichas:ficha-detail' ficha.student.user.id ficha.assignment.id %}'"
-     class="relative h-64 w-64 cursor-pointer p-4 text-center ring-2 ring-baublack"
+     class="relative cursor-pointer p-2 text-center ring-2 ring-baublack col-span-1 row-span-1 aspect-[1/1]"
      id="card">
     <div id="card-content">
         <span class="inset-0 z-10 block h-full w-full cursor-pointer truncate font-semibold bg-bauyellow font-primary hover:text-baublue">{{ ficha.title }}</span>
diff --git a/Fichas/templates/ficha_list.html b/Fichas/templates/ficha_list.html
index aa58f12..530500a 100644
--- a/Fichas/templates/ficha_list.html
+++ b/Fichas/templates/ficha_list.html
@@ -2,8 +2,8 @@
 {% load static %}
 {% block title %}<title>Fichas</title>{% endblock %}
 {% block content %}
-    <div id="page" class="grid h-48 grid-flow-row-dense grid-cols-12 grid-rows-6">
-        <div class="z-30 col-start-1 col-end-2 row-span-full my-1">
+    <div id="page" class="grid grid-cols-12">
+        <div class="col-span-1 row-span-full my-1">
             {% include 'components/sidebar.html' %}
         </div>
         {% if request.resolver_match.view_name == 'my-fichas' %}
@@ -11,10 +11,8 @@
         {% else %}
             {% include 'components/header.html' with header_title='Fichas' %}
         {% endif %}
-
-
         <div id="content"
-             class="col-start-2 col-end-12 row-start-1 my-1 mt-12 flex grid-flow-row-dense auto-rows-auto flex-row flex-wrap place-content-start items-center justify-evenly gap-2 p-4"
+             class="col-start-2 col-span-full grid-flow-row-dense grid grid-cols-1 gap-3 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 mr-4"
              x-data="{
                  {% for e in fichas %}
                      showInfo{{ forloop.counter0 }}: false,
@@ -25,8 +23,4 @@
             {% endfor %}
         </div>
     </div>
-{% endblock %}
-
-{% block footer %}
-    {% include 'components/footer.html' %}
 {% endblock %}
\ No newline at end of file
diff --git a/templates/components/login_modal.html b/templates/components/login_modal.html
index eabd2f0..2d8fd44 100644
--- a/templates/components/login_modal.html
+++ b/templates/components/login_modal.html
@@ -4,12 +4,15 @@
 {% block content %}
     <div class="grid grid-cols-3 fixed inset-0 items-center justify-center bg-black bg-opacity-20">
 
-        <div class="container mx-auto justify-items-center rounded-t-xl text-zinc-50 bg-bg-bau accent-baublack col-start-2 col-span-1 w-1/2 h-1/3 drop-shadow-lg"
+        <div class="container mx-auto justify-items-center rounded-t-xl text-zinc-50 bg-bg-bau accent-baublack col-start-2 col-span-1 w-1/2 h-fit drop-shadow-lg -mt-16"
              @click.outside="login_modal = false">
             <form method="post" class="grid grid-cols-3 text-baublack gap-2 place-items-center">
-                <div class="row-start-1 row-span-1 bg-baured col-span-full border-baublack border-b-2 mb-6 rounded-t-xl w-full h-12 flex justify-center items-center -mt-1">
+                <div class="row-start-1 row-span-1 bg-baured col-span-full border-baublack border-b-2 rounded-t-xl w-full h-12 flex justify-center items-center -mt-1">
                     <span class="text-xl font-primary font-bold text-white">Inicia Sesion</span>
                 </div>
+                <div class="row-span-1 col-span-full my-3 w-full h-12 flex justify-center items-center">
+                    <span class="text-3xl font-primary font-bold text-baublack">FPP</span>
+                </div>
                 {% csrf_token %}
                 {% for field in form %}
                     <div class="px-12 row-span-1 col-span-full">
@@ -24,7 +27,7 @@
                 <button type="submit" value="Login"
                         x-data="{t : '>'}"
                         x-text="t"
-                        class="col-span-full row-span-1 mt-6 py-1 px-4 rounded-full text-white font-primary bg-baublue hover:bg-baured hover:text-white transition duration-300 ease-in-out"
+                        class="col-span-full row-span-1 my-6 py-1 px-4 rounded-full text-white font-primary bg-baublue hover:bg-baured hover:text-white transition duration-300 ease-in-out"
                         x-on:submit="login_modal=false"
                         @click="t = ':-)'"
                         x-transition.duration-500>
diff --git a/templates/landing.html b/templates/landing.html
index 9564729..7a727df 100644
--- a/templates/landing.html
+++ b/templates/landing.html
@@ -21,7 +21,7 @@
                 <span class="absolute inset-x-0 bottom-0 justify-self-end pb-3">No has iniciado sesión</span>
             </div>
             <div class="container mx-auto my-auto flex basis-3/4 flex-col gap-12 border-t-4 text-center border-baublack">
-                <a class="mx-auto mt-12 rounded-full px-4 py-2 text-white transition-all bg-baublue font-primary hover:ring-baublack hover:ring-2"
+                <a class="cursor-pointer mx-auto mt-12 rounded-full px-4 py-2 text-white transition-all bg-baublue font-primary hover:ring-baublack hover:ring-2"
                    hx-get="{% url 'lmodal' %}"
                    hx-trigger="click"
                    hx-target="#loginmodal"
diff --git a/theme/static/css/dist/styles.css b/theme/static/css/dist/styles.css
index c6393fd..d6b136b 100644
--- a/theme/static/css/dist/styles.css
+++ b/theme/static/css/dist/styles.css
@@ -1716,10 +1716,6 @@ select{
   grid-row-end: 7;
 }
 
-.m-0{
-  margin: 0px;
-}
-
 .mx-1{
   margin-left: 0.25rem;
   margin-right: 0.25rem;
@@ -1750,6 +1746,31 @@ select{
   margin-bottom: auto;
 }
 
+.my-6{
+  margin-top: 1.5rem;
+  margin-bottom: 1.5rem;
+}
+
+.my-3{
+  margin-top: 0.75rem;
+  margin-bottom: 0.75rem;
+}
+
+.-mx-12{
+  margin-left: -3rem;
+  margin-right: -3rem;
+}
+
+.-mx-6{
+  margin-left: -1.5rem;
+  margin-right: -1.5rem;
+}
+
+.mx-4{
+  margin-left: 1rem;
+  margin-right: 1rem;
+}
+
 .-mb-12{
   margin-bottom: -3rem;
 }
@@ -1774,6 +1795,10 @@ select{
   margin-right: -26px;
 }
 
+.-mt-1{
+  margin-top: -0.25rem;
+}
+
 .-mt-2{
   margin-top: -0.5rem;
 }
@@ -1890,8 +1915,20 @@ select{
   margin-top: 1.5rem;
 }
 
-.-mt-1{
-  margin-top: -0.25rem;
+.-mt-16{
+  margin-top: -4rem;
+}
+
+.-mr-12{
+  margin-right: -3rem;
+}
+
+.-mr-6{
+  margin-right: -1.5rem;
+}
+
+.mr-2{
+  margin-right: 0.5rem;
 }
 
 .block{
@@ -1922,6 +1959,10 @@ select{
   display: none;
 }
 
+.aspect-\[1\/1\]{
+  aspect-ratio: 1/1;
+}
+
 .h-1\/2{
   height: 50%;
 }
@@ -2040,6 +2081,10 @@ select{
   width: 100vw;
 }
 
+.w-\[16rem\]{
+  width: 16rem;
+}
+
 .min-w-\[100px\]{
   min-width: 100px;
 }
@@ -2052,10 +2097,6 @@ select{
   min-width: 200px;
 }
 
-.min-w-0{
-  min-width: 0px;
-}
-
 .max-w-5xl{
   max-width: 64rem;
 }
@@ -2072,10 +2113,6 @@ select{
   flex: 1 1 0%;
 }
 
-.flex-auto{
-  flex: 1 1 auto;
-}
-
 .flex-shrink{
   flex-shrink: 1;
 }
@@ -2157,6 +2194,10 @@ select{
   grid-auto-flow: row dense;
 }
 
+.grid-flow-col-dense{
+  grid-auto-flow: column dense;
+}
+
 .auto-rows-auto{
   grid-auto-rows: auto;
 }
@@ -2181,6 +2222,14 @@ select{
   grid-template-columns: repeat(7, minmax(0, 1fr));
 }
 
+.grid-cols-4{
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+}
+
+.grid-cols-2{
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+}
+
 .grid-rows-2{
   grid-template-rows: repeat(2, minmax(0, 1fr));
 }
@@ -2293,6 +2342,10 @@ select{
   gap: 1rem;
 }
 
+.gap-1{
+  gap: 0.25rem;
+}
+
 .gap-x-1{
   -moz-column-gap: 0.25rem;
        column-gap: 0.25rem;
@@ -2457,10 +2510,6 @@ select{
   border-top-width: 4px;
 }
 
-.border-solid{
-  border-style: solid;
-}
-
 .border-baublack{
   --tw-border-opacity: 1;
   border-color: rgb(35 36 30 / var(--tw-border-opacity));
@@ -2486,11 +2535,6 @@ select{
   border-color: rgb(209 213 219 / var(--tw-border-opacity));
 }
 
-.border-neutral-300{
-  --tw-border-opacity: 1;
-  border-color: rgb(212 212 212 / var(--tw-border-opacity));
-}
-
 .bg-baublue{
   --tw-bg-opacity: 1;
   background-color: rgb(69 66 133 / var(--tw-bg-opacity));
@@ -2605,10 +2649,6 @@ select{
   background-attachment: fixed;
 }
 
-.bg-clip-padding{
-  background-clip: padding-box;
-}
-
 .bg-no-repeat{
   background-repeat: no-repeat;
 }
@@ -2716,11 +2756,6 @@ select{
   padding-bottom: 1.5rem;
 }
 
-.py-\[0\.32rem\]{
-  padding-top: 0.32rem;
-  padding-bottom: 0.32rem;
-}
-
 .pb-2{
   padding-bottom: 0.5rem;
 }
@@ -2777,6 +2812,30 @@ select{
   padding-top: 1.25rem;
 }
 
+.pl-\[24rem\]{
+  padding-left: 24rem;
+}
+
+.pl-\[16rem\]{
+  padding-left: 16rem;
+}
+
+.pl-\[2rem\]{
+  padding-left: 2rem;
+}
+
+.pl-\[8rem\]{
+  padding-left: 8rem;
+}
+
+.pl-\[4rem\]{
+  padding-left: 4rem;
+}
+
+.pr-2{
+  padding-right: 0.5rem;
+}
+
 .text-center{
   text-align: center;
 }
@@ -2940,11 +2999,6 @@ select{
   color: rgb(250 250 250 / var(--tw-text-opacity));
 }
 
-.text-neutral-700{
-  --tw-text-opacity: 1;
-  color: rgb(64 64 64 / var(--tw-text-opacity));
-}
-
 .underline{
   text-decoration-line: underline;
 }
@@ -3062,11 +3116,6 @@ select{
   margin-bottom: -0.32rem;
 }
 
-.file\:-mx-3::file-selector-button{
-  margin-left: -0.75rem;
-  margin-right: -0.75rem;
-}
-
 .file\:mr-2::file-selector-button{
   margin-right: 0.5rem;
 }
@@ -3083,82 +3132,25 @@ select{
   border-radius: 0px;
 }
 
-.file\:border-0::file-selector-button{
-  border-width: 0px;
-}
-
-.file\:border-solid::file-selector-button{
-  border-style: solid;
-}
-
 .file\:border-none::file-selector-button{
   border-style: none;
 }
 
-.file\:border-inherit::file-selector-button{
-  border-color: inherit;
-}
-
 .file\:bg-baublue::file-selector-button{
   --tw-bg-opacity: 1;
   background-color: rgb(69 66 133 / var(--tw-bg-opacity));
 }
 
-.file\:bg-neutral-100::file-selector-button{
-  --tw-bg-opacity: 1;
-  background-color: rgb(245 245 245 / var(--tw-bg-opacity));
-}
-
 .file\:py-2::file-selector-button{
   padding-top: 0.5rem;
   padding-bottom: 0.5rem;
 }
 
-.file\:px-3::file-selector-button{
-  padding-left: 0.75rem;
-  padding-right: 0.75rem;
-}
-
-.file\:py-\[0\.32rem\]::file-selector-button{
-  padding-top: 0.32rem;
-  padding-bottom: 0.32rem;
-}
-
 .file\:text-white::file-selector-button{
   --tw-text-opacity: 1;
   color: rgb(255 255 255 / var(--tw-text-opacity));
 }
 
-.file\:text-neutral-700::file-selector-button{
-  --tw-text-opacity: 1;
-  color: rgb(64 64 64 / var(--tw-text-opacity));
-}
-
-.file\:transition::file-selector-button{
-  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
-  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
-  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
-  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-  transition-duration: 150ms;
-}
-
-.file\:duration-150::file-selector-button{
-  transition-duration: 150ms;
-}
-
-.file\:ease-in-out::file-selector-button{
-  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-}
-
-.file\:\[border-inline-end-width\:1px\]::file-selector-button{
-  border-inline-end-width: 1px;
-}
-
-.file\:\[margin-inline-end\:0\.75rem\]::file-selector-button{
-  -webkit-margin-end: 0.75rem;
-          margin-inline-end: 0.75rem;
-}
-
 .placeholder\:text-gray-400::-moz-placeholder{
   --tw-text-opacity: 1;
   color: rgb(156 163 175 / var(--tw-text-opacity));
@@ -3190,6 +3182,10 @@ select{
   animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
 }
 
+.hover\:cursor-pointer:hover{
+  cursor: pointer;
+}
+
 .hover\:rounded-lg:hover{
   border-radius: 0.5rem;
 }
@@ -3214,6 +3210,11 @@ select{
   background-color: rgb(69 66 133 / var(--tw-bg-opacity));
 }
 
+.hover\:bg-baured:hover{
+  --tw-bg-opacity: 1;
+  background-color: rgb(197 64 45 / var(--tw-bg-opacity));
+}
+
 .hover\:bg-bauyellow\/80:hover{
   background-color: rgb(254 194 35 / 0.8);
 }
@@ -3278,11 +3279,6 @@ select{
   background-color: rgb(161 161 170 / var(--tw-bg-opacity));
 }
 
-.hover\:bg-baured:hover{
-  --tw-bg-opacity: 1;
-  background-color: rgb(197 64 45 / var(--tw-bg-opacity));
-}
-
 .hover\:text-baublue:hover{
   --tw-text-opacity: 1;
   color: rgb(69 66 133 / var(--tw-text-opacity));
@@ -3298,14 +3294,14 @@ select{
   color: rgb(56 189 248 / var(--tw-text-opacity));
 }
 
-.hover\:text-zinc-50:hover{
+.hover\:text-white:hover{
   --tw-text-opacity: 1;
-  color: rgb(250 250 250 / var(--tw-text-opacity));
+  color: rgb(255 255 255 / var(--tw-text-opacity));
 }
 
-.hover\:text-white:hover{
+.hover\:text-zinc-50:hover{
   --tw-text-opacity: 1;
-  color: rgb(255 255 255 / var(--tw-text-opacity));
+  color: rgb(250 250 250 / var(--tw-text-opacity));
 }
 
 .hover\:underline:hover{
@@ -3355,26 +3351,11 @@ select{
   background-color: rgb(37 99 235 / var(--tw-bg-opacity));
 }
 
-.hover\:file\:bg-neutral-200::file-selector-button:hover{
-  --tw-bg-opacity: 1;
-  background-color: rgb(229 229 229 / var(--tw-bg-opacity));
-}
-
 .focus\:border-indigo-300:focus{
   --tw-border-opacity: 1;
   border-color: rgb(165 180 252 / var(--tw-border-opacity));
 }
 
-.focus\:text-neutral-700:focus{
-  --tw-text-opacity: 1;
-  color: rgb(64 64 64 / var(--tw-text-opacity));
-}
-
-.focus\:outline-none:focus{
-  outline: 2px solid transparent;
-  outline-offset: 2px;
-}
-
 .focus\:ring:focus{
   --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
   --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);
@@ -3397,11 +3378,6 @@ select{
 }
 
 @media (prefers-color-scheme: dark){
-  .dark\:border-neutral-600{
-    --tw-border-opacity: 1;
-    border-color: rgb(82 82 82 / var(--tw-border-opacity));
-  }
-
   .dark\:bg-neutral-700{
     --tw-bg-opacity: 1;
     background-color: rgb(64 64 64 / var(--tw-bg-opacity));
@@ -3421,27 +3397,53 @@ select{
     --tw-text-opacity: 1;
     color: rgb(255 255 255 / var(--tw-text-opacity));
   }
+}
 
-  .dark\:file\:bg-neutral-700::file-selector-button{
-    --tw-bg-opacity: 1;
-    background-color: rgb(64 64 64 / var(--tw-bg-opacity));
+@media (min-width: 640px){
+  .sm\:grid-cols-4{
+    grid-template-columns: repeat(4, minmax(0, 1fr));
   }
 
-  .dark\:file\:text-neutral-100::file-selector-button{
-    --tw-text-opacity: 1;
-    color: rgb(245 245 245 / var(--tw-text-opacity));
+  .sm\:grid-cols-2{
+    grid-template-columns: repeat(2, minmax(0, 1fr));
   }
-}
 
-@media (min-width: 640px){
   .sm\:text-sm{
     font-size: 0.875rem;
     line-height: 1.25rem;
   }
 }
 
+@media (min-width: 768px){
+  .md\:grid-cols-4{
+    grid-template-columns: repeat(4, minmax(0, 1fr));
+  }
+
+  .md\:grid-cols-3{
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+  }
+}
+
 @media (min-width: 1024px){
+  .lg\:grid-cols-6{
+    grid-template-columns: repeat(6, minmax(0, 1fr));
+  }
+
+  .lg\:grid-cols-4{
+    grid-template-columns: repeat(4, minmax(0, 1fr));
+  }
+
   .lg\:text-left{
     text-align: left;
   }
 }
+
+@media (min-width: 1280px){
+  .xl\:grid-cols-6{
+    grid-template-columns: repeat(6, minmax(0, 1fr));
+  }
+
+  .xl\:grid-cols-5{
+    grid-template-columns: repeat(5, minmax(0, 1fr));
+  }
+}