Upgrade to tailwindcss v4.0.13 (#4443)

```
npx @tailwindcss/upgrade
```

- Linked `./tailwind.config.js` to
`./hypha/static_src/tailwind/main.css`
- Migrated configuration file: `./tailwind.config.js`
- Migrated templates for configuration file: `./tailwind.config.js`
- Migrated stylesheet: `./hypha/static_src/tailwind/main.css`
- Updated package: `tailwindcss`
- Verifed the changes - it had modified some un-indented

https://tailwindcss.com/docs/upgrade-guide

fixes #4389

Author: theskumar

.editorconfig

@@ -10,7 +10,7 @@ indent_style = space
 insert_final_newline = true
 trim_trailing_whitespace = true
 
-[*.{yml,yaml,js,json}]
+[*.{yml,yaml,js,json,css}]
 indent_size = 2
 
 [*.md]

.pre-commit-config.yaml

@@ -59,7 +59,7 @@ repos:
           - rustywind@latest
         entry: rustywind
         args: [--write]
-        types_or: [html]
+        types_or: [html, css]
 
   - repo: https://github.com/biomejs/pre-commit
     rev: "v0.6.1"

biome.json

@@ -108,10 +108,5 @@
       "trailingCommas": "es5"
     },
     "globals": ["define", "htmx", "jQuery", "Alpine"]
-  },
-  "css": {
-    "formatter": {
-      "indentWidth": 4
-    }
   }
 }

docs/assets/extra.css

@@ -1,7 +1,7 @@
 :root {
-    --md-primary-fg-color: #1269a1;
+  --md-primary-fg-color: #1269a1;
 }
 
 [dir="ltr"] .md-header__title {
-    margin-left: 0.2rem;
+  margin-left: 0.2rem;
 }

hypha/apply/activity/templates/activity/partial_comment_message.html

@@ -13,7 +13,7 @@
         <div class="flex flex-wrap gap-2 pb-2 mt-4 max-w-xl min-w-40">
             {% for attachment in attachments %}
                 <a href="{{attachment.get_absolute_url }}"
-                   class="inline-flex items-center py-2 px-3 font-medium rounded border transition-colors bg-slate-50 hover:bg-slate-200"
+                   class="inline-flex items-center py-2 px-3 font-medium rounded-sm border transition-colors bg-slate-50 hover:bg-slate-200"
                    target="_blank"
                    rel="noopener noreferrer"
                    title="{{ attachment.filename }}"

hypha/apply/activity/templates/activity/ui/activity-comment-item.html

@@ -13,7 +13,7 @@
                 </div>
             </div>
 
-            <div class="{% if activity.user == request.user %}border-cyan-300{% else %}border-gray-300{% endif %} flex-1 pb-2 bg-white border rounded target:ring-2 target:ring-cyan-500 scroll-m-2"
+            <div class="{% if activity.user == request.user %}border-cyan-300{% else %}border-gray-300{% endif %} flex-1 pb-2 bg-white border rounded-sm target:ring-2 target:ring-cyan-500 scroll-m-2"
                  id="communications--{{ activity.id }}">
                 <header class="{% if activity.user == request.user %}bg-fuchsia-100{% else %}bg-slate-100{% endif %} flex flex-wrap items-center justify-between gap-2 px-3 py-2 rounded-t">
                     <div>

hypha/apply/activity/templates/activity/ui/edit_comment_form.html

@@ -18,7 +18,7 @@
             rows="10" name="message"
         >{{ activity.message }}</textarea>
 
-        <div id="wmd-preview-edit-comment-{{ activity.id }}" class="p-4 w-full max-w-none bg-gray-100 shadow-sm prose"></div>
+        <div id="wmd-preview-edit-comment-{{ activity.id }}" class="p-4 w-full max-w-none bg-gray-100 shadow-xs prose"></div>
     </div>
 
     <div class="flex gap-2">

hypha/apply/dashboard/templates/dashboard/applicant_dashboard.html

@@ -82,7 +82,9 @@ <h4 class="font-bold heading heading--no-margin"><a class="link" href="{{ invoic
                                 {% display_invoice_table_status_for_user invoice.status request.user as invoice_status %}
                                 <div class="flex-1 w-full"></div>
                                 <div class="w-full max-w-fit text-end">
