hippoz/cinny
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Fixed NotificationBadge color

Browse source
This commit is contained in:
unknown 2021-09-12 11:20:56 +05:30
parent 1651a90dea
commit 284ed9dea1
3 changed files with 8 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/app/atoms/badge/NotificationBadge.jsx
View file

@ -8,7 +8,7 @@ function NotificationBadge({ alert, content }) {
const notificationClass = alert ? ' notification-badge--alert' : ''; const notificationClass = alert ? ' notification-badge--alert' : '';
return ( return (
<div className={`notification-badge${notificationClass}`}> <div className={`notification-badge${notificationClass}`}>
{content && <Text variant="b3">{content}</Text>} {content !== null && <Text variant="b3">{content}</Text>}
</div> </div>
); );
} }

5
src/app/atoms/badge/NotificationBadge.scss
View file

@ -2,17 +2,18 @@
min-width: 16px; min-width: 16px;
min-height: 8px; min-height: 8px;
padding: 0 var(--sp-ultra-tight); padding: 0 var(--sp-ultra-tight);
background-color: var(--tc-surface-low); background-color: var(--bg-badge);
border-radius: var(--bo-radius); border-radius: var(--bo-radius);
.text { .text {
color: white; color: var(--tc-badge);
text-align: center; text-align: center;
font-weight: 700; font-weight: 700;
} }
&--alert { &--alert {
background-color: var(--bg-danger); background-color: var(--bg-danger);
& .text { color: white }
} }
&:empty { &:empty {

4
src/index.scss
View file

@ -32,6 +32,7 @@
--bg-danger-border: rgba(240, 71, 71, 20%); --bg-danger-border: rgba(240, 71, 71, 20%);
--bg-tooltip: #353535; --bg-tooltip: #353535;
--bg-badge: #989898;
/* text color | --tc-[background type]-[priority]: value */ /* text color | --tc-[background type]-[priority]: value */
--tc-surface-high: #000000; --tc-surface-high: #000000;
@ -57,6 +58,7 @@
--tc-code: #e62498; --tc-code: #e62498;
--tc-tooltip: white; --tc-tooltip: white;
--tc-badge: white;
/* system icons | --ic-[background type]-[priority]: value */ /* system icons | --ic-[background type]-[priority]: value */
@ -179,6 +181,7 @@
--bg-primary-border: rgba(59, 119, 191, 38%); --bg-primary-border: rgba(59, 119, 191, 38%);
--bg-tooltip: #000; --bg-tooltip: #000;
--bg-badge: hsl(0, 0%, 75%);
/* text color | --tc-[background type]-[priority]: value */ /* text color | --tc-[background type]-[priority]: value */
--tc-surface-high: rgba(255, 255, 255, 94%); --tc-surface-high: rgba(255, 255, 255, 94%);
@ -190,6 +193,7 @@
--tc-primary-low: rgba(255, 255, 255, 0.4); --tc-primary-low: rgba(255, 255, 255, 0.4);
--tc-code: #e565b1; --tc-code: #e565b1;
--tc-badge: black;
/* system icons | --ic-[background type]-[priority]: value */ /* system icons | --ic-[background type]-[priority]: value */
--ic-surface-normal: rgba(255, 255, 255, 68%); --ic-surface-normal: rgba(255, 255, 255, 68%);