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

opacity change

Browse Source
This commit is contained in:
Jeet Debnath
2026-04-13 15:07:14 +05:30
parent 1353dfc69d
commit 937a98c58d
4 changed files with 200 additions and 132 deletions
Download Patch File Download Diff File Expand all files Collapse all files

199
src/App.css
View File

@@ -94,7 +94,7 @@
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 1.75rem; gap: 1.75rem;
background: #fff; background: var(--color-surface);
border-radius: 24px; border-radius: 24px;
border-top: 4px solid #22c55e; border-top: 4px solid #22c55e;
padding: 2rem 1.75rem; padding: 2rem 1.75rem;
@@ -434,7 +434,7 @@
} }
.journal-card { .journal-card {
background: #fff; background: var(--color-surface);
border-radius: 20px; border-radius: 20px;
padding: 1.625rem 1.5rem; padding: 1.625rem 1.5rem;
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.07); box-shadow: 0 2px 12px rgba(0, 0, 0, 0.07);
@@ -824,7 +824,7 @@
.bottom-nav { .bottom-nav {
flex-shrink: 0; flex-shrink: 0;
position: relative; /* NOT fixed — lives in the flex column */ position: relative; /* NOT fixed — lives in the flex column */
background: rgba(255, 255, 255, 0.96); background: var(--color-surface);
border-top: 1px solid rgba(0, 0, 0, 0.07); border-top: 1px solid rgba(0, 0, 0, 0.07);
padding: 8px 12px 12px; padding: 8px 12px 12px;
display: flex; display: flex;
@@ -947,7 +947,7 @@
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
background: #fff; background: var(--color-surface);
border: 1px solid #e5e7eb; border: 1px solid #e5e7eb;
border-radius: 50%; border-radius: 50%;
cursor: pointer; cursor: pointer;
@@ -974,7 +974,7 @@
/* Calendar */ /* Calendar */
.calendar-card { .calendar-card {
background: #fff; background: var(--color-surface);
border-radius: 18px; border-radius: 18px;
padding: 1.125rem 1rem; padding: 1.125rem 1rem;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06); box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
@@ -1106,7 +1106,7 @@
} }
.entry-card { .entry-card {
background: #fff; background: var(--color-surface);
padding: 1rem 1rem 1rem 0.875rem; padding: 1rem 1rem 1rem 0.875rem;
border-radius: 14px; border-radius: 14px;
border-left: 4px solid #22c55e; border-left: 4px solid #22c55e;
@@ -1234,7 +1234,7 @@
align-items: center; align-items: center;
gap: 1rem; gap: 1rem;
margin-bottom: 1.25rem; margin-bottom: 1.25rem;
background: #fff; background: var(--color-surface);
border-radius: 18px; border-radius: 18px;
padding: 1rem 1.125rem; padding: 1rem 1.125rem;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06); box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
@@ -1415,7 +1415,7 @@
} }
.settings-card { .settings-card {
background: #fff; background: var(--color-surface);
border-radius: 18px; border-radius: 18px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06); box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
overflow: hidden; overflow: hidden;
@@ -1617,7 +1617,7 @@
font-size: 0.9375rem; font-size: 0.9375rem;
font-weight: 600; font-weight: 600;
color: #dc2626; color: #dc2626;
background: #fff; background: var(--color-surface);
border: none; border: none;
border-radius: 14px; border-radius: 14px;
cursor: pointer; cursor: pointer;
@@ -1637,7 +1637,7 @@
font-size: 0.9375rem; font-size: 0.9375rem;
font-weight: 600; font-weight: 600;
color: #6b7280; color: #6b7280;
background: #fff; background: var(--color-surface);
border: none; border: none;
border-radius: 14px; border-radius: 14px;
cursor: pointer; cursor: pointer;
@@ -1706,7 +1706,7 @@
/* Modal panel – bottom sheet on mobile, centred card on desktop */ /* Modal panel – bottom sheet on mobile, centred card on desktop */
.entry-modal { .entry-modal {
background: #fff; background: var(--color-surface);
border-radius: 20px 20px 0 0; border-radius: 20px 20px 0 0;
width: 100%; width: 100%;
max-height: 85vh; max-height: 85vh;
@@ -1961,7 +1961,7 @@
} }
.confirm-modal { .confirm-modal {
background: #fff; background: var(--color-surface);
border-radius: 20px; border-radius: 20px;
padding: 1.75rem; padding: 1.75rem;
max-width: 380px; max-width: 380px;
@@ -2223,7 +2223,7 @@
/* Desktop dark theme adjustments */ /* Desktop dark theme adjustments */
@media (min-width: 860px) { @media (min-width: 860px) {
[data-theme="dark"] .bottom-nav { [data-theme="dark"] .bottom-nav {
background: #141414; background: var(--color-surface);
border-right-color: rgba(74, 222, 128, 0.1); border-right-color: rgba(74, 222, 128, 0.1);
} }
@@ -2301,7 +2301,7 @@
[data-theme="dark"] .settings-card, [data-theme="dark"] .settings-card,
[data-theme="dark"] .settings-profile, [data-theme="dark"] .settings-profile,
[data-theme="dark"] .entry-card { [data-theme="dark"] .entry-card {
background: #1a1a1a; background: var(--color-surface);
border-color: rgba(74, 222, 128, 0.12); border-color: rgba(74, 222, 128, 0.12);
box-shadow: box-shadow:
0 2px 16px rgba(0, 0, 0, 0.4), 0 2px 16px rgba(0, 0, 0, 0.4),
@@ -2408,7 +2408,7 @@
/* -- Bottom nav -- */ /* -- Bottom nav -- */
[data-theme="dark"] .bottom-nav { [data-theme="dark"] .bottom-nav {
background: rgba(20, 20, 20, 0.97); background: var(--color-surface);
border-top-color: rgba(74, 222, 128, 0.1); border-top-color: rgba(74, 222, 128, 0.1);
} }
@@ -2516,7 +2516,7 @@
/* -- Settings buttons -- */ /* -- Settings buttons -- */
[data-theme="dark"] .settings-tutorial-btn { [data-theme="dark"] .settings-tutorial-btn {
background: #1a1a1a; background: var(--color-surface);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
} }
@@ -2525,7 +2525,7 @@
} }
[data-theme="dark"] .settings-clear-btn { [data-theme="dark"] .settings-clear-btn {
background: #1a1a1a; background: var(--color-surface);
color: #f87171; color: #f87171;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
} }
@@ -2535,7 +2535,7 @@
} }
[data-theme="dark"] .settings-signout-btn { [data-theme="dark"] .settings-signout-btn {
background: #1a1a1a; background: var(--color-surface);
color: #9ca3af; color: #9ca3af;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
} }
@@ -2600,7 +2600,7 @@
/* -- History search button -- */ /* -- History search button -- */
[data-theme="dark"] .history-search-btn { [data-theme="dark"] .history-search-btn {
background: #1a1a1a; background: var(--color-surface);
border-color: #2a2a2a; border-color: #2a2a2a;
color: #7a8a7a; color: #7a8a7a;
} }
@@ -2634,7 +2634,7 @@
/* -- Entry modal -- */ /* -- Entry modal -- */
[data-theme="dark"] .entry-modal { [data-theme="dark"] .entry-modal {
background: #1a1a1a; background: var(--color-surface);
border-top-color: #4ade80; border-top-color: #4ade80;
box-shadow: box-shadow:
0 -4px 32px rgba(0, 0, 0, 0.5), 0 -4px 32px rgba(0, 0, 0, 0.5),
@@ -2688,7 +2688,7 @@
} }
[data-theme="dark"] .delete-confirm-modal { [data-theme="dark"] .delete-confirm-modal {
background: #1a1a1a; background: var(--color-surface);
} }
[data-theme="dark"] .delete-confirm-title { [data-theme="dark"] .delete-confirm-title {
color: #e8f5e8; color: #e8f5e8;
@@ -2714,7 +2714,7 @@
} }
[data-theme="dark"] .confirm-modal { [data-theme="dark"] .confirm-modal {
background: #1a1a1a; background: var(--color-surface);
box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5); box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
} }
@@ -3120,67 +3120,62 @@ body.gj-has-bg .settings-page {
border-radius: 20px; border-radius: 20px;
padding: 1.5rem; padding: 1.5rem;
width: min(440px, calc(100vw - 2rem)); width: min(440px, calc(100vw - 2rem));
max-height: 85vh;
overflow-y: auto;
box-shadow: 0 8px 40px rgba(0, 0, 0, 0.18); box-shadow: 0 8px 40px rgba(0, 0, 0, 0.18);
} }
.bg-gallery { /* 4-column fixed grid — no scroll */
display: flex; .bg-grid {
gap: 0.6rem; display: grid;
overflow-x: auto; grid-template-columns: repeat(4, 1fr);
padding: 0.25rem 0 0.75rem; gap: 0.5rem;
scrollbar-width: none; margin-bottom: 0.75rem;
-ms-overflow-style: none;
} }
.bg-gallery::-webkit-scrollbar { display: none; } /* Base tile — aspect-ratio set via inline style to match screen */
.bg-grid-tile {
/* Shared thumb/swatch styles */
.bg-gallery-swatch,
.bg-gallery-thumb,
.bg-gallery-add {
flex-shrink: 0;
width: 84px;
height: 58px;
border-radius: 10px; border-radius: 10px;
border: 2.5px solid transparent; border: 2.5px solid transparent;
overflow: visible; overflow: hidden;
cursor: pointer; cursor: pointer;
position: relative; position: relative;
padding: 0; padding: 0;
width: 100%;
transition: border-color 0.15s, transform 0.12s; transition: border-color 0.15s, transform 0.12s;
display: flex; display: flex;
flex-direction: column;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
background: none; background: none;
} }
.bg-gallery-swatch, .bg-grid-tile:hover:not(:disabled) {
.bg-gallery-thumb {
overflow: hidden;
}
.bg-gallery-swatch:hover,
.bg-gallery-thumb:hover,
.bg-gallery-add:hover {
transform: scale(1.04); transform: scale(1.04);
} }
.bg-gallery-item--active { .bg-grid-tile--active {
border-color: var(--color-primary, #22c55e) !important; border-color: var(--color-primary, #22c55e) !important;
} }
/* Default color swatch */ /* "+" upload tile */
.bg-gallery-swatch-fill { .bg-grid-add {
width: 100%; border: 2px dashed var(--color-border, #d4e8d4);
height: 100%; background: var(--color-accent-light, #dcfce7);
background: #eef6ee; color: var(--color-text-muted, #6b7280);
border-radius: 7px;
} }
/* Thumbnail image */ .bg-grid-add:hover:not(:disabled) {
border-color: var(--color-primary, #22c55e);
color: var(--color-primary, #22c55e);
}
/* Empty placeholder tile */
.bg-grid-empty {
background: var(--color-accent-light, #dcfce7);
border: 2px dashed var(--color-border, #d4e8d4);
opacity: 0.4;
cursor: default;
}
/* Thumbnail image fills the tile */
.bg-gallery-thumb-img { .bg-gallery-thumb-img {
width: 100%; width: 100%;
height: 100%; height: 100%;
@@ -3202,37 +3197,67 @@ body.gj-has-bg .settings-page {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
pointer-events: none;
} }
/* Label below swatch/add button */ /* Wrapper holds tile + delete button as siblings */
.bg-gallery-label { .bg-grid-wrapper {
position: relative;
}
.bg-grid-wrapper .bg-grid-tile {
width: 100%;
}
/* Delete (×) button — top-right corner of the image */
.bg-tile-delete {
position: absolute; position: absolute;
bottom: -18px; top: -6px;
left: 50%; right: -6px;
transform: translateX(-50%); width: 18px;
font-size: 0.65rem; height: 18px;
color: var(--color-text-muted, #6b7280); border-radius: 50%;
white-space: nowrap; background: #ef4444;
color: #fff;
border: none;
padding: 0;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
z-index: 2;
box-shadow: 0 1px 4px rgba(0,0,0,0.3);
} }
/* "+" add button */ /* Revert to default button */
.bg-gallery-add { .bg-default-btn {
border: 2px dashed var(--color-border, #d4e8d4); width: 100%;
background: var(--color-accent-light, #dcfce7); padding: 0.6rem 1rem;
color: var(--color-text-muted, #6b7280);
gap: 0.1rem;
border-radius: 10px; border-radius: 10px;
border: 1.5px solid var(--color-border, #d4e8d4);
background: transparent;
color: var(--color-text-muted, #6b7280);
font-size: 0.85rem;
font-weight: 500;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
gap: 0.45rem;
margin-bottom: 0.5rem;
transition: background 0.15s, border-color 0.15s, color 0.15s;
} }
.bg-gallery-add:hover { .bg-default-btn:hover:not(:disabled) {
background: var(--color-accent-light, #dcfce7);
border-color: var(--color-primary, #22c55e); border-color: var(--color-primary, #22c55e);
color: var(--color-primary, #22c55e); color: var(--color-primary-hover, #16a34a);
} }
/* Close button */ /* Close button */
.bg-close-btn { .bg-close-btn {
width: 100%; width: 100%;
margin-top: 1.5rem; margin-top: 0.25rem;
padding: 0.7rem; padding: 0.7rem;
border-radius: 12px; border-radius: 12px;
border: 1.5px solid var(--color-border, #d4e8d4); border: 1.5px solid var(--color-border, #d4e8d4);
@@ -3388,17 +3413,29 @@ body.gj-has-bg .settings-page {
background: #1a1a1a; background: #1a1a1a;
} }
[data-theme="dark"] .bg-gallery-swatch-fill { [data-theme="dark"] .bg-grid-add {
background: #0f0f0f;
}
[data-theme="dark"] .bg-gallery-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: #9ca3af;
} }
[data-theme="dark"] .bg-gallery-add:hover { [data-theme="dark"] .bg-grid-add:hover:not(:disabled) {
border-color: #4ade80;
color: #4ade80;
}
[data-theme="dark"] .bg-grid-empty {
background: rgba(255, 255, 255, 0.04);
border-color: rgba(255, 255, 255, 0.1);
}
[data-theme="dark"] .bg-default-btn {
border-color: rgba(255, 255, 255, 0.12);
color: #9ca3af;
}
[data-theme="dark"] .bg-default-btn:hover:not(:disabled) {
background: rgba(255, 255, 255, 0.06);
border-color: #4ade80; border-color: #4ade80;
color: #4ade80; color: #4ade80;
} }

2
src/components/BgImageCropper.tsx
View File

@@ -144,7 +144,7 @@ export function BgImageCropper({ imageSrc, aspectRatio, onCrop, onCancel }: Prop
canvas.height = outH canvas.height = outH
const ctx = canvas.getContext('2d')! const ctx = canvas.getContext('2d')!
ctx.drawImage(img, srcX, srcY, srcW, srcH, 0, 0, outW, outH) ctx.drawImage(img, srcX, srcY, srcW, srcH, 0, 0, outW, outH)
onCrop(canvas.toDataURL('image/jpeg', 0.72)) onCrop(canvas.toDataURL('image/jpeg', 0.92))
}, [aspectRatio, onCrop]) }, [aspectRatio, onCrop])
return ( return (

5
src/index.css
View File

@@ -24,7 +24,8 @@ input, textarea {
--color-primary: #22c55e; --color-primary: #22c55e;
--color-primary-hover: #16a34a; --color-primary-hover: #16a34a;
--color-bg-soft: #eef6ee; --color-bg-soft: #eef6ee;
--color-surface: #ffffff; --card-bg-opacity: 0.85;
--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: #6b7280;
@@ -81,7 +82,7 @@ button:focus-visible {
--color-primary: #4ade80; --color-primary: #4ade80;
--color-primary-hover: #22c55e; --color-primary-hover: #22c55e;
--color-bg-soft: #0f0f0f; --color-bg-soft: #0f0f0f;
--color-surface: #1a1a1a; --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: #7a8a7a;

126
src/pages/SettingsPage.tsx
View File

@@ -84,6 +84,8 @@ export default function SettingsPage() {
// Derived from mongoUser (no local state — always fresh after refreshMongoUser) // Derived from mongoUser (no local state — always fresh after refreshMongoUser)
const bgImages: string[] = (mongoUser as { backgroundImages?: string[] } | null)?.backgroundImages ?? [] const bgImages: string[] = (mongoUser as { backgroundImages?: string[] } | null)?.backgroundImages ?? []
const activeImage: string | null = mongoUser?.backgroundImage ?? null const activeImage: string | null = mongoUser?.backgroundImage ?? null
// Tile aspect ratio matches the actual screen so previews reflect real proportions
const screenAspect = `${window.innerWidth} / ${window.innerHeight}`
// Continue onboarding tour if navigated here from the history page tour // Continue onboarding tour if navigated here from the history page tour
useEffect(() => { useEffect(() => {
@@ -173,6 +175,15 @@ export default function SettingsPage() {
bgUpdate({ backgroundImage: img }) bgUpdate({ backgroundImage: img })
} }
const handleDeleteBgImage = (img: string, e: React.MouseEvent) => {
e.stopPropagation()
const newHistory = bgImages.filter(i => i !== img)
// If the deleted image was active, clear it too
const updates: Parameters<typeof updateUserProfile>[1] = { backgroundImages: newHistory }
if (img === activeImage) updates.backgroundImage = null
bgUpdate(updates)
}
const handleBgFileSelect = (e: React.ChangeEvent<HTMLInputElement>) => { const handleBgFileSelect = (e: React.ChangeEvent<HTMLInputElement>) => {
const file = e.target.files?.[0] const file = e.target.files?.[0]
if (!file) return if (!file) return
@@ -803,7 +814,7 @@ export default function SettingsPage() {
<div className="bg-modal" onClick={(e) => e.stopPropagation()}> <div className="bg-modal" onClick={(e) => e.stopPropagation()}>
<h3 className="edit-modal-title" style={{ marginBottom: '0.25rem' }}>Background</h3> <h3 className="edit-modal-title" style={{ marginBottom: '0.25rem' }}>Background</h3>
<p className="settings-item-subtitle" style={{ marginBottom: '1rem' }}> <p className="settings-item-subtitle" style={{ marginBottom: '1rem' }}>
Tap to apply · + to upload new Add new images or select from previously used ones:
</p> </p>
{/* Hidden file input */} {/* Hidden file input */}
@@ -815,66 +826,85 @@ export default function SettingsPage() {
onChange={handleBgFileSelect} onChange={handleBgFileSelect}
/> />
{/* Gallery row */} {/* Fixed 4-tile grid: [+] [slot1] [slot2] [slot3] */}
<div className="bg-gallery"> <div className="bg-grid">
{/* Default color swatch — always first */} {/* Add new — always first tile */}
<button <button
type="button" type="button"
className={`bg-gallery-swatch${!activeImage ? ' bg-gallery-item--active' : ''}`} className="bg-grid-tile bg-grid-add"
onClick={handleApplyDefault} style={{ aspectRatio: screenAspect }}
disabled={bgApplying}
title="Default color"
>
<div className="bg-gallery-swatch-fill" />
{!activeImage && (
<div className="bg-gallery-badge">
<svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3.5" strokeLinecap="round" strokeLinejoin="round">
<polyline points="20 6 9 17 4 12" />
</svg>
</div>
)}
<span className="bg-gallery-label">Default</span>
</button>
{/* History thumbnails */}
{bgImages.map((img, i) => (
<button
key={i}
type="button"
className={`bg-gallery-thumb${img === activeImage ? ' bg-gallery-item--active' : ''}`}
onClick={() => handleApplyFromGallery(img)}
disabled={bgApplying}
title={`Background ${i + 1}`}
>
<img src={img} alt="" className="bg-gallery-thumb-img" />
{img === activeImage && (
<div className="bg-gallery-badge">
<svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3.5" strokeLinecap="round" strokeLinejoin="round">
<polyline points="20 6 9 17 4 12" />
</svg>
</div>
)}
</button>
))}
{/* Add new */}
<button
type="button"
className="bg-gallery-add"
onClick={() => bgFileInputRef.current?.click()} onClick={() => bgFileInputRef.current?.click()}
disabled={bgApplying} disabled={bgApplying}
title="Upload new image" title="Upload new image"
> >
<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"> <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
<line x1="12" y1="5" x2="12" y2="19" /> <line x1="12" y1="5" x2="12" y2="19" />
<line x1="5" y1="12" x2="19" y2="12" /> <line x1="5" y1="12" x2="19" y2="12" />
</svg> </svg>
<span className="bg-gallery-label">New</span>
</button> </button>
{/* 3 image slots — filled or empty placeholder */}
{Array.from({ length: MAX_BG_HISTORY }).map((_, i) => {
const img = bgImages[i]
if (img) {
return (
<div key={i} className="bg-grid-wrapper">
<button
type="button"
className={`bg-grid-tile bg-grid-thumb${img === activeImage ? ' bg-grid-tile--active' : ''}`}
style={{ aspectRatio: screenAspect }}
onClick={() => handleApplyFromGallery(img)}
disabled={bgApplying}
title={`Background ${i + 1}`}
>
<img src={img} alt="" className="bg-gallery-thumb-img" />
{img === activeImage && (
<div className="bg-gallery-badge">
<svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3.5" strokeLinecap="round" strokeLinejoin="round">
<polyline points="20 6 9 17 4 12" />
</svg>
</div>
)}
</button>
<button
type="button"
className="bg-tile-delete"
onClick={(e) => handleDeleteBgImage(img, e)}
disabled={bgApplying}
title="Remove"
>
<svg width="8" height="8" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3.5" strokeLinecap="round">
<line x1="18" y1="6" x2="6" y2="18" />
<line x1="6" y1="6" x2="18" y2="18" />
</svg>
</button>
</div>
)
}
return (
<div key={i} className="bg-grid-tile bg-grid-empty" style={{ aspectRatio: screenAspect }} />
)
})}
</div> </div>
{/* Revert to default — only shown when a custom bg is active */}
{activeImage && (
<button
type="button"
className="bg-default-btn"
onClick={handleApplyDefault}
disabled={bgApplying}
>
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
<path d="M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8" />
<path d="M3 3v5h5" />
</svg>
Revert to default color
</button>
)}
{bgApplying && ( {bgApplying && (
<p className="settings-item-subtitle" style={{ textAlign: 'center', marginTop: '0.75rem' }}> <p className="settings-item-subtitle" style={{ textAlign: 'center', marginTop: '0.5rem' }}>
Saving… Saving…
</p> </p>
)} )}