From 429d88834a20742ff2682c81f374ad3fcdb4f3e4 Mon Sep 17 00:00:00 2001
From: Marcus <marcustyphoon@gmail.com>
Date: Sun, 8 Sep 2024 19:02:52 -0700
Subject: [PATCH] chore: replace mui system props with sx

---
 src/components/BuildPage.jsx                  |  2 +-
 src/components/GearOptimizer.jsx              |  6 ++--
 .../CircularProgressWithLabel.jsx             | 20 +++++++------
 src/components/baseComponents/Layout.jsx      |  2 +-
 src/components/baseComponents/Section.jsx     |  2 +-
 src/components/nav/NavAccordion.jsx           |  2 +-
 src/components/nav/NavBar.jsx                 | 10 +++----
 src/components/sections/affixes/Affixes.jsx   |  8 ++---
 src/components/sections/boss/Boss.jsx         | 30 +++++++++++--------
 src/components/sections/buffs/Buffs.jsx       |  6 ++--
 src/components/sections/controls/Controls.jsx |  8 ++---
 .../distribution/DamageDistribution.jsx       | 15 ++++++----
 .../sections/extras/ExtraSelection.jsx        | 10 +++----
 .../sections/extras/ModalContent.jsx          |  4 +--
 .../sections/forcedslots/ForcedSlots.jsx      |  7 ++++-
 .../sections/infusions/InfusionHelper.jsx     |  4 +--
 .../sections/infusions/Infusions.jsx          | 10 +++++--
 .../sections/priorities/Priorities.jsx        |  2 +-
 .../BuildShareModal/BuildShareModal.jsx       |  6 ++--
 .../results/BuildShareModal/ModalContent.jsx  |  8 ++---
 .../sections/results/table/ResultTable.jsx    |  4 +--
 src/components/sections/skills/Skills.jsx     |  4 +--
 src/components/sections/traits/Traits.jsx     |  8 ++---
 src/pages/build/index.jsx                     |  4 +--
 src/pages/index/index.jsx                     |  9 ++++--
 25 files changed, 107 insertions(+), 84 deletions(-)

