style: a lot of style cleanups/normalizing

WatWowMap · Jan 11, 2024 · d9e8800 · d9e8800
1 parent 6585cd3
commit d9e8800
Show file tree

Hide file tree

Showing 14 changed files with 188 additions and 182 deletions.
diff --git a/src/assets/css/main.css b/src/assets/css/main.css
@@ -504,8 +504,7 @@ input[type='time']::-webkit-calendar-picker-indicator {
 .vgrid-item {
   display: grid;
   grid-template-columns: 1fr 1fr 1fr;
-  grid-template-rows: auto auto 20%;
-  min-height: 225px;
+  grid-template-rows: auto auto 10%;
 }
 
 .vgrid-icon {
@@ -530,6 +529,7 @@ input[type='time']::-webkit-calendar-picker-indicator {
   text-align: center;
   justify-self: center;
   align-self: center;
+  width: 100%;
 }
 
 .badge-diamond {

diff --git a/src/components/layout/dialogs/UserOptions.jsx b/src/components/layout/dialogs/UserOptions.jsx
@@ -99,6 +99,37 @@ export default function UserOptions() {
     return t(Utility.camelToSnake(label), Utility.getProperName(label))
   }
 
+  const footerOptions = React.useMemo(
+    () =>
+      /** @type {import('@components/layout/general/Footer').FooterButton[]} */ ([
+        {
+          name: 'reset',
+          action: () => {
+            const newSettings = { ...userSettings[category] }
+            Object.entries(staticUserSettings || {}).forEach(([key, value]) => {
+              if (value.sub) {
+                Object.entries(value.sub).forEach(([subKey, subValue]) => {
+                  newSettings[subKey] = subValue.value
+                })
+              } else {
+                newSettings[key] = value.value
+              }
+            })
+            setLocalState(newSettings)
+          },
+          icon: 'Replay',
+          color: 'primary',
+        },
+        {
+          name: 'save',
+          action: toggleDialog(false, category, 'options', localState),
+          icon: 'Save',
+          color: 'secondary',
+        },
+      ]),
+    [category, userSettings, staticUserSettings, localState],
+  )
+
   React.useEffect(() => {
     setLocalState(userSettings[category])
   }, [category, userSettings[category]])
@@ -166,34 +197,7 @@ export default function UserOptions() {
           ))}
         </List>
       </DialogContent>
-      <Footer
-        options={[
-          {
-            name: 'reset',
-            action: () => {
-              const newSettings = { ...userSettings[category] }
-              Object.entries(staticUserSettings).forEach(([key, value]) => {
-                if (value.sub) {
-                  Object.entries(value.sub).forEach(([subKey, subValue]) => {
-                    newSettings[subKey] = subValue.value
-                  })
-                } else {
-                  newSettings[key] = value.value
-                }
-              })
-              setLocalState(newSettings)
-            },
-            icon: 'Replay',
-            color: 'primary',
-          },
-          {
-            name: 'save',
-            action: toggleDialog(false, category, 'options', localState),
-            icon: 'Save',
-            color: 'secondary',
-          },
-        ]}
-      />
+      <Footer options={footerOptions} />
     </DialogWrapper>
   )
 }
diff --git a/src/components/layout/dialogs/filters/Advanced.jsx b/src/components/layout/dialogs/filters/Advanced.jsx
@@ -41,6 +41,9 @@ export default function AdvancedFilter() {
       ? s.filters[category]?.standard || STANDARD_BACKUP
       : STANDARD_BACKUP,
   )
+  const easyMode = useStorage((s) =>
+    category === 'pokemon' ? s.filters.pokemon.easyMode : false,
+  )
   const [filters, setFilters] = useDeepStore(
     `filters.${category}.filter.${id}`,
     standard,
@@ -88,16 +91,14 @@ export default function AdvancedFilter() {
         name: 'reset',
         action: () => setFilters({ ...standard }),
         color: 'primary',
-        size: category === 'pokemon' ? 2 : null,
       },
       {
-        name: 'save',
+        name: 'close',
         action: () => toggleClose(true),
         color: 'secondary',
-        size: category === 'pokemon' ? 3 : null,
       },
     ],
