refactor: use neutral text color for 'started' reading progress state

This commit is contained in:
Gigi
2025-10-16 09:29:41 +02:00
parent e90f902f0b
commit aff5bff03b
3 changed files with 7 additions and 6 deletions

View File

@@ -31,7 +31,7 @@ const BlogPostCard: React.FC<BlogPostCardProps> = ({ post, href, level, readingP
if (readingProgress && readingProgress >= 0.95) {
progressColor = '#10b981' // Green (completed)
} else if (readingProgress && readingProgress > 0 && readingProgress <= 0.10) {
progressColor = '#f59e0b' // Amber (started)
progressColor = 'var(--color-text)' // Neutral text color (started)
}
return (

View File

@@ -52,7 +52,7 @@ export const LargeView: React.FC<LargeViewProps> = ({
if (readingProgress && readingProgress >= 0.95) {
progressColor = '#10b981' // Green (completed)
} else if (readingProgress && readingProgress > 0 && readingProgress <= 0.10) {
progressColor = '#f59e0b' // Amber (started)
progressColor = 'var(--color-text)' // Neutral text color (started)
}
const triggerOpen = () => handleReadNow({ preventDefault: () => {} } as React.MouseEvent<HTMLButtonElement>)

View File

@@ -32,8 +32,7 @@ export const ReadingProgressIndicator: React.FC<ReadingProgressIndicatorProps> =
barColorClass = 'bg-green-500'
barColorStyle = undefined
} else if (isStarted) {
barColorClass = 'bg-amber-500'
barColorStyle = undefined
barColorStyle = 'var(--color-text)' // Neutral text color (matches card titles)
}
// Calculate left and right offsets based on sidebar states (desktop only)
@@ -71,9 +70,11 @@ export const ReadingProgressIndicator: React.FC<ReadingProgressIndicatorProps> =
{showPercentage && (
<div
className={`text-[0.625rem] font-normal min-w-[32px] text-right tabular-nums ${
isComplete ? 'text-green-500' : isStarted ? 'text-amber-500' : ''
isComplete ? 'text-green-500' : ''
}`}
style={{ color: (isComplete || isStarted) ? undefined : 'var(--color-text-muted)' }}
style={{
color: isComplete ? undefined : isStarted ? 'var(--color-text)' : 'var(--color-text-muted)'
}}
>
{isComplete ? '✓' : `${clampedProgress}%`}
</div>