Move styles to stylesheet

app/assets/stylesheets/application.tailwind.css.scss

@@ -7,7 +7,11 @@
 @tailwind components;
 @tailwind utilities;
 
-.tab{ 
+.tabs{
+  @apply flex flex-row items-stretch mt-4 m-1 text-xs font-bold border-b-[3px] border-black;
+}
+
+.tab { 
   &.active {
     @apply border-[3px] border-black border-solid border-b-0 -mb-[3px] bg-white;
   }
@@ -17,6 +21,40 @@
   }
 }
 
+.sharing {
+  button {
+    @apply inline-flex px-8 py-2 rounded-md bg-slate-800 text-slate-50 w-full;
+  }
+}
+
+.learning {
+  @apply bg-gray-100 p-8 mt-12;
+
+  header {
+    @apply text-xl font-bold text-center w-full mb-8;
+  }
+
+  a {
+    @apply block w-full py-4 px-8 rounded-md text-lg font-bold bg-gray-200 border border-gray-700 text-center mb-4;
+  }
+}
+
+.subscribe {
+  @apply bg-gray-100 p-8 mt-1;
+
+  header {
+    @apply text-xl font-bold text-center w-full mb-8;
+  }
+
+  a {
+    @apply block w-full py-4 px-8 rounded-md text-lg font-bold bg-gray-200 border border-gray-700 text-center mb-4;
+  }
+}
+
+select {
+  @apply inline-flex flex-row w-full gap-x-1.5 rounded-md bg-white px-3 py-2 text-base font-semibold text-gray-500 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50;
+}
+
 .home-page-link {
   color: revert;
 }

app/views/forecasts/_forecast_tabs.html.erb

@@ -3,7 +3,7 @@
     Air pollution
   </header>
   <div
-    class="tabs flex flex-row items-stretch mt-4 m-1 text-xs font-bold border-b-[3px] border-black"
+    class="tabs"
     data-turbo-prefetch="false"
     data-map-target="daySelector"
     >

app/views/forecasts/_learning.html.erb

@@ -1,8 +1,8 @@
-<div class="learning bg-gray-100 p-8 mt-12">
-  <header class="text-xl font-bold text-center w-full mb-8">
+<div class="learning">
+  <header>
     Do you know how you can protect yourself and others in your community?
   </header>
-  <a href="health_advice" class="block w-full py-4 px-8 rounded-md text-lg font-bold bg-gray-200 border border-gray-700 text-center mb-4">
+  <a href="health_advice">
     Learn more about health effects
   </a>
 </div>

app/views/forecasts/_location_selector.html.erb

@@ -1,10 +1,7 @@
-<div class="relative inline-block w-full text-left p-4">
-  <%= form_tag(false, method: :get) do %>
-    <%= select_tag :zone, 
-    options_for_select(Zone.all.order(:name).map(&:name), @zone.name),
-    class: "inline-flex flex-row w-full justify-left gap-x-1.5 rounded-md bg-white px-3 py-2 text-base font-semibold text-gray-500 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50",
-    data: { controller: "prediction", "prediction-target": "zoneSelector", action: "change->prediction#changeZone" }
-    %>
-    <%= hidden_field_tag :day, @day, data: { "tab-target": "daySelector" } %>
-  <% end %>
-</div>
+<%= form_tag(false, method: :get) do %>
+  <%= select_tag :zone, 
+  options_for_select(Zone.all.order(:name).map(&:name), @zone.name),
+  data: { controller: "prediction", "prediction-target": "zoneSelector", action: "change->prediction#changeZone" }
+  %>
+  <%= hidden_field_tag :day, @day, data: { "tab-target": "daySelector" } %>
+<% end %>

app/views/forecasts/_pollutant_selector.html.erb

@@ -1,15 +1,13 @@
-<div class="relative inline-block w-full text-left p-4">
-  <%= form_tag do %>
-    <%= select_tag :pollutant, 
-    options_for_select({
-      "All pollutants" => 'Total',
-      "Nitrogen Dioxide" => 'NO2',
-      "Particles < 2.5µm" => 'PM25',
-      "Particles < 10µm" => 'PM10',
-      "Ozone" => 'O3',
-    }),
-    data:{ action: "map#updateMap", "map-target": "pollutantSelector" },
-    class: "inline-flex flex-row w-full justify-left gap-x-1.5 rounded-md bg-white px-3 py-2 text-base font-semibold text-gray-500 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50"
-    %>
-  <% end %>
-</div>
+<%= form_tag do %>
+  <%= select_tag :pollutant, 
+  options_for_select({
+    "All pollutants" => 'Total',
+    "Nitrogen Dioxide" => 'NO2',
+    "Particles < 2.5µm" => 'PM25',
+    "Particles < 10µm" => 'PM10',
+    "Ozone" => 'O3',
+  }),
+  class: "my-4",
+  data: { action: "map#updateMap", "map-target": "pollutantSelector" }
+  %>
+<% end %>

app/views/forecasts/_sharing.html.erb

@@ -1,5 +1,5 @@
 <div class="sharing px-4 mt-4">
-  <button class="inline-flex px-8 py-2 rounded-md bg-slate-800 text-slate-50 w-full">
+  <button>
     <div class="icon">
       <%= render "shared/icons/share" %>
     </div>

app/views/forecasts/_subscribe.html.erb

@@ -1,8 +1,8 @@
-<div class="subscribe bg-gray-100 p-8 mt-1">
-  <header class="text-xl font-bold text-center w-full mb-8">
+<div class="subscribe">
+  <header>
     Subscribe to receive air quality alerts for your area
   </header>
-  <a href="#" class="block w-full py-4 px-8 rounded-md text-lg font-bold bg-gray-200 border border-gray-700 text-center mb-4">
+  <a href="#">
     Sign up for alerts
   </a>
 </div>