-    [category, standard, id],
+    [standard, setFilters],
   )
 
   /** @type {import('@mui/material').SwitchProps['onChange']} */
@@ -115,6 +116,7 @@ export default function AdvancedFilter() {
   }, [open])
 
   if (!id) return null
+  const showMoreFilters = category === 'pokemon' && !easyMode
   return (
     <Dialog
       open={!!open}
@@ -135,36 +137,32 @@ export default function AdvancedFilter() {
             <StringFilter field={`filters.${category}.filter.${id}`} />
           ) : (
             <Grid2 container component={ListItem} disableGutters disablePadding>
-              {Object.entries('sliders' in ui ? ui.sliders : {}).map(
-                ([subCat, sliders], i) => (
-                  <Grid2 key={subCat} component={List} xs={12} sm={6}>
-                    {sliders.map((each) => (
-                      <ListItem
-                        key={`${subCat}${each.name}`}
-                        disableGutters
-                        disablePadding
-                        sx={{ pr: { xs: 0, sm: i ? 0 : 2 } }}
-                      >
-                        <SliderTile
-                          slide={{
-                            ...each,
-                            disabled: each.disabled || filters.all,
-                          }}
-                          // @ts-ignore
-                          handleChange={handleChange}
-                          values={filters[each.name]}
-                        />
-                      </ListItem>
-                    ))}
-                  </Grid2>
-                ),
-              )}
-              <Grid2
-                component={List}
-                xs={12}
-                sm={category === 'pokemon' ? 6 : 12}
-              >
-                {category === 'pokemon' && (
+              {Object.entries(
+                'sliders' in ui && !easyMode ? ui.sliders : {},
+              ).map(([subCat, sliders], i) => (
+                <Grid2 key={subCat} component={List} xs={12} sm={6}>
+                  {sliders.map((each) => (
+                    <ListItem
+                      key={`${subCat}${each.name}`}
+                      disableGutters
+                      disablePadding
+                      sx={{ pr: { xs: 0, sm: i ? 0 : 2 } }}
+                    >
+                      <SliderTile
+                        slide={{
+                          ...each,
+                          disabled: each.disabled || filters.all,
+                        }}
+                        // @ts-ignore
+                        handleChange={handleChange}
+                        values={filters[each.name]}
+                      />
+                    </ListItem>
+                  ))}
+                </Grid2>
+              ))}
+              <Grid2 component={List} xs={12} sm={showMoreFilters ? 6 : 12}>
+                {showMoreFilters && (
                   <GenderListItem
                     field={`filters.${category}.filter.${id}`}
                     disabled={filters.all}
@@ -176,12 +174,8 @@ export default function AdvancedFilter() {
                   disableGutters
                 />
               </Grid2>
-              <Grid2
-                component={List}
-                xs={12}
-                sm={category === 'pokemon' ? 6 : 12}
-              >
-                {category === 'pokemon' && (
+              <Grid2 component={List} xs={12} sm={showMoreFilters ? 6 : 12}>
+                {showMoreFilters && (
                   <DualBoolToggle
                     items={XXS_XXL}
                     field={`filters.${category}.filter.${id}`}

diff --git a/src/components/layout/dialogs/filters/FilterMenu.jsx b/src/components/layout/dialogs/filters/FilterMenu.jsx
@@ -14,16 +14,16 @@ export default function FilterMenu() {
 
   const [tempFilters, setTempFilters] = React.useState(filters?.filter)
 
-  /** @type {import('@components/layout/general/Footer').FooterButton[]} */
   const extraButtons = React.useMemo(
-    () => [
-      {
-        name: 'save',
-        action: toggleDialog(false, category, 'filters'),
-        icon: 'Save',
-        color: 'secondary',
-      },
-    ],
+    () =>
+      /** @type {import('@components/layout/general/Footer').FooterButton[]} */ ([
+        {
+          name: 'close',
+          action: toggleDialog(false, category, 'filters'),
+          icon: 'Clear',
+          color: 'secondary',
+        },
+      ]),
     [category],
   )
 

diff --git a/src/components/layout/dialogs/filters/SlotSelection.jsx b/src/components/layout/dialogs/filters/SlotSelection.jsx
@@ -72,24 +72,18 @@ export default function SlotSelection() {
           name: 'disable_all',
           action: () => handleSizeChange(false, id),
           color: 'error',
-          icon: 'Clear',
-          size: 2,
           disabled: teamId === '0',
         },
         {
           name: 'enable_all',
           action: () => handleSizeChange(true, id),
           color: 'success',
-          icon: 'Check',
-          size: 2,
           disabled: teamId === '0',
         },
         {
-          name: 'save',
+          name: 'close',
           action: handleClose,
           color: 'secondary',
-          icon: 'Save',
-          size: 2,
         },
       ]),
     [id, teamId, handleSizeChange, handleClose],
@@ -113,10 +107,11 @@ export default function SlotSelection() {
               field={`filters.gyms.filter.${id}`}
               switchColor="secondary"
               secondColor="success"
+              sx={{ pt: { xs: 2, sm: 1 } }}
             />
           </Grid2>
         </Grid2>
-        {teamId !== '0' && <Divider sx={{ my: 1 }} />}
+        {teamId !== '0' && <Divider sx={{ mt: 2 }} />}
         <Grid2 container justifyContent="center" alignItems="center">
           {teamId !== '0' &&
             slots.map((each) => (
@@ -141,7 +136,7 @@ export default function SlotSelection() {
 function SlotAdjustor({ id, children, onClick }) {
   const icon = useMemory((s) => s.Icons.getGyms(...id.slice(1).split('-')))
   return (
-    <Grid2 container xs={12} sm={6} alignItems="center">
+    <Grid2 container xs={12} sm={6} alignItems="center" pt={{ xs: 2, sm: 1 }}>
       <Grid2 xs={2}>
         <Img src={icon} maxHeight={50} maxWidth={50} alt={id} />
       </Grid2>

diff --git a/src/components/layout/dialogs/profile/GymBadges.jsx b/src/components/layout/dialogs/profile/GymBadges.jsx
@@ -12,6 +12,7 @@ import Query from '@services/Query'
 
 import { VirtualGrid } from '@components/layout/general/VirtualGrid'
 import { Img } from '@components/layout/general/Img'
+import { ToggleTypography } from '@components/layout/general/ToggleTypography'
 
 export function UserGymBadges() {
   const { t } = useTranslation()
@@ -74,7 +75,7 @@ function BadgeTile({ badge, ...gym }) {
   const badgeIcon = useMemory((s) => s.Icons.getMisc(`badge_${badge}`))
 
   return badge ? (
-    <Box className="vgrid-item">
+    <Box className="vgrid-item" minHeight={225}>
       <IconButton
         className="vgrid-icon"
         disabled={gym.deleted}
@@ -109,13 +110,13 @@ function BadgeTile({ badge, ...gym }) {
           />
         )}
       </Button>
-      <Typography
+      <ToggleTypography
         className="vgrid-caption"
         variant="caption"
         color={gym.deleted ? 'GrayText' : 'inherit'}
       >
         {gym.name || t('unknown_gym')}
-      </Typography>
+      </ToggleTypography>
     </Box>
   ) : null
 }
diff --git a/src/components/layout/drawer/Pokemon.jsx b/src/components/layout/drawer/Pokemon.jsx
@@ -47,7 +47,11 @@ function PokemonDrawer() {
     Utility.analytics('Global Pokemon', `${name}: ${values}`, `Pokemon Text`)
   }, [])
 
-  const handleTabChange = (_e, newValue) => setOpenTab(newValue)
+  /** @type {import('@mui/material').TabsProps['onChange']} */
+  const handleTabChange = React.useCallback(
+    (_e, newValue) => setOpenTab(newValue),
+    [],
+  )
 
   return (
     <>
@@ -103,7 +107,6 @@ function PokemonDrawer() {
           </Select>
         </FormControl>
       </ListItem>
-
       <Collapse in={filterMode === 'intermediate'}>
         <BoolToggle
           field="userSettings.pokemon.linkGlobalAndAdvanced"