FumeNodes/ox_lib
1
0
Fork 0
mirror of https://github.com/CommunityOx/ox_lib.git synced 2026-08-18 15:36:02 +01:00
Code Issues Packages Projects Releases Wiki Activity

fix(web/menu): fix misalignment on the list buttons in the menu

Browse Source
This commit is contained in:
Luke
2022-09-09 13:04:31 +02:00
parent ff7a0b6dea
commit 5d4eff8cd3
1 changed files with 7 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
web/src/features/menu/list/ListItem.tsx
View File

@@ -26,26 +26,21 @@ const ListItem = forwardRef<Array<HTMLDivElement | null>, Props>(({ item, index,
return (ref.current = [...ref.current, element]); return (ref.current = [...ref.current, element]);
}} }}
> >
<Flex alignItems="center" height="100%"> <Flex alignItems="center" height="100%" gap="20px">
{item.icon && ( {item.icon && (
<FontAwesomeIcon <Box>
icon={item.icon} <FontAwesomeIcon icon={item.icon} fontSize={24} color="#909296" fixedWidth />
fontSize={24} </Box>
color="#909296"
fixedWidth
style={{ marginRight: 20, marginLeft: 5 }}
/>
)} )}
{Array.isArray(item.values) ? ( {Array.isArray(item.values) ? (
<Flex justifyContent="center" alignItems="center" width="100%"> <Flex alignItems="center" justifyContent="space-between" w="100%">
<Stack spacing={1}> <Stack spacing={1} justifyContent="space-between">
<Text color="#909296" textTransform="uppercase" fontSize={12} verticalAlign="middle"> <Text color="#909296" textTransform="uppercase" fontSize={12} verticalAlign="middle">
{item.label} {item.label}
</Text> </Text>
<Text>{item.values[scrollIndex]}</Text> <Text>{item.values[scrollIndex]}</Text>
</Stack> </Stack>
<Spacer /> <Stack direction="row" spacing="sm" pr={3} justifyContent="center" alignItems="center">
<Stack direction="row" spacing="sm" mr={3} justifyContent="center" alignItems="center">
<FontAwesomeIcon icon="chevron-left" fontSize={16} color="#909296" /> <FontAwesomeIcon icon="chevron-left" fontSize={16} color="#909296" />
<Text color="#909296" textTransform="uppercase" fontSize={14}> <Text color="#909296" textTransform="uppercase" fontSize={14}>
{scrollIndex + 1}/{item.values.length} {scrollIndex + 1}/{item.values.length}