refactor(web/context): move inline styling to createStyles

web/src/features/menu/context/ContextMenu.tsx

@@ -1,5 +1,5 @@
 import { useNuiEvent } from '../../../hooks/useNuiEvent';
-import { Box, Stack, Text, Flex } from '@mantine/core';
+import { Box, Stack, Text, Flex, createStyles } from '@mantine/core';
 import { useEffect, useState } from 'react';
 import { ContextMenuProps } from '../../../typings';
 import ContextButton from './components/ContextButton';
@@ -12,7 +12,41 @@ const openMenu = (id: string | undefined) => {
   fetchNui<ContextMenuProps>('openContext', { id: id, back: true });
 };
 
+const useStyles = createStyles((theme) => ({
+  container: {
+    position: 'absolute',
+    top: '15%',
+    right: '25%',
+    width: 320,
+    height: 580,
+  },
+  header: {
+    justifyContent: 'center',
+    alignItems: 'center',
+    marginBottom: 10,
+    gap: 6,
+  },
+  titleContainer: {
+    borderRadius: 4,
+    flex: '1 85%',
+    backgroundColor: theme.colors.dark[6],
+  },
+  titleText: {
+    color: theme.colors.dark[0],
+    padding: 6,
+    textAlign: 'center',
+  },
+  buttonsContainer: {
+    height: 560,
+    overflowY: 'scroll',
+  },
+  buttonsFlexWrapper: {
+    gap: 3,
+  },
+}));
+
 const ContextMenu: React.FC = () => {
+  const { classes } = useStyles();
   const [visible, setVisible] = useState(false);
   const [contextMenu, setContextMenu] = useState<ContextMenuProps>({
     title: '',
@@ -50,21 +84,21 @@ const ContextMenu: React.FC = () => {
   });
 
   return (
-    <Box sx={{ position: 'absolute', top: '15%', right: '25%' }} w={320} h={580}>
+    <Box className={classes.container}>
       <ScaleFade visible={visible}>
-        <Flex justify="center" align="center" mb={10} gap={6}>
+        <Flex className={classes.header}>
           {contextMenu.menu && (
             <HeaderButton icon="chevron-left" iconSize={16} handleClick={() => openMenu(contextMenu.menu)} />
           )}
-          <Box sx={{ borderRadius: 4, flex: '1 85%' }} bg="dark.6">
+          <Box className={classes.titleContainer}>
-            <Text color="dark.0" p={6} align="center">
+            <Text className={classes.titleText}>
               <ReactMarkdown>{contextMenu.title}</ReactMarkdown>
             </Text>
           </Box>
           <HeaderButton icon="xmark" canClose={contextMenu.canClose} iconSize={18} handleClick={closeContext} />
         </Flex>
-        <Box sx={{ height: 560, overflowY: 'scroll' }}>
+        <Box className={classes.buttonsContainer}>
-          <Stack spacing={3}>
+          <Stack className={classes.buttonsFlexWrapper}>
             {Object.entries(contextMenu.options).map((option, index) => (
               <ContextButton option={option} key={`context-item-${index}`} />
             ))}

web/src/features/menu/context/components/ContextButton.tsx

@@ -23,11 +23,17 @@ const useStyles = createStyles((theme, params: { disabled?: boolean }) => ({
     color: params.disabled ? theme.colors.dark[3] : theme.colors.dark[0],
     whiteSpace: 'pre-wrap',
   },
+  button: {
+    height: 'fit-content',
+    width: '100%',
+    padding: 10,
+  },
   iconImage: {
     maxWidth: '25px',
   },
   description: {
     color: params.disabled ? theme.colors.dark[3] : theme.colors.dark[2],
+    fontSize: 12,
   },
   dropdown: {
     padding: 10,
@@ -37,6 +43,29 @@ const useStyles = createStyles((theme, params: { disabled?: boolean }) => ({
     width: 'fit-content',
     border: 'none',
   },
+  buttonStack: {
+    gap: 4,
+    flex: '1',
+  },
+  buttonGroup: {
+    gap: 4,
+    flexWrap: 'nowrap',
+  },
+  buttonIconContainer: {
+    width: 25,
+    height: 25,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  buttonTitleText: {
+    overflowWrap: 'break-word',
+  },
+  buttonArrowContainer: {
+    justifyContent: 'center',
+    alignItems: 'center',
+    width: 25,
+    height: 25,
+  },
 }));
 
 const ContextButton: React.FC<{
@@ -58,16 +87,14 @@ const ContextButton: React.FC<{
             classNames={{ inner: classes.inner, label: classes.label }}
             onClick={() => (!button.disabled ? (button.menu ? openMenu(button.menu) : clickContext(buttonKey)) : null)}
             variant="default"
-            h="fit-content"
+            className={classes.button}
-            p={10}
-            fullWidth
             disabled={button.disabled}
           >
             <Group position="apart" w="100%" noWrap>
-              <Stack spacing={4} style={{ flex: '1' }}>
+              <Stack className={classes.buttonStack}>
-                <Group spacing={8} noWrap>
+                <Group className={classes.buttonGroup}>
                   {button?.icon && (
-                    <Stack w={25} h={25} justify="center" align="center">
+                    <Stack className={classes.buttonIconContainer}>
                       {typeof button.icon === 'string' && isIconUrl(button.icon) ? (
                         <img src={button.icon} className={classes.iconImage} alt="Missing img" />
                       ) : (
@@ -80,12 +107,12 @@ const ContextButton: React.FC<{
                       )}
                     </Stack>
                   )}
-                  <Text sx={{ overflowWrap: 'break-word' }}>
+                  <Text className={classes.buttonTitleText}>
                     <ReactMarkdown>{button.title || buttonKey}</ReactMarkdown>
                   </Text>
                 </Group>
                 {button.description && (
-                  <Text size={12} className={classes.description}>
+                  <Text className={classes.description}>
                     <ReactMarkdown>{button.description}</ReactMarkdown>
                   </Text>
                 )}
@@ -94,7 +121,7 @@ const ContextButton: React.FC<{
                 )}
               </Stack>
               {(button.menu || button.arrow) && button.arrow !== false && (
-                <Stack justify="center" w={25} h={25} align="center">
+                <Stack className={classes.buttonArrowContainer}>
                   <FontAwesomeIcon icon="chevron-right" fixedWidth />
                 </Stack>
               )}