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

final notif changes

Browse Source
This commit is contained in:
Jeet Debnath
2026-04-14 11:10:44 +05:30
parent a1ac8e7933
commit 19dcd73b29
11 changed files with 685 additions and 94 deletions
Download Patch File Download Diff File Expand all files Collapse all files

248
src/App.css
View File

@@ -2750,6 +2750,254 @@
background: #333;
}
/* ── Reminder Modal ────────────────────────────────────────────── */
.reminder-modal-overlay {
background: rgba(0, 0, 0, 0.85);
align-items: center;
justify-content: center;
padding: 1.5rem;
}
.reminder-modal {
background: #ffffff;
max-width: 340px;
width: 100%;
border-radius: 24px;
max-height: none;
overflow: visible;
padding: 1.25rem 1.25rem 1.5rem;
}
[data-theme="dark"] .reminder-modal-overlay {
background: rgba(0, 0, 0, 0.88);
}
[data-theme="dark"] .reminder-modal {
background: #1c1c1e;
}
/* ── Clock Time Picker ─────────────────────────────────────────── */
.clock-picker {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.6rem;
padding: 0.25rem 0;
}
.clock-picker__display {
display: flex;
align-items: center;
gap: 0.25rem;
}
.clock-picker__seg {
background: var(--color-surface-alt, #f3f4f6);
border: none;
border-radius: 10px;
font-size: 2.25rem;
font-weight: 700;
font-family: inherit;
color: var(--color-text, #111827);
width: 3rem;
height: 3.5rem;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: background 0.15s, color 0.15s;
line-height: 1;
padding: 0;
}
.clock-picker__seg--active {
background: var(--color-primary, #22c55e);
color: #fff;
}
.clock-picker__colon {
font-size: 2rem;
font-weight: 700;
color: var(--color-text, #111827);
line-height: 1;
padding: 0 0.1rem;
user-select: none;
}
.clock-picker__ampm {
display: flex;
flex-direction: column;
gap: 0.25rem;
margin-left: 0.5rem;
}
.clock-picker__ampm-btn {
background: var(--color-surface-alt, #f3f4f6);
border: 1.5px solid transparent;
border-radius: 8px;
font-size: 0.7rem;
font-weight: 700;
font-family: inherit;
color: var(--color-text-muted, #6b7280);
padding: 0.25rem 0.5rem;
cursor: pointer;
transition: background 0.15s, color 0.15s, border-color 0.15s;
letter-spacing: 0.03em;
}
.clock-picker__ampm-btn--active {
background: var(--color-primary, #22c55e);
color: #fff;
border-color: var(--color-primary, #22c55e);
}
.clock-picker__face {
width: 180px;
height: 180px;
display: block;
border-radius: 50%;
overflow: visible;
}
.clock-picker__bg {
fill: var(--color-surface-alt, #f3f4f6);
}
.clock-picker__sector {
fill: rgba(34, 197, 94, 0.12);
}
.clock-picker__hand {
stroke: var(--color-primary, #22c55e);
stroke-width: 2.5;
stroke-linecap: round;
}
.clock-picker__center-dot {
fill: var(--color-primary, #22c55e);
}
.clock-picker__hand-tip {
fill: var(--color-primary, #22c55e);
}
.clock-picker__num {
font-family: inherit;
font-size: 13px;
font-weight: 500;
fill: var(--color-text, #111827);
user-select: none;
pointer-events: none;
}
.clock-picker__num--selected {
fill: #fff;
font-weight: 700;
}
.clock-picker__tick {
stroke: var(--color-text-muted, #9ca3af);
stroke-width: 1.5;
opacity: 0.4;
}
.clock-picker__modes {
display: flex;
gap: 0.5rem;
}
.clock-picker__mode-btn {
background: none;
border: 1.5px solid var(--color-border, #e5e7eb);
border-radius: 20px;
font-size: 0.7rem;
font-weight: 600;
font-family: inherit;
color: var(--color-text-muted, #6b7280);
padding: 0.25rem 0.75rem;
cursor: pointer;
transition: all 0.15s;
}
.clock-picker__mode-btn--active {
background: var(--color-primary, #22c55e);
border-color: var(--color-primary, #22c55e);
color: #fff;
}
/* Dark mode overrides */
[data-theme="dark"] .clock-picker__seg {
background: #2a2a2a;
color: #f9fafb;
}
[data-theme="dark"] .clock-picker__seg--active {
background: var(--color-primary, #4ade80);
color: #111;
}
[data-theme="dark"] .clock-picker__colon {
color: #f9fafb;
}
[data-theme="dark"] .clock-picker__ampm-btn {
background: #2a2a2a;
color: #9ca3af;
}
[data-theme="dark"] .clock-picker__ampm-btn--active {
background: var(--color-primary, #4ade80);
color: #111;
border-color: var(--color-primary, #4ade80);
}
[data-theme="dark"] .clock-picker__bg {
fill: #2a2a2a;
}
[data-theme="dark"] .clock-picker__sector {
fill: rgba(74, 222, 128, 0.12);
}
[data-theme="dark"] .clock-picker__hand {
stroke: #4ade80;
}
[data-theme="dark"] .clock-picker__center-dot {
fill: #4ade80;
}
[data-theme="dark"] .clock-picker__hand-tip {
fill: #4ade80;
}
[data-theme="dark"] .clock-picker__num {
fill: #d1d5db;
}
[data-theme="dark"] .clock-picker__num--selected {
fill: #111;
}
[data-theme="dark"] .clock-picker__tick {
stroke: #4b5563;
}
[data-theme="dark"] .clock-picker__mode-btn {
border-color: #333;
color: #9ca3af;
}
[data-theme="dark"] .clock-picker__mode-btn--active {
background: #4ade80;
border-color: #4ade80;
color: #111;
}
/* ── End Clock Time Picker ─────────────────────────────────────── */
/* -- Login page — light mode only, no dark theme overrides -- */
/* -- Google sign-in btn -- */