nalalangan/costco-grocery-list
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

css refactor

Browse Source
This commit is contained in:
Nico 2026-01-24 21:10:57 -08:00
parent fa41f12e3d
commit 889914a57f
2 changed files with 31 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
frontend/src/components/modals/SimilarItemModal.jsx
View File

@ -5,22 +5,19 @@ export default function SimilarItemModal({ originalName, suggestedName, onCancel
<div className="modal-overlay" onClick={onCancel}> <div className="modal-overlay" onClick={onCancel}>
<div className="modal" onClick={(e) => e.stopPropagation()}> <div className="modal" onClick={(e) => e.stopPropagation()}>
<h2 className="modal-title">Similar Item Found</h2> <h2 className="modal-title">Similar Item Found</h2>
<p className="text-center text-lg mb-2"> <p className="text-center text-lg mb-4">
Do you mean <strong className="text-primary">"{suggestedName}"</strong>? Instead of <strong className="similar-item-original">"{originalName.toLowerCase()}"</strong>, use <strong className="similar-item-suggested">"{suggestedName}"</strong>?
</p>
<p className="text-center text-sm mb-4" style={{ color: 'var(--color-text-secondary)', fontStyle: 'italic' }}>
You entered: "{originalName}"
</p> </p>
<div className="modal-actions"> <div className="similar-modal-actions">
<button onClick={onCancel} className="btn btn-outline flex-1"> <button onClick={onYes} className="btn btn-success">
Cancel Yes, Use Suggestion
</button> </button>
<button onClick={onNo} className="btn btn-secondary flex-1"> <button onClick={onNo} className="btn btn-primary">
No, Create New No, Create New
</button> </button>
<button onClick={onYes} className="btn btn-success flex-1"> <button onClick={onCancel} className="btn btn-danger">
Yes, Use Suggestion Cancel
</button> </button>
</div> </div>
</div> </div>

25
frontend/src/styles/SimilarItemModal.css
View File

@ -1,3 +1,24 @@
/* SimilarItemModal - uses utility classes from utilities.css */ /* SimilarItemModal - custom styles */
/* No custom styles needed - all handled by utilities */
.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%;
}