Home page tweaks (#11933)

Since we're planning to release the home page publicly, it's essential
we make some minor changes to the UI to ensure it looks great!

Here's what changed: 
* Renamed Graphs → Insights
* Added links and border to Total raised/Total spent heading to make it
look less empty
* <img width="451" height="327" alt="image"
src="https://github.com/user-attachments/assets/7b770a53-e80a-4f70-977e-5a7d343841f9"
/>
* Removed inconsistent background from "All time" button on light mode
* Adjusted padding/margin in card titles
* Fixed center adjustment for top tags/top merchants empty states
* Fixed line breaks for empty states so it looks even

Author: manuthecoder

app/views/events/home/_categories_chart.html.erb

@@ -11,7 +11,7 @@
         It's quiet here...
       </h3>
       <p class="text-gray-500 my-1">
-        Categories will appear here as you spend more money
+        Categories will appear here<br>as you spend more money
       </p>
     </div>
   <% end %>

app/views/events/home/_merchants_chart.html.erb

@@ -12,7 +12,7 @@
         It's quiet here...
       </h3>
       <p class="text-gray-500 my-1">
-        Merchants will appear here as you spend more money
+        Merchants will appear here<br>as you spend more money
       </p>
     </div>
   <% end %>

app/views/events/home/_number_stats.erb

@@ -1,10 +1,21 @@
-<div class="card card--breakdown shadow-none p-4 flex flex-1 flex-col gap-4 justify-center">
-  <div class="stat stat--small flex flex-col">
+<div class="card card--breakdown shadow-none p-4 flex flex-1 flex-col gap-4 justify-center sm:items-center">
+  <div class="stat stat--small flex flex-col sm:items-center">
     <span class="muted uppercase text-sm" style="font-weight: 700">Total raised</span>
-    <span class="stat__value"><%= render_money_amount @event.total_raised %></span>
+    <span class="stat__value -mb-2"><%= render_money_amount @event.total_raised %></span>
   </div>
-  <div class="stat stat--small flex flex-col">
+  <%= link_to event_transactions_path(@event), class: "flex items-center shrink-0 no-underline -mr-2" do %>
+    See transactions
+    <%= inline_icon "view-forward" %>
+  <% end %>
+
+  <div class="menu__divider w-full my-5"></div>
+
+  <div class="stat stat--small flex flex-col sm:items-center">
     <span class="muted uppercase text-sm" style="font-weight: 700">Total spent</span>
-    <span class="stat__value"><%= render_money_amount @event.total_spent_cents %></span>
+    <span class="stat__value -mb-2"><%= render_money_amount @event.total_spent_cents %></span>
   </div>
+  <%= link_to event_transactions_path(@event), class: "flex items-center shrink-0 no-underline -mr-2" do %>
+    See transactions
+    <%= inline_icon "view-forward" %>
+  <% end %>
 </div>

app/views/events/home/_recent_activity.html.erb

@@ -2,7 +2,7 @@
   <% if @activities.length > 0 %>
     <div class="card card--breakdown relative shadow-none flex-1 flex flex-col p-0" style="height: <%= 67.7 * 5 %>px">
       <div style="position: absolute; bottom: 0; left: 0; height: 100px; width: 100%; background: linear-gradient(transparent, var(--card-bg)); pointer-events: none; z-index: 1"></div>
-      <div class="flex items-center p-2 pl-0 sm:p-4 mt-auto justify-between">
+      <div class="flex items-center p-2 pl-0 pt-4 sm:p-4 mt-auto justify-between">
         <h3 class="m-0">Recent activity</h3>
         <%= link_to edit_event_path(@event, tab: "audit_log"), class: "flex items-center shrink-0 no-underline" do %>
           See all
@@ -15,7 +15,7 @@
           <i class="muted">Nothing has happened recently.</i>
         </p>
       <% end %>
-      <ul class="list-reset comments w-100 my-0 pb-2 p-4 pt-1 flex-1">
+      <ul class="list-reset comments w-100 my-0 pb-2 p-4 pt-0 -mt-2 flex-1">
         <%= render_activities(@activities.reject { |activity| activity.trackable.nil? && !activity.trackable_is_deletable? }) %>
       </ul>
     </div>

app/views/events/home/_tags_chart.html.erb

@@ -1,7 +1,7 @@
 <%= turbo_frame_tag "tags" do %>
-  <div id="tags-chart">
+  <div id="tags-chart" style="height: 100%">
     <% if tags.empty? %>
-      <div class="flex flex-1 flex-col items-center justify-center">
+      <div class="flex flex-1 flex-col items-center justify-center" style="height: 100%">
         <div class="text-center">
           <h3 class="text-2xl font-bold mb-0">
             It's quiet here...

app/views/events/home/_team.html.erb

@@ -1,13 +1,13 @@
 <% if @organizers.any? %>
   <div class="card card--breakdown shadow-none flex flex-col p-0 pb-4 sm:h-[150px]" style="height:auto">
-    <div class="p-2 pl-0 sm:p-4 flex items-center justify-between">
+    <div class="p-2 pl-0 pt-4 sm:p-4 flex items-center justify-between">
       <h3 class="m-0">Team members</h3>
       <%= link_to event_team_path(@event), class: "flex items-center shrink-0 no-underline" do %>
         See all
         <%= inline_icon "view-forward" %>
       <% end %>
     </div>
-    <div class="flex gap-3 w-full w-100 py-2 sm:pt-0 px-4 avatar-row avatar-row--no-transform" style="padding-left: 25px">
+    <div class="flex gap-3 w-full w-100 py-2 sm:pt-0 -mt-1 px-4 avatar-row avatar-row--no-transform" style="padding-left: 25px">
       <% @organizers.first(@organizers.length == 12 ? 12 : 11).each do |position| %>
         <div style="transform:none" class="avatar-grow line-height-0 tooltipped tooltipped--e" aria-label="<%= position.user == current_user ? current_user_flavor_text.sample : position.user.name %>">
           <%= avatar_for position.user, size: 40, style: "margin-left: -10px" %>

app/views/events/home/_users_chart.html.erb

@@ -1,7 +1,7 @@
 <%= turbo_frame_tag "users" do %>
-  <div id="users-chart">
+  <div id="users-chart" style="height: 100%">
     <% if users.empty? %>
-      <div class="flex flex-1 flex-col items-center justify-center">
+      <div class="flex flex-1 flex-col items-center justify-center" style="height: 100%">
         <div class="text-center">
           <h3 class="text-2xl font-bold mb-0">
             Not enough data

app/views/events/show.html.erb

@@ -109,12 +109,12 @@
     <% end %>
   </div>
 
-  <div class="flex justify-between items-center mb-2">
-    <h2>Graphs</h2>
+  <div class="flex justify-between items-center mb-2 mt-10">
+    <h2 class="my-0">Insights</h2>
     <% if @event.created_at < 1.week.ago %>
       <div data-controller="menu" data-menu-append-to-value="#tags-chart">
         <button
-          class="homepage-eyebrow mt0 mb0 border-0 bg-white dark:bg-dark flex items-center cursor-pointer"
+          class="whitespace-nowrap homepage-eyebrow my-0 border-0 bg-transparent flex items-center cursor-pointer"
           data-action="menu#toggle click@document->menu#close keydown@document->menu#keydown"
           data-menu-target="toggle">
           <span data-event-home-target="button">All time</span>