fix: gym badge page styling

WatWowMap · Jan 16, 2024 · 7016369 · 7016369
1 parent cbbc52d
commit 7016369
Show file tree

Hide file tree

Showing 5 changed files with 166 additions and 34 deletions.
diff --git a/package.json b/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": "*",

diff --git a/src/assets/css/main.css b/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;

diff --git a/src/components/layout/dialogs/profile/GymBadges.jsx b/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}

diff --git a/src/components/layout/dialogs/profile/index.jsx b/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={[

diff --git a/yarn.lock b/yarn.lock
@@ -368,6 +368,13 @@
   dependencies:
     regenerator-runtime "^0.14.0"
 
+"@babel/runtime@^7.23.7":
+  version "7.23.8"
+  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.23.8.tgz#8ee6fe1ac47add7122902f257b8ddf55c898f650"
+  integrity sha512-Y7KbAP984rn1VGMbGqKmBLio9V7y5Je9GvU4rQPCPinCyNfUcToxIXl06d59URp/F3LwinvODxab5N/G6qggkw==
+  dependencies:
+    regenerator-runtime "^0.14.0"
+
 "@babel/template@^7.22.15":
   version "7.22.15"
   resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.22.15.tgz#09576efc3830f0430f4548ef971dde1350ef2f38"
@@ -951,6 +958,13 @@
   dependencies:
     "@floating-ui/utils" "^0.1.3"
 
+"@floating-ui/core@^1.5.3":
+  version "1.5.3"
+  resolved "https://registry.yarnpkg.com/@floating-ui/core/-/core-1.5.3.tgz#b6aa0827708d70971c8679a16cf680a515b8a52a"
+  integrity sha512-O0WKDOo0yhJuugCx6trZQj5jVJ9yR0ystG2JaNAemYUWce+pmM6WUEFIibnWyEJKdrDxhm75NoSRME35FNaM/Q==
+  dependencies:
+    "@floating-ui/utils" "^0.2.0"
+
 "@floating-ui/dom@^1.5.1":
   version "1.5.3"
   resolved "https://registry.yarnpkg.com/@floating-ui/dom/-/dom-1.5.3.tgz#54e50efcb432c06c23cd33de2b575102005436fa"
@@ -959,18 +973,38 @@
     "@floating-ui/core" "^1.4.2"
     "@floating-ui/utils" "^0.1.3"
 
+"@floating-ui/dom@^1.5.4":
+  version "1.5.4"
+  resolved "https://registry.yarnpkg.com/@floating-ui/dom/-/dom-1.5.4.tgz#28df1e1cb373884224a463235c218dcbd81a16bb"
+  integrity sha512-jByEsHIY+eEdCjnTVu+E3ephzTOzkQ8hgUfGwos+bg7NlH33Zc5uO+QHz1mrQUOgIKKDD1RtS201P9NvAfq3XQ==
+  dependencies:
+    "@floating-ui/core" "^1.5.3"
+    "@floating-ui/utils" "^0.2.0"
+
 "@floating-ui/react-dom@^2.0.4":
   version "2.0.4"
   resolved "https://registry.yarnpkg.com/@floating-ui/react-dom/-/react-dom-2.0.4.tgz#b076fafbdfeb881e1d86ae748b7ff95150e9f3ec"
   integrity sha512-CF8k2rgKeh/49UrnIBs4BdxPUV6vize/Db1d/YbCLyp9GiVZ0BEwf5AiDSxJRCr6yOkGqTFHtmrULxkEfYZ7dQ==
   dependencies:
     "@floating-ui/dom" "^1.5.1"
 
+"@floating-ui/react-dom@^2.0.5":
+  version "2.0.5"
+  resolved "https://registry.yarnpkg.com/@floating-ui/react-dom/-/react-dom-2.0.5.tgz#851522899c34e3e2be1e29f3294f150834936e28"
+  integrity sha512-UsBK30Bg+s6+nsgblXtZmwHhgS2vmbuQK22qgt2pTQM6M3X6H1+cQcLXqgRY3ihVLcZJE6IvqDQozhsnIVqK/Q==
+  dependencies:
+    "@floating-ui/dom" "^1.5.4"
+
 "@floating-ui/utils@^0.1.3":
   version "0.1.6"
   resolved "https://registry.yarnpkg.com/@floating-ui/utils/-/utils-0.1.6.tgz#22958c042e10b67463997bd6ea7115fe28cbcaf9"
   integrity sha512-OfX7E2oUDYxtBvsuS4e/jSn4Q9Qb6DzgeYtsAdkPZ47znpoNsMgZw0+tVijiv3uGNR6dgNlty6r9rzIzHjtd/A==
 
+"@floating-ui/utils@^0.2.0":
+  version "0.2.1"
+  resolved "https://registry.yarnpkg.com/@floating-ui/utils/-/utils-0.2.1.tgz#16308cea045f0fc777b6ff20a9f25474dd8293d2"
+  integrity sha512-9TANp6GPoMtYzQdt54kfAyMmz1+osLlXdg2ENroU7zzrtflTLrrC/lgrIfaSe+Wu0b89GKccT7vxXA0MoAIO+Q==
+
 "@gar/promisify@^1.1.3":
   version "1.1.3"
   resolved "https://registry.yarnpkg.com/@gar/promisify/-/promisify-1.1.3.tgz#555193ab2e3bb3b6adc3d551c9c030d9e860daf6"
@@ -1176,6 +1210,19 @@
     clsx "^2.0.0"
     prop-types "^15.8.1"
 
+"@mui/[email protected]":
+  version "5.0.0-beta.31"
+  resolved "https://registry.yarnpkg.com/@mui/base/-/base-5.0.0-beta.31.tgz#80293893e6bf41ffb51e4ce8d6498e3fc70ca415"
+  integrity sha512-+uNbP3OHJuZVI00WyMg7xfLZotaEY7LgvYXDfONVJbrS+K9wyjCIPNfjy8r9XJn4fbHo/5ibiZqjWnU9LMNv+A==
+  dependencies:
+    "@babel/runtime" "^7.23.7"
+    "@floating-ui/react-dom" "^2.0.5"
+    "@mui/types" "^7.2.13"
+    "@mui/utils" "^5.15.4"
+    "@popperjs/core" "^2.11.8"
+    clsx "^2.1.0"
+    prop-types "^15.8.1"
+
 "@mui/core-downloads-tracker@^5.15.2":
   version "5.15.2"
   resolved "https://registry.yarnpkg.com/@mui/core-downloads-tracker/-/core-downloads-tracker-5.15.2.tgz#eaf6f9faf7f8c4ef486693ace1237c6c7f4e3812"
@@ -1188,6 +1235,19 @@
   dependencies:
     "@babel/runtime" "^7.23.6"
 
+"@mui/lab@^5.0.0-alpha.160":
+  version "5.0.0-alpha.160"
+  resolved "https://registry.yarnpkg.com/@mui/lab/-/lab-5.0.0-alpha.160.tgz#1e0ecfa28db57811697ca8177c53b67e66777da1"
+  integrity sha512-hMCOyjfpCHrb/ELs45baCHXICaZf3ygKY0R/phBKxxCxAX6V6Y3O9hxu2fS/Uw3LflZqUuv9TFkwVEWzq3OUkQ==
+  dependencies:
+    "@babel/runtime" "^7.23.7"
+    "@mui/base" "5.0.0-beta.31"
+    "@mui/system" "^5.15.4"
+    "@mui/types" "^7.2.13"
+    "@mui/utils" "^5.15.4"
+    clsx "^2.1.0"
+    prop-types "^15.8.1"
+
 "@mui/material@^5.14.0":
   version "5.15.2"
   resolved "https://registry.yarnpkg.com/@mui/material/-/material-5.15.2.tgz#a98df5812f22f7af7f68092787297b86f563dbf1"
@@ -1215,6 +1275,15 @@
     "@mui/utils" "^5.15.2"
     prop-types "^15.8.1"
 
+"@mui/private-theming@^5.15.4":
+  version "5.15.4"
+  resolved "https://registry.yarnpkg.com/@mui/private-theming/-/private-theming-5.15.4.tgz#5d7b187e8e31995289b63ec4e0331d1e29859d6c"
+  integrity sha512-9N5myIMEEQTM5WYWPGvvYADzjFo12LgJ7S+2iTZkBNOcJpUxQYM1tvYjkHCDV+t1ocMOEgjR2EfJ9Dus30dBlg==
+  dependencies:
+    "@babel/runtime" "^7.23.7"
+    "@mui/utils" "^5.15.4"
+    prop-types "^15.8.1"
+
 "@mui/styled-engine@^5.15.2":
   version "5.15.2"
   resolved "https://registry.yarnpkg.com/@mui/styled-engine/-/styled-engine-5.15.2.tgz#3acf1c56275ccab9fa6028209537c49eec8397b3"
@@ -1225,6 +1294,16 @@
     csstype "^3.1.2"
     prop-types "^15.8.1"
 
+"@mui/styled-engine@^5.15.4":
+  version "5.15.4"
+  resolved "https://registry.yarnpkg.com/@mui/styled-engine/-/styled-engine-5.15.4.tgz#2e7bbf9154eba4db34f77aa55a6468408b31fb1d"
+  integrity sha512-vtrZUXG5XI8CNiNLcxjIirW4dEbOloR+ikfm6ePBo7jXpJdpXjVzBWetrfE+5eI0cHkKWlTptnJ2voKV8pBRfw==
+  dependencies:
+    "@babel/runtime" "^7.23.7"
+    "@emotion/cache" "^11.11.0"
+    csstype "^3.1.2"
+    prop-types "^15.8.1"
+
 "@mui/system@^5.15.2":
   version "5.15.2"
   resolved "https://registry.yarnpkg.com/@mui/system/-/system-5.15.2.tgz#13e618355b973729fbb39bd49dce46a7e88cbe28"
@@ -1239,11 +1318,30 @@
     csstype "^3.1.2"
     prop-types "^15.8.1"
 
+"@mui/system@^5.15.4":
+  version "5.15.4"
+  resolved "https://registry.yarnpkg.com/@mui/system/-/system-5.15.4.tgz#750342dd699881cd81c99ea0ea770387d5ac35aa"
+  integrity sha512-KCwkHajGBXPs2TK1HJjIyab4NDk0cZoBDYN/TTlXVo1qBAmCjY0vjqrlsjeoG+wrwwcezXMLs/e6OGP66fPCog==
+  dependencies:
+    "@babel/runtime" "^7.23.7"
+    "@mui/private-theming" "^5.15.4"
+    "@mui/styled-engine" "^5.15.4"
+    "@mui/types" "^7.2.13"
+    "@mui/utils" "^5.15.4"
+    clsx "^2.1.0"
+    csstype "^3.1.2"
+    prop-types "^15.8.1"
+
 "@mui/types@^7.2.11":
   version "7.2.11"
   resolved "https://registry.yarnpkg.com/@mui/types/-/types-7.2.11.tgz#36b99a88f8010dc716128e568dc05681a69dc7ae"
   integrity sha512-KWe/QTEsFFlFSH+qRYf3zoFEj3z67s+qAuSnMMg+gFwbxG7P96Hm6g300inQL1Wy///gSRb8juX7Wafvp93m3w==
 
+"@mui/types@^7.2.13":
+  version "7.2.13"
+  resolved "https://registry.yarnpkg.com/@mui/types/-/types-7.2.13.tgz#d1584912942f9dc042441ecc2d1452be39c666b8"
+  integrity sha512-qP9OgacN62s+l8rdDhSFRe05HWtLLJ5TGclC9I1+tQngbssu0m2dmFZs+Px53AcOs9fD7TbYd4gc9AXzVqO/+g==
+
 "@mui/utils@^5.15.2":
   version "5.15.2"
   resolved "https://registry.yarnpkg.com/@mui/utils/-/utils-5.15.2.tgz#9c66994cf2a370baee1bd49ae408ab149280f7a6"
@@ -1254,6 +1352,16 @@
     prop-types "^15.8.1"
     react-is "^18.2.0"
 
+"@mui/utils@^5.15.4":
+  version "5.15.4"
+  resolved "https://registry.yarnpkg.com/@mui/utils/-/utils-5.15.4.tgz#74d0d11c86497594d797302f33fb753ee788eb85"
+  integrity sha512-E2wLQGBcs3VR52CpMRjk46cGscC4cbf3Q2uyHNaAeL36yTTm+aVNbtsTCazXtjOP4BDd8lu6VtlTpVC8Rtl4mg==
+  dependencies:
+    "@babel/runtime" "^7.23.7"
+    "@types/prop-types" "^15.7.11"
+    prop-types "^15.8.1"
+    react-is "^18.2.0"
+
 "@na-ji/pogo-protos@<3.0.0":
   version "2.101.0"
   resolved "https://registry.yarnpkg.com/@na-ji/pogo-protos/-/pogo-protos-2.101.0.tgz#e6718fd4856c42fd37be90d154b88cff48fd836c"
@@ -3187,6 +3295,11 @@ clsx@^2.0.0:
   resolved "https://registry.yarnpkg.com/clsx/-/clsx-2.0.0.tgz#12658f3fd98fafe62075595a5c30e43d18f3d00b"
   integrity sha512-rQ1+kcj+ttHG0MKVGBUXwayCCF1oh39BF5COIpRzuCEv8Mwjv0XucrI2ExNTOn9IlLifGClWQcU9BrZORvtw6Q==
 
+clsx@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/clsx/-/clsx-2.1.0.tgz#e851283bcb5c80ee7608db18487433f7b23f77cb"
+  integrity sha512-m3iNNWpd9rl3jvvcBnu70ylMdrXt8Vlq4HYadnU5fwcOtvkSQWPmj7amUcDT2qYI7risszBjI5AUIUox9D16pg==
+
 cmd-shim@^5.0.0:
   version "5.0.0"
   resolved "https://registry.yarnpkg.com/cmd-shim/-/cmd-shim-5.0.0.tgz#8d0aaa1a6b0708630694c4dbde070ed94c707724"