From af9f28d0bb7fdcab933a4f9ca42d59ad67a38358 Mon Sep 17 00:00:00 2001
From: Jason Zimdars <jz@37signals.com>
Date: Thu, 28 Aug 2025 22:18:11 -0500
Subject: [PATCH] Two panel design for notifications settings, design and copy
 for email block

---
 app/views/notifications/settings/_email.html.erb  | 15 +++++++++------
 .../settings/_push_notifications.html.erb         |  2 +-
 app/views/notifications/settings/show.html.erb    | 15 +++++++++------
 3 files changed, 19 insertions(+), 13 deletions(-)

diff --git a/app/views/notifications/settings/_email.html.erb b/app/views/notifications/settings/_email.html.erb
index 592f4746b..a51aea099 100644
--- a/app/views/notifications/settings/_email.html.erb
+++ b/app/views/notifications/settings/_email.html.erb
@@ -1,9 +1,12 @@
-<section class="panel unpad borderless center flex flex-column gap-half margin-block-end">
-  <h2 class="txt-medium txt-uppercase divider">Email</h2>
-  <%= form_with model: settings, url: notifications_settings_path, method: :patch, local: true, data: { controller: "form" } do |form| %>
-    <div class="margin-block">
-      <%= form.label :bundle_email_frequency, "Receive an email with new notifications:" %>
-      <%= form.select :bundle_email_frequency, bundle_email_frequency_options_for(settings), {}, class: "input input--select", data: { action: "change->form#submit" } %>
+<section class="panel unpad borderless center flex flex-column gap-half margin-block-start">
+  <h2 class="txt-medium txt-uppercase divider margin-none-block-end">Email Notifications</h2>
+  <p class="margin-none">Get a single email with all your notifications every few hours, daily, or weekly.</p>
+  <%= form_with model: settings, url: notifications_settings_path, 
+      class: "flex flex-column gap-half",
+      method: :patch, local: true, data: { controller: "form" } do |form| %>
+    <div class="flex flex-column gap-half pad">
+      <strong><%= form.label :bundle_email_frequency, "Email me about new notifications..." %></strong>
+      <%= form.select :bundle_email_frequency, bundle_email_frequency_options_for(settings), {}, class: "input input--select txt-align-center", data: { action: "change->form#submit" } %>
     </div>
   <% end %>
 </section>
diff --git a/app/views/notifications/settings/_push_notifications.html.erb b/app/views/notifications/settings/_push_notifications.html.erb
index 91dd801ab..047f57a15 100644
--- a/app/views/notifications/settings/_push_notifications.html.erb
+++ b/app/views/notifications/settings/_push_notifications.html.erb
@@ -1,4 +1,4 @@
-<div class="notifications__status panel fill-shade center margin-block-start margin-block-end-double" data-controller="notifications" data-notifications-subscriptions-url-value="<%= user_push_subscriptions_path(Current.user) %>" data-notifications-enabled-class="notifications--on">
+<div class="notifications__status panel fill-shade center" data-controller="notifications" data-notifications-subscriptions-url-value="<%= user_push_subscriptions_path(Current.user) %>" data-notifications-enabled-class="notifications--on">
   <h2 class="notifications__on-message txt-medium">Push notifications are ON</h2>
   <h2 class="notifications__off-message txt-medium">Push notifications are OFF</h2>
 
diff --git a/app/views/notifications/settings/show.html.erb b/app/views/notifications/settings/show.html.erb
index eadfc303b..2eb10862c 100644
--- a/app/views/notifications/settings/show.html.erb
+++ b/app/views/notifications/settings/show.html.erb
@@ -12,11 +12,14 @@
   </nav>
 <% end %>
 
-<%= render "notifications/settings/push_notifications" %>
+<section class="settings">
+  <div class="settings__panel settings__panel--users panel shadow center flex flex-column gap-half">
+    <h2 class="txt-medium txt-uppercase divider">Collections</h2>
+    <%= render partial: "notifications/settings/collection", collection: @collections, locals: { user: Current.user } %>
+  </div>
 
-<%= render "notifications/settings/email", settings: @settings %>
-
-<section class="panel unpad borderless center flex flex-column gap-half">
-  <h2 class="txt-medium txt-uppercase divider">Collections</h2>
-  <%= render partial: "notifications/settings/collection", collection: @collections, locals: { user: Current.user } %>
+  <div class="settings__panel panel shadow center">
+    <%= render "notifications/settings/push_notifications" %>
+    <%= render "notifications/settings/email", settings: @settings %>
+  </div>
 </section>