From 812e8226bbf19ee851db389605914e7ae825fccb Mon Sep 17 00:00:00 2001
From: Emi Matchu <emi@matchu.dev>
Date: Fri, 26 Dec 2025 23:01:40 -0800
Subject: [PATCH] [WV2] Unify button styles

---
 app/assets/stylesheets/wardrobe/show.css     | 432 ++++++++-----------
 app/views/wardrobe/_search_results.html.haml |   5 -
 app/views/wardrobe/show.html.haml            |  13 +-
 3 files changed, 200 insertions(+), 250 deletions(-)

diff --git a/app/assets/stylesheets/wardrobe/show.css b/app/assets/stylesheets/wardrobe/show.css
index 4724b36a..e47e904b 100644
--- a/app/assets/stylesheets/wardrobe/show.css
+++ b/app/assets/stylesheets/wardrobe/show.css
@@ -1,5 +1,172 @@
 @import "../application/item-badges.css";
 
+/* Base button defaults - applied to all interactive controls */
+button,
+input[type="submit"],
+select {
+  padding: 0.5rem 0.75rem;
+  font-size: 0.95rem;
+  border-radius: 0.375rem;
+  border: 1px solid #ddd;
+  background: white;
+  color: #448844;
+  cursor: pointer;
+  transition: all 0.2s;
+
+  &:hover {
+    background: #f9f9f9;
+    border-color: #448844;
+  }
+
+  &:focus {
+    outline: none;
+    border-color: #448844;
+    box-shadow: 0 0 0 3px rgba(68, 136, 68, 0.1);
+  }
+}
+
+/* Overlay variant - dark translucent buttons on preview background */
+.outfit-preview-section {
+  button,
+  select,
+  input[type="submit"] {
+    background: rgba(0, 0, 0, 0.7);
+    border: 1px solid rgba(255, 255, 255, 0.3);
+    color: white;
+    backdrop-filter: blur(8px);
+    -webkit-backdrop-filter: blur(8px);
+
+    &:hover {
+      background: rgba(0, 0, 0, 0.8);
+      border-color: rgba(255, 255, 255, 0.5);
+    }
+
+    &:focus {
+      border-color: rgba(255, 255, 255, 0.8);
+      box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.1);
+    }
+  }
+}
+
+/* Primary action variant - solid green for main actions */
+.search-form input[type="submit"] {
+  padding: 0.75rem 1.5rem;
+  font-size: 1rem;
+  border: none;
+  background: #448844;
+  color: white;
+  font-weight: 500;
+
+  &:hover {
+    background: #357535;
+  }
+
+  &:focus {
+    box-shadow: 0 0 0 3px rgba(68, 136, 68, 0.3);
+  }
+
+  &:active {
+    transform: scale(0.98);
+  }
+}
+
+/* Icon button pattern - small action buttons with hover reveals */
+.item-remove-button,
+.item-add-button {
+  position: absolute;
+  top: 0.5rem;
+  right: 0.5rem;
+  padding: 0;
+  margin: 0;
+  border: none;
+  border-radius: 4px;
+  font-size: 1rem;
+  line-height: 1;
+  width: 1.75rem;
+  height: 1.75rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  opacity: 0;
+  transition: opacity 0.2s, background 0.2s, transform 0.1s;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
+
+  &:hover {
+    transform: scale(1.1);
+  }
+
+  &:active {
+    transform: scale(0.95);
+  }
+
+  &:focus {
+    opacity: 1;
+    outline: 2px solid #448844;
+    outline-offset: 2px;
+  }
+}
+
+.item-remove-button {
+  background: rgba(255, 255, 255, 0.9);
+
+  &:hover {
+    background: rgba(255, 255, 255, 1);
+  }
+}
+
+.item-add-button {
+  background: rgba(68, 136, 68, 0.9);
+
+  &:hover {
+    background: rgba(68, 136, 68, 1);
+  }
+}
+
+/* Pagination links - treated as buttons for consistency */
+.pagination {
+  a,
+  span,
+  em {
+    padding: 0.5rem 0.75rem;
+    font-size: 0.9rem;
+    border-radius: 4px;
+    border: 1px solid #ddd;
+    background: white;
+    color: #448844;
+    text-decoration: none;
+    transition: all 0.2s;
+
+    &:hover {
+      background: #f9f9f9;
+      border-color: #448844;
+    }
+  }
+
+  .current,
+  em {
+    background: #448844;
+    color: white;
+    border-color: #448844;
+    font-style: normal;
+
+    &:hover {
+      background: #448844;
+      border-color: #448844;
+    }
+  }
+
+  .disabled {
+    color: #ccc;
+    border-color: #eee;
+    cursor: not-allowed;
+
+    &:hover {
+      background: white;
+      border-color: #eee;
+    }
+  }
+}
+
 body.wardrobe-v2 {
   margin: 0;
   padding: 0;
@@ -75,19 +242,9 @@ body.wardrobe-v2 {
   /* Pose picker button */
   .pose-picker-button {
     anchor-name: --pose-picker-anchor;
-    padding: 0.5rem 0.75rem;
-    font-size: 0.95rem;
-    border: 1px solid rgba(255, 255, 255, 0.3);
-    border-radius: 0.375rem;
-    background: rgba(0, 0, 0, 0.7);
-    color: white;
-    cursor: pointer;
-    backdrop-filter: blur(8px);
-    -webkit-backdrop-filter: blur(8px);
     display: flex;
     align-items: center;
     gap: 0.5rem;
-    transition: all 0.2s;
 
     .pose-emoji {
       font-size: 1.1rem;
@@ -103,20 +260,9 @@ body.wardrobe-v2 {
       opacity: 0.7;
     }
 
-    &:hover {
-      background-color: rgba(0, 0, 0, 0.8);
-      border-color: rgba(255, 255, 255, 0.5);
-    }
-
-    &:focus {
-      outline: none;
-      border-color: rgba(255, 255, 255, 0.8);
-      box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.1);
-    }
-
+    &:focus,
     &[popovertargetopen] {
       border-color: rgba(255, 255, 255, 0.8);
-      background-color: rgba(0, 0, 0, 0.8);
     }
   }
 
@@ -242,25 +388,7 @@ body.wardrobe-v2 {
     /* Submit button: progressive enhancement pattern */
     .pose-submit-button {
       margin-top: 1rem;
-      padding: 0.5rem 1rem;
-      font-size: 0.95rem;
-      border: 1px solid rgba(255, 255, 255, 0.3);
-      border-radius: 6px;
-      background: rgba(255, 255, 255, 0.1);
-      color: white;
-      cursor: pointer;
       width: 100%;
-
-      &:hover {
-        background-color: rgba(255, 255, 255, 0.15);
-        border-color: rgba(255, 255, 255, 0.5);
-      }
-
-      &:focus {
-        outline: none;
-        border-color: rgba(255, 255, 255, 0.8);
-        box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.2);
-      }
     }
 
     /* If JS is enabled, hide the submit button initially with a delay */
@@ -287,30 +415,12 @@ body.wardrobe-v2 {
     select {
       padding: 0.5rem 2rem 0.5rem 0.75rem;
       font-size: 1rem;
-      border: 1px solid rgba(255, 255, 255, 0.3);
-      border-radius: 0.375rem;
-      background: rgba(0, 0, 0, 0.7);
-      color: white;
-      cursor: pointer;
-      backdrop-filter: blur(8px);
-      -webkit-backdrop-filter: blur(8px);
       appearance: none;
       background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3E%3Cpath stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3E%3C/svg%3E");
       background-position: right 0.5rem center;
       background-repeat: no-repeat;
       background-size: 1.5em 1.5em;
 
-      &:hover {
-        background-color: rgba(0, 0, 0, 0.8);
-        border-color: rgba(255, 255, 255, 0.5);
-      }
-
-      &:focus {
-        outline: none;
-        border-color: rgba(255, 255, 255, 0.8);
-        box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.1);
-      }
-
       option {
         background: #2D3748;
         color: white;
@@ -324,24 +434,6 @@ body.wardrobe-v2 {
     input[type="submit"] {
       padding: 0.5rem 1rem;
       font-size: 1rem;
-      border: 1px solid rgba(255, 255, 255, 0.3);
-      border-radius: 0.375rem;
-      background: rgba(0, 0, 0, 0.7);
-      color: white;
-      cursor: pointer;
-      backdrop-filter: blur(8px);
-      -webkit-backdrop-filter: blur(8px);
-
-      &:hover {
-        background-color: rgba(0, 0, 0, 0.8);
-        border-color: rgba(255, 255, 255, 0.5);
-      }
-
-      &:focus {
-        outline: none;
-        border-color: rgba(255, 255, 255, 0.8);
-        box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.1);
-      }
     }
 
     /* If JS is enabled, hide the submit button initially with a delay */
@@ -396,6 +488,12 @@ body.wardrobe-v2 {
     color: #448844;
     margin-top: 2rem;
   }
+
+  .back-button {
+    padding: 0.5rem 1rem;
+    border-radius: 6px;
+    font-weight: 500;
+  }
 }
 
 .current-selection {
@@ -485,110 +583,27 @@ body.wardrobe-v2 {
     flex-wrap: wrap;
   }
 
-  .item-remove-button {
-    position: absolute;
-    top: 0.5rem;
-    right: 0.5rem;
-    padding: 0;
-    margin: 0;
-    border: none;
-    background: rgba(255, 255, 255, 0.9);
-    border-radius: 4px;
-    cursor: pointer;
-    font-size: 1rem;
-    line-height: 1;
-    width: 1.75rem;
-    height: 1.75rem;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    opacity: 0;
-    transition: opacity 0.2s, background 0.2s, transform 0.1s;
-    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
-
-    &:hover {
-      background: rgba(255, 255, 255, 1);
-      transform: scale(1.1);
-    }
-
-    &:active {
-      transform: scale(0.95);
-    }
-
-    &:focus {
-      opacity: 1;
-      outline: 2px solid #448844;
-      outline-offset: 2px;
-    }
-  }
+  /* .item-remove-button styles are defined in button system above */
 }
 
 .item-search-form {
   margin-bottom: 1.5rem;
   display: flex;
   gap: 0.5rem;
+  align-items: stretch;
 
-  input[type="text"] {
-    flex: 1;
-    padding: 0.75rem;
-    font-size: 1rem;
-    border: 1px solid #ddd;
-    border-radius: 6px;
-    background: white;
-
-    &:focus {
-      outline: none;
-      border-color: #448844;
-      box-shadow: 0 0 0 3px rgba(68, 136, 68, 0.1);
-    }
+  > form {
+    display: contents;
   }
 
-  input[type="submit"] {
-    padding: 0.75rem 1.5rem;
-    font-size: 1rem;
-    font-weight: 500;
-    border: none;
-    border-radius: 6px;
-    background: #448844;
-    color: white;
-    cursor: pointer;
-    transition: background 0.2s;
-
-    &:hover {
-      background: #357535;
-    }
-
-    &:active {
-      transform: scale(0.98);
-    }
-
-    &:focus {
-      outline: none;
-      box-shadow: 0 0 0 3px rgba(68, 136, 68, 0.3);
-    }
-  }
-}
-
-.search-results {
-  .search-results-header {
-    margin-bottom: 1.5rem;
-
-    .back-button {
-      padding: 0.5rem 1rem;
-      margin: 0 0 1rem 0;
-      border: 1px solid #ddd;
+  .search-form {
+    input[type="text"] {
+      flex: 1;
+      padding: 0.75rem;
+      font-size: 1rem;
       border-radius: 6px;
+      border: 1px solid #ddd;
       background: white;
-      color: #448844;
-      cursor: pointer;
-      font-size: 0.95rem;
-      font-weight: 500;
-      transition: background 0.2s, border-color 0.2s;
-
-      &:hover {
-        background: #f9f9f9;
-        border-color: #448844;
-      }
 
       &:focus {
         outline: none;
@@ -596,8 +611,12 @@ body.wardrobe-v2 {
         box-shadow: 0 0 0 3px rgba(68, 136, 68, 0.1);
       }
     }
-  }
 
+    /* input[type="submit"] styles are defined in button system above */
+  }
+}
+
+.search-results {
   .search-results-list {
     list-style: none;
     padding: 0;
@@ -664,42 +683,7 @@ body.wardrobe-v2 {
       flex-wrap: wrap;
     }
 
-    .item-add-button {
-      position: absolute;
-      top: 0.5rem;
-      right: 0.5rem;
-      padding: 0;
-      margin: 0;
-      border: none;
-      background: rgba(68, 136, 68, 0.9);
-      border-radius: 4px;
-      cursor: pointer;
-      font-size: 1rem;
-      line-height: 1;
-      width: 1.75rem;
-      height: 1.75rem;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      opacity: 0;
-      transition: opacity 0.2s, background 0.2s, transform 0.1s;
-      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
-
-      &:hover {
-        background: rgba(68, 136, 68, 1);
-        transform: scale(1.1);
-      }
-
-      &:active {
-        transform: scale(0.95);
-      }
-
-      &:focus {
-        opacity: 1;
-        outline: 2px solid #448844;
-        outline-offset: 2px;
-      }
-    }
+    /* .item-add-button styles are defined in button system above */
   }
 
   .empty-state {
@@ -713,42 +697,8 @@ body.wardrobe-v2 {
     display: flex;
     justify-content: center;
     gap: 0.5rem;
-    font-size: 0.9rem;
 
-    a,
-    span,
-    em {
-      padding: 0.5rem 0.75rem;
-      border: 1px solid #ddd;
-      border-radius: 4px;
-      text-decoration: none;
-      color: #448844;
-      background: white;
-
-      &:hover {
-        background: #f9f9f9;
-        border-color: #448844;
-      }
-    }
-
-    .current,
-    em {
-      background: #448844;
-      color: white;
-      border-color: #448844;
-      font-style: normal;
-    }
-
-    .disabled {
-      color: #ccc;
-      cursor: not-allowed;
-      border-color: #eee;
-
-      &:hover {
-        background: white;
-        border-color: #eee;
-      }
-    }
+    /* Pagination link styles are defined in button system above */
   }
 }
 
diff --git a/app/views/wardrobe/_search_results.html.haml b/app/views/wardrobe/_search_results.html.haml
index 3f3866ab..67731c89 100644
--- a/app/views/wardrobe/_search_results.html.haml
+++ b/app/views/wardrobe/_search_results.html.haml
@@ -1,9 +1,4 @@
 .search-results
-  .search-results-header
-    = button_to wardrobe_v2_path, method: :get, class: "back-button" do
-      ← Back to outfit
-      = outfit_state_params except: [:q]
-
   - if @search_results.any?
     = will_paginate @search_results, page_links: false, param_name: "q[page]", params: { q: params[:q], species: @outfit.species_id, color: @outfit.color_id, objects: params[:objects] }
 
diff --git a/app/views/wardrobe/show.html.haml b/app/views/wardrobe/show.html.haml
index c7b77cf9..22ed0c02 100644
--- a/app/views/wardrobe/show.html.haml
+++ b/app/views/wardrobe/show.html.haml
@@ -85,10 +85,15 @@
                 = submit_tag "Change pose", name: nil, class: "pose-submit-button"
 
       .outfit-controls-section
-        = form_with url: wardrobe_v2_path, method: :get, class: "item-search-form" do |f|
-          = outfit_state_params
-          = f.text_field "q[name]", placeholder: "Search for items...", value: params.dig(:q, :name), "aria-label": "Search for items"
-          = f.submit "Search"
+        .item-search-form
+          - if @search_mode
+            = button_to wardrobe_v2_path, method: :get, class: "back-button" do
+              ←
+              = outfit_state_params except: [:q]
+          = form_with url: wardrobe_v2_path, method: :get, class: "search-form" do |f|
+            = outfit_state_params
+            = f.text_field "q[name]", placeholder: "Search for items...", value: params.dig(:q, :name), "aria-label": "Search for items"
+            = f.submit "Search"
 
         - if @search_mode
           = render "search_results"