ekzyis
/
stacker.news
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Fix hat contrast in profile in dark mode (#1406)

This commit is contained in:
ekzyis 2024-09-14 02:05:16 +02:00 committed by GitHub
parent 85a8fc5dcd
commit 7c68eafa56
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 6 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
components/hat.js
View File

@ -14,7 +14,7 @@ export default function Hat ({ user, badge, className = 'ms-1', height = 16, wid
{badge {badge
? ( ? (
<Badge bg='grey-medium' className='ms-2 d-inline-flex align-items-center'> <Badge bg='grey-medium' className='ms-2 d-inline-flex align-items-center'>
<AnonIcon className={`${className} align-middle`} height={height} width={width} /> <AnonIcon className={`${className} fill-dark align-middle`} height={height} width={width} />
</Badge>) </Badge>)
: <span><AnonIcon className={`${className} align-middle`} height={height} width={width} /></span>} : <span><AnonIcon className={`${className} align-middle`} height={height} width={width} /></span>}
</HatTooltip> </HatTooltip>
@ -34,7 +34,7 @@ export default function Hat ({ user, badge, className = 'ms-1', height = 16, wid
{badge {badge
? ( ? (
<Badge bg='grey-medium' className='ms-2 d-inline-flex align-items-center'> <Badge bg='grey-medium' className='ms-2 d-inline-flex align-items-center'>
<CowboyHatIcon className={className} height={height} width={width} /> <CowboyHatIcon className={`${className} fill-dark`} height={height} width={width} />
<span className='ms-1 text-dark'>{streak || 'new'}</span> <span className='ms-1 text-dark'>{streak || 'new'}</span>
</Badge>) </Badge>)
: <span><CowboyHatIcon className={className} height={height} width={width} /></span>} : <span><CowboyHatIcon className={className} height={height} width={width} /></span>}

4
styles/globals.scss
View File

@ -784,6 +784,10 @@ div[contenteditable]:focus,
fill: white; fill: white;
} }
.fill-dark {
fill: #212529;
}
.fill-success { .fill-success {
fill: var(--bs-success); fill: var(--bs-success);
} }