From dd6fa803eb4ac238ab8bad513266d6b3a4d44892 Mon Sep 17 00:00:00 2001
From: nmemmert <67961292+nmemmert@users.noreply.github.com>
Date: Tue, 18 Aug 2026 10:30:03 -0400
Subject: [PATCH] fix: improve text contrast throughout app
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Replace near-invisible grays (#2a2a2a, #333, #3a3a3a, #444, #555) with
readable values (#555–#777) on the dark background.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 client/src/App.jsx                       |  8 ++++----
 client/src/components/DetailPanel.jsx    |  4 ++--
 client/src/components/DuplicateGroup.jsx |  6 +++---
 client/src/components/DuplicatesView.jsx |  8 ++++----
 client/src/components/FilterSidebar.jsx  |  2 +-
 client/src/components/MapView.jsx        |  4 ++--
 client/src/components/MonthGroup.jsx     |  2 +-
 client/src/components/SettingsPanel.jsx  | 20 ++++++++++----------
 8 files changed, 27 insertions(+), 27 deletions(-)

diff --git a/client/src/App.jsx b/client/src/App.jsx
index 505f7d9..133fb81 100644
--- a/client/src/App.jsx
+++ b/client/src/App.jsx
@@ -120,7 +120,7 @@ export default function App() {
           <Tab active={view === 'library'}    onClick={() => setView('library')}>
             Library
             {total !== null && (
-              <span style={{ marginLeft: 6, fontSize: 12, color: view === 'library' ? '#555' : '#3a3a3a' }}>
+              <span style={{ marginLeft: 6, fontSize: 12, color: view === 'library' ? '#777' : '#666' }}>
                 {total.toLocaleString()}
               </span>
             )}
@@ -192,7 +192,7 @@ export default function App() {
                 </p>
               )}
               {photos.length === 0 && !loading && !error && (
-                <div style={{ textAlign: 'center', padding: '80px 24px', color: '#555' }}>
+                <div style={{ textAlign: 'center', padding: '80px 24px', color: '#777' }}>
                   {hasFilter ? (
                     <p style={{ fontSize: 15 }}>No photos match these filters.</p>
                   ) : (
@@ -207,7 +207,7 @@ export default function App() {
               <div ref={sentinelRef} style={{ height: 1 }} />
               {loading && <p style={{ textAlign: 'center', padding: 24, color: '#444', fontSize: 13 }}>Loading…</p>}
               {nextCursor === null && photos.length > 0 && !loading && (
-                <p style={{ textAlign: 'center', padding: 24, color: '#2a2a2a', fontSize: 12 }}>
+                <p style={{ textAlign: 'center', padding: 24, color: '#555', fontSize: 12 }}>
                   — {total?.toLocaleString()} photo{total === 1 ? '' : 's'} —
                 </p>
               )}
@@ -216,7 +216,7 @@ export default function App() {
 
           {/* Map */}
           {view === 'map' && (
-            <Suspense fallback={<p style={{ padding: 24, color: '#555', fontSize: 13 }}>Loading map…</p>}>
+            <Suspense fallback={<p style={{ padding: 24, color: '#777', fontSize: 13 }}>Loading map…</p>}>
               <MapView onOpenPhoto={(photo) => openLightbox([photo], 0)} />
             </Suspense>
           )}
diff --git a/client/src/components/DetailPanel.jsx b/client/src/components/DetailPanel.jsx
index 980dbc1..840815e 100644
--- a/client/src/components/DetailPanel.jsx
+++ b/client/src/components/DetailPanel.jsx
@@ -77,7 +77,7 @@ export default function DetailPanel({ photoId }) {
 function Section({ label, children }) {
   return (
     <div style={{ marginBottom: 24 }}>
-      <div style={{ fontSize: 10, fontWeight: 700, color: '#3a3a3a', textTransform: 'uppercase', letterSpacing: 1, marginBottom: 10 }}>
+      <div style={{ fontSize: 10, fontWeight: 700, color: '#666', textTransform: 'uppercase', letterSpacing: 1, marginBottom: 10 }}>
         {label}
       </div>
       {children}
@@ -88,7 +88,7 @@ function Section({ label, children }) {
 function Row({ k, v, mono }) {
   return (
     <div style={{ display: 'flex', gap: 8, marginBottom: 5 }}>
-      <span style={{ color: '#555', flexShrink: 0, width: 60, fontSize: 12 }}>{k}</span>
+      <span style={{ color: '#777', flexShrink: 0, width: 60, fontSize: 12 }}>{k}</span>
       <span style={{
         color: '#aaa',
         fontFamily: mono ? "'SF Mono', 'Fira Code', monospace" : undefined,
diff --git a/client/src/components/DuplicateGroup.jsx b/client/src/components/DuplicateGroup.jsx
index 9977f56..0c96d79 100644
--- a/client/src/components/DuplicateGroup.jsx
+++ b/client/src/components/DuplicateGroup.jsx
@@ -56,13 +56,13 @@ export default function DuplicateGroup({ photos, onDismiss, onOpen }) {
             </div>
 
             {/* Meta */}
-            <div style={{ padding: '7px 10px 8px', fontSize: 12, color: '#555', display: 'flex', flexDirection: 'column', gap: 2 }}>
+            <div style={{ padding: '7px 10px 8px', fontSize: 12, color: '#777', display: 'flex', flexDirection: 'column', gap: 2 }}>
               <span style={{ color: '#888' }}>{fmtDate(photo.date_taken)}</span>
               <span>
                 {[fmtSize(photo.filesize), photo.width && `${photo.width}×${photo.height}`].filter(Boolean).join(' · ')}
               </span>
               {photo.camera_model && (
-                <span style={{ color: '#3a3a3a', fontSize: 11, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
+                <span style={{ color: '#666', fontSize: 11, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
                   {photo.camera_model}
                 </span>
               )}
@@ -77,7 +77,7 @@ export default function DuplicateGroup({ photos, onDismiss, onOpen }) {
         borderTop: '1px solid #1a1a1a',
         display: 'flex', alignItems: 'center', gap: 12,
       }}>
-        <span style={{ fontSize: 12, color: '#333', flex: 1 }}>
+        <span style={{ fontSize: 12, color: '#666', flex: 1 }}>
           {photos.length} similar photos
         </span>
         <button
diff --git a/client/src/components/DuplicatesView.jsx b/client/src/components/DuplicatesView.jsx
index 7e31a71..f52b11f 100644
--- a/client/src/components/DuplicatesView.jsx
+++ b/client/src/components/DuplicatesView.jsx
@@ -66,7 +66,7 @@ export default function DuplicatesView({ onOpenPhoto, onGroupCountChange }) {
         </button>
 
         {scanResult && (
-          <span style={{ fontSize: 12, color: '#555' }}>
+          <span style={{ fontSize: 12, color: '#777' }}>
             {scanResult.newPairs === 0
               ? 'No new pairs'
               : `${scanResult.newPairs} new pair${scanResult.newPairs !== 1 ? 's' : ''} found`}
@@ -80,11 +80,11 @@ export default function DuplicatesView({ onOpenPhoto, onGroupCountChange }) {
       )}
 
       {groups === null && (
-        <p style={{ color: '#555', fontSize: 13 }}>Loading…</p>
+        <p style={{ color: '#777', fontSize: 13 }}>Loading…</p>
       )}
 
       {groups !== null && groups.length === 0 && (
-        <div style={{ textAlign: 'center', paddingTop: 60, color: '#555' }}>
+        <div style={{ textAlign: 'center', paddingTop: 60, color: '#777' }}>
           <p style={{ fontSize: 15, marginBottom: 8 }}>No similar photos to review.</p>
           <p style={{ fontSize: 13 }}>Click "Scan library" to compare perceptual hashes across your library.</p>
         </div>
@@ -92,7 +92,7 @@ export default function DuplicatesView({ onOpenPhoto, onGroupCountChange }) {
 
       {groups !== null && groups.length > 0 && (
         <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
-          <p style={{ fontSize: 12, color: '#444', marginBottom: 4 }}>
+          <p style={{ fontSize: 12, color: '#666', marginBottom: 4 }}>
             {groups.length} group{groups.length !== 1 ? 's' : ''} — click a photo to inspect it, "Not duplicates" to dismiss
           </p>
           {groups.map((group, i) => (
diff --git a/client/src/components/FilterSidebar.jsx b/client/src/components/FilterSidebar.jsx
index 3ddb225..a75beaa 100644
--- a/client/src/components/FilterSidebar.jsx
+++ b/client/src/components/FilterSidebar.jsx
@@ -156,7 +156,7 @@ function Section({ title, children }) {
     <div style={{ marginTop: 16 }}>
       <div style={{
         fontSize: 10, fontWeight: 700, letterSpacing: '0.08em',
-        color: '#3a3a3a', textTransform: 'uppercase',
+        color: '#666', textTransform: 'uppercase',
         padding: '0 16px 4px',
       }}>
         {title}
diff --git a/client/src/components/MapView.jsx b/client/src/components/MapView.jsx
index 54db137..d6291e2 100644
--- a/client/src/components/MapView.jsx
+++ b/client/src/components/MapView.jsx
@@ -47,11 +47,11 @@ export default function MapView({ onOpenPhoto }) {
   );
 
   if (points === null) return (
-    <p style={{ color: '#555', padding: 24, fontSize: 13 }}>Loading map…</p>
+    <p style={{ color: '#777', padding: 24, fontSize: 13 }}>Loading map…</p>
   );
 
   if (points.length === 0) return (
-    <div style={{ textAlign: 'center', paddingTop: 60, color: '#555' }}>
+    <div style={{ textAlign: 'center', paddingTop: 60, color: '#777' }}>
       <p style={{ fontSize: 15, marginBottom: 8 }}>No geotagged photos.</p>
       <p style={{ fontSize: 13 }}>Photos with GPS metadata will appear here once indexed.</p>
     </div>
diff --git a/client/src/components/MonthGroup.jsx b/client/src/components/MonthGroup.jsx
index 70af5c8..ba8220d 100644
--- a/client/src/components/MonthGroup.jsx
+++ b/client/src/components/MonthGroup.jsx
@@ -13,7 +13,7 @@ export default function MonthGroup({ label, photos, startIdx, onSelect }) {
         userSelect: 'none',
       }}>
         {label}
-        <span style={{ marginLeft: 8, color: '#3a3a3a', fontWeight: 400 }}>
+        <span style={{ marginLeft: 8, color: '#666', fontWeight: 400 }}>
           {photos.length.toLocaleString()}
         </span>
       </h2>
diff --git a/client/src/components/SettingsPanel.jsx b/client/src/components/SettingsPanel.jsx
index 7eb6d88..a6672cd 100644
--- a/client/src/components/SettingsPanel.jsx
+++ b/client/src/components/SettingsPanel.jsx
@@ -190,7 +190,7 @@ export default function SettingsPanel({ onClose }) {
                     onClick={() => handleRemoveFolder(f.id)}
                     style={{
                       background: 'none', border: 'none',
-                      color: '#3a3a3a', cursor: 'pointer', fontSize: 14,
+                      color: '#666', cursor: 'pointer', fontSize: 14,
                       flexShrink: 0, lineHeight: 1,
                     }}
                   >×</button>
@@ -333,7 +333,7 @@ export default function SettingsPanel({ onClose }) {
               <NumSetting label="Preview quality" unit="%" min={1} max={100}
                 value={settings.preview_quality}
                 onChange={v => handleSetting('preview_quality', v)} />
-              <p style={{ fontSize: 11, color: '#3a3a3a', padding: '4px 18px 0', lineHeight: 1.5 }}>
+              <p style={{ fontSize: 11, color: '#666', padding: '4px 18px 0', lineHeight: 1.5 }}>
                 Changes apply to newly ingested photos. Existing thumbnails are not regenerated.
               </p>
             </Section>
@@ -343,7 +343,7 @@ export default function SettingsPanel({ onClose }) {
               <NumSetting label="Similarity threshold" unit="" min={1} max={20}
                 value={settings.dedupe_threshold}
                 onChange={v => handleSetting('dedupe_threshold', v)} />
-              <p style={{ fontSize: 11, color: '#3a3a3a', padding: '4px 18px 0', lineHeight: 1.5 }}>
+              <p style={{ fontSize: 11, color: '#666', padding: '4px 18px 0', lineHeight: 1.5 }}>
                 Hamming distance — lower = stricter (fewer, more exact matches).
               </p>
             </Section>
@@ -390,7 +390,7 @@ export default function SettingsPanel({ onClose }) {
                     error={syncError.icloud}
                     onSync={() => handleSync('icloud')}
                   />
-                  <p style={{ fontSize: 11, color: '#3a3a3a', padding: '2px 18px 4px', lineHeight: 1.5 }}>
+                  <p style={{ fontSize: 11, color: '#666', padding: '2px 18px 4px', lineHeight: 1.5 }}>
                     First run: <code style={{ color: '#555' }}>docker exec &lt;container&gt; icloudpd --username &lt;id&gt; --auth-only --cookie-directory /data/icloud-cookies</code>
                   </p>
                 </>
@@ -398,7 +398,7 @@ export default function SettingsPanel({ onClose }) {
 
               {/* Amazon Photos */}
               <SyncSourceHeader label="Amazon Photos — one-time import" />
-              <p style={{ fontSize: 11, color: '#3a3a3a', padding: '0 18px 8px', lineHeight: 1.6 }}>
+              <p style={{ fontSize: 11, color: '#666', padding: '0 18px 8px', lineHeight: 1.6 }}>
                 Request your library at amazon.com → Account → Request Your Data → Amazon Photos.
                 Extract the ZIP, copy to your server, then add the folder path here.
               </p>
@@ -430,7 +430,7 @@ export default function SettingsPanel({ onClose }) {
                 </button>
               </div>
 
-              <p style={{ fontSize: 11, color: '#3a3a3a', padding: '4px 18px 0', lineHeight: 1.5 }}>
+              <p style={{ fontSize: 11, color: '#666', padding: '4px 18px 0', lineHeight: 1.5 }}>
                 Also add the iCloud download folder to Watch Folders once sync runs.
               </p>
             </Section>
@@ -441,7 +441,7 @@ export default function SettingsPanel({ onClose }) {
                 <DangerBtn onClick={handleClearDismissals}>
                   {cleared ? '✓ Done' : 'Clear dismissed duplicates'}
                 </DangerBtn>
-                <p style={{ fontSize: 11, color: '#3a3a3a', marginTop: 5, lineHeight: 1.5 }}>
+                <p style={{ fontSize: 11, color: '#666', marginTop: 5, lineHeight: 1.5 }}>
                   Resets all "Not duplicates" decisions so groups reappear in the review list.
                 </p>
               </div>
@@ -459,7 +459,7 @@ function Section({ title, children }) {
     <div style={{ marginTop: 20 }}>
       <div style={{
         fontSize: 10, fontWeight: 700, letterSpacing: '0.08em',
-        color: '#3a3a3a', textTransform: 'uppercase',
+        color: '#666', textTransform: 'uppercase',
         padding: '0 18px 8px',
       }}>
         {title}
@@ -610,7 +610,7 @@ function SyncControls({ job, error, onSync }) {
         )}
 
         {lastRunLabel && !job.running && (
-          <span style={{ fontSize: 11, color: '#3a3a3a' }}>
+          <span style={{ fontSize: 11, color: '#666' }}>
             Last: {lastRunLabel}
             {job.exitCode !== null && (
               <span style={{ color: job.exitCode === 0 ? '#4a7a4a' : '#7a3a3a', marginLeft: 6 }}>
@@ -624,7 +624,7 @@ function SyncControls({ job, error, onSync }) {
           <button
             onClick={() => setShowLog(s => !s)}
             style={{
-              background: 'none', border: 'none', color: '#3a3a3a',
+              background: 'none', border: 'none', color: '#666',
               cursor: 'pointer', fontSize: 11, marginLeft: 'auto', padding: 0,
             }}
           >