From 334fb3bb078f3174391cd95ea0756408c25feb4f Mon Sep 17 00:00:00 2001
From: Matthew Landauer <mlandauer@gmail.com>
Date: Tue, 28 May 2024 06:31:46 +0000
Subject: [PATCH] Fix focus and hover states in footer

---
 .../_tailwind/application/_footer.html.erb    | 31 ++++++++++---------
 config/tailwind.config.js                     |  2 ++
 2 files changed, 18 insertions(+), 15 deletions(-)

diff --git a/app/views/_tailwind/application/_footer.html.erb b/app/views/_tailwind/application/_footer.html.erb
index c625f591c..be9c1e873 100644
--- a/app/views/_tailwind/application/_footer.html.erb
+++ b/app/views/_tailwind/application/_footer.html.erb
@@ -12,18 +12,19 @@
       <div class="col-span-12 md:col-span-4">
         <nav class="grid grid-cols-1 gap-6 font-semibold md:gap-2 md:grid-cols-2">
           <ul>
+            <%# TODO: The white text hover is too strong IMHO %>
             <%# Repeat the main nav in the footer %>
-            <li><%= link_to "Home", root_path %></li>
-            <li><%= link_to "Search Applications", address_applications_path %></li>
-            <li><%= link_to "Get the Data (API)", api_howto_path %></li>
-            <li><%= link_to "Help", faq_path %></li>
+            <li><%= link_to "Home", root_path, class: "text-white hover:text-white-hover focus:outline-none focus:text-navy focus:bg-sun-yellow" %></li>
+            <li><%= link_to "Search Applications", address_applications_path, class: "text-white hover:text-white-hover focus:outline-none focus:text-navy focus:bg-sun-yellow" %></li>
+            <li><%= link_to "Get the Data (API)", api_howto_path, class: "text-white hover:text-white-hover focus:outline-none focus:text-navy focus:bg-sun-yellow" %></li>
+            <li><%= link_to "Help", faq_path, class: "text-white hover:text-white-hover focus:outline-none focus:text-navy focus:bg-sun-yellow" %></li>
           </ul>
           <ul>
-            <li><%= link_to "About", about_path %></li>
-            <li><%= link_to "Get involved", get_involved_path %></li>
-            <li><%= link_to "Coverage", authorities_path %></li>
-            <li><%= link_to "Source code", "https://github.com/openaustralia/planningalerts" %></li>
-            <li><%= link_to "Contact us", documentation_contact_path %></li>
+            <li><%= link_to "About", about_path, class: "text-white hover:text-white-hover focus:outline-none focus:text-navy focus:bg-sun-yellow" %></li>
+            <li><%= link_to "Get involved", get_involved_path, class: "text-white hover:text-white-hover focus:outline-none focus:text-navy focus:bg-sun-yellow" %></li>
+            <li><%= link_to "Coverage", authorities_path, class: "text-white hover:text-white-hover focus:outline-none focus:text-navy focus:bg-sun-yellow" %></li>
+            <li><%= link_to "Source code", "https://github.com/openaustralia/planningalerts", class: "text-white hover:text-white-hover focus:outline-none focus:text-navy focus:bg-sun-yellow" %></li>
+            <li><%= link_to "Contact us", documentation_contact_path, class: "text-white hover:text-white-hover focus:outline-none focus:text-navy focus:bg-sun-yellow" %></li>
           </ul>
         </nav>
       </div>
@@ -47,7 +48,7 @@
         <div>
           <p>
             Built and maintained by
-            <a href="https://www.oaf.org.au/" class="block h-6 mt-4 bg-no-repeat bg-oaf-logo">
+            <a href="https://www.oaf.org.au/" class="block h-6 mt-4 bg-no-repeat bg-oaf-logo focus:outline-none focus:ring-4 focus:ring-sun-yellow">
               <span class="sr-only">OpenAustralia Foundation</span>
             </a>
           </p>
@@ -57,8 +58,8 @@
       <div class="col-span-12 md:col-span-4">
         <div class="space-y-8">
           <p>
-            <a href="https://www.oaf.org.au/" class="underline">OpenAustralia Foundation</a> is a <a href="https://www.acnc.gov.au/charity/charities/6bf25724-39af-e811-a960-000d3ad24282/profile" class="underline">registered charity</a> in Australia - company limited by guarantee.
-            ABN&nbsp;<a href="https://www.abr.business.gov.au/ABN/View/24138089942" class="underline">24&nbsp;138&nbsp;089&nbsp;942</a>.
+            <a href="https://www.oaf.org.au/" class="text-white underline hover:text-white-hover focus:outline-none focus:bg-sun-yellow focus:text-navy">OpenAustralia Foundation</a> is a <a href="https://www.acnc.gov.au/charity/charities/6bf25724-39af-e811-a960-000d3ad24282/profile" class="text-white underline hover:text-white-hover focus:outline-none focus:bg-sun-yellow focus:text-navy">registered charity</a> in Australia - company limited by guarantee.
+            ABN&nbsp;<a href="https://www.abr.business.gov.au/ABN/View/24138089942" class="text-white underline hover:text-white-hover focus:outline-none focus:bg-sun-yellow focus:text-navy">24&nbsp;138&nbsp;089&nbsp;942</a>.
           </p>
           <p>
             We acknowledge the traditional owners of the land now known as Australia.
@@ -67,9 +68,9 @@
         </div>
       </div>
 
-      <div class="col-span-12 md:col-span-3">
-        <%= link_to "https://www.acnc.gov.au/charity/charities/6bf25724-39af-e811-a960-000d3ad24282/profile" do %>
-          <%= image_tag "tailwind/charity-tick.svg", size: "100x100", class: "md:ml-auto", alt: "ACNC Registered Charity Tick" %>
+      <div class="flex items-start col-span-12 md:justify-end md:col-span-3">
+        <%= link_to "https://www.acnc.gov.au/charity/charities/6bf25724-39af-e811-a960-000d3ad24282/profile", class: "inline-block focus:outline-none focus:ring-4 focus:ring-sun-yellow" do %>
+          <%= image_tag "tailwind/charity-tick.svg", size: "100x100", alt: "ACNC Registered Charity Tick" %>
         <% end %>
       </div>
     </div>
diff --git a/config/tailwind.config.js b/config/tailwind.config.js
index 4f693cef4..aca38dde1 100644
--- a/config/tailwind.config.js
+++ b/config/tailwind.config.js
@@ -49,6 +49,8 @@ module.exports = {
       'transparent': 'transparent',
       'current': 'currentColor',
       'white': '#ffffff',
+      // TODO: Come up with a better name than white-hover which is tied to its current use
+      'white-hover': '#B5B6C6',
       'off-white': "#eeeeee",
       'light-grey': '#F3F2F2',
       'fuchsia': '#CA3F94',