From 7a545f5afd9e2d59905089b1be4610263afedfc0 Mon Sep 17 00:00:00 2001
From: Jason Zimdars <jz@37signals.com>
Date: Mon, 7 Apr 2025 21:48:17 -0500
Subject: [PATCH] Tighten up

---
 app/assets/stylesheets/cards.css | 26 +++++++++++++++++++-------
 app/views/bubbles/show.html.erb  |  7 +++----
 2 files changed, 22 insertions(+), 11 deletions(-)

diff --git a/app/assets/stylesheets/cards.css b/app/assets/stylesheets/cards.css
index 1b9231cae..d6352661b 100644
--- a/app/assets/stylesheets/cards.css
+++ b/app/assets/stylesheets/cards.css
@@ -112,9 +112,12 @@
   }
 
   .card__actions-container {
+    --border-radius: 1em;
+  
     background-color: var(--color-bg);
-    margin-block: calc(var(--block-space) * -1) var(--block-space);
-    padding: var(--block-space) var(--inline-space-double);
+    color: color-mix(in srgb, var(--bubble-color) 40%, var(--color-ink));
+    margin-block: calc(var(--block-space) * -1.66) calc(var(--block-space) * 1.66);
+    padding: calc(var(--block-space) * 0.66) calc(var(--inline-space) * 1.5);
     position: relative;
     z-index: 0;
 
@@ -139,8 +142,9 @@
   }
 
   .card__actions-container--top {
-    margin: var(--block-space-half) auto calc(var(--block-space) * -2);
-    padding: var(--block-space) 3ch;
+    min-inline-size: 36ch;
+    margin: calc(var(--block-space) * 1) auto calc(var(--block-space) * -0.33);
+    padding: 0.5em 0.75em;
 
     #header:has(&) {
       position: relative;
@@ -150,8 +154,16 @@
     .switch__input:checked + .switch__btn {
       background-color: var(--bubble-color) !important;
     }
-  }
 
+    strong {
+      flex: 1 0 42%;
+      text-align: end;
+
+      &:last-of-type {
+        text-align: start;
+      }
+    }
+  }
 
   .cards .card__assignees:not(:has(.avatar)) {
     .txt-uppercase {
@@ -235,8 +247,8 @@
     background-color: color-mix(in srgb, var(--bubble-color) 33%, var(--color-bg));
     border-radius: 0.2em;
     display: inline-flex;
-    padding-block: var(--padding-block);
-    padding-inline: var(--padding-inline);
+    margin-block: calc(var(--block-space) * -1) calc(var(--block-space) * -0.33);
+    padding: var(--padding-block) var(--padding-inline);
 
     &:has(.card__star-input:checked) {
       .card {
diff --git a/app/views/bubbles/show.html.erb b/app/views/bubbles/show.html.erb
index ec41a139d..660a334c0 100644
--- a/app/views/bubbles/show.html.erb
+++ b/app/views/bubbles/show.html.erb
@@ -21,11 +21,10 @@
 
   <nav class="align-start max-width">
     <%= link_to_home %>
-
     <%= link_to_back fallback_path: bubbles_path(bucket_id: @bubble.bucket) %>
 
-    <div class="card__actions-container card__actions-container--top center border-radius flex-inline align-center justify-center gap"  style="--bubble-color: <%= @bubble.color %>;">
-      <span>Considering</span>
+    <div class="card__actions-container card__actions-container--top center flex align-center gap border-radius" style="--bubble-color: <%= @bubble.color %>;">
+      <strong class="txt-uppercase">Considering</strong>
       <% if @bubble.doing? %>
         <%= form_with url: bubble_engagement_path(@bubble), method: :delete, data: { controller: "form" }, class: "flex" do %>
           <label class="switch flex-item-no-shrink">
@@ -43,7 +42,7 @@
           </label>
         <% end %>
       <% end %>
-      <span>Doing</span>
+      <strong class="txt-uppercase">Doing</strong>
     </div>
 
     <div class="btn btn--placeholder flex-item-justify-end"></div>