From 3f794f9d73a2a1cadd0ab3a3daa6ee8c3df5f6ac Mon Sep 17 00:00:00 2001
From: Jason Zimdars <jz@37signals.com>
Date: Fri, 24 Jan 2025 19:50:29 -0600
Subject: [PATCH 1/2] Polish divider

---
 app/assets/stylesheets/bubbles.css       | 12 +++++++-----
 app/views/bubbles/list/_divider.html.erb |  5 +++--
 2 files changed, 10 insertions(+), 7 deletions(-)

diff --git a/app/assets/stylesheets/bubbles.css b/app/assets/stylesheets/bubbles.css
index be3f39de4..99c98f92a 100644
--- a/app/assets/stylesheets/bubbles.css
+++ b/app/assets/stylesheets/bubbles.css
@@ -402,10 +402,10 @@
   --border-size: 2px;
   --divider-color: var(--color-subtle-dark);
 
-  block-size: calc(100% + 4ch);
+  block-size: calc(100% + 12ch);
   font-size: 1rem;
   cursor: grab;
-  margin-inline: -1rem;
+  margin-inline: -6ch;
   visibility: hidden;
 }
 
@@ -431,9 +431,11 @@
 }
 
 .bubbles-list__count {
-  background-color: var(--divider-color);
-  color: var(--color-ink-reversed);
-  padding: 0.1em 0.7em;
+  --btn-background: var(--divider-color);
+  --btn-color: var(--color-ink-reversed);
+  --btn-gap: 0.5ch;
+  --btn-icon-size: 1em;
+  --btn-padding: 0.1em 1em 0.1em 0.7em;
 }
 
 .bubble__title-text {
diff --git a/app/views/bubbles/list/_divider.html.erb b/app/views/bubbles/list/_divider.html.erb
index f26ebf177..1e365d554 100644
--- a/app/views/bubbles/list/_divider.html.erb
+++ b/app/views/bubbles/list/_divider.html.erb
@@ -1,8 +1,9 @@
 <li class="bubbles-list__divider flex align-center gap-half" draggable="true" data-divider-target="divider">
   <div class="divider-drag-image" data-divider-target="dragImage">Drag up or down</div>
   <hr class="separator--horizontal flex-item-grow">
-  <strong class="bubbles-list__count border-radius">
-    Bubble up <span data-divider-target="count">10</span>
+  <strong class="btn bubbles-list__count border-radius">
+    <%= image_tag "drag.svg", aria: { hidden: true }, size: 24, class: "colorize-black"  %>
+    <span data-divider-target="count">10</span> Bubbled up 
   </strong>
   <hr class="separator--horizontal flex-item-grow">
   <span></span>

From c833f42aca543132db11ff9bd38ef1f14801d20e Mon Sep 17 00:00:00 2001
From: Jason Zimdars <jz@37signals.com>
Date: Fri, 24 Jan 2025 22:05:13 -0600
Subject: [PATCH 2/2] Ensure notification panels have a visible border in dark
 mode

---
 app/assets/stylesheets/notifications.css       | 4 ++++
 app/views/notifications/_notification.html.erb | 2 +-
 2 files changed, 5 insertions(+), 1 deletion(-)

diff --git a/app/assets/stylesheets/notifications.css b/app/assets/stylesheets/notifications.css
index ea8f772c6..22d96725a 100644
--- a/app/assets/stylesheets/notifications.css
+++ b/app/assets/stylesheets/notifications.css
@@ -96,6 +96,10 @@
 .notification__content {
   color: var(--color-ink);
 
+  @media (prefers-color-scheme: dark) {
+    border: 1px solid var(--color-subtle-dark);
+  }
+
   .notificiations-list--read & {
     border: 1px solid var(--color-subtle);
     box-shadow: none;
diff --git a/app/views/notifications/_notification.html.erb b/app/views/notifications/_notification.html.erb
index 9a95ad834..0cd7a8384 100644
--- a/app/views/notifications/_notification.html.erb
+++ b/app/views/notifications/_notification.html.erb
@@ -1,6 +1,6 @@
 <% cache notification do %>
   <%= notification_tag notification do %>
-    <div class="notification__content border-radius borderless pad shadow fill-white flex align-start txt-align-start gap">
+    <div class="notification__content border-radius pad shadow fill-white flex align-start txt-align-start gap">
       <div class="avatar txt-small flex-item-no-shrink">
         <%= avatar_image_tag(notification.creator) %>
       </div>