Tray pins design

app/assets/stylesheets/notifications.css

@@ -113,6 +113,11 @@
   }
 }
 
+.notification__meta {
+  font-size: 0.9em;
+  font-weight: 500;
+}
+
 .notification__title {
   padding-inline-end: calc(var(--inline-space-half) + 1.2em);
 }

app/assets/stylesheets/pins.css

@@ -77,21 +77,6 @@
   }
 }
 
-.pin__content {
-  color: var(--color-ink);
-  border: 1px solid;
-  border-radius: 0.2em;
-
-  .notificiations-list--read & {
-    border: 1px solid var(--color-subtle);
-    box-shadow: none;
-  }
-}
-
-.pin__title {
-  padding-inline-end: calc(var(--inline-space-half) + 1.2em);
-}
-
 .pin-tray__expander {
   --hover-size: 0;
   --outline-size: 0;
@@ -106,4 +91,48 @@
   .pin-tray:has(.pin:only-child) & {
     display: none;
   }
+}
+
+.pin__bucket {
+  background-color: var(--bubble-color);
+  font-weight: 800;
+  letter-spacing: 0.5ch;
+  padding: 0.3em 0.9em 0.3em 1em;
+}
+
+.pin__content {
+  border: 0;
+  border-radius: 0.2em;
+  color: var(--color-ink);
+  overflow: clip;
+  padding: 1em 1em 1.2em;
+
+  .notificiations-list--read & {
+    border: 1px solid var(--color-subtle);
+    box-shadow: none;
+  }
+}
+
+.pin__header {
+  margin: -1em -1em auto;
+  padding: 0 0.3em 0 0;
+}
+
+.pin__meta {
+  font-size: 0.9em;
+  font-weight: 500;
+}
+
+.pin__stage {
+  --border-color: currentColor;
+
+  padding: 0.2em 0.5em;
+}
+
+.pin__tags {
+  color: var(--bubble-color);
+}
+
+.pin__title {
+  margin-block-start: 0.3rem;
 }

app/assets/stylesheets/utilities.css

@@ -8,8 +8,9 @@
   --block-space-double: calc(var(--block-space) * 2);
 
   /* Text sizes */
-  --text-x-small: 0.6rem;
+  --text-x-small: 0.7rem;
   --text-small: 0.8rem;
+  --txt-normal: 1rem;
   --text-medium: 1.2rem;
   --text-large: 1.5rem;
   --text-x-large: 1.8rem;
@@ -35,7 +36,6 @@
 .txt-alert { color: var(--color-marker); }
 .txt-undecorated { text-decoration: none; }
 .txt-tight-lines { line-height: 1.2; }
-.txt-normal { font-weight: 400; font-style: normal; }
 .txt-nowrap { white-space: nowrap; }
 .txt-break { word-break: break-word; }
 .txt-uppercase { text-transform: uppercase; }
@@ -102,7 +102,6 @@
   -webkit-box-orient: vertical;
   display: -webkit-box;
   overflow: hidden;
-  padding-block-end: 0.2lh;
   text-overflow: clip;
   white-space: normal;
 }
@@ -171,7 +170,7 @@
 .fill-highlight { background-color: var(--color-highlight); }
 .fill-transparent { background-color: transparent; }
 
-.translucent { opacity: var(--opacity, 0.5); }
+.translucent { opacity: var(--opacity, 0.66); }
 
 /* Borders */
 .border { border: var(--border-size, 1px) var(--border-style, solid) var(--border-color, var(--color-subtle)); }

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

@@ -1,23 +1,35 @@
 <% cache pin do %>
   <%= tag.div id: dom_id(pin), class: "pin flex position-relative" do %>
     <%= link_to bucket_bubble_path(pin.bubble.bucket, pin.bubble),
-          class: "pin__content pad pad-inline-double shadow fill-white flex align-start txt-align-start gap flex-item-grow max-width",
-          style: "border-color: #{ pin.bubble.color }",
-          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"><%= bubble_title(pin.bubble) %></strong>
-        <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(", ") -%>
+          class: "pin__content shadow fill-white flex align-start txt-align-start gap flex-item-grow max-width",
+          data: { action: "click->dialog#close", turbo_frame: "_top" },
+          style: "--bubble-color: #{ pin.bubble.color };" do %>
+      <div class="flex flex-column min-width flex-item-grow">
+        <div class="pin__header flex align-end txt-uppercase">
+          <div class="pin__bucket flex-inline flex-item-justify-start overflow-ellipsis txt-reversed">
+            <span class="txt-x-small"><%= pin.bubble.bucket.name %></span>
           </div>
 
           <% if pin.bubble&.stage %>
-            <div class="flex flex-column txt-uppercase border flex-item-justify-end" style="font-weight: 600; font-size: 0.8em; --border-color: currentColor; padding: 0.1em 0.4em;">
+            <strong class="pin__stage border txt-tight-lines flex-item-justify-end txt-x-small">
               <%= pin.bubble&.stage&.name %>
-            </div>
+            </strong>
           <% end %>
         </div>
+  
+        <strong class="pin__title overflow-ellipsis"><%= bubble_title(pin.bubble) %></strong>
+  
+        <div class="pin__meta flex align-end txt-normal gap-half txt-tight-lines">
+          <div class="translucent">
+            <span>Updated</span> <%= local_datetime_tag(pin.bubble.updated_at, style: :ago) -%>
+          </div>
+
+          <%= " · " if pin.bubble.tags.any? %>
+          <div class="overflow-ellipsis pin__tags txt-uppercase">
+            <%= "#" if pin.bubble.tags.any? %>
+            <%= pin.bubble.tags.map(&:title).join(", ") %>
+          </div>
+        </div>
       </div>
     <% end %>
   <% end %>

app/views/notifications/_notification.html.erb

@@ -13,7 +13,7 @@
             <%= notification_body(notification) %>
           <% end %>
         </div>
-      <div class="overflow-ellipsis translucent"><%= notification.bubble.bucket.name %> · <%= local_datetime_tag(notification.created_at, style: :ago) %></div>
+      <div class="notification__meta overflow-ellipsis translucent"><%= notification.bubble.bucket.name %> · <%= local_datetime_tag(notification.created_at, style: :ago) %></div>
     </div>
   <% end %>
 <% end %>