Handful of tweaks

app/assets/stylesheets/avatars.css

@@ -18,7 +18,7 @@
     object-fit: cover;
   }
 
-   + .avatar {
+  .card & + .avatar {
     margin-inline-start: -0.8em;
   }
 }

app/assets/stylesheets/events.css

@@ -24,9 +24,12 @@
   background-color: var(--color-bg);
   border-radius: 2em;
   display: inline-flex;
+  font-size: 0.8em;
   inset: calc(var(--grid-lines) - 1em) auto -1em;
-  padding: 0.3em 1.3em 0.3em;
+  line-height: 1.5;
+  padding: 0.3em 1.3em;
   position: absolute;
+  text-transform: uppercase;
   transform: translateX(-50%);
   z-index: 2;
 }
@@ -59,7 +62,7 @@
 .event {
   --column-gap: 0.7ch;
   --panel-border-color: transparent;
-  --panel-border-radius: 0.5em;
+  --panel-border-radius: 0.2em;
   --panel-padding: 0.6em 1.2em 0.6em 0.6em;
   --panel-size: auto; 
 
@@ -89,7 +92,7 @@
 
   background-color: var(--color-container);
   font-size: 0.9em;
-  padding: 2em 0 1em;
+  padding: 1.5em 0 1em;
   text-transform: uppercase;
 }
 
@@ -97,7 +100,6 @@
   align-self: start;
   display: grid;
   font-weight: 600;
