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

style: remove gray from secondary action buttons

Browse Source
This commit is contained in:
Nico 2026-03-31 00:07:18 -07:00
parent 93e3d42edc
commit 4aff7e78f2
16 changed files with 91 additions and 58 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
frontend/src/styles/ConfirmBuyModal.css
View File

@ -181,12 +181,14 @@
}
.confirm-buy-cancel {
background: var(--color-gray-200);
color: var(--color-text-primary);
background: var(--button-secondary-bg);
color: var(--button-secondary-text);
border: 1px solid var(--button-secondary-border);
}
.confirm-buy-cancel:hover {
background: var(--color-gray-300);
background: var(--button-secondary-hover-bg);
border-color: var(--button-secondary-border-hover);
}
.confirm-buy-confirm {

15
frontend/src/styles/ImageUploadModal.css
View File

@ -52,9 +52,9 @@
.image-upload-option-btn {
padding: 1.2em;
border: 2px solid #ddd;
border: 2px solid var(--button-secondary-border);
border-radius: 8px;
background: white;
background: var(--button-ghost-bg);
font-size: 1.1em;
cursor: pointer;
transition: all 0.2s;
@ -65,8 +65,8 @@
}
.image-upload-option-btn:hover {
border-color: #007bff;
background: #f8f9fa;
border-color: var(--button-secondary-border-hover);
background: var(--button-secondary-hover-bg);
transform: translateY(-2px);
box-shadow: 0 2px 8px rgba(0, 123, 255, 0.2);
}
@ -160,12 +160,13 @@
}
.image-upload-skip {
background: #f0f0f0;
color: #333;
background: var(--button-secondary-bg);
color: var(--button-secondary-text);
border: 1px solid var(--button-secondary-border);
}
.image-upload-skip:hover {
background: #e0e0e0;
background: var(--button-secondary-hover-bg);
}
.image-upload-confirm {

8
frontend/src/styles/ItemClassificationModal.css
View File

@ -84,12 +84,14 @@
}
.classification-modal-btn-skip {
background: #6c757d;
color: white;
background: var(--button-secondary-bg);
color: var(--button-secondary-text);
border: 1px solid var(--button-secondary-border);
}
.classification-modal-btn-skip:hover {
background: #5a6268;
background: var(--button-secondary-hover-bg);
border-color: var(--button-secondary-border-hover);
}
.classification-modal-btn-confirm {

8
frontend/src/styles/components/HouseholdSwitcher.css
View File

@ -11,7 +11,7 @@
gap: 0.5rem;
width: 100%;
padding: 0.5rem 1rem;
background: var(--card-bg);
background: var(--button-ghost-bg);
border: 1px solid var(--border);
border-radius: 6px;
color: var(--text-primary);
@ -21,8 +21,8 @@
}
.household-switcher-toggle:hover {
background: var(--card-hover);
border-color: var(--primary);
background: var(--button-ghost-hover-bg);
border-color: var(--button-ghost-border-hover);
}
.household-switcher-toggle:disabled {
@ -101,7 +101,7 @@
}
.household-option:hover {
background: var(--card-hover);
background: var(--button-secondary-bg);
border-color: var(--primary);
}

8
frontend/src/styles/components/ImageUploadSection.css
View File

