FumeNodes/ox_lib
1
0
Fork 0
mirror of https://github.com/CommunityOx/ox_lib.git synced 2026-08-17 06:56:03 +01:00
Code Issues Packages Projects Releases Wiki Activity

refactor(web/progress): improve progress circle alignment

Browse Source 
apparently the circle progress wasn't properly aligned this whole time
This commit is contained in:
Luke
2023-01-17 22:12:47 +01:00
parent b3c84d94c4
commit e298b13607
1 changed files with 15 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
web/src/features/progress/CircleProgressbar.tsx
View File

@@ -48,6 +48,10 @@ const useStyles = createStyles((theme, params: { position: 'middle' | 'bottom';
textAlign: 'center',
textShadow: theme.shadows.sm,
color: theme.colors.gray[3],
height: 25,
},
wrapper: {
marginTop: params.position === 'middle' ? 25 : undefined,
},
}));
@@ -93,15 +97,17 @@ const CircleProgressbar: React.FC = () => {
<>
<Stack spacing={0} className={classes.container}>
<ScaleFade visible={visible}>
<RingProgress
size={90}
thickness={7}
sections={[{ value: 0, color: theme.primaryColor }]}
onAnimationEnd={progressComplete}
className={classes.progress}
label={<Text className={classes.value}>{value}%</Text>}
/>
{label && <Text className={classes.label}>{label}</Text>}
<Stack spacing={0} align="center" className={classes.wrapper}>
<RingProgress
size={90}
thickness={7}
sections={[{ value: 0, color: theme.primaryColor }]}
onAnimationEnd={progressComplete}
className={classes.progress}
label={<Text className={classes.value}>{value}%</Text>}
/>
{label && <Text className={classes.label}>{label}</Text>}
</Stack>
</ScaleFade>
</Stack>
</>