From 71d98d9eaa93a0a0238caace81712184eb37645d Mon Sep 17 00:00:00 2001
From: Jason Zimdars <jz@37signals.com>
Date: Tue, 19 Nov 2024 12:59:37 -0600
Subject: [PATCH] Tighten up workflow panel

---
 app/assets/images/menu-dots-horizontal.svg   |  1 +
 app/helpers/workflows_helper.rb              |  2 +-
 app/views/bubbles/stage_pickers/new.html.erb | 12 ++++++------
 3 files changed, 8 insertions(+), 7 deletions(-)
 create mode 100644 app/assets/images/menu-dots-horizontal.svg

diff --git a/app/assets/images/menu-dots-horizontal.svg b/app/assets/images/menu-dots-horizontal.svg
new file mode 100644
index 000000000..4e60fdd40
--- /dev/null
+++ b/app/assets/images/menu-dots-horizontal.svg
@@ -0,0 +1 @@
+<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><circle cx="3.25" cy="12" r="3.25"/><circle cx="12" cy="12" r="3.25"/><circle cx="20.75" cy="12" r="3.25"/></svg>
\ No newline at end of file
diff --git a/app/helpers/workflows_helper.rb b/app/helpers/workflows_helper.rb
index ef88e828b..1a0cf432a 100644
--- a/app/helpers/workflows_helper.rb
+++ b/app/helpers/workflows_helper.rb
@@ -1,6 +1,6 @@
 module WorkflowsHelper
   def link_to_stage_picker(bubble, workflow)
-    link_to workflow.name, new_bucket_bubble_stage_picker_path(bubble.bucket, bubble, workflow_id: workflow), class: "filter__button"
+    link_to workflow.name, new_bucket_bubble_stage_picker_path(bubble.bucket, bubble, workflow_id: workflow), class: "btn full-width justify-start borderless workflow-stage"
   end
 
   def button_to_set_stage(bubble, stage)
diff --git a/app/views/bubbles/stage_pickers/new.html.erb b/app/views/bubbles/stage_pickers/new.html.erb
index 35f89a37d..2783bc6aa 100644
--- a/app/views/bubbles/stage_pickers/new.html.erb
+++ b/app/views/bubbles/stage_pickers/new.html.erb
@@ -1,14 +1,13 @@
 <%= turbo_frame_tag dom_id(@bubble, :stage_picker) do %>
   <% if @selected_workflow %>
-    <aside class="position-relative" style="--bubble-color: <%= @bubble.color %>"
+    <aside class="position-relative border pad border-radius" style="--bubble-color: <%= @bubble.color %>"
         data-controller="dialog" data-action="keydown.esc->dialog#close click@document->dialog#closeOnClickOutside">
-      <div class="flex flex-column">
-        <button class="btn center" data-action="click->dialog#toggle" data-dialog-modal-value="true">
+      <div class="flex align-center justify-start gap-half">
+        <button class="btn txt-small" data-action="click->dialog#toggle" data-dialog-modal-value="true">
           <%= image_tag "bolt.svg", aria: { hidden: true }, size: 24 %>
           <span class="for-screen-reader">Choose a workflow</span>
         </button>
-        <strong class="txt-large center"><%= @selected_workflow.name %></strong>
-        <hr class="separator--horizontal full-width" hidden />
+        <strong class="txt-large"><%= @selected_workflow.name %></strong>
       </div>
 
       <dialog class="workflow__popup panel fill-white shadow" data-dialog-target="dialog">
@@ -19,7 +18,8 @@
         </menu>
       </dialog>
 
-      <div class="workflow border pad border-radius margin-block-start-half">
+      <div class="workflow margin-block-start-half">
+        <hr class="separator--horizontal" aria-hidden="true" style="--border-color: var(--color-subtle)" />
         <div class="flex flex-column gap-half">
           <% @selected_workflow.stages.each do |stage| %>
             <%= button_to_set_stage @bubble, stage %>