-                                    <p class="{{ invoice_status|invoice_status_bg_color }} text-base py-2 px-3 {{ invoice_status|invoice_status_fg_color }}">{{ invoice_status }}</p>
+                                    <p class="{{ invoice_status|invoice_status_bg_color }} text-sm font-semibold py-2 px-3 rounded-sm shadow-xs {{ invoice_status|invoice_status_fg_color }}">
+                                        {{ invoice_status }}
+                                    </p>
                                 </div>
                             </div>
                         </div>

hypha/apply/dashboard/templates/dashboard/community_dashboard.html

@@ -21,7 +21,7 @@ <h3 class="mb-0 text-xl">{% trans "Submit a new application" %}</h3>
 
         <div class="wrapper wrapper--bottom-space">
             <h2 class="mb-2 text-xl">
-                {% trans "Community review submissions" %} <span class="py-0.5 px-2.5 text-sm font-medium text-blue-800 bg-blue-100 rounded me-2">{{ my_community_review_count }}</span>
+                {% trans "Community review submissions" %} <span class="py-0.5 px-2.5 text-sm font-medium text-blue-800 bg-blue-100 rounded-sm me-2">{{ my_community_review_count }}</span>
             </h2>
 
             {% if my_community_review.data %}

hypha/apply/dashboard/templates/dashboard/includes/my-tasks.html

@@ -4,7 +4,7 @@
     {% if my_tasks.data %}
         <h2 class="font-light text-center">{% trans "My tasks" %}</h2>
 
-        <div class="border divide-y shadow-sm task--list">
+        <div class="border divide-y shadow-xs task--list">
             {% for task in my_tasks.data %}
                 {% include "todo/todolist_item.html" with button_type_class="button--transparent" %}
             {% endfor %}

hypha/apply/dashboard/templates/dashboard/includes/project_status_bar.html

@@ -1,4 +1,5 @@
 {% load dashboard_statusbar_tags %}
+
 <div class="status-bar my-6 {{ class }}">
     {% for status, text in statuses %}
         {% if forloop.counter0 == current_status_index %}
@@ -13,6 +14,6 @@
 
 <div class="mt-5 status-bar--mobile">
     <div class="status-bar__subheading status-bar__text">
-        {{ current_status }}
+        {{ current_status_name }}
     </div>
 </div>

hypha/apply/dashboard/templates/dashboard/includes/submissions-waiting-for-review.html

@@ -2,7 +2,7 @@
 {% load i18n %}
 
 <h2 class="mb-2 text-xl">
-    <a href="{% url "apply:submissions:list" %}?query=reviewer:@me">{% trans "Submissions waiting for your review" %} <span class="py-0.5 px-2.5 text-sm font-medium text-blue-800 bg-blue-100 rounded me-2">{{ in_review_count }}</span></a>
+    <a href="{% url "apply:submissions:list" %}?query=reviewer:@me">{% trans "Submissions waiting for your review" %} <span class="py-0.5 px-2.5 text-sm font-medium text-blue-800 bg-blue-100 rounded-sm me-2">{{ in_review_count }}</span></a>
 </h2>
 
 {% if my_review.data %}
@@ -17,7 +17,7 @@ <h2 class="mb-2 text-xl">
     {% endif %}
 
 {% else %}
-    <div class="py-10 px-2 w-full text-center bg-white border shadow-sm">
+    <div class="py-10 px-2 w-full text-center bg-white border shadow-xs">
         <p class="my-2 text-base">{% trans "Nice! You're all caught up. 🎉" %}</p>
         <a class="button button--primary" href="{% url 'apply:submissions:list' %}" hx-boost='true'>{% trans "Find new applications to review" %}</a>
     </div>

hypha/apply/dashboard/templates/dashboard/partner_dashboard.html

@@ -17,7 +17,7 @@
 
         <div class="wrapper wrapper--bottom-space">
             <h4 class="heading heading--normal">
-                {% trans "You are the partner of these submissions" %} <span class="py-0.5 px-2.5 text-sm font-medium text-blue-800 bg-blue-100 rounded dark:text-blue-300 dark:bg-blue-900 me-2">{{ partner_submissions_count }}</span>
+                {% trans "You are the partner of these submissions" %} <span class="py-0.5 px-2.5 text-sm font-medium text-blue-800 bg-blue-100 rounded-sm dark:text-blue-300 dark:bg-blue-900 me-2">{{ partner_submissions_count }}</span>
             </h4>
 
             {% if partner_submissions.data %}

hypha/apply/dashboard/templates/dashboard/reviewer_dashboard.html

