From c47ea6704529464a9d4a9e143c1e836645a8d9c8 Mon Sep 17 00:00:00 2001
From: Jason Zimdars <jz@37signals.com>
Date: Tue, 29 Jul 2025 13:55:57 -0500
Subject: [PATCH] Use larger text when space allows

- Use black text for labels so the buttons don't appear disabled
- Larger icons
---
 app/assets/stylesheets/trays.css       | 7 ++++++-
 app/views/notifications/_tray.html.erb | 8 ++++----
 2 files changed, 10 insertions(+), 5 deletions(-)

diff --git a/app/assets/stylesheets/trays.css b/app/assets/stylesheets/trays.css
index 117346d18..7fbc10bb2 100644
--- a/app/assets/stylesheets/trays.css
+++ b/app/assets/stylesheets/trays.css
@@ -209,7 +209,6 @@
       block-size: 100%;
       display: flex;
       flex-direction: column;
-      font-size: 12px;
       font-weight: normal;
       gap: 0.25ch;
       inline-size: 100%;
@@ -217,6 +216,12 @@
       &:focus-visible {
         z-index: 1;
       }
+
+      @media (max-width: 1060px) {
+        > span:not(.icon) {
+          font-size: 12px;
+        }
+      }
     }
 
     > *:is(:first-child, :last-child) {
diff --git a/app/views/notifications/_tray.html.erb b/app/views/notifications/_tray.html.erb
index 23caa68ea..e01f90a42 100644
--- a/app/views/notifications/_tray.html.erb
+++ b/app/views/notifications/_tray.html.erb
@@ -12,17 +12,17 @@
             title: "Notification settings",
             data: { action: "dialog#close" } do %>
         <%= icon_tag "settings" %>
-        <span class="translucent">Settings</span>
+        <span>Settings</span>
       <% end %>
 
       <%= link_to notifications_path, class: "tray__new-notifications btn borderless flex-item-grow position-relative overflow-ellipsis", data: { action: "click->dialog#close" } do %>
         <%= icon_tag "bell" %>
-        <span class="translucent">See more new items</span>
+        <span>See more new items</span>
       <% end %>
 
       <%= link_to notifications_path, class: "tray__old-notifications btn borderless flex-item-grow position-relative overflow-ellipsis", data: { action: "click->dialog#close" } do %>
         <%= icon_tag "bell" %>
-        <span class="translucent">See older items</span>
+        <span>See older items</span>
       <% end %>
 
       <%= button_to read_all_notifications_path,
@@ -30,7 +30,7 @@
             title: "Mark all notifications as read",
             data: { action: "dialog#close badge#clear", turbo_frame: "notifications" } do %>
         <%= icon_tag "check" %>
-        <span class="translucent">Clear all</span>
+        <span>Clear all</span>
       <% end %>
     </div>
   </dialog>