Style undo button

app/assets/stylesheets/buttons.css

@@ -153,8 +153,10 @@
   }
 
   .btn--plain {
+    --btn-background: transparent;
     --btn-border-radius: 0.5em;
     --btn-border-size: 0;
+    --btn-color: inherit;
     --btn-icon-size: 100%;
     --btn-padding: 0;
     --hover-size: 0;

app/assets/stylesheets/terminals.css

@@ -40,6 +40,20 @@
     }
   }
 
+  .terminal__button {
+    --btn-color: var(--color-terminal-text);
+    --btn-border-radius: 1em;
+    --btn-border-color: var(--color-terminal-text);
+    --btn-padding: 0.1em 0.7em;
+    --btn-border-size: 1px;
+    --hover-color: var(--color-terminal-text);
+    --hover-size: 2px;
+
+    font-family: var(--font-mono);
+    font-size: var(--text-x-small);
+    white-space: nowrap;
+  }
+
   .terminal__link {
     --hover-size: 0;
 

app/views/commands/_command.html.erb

@@ -1,7 +1,7 @@
-<li class="min-width overflow-ellipsis flex">
-  <%= command.title %>
+<li class="min-width flex gap-half">
+  <span class="overflow-ellipsis"><%= command.title %></span>
 
   <% if command.undoable? %>
-    <%= button_to "Undo", command_undo_path(command), class: "btn btn--remove", data: { turbo_confirm: "Are you sure you want to undo '#{command.title}'?", turbo_frame: "_top" } %>
+    <%= button_to "Undo", command_undo_path(command), class: "btn btn--plain terminal__button", data: { turbo_confirm: "Are you sure you want to undo '#{command.title}'?", turbo_frame: "_top" } %>
   <% end %>
 </li>