From 889914a57f90706d6bcbf58b80adfc0f932a5583 Mon Sep 17 00:00:00 2001
From: Nico <Nico>
Date: Sat, 24 Jan 2026 21:10:57 -0800
Subject: [PATCH] css refactor

---
 .../components/modals/SimilarItemModal.jsx    | 19 ++++++--------
 frontend/src/styles/SimilarItemModal.css      | 25 +++++++++++++++++--
 2 files changed, 31 insertions(+), 13 deletions(-)

diff --git a/frontend/src/components/modals/SimilarItemModal.jsx b/frontend/src/components/modals/SimilarItemModal.jsx
index a1f3f1f..fff7bcb 100644
--- a/frontend/src/components/modals/SimilarItemModal.jsx
+++ b/frontend/src/components/modals/SimilarItemModal.jsx
@@ -5,22 +5,19 @@ export default function SimilarItemModal({ originalName, suggestedName, onCancel
     <div className="modal-overlay" onClick={onCancel}>
       <div className="modal" onClick={(e) => e.stopPropagation()}>
         <h2 className="modal-title">Similar Item Found</h2>
-        <p className="text-center text-lg mb-2">
-          Do you mean <strong className="text-primary">"{suggestedName}"</strong>?
-        </p>
-        <p className="text-center text-sm mb-4" style={{ color: 'var(--color-text-secondary)', fontStyle: 'italic' }}>
-          You entered: "{originalName}"
+        <p className="text-center text-lg mb-4">
+          Instead of <strong className="similar-item-original">"{originalName.toLowerCase()}"</strong>, use <strong className="similar-item-suggested">"{suggestedName}"</strong>?
         </p>
 
-        <div className="modal-actions">
-          <button onClick={onCancel} className="btn btn-outline flex-1">
-            Cancel
+        <div className="similar-modal-actions">
+          <button onClick={onYes} className="btn btn-success">
+            Yes, Use Suggestion
           </button>
-          <button onClick={onNo} className="btn btn-secondary flex-1">
+          <button onClick={onNo} className="btn btn-primary">
             No, Create New
           </button>
-          <button onClick={onYes} className="btn btn-success flex-1">
-            Yes, Use Suggestion
+          <button onClick={onCancel} className="btn btn-danger">
+            Cancel
           </button>
         </div>
       </div>
diff --git a/frontend/src/styles/SimilarItemModal.css b/frontend/src/styles/SimilarItemModal.css
index ff34cb2..32e8279 100644
--- a/frontend/src/styles/SimilarItemModal.css
+++ b/frontend/src/styles/SimilarItemModal.css
@@ -1,3 +1,24 @@
-/* SimilarItemModal - uses utility classes from utilities.css */
-/* No custom styles needed - all handled by utilities */
+/* SimilarItemModal - custom styles */
+
+.similar-item-suggested {
+  color: var(--color-success);
+  font-weight: 600;
+  font-size: 1.1em;
+}
+
+.similar-item-original {
+  color: var(--color-primary);
+  font-weight: 600;
+  font-size: 1.1em;
+}
+
+.similar-modal-actions {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-sm);
+}
+
+.similar-modal-actions .btn {
+  width: 100%;
+}