jeet/grateful-journal
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

updated colors

Browse Source
This commit is contained in:
Jeet Debnath
2026-04-21 11:09:03 +05:30
parent 9f944e531a
commit 8f6c705677
2 changed files with 67 additions and 67 deletions
Download Patch File Download Diff File Expand all files Collapse all files

130
src/App.css
View File

@@ -137,7 +137,7 @@
.lp__tagline { .lp__tagline {
margin: 0; margin: 0;
color: #6b7280; color: #4b505a;
font-size: 0.9375rem; font-size: 0.9375rem;
text-align: center; text-align: center;
line-height: 1.65; line-height: 1.65;
@@ -154,7 +154,7 @@
.lp__privacy { .lp__privacy {
margin: 0; margin: 0;
font-size: 0.8rem; font-size: 0.8rem;
color: #9ca3af; color: #6d727a;
text-align: center; text-align: center;
} }
@@ -496,7 +496,7 @@
} }
.journal-title-input::placeholder { .journal-title-input::placeholder {
color: #c4bfb5; color: #8a8480;
} }
.journal-title-input:focus { .journal-title-input:focus {
border-bottom-color: #22c55e; border-bottom-color: #22c55e;
@@ -519,7 +519,7 @@
} }
.journal-entry-textarea::placeholder { .journal-entry-textarea::placeholder {
color: #c4bfb5; color: #8a8480;
font-style: italic; font-style: italic;
} }
@@ -672,12 +672,12 @@
border: none; border: none;
border-radius: 12px; border-radius: 12px;
cursor: pointer; cursor: pointer;
color: #9ca3af; color: #6d727a;
transition: all 0.2s ease; transition: all 0.2s ease;
-webkit-tap-highlight-color: transparent; -webkit-tap-highlight-color: transparent;
} }
.journal-icon-btn:hover { .journal-icon-btn:hover {
color: #6b7280; color: #4b505a;
background: rgba(0, 0, 0, 0.05); background: rgba(0, 0, 0, 0.05);
} }
@@ -860,7 +860,7 @@
border: none; border: none;
border-radius: 100px; border-radius: 100px;
cursor: pointer; cursor: pointer;
color: #9ca3af; color: #6d727a;
transition: all 0.18s ease; transition: all 0.18s ease;
min-height: 44px; min-height: 44px;
font-family: "Sniglet", system-ui; font-family: "Sniglet", system-ui;
@@ -905,7 +905,7 @@
} }
.bottom-nav-btn:hover { .bottom-nav-btn:hover {
color: #6b7280; color: #4b505a;
} }
.bottom-nav-btn-active { .bottom-nav-btn-active {
@@ -952,7 +952,7 @@
.history-subtitle { .history-subtitle {
margin: 0; margin: 0;
font-size: 0.875rem; font-size: 0.875rem;
color: #6b7280; color: #4b505a;
font-family: "Sniglet", system-ui; font-family: "Sniglet", system-ui;
} }
@@ -967,7 +967,7 @@
border: 1px solid #e5e7eb; border: 1px solid #e5e7eb;
border-radius: 50%; border-radius: 50%;
cursor: pointer; cursor: pointer;
color: #6b7280; color: #4b505a;
transition: all 0.2s ease; transition: all 0.2s ease;
} }
.history-search-btn:hover { .history-search-btn:hover {
@@ -1027,7 +1027,7 @@
border: none; border: none;
border-radius: 8px; border-radius: 8px;
cursor: pointer; cursor: pointer;
color: #9ca3af; color: #6d727a;
transition: all 0.15s ease; transition: all 0.15s ease;
} }
.calendar-nav-btn:hover { .calendar-nav-btn:hover {
@@ -1044,7 +1044,7 @@
.calendar-weekday { .calendar-weekday {
font-size: 0.6875rem; font-size: 0.6875rem;
font-weight: 500; font-weight: 500;
color: #9ca3af; color: #6d727a;
text-align: center; text-align: center;
padding: 4px 0; padding: 4px 0;
font-family: "Sniglet", system-ui; font-family: "Sniglet", system-ui;
@@ -1110,7 +1110,7 @@
font-size: 0.625rem; font-size: 0.625rem;
font-weight: 700; font-weight: 700;
letter-spacing: 0.12em; letter-spacing: 0.12em;
color: #9ca3af; color: #6d727a;
text-transform: uppercase; text-transform: uppercase;
font-family: "Sniglet", system-ui; font-family: "Sniglet", system-ui;
} }
@@ -1195,14 +1195,14 @@
font-size: 0.625rem; font-size: 0.625rem;
font-weight: 600; font-weight: 600;
letter-spacing: 0.08em; letter-spacing: 0.08em;
color: #6b7280; color: #4b505a;
text-transform: uppercase; text-transform: uppercase;
font-family: "Sniglet", system-ui; font-family: "Sniglet", system-ui;
} }
.entry-time { .entry-time {
font-size: 0.6875rem; font-size: 0.6875rem;
color: #9ca3af; color: #6d727a;
font-family: "Sniglet", system-ui; font-family: "Sniglet", system-ui;
} }
@@ -1219,7 +1219,7 @@
margin: 0; margin: 0;
font-size: 0.8125rem; font-size: 0.8125rem;
line-height: 1.5; line-height: 1.5;
color: #6b7280; color: #4b505a;
font-family: "Sniglet", system-ui; font-family: "Sniglet", system-ui;
display: -webkit-box; display: -webkit-box;
-webkit-line-clamp: 2; -webkit-line-clamp: 2;
@@ -1247,7 +1247,7 @@
.settings-subtitle { .settings-subtitle {
margin: 0; margin: 0;
font-size: 0.875rem; font-size: 0.875rem;
color: #6b7280; color: #4b505a;
font-family: "Sniglet", system-ui; font-family: "Sniglet", system-ui;
} }
@@ -1445,7 +1445,7 @@
font-size: 0.625rem; font-size: 0.625rem;
font-weight: 700; font-weight: 700;
letter-spacing: 0.12em; letter-spacing: 0.12em;
color: #9ca3af; color: #6d727a;
text-transform: uppercase; text-transform: uppercase;
font-family: "Sniglet", system-ui; font-family: "Sniglet", system-ui;
} }
@@ -1492,7 +1492,7 @@
} }
.settings-item-icon-gray { .settings-item-icon-gray {
background: rgba(107, 114, 128, 0.1); background: rgba(107, 114, 128, 0.1);
color: #6b7280; color: #4b505a;
} }
.settings-item-icon-orange { .settings-item-icon-orange {
background: rgba(251, 146, 60, 0.12); background: rgba(251, 146, 60, 0.12);
@@ -1523,7 +1523,7 @@
.settings-item-subtitle { .settings-item-subtitle {
margin: 0; margin: 0;
font-size: 0.75rem; font-size: 0.75rem;
color: #9ca3af; color: #6d727a;
font-family: "Sniglet", system-ui; font-family: "Sniglet", system-ui;
} }
@@ -1678,7 +1678,7 @@
margin-bottom: 1rem; margin-bottom: 1rem;
font-size: 0.9375rem; font-size: 0.9375rem;
font-weight: 600; font-weight: 600;
color: #6b7280; color: #4b505a;
background: var(--color-surface); background: var(--color-surface);
border: none; border: none;
border-radius: 14px; border-radius: 14px;
@@ -1777,14 +1777,14 @@
font-size: 0.625rem; font-size: 0.625rem;
font-weight: 700; font-weight: 700;
letter-spacing: 0.1em; letter-spacing: 0.1em;
color: #6b7280; color: #4b505a;
text-transform: uppercase; text-transform: uppercase;
font-family: "Sniglet", system-ui; font-family: "Sniglet", system-ui;
} }
.entry-modal-time { .entry-modal-time {
font-size: 0.6875rem; font-size: 0.6875rem;
color: #9ca3af; color: #6d727a;
font-family: "Sniglet", system-ui; font-family: "Sniglet", system-ui;
} }
@@ -1798,7 +1798,7 @@
border: none; border: none;
border-radius: 50%; border-radius: 50%;
background: #f3f4f6; background: #f3f4f6;
color: #6b7280; color: #4b505a;
cursor: pointer; cursor: pointer;
transition: transition:
background 0.2s, background 0.2s,
@@ -1837,7 +1837,7 @@
} }
.entry-modal-empty { .entry-modal-empty {
color: #9ca3af; color: #6d727a;
font-style: italic; font-style: italic;
} }
@@ -1896,7 +1896,7 @@
} }
.delete-confirm-body { .delete-confirm-body {
color: #6b7280; color: #4b505a;
font-size: 0.9rem; font-size: 0.9rem;
font-family: "Sniglet", system-ui; font-family: "Sniglet", system-ui;
margin: 0 0 1.5rem; margin: 0 0 1.5rem;
@@ -2136,7 +2136,7 @@
.confirm-modal-desc { .confirm-modal-desc {
font-size: 0.85rem; font-size: 0.85rem;
color: #6b7280; color: #4b505a;
margin: 0 0 1rem; margin: 0 0 1rem;
line-height: 1.5; line-height: 1.5;
} }
@@ -2231,7 +2231,7 @@
.ios-install-subtitle { .ios-install-subtitle {
font-size: 0.85rem; font-size: 0.85rem;
color: #6b7280; color: #4b505a;
margin: 0 0 1rem; margin: 0 0 1rem;
text-align: center; text-align: center;
} }
@@ -2492,7 +2492,7 @@
/* -- Placeholder text -- */ /* -- Placeholder text -- */
[data-theme="dark"] .journal-title-input::placeholder, [data-theme="dark"] .journal-title-input::placeholder,
[data-theme="dark"] .journal-entry-textarea::placeholder { [data-theme="dark"] .journal-entry-textarea::placeholder {
color: #4a5a4a; color: #8a9e8a;
} }
/* -- Muted text -- */ /* -- Muted text -- */
@@ -2506,7 +2506,7 @@
[data-theme="dark"] .settings-section-title, [data-theme="dark"] .settings-section-title,
[data-theme="dark"] .recent-entries-title, [data-theme="dark"] .recent-entries-title,
[data-theme="dark"] .calendar-weekday { [data-theme="dark"] .calendar-weekday {
color: #7a8a7a; color: #a2ada2;
} }
/* -- Green accent text brighter in dark -- */ /* -- Green accent text brighter in dark -- */
@@ -2518,7 +2518,7 @@
/* -- Calendar -- */ /* -- Calendar -- */
[data-theme="dark"] .calendar-day { [data-theme="dark"] .calendar-day {
color: #b0b8b0; color: #c8cdc8;
} }
[data-theme="dark"] .calendar-day:not(.calendar-day-empty):hover { [data-theme="dark"] .calendar-day:not(.calendar-day-empty):hover {
@@ -2638,7 +2638,7 @@
[data-theme="dark"] .settings-item-icon-gray { [data-theme="dark"] .settings-item-icon-gray {
background: rgba(156, 163, 175, 0.1); background: rgba(156, 163, 175, 0.1);
color: #9ca3af; color: #babfc7;
} }
[data-theme="dark"] .settings-item-icon-orange { [data-theme="dark"] .settings-item-icon-orange {
@@ -2691,7 +2691,7 @@
[data-theme="dark"] .settings-signout-btn { [data-theme="dark"] .settings-signout-btn {
background: var(--color-surface); background: var(--color-surface);
color: #9ca3af; color: #babfc7;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
} }
@@ -2757,7 +2757,7 @@
[data-theme="dark"] .history-search-btn { [data-theme="dark"] .history-search-btn {
background: var(--color-surface); background: var(--color-surface);
border-color: #2a2a2a; border-color: #2a2a2a;
color: #7a8a7a; color: #a2ada2;
} }
[data-theme="dark"] .history-search-btn:hover { [data-theme="dark"] .history-search-btn:hover {
@@ -2798,11 +2798,11 @@
} }
[data-theme="dark"] .entry-modal-content { [data-theme="dark"] .entry-modal-content {
color: #b0b8b0; color: #c8cdc8;
} }
[data-theme="dark"] .entry-modal-date { [data-theme="dark"] .entry-modal-date {
color: #7a8a7a; color: #a2ada2;
} }
[data-theme="dark"] .entry-modal-time { [data-theme="dark"] .entry-modal-time {
@@ -2811,7 +2811,7 @@
[data-theme="dark"] .entry-modal-close { [data-theme="dark"] .entry-modal-close {
background: #252525; background: #252525;
color: #7a8a7a; color: #a2ada2;
} }
[data-theme="dark"] .entry-modal-close:hover { [data-theme="dark"] .entry-modal-close:hover {
@@ -2877,11 +2877,11 @@
color: #e8f5e8; color: #e8f5e8;
} }
[data-theme="dark"] .delete-confirm-body { [data-theme="dark"] .delete-confirm-body {
color: #7a8a7a; color: #a2ada2;
} }
[data-theme="dark"] .delete-confirm-cancel { [data-theme="dark"] .delete-confirm-cancel {
background: #252525; background: #252525;
color: #b0b8b0; color: #c8cdc8;
} }
[data-theme="dark"] .delete-confirm-cancel:hover:not(:disabled) { [data-theme="dark"] .delete-confirm-cancel:hover:not(:disabled) {
background: #303030; background: #303030;
@@ -2906,11 +2906,11 @@
} }
[data-theme="dark"] .confirm-modal-desc { [data-theme="dark"] .confirm-modal-desc {
color: #7a8a7a; color: #a2ada2;
} }
[data-theme="dark"] .confirm-modal-label { [data-theme="dark"] .confirm-modal-label {
color: #b0b8b0; color: #c8cdc8;
} }
[data-theme="dark"] .confirm-modal-input { [data-theme="dark"] .confirm-modal-input {
@@ -2926,7 +2926,7 @@
[data-theme="dark"] .confirm-modal-cancel { [data-theme="dark"] .confirm-modal-cancel {
background: #252525; background: #252525;
color: #9ca3af; color: #babfc7;
} }
[data-theme="dark"] .confirm-modal-cancel:hover:not(:disabled) { [data-theme="dark"] .confirm-modal-cancel:hover:not(:disabled) {
@@ -3023,7 +3023,7 @@
font-size: 0.7rem; font-size: 0.7rem;
font-weight: 700; font-weight: 700;
font-family: inherit; font-family: inherit;
color: var(--color-text-muted, #6b7280); color: var(--color-text-muted, #4b505a);
padding: 0.25rem 0.5rem; padding: 0.25rem 0.5rem;
cursor: pointer; cursor: pointer;
transition: background 0.15s, color 0.15s, border-color 0.15s; transition: background 0.15s, color 0.15s, border-color 0.15s;
@@ -3081,7 +3081,7 @@
} }
.clock-picker__tick { .clock-picker__tick {
stroke: var(--color-text-muted, #9ca3af); stroke: var(--color-text-muted, #6d727a);
stroke-width: 1.5; stroke-width: 1.5;
opacity: 0.4; opacity: 0.4;
} }
@@ -3098,7 +3098,7 @@
font-size: 0.7rem; font-size: 0.7rem;
font-weight: 600; font-weight: 600;
font-family: inherit; font-family: inherit;
color: var(--color-text-muted, #6b7280); color: var(--color-text-muted, #4b505a);
padding: 0.25rem 0.75rem; padding: 0.25rem 0.75rem;
cursor: pointer; cursor: pointer;
transition: all 0.15s; transition: all 0.15s;
@@ -3127,7 +3127,7 @@
[data-theme="dark"] .clock-picker__ampm-btn { [data-theme="dark"] .clock-picker__ampm-btn {
background: #2a2a2a; background: #2a2a2a;
color: #9ca3af; color: #babfc7;
} }
[data-theme="dark"] .clock-picker__ampm-btn--active { [data-theme="dark"] .clock-picker__ampm-btn--active {
@@ -3170,7 +3170,7 @@
[data-theme="dark"] .clock-picker__mode-btn { [data-theme="dark"] .clock-picker__mode-btn {
border-color: #333; border-color: #333;
color: #9ca3af; color: #babfc7;
} }
/* ============================ /* ============================
@@ -3251,7 +3251,7 @@
[data-theme="liquid-glass"] .journal-title-input::placeholder, [data-theme="liquid-glass"] .journal-title-input::placeholder,
[data-theme="liquid-glass"] .journal-entry-textarea::placeholder { [data-theme="liquid-glass"] .journal-entry-textarea::placeholder {
color: rgba(30, 41, 59, 0.45); color: rgba(30, 41, 59, 0.65);
} }
[data-theme="liquid-glass"] .journal-title-input { [data-theme="liquid-glass"] .journal-title-input {
@@ -3339,7 +3339,7 @@
color: #334155; color: #334155;
} }
[data-theme="liquid-glass"] .settings-enc { [data-theme="liquid-glass"] .settings-enc {
color: rgba(15, 23, 42, 0.45); color: rgba(15, 23, 42, 0.65);
} }
[data-theme="liquid-glass"] .settings-edit-btn { [data-theme="liquid-glass"] .settings-edit-btn {
background: rgba(34, 197, 94, 0.2); background: rgba(34, 197, 94, 0.2);
@@ -3546,7 +3546,7 @@
font-family: "Sniglet", system-ui; font-family: "Sniglet", system-ui;
font-size: 0.9rem; font-size: 0.9rem;
line-height: 1.6; line-height: 1.6;
color: var(--color-text-muted, #6b7280); color: var(--color-text-muted, #4b505a);
margin: 0 0 1.75rem; margin: 0 0 1.75rem;
} }
@@ -3578,7 +3578,7 @@
.welcome-modal-skip { .welcome-modal-skip {
font-family: "Sniglet", system-ui; font-family: "Sniglet", system-ui;
font-size: 0.8125rem; font-size: 0.8125rem;
color: var(--color-text-muted, #6b7280); color: var(--color-text-muted, #4b505a);
background: none; background: none;
border: none; border: none;
cursor: pointer; cursor: pointer;
@@ -3611,13 +3611,13 @@
font-family: "Sniglet", system-ui !important; font-family: "Sniglet", system-ui !important;
font-size: 0.85rem !important; font-size: 0.85rem !important;
line-height: 1.55 !important; line-height: 1.55 !important;
color: var(--color-text-muted, #6b7280) !important; color: var(--color-text-muted, #4b505a) !important;
} }
.gj-tour-popover .driver-popover-progress-text { .gj-tour-popover .driver-popover-progress-text {
font-family: "Sniglet", system-ui !important; font-family: "Sniglet", system-ui !important;
font-size: 0.75rem !important; font-size: 0.75rem !important;
color: var(--color-text-muted, #6b7280) !important; color: var(--color-text-muted, #4b505a) !important;
} }
.gj-tour-popover .driver-popover-navigation-btns button { .gj-tour-popover .driver-popover-navigation-btns button {
@@ -3642,13 +3642,13 @@
} }
.gj-tour-popover .driver-popover-prev-btn { .gj-tour-popover .driver-popover-prev-btn {
color: var(--color-text-muted, #6b7280) !important; color: var(--color-text-muted, #4b505a) !important;
border: 1px solid var(--color-border, #d4e8d4) !important; border: 1px solid var(--color-border, #d4e8d4) !important;
background: transparent !important; background: transparent !important;
} }
.gj-tour-popover .driver-popover-close-btn { .gj-tour-popover .driver-popover-close-btn {
color: var(--color-text-muted, #6b7280) !important; color: var(--color-text-muted, #4b505a) !important;
outline: none !important; outline: none !important;
box-shadow: none !important; box-shadow: none !important;
border: none !important; border: none !important;
@@ -3679,16 +3679,16 @@
} }
[data-theme="dark"] .gj-tour-popover .driver-popover-description { [data-theme="dark"] .gj-tour-popover .driver-popover-description {
color: #7a8a7a !important; color: #a2ada2 !important;
} }
[data-theme="dark"] .gj-tour-popover .driver-popover-prev-btn { [data-theme="dark"] .gj-tour-popover .driver-popover-prev-btn {
border-color: rgba(74, 222, 128, 0.15) !important; border-color: rgba(74, 222, 128, 0.15) !important;
color: #7a8a7a !important; color: #a2ada2 !important;
} }
[data-theme="dark"] .gj-tour-popover .driver-popover-close-btn { [data-theme="dark"] .gj-tour-popover .driver-popover-close-btn {
color: #7a8a7a !important; color: #a2ada2 !important;
outline: none !important; outline: none !important;
box-shadow: none !important; box-shadow: none !important;
border: none !important; border: none !important;
@@ -3773,7 +3773,7 @@
.static-page__updated { .static-page__updated {
font-size: 0.875rem; font-size: 0.875rem;
color: #6b7280; color: #4b505a;
margin-bottom: 1.75rem !important; margin-bottom: 1.75rem !important;
} }
@@ -3804,7 +3804,7 @@
} }
.static-page__footer span { .static-page__footer span {
color: #9ca3af; color: #6d727a;
} }
/* ============================ /* ============================
@@ -3870,7 +3870,7 @@ body.gj-has-bg .settings-page {
.bg-grid-add { .bg-grid-add {
border: 2px dashed var(--color-border, #d4e8d4); border: 2px dashed var(--color-border, #d4e8d4);
background: var(--color-accent-light, #dcfce7); background: var(--color-accent-light, #dcfce7);
color: var(--color-text-muted, #6b7280); color: var(--color-text-muted, #4b505a);
} }
.bg-grid-add:hover:not(:disabled) { .bg-grid-add:hover:not(:disabled) {
@@ -3947,7 +3947,7 @@ body.gj-has-bg .settings-page {
border-radius: 10px; border-radius: 10px;
border: 1.5px solid var(--color-border, #d4e8d4); border: 1.5px solid var(--color-border, #d4e8d4);
background: transparent; background: transparent;
color: var(--color-text-muted, #6b7280); color: var(--color-text-muted, #4b505a);
font-size: 0.85rem; font-size: 0.85rem;
font-weight: 500; font-weight: 500;
cursor: pointer; cursor: pointer;
@@ -4019,7 +4019,7 @@ body.gj-has-bg .settings-page {
.cropper-cancel-btn { .cropper-cancel-btn {
background: none; background: none;
border: none; border: none;
color: #9ca3af; color: #6d727a;
font-size: 0.9rem; font-size: 0.9rem;
cursor: pointer; cursor: pointer;
padding: 0.3rem 0.5rem; padding: 0.3rem 0.5rem;
@@ -4127,7 +4127,7 @@ body.gj-has-bg .settings-page {
[data-theme="dark"] .bg-grid-add { [data-theme="dark"] .bg-grid-add {
background: rgba(255, 255, 255, 0.05); background: rgba(255, 255, 255, 0.05);
border-color: rgba(255, 255, 255, 0.12); border-color: rgba(255, 255, 255, 0.12);
color: #9ca3af; color: #babfc7;
} }
[data-theme="dark"] .bg-grid-add:hover:not(:disabled) { [data-theme="dark"] .bg-grid-add:hover:not(:disabled) {
@@ -4142,7 +4142,7 @@ body.gj-has-bg .settings-page {
[data-theme="dark"] .bg-default-btn { [data-theme="dark"] .bg-default-btn {
border-color: rgba(255, 255, 255, 0.12); border-color: rgba(255, 255, 255, 0.12);
color: #9ca3af; color: #babfc7;
} }
[data-theme="dark"] .bg-default-btn:hover:not(:disabled) { [data-theme="dark"] .bg-default-btn:hover:not(:disabled) {

4
src/index.css
View File

@@ -28,7 +28,7 @@ input, textarea {
--color-surface: rgb(255 255 255 / var(--card-bg-opacity)); --color-surface: rgb(255 255 255 / var(--card-bg-opacity));
--color-accent-light: #dcfce7; --color-accent-light: #dcfce7;
--color-text: #1a1a1a; --color-text: #1a1a1a;
--color-text-muted: #6b7280; --color-text-muted: #4b505a;
--color-border: #d4e8d4; --color-border: #d4e8d4;
color: var(--color-text); color: var(--color-text);
@@ -85,7 +85,7 @@ button:focus-visible {
--color-surface: rgb(26 26 26 / var(--card-bg-opacity)); --color-surface: rgb(26 26 26 / var(--card-bg-opacity));
--color-accent-light: rgba(74, 222, 128, 0.12); --color-accent-light: rgba(74, 222, 128, 0.12);
--color-text: #e8f5e8; --color-text: #e8f5e8;
--color-text-muted: #7a8a7a; --color-text-muted: #a2ada2;
--color-border: rgba(74, 222, 128, 0.12); --color-border: rgba(74, 222, 128, 0.12);
color: var(--color-text); color: var(--color-text);