diff --git a/src/components/BuildPage.jsx b/src/components/BuildPage.jsx
index d9fb32812..75e4eebb8 100644
--- a/src/components/BuildPage.jsx
+++ b/src/components/BuildPage.jsx
@@ -74,7 +74,7 @@ const BuildPage = () => {
   // eslint-disable-next-line react/no-unstable-nested-components
   function Traits({ id, selected: selectedTraits }) {
     return (
-      <Box display="flex" mb={1}>
+      <Box sx={{ display: 'flex', mb: 1 }}>
         <Paper elevation={0} className={classes.traitlineRoot}>
           <Typography variant="body1" className={classes.traitlineText}>
             {traitLookup[id]}
diff --git a/src/components/GearOptimizer.jsx b/src/components/GearOptimizer.jsx
index 3e7d7c945..dd5be0931 100644
--- a/src/components/GearOptimizer.jsx
+++ b/src/components/GearOptimizer.jsx
@@ -41,7 +41,7 @@ const GearOptimizer = () => {
       <NavBar />
       <Box>
         {profession === '' && (
-          <Typography mb={1}>
+          <Typography sx={{ mb: 1 }}>
             <ExpandLessIcon />
             <i>{expertMode ? classOrBuildText : classText}</i> <ExpandLessIcon />
           </Typography>
@@ -95,9 +95,9 @@ const GearOptimizer = () => {
           <Controls />
 
           <ResultTable />
-          <Box m={3} />
+          <Box sx={{ m: 3 }} />
           <ResultDetails />
-          <Box m={3} />
+          <Box sx={{ m: 3 }} />
 
           <SharingSection />
         </div>
diff --git a/src/components/baseComponents/CircularProgressWithLabel.jsx b/src/components/baseComponents/CircularProgressWithLabel.jsx
index 58c06b16f..0e9b2c3ca 100644
--- a/src/components/baseComponents/CircularProgressWithLabel.jsx
+++ b/src/components/baseComponents/CircularProgressWithLabel.jsx
@@ -5,17 +5,19 @@ import Typography from '@mui/material/Typography';
 function CircularProgressWithLabel(props) {
   const { value } = props;
   return (
-    <Box position="relative" display="inline-flex">
+    <Box sx={{ position: 'relative', display: 'inline-flex' }}>
       <CircularProgress variant="determinate" {...props} />
       <Box
-        top={0}
-        left={0}
-        bottom={0}
-        right={0}
-        position="absolute"
-        display="flex"
-        alignItems="center"
-        justifyContent="center"
+        sx={{
+          top: 0,
+          left: 0,
+          bottom: 0,
+          right: 0,
+          position: 'absolute',
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+        }}
       >
         <Typography variant="caption" color="textSecondary">{`${Math.round(value)}%`}</Typography>
       </Box>
diff --git a/src/components/baseComponents/Layout.jsx b/src/components/baseComponents/Layout.jsx
index 1c5cf5e42..87e340354 100644
--- a/src/components/baseComponents/Layout.jsx
+++ b/src/components/baseComponents/Layout.jsx
@@ -2,7 +2,7 @@ import { Box, Container } from '@mui/material';
 
 const Layout = ({ children, ContainerProps, disableContainer = false }) =>
   disableContainer ? (
-    <Box p={2}>{children}</Box>
+    <Box sx={{ p: 2 }}>{children}</Box>
   ) : (
     <Container disableGutters maxWidth="lg" {...ContainerProps}>
       <Box
diff --git a/src/components/baseComponents/Section.jsx b/src/components/baseComponents/Section.jsx
index f863ed3de..d5ee63fea 100644
--- a/src/components/baseComponents/Section.jsx
+++ b/src/components/baseComponents/Section.jsx
@@ -60,7 +60,7 @@ const SectionInfo = ({ title, children }) => {
 // first disables the delimiting line above!
 const Section = ({ first, title, helpText, extraInfo, content }) => {
   return (
-    <Grid item container spacing={2} mb={2} sx={{ borderColor: 'primary.main' }}>
+    <Grid item container spacing={2} sx={{ mb: 2, borderColor: 'primary.main' }}>
       {!first && (
         <Grid item xs={12}>
           <Divider />
diff --git a/src/components/nav/NavAccordion.jsx b/src/components/nav/NavAccordion.jsx
index 027294652..19b0e736f 100644
--- a/src/components/nav/NavAccordion.jsx
+++ b/src/components/nav/NavAccordion.jsx
@@ -67,7 +67,7 @@ export default function NavAccordion({ handleTemplateSelect }) {
       </MuiAccordionSummary>
       <MuiAccordionDetails classes={{ root: classes.accordionDetailsRoot }}>
         {prof.builds.map((build) => (
-          <Box mb={1} key={`templateBuildMobile_${build.name}`}>
+          <Box key={`templateBuildMobile_${build.name}`} sx={{ mb: 1 }}>
             <Chip
               variant="outlined"
               label={<Profession name={build.specialization} text={build.name} disableLink />}
diff --git a/src/components/nav/NavBar.jsx b/src/components/nav/NavBar.jsx
index 258f31bae..f3b5d4621 100644
--- a/src/components/nav/NavBar.jsx
+++ b/src/components/nav/NavBar.jsx
@@ -111,8 +111,8 @@ const Navbar = () => {
 
   const stickyRight = () => {
     return (
-      <Box display="flex" alignItems="center" gap={1}>
-        <Box display="flex" flexDirection="column" alignItems="center">
+      <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
+        <Box sx={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
           <Tooltip content={`${t('Selected Game Mode')}: ${selectedGameModeText}`}>
             <IconButton size="small" onClick={handleModeCycle}>
               <img style={{ width: '40px' }} src={gameModeImage} alt={selectedGameModeText} />
@@ -151,7 +151,7 @@ const Navbar = () => {
 
     return (
       <Toolbar>
-        <Box flexGrow={1}>
+        <Box sx={{ flexGrow: 1 }}>
           <IconButton
             {...{
               edge: 'start',
@@ -219,7 +219,7 @@ const Navbar = () => {
   ];
   const displayDesktop = () => (
     <Toolbar>
-      <Box flexGrow={1}>
+      <Box sx={{ flexGrow: 1 }}>
         {PROFESSIONS.map((prof, index) => (
           <React.Fragment key={prof}>
             <Button
@@ -272,7 +272,7 @@ const Navbar = () => {
       </Box>
 
       {showSelectedTemplate && (selectedSpecialization || selectedTemplateName) && (
-        <Box flexGrow={1}>
+        <Box sx={{ flexGrow: 1 }}>
           <Typography>
             <Trans>Selected</Trans>:{' '}
           </Typography>
diff --git a/src/components/sections/affixes/Affixes.jsx b/src/components/sections/affixes/Affixes.jsx
index 43a4ba890..d60e82566 100644
--- a/src/components/sections/affixes/Affixes.jsx
+++ b/src/components/sections/affixes/Affixes.jsx
@@ -28,7 +28,7 @@ export default function Affixes() {
   return (
     <Stack spacing={7}>
       <Box>
-        <Typography fontWeight={700} mb={0.5}>
+        <Typography sx={{ fontWeight: 700, mb: 0.5 }}>
           {t('Desired Affixes')}{' '}
           <HelperIcon
             text={t(
@@ -47,7 +47,7 @@ export default function Affixes() {
       </Box>
       {exclusionsEnabled && (
         <Box>
-          <Typography fontWeight={700} mb={0.5}>
+          <Typography sx={{ fontWeight: 700, mb: 0.5 }}>
             {t('Per-Slot Exclusions')}{' '}
             <HelperIcon
               text={t(
@@ -61,7 +61,7 @@ export default function Affixes() {
       )}
       {exoticsEnabled && (
         <Box>
-          <Typography fontWeight={700} mb={0.5}>
+          <Typography sx={{ fontWeight: 700, mb: 0.5 }}>
             {t('Use exotic rarity')}{' '}
             <HelperIcon
               text={t('Allows you to use exotic rarity instead of ascended for any gear slot.')}
@@ -86,7 +86,7 @@ export default function Affixes() {
       )}
       {customSelected && (
         <Box>
-          <Typography fontWeight={700}>
+          <Typography sx={{ fontWeight: 700 }}>
             {t('Custom Affix Data')}{' '}
             <HelperIcon
               text={t('Specify any attributes to simulate with the "custom" affix type.')}
diff --git a/src/components/sections/boss/Boss.jsx b/src/components/sections/boss/Boss.jsx
index d2dfae567..faeccd56f 100644
--- a/src/components/sections/boss/Boss.jsx
+++ b/src/components/sections/boss/Boss.jsx
@@ -76,7 +76,7 @@ const Boss = () => {
 
   return (
     <>
-      <Box display="flex" flexWrap="wrap">
+      <Box sx={{ display: 'flex', flexWrap: 'wrap' }}>
         <Box sx={{ width: 195 }}>
           <AmountInput
             label={
@@ -93,11 +93,14 @@ const Boss = () => {
           />
         </Box>
         <Box
-          mx={3}
-          mb={4}
-          flexGrow={1}
-          alignSelf="center"
-          sx={{ minWidth: 200, md: { marginLeft: 2 } }}
+          sx={{
+            mx: 3,
+            mb: 4,
+            flexGrow: 1,
+            alignSelf: 'center',
+            minWidth: 200,
+            md: { marginLeft: 2 },
+          }}
         >
           <Slider
             value={movementUptime}
@@ -111,7 +114,7 @@ const Boss = () => {
           />
         </Box>
       </Box>
-      <Box display="flex" flexWrap="wrap">
+      <Box sx={{ display: 'flex', flexWrap: 'wrap' }}>
         <Box sx={{ width: 195 }}>
           <AmountInput
             label={
@@ -133,11 +136,14 @@ const Boss = () => {
           />
         </Box>
         <Box
-          mx={3}
-          mb={4}
-          flexGrow={1}
-          alignSelf="center"
-          sx={{ minWidth: 200, md: { marginLeft: 2 } }}
+          sx={{
+            mx: 3,
+            mb: 4,
+            flexGrow: 1,
+            alignSelf: 'center',
+            minWidth: 200,
+            md: { marginLeft: 2 },
+          }}
         >
           <Slider
             value={attackRate}
diff --git a/src/components/sections/buffs/Buffs.jsx b/src/components/sections/buffs/Buffs.jsx
index bf1a21b44..ed5a6ad2a 100644
--- a/src/components/sections/buffs/Buffs.jsx
+++ b/src/components/sections/buffs/Buffs.jsx
@@ -99,8 +99,8 @@ const Buffs = () => {
                   );
 
                 return (
-                  <Box justifyContent="space-between" display="flex" key={id}>
-                    <Box display="flex">
+                  <Box key={id} sx={{ justifyContent: 'space-between', display: 'flex' }}>
+                    <Box sx={{ display: 'flex' }}>
                       <CheckboxComponent
                         key={id}
                         value={id}
@@ -110,7 +110,7 @@ const Buffs = () => {
                       />
                     </Box>
                     {amountData ? (
-                      <Box display="flex">
+                      <Box sx={{ display: 'flex' }}>
                         <AmountInput
                           placeholder={amountData.default}
                           endLabel={amountData.label}
diff --git a/src/components/sections/controls/Controls.jsx b/src/components/sections/controls/Controls.jsx
index 5d83dd9ea..2419d9370 100644
--- a/src/components/sections/controls/Controls.jsx
+++ b/src/components/sections/controls/Controls.jsx
@@ -113,7 +113,7 @@ const ControlsBox = () => {
   }
 
   return (
-    <Box display="flex" flexWrap="wrap">
+    <Box sx={{ display: 'flex', flexWrap: 'wrap' }}>
       <Box>
         <Button
           variant="outlined"
@@ -147,7 +147,7 @@ const ControlsBox = () => {
           </Typography>
         </Button>
       </Box>
-      <Box flexGrow={1}>
+      <Box sx={{ flexGrow: 1 }}>
         {status === STOPPED ? (
           <Button
             variant="outlined"
@@ -163,12 +163,12 @@ const ControlsBox = () => {
         ) : null}
       </Box>
 
-      <Box alignSelf="center" display="flex" m={1} maxWidth={300}>
+      <Box sx={{ alignSelf: 'center', display: 'flex', m: 1, maxWidth: 300 }}>
         <Typography variant="caption" className={classes.errorText}>
           {error}
         </Typography>
       </Box>
-      <Box alignSelf="center">
+      <Box sx={{ alignSelf: 'center' }}>
         <Chip
           sx={{ marginRight: 1 }}
           label={
diff --git a/src/components/sections/distribution/DamageDistribution.jsx b/src/components/sections/distribution/DamageDistribution.jsx
index d7d8bee52..9896480dd 100644
--- a/src/components/sections/distribution/DamageDistribution.jsx
+++ b/src/components/sections/distribution/DamageDistribution.jsx
@@ -78,7 +78,7 @@ const DamageDistribution = () => {
       if (!alternativeDamageEnabled) style = { opacity: 0.5 };
     }
     return (
-      <Box display="flex" flexWrap="wrap" key={`distriNew_${dist.name}`} style={style}>
+      <Box key={`distriNew_${dist.name}`} style={style} sx={{ display: 'flex', flexWrap: 'wrap' }}>
         <Box>
           <FormControl mb={1} className={classes.textbox} variant="standard">
             <InputLabel htmlFor={`input-with-icon-adornment-${index}`}>
@@ -118,11 +118,14 @@ const DamageDistribution = () => {
           </FormControl>
         </Box>
         <Box
-          flexGrow={1}
-          alignSelf="center"
-          mx={3}
-          mb={4}
-          sx={{ minWidth: 200, md: { marginLeft: 2 } }}
+          sx={{
+            flexGrow: 1,
+            alignSelf: 'center',
+            mx: 3,
+            mb: 4,
+            minWidth: 200,
+            md: { marginLeft: 2 },
+          }}
         >
           <Slider
             value={distributionNew[dist.name]}
diff --git a/src/components/sections/extras/ExtraSelection.jsx b/src/components/sections/extras/ExtraSelection.jsx
index 3f2e857d5..96da4bca1 100644
--- a/src/components/sections/extras/ExtraSelection.jsx
+++ b/src/components/sections/extras/ExtraSelection.jsx
@@ -162,8 +162,8 @@ export default function ExtraSelection(props) {
 
   return (
     <APILanguageProvider value={extrasOverrideLanguage}>
-      <Box display="flex" alignItems="flex-end" mb={1}>
-        <Typography component="span" flexGrow={1}>
+      <Box sx={{ display: 'flex', alignItems: 'flex-end', mb: 1 }}>
+        <Typography component="span" sx={{ flexGrow: 1 }}>
           {label}
         </Typography>
         <Button variant="contained" size="small" startIcon={<AddIcon />} onClick={handleOpen}>
@@ -189,7 +189,7 @@ export default function ExtraSelection(props) {
               >
                 <ListItemText
                   primary={
-                    <Box display="flex">
+                    <Box sx={{ display: 'flex' }}>
                       <Box>
                         {displayIds ? (
                           joinWith(
@@ -234,7 +234,7 @@ export default function ExtraSelection(props) {
                         </Typography>
                       )}
 
-                      <Box flexGrow={1} />
+                      <Box sx={{ flexGrow: 1 }} />
                       {amountData && (
                         <AmountInput
                           placeholder={amountData.default}
@@ -269,7 +269,7 @@ export default function ExtraSelection(props) {
         PaperProps={{ elevation: 4 }}
       >
         <DialogTitle id="scroll-dialog-title" display="flex">
-          <Typography flexGrow={1} component="span" alignSelf="center">
+          <Typography component="span" sx={{ flexGrow: 1, alignSelf: 'center' }}>
             {label}
           </Typography>
           <IconButton edge="start" color="inherit" onClick={handleClose} aria-label="close">
diff --git a/src/components/sections/extras/ModalContent.jsx b/src/components/sections/extras/ModalContent.jsx
index 637c95197..abdbb3358 100644
--- a/src/components/sections/extras/ModalContent.jsx
+++ b/src/components/sections/extras/ModalContent.jsx
@@ -194,8 +194,8 @@ function ModalContent(props) {
           ),
         }}
       />
-      <Box display="flex">
-        <Box flexGrow={1} />
+      <Box sx={{ display: 'flex' }}>
+        <Box sx={{ flexGrow: 1 }} />
         <Button
           sx={{ textTransform: 'unset' }}
           startIcon={<SelectAllIcon />}
diff --git a/src/components/sections/forcedslots/ForcedSlots.jsx b/src/components/sections/forcedslots/ForcedSlots.jsx
index a92cd1a4d..594456756 100644
--- a/src/components/sections/forcedslots/ForcedSlots.jsx
+++ b/src/components/sections/forcedslots/ForcedSlots.jsx
@@ -22,7 +22,12 @@ const ForcedSlots = () => {
   };
 
   return (
-    <Grid container direction="row" justifyContent="flex-start" alignItems="flex-start" spacing={1}>
+    <Grid
+      container
+      direction="row"
+      spacing={1}
+      sx={{ justifyContent: 'flex-start', alignItems: 'flex-start' }}
+    >
       {SLOTS.map((slot, index) => (
         // eslint-disable-next-line react/no-array-index-key
         <Grid item xs={6} sm={4} md={2} key={index}>
diff --git a/src/components/sections/infusions/InfusionHelper.jsx b/src/components/sections/infusions/InfusionHelper.jsx
index de9df6488..53a62ec09 100644
--- a/src/components/sections/infusions/InfusionHelper.jsx
+++ b/src/components/sections/infusions/InfusionHelper.jsx
@@ -208,7 +208,7 @@ const InfusionHelper = () => {
           }
           onChange={(e) => dispatch(changeSingularity(e.target.checked))}
         />
-        <Box mb={2}>
+        <Box sx={{ mb: 2 }}>
           <CheckboxComponent
             value={tear}
             checked={tear}
@@ -265,7 +265,7 @@ const InfusionHelper = () => {
           onChange={handleSlotsChange}
           aria-labelledby="total-infusion-slots"
         />
-        <Box mb={2}>
+        <Box sx={{ mb: 2 }}>
           <CheckboxComponent
             value={freeWvW}
             checked={freeWvW}
diff --git a/src/components/sections/infusions/Infusions.jsx b/src/components/sections/infusions/Infusions.jsx
index f1ebdf3b0..6269c3d5e 100644
--- a/src/components/sections/infusions/Infusions.jsx
+++ b/src/components/sections/infusions/Infusions.jsx
@@ -111,7 +111,12 @@ const Infusions = () => {
   return (
     <Grid container spacing={4}>
       {gameMode === 'fractals' && (
-        <Grid container item spacing={2} alignItems="center" justifyContent="flex-start">
+        <Grid
+          container
+          item
+          spacing={2}
+          sx={{ alignItems: 'center', justifyContent: 'flex-start' }}
+        >
           <Grid item xs={12} sm>
             <CheckboxComponent
               value={omnipotion}
@@ -153,9 +158,8 @@ const Infusions = () => {
         container
         item
         spacing={2}
-        justifyContent="flex-start"
         direction="row"
-        alignItems="center"
+        sx={{ justifyContent: 'flex-start', alignItems: 'center' }}
       >
         <Grid item xs={12}>
           {input('# Stat Infusions', 'maxInfusions', maxInfusions)}
diff --git a/src/components/sections/priorities/Priorities.jsx b/src/components/sections/priorities/Priorities.jsx
index 3ed793a39..92a28b496 100644
--- a/src/components/sections/priorities/Priorities.jsx
+++ b/src/components/sections/priorities/Priorities.jsx
@@ -262,7 +262,7 @@ const Priorities = () => {
 
   return (
     <>
-      <Grid container m={1}>
+      <Grid container sx={{ m: 1 }}>
         {optimizeForControl}
         {weaponTypeControl}
       </Grid>
diff --git a/src/components/sections/results/BuildShareModal/BuildShareModal.jsx b/src/components/sections/results/BuildShareModal/BuildShareModal.jsx
index 79bc7aa75..45d8e87aa 100644
--- a/src/components/sections/results/BuildShareModal/BuildShareModal.jsx
+++ b/src/components/sections/results/BuildShareModal/BuildShareModal.jsx
@@ -73,14 +73,14 @@ const BuildShareModal = ({ children, title, character }) => {
       >
         <Fade in={open}>
           <div className={classes.paper}>
-            <Box display="flex" justifyContent="space-between" mb={1}>
+            <Box sx={{ display: 'flex', justifyContent: 'space-between', mb: 1 }}>
               {title && (
-                <Box alignSelf="center">
+                <Box sx={{ alignSelf: 'center' }}>
                   <Typography>{title}</Typography>
                 </Box>
               )}
 
-              <Box alignSelf="center">
+              <Box sx={{ alignSelf: 'center' }}>
                 <IconButton onClick={handleClose}>
                   <CloseIcon className={classes.closeIcon} />
                 </IconButton>
diff --git a/src/components/sections/results/BuildShareModal/ModalContent.jsx b/src/components/sections/results/BuildShareModal/ModalContent.jsx
index 836d0037d..d038b202c 100644
--- a/src/components/sections/results/BuildShareModal/ModalContent.jsx
+++ b/src/components/sections/results/BuildShareModal/ModalContent.jsx
@@ -73,7 +73,7 @@ export default function ModalContent({ character, buttons }) {
   return (
     <>
       <Typography>{t('Select weapons:')}</Typography>
-      <Box mb={1}>
+      <Box sx={{ mb: 1 }}>
         <Select
           variant="standard"
           value={mainhand1}
@@ -110,10 +110,10 @@ export default function ModalContent({ character, buttons }) {
           </Select>
         )}
       </Box>
-      <Box alignSelf="center">
+      <Box sx={{ alignSelf: 'center' }}>
         <Icon name="WeaponSwap" />
       </Box>
-      <Box mb={2}>
+      <Box sx={{ mb: 2 }}>
         <Select
           variant="standard"
           value={mainhand2}
@@ -153,7 +153,7 @@ export default function ModalContent({ character, buttons }) {
 
       <Typography>{t('Select skills:')}</Typography>
 
-      <Box mb={2}>
+      <Box sx={{ mb: 2 }}>
         {isLoading && <Progress />}
         {state.error && <Error name="ERROR" message={state.error} />}
         {state.skills && (
diff --git a/src/components/sections/results/table/ResultTable.jsx b/src/components/sections/results/table/ResultTable.jsx
index 2f4b4ca7b..cae2c25dc 100644
--- a/src/components/sections/results/table/ResultTable.jsx
+++ b/src/components/sections/results/table/ResultTable.jsx
@@ -163,7 +163,7 @@ const StickyHeadTable = () => {
 
   return (
     <>
-      <Box boxShadow={8} mb={3}>
+      <Box sx={{ boxShadow: 8, mb: 3 }}>
         <TableContainer
           className={classNames(
             classes.container,
@@ -217,7 +217,7 @@ const StickyHeadTable = () => {
       {saved.length ? (
         <>
           <TextDivider text={t('Saved Results')} />
-          <Box boxShadow={8} mb={3}>
+          <Box sx={{ boxShadow: 8, mb: 3 }}>
             <TableContainer
               className={classNames(
                 classes.container,
diff --git a/src/components/sections/skills/Skills.jsx b/src/components/sections/skills/Skills.jsx
index 8fbfe7897..d889e7523 100644
--- a/src/components/sections/skills/Skills.jsx
+++ b/src/components/sections/skills/Skills.jsx
@@ -29,13 +29,13 @@ const Skills = ({ data }) => {
     const enabled = Boolean(skillState[id]);
     const amount = skillState[id]?.amount || '';
     return (
-      <Box key={id} justifyContent="space-between" display="flex" maxWidth="648px">
+      <Box key={id} sx={{ justifyContent: 'space-between', display: 'flex', maxWidth: '648px' }}>
         <Box>
           <CheckboxComponent
             value={id}
             checked={enabled}
             label={
-              <Box display="flex">
+              <Box sx={{ display: 'flex' }}>
                 {gw2id && <Skill id={gw2id} disableLink />}
                 {subText && (
                   <Typography sx={{ fontWeight: 200, marginLeft: 1 }}>
diff --git a/src/components/sections/traits/Traits.jsx b/src/components/sections/traits/Traits.jsx
index 109b26b87..4b8dcf74c 100644
--- a/src/components/sections/traits/Traits.jsx
+++ b/src/components/sections/traits/Traits.jsx
@@ -152,9 +152,7 @@ const Traits = () => {
               <Box
                 key={id}
                 style={visible ? {} : hiddenCss}
-                justifyContent="space-between"
-                display="flex"
-                maxWidth="648px"
+                sx={{ justifyContent: 'space-between', display: 'flex', maxWidth: '648px' }}
               >
                 <Box>
                   <CheckboxComponent
@@ -194,7 +192,7 @@ const Traits = () => {
           })
         }
         {note ? (
-          <Box sx={{ p: 1 }} maxWidth="648px">
+          <Box sx={{ maxWidth: '648px', p: 1 }}>
             <Info icon={<WarningAmberIcon />}>
               {
                 // i18next-extract-mark-context-next-line {{traitNote}}
@@ -214,7 +212,7 @@ const Traits = () => {
   return (
     <>
       {classNote ? (
-        <Box sx={{ p: 1 }} maxWidth="648px">
+        <Box sx={{ maxWidth: '648px', p: 1 }}>
           <Info icon={<WarningAmberIcon />}>
             {
               // i18next-extract-mark-context-next-line {{traitNote}}
diff --git a/src/pages/build/index.jsx b/src/pages/build/index.jsx
index e6f76fbc8..d702913c1 100644
--- a/src/pages/build/index.jsx
+++ b/src/pages/build/index.jsx
@@ -19,11 +19,11 @@ const IndexPage = () => {
     <APILanguageProvider value={language}>
       <BackgroundImage gameMode={gameMode} />
       <Layout>
-        <Box display="flex" gap={1} alignItems="center" pb={2}>
+        <Box sx={{ display: 'flex', gap: 1, alignItems: 'center', pb: 2 }}>
           <Typography variant="h3">
             <Trans>Shared Build</Trans>
           </Typography>
-          <Box flexGrow={1}>
+          <Box sx={{ flexGrow: 1 }}>
             <Chip label={GAME_MODES(t).find((mode) => mode.value === gameMode)?.label} />
           </Box>
 
diff --git a/src/pages/index/index.jsx b/src/pages/index/index.jsx
index 41fd4ccb0..af239a1a5 100644
--- a/src/pages/index/index.jsx
+++ b/src/pages/index/index.jsx
@@ -35,15 +35,20 @@ const IndexPage = () => {
     <Trans>
       The gear optimizer is still being developed! Please report issues or suggest improvements in
       the Discretize{' '}
-      <Link href="https://discord.gg/Qdt7nFY" color="textPrimary" target="_blank" rel="noopener">
+      <Link
+        href="https://discord.gg/Qdt7nFY"
+        target="_blank"
+        rel="noopener"
+        sx={{ color: 'textPrimary' }}
+      >
         Discord
       </Link>{' '}
       or on{' '}
       <Link
         href="https://github.com/discretize/discretize-gear-optimizer"
-        color="textPrimary"
         target="_blank"
         rel="noopener"
+        sx={{ color: 'textPrimary' }}
       >
         <GitHubIcon fontSize="small" /> Github
       </Link>