@@ -19,7 +19,7 @@
         {% if my_flagged.count %}
             <div id="submissions-flagged" class="wrapper wrapper--bottom-space">
                 <h3 class="mb-2 text-xl">
-                    <a href="{% url "apply:submissions:list" %}?query=flagged:@me">Your flagged submissions <span class="py-0.5 px-2.5 text-sm font-medium text-blue-800 bg-blue-100 rounded me-2">({{ my_flagged.count }})</span></a>
+                    <a href="{% url "apply:submissions:list" %}?query=flagged:@me">Your flagged submissions <span class="py-0.5 px-2.5 text-sm font-medium text-blue-800 bg-blue-100 rounded-sm me-2">({{ my_flagged.count }})</span></a>
                 </h3>
 
                 {% include "submissions/partials/submissions-inline.html" with submissions=my_flagged.objects row_layout="table" %}
@@ -34,7 +34,7 @@ <h3 class="mb-2 text-xl">
 
         {% if my_reviewed.count %}
             <div class="wrapper wrapper--bottom-space">
-                <h3 class="mb-2 text-xl"><a href="{% url "apply:submissions:list" %}?query=reviewed-by:@me">{% trans "Your previous reviews" %} <span class="py-0.5 px-2.5 text-sm font-medium text-blue-800 bg-blue-100 rounded me-2">{{ my_reviewed.count }}</span></a></h3>
+                <h3 class="mb-2 text-xl"><a href="{% url "apply:submissions:list" %}?query=reviewed-by:@me">{% trans "Your previous reviews" %} <span class="py-0.5 px-2.5 text-sm font-medium text-blue-800 bg-blue-100 rounded-sm me-2">{{ my_reviewed.count }}</span></a></h3>
 
                 {% include "submissions/partials/submissions-inline.html" with submissions=my_reviewed.objects row_layout="table" %}
 

hypha/apply/dashboard/templates/dashboard/staff_dashboard.html

@@ -24,22 +24,22 @@
             {% endif %}
 
             <div class="stat-block">
-                <a href="#submissions-awaiting-review" class="border shadow-sm stat-block__item">
+                <a href="#submissions-awaiting-review" class="border shadow-xs stat-block__item">
                     <p class="stat-block__number">{{ awaiting_reviews.count }}</p>
                     <p class="stat-block__text">{% trans "Submissions waiting for your review" %}</p>
                     {% if awaiting_reviews.count %}
                         <div class="stat-block__view">{% trans "View" %}</div>
                     {% endif %}
                 </a>
                 {% if PROJECTS_ENABLED %}
-                    <a href="#active-projects" class="border shadow-sm stat-block__item">
+                    <a href="#active-projects" class="border shadow-xs stat-block__item">
                         <p class="stat-block__number">{{ projects.count }}</p>
                         <p class="stat-block__text">{% trans "Live projects under your management" %}</p>
                         {% if projects.count %}
                             <div class="stat-block__view">{% trans "View" %}</div>
                         {% endif %}
                     </a>
-                    <a href="#active-invoices" class="border shadow-sm stat-block__item">
+                    <a href="#active-invoices" class="border shadow-xs stat-block__item">
                         <p class="stat-block__number">{{ active_invoices.count }}</p>
                         <p class="stat-block__text">{% trans "Requests for invoices requiring your attention" %}</p>
                         {% if active_invoices.count %}
@@ -48,13 +48,13 @@
                     </a>
                 {% else %}
                     {% if my_flagged.count %}
-                        <a href="#submissions-flagged" class="border shadow-sm stat-block__item">
+                        <a href="#submissions-flagged" class="border shadow-xs stat-block__item">
                             <p class="stat-block__number">{{ my_flagged.count }}</p>
                             <p class="stat-block__text">Your flagged submissions</p>
                         </a>
                     {% endif %}
                     {% if my_reviewed.count %}
-                        <a href="#my-review" class="border shadow-sm stat-block__item">
+                        <a href="#my-review" class="border shadow-xs stat-block__item">
                             <p class="stat-block__number">{{ my_reviewed.count }}</p>
                             <p class="stat-block__text">{% trans "Your previous reviews" %}</p>
                         </a>
@@ -70,7 +70,7 @@
         {% if my_flagged.count %}
             <div id="submissions-flagged" class="wrapper wrapper--bottom-space">
                 <h3 class="mb-2 text-xl">
