From ee8559343ae0c58b35d831281f4bfbb51d2575d4 Mon Sep 17 00:00:00 2001
From: Jason Zimdars <jz@37signals.com>
Date: Fri, 11 Apr 2025 11:50:09 -0500
Subject: [PATCH] Tighten engagement switch design, only display it for
 published cards

---
 app/assets/stylesheets/buttons.css |  8 ++++++--
 app/assets/stylesheets/cards.css   |  3 ++-
 app/views/cards/show.html.erb      | 28 +++++++++++++++-------------
 3 files changed, 23 insertions(+), 16 deletions(-)

diff --git a/app/assets/stylesheets/buttons.css b/app/assets/stylesheets/buttons.css
index a6e1e1139..693ba2429 100644
--- a/app/assets/stylesheets/buttons.css
+++ b/app/assets/stylesheets/buttons.css
@@ -201,15 +201,19 @@
     }
 
     :first-of-type .btn {
-      border-top-left-radius: 2em;
       border-bottom-left-radius: 2em;
+      border-inline-end: 0;
+      border-top-left-radius: 2em;
       flex: 1 0 50%;
+      padding-inline-end: 0.8em;
     }
 
     :last-of-type .btn {
-      border-top-right-radius: 2em;
       border-bottom-right-radius: 2em;
+      border-inline-start: 0;
+      border-top-right-radius: 2em;
       flex: 1 0 50%;
+      padding-inline-start: 0.8em;
     }
 
     span {
diff --git a/app/assets/stylesheets/cards.css b/app/assets/stylesheets/cards.css
index 61beab9b2..8a30732ed 100644
--- a/app/assets/stylesheets/cards.css
+++ b/app/assets/stylesheets/cards.css
@@ -153,7 +153,8 @@
 
     &.card__actions-container--top {
       margin: calc(var(--block-space) * 1) auto calc(var(--block-space) * -0.66);
-      min-inline-size: 30ch;
+      min-inline-size: 28ch;
+      padding: 0;
 
       #header:has(&) {
         position: relative;
diff --git a/app/views/cards/show.html.erb b/app/views/cards/show.html.erb
index 93f338f8a..c4a621a00 100644
--- a/app/views/cards/show.html.erb
+++ b/app/views/cards/show.html.erb
@@ -23,23 +23,25 @@
     <%= link_to_home %>
     <%= link_to_back fallback_path: cards_path(collection_id: @card.collection) %>
 
-    <div class="card__actions-container card__actions-container--top center border-radius" style="--card-color: <%= @card.color %>;">
-      <div class="btn__group flex full-width">
-        <%= form_with url: card_engagement_path(@card), method: :delete, data: { controller: "form" } do |form| %>
-          <%= form.label :engagement, value: "considering", class: "btn", aria: { label: "Move to Doing"} do %>
-            <%= form.radio_button :engagement, "considering", checked: @card.considering?, class: "for-screen-reader", data: { action: "change->form#submit" } %>
-            <span>Considering</span>
+    <% if @card.published? %>
+      <div class="card__actions-container card__actions-container--top center border-radius" style="--card-color: <%= @card.color %>;">
+        <div class="btn__group flex full-width txt-uppercase">
+          <%= form_with url: card_engagement_path(@card), method: :delete, data: { controller: "form" } do |form| %>
+            <%= form.label :engagement, value: "considering", class: "btn", aria: { label: "Move to Doing"} do %>
+              <%= form.radio_button :engagement, "considering", checked: @card.considering?, class: "for-screen-reader", data: { action: "change->form#submit" } %>
+              <span>Considering</span>
+            <% end %>
           <% end %>
-        <% end %>
 
-        <%= form_with url: card_engagement_path(@card), method: :post, data: { controller: "form" } do |form| %>
-          <%= form.label :engagement, value: "doing", class: "btn", aria: { label: "Move back to Considering"} do %>
-            <%= form.radio_button :engagement, "doing", checked: @card.doing?, class: "for-screen-reader", data: { action: "change->form#submit" } %>
-            <span>Doing</span>
+          <%= form_with url: card_engagement_path(@card), method: :post, data: { controller: "form" } do |form| %>
+            <%= form.label :engagement, value: "doing", class: "btn", aria: { label: "Move back to Considering"} do %>
+              <%= form.radio_button :engagement, "doing", checked: @card.doing?, class: "for-screen-reader", data: { action: "change->form#submit" } %>
+              <span>Doing</span>
+            <% end %>
           <% end %>
-        <% end %>
+        </div>
       </div>
-    </div>
+    <% end %>
 
     <div class="btn btn--placeholder flex-item-justify-end"></div>
     <div class="btn btn--placeholder"></div>