From 46a067892595d7837ab49f503183861c6755d715 Mon Sep 17 00:00:00 2001
From: Tom O'Dwyer <tom.odwyer@thedatalab.org>
Date: Fri, 6 Sep 2024 15:28:46 +0100
Subject: [PATCH] Replace inline styles with Tailwind classes

---
 airlock/templates/_includes/header.html       | 22 ++++++++++++++----
 airlock/templates/activity.html               |  2 +-
 .../file_browser/file_content/csv.html        |  2 +-
 .../file_browser/request/filegroup.html       | 23 ++++++++-----------
 .../file_browser/request/request.html         |  2 +-
 5 files changed, 30 insertions(+), 21 deletions(-)

diff --git a/airlock/templates/_includes/header.html b/airlock/templates/_includes/header.html
index 9c540143..56136fd9 100644
--- a/airlock/templates/_includes/header.html
+++ b/airlock/templates/_includes/header.html
@@ -67,17 +67,29 @@
                   </span>
                 </summary>
                 <div class="absolute border-0 origin-top-right top-full mt-2 right-20 z-10 w-48 rounded-md shadow-lg overflow-hidden bg-white ring-1 ring-black ring-opacity-5 focus:outline-none text-sm">
-                  <p class="pt-3 pb-2 px-4" style="background-color: var(--color-red-500);">TEST MODE ONLY</p>
+                  <p class="pt-3 pb-2 px-4 bg-red-700 text-red-50">TEST MODE ONLY</p>
                   {% for username, token in dev_users.items %}
                     <form
-                      {% if username == request.user.username %}style="background-color: var(--color-emerald-50);"{% endif %}
-                      class="border-t block px-4 py-2 text-oxford hover:text-bn-strawberry-700 hover:bg-oxford-50 focus:text-bn-strawberry-700 focus:outline-none focus:ring-2 focus:ring-oxford-500 focus:ring-inset w-full text-left"
-                      method="POST" action="{% url 'login' %}">
+                      action="{% url 'login' %}"
+                      method="POST"
+                    >
                       {% csrf_token %}
                       <input type="hidden" name="next" value="{{ request.path }}" />
                       <input type="hidden" name="user" value="{{ username }}" />
                       <input type="hidden" name="token" value="{{ token }}" />
-                      <button type="submit">{{ username }}</button>
+                      <button
+                        class="
+                          border-t block px-4 py-2 focus:outline-none focus:ring-2 focus:ring-oxford-500 focus:ring-inset w-full text-left
+                          {% if username == request.user.username %}
+                            bg-emerald-200 text-emerald hover:text-bn-emerald-700 hover:bg-emerald-50 focus:text-bn-emerald-700
+                          {% else %}
+                            text-oxford hover:text-bn-strawberry-700 hover:bg-oxford-50 focus:text-bn-strawberry-700
+                          {% endif %}
+                        "
+                        type="submit"
+                      >
+                        {{ username }}
+                      </button>
                     </form>
                   {% endfor %}
                 </div>
diff --git a/airlock/templates/activity.html b/airlock/templates/activity.html
index e888c626..887b7b98 100644
--- a/airlock/templates/activity.html
+++ b/airlock/templates/activity.html
@@ -6,7 +6,7 @@
   {% if activity %}
     <div id="airlock-table">
       <p class="spinner">Loading table data...</p>
-      <table class="datatable" style="display: none"  id="customTable">
+      <table class="datatable hidden" id="customTable">
         <thead>
           <tr>
             <th><div class="flex flex-row gap-2">Time{% datatable_sort_icon %}</div></th>
diff --git a/airlock/templates/file_browser/file_content/csv.html b/airlock/templates/file_browser/file_content/csv.html
index c5c3e87c..02b498fb 100644
--- a/airlock/templates/file_browser/file_content/csv.html
+++ b/airlock/templates/file_browser/file_content/csv.html
@@ -16,7 +16,7 @@
     <div id="airlock-table">
       {% if use_datatables %}
         <p class="spinner">Loading table data...</p>
-        <table class="datatable" style="display: none" id="customTable">
+        <table class="datatable hidden" id="customTable">
       {% else %}
         <table>
       {% endif %}
diff --git a/airlock/templates/file_browser/request/filegroup.html b/airlock/templates/file_browser/request/filegroup.html
index b1fdbabd..8a5b0d4c 100644
--- a/airlock/templates/file_browser/request/filegroup.html
+++ b/airlock/templates/file_browser/request/filegroup.html
@@ -9,24 +9,21 @@
 </style>
 {% #card title=group.title container=True class="group_modal" %}
   <div data-testid="c3">
-    <form action="{{ group.c2_edit_url }}" method="POST" aria-label="group-edit-form">
+    <form
+      action="{{ group.c2_edit_url }}"
+      class="grid grid-cols-2 gap-x-6 gap-y-4 items-start"
+      method="POST"
+      name="group-edit-form"
+    >
       {% csrf_token %}
-      <div style="display: flex; flex-direction: row; width: 100%; flex-wrap: wrap; gap: 1rem;">
-        <div style="display: flex: flex-direction: column; flex-basis: 100%; flex: 1;">
-          {% form_textarea field=group.c2_edit_form.context show_placeholder=True resize=True placeholder="Describe the data to be released in this group of files" class="w-full max-w-lg mx-auto" rows=6 disabled=group.c2_readonly readonly=group.c2_readonly %}
-        </div>
-        <div style="display: flex: flex-direction: column; flex-basis: 100%; flex: 1; gap: 1rem;">
-          {% form_textarea field=group.c2_edit_form.controls resize=True show_placeholder=True placeholder="Describe the disclosure controls that have been applied to these files" class="w-full max-w-lg mx-auto" rows=6 disabled=group.c2_readonly readonly=group.c2_readonly %}
-        </div>
-      </div>
+      {% form_textarea field=group.c2_edit_form.context show_placeholder=True resize=True placeholder="Describe the data to be released in this group of files" class="w-full max-w-lg mx-auto" rows=6 disabled=group.c2_readonly readonly=group.c2_readonly %}
+      {% form_textarea field=group.c2_edit_form.controls resize=True show_placeholder=True placeholder="Describe the disclosure controls that have been applied to these files" class="w-full max-w-lg mx-auto" rows=6 disabled=group.c2_readonly readonly=group.c2_readonly %}
       {% if not group.c2_readonly %}
-        <div class="mt-2">
-          {% #button type="submit" variant="success" id="edit-group-button" disabled=group.c2_readonly %}Save{% /button %}
-        </div>
+        {% #button type="submit" variant="success" id="edit-group-button" class="w-min" disabled=group.c2_readonly %}Save{% /button %}
       {% endif %}
     </form>
 
-    <div class="comments" style="margin-top: 1rem;">
+    <div class="comments mt-4">
       {% #list_group %}
         {% for comment, comment_class in group.comments %}
 
diff --git a/airlock/templates/file_browser/request/request.html b/airlock/templates/file_browser/request/request.html
index d3951f8e..d2387cf4 100644
--- a/airlock/templates/file_browser/request/request.html
+++ b/airlock/templates/file_browser/request/request.html
@@ -18,7 +18,7 @@
               <div class="pb-8">
                 Please confirm that you have read the OpenSAFELY
                 documentation on data release. In particular note that:
-                <blockquote style="margin-left: 1rem; margin-top: 1rem">
+                <blockquote class="ml-4 mt-4">
                   <p>
                     All outputs from the NHS England OpenSAFELY COVID-19 service must be
                     aggregated data with small number suppression applied. The service operates as