-                    <a href="{% url "apply:submissions:list" %}?query=flagged:@me">Your flagged submissions <span class="py-0.5 px-2.5 text-sm font-medium text-blue-800 bg-blue-100 rounded me-2">{{ my_flagged.count }}</span></a>
+                    <a href="{% url "apply:submissions:list" %}?query=flagged:@me">Your flagged submissions <span class="py-0.5 px-2.5 text-sm font-medium text-blue-800 bg-blue-100 rounded-sm me-2">{{ my_flagged.count }}</span></a>
                 </h3>
 
                 {% include "submissions/partials/submissions-inline.html" with submissions=my_flagged.objects row_layout="table" %}
@@ -117,7 +117,7 @@ <h4 class="heading heading--normal">{% trans "Active Invoices" %}</h4>
 
         {% if my_reviewed.count %}
             <div class="wrapper wrapper--bottom-space">
-                <h3 class="mb-2 text-xl"><a href="{% url "apply:submissions:list" %}?query=reviewed-by:@me">{% trans "Your previous reviews" %} <span class="py-0.5 px-2.5 text-sm font-medium text-blue-800 bg-blue-100 rounded me-2">{{ my_reviewed.count }}</span></a></h3>
+                <h3 class="mb-2 text-xl"><a href="{% url "apply:submissions:list" %}?query=reviewed-by:@me">{% trans "Your previous reviews" %} <span class="py-0.5 px-2.5 text-sm font-medium text-blue-800 bg-blue-100 rounded-sm me-2">{{ my_reviewed.count }}</span></a></h3>
                 {% include "submissions/partials/submissions-inline.html" with submissions=my_reviewed.objects row_layout="table" %}
 
                 {% if my_reviewed.display_more %}

hypha/apply/dashboard/templatetags/dashboard_statusbar_tags.py

@@ -17,11 +17,17 @@ def project_status_bar(current_status, user, author=False, css_class=""):
     if is_applicant:
         statuses = PROJECT_PUBLIC_STATUSES
 
+    # Get the display name for the current status
+    current_status_name = dict(PROJECT_STATUS_CHOICES).get(
+        current_status, current_status
+    )
+
     return {
         "statuses": statuses,
         "current_status_index": [status for status, _ in PROJECT_STATUS_CHOICES].index(
             current_status
         ),
         "current_status": current_status,
+        "current_status_name": current_status_name,
         "class": css_class,
     }

hypha/apply/determinations/templates/determinations/base_determination_form.html

@@ -61,7 +61,7 @@ <h2>{{ value }}</h2>
                 {% endblock %}
             </form>
             {% for type, message in message_templates.items %}
-                <div class="is-hidden" data-type="{{ type }}" id="determination-message-{{ type }}">
+                <div class="hidden" data-type="{{ type }}" id="determination-message-{{ type }}">
                     {{ message }}
                 </div>
             {% endfor %}

hypha/apply/flags/templates/flags/flags.html

@@ -2,7 +2,7 @@
 <form class="flex gap-4 wrapper wrapper--sidebar-buttons" id="submission-flags">
     {% with submission|flagged_by:user as is_flagged %}
         <button
-            class="button button--secondary flex items-center gap-4 !px-2 !py-3 w-full"
+            class="button button--secondary flex items-center gap-4 px-2! py-3! w-full"
             {% if submission.is_archive %}
                 disabled=true
             {% else %}
@@ -28,7 +28,7 @@
     {% if request.user.is_apply_staff %}
         {% with submission|flagged_staff as is_flagged %}
             <button
-                class="button button--secondary flex items-center gap-4 !px-2 !py-3 w-full whitespace-nowrap"
+                class="button button--secondary flex items-center gap-4 px-2! py-3! w-full whitespace-nowrap"
                 {% if submission.is_archive %}
                     disabled=true
                 {% else %}

hypha/apply/funds/templates/funds/applicationsubmission_admin_detail.html

@@ -65,7 +65,7 @@ <h5>{% trans "Reviews & assignees" %}</h5>
         <div class="flex gap-4 justify-between pb-4">
             <h5 class="m-0">{% trans "Reminders" %}</h5>
             <button
-                class="flex items-center py-1 px-2 font-bold rounded transition-colors hover:bg-gray-100 text-dark-blue -me-2"
+                class="flex items-center py-1 px-2 font-bold rounded-sm transition-colors hover:bg-gray-100 text-dark-blue -me-2"
                 hx-get="{% url 'funds:submissions:create_reminder' pk=object.pk %}"
                 hx-target="#htmx-modal"
                 role="button"

