status-im
/
nimbus-gui
mirror of https://github.com/status-im/nimbus-gui.git
2
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Use IconButtomWithDot with every icon

This commit is contained in:
Hristo Nedelkov 2023-09-26 12:46:09 +03:00
parent b97e205895
commit 5f7a2d6885
2 changed files with 15 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/pages/Dashboard/IconButtonWithDot.tsx
View File

@ -6,12 +6,14 @@ type IconButtonWithDotProps = {
iconEl: any; iconEl: any;
variant: 'ghost' | 'outline'; variant: 'ghost' | 'outline';
isDotOn: boolean; isDotOn: boolean;
selected?: boolean;
disabled?: boolean;
}; };
const IconButtonWithDot = ({ iconEl, variant, isDotOn }: IconButtonWithDotProps) => { const IconButtonWithDot = ({ iconEl, variant, isDotOn, selected, disabled }: IconButtonWithDotProps) => {
return ( return (
<Stack style={{ position: 'relative', display: 'inline-block' }} > <Stack style={{ position: 'relative', display: 'inline-block' }} >
<IconButton icon={iconEl} variant={variant} /> <IconButton icon={iconEl} variant={variant} selected={selected} disabled={disabled} />
{isDotOn && ( {isDotOn && (
<Stack style={{ <Stack style={{
position: 'absolute', position: 'absolute',

36
src/pages/Dashboard/LeftSidebar.tsx
View File

@ -1,4 +1,3 @@
import { IconButton } from '@status-im/components'
import { import {
DashboardIcon, DashboardIcon,
SpeedIcon, SpeedIcon,
@ -8,9 +7,9 @@ import {
CommunitiesIcon, CommunitiesIcon,
ActivityCenterIcon, ActivityCenterIcon,
SettingsIcon, SettingsIcon,
} from '@status-im/icons' } from '@status-im/icons';
import { Stack, YStack } from 'tamagui' import { Stack, YStack } from 'tamagui';
import IconButtonWithDot from './IconButtonWithDot' import IconButtonWithDot from './IconButtonWithDot';
const LeftSidebar = () => { const LeftSidebar = () => {
return ( return (
@ -25,29 +24,16 @@ const LeftSidebar = () => {
border: '1px solid #F0F2F5', border: '1px solid #F0F2F5',
}} }}
> >
<IconButton icon={<DashboardIcon size={20} />} variant="ghost" selected /> <IconButtonWithDot iconEl={<DashboardIcon size={20} />} variant="ghost" isDotOn={false} selected={true} />
<IconButton icon={<SpeedIcon size={20} />} variant="ghost" /> <IconButtonWithDot iconEl={<SpeedIcon size={20} />} variant="ghost" isDotOn={false} />
<IconButton icon={<ChartIcon size={20} />} variant="outline" disabled /> <IconButtonWithDot iconEl={<ChartIcon size={20} />} variant="outline" isDotOn={false} disabled={true} />
<IconButton icon={<HeartIcon size={20} />} variant="ghost" /> <IconButtonWithDot iconEl={<HeartIcon size={20} />} variant="ghost" isDotOn={false} />
<IconButton icon={<CodeBlockIcon size={20} />} variant="ghost" /> <IconButtonWithDot iconEl={<CodeBlockIcon size={20} />} variant="ghost" isDotOn={false} />
<IconButton icon={<CommunitiesIcon size={20} />} variant="ghost" /> <IconButtonWithDot iconEl={<CommunitiesIcon size={20} />} variant="ghost" isDotOn={false} />
<Stack style={{ position: 'relative', display: 'inline-block' }}>
<IconButton icon={<ActivityCenterIcon size={20} />} variant="ghost" />
<Stack style={{
position: 'absolute',
right: 7,
top: 5,
width: '9px',
height: '9px',
borderRadius: '50%',
backgroundColor: '#1992D7',
border: '1.5px solid #fff'
}} />
</Stack>
<IconButtonWithDot iconEl={<ActivityCenterIcon size={20} />} variant="ghost" isDotOn={true} /> <IconButtonWithDot iconEl={<ActivityCenterIcon size={20} />} variant="ghost" isDotOn={true} />
<IconButton icon={<SettingsIcon size={20} />} variant="ghost" /> <IconButtonWithDot iconEl={<SettingsIcon size={20} />} variant="ghost" isDotOn={false} />
</YStack> </YStack>
) )
} }
export default LeftSidebar export default LeftSidebar;