Seperate button type for primary button on dark background

app/components/tailwind/button_component.rb

@@ -24,9 +24,15 @@ def initialize(tag:, size:, type:, href: nil, icon: nil, open_in_new_tab: false,
         raise "Unexpected size #{size}"
       end
 
+      # TODO: Hover states are not subtle enough IMHO
       case type
       when :primary
         classes << "text-white bg-green hover:bg-dark-green active:ring-4 ring-sun-yellow"
+      # Special version of a primary button that you should only use when it is on
+      # a dark background (such as navy). Its default state is the same as primary but
+      # it's interactive states go lighter rather than darker
+      when :primary_on_dark_background
+        classes << "text-white bg-green hover:bg-white hover:text-green hover:ring-2 hover:ring-green active:ring-4 active:ring-sun-yellow"
       when :secondary
         classes << "text-white bg-warm-grey hover:bg-dark-warm-grey active:ring-4 ring-sun-yellow"
       # This is not strictly an "inverse" but is good to be used on darker coloured backgrounds

app/views/_tailwind/applications/_address_search_form.html.erb

@@ -45,7 +45,7 @@
     </div>
 
     <div class="mt-4">
-      <%= render Tailwind::ButtonComponent.new(tag: :button, size: "2xl", type: :primary) do %>
+      <%= render Tailwind::ButtonComponent.new(tag: :button, size: "2xl", type: :primary_on_dark_background) do %>
         <div class="px-12">Search</div>
       <% end %>
     </div>