From 3b82092496b154d5f894e0da6501a3ac05154a34 Mon Sep 17 00:00:00 2001
From: Jason Heppler <jason.heppler@gmail.com>
Date: Thu, 5 Dec 2024 14:43:25 -0600
Subject: [PATCH] refactor: Update UI consistency

---
 .../partials/tables/christenings_filter.html  | 20 ++++++-------------
 .../layouts/partials/tables/cod_filter.html   | 17 +++++-----------
 .../dbn/layouts/partials/tables/deaths.html   |  1 -
 .../dbn/layouts/partials/tables/filter.html   | 20 ++++++-------------
 .../dbn/layouts/partials/tables/general.html  |  3 +--
 .../dbn/layouts/partials/tables/weekly.html   |  2 --
 6 files changed, 18 insertions(+), 45 deletions(-)

diff --git a/bom-website/themes/dbn/layouts/partials/tables/christenings_filter.html b/bom-website/themes/dbn/layouts/partials/tables/christenings_filter.html
index 7acf766e..c83af1b8 100644
--- a/bom-website/themes/dbn/layouts/partials/tables/christenings_filter.html
+++ b/bom-website/themes/dbn/layouts/partials/tables/christenings_filter.html
@@ -21,7 +21,7 @@ <h2 id="accordion-flush-heading-1">
             <div>
               <h3 class="text-base font-medium leading-6 text-gray-900">Parishes</h3>
               <div class="py-4 px-5 max-h-64 overflow-scroll border border-slate-200">
-                <div class="filter__header__content__item" style="height: 200px; overflow-y: scroll;">
+                <div class="filter__header__content__item" style="height: 200px;">
                     <template x-for="christening_parish in all_christenings" :key="christening_parish.id">
                     <div>
                       <input type="checkbox" :id="christening_parish.canonical_name" :value="christening_parish.id"
@@ -34,7 +34,7 @@ <h3 class="text-base font-medium leading-6 text-gray-900">Parishes</h3>
             </div>
             <div>
               <h3 class="text-base font-medium leading-6 text-gray-900">Year Range</h3>
-              <div>
+              <div class="pb-4">
                 <label for="start-year">Start Year</label>
                 <input
                   class="bg-white border border-gray-300 text-gray-500 hover:bg-gray-100 hover:text-gray-700 rounded-lg leading-tight py-2 px-3 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white"
@@ -56,25 +56,17 @@ <h3 class="text-base font-medium leading-6 text-gray-900">Year Range</h3>
             </div>
             <div>
               <button
-                class="text-xs font-bold uppercase px-5 py-3 m-0.5 w-40 rounded block leading-normal border-solid border-2 border-dbn-yellow text-white bg-dbn-yellow hover:bg-dbn-yellowdark"
+              class="rounded border border-gray-200 bg-white text-sm font-medium px-4 py-2 text-gray-900 hover:bg-dbn-blue hover:text-black focus:z-10 focus:ring-2 focus:ring-blue-700 focus:text-blue-700"
                 @click="resetFilters">
                 Reset Filters
               </button>
               <button
-              class="text-xs font-bold uppercase px-5 py-3 m-0.5 w-40 rounded block leading-normal border-solid border-2 border-dbn-yellow text-white bg-dbn-yellow hover:bg-dbn-yellowdark"
+              class="rounded border border-gray-200 bg-white text-sm font-medium px-4 py-2 text-gray-900 hover:bg-dbn-blue hover:text-black focus:z-10 focus:ring-2 focus:ring-blue-700 focus:text-blue-700"
               @click="applyFilters">
                 Apply Filters
               </button>
-
-              <div 
-              class="text-xs font-bold uppercase px-1 py-3 m-0.5 leading-normal text-black hover:underline"
-              @click="instructionsOpen = true"
-              >
-                How to use this table
-              </div>
-        
-          </div>
-        </div>
+            </div>
+         </div>
       </div>
     </div>
   </div>  
diff --git a/bom-website/themes/dbn/layouts/partials/tables/cod_filter.html b/bom-website/themes/dbn/layouts/partials/tables/cod_filter.html
index 7f2f9b96..6c4841a2 100644
--- a/bom-website/themes/dbn/layouts/partials/tables/cod_filter.html
+++ b/bom-website/themes/dbn/layouts/partials/tables/cod_filter.html
@@ -21,7 +21,7 @@ <h2 id="accordion-flush-heading-1">
             <div>
               <h3 class="text-base font-medium leading-6 text-gray-900">Causes of Death</h3>
               <div class="py-4 px-5 max-h-64 overflow-scroll border border-slate-200">