@ -54,12 +54,14 @@
}
.image-upload-btn.gallery {
background: #6c757d;
color: white;
background: var(--button-secondary-bg);
color: var(--button-secondary-text);
border: 1px solid var(--button-secondary-border);
}
.image-upload-btn.gallery:hover {
background: #545b62;
background: var(--button-secondary-hover-bg);
border-color: var(--button-secondary-border-hover);
}
.image-upload-preview {

12
frontend/src/styles/components/Navbar.css
View File

@ -66,8 +66,8 @@
justify-content: center;
text-decoration: none;
color: #ffffff;
background: #495057;
border: 1px solid #5a6268;
background: rgba(30, 144, 255, 0.18);
border: 1px solid rgba(95, 178, 255, 0.32);
border-radius: 0;
font-size: 1.2rem;
line-height: 1;
@ -75,7 +75,7 @@
}
.navbar-icon-link:hover {
background: #5a6268;
background: rgba(30, 144, 255, 0.3);
}
.navbar-icon-link:focus-visible {
@ -103,9 +103,9 @@
/* User Button */
.navbar-user-btn {
background: #495057;
background: rgba(30, 144, 255, 0.18);
color: white;
border: none;
border: 1px solid rgba(95, 178, 255, 0.32);
padding: 0.5rem 1rem;
border-radius: 4px;
cursor: pointer;
@ -119,7 +119,7 @@
}
.navbar-user-btn:hover {
background: #5a6268;
background: rgba(30, 144, 255, 0.3);
}
.navbar-user-icon {

4
frontend/src/styles/components/ToggleButtonGroup.css
View File

@ -69,11 +69,11 @@
.tbg-button.is-inactive:hover:not(:disabled) {
color: var(--text-primary);
background: rgba(0, 0, 0, 0.04);
background: var(--button-secondary-bg);
}
[data-theme="dark"] .tbg-button.is-inactive:hover:not(:disabled) {
background: rgba(255, 255, 255, 0.08);
background: var(--button-secondary-bg);
}
.tbg-button:focus-visible {

11
frontend/src/styles/components/UploadToaster.css
View File

@ -55,9 +55,9 @@
}
.upload-toast-actions button {
border: 1px solid var(--color-border-light);
background: var(--color-bg-surface);
color: var(--color-text-primary);
border: 1px solid var(--button-secondary-border);
background: var(--button-secondary-bg);
color: var(--button-secondary-text);
border-radius: 6px;
padding: 0.3rem 0.55rem;
font-size: 0.8rem;
@ -65,8 +65,9 @@
}
.upload-toast-actions button:hover {
border-color: var(--color-primary);
color: var(--color-primary);
background: var(--button-secondary-hover-bg);
border-color: var(--button-secondary-border-hover);
color: var(--button-secondary-text);
}
.upload-toast-success .upload-toast-progress-fill {

4
frontend/src/styles/components/manage/CreateJoinHousehold.css
View File

@ -55,7 +55,7 @@
}
.close-btn:hover {
background: var(--card-hover);
background: var(--button-ghost-bg);
color: var(--text-primary);
}
@ -80,7 +80,7 @@
.mode-tab:hover {
color: var(--text-primary);
background: var(--card-hover);
background: var(--button-secondary-bg);
}
.mode-tab.active {

2
frontend/src/styles/pages/AdminPanel.css
View File

@ -44,7 +44,7 @@
.admin-tab:hover {
color: var(--text-primary);
background: var(--card-hover);
background: var(--button-secondary-bg);
}
.admin-tab.active {

5
frontend/src/styles/pages/InviteLink.css
View File

@ -61,8 +61,9 @@
}
.invite-btn-secondary {
background: var(--card-hover);
color: var(--text-primary);
background: var(--button-secondary-bg);
color: var(--button-secondary-text);
border: 1px solid var(--button-secondary-border);
}
@media (max-width: 640px) {

6
frontend/src/styles/pages/Login.css
View File

@ -14,8 +14,8 @@
}
.login-password-toggle {
background: #f0f0f0;
border: 1px solid #ccc;
background: var(--button-ghost-bg);
border: 1px solid var(--button-ghost-border);
border-radius: 4px;
cursor: pointer;
font-size: 1.2em;
@ -31,6 +31,6 @@
.login-password-toggle:hover {
opacity: 1;
background: #e8e8e8;
background: var(--button-ghost-hover-bg);
}

2
frontend/src/styles/pages/Manage.css
View File

@ -44,7 +44,7 @@
.manage-tab:hover {
color: var(--text-primary);
background: var(--card-hover);
background: var(--button-secondary-bg);
}
.manage-tab.active {

2
frontend/src/styles/pages/Settings.css
View File

@ -83,7 +83,7 @@
.settings-tab:hover {
color: var(--color-primary);
background: var(--color-bg-hover);
background: var(--button-secondary-bg);
}
.settings-tab.active {

24
frontend/src/styles/theme.css
View File

@ -182,6 +182,18 @@
--card-border-radius: var(--border-radius-lg);
--card-shadow: var(--shadow-card);
--button-secondary-bg: rgba(30, 144, 255, 0.12);
--button-secondary-hover-bg: rgba(30, 144, 255, 0.2);
--button-secondary-border: rgba(30, 144, 255, 0.26);
--button-secondary-border-hover: rgba(30, 144, 255, 0.42);
--button-secondary-text: var(--color-primary-dark);
--button-ghost-bg: rgba(30, 144, 255, 0.08);
--button-ghost-hover-bg: rgba(30, 144, 255, 0.16);
--button-ghost-border: rgba(30, 144, 255, 0.22);
--button-ghost-border-hover: rgba(30, 144, 255, 0.38);
--button-ghost-text: var(--color-primary-dark);
--modal-backdrop-bg: rgba(15, 23, 42, 0.48);
--modal-bg: var(--color-bg-elevated);
--modal-border-radius: var(--border-radius-lg);
@ -272,6 +284,18 @@
--modal-bg: var(--color-bg-elevated);
--input-focus-shadow: 0 0 0 4px rgba(45, 212, 191, 0.18);
--card-bg: var(--color-bg-surface);
--button-secondary-bg: rgba(95, 178, 255, 0.18);
--button-secondary-hover-bg: rgba(95, 178, 255, 0.28);
--button-secondary-border: rgba(95, 178, 255, 0.3);
--button-secondary-border-hover: rgba(131, 196, 255, 0.5);
--button-secondary-text: #d8ecff;
--button-ghost-bg: rgba(95, 178, 255, 0.12);
--button-ghost-hover-bg: rgba(95, 178, 255, 0.22);
--button-ghost-border: rgba(95, 178, 255, 0.24);
--button-ghost-border-hover: rgba(131, 196, 255, 0.4);
--button-ghost-text: #d8ecff;
}
@media (prefers-color-scheme: dark) {

30
frontend/src/styles/utilities.css
View File

@ -108,23 +108,23 @@
.btn-primary {
background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
color: var(--color-text-inverse);
box-shadow: 0 14px 30px rgba(15, 118, 110, 0.18);
box-shadow: 0 14px 30px rgba(30, 144, 255, 0.22);
}
.btn-primary:hover:not(:disabled) {
transform: translateY(-2px);
box-shadow: 0 18px 34px rgba(15, 118, 110, 0.24);
box-shadow: 0 18px 34px rgba(30, 144, 255, 0.28);
}
.btn-secondary {
background: rgba(255, 255, 255, 0.72);
color: var(--color-text-primary);
border-color: var(--color-border-light);
background: var(--button-secondary-bg);
color: var(--button-secondary-text);
border-color: var(--button-secondary-border);
}
.btn-secondary:hover:not(:disabled) {
background: var(--color-bg-hover);
border-color: var(--color-border-medium);
background: var(--button-secondary-hover-bg);
border-color: var(--button-secondary-border-hover);
transform: translateY(-1px);
}
@ -149,25 +149,25 @@
}
.btn-outline {
background: rgba(255, 255, 255, 0.28);
color: var(--color-primary);
background: var(--button-ghost-bg);
color: var(--button-ghost-text);
border: var(--border-width-thin) solid var(--color-primary);
}
.btn-outline:hover:not(:disabled) {
background: var(--color-primary-light);
background: var(--button-ghost-hover-bg);
transform: translateY(-1px);
}
.btn-ghost {
background: rgba(255, 255, 255, 0.62);
color: var(--color-text-primary);
border: var(--border-width-thin) solid var(--color-border-medium);
background: var(--button-ghost-bg);
color: var(--button-ghost-text);
border: var(--border-width-thin) solid var(--button-ghost-border);
}
.btn-ghost:hover:not(:disabled) {
background: var(--color-bg-hover);
border-color: var(--color-border-dark);
background: var(--button-ghost-hover-bg);
border-color: var(--button-ghost-border-hover);
}
.btn-sm {