c243b6104c* update silver theme * update unread badge style to look more slim * update nav item style to look less sharp * fix type focus message input typo * decrease navigation drawer width to bring main chat layout to little more center * increase sidebar width to make it less congested * fix sidebar item style * decrease dark theme contrast * improve dark theme * revert sidebar width change * add join with address option in home context menu * match legacy theme with latest themes
36 lines
877 B
TypeScript
36 lines
877 B
TypeScript
import React, { CSSProperties, ReactNode } from 'react';
|
|
import { Box, Badge, toRem, Text } from 'folds';
|
|
import { millify } from '../../plugins/millify';
|
|
|
|
type UnreadBadgeProps = {
|
|
highlight?: boolean;
|
|
count: number;
|
|
};
|
|
const styles: CSSProperties = {
|
|
minWidth: toRem(16),
|
|
};
|
|
export function UnreadBadgeCenter({ children }: { children: ReactNode }) {
|
|
return (
|
|
<Box as="span" style={styles} shrink="No" alignItems="Center" justifyContent="Center">
|
|
{children}
|
|
</Box>
|
|
);
|
|
}
|
|
|
|
export function UnreadBadge({ highlight, count }: UnreadBadgeProps) {
|
|
return (
|
|
<Badge
|
|
variant={highlight ? 'Success' : 'Secondary'}
|
|
size={count > 0 ? '400' : '200'}
|
|
fill="Solid"
|
|
radii="Pill"
|
|
outlined={false}
|
|
>
|
|
{count > 0 && (
|
|
<Text as="span" size="L400">
|
|
{millify(count)}
|
|
</Text>
|
|
)}
|
|
</Badge>
|
|
);
|
|
}
|