fix: improve dark mode contrast for Points and Target badges in award detail view
Replace inline styles with CSS classes that use semi-transparent backgrounds in dark mode instead of bright solid colors. Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
@@ -631,7 +631,7 @@
|
|||||||
<span class="summary-label">Confirmed:</span>
|
<span class="summary-label">Confirmed:</span>
|
||||||
<span class="summary-value">{filteredEntities.filter((e) => e.confirmed).length}</span>
|
<span class="summary-value">{filteredEntities.filter((e) => e.confirmed).length}</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="summary-card" style="background-color: #fff3cd; border-color: #ffc107;">
|
<div class="summary-card points">
|
||||||
<span class="summary-label">Points:</span>
|
<span class="summary-label">Points:</span>
|
||||||
<span class="summary-value">{earnedPoints}</span>
|
<span class="summary-value">{earnedPoints}</span>
|
||||||
</div>
|
</div>
|
||||||
@@ -640,7 +640,7 @@
|
|||||||
<span class="summary-label">Needed:</span>
|
<span class="summary-label">Needed:</span>
|
||||||
<span class="summary-value">{neededPoints}</span>
|
<span class="summary-value">{neededPoints}</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="summary-card" style="background-color: #e3f2fd; border-color: #2196f3;">
|
<div class="summary-card target">
|
||||||
<span class="summary-label">Target:</span>
|
<span class="summary-label">Target:</span>
|
||||||
<span class="summary-value">{targetPoints}</span>
|
<span class="summary-value">{targetPoints}</span>
|
||||||
</div>
|
</div>
|
||||||
@@ -665,7 +665,7 @@
|
|||||||
<span class="summary-label">Needed:</span>
|
<span class="summary-label">Needed:</span>
|
||||||
<span class="summary-value">{neededCount}</span>
|
<span class="summary-value">{neededCount}</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="summary-card" style="background-color: #e3f2fd; border-color: #2196f3;">
|
<div class="summary-card target">
|
||||||
<span class="summary-label">Target:</span>
|
<span class="summary-label">Target:</span>
|
||||||
<span class="summary-value">{targetCount}</span>
|
<span class="summary-value">{targetCount}</span>
|
||||||
</div>
|
</div>
|
||||||
@@ -1141,6 +1141,24 @@
|
|||||||
background-color: var(--color-warning-bg);
|
background-color: var(--color-warning-bg);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.summary-card.points {
|
||||||
|
border-color: #ff9800;
|
||||||
|
background-color: var(--bg-secondary);
|
||||||
|
}
|
||||||
|
|
||||||
|
:global(.dark) .summary-card.points {
|
||||||
|
background-color: rgba(255, 152, 0, 0.15);
|
||||||
|
}
|
||||||
|
|
||||||
|
.summary-card.target {
|
||||||
|
border-color: var(--color-primary);
|
||||||
|
background-color: var(--bg-secondary);
|
||||||
|
}
|
||||||
|
|
||||||
|
:global(.dark) .summary-card.target {
|
||||||
|
background-color: rgba(33, 150, 243, 0.15);
|
||||||
|
}
|
||||||
|
|
||||||
.summary-label {
|
.summary-label {
|
||||||
display: block;
|
display: block;
|
||||||
font-size: 0.875rem;
|
font-size: 0.875rem;
|
||||||
|
|||||||
Reference in New Issue
Block a user