chore: replace mui system props with sx

discretize · Sep 9, 2024 · 429d888 · 429d888
1 parent fe05034
commit 429d888
Show file tree

Hide file tree

Showing 25 changed files with 107 additions and 84 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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}