-                <div class="filter__header__content__item" style="height: 200px; overflow-y: scroll;">
+                <div class="filter__header__content__item" style="height: 200px;">
                     <template x-for="cause in all_causes" :key="cause.id">
                     <div>
                       <input type="checkbox" :id="cause.name" :value="cause.name"
@@ -34,7 +34,7 @@ <h3 class="text-base font-medium leading-6 text-gray-900">Causes of Death</h3>
             </div>
             <div>
               <h3 class="text-base font-medium leading-6 text-gray-900">Year Range</h3>
-              <div>
+              <div class="pb-4">
                 <label for="start-year">Start Year</label>
                 <input
                   class="bg-white border border-gray-300 text-gray-500 hover:bg-gray-100 hover:text-gray-700 rounded-lg leading-tight py-2 px-3 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white"
@@ -56,23 +56,16 @@ <h3 class="text-base font-medium leading-6 text-gray-900">Year Range</h3>
             </div>
             <div>
               <button
-                class="text-xs font-bold uppercase px-5 py-3 m-0.5 w-40 rounded block leading-normal border-solid border-2 border-dbn-yellow text-white bg-dbn-yellow hover:bg-dbn-yellowdark"
+              class="rounded border border-gray-200 bg-white text-sm font-medium px-4 py-2 text-gray-900 hover:bg-dbn-blue hover:text-black focus:z-10 focus:ring-2 focus:ring-blue-700 focus:text-blue-700"
                 @click="resetFilters">
                 Reset Filters
               </button>
               <button
-              class="text-xs font-bold uppercase px-5 py-3 m-0.5 w-40 rounded block leading-normal border-solid border-2 border-dbn-yellow text-white bg-dbn-yellow hover:bg-dbn-yellowdark"
+              class="rounded border border-gray-200 bg-white text-sm font-medium px-4 py-2 text-gray-900 hover:bg-dbn-blue hover:text-black focus:z-10 focus:ring-2 focus:ring-blue-700 focus:text-blue-700"
               @click="applyFilters">
                 Apply Filters
               </button>
-
-              <div 
-              class="text-xs font-bold uppercase px-1 py-3 m-0.5 leading-normal text-black hover:underline"
-              @click="instructionsOpen = true"
-              >
-                How to use this table
-              </div>
-        
+            </div>
           </div>
         </div>
       </div>
diff --git a/bom-website/themes/dbn/layouts/partials/tables/deaths.html b/bom-website/themes/dbn/layouts/partials/tables/deaths.html
index 514cc644..efbc74bd 100644
--- a/bom-website/themes/dbn/layouts/partials/tables/deaths.html
+++ b/bom-website/themes/dbn/layouts/partials/tables/deaths.html
@@ -121,6 +121,5 @@ <h3 class="text-lg font-medium leading-6 text-gray-900" id="modal-title" x-text=
         </div>
   
       </div>
-    </div>
     {{/* end: deaths table */}}
 
diff --git a/bom-website/themes/dbn/layouts/partials/tables/filter.html b/bom-website/themes/dbn/layouts/partials/tables/filter.html
index 0d3dc787..bada00dc 100644
--- a/bom-website/themes/dbn/layouts/partials/tables/filter.html
+++ b/bom-website/themes/dbn/layouts/partials/tables/filter.html
@@ -21,7 +21,7 @@ <h2 id="accordion-flush-heading-1">
                   <div>
                     <h3 class="text-base font-medium leading-6 text-gray-900">Parishes</h3>
                     <div class="py-4 px-5 max-h-64 overflow-scroll border border-slate-200">
-                      <div class="filter__header__content__item" style="height: 200px; overflow-y: scroll;">
+                      <div class="filter__header__content__item" style="height: 200px;">
                         <template x-for="parish in parishes" :key="parish.id">
                           <div>
                             <input type="checkbox" :id="parish.canonical_name" :value="parish.id"
@@ -34,7 +34,7 @@ <h3 class="text-base font-medium leading-6 text-gray-900">Parishes</h3>
                   </div>
                   <div>
                     <h3 class="text-base font-medium leading-6 text-gray-900">Year Range</h3>
-                    <div>
+                    <div class="pb-4">
                       <label for="start-year">Start Year</label>
                       <input
                         class="bg-white border border-gray-300 text-gray-500 hover:bg-gray-100 hover:text-gray-700 rounded-lg leading-tight py-2 px-3 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white"
