Merge pull request #919 from WatWowMap/fix-gym-badge

fix: gym badge page styling

Author: TurtIeSocks

package.json

@@ -108,6 +108,7 @@
     "@graphql-tools/load": "^8.0.0",
     "@monaco-editor/react": "^4.5.1",
     "@mui/icons-material": "^5.14.0",
+    "@mui/lab": "^5.0.0-alpha.160",
     "@mui/material": "^5.14.0",
     "@rainb0w-clwn/passport-telegram-official": "^2.0.2",
     "@rm/config": "*",

src/assets/css/main.css

@@ -483,6 +483,13 @@ input[type='time']::-webkit-calendar-picker-indicator {
   grid-template-columns: 25% 75%;
 }
 
+.profile-container {
+  display: grid;
+  grid-template-columns: 100%;
+  grid-template-rows: 100;
+  height: 100%;
+}
+
 @media screen and (max-width: 600px) {
   .container {
     display: grid;
@@ -501,6 +508,11 @@ input[type='time']::-webkit-calendar-picker-indicator {
   grid-template-rows: max-content 1fr;
 }
 
+.gym-badge-grid {
+  display: grid;
+  grid-template-rows: max-content max-content 1fr;
+}
+
 .vgrid-item {
   display: grid;
   grid-template-columns: 1fr 1fr 1fr;

src/components/layout/dialogs/filters/Advanced.jsx

@@ -78,7 +78,7 @@ export default function AdvancedFilter() {
     if (!save) {
       setFilters({ ...backup.current })
     } else if (id === 'global' && selectedIds?.length && category) {
-      applyToAll(true, category, selectedIds, false)
+      applyToAll(filters, category, selectedIds, false)
     }
   }
 
@@ -96,7 +96,7 @@ export default function AdvancedFilter() {
         color: 'secondary',
       },
     ],
-    [standard, setFilters],
+    [standard, filters, setFilters],
   )
 
   /** @type {import('@mui/material').SwitchProps['onChange']} */

src/components/layout/dialogs/profile/GymBadges.jsx

@@ -44,7 +44,7 @@ export function UserGymBadges() {
   }, [data])
 
   return data ? (
-    <Box className="user-profile-badge-grid">
+    <Box className="gym-badge-grid">
       <Typography variant="h5" align="center" gutterBottom>
         {t('gym_badges')}
       </Typography>
@@ -61,7 +61,7 @@ export function UserGymBadges() {
           </Grid>
         ))}
       </Grid>
-      <VirtualGrid data={data?.badges || []} xs={4} md={3} useWindowScroll>
+      <VirtualGrid data={data?.badges || []} xs={4} md={3}>
         {(_, badge) => <BadgeTile {...badge} />}
       </VirtualGrid>
     </Box>