-  margin-block: var(--grid-lines);
 }
 
 .event__title {
@@ -110,8 +112,8 @@
   display: grid;
   gap: calc(var(--grid-lines) * 2);
   justify-items: center;
-  margin: var(--grid-lines);
-  padding: var(--grid-lines);
+  margin: var(--grid-lines) var(--grid-lines) calc(var(--grid-lines) * 6) var(--grid-lines);
+  padding: 0 var(--grid-lines);
 
   .event {
     grid-column-start: unset !important;

app/assets/stylesheets/notifications.css

@@ -4,7 +4,7 @@
 
   block-size: var(--height);
   inline-size: var(--size);
-  inset: auto var(--inline-space) var(--block-space-half) auto;
+  inset: auto auto var(--block-space-half) var(--inline-space);
   padding: var(--block-space-half) var(--inline-space);
   position: fixed;
   z-index: 1;
@@ -99,6 +99,8 @@
 }
 
 .notification__content {
+  --border-radius: 0.2em;
+
   color: var(--color-ink);
 
   @media (prefers-color-scheme: dark) {

app/assets/stylesheets/pins.css

@@ -4,7 +4,7 @@
 
   block-size: var(--height);
   inline-size: var(--size);
-  inset: auto auto var(--block-space-half) var(--inline-space);
+  inset: auto var(--inline-space) var(--block-space-half) auto;
   padding: var(--block-space-half) var(--inline-space);
   position: fixed;
   z-index: 1;
@@ -101,6 +101,7 @@
 .pin__content {
   color: var(--color-ink);
   border: 1px solid;
+  border-radius: 0.2em;
 
   .notificiations-list--read & {
     border: 1px solid var(--color-subtle);

app/views/bubbles/_messages.html.erb

@@ -4,10 +4,11 @@
   <%= render bubble.messages, cached: true %>
   <%= render "comments/new", bubble: bubble %>
 
-  <div class="flex flex-column gap-half justify-start full-width txt-align-start">
-    <span>Watching this…</span>
-    <div class="flex align-center flex-wrap gap-half max-width">
-      <%= render partial: "bubbles/watches/watcher", collection: bubble.watchers.sorted_with_user_first(Current.user) %>
+  <div class="flex flex-column justify-start full-width txt-align-start">
+    <strong class="txt-uppercase">Subscribers</strong>
+    <p class="margin-none-block-start margin-block-end-half"><%= pluralize(bubble.watchers.count, "person") %> will be notified when someone comments on this.</p>
+    <div class="flex align-center flex-wrap gap-half max-width"  style="font-size: 0.8em;">
+      <%= render partial: "bubbles/watches/watcher", collection:  bubble.watchers.sorted_with_user_first(Current.user) %>
     </div>
   </div>
 <% end %>

app/views/bubbles/pins/_pin.html.erb

@@ -6,10 +6,17 @@
           data: { action: "click->dialog#close", turbo_frame: "_top" } do %>
       <div class="flex flex-column txt-tight-lines min-width flex-item-grow">
         <strong class="overflow-ellipsis pin__title"><%= pin.bubble.title %></strong>
-        <div class="overflow-ellipsis" style="color: <%= pin.bubble.color %>">
-          <%= pin.bubble.bucket.name %>
-          <%= "· #" if pin.bubble.tags.any? %>
-          <%= pin.bubble.tags.map(&:title).join(", ") %>
+        <div class="flex gap-half">
+          <div class="overflow-ellipsis" style="color: <%= pin.bubble.color %>; font-weight: 500;">
+            <%= pin.bubble.bucket.name -%>
+            <%= " · #" if pin.bubble.tags.any? -%><%= pin.bubble.tags.map(&:title).join(", ") -%>
+          </div>
+
+          <% if pin.bubble&.stage %>
+            <div class="flex flex-column txt-uppercase border flex-item-justify-end" style="font-size: 0.8em; --border-color: currentColor; padding: 0.1em 0.4em;">
+              <%= pin.bubble&.stage&.name %>
+            </div>
+          <% end %>
         </div>
       </div>
     <% end %>

app/views/bubbles/pins/_tray.html.erb

@@ -13,7 +13,7 @@
   <% end %>
 
   <div class="pin-tray__actions flex align-center gap-half">
-    <%= tag.button type: "button", class: "pin-tray__all_action btn flex-item-justify-start shadow", data: { action: "click->dialog#close"} do %>
+    <%= tag.button type: "button", class: "pin-tray__all_action btn flex-item-justify-end shadow", data: { action: "click->dialog#close"} do %>
       <%= image_tag "pinned.svg", aria: { hidden: true }, size: 24 %>
       <span>See all pins</span>
     <% end %>

app/views/events/_filter.html.erb

@@ -1,7 +1,9 @@
 <% presenter = BucketFilterPresenter.new(@buckets, params, cookies) %>
 <div class="position-relative max-width"
 		data-controller="dialog" data-action="keydown.esc->dialog#close click@document->dialog#closeOnClickOutside">
-	<button class="input input--select flex-inline min-width max-width txt-small" data-action="click->dialog#open:stop">
+	<button class="input input--select flex-inline min-width max-width txt-small" 
+				data-action="click->dialog#open:stop"
+				style="background-color: var(--color-ink); color: var(--color-ink-reversed);">
 		<span class="overflow-ellipsis">
 			<%= presenter.filter_text %>
 		</span>

app/views/events/index.html.erb

@@ -2,7 +2,10 @@
 
 <% content_for :header do %>
   <nav class="align-start">
-    <div class="btn btn--placeholder flex-item-justify-start"></div>
+    <header style="margin-inline-start: clamp(var(--inline-space), 3cqmin, calc(var(--inline-space) * 3))">
+      <h1 class="txt-x-large"><%= Current.account.name %></h1>
+    </header>
+
     <%= link_to account_users_path, class: "btn flex-item-justify-end" do %>
       <%= image_tag "settings.svg", aria: { hidden: true }, size: 24 %>
       <span class="for-screen-reader">Account settings</span>
@@ -12,7 +15,7 @@
 
 <div class="events__container align-start gap">
   <div class="flex flex-column">
-    <div class="flex align-center gap justify-space-between margin-block-end-half" style="padding-inline: calc(0.3em + 0.6em);">
+    <div class="flex align-center gap justify-space-between" style="padding: 0.7em calc(0.3em + 0.6em); background-color: var(--color-ink); color: var(--color-ink-reversed); margin-inline-end: 0.2em;">
       <h2 class="txt-large txt-nowrap">Latest activity</h2>
       <%= render "events/filter" %>
     </div>
@@ -22,7 +25,7 @@
   </div>
 
   <div class="txt-align-start">
-    <h2 class="txt-large txt-nowrap" style="margin-block-end: 0.5em;">Custom views</h2>
+    <h2 class="txt-large txt-nowrap" style="margin-block: 0.4em 0.5em;">Custom views</h2>
     <div style="border-block-start: 1px solid var(--color-subtle); padding-block-start: var(--block-space-half);">
       <% @filters.each do |filter| %>
         <h3 class="txt-medium margin-block-end-half txt-tight-lines">
@@ -47,4 +50,6 @@
   </div>
 </div>
 
+<%= render "bubbles/pins/tray" %>
+
 <%= event_next_page_link(@next_day) %>

app/views/notifications/_tray.html.erb

@@ -13,11 +13,11 @@
   <% end %>
 
   <div class="notification-tray__actions flex align-center gap-half">
-    <%= button_to notifications_mark_all_read_path, class: "notification-tray__read_action btn flex-item-justify-start shadow", data: { action: "click->dialog#close", turbo_frame: "notifications" } do %>
+    <%= button_to notifications_mark_all_read_path, class: "notification-tray__read_action btn flex-item-justify-end shadow", data: { action: "click->dialog#close", turbo_frame: "notifications" } do %>
       Mark all as read
     <% end %>
 
-    <%= link_to notifications_path, class: "notification-tray__all_action btn flex-item-justify-end shadow", data: { action: "click->dialog#close"} do %>
+    <%= link_to notifications_path, class: "notification-tray__all_action btn flex-item-justify-start shadow", data: { action: "click->dialog#close"} do %>
       <%= image_tag "bell.svg", aria: { hidden: true }, size: 24 %>
       <span>See all notifications</span>
     <% end %>

app/views/notifications/index.html.erb

@@ -28,7 +28,7 @@
 
       <%= render @unread %>
     <% else %>
-      <div class="pad border-radius border translucent" style="--border-style: dashed; --border-color: var(--color-ink);">
+      <div class="pad border-radius border translucent" style="--border-style: dashed; --border-color: var(--color-ink); --border-radius: 0.2em;">
         <strong>Nothing new for you.</strong>
       </div>
     <% end %>