@@ -53,7 +53,7 @@ <h3 class="text-base font-medium leading-6 text-gray-900">Year Range</h3>
                     <div class="w-1/2 inline-block relative">
                       <h3 class="text-base font-medium leading-6 text-gray-900">Count Type</h3>
                       <select
-                        class="bg-white border border-gray-300 text-gray-500 hover:bg-gray-100 hover:text-gray-700 rounded-lg leading-tight py-2 px-3 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white"
+                        class="w-full bg-white border border-gray-300 text-gray-500 hover:bg-gray-100 hover:text-gray-700 rounded-lg leading-tight py-2 px-3 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white"
                         @change="setCountType()" x-model="filters.selectedCountType">
                         <option value="All">All</option>
                         <option x-show="openTab === 1" value="Buried">Buried</option>
@@ -64,24 +64,16 @@ <h3 class="text-base font-medium leading-6 text-gray-900">Count Type</h3>
                   </div>
                   <div>
                     <button
-                      class="text-xs font-bold uppercase px-5 py-3 m-0.5 w-40 rounded block leading-normal border-solid border-2 border-dbn-yellow text-white bg-dbn-yellow hover:bg-dbn-yellowdark"
+                    class="rounded border border-gray-200 bg-white text-sm font-medium px-4 py-2 text-gray-900 hover:bg-dbn-blue hover:text-black focus:z-10 focus:ring-2 focus:ring-blue-700 focus:text-blue-700"
                       @click="resetFilters">
                       Reset Filters
                     </button>
                     <button
-                    class="text-xs font-bold uppercase px-5 py-3 m-0.5 w-40 rounded block leading-normal border-solid border-2 border-dbn-yellow text-white bg-dbn-yellow hover:bg-dbn-yellowdark"
+                    class="rounded border border-gray-200 bg-white text-sm font-medium px-4 py-2 text-gray-900 hover:bg-dbn-blue hover:text-black focus:z-10 focus:ring-2 focus:ring-blue-700 focus:text-blue-700"
                     @click="applyFilters">
                       Apply Filters
                     </button>
-
-                    <div 
-                    class="text-xs font-bold uppercase px-1 py-3 m-0.5 leading-normal text-black hover:underline"
-                    @click="instructionsOpen = true"
-                    >
-                      How to use this table
-                    </div>
-              
-                </div>
+                   </div>
               </div>
             </div>
           </div>
diff --git a/bom-website/themes/dbn/layouts/partials/tables/general.html b/bom-website/themes/dbn/layouts/partials/tables/general.html
index 373520d7..c984b8e9 100644
--- a/bom-website/themes/dbn/layouts/partials/tables/general.html
+++ b/bom-website/themes/dbn/layouts/partials/tables/general.html
@@ -47,12 +47,11 @@
         </tbody>
       </table>
 
-      {{ partial "tables/instructions.html" }}
 
       <modal x-show="modalOpen" class="fixed inset-0 z-50 overflow-y-auto" aria-labelledby="modal-title" role="dialog"
         aria-modal="true">
         <div class="flex items-end justify-center min-h-screen px-4 text-center md:items-center sm:block sm:p-0">
-          <div x-cloak @click="modalOpen = false" x-show="modalOpen"
+          <div x-cloak x-show="modalOpen" @click.stop
             x-transition:enter="transition ease-out duration-300 transform" x-transition:enter-start="opacity-0"
             x-transition:enter-end="opacity-100" x-transition:leave="transition ease-in duration-200 transform"
             x-transition:leave-start="opacity-100" x-transition:leave-end="opacity-0"
diff --git a/bom-website/themes/dbn/layouts/partials/tables/weekly.html b/bom-website/themes/dbn/layouts/partials/tables/weekly.html
index e21c7761..0d34b771 100644
--- a/bom-website/themes/dbn/layouts/partials/tables/weekly.html
+++ b/bom-website/themes/dbn/layouts/partials/tables/weekly.html
@@ -47,8 +47,6 @@
         </tbody>
       </table>
 
-      {{ partial "tables/instructions.html" }}
-
       <modal x-show="modalOpen" class="fixed inset-0 z-50 overflow-y-auto" aria-labelledby="modal-title" role="dialog"
         aria-modal="true">
         <div class="flex items-end justify-center min-h-screen px-4 text-center md:items-center sm:block sm:p-0">