hypha/apply/funds/templates/funds/applicationsubmission_confirm_delete.html

@@ -4,7 +4,7 @@
     {% csrf_token %}
 
     <div class="sm:flex sm:items-start">
-        <div class="flex flex-shrink-0 justify-center items-center mx-auto w-12 h-12 bg-red-100 rounded-full sm:mx-0 sm:w-10 sm:h-10">
+        <div class="flex justify-center items-center mx-auto w-12 h-12 bg-red-100 rounded-full sm:mx-0 sm:w-10 sm:h-10 shrink-0">
             {% heroicon_outline "exclamation-triangle" class="w-6 h-6 text-red-600" stroke_width="1.5" aria_hidden="true" %}
             {% comment %} <svg class="w-6 h-6 text-red-600" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
                 <path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126zM12 15.75h.007v.008H12v-.008z"></path>
@@ -37,11 +37,11 @@ <h3 class="text-base font-semibold leading-6 text-gray-900" id="modal-title">Del
         <button
             type="submit"
             x-bind:disabled="value !== 'delete'"
-            class="inline-flex justify-center py-2 px-3 w-full text-sm font-semibold text-white bg-red-600 rounded-sm shadow-sm sm:ml-3 sm:w-auto hover:bg-red-500 disabled:opacity-50 disabled:cursor-not-allowed"
+            class="inline-flex justify-center py-2 px-3 w-full text-sm font-semibold text-white bg-red-600 sm:ml-3 sm:w-auto hover:bg-red-500 disabled:opacity-50 disabled:cursor-not-allowed rounded-xs shadow-xs"
         >{% trans "Delete" %}</button>
         <button
             type="button"
-            class="inline-flex justify-center py-2 px-3 mt-3 w-full text-sm font-semibold text-gray-900 bg-white rounded-sm ring-1 ring-inset ring-gray-300 shadow-sm sm:mt-0 sm:w-auto hover:bg-gray-50"
+            class="inline-flex justify-center py-2 px-3 mt-3 w-full text-sm font-semibold text-gray-900 bg-white ring-1 ring-inset ring-gray-300 sm:mt-0 sm:w-auto hover:bg-gray-50 rounded-xs shadow-xs"
             @click="show = false"
         >{% trans "Cancel" %}</button>
     </div>

hypha/apply/funds/templates/funds/applicationsubmission_detail.html

@@ -7,7 +7,7 @@
 {% block body_class %}{% endblock %}
 
 {% block content %}
-    <div class="admin-bar">
+    <div class="pt-4 pb-0 admin-bar">
         <div class="admin-bar__inner">
 
             {% if object.project %}
@@ -62,14 +62,14 @@ <h5>{% blocktrans with stage=object.previous.stage %}Your {{ stage }} applicatio
             {% else %}
                 <article class="wrapper--sidebar--inner">
                     {% if object.is_archive %}
-                        <div class="flex gap-2 justify-center items-center py-2 mb-4 font-semibold text-center text-white bg-red-600 rounded-sm">
+                        <div class="flex gap-2 justify-center items-center py-2 mb-4 font-semibold text-center text-white bg-red-600 rounded-xs">
                             {% heroicon_outline "lock-closed" aria_hidden="true" size=16 stroke_width=2 class="inline align-baseline me-1" %}
                             {% trans "This application has been archived. This is visible to the roles " %} {{ archive_access_groups|join_with_commas }}.
                         </div>
                     {% endif %}
 
                     {% if object.round.specific.is_sealed %}
-                        <div class="flex gap-2 justify-center items-center py-2 mb-4 font-semibold text-center text-white bg-red-600 rounded-sm">
+                        <div class="flex gap-2 justify-center items-center py-2 mb-4 font-semibold text-center text-white bg-red-600 rounded-xs">
                             {% heroicon_outline "clock" aria_hidden="true" size=16 stroke_width=2 class="inline align-baseline me-1" %}
                             {% trans "This application is sealed." %}
                         </div>

hypha/apply/funds/templates/funds/comments.html

@@ -4,7 +4,7 @@
 {% block title %}Comments: {{ object.title_text_display }}{% endblock %}
 
 {% block content %}
-    <div class="admin-bar">
+    <div class="pt-4 pb-0 admin-bar">
         <div class="admin-bar__inner">
 
             {% if object.project %}