Refactor home stats tiles layout to use grid system and update links for improved interactivity

app/assets/stylesheets/_home_dashboard.scss

@@ -183,15 +183,16 @@ $dash-line: rgba(65, 63, 59, 0.15);
 }
 
 // Years of data: numbers, chart, table, beds
-.home-stats-tiles { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 1.25rem; }
+.home-stats-tiles {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
+  gap: 0;
+  margin-bottom: 1.25rem;
+}
 
 .home-stat-tile {
-  flex: 1 1 180px;
-  padding: 12px;
-  text-align: center;
-  background: #fff;
-  border-radius: 4px;
-  box-shadow: 1px 3px 3px 1px #cac1b3;
+  padding: 10px 12px;
+  border-bottom: 1px solid $dash-line;
 
   b { display: block; font-size: 2rem; font-weight: 400; color: #413f3b; }
 
@@ -200,15 +201,6 @@ $dash-line: rgba(65, 63, 59, 0.15);
   i { display: block; font-size: 0.75rem; font-style: normal; color: $dash-muted; }
 }
 
-// Only tiles that go somewhere look clickable.
-a.home-stat-tile-link {
-  text-decoration: none;
-
-  b { color: $green; text-decoration: underline; }
-
-  &:hover, &:focus { box-shadow: 1px 3px 6px 1px #b3a894; }
-}
-
 .home-chart { display: flex; gap: 10px; height: 150px; align-items: flex-end; }
 
 .home-chart-month {

app/views/home/dashboard/_this_week.html.haml

@@ -10,7 +10,9 @@
       %small= t('home.dashboard.this_week')
       - if ready.any?
         %b= t('home.dashboard.ready_title', count: ready.size)
-        %span= ready.first(5).map(&:crop_name).uniq.to_sentence
+        %span
+          = ready.first(5).map(&:crop_name).uniq.to_sentence
+          = link_to t('home.dashboard.see_which'), '#growing-now'
       - else
         %b= t('home.dashboard.sow_title', crop: suggestion.name, month: current_month_name)
         %span= t('home.dashboard.sow_body')

app/views/home/dashboard/_veteran.html.haml

@@ -3,10 +3,9 @@
 
 .home-stats-tiles
   = render 'home/dashboard/stat', value: dashboard.plantings_this_year, label: t('home.dashboard.stat_plantings'), change: dashboard.plantings_this_year - dashboard.plantings_last_year
-  = render 'home/dashboard/stat', value: dashboard.harvests_this_year, label: t('home.dashboard.stat_harvests'), change: dashboard.harvests_this_year - dashboard.harvests_last_year
   = render 'home/dashboard/stat', value: "#{dashboard.kilograms_this_year} kg", label: t('home.dashboard.stat_kilograms'), change: dashboard.kilograms_this_year - dashboard.kilograms_last_year, unit: ' kg'
+  = render 'home/dashboard/stat', value: dashboard.harvests_this_year, label: t('home.dashboard.stat_harvests'), change: dashboard.harvests_this_year - dashboard.harvests_last_year
   = render 'home/dashboard/stat', value: dashboard.seed_varieties, label: t('home.dashboard.stat_varieties')
-  = render 'home/dashboard/stat', value: dashboard.ready.size, label: t('home.dashboard.stat_ready'), url: '#growing-now'
 
 = render 'home/dashboard/this_week', dashboard:
 

config/locales/en.yml

@@ -291,6 +291,7 @@ en:
       see_all_plantings:
         one: See your planting
         other: See all %{count} plantings
+      see_which: See which ones ↓
       seeds_near: Seeds near you
       seeds_near_note: Neighbours offering seeds you can start with.
       seeds_on_hand: Seeds on hand
@@ -301,7 +302,6 @@ en:
       stat_harvests: harvests this year
       stat_kilograms: harvested this year
       stat_plantings: plantings this year
-      stat_ready: to harvest this week
       stat_varieties: seed varieties saved
       step_join: Join Growstuff
       step_location: Tell us where you garden

spec/features/home/home_spec.rb

@@ -90,21 +90,21 @@ describe "home page" do
       it { expect(page).to have_content 'Harvest by month' }
     end
 
-    describe 'stat tiles' do
+    describe 'ready banner' do
       before do
         create(:planting, owner: member, garden: member.gardens.first, planted_at: 2.years.ago)
         visit root_path
       end
 
-      it 'links the ready tile to the growing now section' do
-        expect(page).to have_link 'to harvest this week', href: '#growing-now'
+      it 'links to the growing now section' do
+        expect(page).to have_link 'See which ones', href: '#growing-now'
       end
 
       it 'has a growing now section to link to' do
         expect(page).to have_css 'section#growing-now'
       end
 
-      it 'does not link the plantings tile' do
+      it 'does not link the plantings stat' do
         expect(page).to have_no_link 'plantings this year'
       end
     end