Add Tailwind + Django Web Component (#3277)

Fixes #ISSUEID Introduce tailwindcss[1] utilities and django-web-component[2] for frontend design isolation and reusability. Notes: - Saas rules take preference over the tailwind (we might want to change it) - In the future, the saas should be depreciated, and reusable classes should be updated to use tailwindcss [1] https://tailwindcss.com/ [2] https://github.com/Xzya/django-web-components --------- Co-authored-by: Fredrik Jonsson <[email protected]>
HyphaApp · Mar 20, 2023 · 56978c8 · 56978c8
1 parent 00dedb7
commit 56978c8
Show file tree

Hide file tree

Showing 33 changed files with 760 additions and 265 deletions.
diff --git a/hypha/apply/dashboard/templates/dashboard/community_dashboard.html b/hypha/apply/dashboard/templates/dashboard/community_dashboard.html
@@ -5,25 +5,23 @@
 {% block title %}{% trans "Dashboard" %}{% endblock %}
 
 {% block content %}
-<div class="admin-bar">
-    <div class="admin-bar__inner wrapper--applicant-dashboard">
-        <div>
-            <h3 class="heading heading--no-margin">{% trans "Dashboard" %}</h3>
-            <h5>{% trans "An overview of active and past submissions" %}</h5>
-        </div>
+
+    {% adminbar %}
+        {% slot header %}{% trans "Dashboard" %}{% endslot %}
+        {% slot sub_heading %}{% trans "An overview of active and past submissions" %}{% endslot %}
+
         <div class="wrapper wrapper--cta-box">
             <h4 class="heading heading--no-margin">{% trans "Submit a new application" %}</h4>
             <h5 class="heading heading--normal">{% trans "Apply now for our open rounds" %}</h5>
             <a class="button button--primary" href="{% pageurl APPLY_SITE.root_page %}" class="button">{% trans "Apply" %}</a>
         </div>
-    </div>
-</div>
+    {% endadminbar %}
 
 <div class="wrapper wrapper--large wrapper--inner-space-medium">
 
     <div class="wrapper wrapper--bottom-space">
         <h4 class="heading heading--normal">
-            {% trans "Community review submissions" %} <span class="heading heading--submission-count">{{ my_community_review_count }}</span>
+            {% trans "Community review submissions" %} <span class="bg-blue-100 text-blue-800 text-sm font-medium mr-2 px-2.5 py-0.5 rounded dark:bg-blue-900 dark:text-blue-300">{{ my_community_review_count }}</span>
         </h4>
 
         {% if my_community_review.data %}

diff --git a/hypha/apply/dashboard/templates/dashboard/dashboard.html b/hypha/apply/dashboard/templates/dashboard/dashboard.html
@@ -9,48 +9,46 @@
 {% block title %}{% trans "Dashboard" %}{% endblock %}
 
 {% block content %}
-<div class="admin-bar">
-    <div class="admin-bar__inner admin-bar__inner--with-button">
-        {% block page_header %}
-            <h1 class="gamma heading heading--no-margin heading--bold">{% trans "Dashboard" %}</h1>
-        {% endblock %}
+
+    {% adminbar %}
+        {% slot header %}{% trans "Dashboard" %}{% endslot %}
+        {% slot sub_heading %}{% trans "Welcome" %}, {{ request.user }}!{% endslot %}
+
         {% if perms.wagtailadmin.access_admin %}
             <a href="{% url 'wagtailadmin_home' %}" id="wagtail-admin-button" class="button button--primary button--arrow-pixels-white">
                 {% trans "Apply admin" %}
                 <svg><use xlink:href="#arrow-head-pixels--solid"></use></svg>
             </a>
         {% endif %}
-    </div>
-</div>
-<div class="wrapper wrapper--large wrapper--inner-space-medium">
-
+    {% endadminbar %}
 
+<div class="wrapper wrapper--large wrapper--inner-space-medium">
     <div class="wrapper wrapper--bottom-space">
         <div class="stat-block">
-            <a href="#submissions-awaiting-review" class="stat-block__item">
+            <a href="#submissions-awaiting-review" class="stat-block__item border">
                 <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>
-            <a href="#active-projects" class="stat-block__item">
+            <a href="#active-projects" class="stat-block__item border">
                 <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>
             {% if not paf_waiting_for_approval.count is None%}
-            <a href="#paf-awaiting-approval" class="stat-block__item">
+            <a href="#paf-awaiting-approval" class="stat-block__item border">
                 <p class="stat-block__number">{{ paf_waiting_for_approval.count }}</p>
                 <p class="stat-block__text">{% trans "Projects awaiting approval" %}</p>
                 {% if paf_waiting_for_approval.count %}
                     <div class="stat-block__view">{% trans "View" %}</div>
                 {% endif %}
             </a>
             {% endif %}
-            <a href="#active-invoices" class="stat-block__item">
+            <a href="#active-invoices" class="stat-block__item border">
                 <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 %}