@@ -75,7 +75,7 @@ function BadgeTile({ badge, ...gym }) {
   const badgeIcon = useMemory((s) => s.Icons.getMisc(`badge_${badge}`))
 
   return badge ? (
-    <Box className="vgrid-item" minHeight={225}>
+    <Box className="vgrid-item" minHeight={200}>
       <IconButton
         className="vgrid-icon"
         disabled={gym.deleted}

src/components/layout/dialogs/profile/index.jsx

@@ -1,14 +1,18 @@
 import * as React from 'react'
-import { DialogContent, AppBar, Tabs, Tab, Box } from '@mui/material'
 import { useTranslation } from 'react-i18next'
+import TabContext from '@mui/lab/TabContext'
+import TabList from '@mui/lab/TabList'
+import TabPanel from '@mui/lab/TabPanel'
+import Tab from '@mui/material/Tab'
+import Box from '@mui/material/Box'
+import DialogContent from '@mui/material/DialogContent'
 
 import { useMemory } from '@hooks/useMemory'
 import { useLayoutStore } from '@hooks/useLayoutStore'
 import Utility from '@services/Utility'
 
 import Header from '../../general/Header'
 import Footer from '../../general/Footer'
-import TabPanel from '../../general/TabPanel'
 import { DialogWrapper } from '../DialogWrapper'
 import { UserBackups } from './Backups'
 import { UserPermissions } from './Permissions'
@@ -24,8 +28,9 @@ export default function UserProfile() {
 
   const locale = localStorage.getItem('i18nextLng') || 'en'
 
-  const [tab, setTab] = React.useState(0)
+  const [tab, setTab] = React.useState('profile')
   const [tabsHeight, setTabsHeight] = React.useState(0)
+
   const handleTabChange = (_event, newValue) => {
     setTab(newValue)
   }
@@ -42,36 +47,37 @@ export default function UserProfile() {
         action={handleClose}
       />
       <DialogContent sx={{ p: 0 }}>
-        <AppBar
-          position="static"
-          ref={(ref) => ref && setTabsHeight(ref.clientHeight)}
-        >
-          <Tabs value={tab} onChange={handleTabChange}>
+        <TabContext value={tab}>
+          <TabList
+            onChange={handleTabChange}
+            ref={(ref) => ref && setTabsHeight(ref.clientHeight)}
+          >
             {['profile', 'badges', 'access'].map((each) => (
-              <Tab key={each} label={t(each)} />
+              <Tab key={each} label={t(each)} value={each} />
             ))}
-          </Tabs>
-        </AppBar>
-        <Box
-          overflow="auto"
-          maxHeight={{
-            xs: `calc(100% - ${tabsHeight}px)`,
-            sm: `calc(75vh - ${tabsHeight}px)`,
-          }}
-          minHeight="70vh"
-        >
-          <TabPanel value={tab} index={0}>
-            <LinkAccounts />
-            <ExtraUserFields />
-            <UserBackups />
-          </TabPanel>
-          <TabPanel value={tab} index={1}>
-            <UserGymBadges />
-          </TabPanel>
-          <TabPanel value={tab} index={2}>
-            <UserPermissions />
-          </TabPanel>
-        </Box>
+          </TabList>
+          <Box
+            overflow="auto"
+            height={{
+              xs: `calc(100% - ${tabsHeight}px)`,
+              sm: `calc(70vh - ${tabsHeight}px)`,
+            }}
+          >
+            <TabPanel value="profile">
+              <LinkAccounts />
+              <ExtraUserFields />
+              <UserBackups />
+            </TabPanel>
+            <TabPanel value="badges" sx={{ height: '100%', px: 0 }}>
+              <Box className="profile-container">
+                <UserGymBadges />
+              </Box>
+            </TabPanel>
+            <TabPanel value="access">
+              <UserPermissions />
+            </TabPanel>
+          </Box>
+        </TabContext>
       </DialogContent>
       <Footer
         options={[

src/components/layout/general/Menu.jsx

@@ -98,13 +98,24 @@ export default function Menu({
       {
         name: 'disable_all',
         action: () =>
-          applyToAll(false, category, filteredArr, !webhookCategory),
+          applyToAll(
+            { enabled: false },
+            category,
+            filteredArr,
+            !webhookCategory,
+          ),
         icon: 'Clear',
         color: 'error',
       },
       {
         name: 'enable_all',
-        action: () => applyToAll(true, category, filteredArr, !webhookCategory),
+        action: () =>
+          applyToAll(
+            { enabled: true },
+            category,
+            filteredArr,
+            !webhookCategory,
+          ),
         icon: 'Check',
         color: 'success',
       },

src/services/filtering/applyToAll.js

@@ -13,13 +13,14 @@ export const STANDARD_BACKUP =
   })
 
 /**
- * @param {boolean} show
- * @param {import('@rm/types').Categories} category
+ * @template {import('@rm/types').Categories} T
+ * @param {T extends 'pokemon' ? import('@rm/types/lib').PokemonFilter : import('@rm/types').BaseFilter} newFilter
+ * @param {T} category
  * @param {string[]} [selectedIds]
  * @param {boolean} [includeSlots]
  */
 export function applyToAll(
-  show,
+  newFilter,
   category,
   selectedIds = [],
   includeSlots = false,
@@ -41,13 +42,15 @@ export function applyToAll(
         [
           key,
           idSet.has(key)
-            ? { size: 'md', ...filter, enabled: show, all: !!easyMode }
+            ? { size: 'md', ...filter, ...newFilter, all: !!easyMode }
             : filter,
         ],
       ]
       if (key.startsWith('t') && +key.charAt(1) !== 0 && includeSlots) {
         filters.push(
-          ...Object.entries(Utility.generateSlots(key, show, userFilters)),
+          ...Object.entries(
+            Utility.generateSlots(key, newFilter.enabled, userFilters),
+          ),
         )
       }
       return filters