From 5d4eff8cd38ccc45a02d1074cc1a2373d8f4095d Mon Sep 17 00:00:00 2001
From: Luke <sabolukas03@gmail.com>
Date: Fri, 9 Sep 2022 13:04:31 +0200
Subject: [PATCH] fix(web/menu): fix misalignment on the list buttons in the
 menu

---
 web/src/features/menu/list/ListItem.tsx | 19 +++++++------------
 1 file changed, 7 insertions(+), 12 deletions(-)

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