nate/shpm
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: improve text contrast throughout app

Browse Source 
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>
This commit is contained in:
nmemmertandClaude Sonnet 4.6 committed 2026-08-18 10:30:03 -04:00
1 parent e14919fe17
commit dd6fa803eb
8 files changed
+27 -27
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

client/src/App.jsx
+4 -4
View File
@@ -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>
)}
client/src/components/DetailPanel.jsx
+2 -2
View File
@@ -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,
client/src/components/DuplicateGroup.jsx
+3 -3
View File
@@ -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
client/src/components/DuplicatesView.jsx
+4 -4
View File
@@ -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) => (
client/src/components/FilterSidebar.jsx
+1 -1
View File
@@ -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}
client/src/components/MapView.jsx
+2 -2
View File
@@ -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>
client/src/components/MonthGroup.jsx
+1 -1
View File
@@ -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>
client/src/components/SettingsPanel.jsx
+10 -10
View File
@@ -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,
}}
>