Two panel design for notifications settings, design and copy for email block

This commit is contained in:
Jason Zimdars
2025-08-28 22:18:11 -05:00
parent 1179fc2a33
commit af9f28d0bb
3 changed files with 19 additions and 13 deletions
@@ -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>
@@ -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>
@@ -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>