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 { .confirm-buy-cancel {
background: var(--color-gray-200); background: var(--button-secondary-bg);
color: var(--color-text-primary); color: var(--button-secondary-text);
border: 1px solid var(--button-secondary-border);
} }
.confirm-buy-cancel:hover { .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 { .confirm-buy-confirm {

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

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

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

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

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

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

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

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

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

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

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

@ -69,11 +69,11 @@
.tbg-button.is-inactive:hover:not(:disabled) { .tbg-button.is-inactive:hover:not(:disabled) {
color: var(--text-primary); 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) { [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 { .tbg-button:focus-visible {

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

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

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

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

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

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

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

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

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

@ -14,8 +14,8 @@
} }
.login-password-toggle { .login-password-toggle {
background: #f0f0f0; background: var(--button-ghost-bg);
border: 1px solid #ccc; border: 1px solid var(--button-ghost-border);
border-radius: 4px; border-radius: 4px;
cursor: pointer; cursor: pointer;
font-size: 1.2em; font-size: 1.2em;
@ -31,6 +31,6 @@
.login-password-toggle:hover { .login-password-toggle:hover {
opacity: 1; 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 { .manage-tab:hover {
color: var(--text-primary); color: var(--text-primary);
background: var(--card-hover); background: var(--button-secondary-bg);
} }
.manage-tab.active { .manage-tab.active {

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

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

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

@ -182,6 +182,18 @@
--card-border-radius: var(--border-radius-lg); --card-border-radius: var(--border-radius-lg);
--card-shadow: var(--shadow-card); --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-backdrop-bg: rgba(15, 23, 42, 0.48);
--modal-bg: var(--color-bg-elevated); --modal-bg: var(--color-bg-elevated);
--modal-border-radius: var(--border-radius-lg); --modal-border-radius: var(--border-radius-lg);
@ -272,6 +284,18 @@
--modal-bg: var(--color-bg-elevated); --modal-bg: var(--color-bg-elevated);
--input-focus-shadow: 0 0 0 4px rgba(45, 212, 191, 0.18); --input-focus-shadow: 0 0 0 4px rgba(45, 212, 191, 0.18);
--card-bg: var(--color-bg-surface); --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) { @media (prefers-color-scheme: dark) {

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

@ -108,23 +108,23 @@
.btn-primary { .btn-primary {
background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark)); background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
color: var(--color-text-inverse); 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) { .btn-primary:hover:not(:disabled) {
transform: translateY(-2px); 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 { .btn-secondary {
background: rgba(255, 255, 255, 0.72); background: var(--button-secondary-bg);
color: var(--color-text-primary); color: var(--button-secondary-text);
border-color: var(--color-border-light); border-color: var(--button-secondary-border);
} }
.btn-secondary:hover:not(:disabled) { .btn-secondary:hover:not(:disabled) {
background: var(--color-bg-hover); background: var(--button-secondary-hover-bg);
border-color: var(--color-border-medium); border-color: var(--button-secondary-border-hover);
transform: translateY(-1px); transform: translateY(-1px);
} }
@ -149,25 +149,25 @@
} }
.btn-outline { .btn-outline {
background: rgba(255, 255, 255, 0.28); background: var(--button-ghost-bg);
color: var(--color-primary); color: var(--button-ghost-text);
border: var(--border-width-thin) solid var(--color-primary); border: var(--border-width-thin) solid var(--color-primary);
} }
.btn-outline:hover:not(:disabled) { .btn-outline:hover:not(:disabled) {
background: var(--color-primary-light); background: var(--button-ghost-hover-bg);
transform: translateY(-1px); transform: translateY(-1px);
} }
.btn-ghost { .btn-ghost {
background: rgba(255, 255, 255, 0.62); background: var(--button-ghost-bg);
color: var(--color-text-primary); color: var(--button-ghost-text);
border: var(--border-width-thin) solid var(--color-border-medium); border: var(--border-width-thin) solid var(--button-ghost-border);
} }
.btn-ghost:hover:not(:disabled) { .btn-ghost:hover:not(:disabled) {
background: var(--color-bg-hover); background: var(--button-ghost-hover-bg);
border-color: var(--color-border-dark); border-color: var(--button-ghost-border-hover);
} }
.btn-sm { .btn-sm {