diff --git a/hypha/apply/dashboard/templates/dashboard/includes/submissions-waiting-for-review.html b/hypha/apply/dashboard/templates/dashboard/includes/submissions-waiting-for-review.html
@@ -1,8 +1,8 @@
 {% load render_table from django_tables2 %}
 {% load i18n %}
 
-<h4 class="heading heading--normal">
-    {% trans "Submissions waiting for your review" %} <span class="heading heading--submission-count">{{ in_review_count }}</span>
+<h4 class="text-xl font-medium mb-1">
+    {% trans "Submissions waiting for your review" %} <span class="bg-blue-100 text-blue-800 text-sm font-medium mr-2 px-2.5 py-0.5 rounded dark:bg-blue-900 dark:text-blue-300">{{ in_review_count }}</span>
 </h4>
 
 {% if my_review.data %}
@@ -15,8 +15,8 @@ <h4 class="heading heading--normal">
     {% endif %}
 
 {% else %}
-    <div class="reviewer-dash-box">
-        <h5 class="reviewer-dash-box__title">{% trans "Nice! You're all caught up." %}</h5>
+    <div class="border py-10 bg-white w-full text-center px-2">
+        <p class="text-base my-2">{% 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>
     {# TODO Fill in data and update styles in future ticket #}

diff --git a/hypha/apply/dashboard/templates/dashboard/partner_dashboard.html b/hypha/apply/dashboard/templates/dashboard/partner_dashboard.html
@@ -5,19 +5,19 @@
 {% block title %}{% trans "Dashboard" %}{% endblock %}
 
 {% block content %}
-<div class="admin-bar">
-    <div class="admin-bar__inner">
-        {% block page_header %}
-            <h1 class="gamma heading heading--no-margin heading--bold">{% trans "Dashboard" %}</h1>
-        {% endblock %}
-    </div>
-</div>
+
+    {% adminbar %}
+
+        {% slot header %}{% trans "Dashboard" %}{% endslot %}
+        {% slot sub_heading %}{% trans "Welcome" %}, {{ request.user }}!{% endslot %}
+
+    {% endadminbar %}
 
 <div class="wrapper wrapper--large wrapper--inner-space-medium">
 
     <div class="wrapper wrapper--bottom-space">
         <h4 class="heading heading--normal">
-            {% trans "You are the partner of these submissions" %} <span class="heading heading--submission-count">{{ partner_submissions_count }}</span>
+            {% trans "You are the partner of these submissions" %} <span class="bg-blue-100 text-blue-800 text-sm font-medium mr-2 px-2.5 py-0.5 rounded dark:bg-blue-900 dark:text-blue-300">{{ partner_submissions_count }}</span>
         </h4>
 
         {% if partner_submissions.data %}

diff --git a/hypha/apply/funds/templates/funds/grouped_application_list.html b/hypha/apply/funds/templates/funds/grouped_application_list.html
@@ -6,16 +6,12 @@
 {{ filter.form.media.css }}
 {% endblock %}
 
-{% block content%}
-<div class="admin-bar">
-        <div class="admin-bar__inner wrapper--search">
-                {% block page_header %}
-                    <div>
-                        <h1 class="gamma heading heading--no-margin heading--bold">{% trans "List of Submissions summary" %}</h1>
-                    </div>
-                {% endblock %}
-        </div>
-</div>
+{% block content %}
+
+    {% adminbar %}
+        {% slot header %}{% trans "List of Submissions summary" %}{% endslot %}
+    {% endadminbar %}
+
 <div id="grouped-applications-list"></div>
 {% endblock %}
 

diff --git a/hypha/apply/funds/templates/funds/reviewer_leaderboard.html b/hypha/apply/funds/templates/funds/reviewer_leaderboard.html
@@ -5,19 +5,25 @@
 {% block title %}{% trans "Reviews" %}{% endblock %}
 
 {% block content %}
-<div class="admin-bar">
-    <div class="admin-bar__inner wrapper--search">
-        {% block page_header %}
-            <div>
-                <h1 class="gamma heading heading--no-margin heading--bold">{% trans "Reviewer leaderboard" %}</h1>
-                <h5>{% trans "Track and explore the reviews" %}</h5>
+
+    {% adminbar %}
+        {% slot header %}{% trans "Reviewer leaderboard" %}{% endslot %}
+        {% slot sub_heading %}{% trans "Track and explore the reviews" %}{% endslot %}
+
+        {% if request.user.is_apply_staff %}
+            <div class="flex mt-2 md:m-0 gap-3 justify-center items-center font-medium uppercase" hx-boost="true">
+                <a class="px-3 py-2 text-gray-300 transition-colors hover:bg-slate-50 rounded hover:text-gray-800" href="{% url 'apply:submissions:staff_assignments' %}">
+                    {% trans "Staff assignments" %}
+                </a>
+                <a class="px-3 py-2 bg-slate-50 rounded text-gray-800" href="{% url 'apply:submissions:reviewer_leaderboard' %} aria-current="page"">
+                    {% trans "Reviews" %}
+                </a>
+                <a class="px-3 py-2 text-gray-300 transition-colors hover:bg-slate-50 rounded hover:text-gray-800" href="{% url 'apply:submissions:result' %}">
+                    {% trans "Results" %}
+                </a>
             </div>
-        {% endblock %}
-        {% block page_header_tabs %}
-            {{ block.super }}
-        {% endblock %}
-    </div>
-</div>
+        {% endif %}
+    {% endadminbar %}
 
 <div class="wrapper wrapper--large wrapper--inner-space-medium">
     {% block table %}

diff --git a/hypha/apply/funds/templates/funds/reviewer_leaderboard_detail.html b/hypha/apply/funds/templates/funds/reviewer_leaderboard_detail.html
@@ -5,23 +5,15 @@
 {% block title %}{% trans "Reviews" %}{% endblock %}
 
 {% block content %}
-<div class="admin-bar">
-    <div class="admin-bar__inner wrapper--search">
-        {% block page_header %}
-            <div>
-                <h1 class="gamma heading heading--no-margin heading--bold">{% blocktrans %}Reviews by {{ object }}{% endblocktrans %}</h1>
-                <h5>{% trans "Track and explore the reviews" %}</h5>
-            </div>
-        {% endblock %}
-        {% block page_header_tabs %}
-            {{ block.super }}
+
+    {% adminbar %}
+        {% slot header %}{% blocktrans %}Reviews by {{ object }}{% endblocktrans %}{% endslot %}
+        {% slot sub_heading %}{% trans "Track and explore the reviews" %}{% endslot %}
+    {% endadminbar %}
+
+    <div class="wrapper wrapper--large wrapper--inner-space-medium">
+        {% block table %}
+            {% render_table table %}
         {% endblock %}
     </div>
-</div>
-
-<div class="wrapper wrapper--large wrapper--inner-space-medium">
-    {% block table %}
-        {% render_table table %}
-    {% endblock %}
-</div>
 {% endblock %}
diff --git a/hypha/apply/funds/templates/funds/rounds.html b/hypha/apply/funds/templates/funds/rounds.html
@@ -10,14 +10,11 @@
 
 
 {% block content %}
-<div class="admin-bar">
-    <div class="admin-bar__inner">
-        <div>
-            <h1 class="gamma heading heading--no-margin heading--bold">{% trans "Rounds" %}</h1>
-            <h5>{% trans "Explore current and past rounds" %}</h5>
-        </div>
-    </div>
-</div>
+
+    {% adminbar %}
+        {% slot header %}{% trans "Rounds" %}{% endslot %}
+        {% slot sub_heading %}{% trans "Explore current and past rounds" %}{% endslot %}
+    {% endadminbar %}
 
 <div class="wrapper wrapper--large wrapper--inner-space-medium">
     {% include "funds/includes/table_filter_and_search.html" with filter_form=filter_form search_term=search_term use_batch_actions=False %}

diff --git a/hypha/apply/funds/templates/funds/staff_assignments.html b/hypha/apply/funds/templates/funds/staff_assignments.html
@@ -5,23 +5,29 @@
 {% block title %}{% trans "Staff assignments" %}{% endblock %}
 
 {% block content %}
-<div class="admin-bar">
-    <div class="admin-bar__inner wrapper--search">
-        {% block page_header %}
-            <div>
-                <h1 class="gamma heading heading--no-margin heading--bold">{% trans "Staff assignments" %}</h1>
-                <h5>{% trans "Track and explore the staff assignments" %}</h5>
+
+    {% adminbar %}
+        {% slot header %}{% trans "Staff assignments" %}{% endslot %}
+        {% slot sub_heading %}{% trans "Track and explore the staff assignments" %}{% endslot %}
+
+        {% if request.user.is_apply_staff %}
+            <div class="flex mt-2 md:m-0 gap-3 justify-center items-center font-medium uppercase" hx-boost="true">
+                <a class="px-3 py-2 bg-slate-50 rounded text-gray-800" href="{% url 'apply:submissions:staff_assignments' %}" aria-current="page">
+                    {% trans "Staff assignments" %}
+                </a>
+                <a class="px-3 py-2 text-gray-300 transition-colors hover:bg-slate-50 rounded hover:text-gray-800" href="{% url 'apply:submissions:reviewer_leaderboard' %}">
+                    {% trans "Reviews" %}
+                </a>
+                <a class="px-3 py-2 text-gray-300 transition-colors hover:bg-slate-50 rounded hover:text-gray-800" href="{% url 'apply:submissions:result' %}">
+                    {% trans "Results" %}
+                </a>
             </div>
-        {% endblock %}
-        {% block page_header_tabs %}
-            {{ block.super }}
+        {% endif %}
+    {% endadminbar %}
+
+    <div class="wrapper wrapper--large wrapper--inner-space-medium">
+        {% block table %}
+            {% render_table table %}
         {% endblock %}
     </div>
-</div>
-
-<div class="wrapper wrapper--large wrapper--inner-space-medium">
-    {% block table %}
-        {% render_table table %}
-    {% endblock %}
-</div>
 {% endblock %}
diff --git a/hypha/apply/funds/templates/funds/submissions.html b/hypha/apply/funds/templates/funds/submissions.html
@@ -4,15 +4,11 @@
 
 {% block title %}{% trans "Submissions" %}{% endblock %}
 {% block content %}
-<div class="admin-bar">
-    <div class="admin-bar__inner wrapper--search">
-        {% block page_header %}
-            <div>
-                <h1 class="gamma heading heading--no-margin heading--bold">{% trans "All Submissions" %}<span class="submissions-count"> ({{ table.rows|length }})</span></h1>
-            </div>
-        {% endblock %}
-    </div>
-</div>
+
+    {% adminbar %}
+        {% slot header %}{% trans "All Submissions" %}<span class="submissions-count"> ({{ table.rows|length }}){% endslot %}
+        {% slot sub_heading %}{% trans "Search and filter all submissions" %}{% endslot %}
+    {% endadminbar %}
 
 <div class="wrapper wrapper--large wrapper--inner-space-medium">
     {% block table %}

diff --git a/hypha/apply/funds/templates/funds/submissions_awaiting_review.html b/hypha/apply/funds/templates/funds/submissions_awaiting_review.html
@@ -4,19 +4,15 @@
 
 {% block title %}{% trans "Submissions awaiting Review" %}{% endblock %}
 {% block content %}
-<div class="admin-bar">
-    <div class="admin-bar__inner wrapper--search">
-        {% block page_header %}
-            <div>
-                <h1 class="gamma heading heading--no-margin heading--bold">{% trans "Submissions waiting for your review" %}<span class="submissions-count"> ({{ table.rows|length }})</span></h1>
-            </div>
+
+    {% adminbar %}
+        {% slot header %}{% trans "Submissions waiting for your review" %} ({{ table.rows|length }}){% endslot %}
+        {% comment %} {% slot sub_heading %}{% trans "Search and filter all submissions" %}{% endslot %} {% endcomment %}
+    {% endadminbar %}
+
+    <div class="wrapper wrapper--large wrapper--inner-space-medium">
+        {% block table %}
+            {% render_table table %}
         {% endblock %}
     </div>
-</div>
-
-<div class="wrapper wrapper--large wrapper--inner-space-medium">
-    {% block table %}
-        {% render_table table %}
-    {% endblock %}
-</div>
 {% endblock %}
diff --git a/hypha/apply/funds/templates/funds/submissions_by_round.html b/hypha/apply/funds/templates/funds/submissions_by_round.html
@@ -4,18 +4,15 @@
 {% block title %}{{ object }}{% endblock %}
 
 {% block content %}
-    <div class="admin-bar">
-        <div class="admin-bar__inner admin-bar__inner--with-button">
-            <div>
-                <h1 class="gamma heading heading--no-margin heading--bold">{{ object }}<span class="submissions-count"> ({{ table.rows|length }})</span></h1>
-                <p class="admin-bar__meta">{% if object.fund %}{{ object.fund }} <span>|</span> {% endif %}{% trans "Lead" %}: {{ object.lead }}</p>
-            </div>
-        </div>
-    </div>
 
-<div class="wrapper wrapper--large wrapper--inner-space-medium">
-    {% block table %}
-        {{ block.super }}
-    {% endblock %}
-</div>
+    {% adminbar %}
+        {% slot header %}{{ object }} ({{ table.rows|length }}){% endslot %}
+        {% slot sub_heading %}{% if object.fund %}{{ object.fund }} <span>|</span> {% endif %}{% trans "Lead" %}: {{ object.lead }}{% endslot %}
+    {% endadminbar %}
+
+    <div class="wrapper wrapper--large wrapper--inner-space-medium">
+        {% block table %}
+            {{ block.super }}
+        {% endblock %}
+    </div>
 {% endblock %}