Nicer submit and cancel buttons

app/assets/stylesheets/reactions.css

@@ -28,52 +28,6 @@
     }
   }
 
-  /* Menu
-  /* ------------------------------------------------------------------------ */
-
-  .reactions__menu {
-    position: relative;
-  }
-
-  .reactions__trigger {
-    --btn-border-color: var(--reaction-border-color);
-    --btn-size: var(--reaction-size);
-
-    font-size: 0.75em;
-
-    .reactions:not(:has(.reaction)) & {
-    }
-  }
-
-  .reactions__popup {
-    --panel-border-radius: 1.2em;
-    --panel-padding: 0.5ch;
-    --offset: calc(-1 * var(--panel-padding));
-
-    inset: var(--offset) auto auto var(--offset);
-    min-inline-size: auto;
-    transform: none;
-  }
-
-  .reactions__emoji-list {
-    display: grid;
-    grid-template-columns: repeat(3, 1fr);
-
-    .btn {
-      --btn-icon-size: 1.5ch;
-      --btn-size: var(--reaction-size);
-      --btn-border-color: var(--color-canvas);
-
-      position: relative;
-
-      /* Make sure the selection ring sits on top of adjacent buttons on hover */
-      &:hover,
-      &:focus-visible {
-        z-index: 1;
-      }
-    }
-  }
-
   /* Single reaction
   /* -------------------------------------------------------------------------- */
 
@@ -87,7 +41,7 @@
     border: 1px solid var(--reaction-border-color);
     border-radius: 4rem;
     display: inline-flex;
-    gap: var(--column-gap);
+    gap: 0.25ch;
     max-inline-size: 100%;
     opacity: 1;
     padding: 0.1em 0.12em;
@@ -164,4 +118,56 @@
   .reaction--deleting {
     animation: scale-fade-out 0.2s both;
   }
+
+  .reaction__menu-btn,
+  .reaction__submit-btn,
+  .reaction__cancel-btn {
+    --btn-size: 1.25rem;
+    --icon-size: var(--btn-size);
+  }
+
+  .reaction__submit-btn {
+    color: oklch(var(--lch-green-dark));
+  }
+
+  .reaction__cancel-btn {
+    color: oklch(var(--lch-red-dark));
+  }
+
+
+  /* Menu
+  /* ------------------------------------------------------------------------ */
+
+  .reaction__menu {
+    position: relative;
+  }
+
+  .reaction__popup {
+    --panel-border-radius: 1.2em;
+    --panel-padding: 0.5ch;
+    --offset: calc(-1 * var(--panel-padding));
+
+    inset: var(--offset) auto auto var(--offset);
+    min-inline-size: auto;
+    transform: none;
+  }
+
+  .reaction__emoji-list {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+
+    .btn {
+      --btn-icon-size: 1.5ch;
+      --btn-size: var(--reaction-size);
+      --btn-border-color: var(--color-canvas);
+
+      position: relative;
+
+      /* Make sure the selection ring sits on top of adjacent buttons on hover */
+      &:hover,
+      &:focus-visible {
+        z-index: 1;
+      }
+    }
+  }
 }

app/views/cards/comments/reactions/_menu.html.erb

@@ -1,12 +1,12 @@
-<div class="reactions__menu" data-controller="dialog" data-action="keydown.esc->dialog#close:stop click@document->dialog#closeOnClickOutside">
-  <button class="reactions__trigger btn btn--circle borderless" data-action="click->dialog#open:stop">
+<div class="reaction__menu" data-controller="dialog" data-action="keydown.esc->dialog#close:stop click@document->dialog#closeOnClickOutside">
+  <button class="reaction__menu-btn btn btn--circle borderless" data-action="click->dialog#open:stop">
     <%= icon_tag "reaction" %>
   </button>
 
-  <dialog class="reactions__popup popup panel fill-white shadow" data-dialog-target="dialog">
-    <div class="reactions__emoji-list">
+  <dialog class="reaction__popup popup panel fill-white shadow" data-dialog-target="dialog">
+    <div class="reaction__emoji-list">
       <% EmojiHelper::REACTIONS.each do |character, title| %>
-        <%= tag.button character, title: title, class: "reactions__emoji-btn btn btn--circle", data: { action: "reaction-emoji#insertEmoji", emoji: character } %>
+        <%= tag.button character, title: title, class: "reaction__emoji-btn btn btn--circle", data: { action: "reaction-emoji#insertEmoji", emoji: character } %>
       <% end %>
     </div>
   </dialog>

app/views/cards/comments/reactions/new.html.erb

@@ -14,12 +14,12 @@
 
     <%= render "cards/comments/reactions/menu", comment: @comment %>
 
-    <%= form.button class: "btn btn--circle borderless btn--reversed", type: "submit", data: { form_target: "submit" } do %>
+    <%= form.button class: "reaction__submit-btn btn btn--circle borderless", type: "submit", data: { form_target: "submit" } do %>
       <%= icon_tag "check-circle" %> <span class="for-screen-reader">Submit</span>
     <% end %>
 
     <%= link_to card_comment_reactions_path(@comment.card, @comment), role: "button",
-          data: { turbo_frame: dom_id(@comment, :reacting), form_target: "cancel" }, class: "btn btn--circle borderless btn--negative" do %>
+          data: { turbo_frame: dom_id(@comment, :reacting), form_target: "cancel" }, class: "reaction__cancel-btn btn btn--circle borderless" do %>
       <%= icon_tag "close-circle" %> <span class="for-screen-reader">Cancel</span>
     <% end %>
   <% end %>