make equipped build title button-like (#1629)

* make equipped build title button-like * format * make build TC title more button-like
frzyc · Mar 8, 2024 · 134c179 · 134c179
1 parent a4833bc
commit 134c179
Show file tree

Hide file tree

Showing 2 changed files with 50 additions and 30 deletions.
diff --git a/apps/frontend/src/app/PageTeam/CharacterDisplay/Build/BuildEquipped.tsx b/apps/frontend/src/app/PageTeam/CharacterDisplay/Build/BuildEquipped.tsx
@@ -3,14 +3,7 @@ import { useDatabase } from '@genshin-optimizer/gi/db-ui'
 import { getCharData } from '@genshin-optimizer/gi/stats'
 import ContentCopyIcon from '@mui/icons-material/ContentCopy'
 import ScienceIcon from '@mui/icons-material/Science'
-import {
-  Box,
-  Button,
-  CardActionArea,
-  CardContent,
-  Tooltip,
-  Typography,
-} from '@mui/material'
+import { Box, Button, CardContent, Tooltip, Typography } from '@mui/material'
 import { useContext } from 'react'
 import { CharacterContext } from '../../../Context/CharacterContext'
 import { TeamCharacterContext } from '../../../Context/TeamCharacterContext'
@@ -44,6 +37,14 @@ export function BuildEquipped({ active = false }: { active: boolean }) {
       description: 'Copied from Equipped Build',
     })
   }
+
+  const canActivate = !active
+  const titleElement = (
+    <Typography sx={{ p: 1 }} variant="h6">
+      Equipped Build
+    </Typography>
+  )
+
   return (
     <CardThemed
       bgt="light"
@@ -54,11 +55,22 @@ export function BuildEquipped({ active = false }: { active: boolean }) {
     >
       <CardContent sx={{ display: 'flex', flexDirection: 'column', gap: 1 }}>
         <Box sx={{ display: 'flex', gap: 1 }}>
-          <CardThemed sx={{ flexGrow: 1 }}>
-            <CardActionArea disabled={active} onClick={onActive} sx={{ p: 1 }}>
-              <Typography variant="h6">Equipped Build</Typography>
-            </CardActionArea>
-          </CardThemed>
+          {canActivate ? (
+            <Button
+              onClick={onActive}
+              color="info"
+              sx={{
+                flexGrow: 1,
+                p: 0,
+                textAlign: 'left',
+                justifyContent: 'flex-start',
+              }}
+            >
+              {titleElement}
+            </Button>
+          ) : (
+            <CardThemed sx={{ flexGrow: 1 }}>{titleElement}</CardThemed>
+          )}
           <Tooltip
             title={<Typography>Copy to TC Builds</Typography>}
             placement="top"

diff --git a/apps/frontend/src/app/PageTeam/CharacterDisplay/Build/BuildTc.tsx b/apps/frontend/src/app/PageTeam/CharacterDisplay/Build/BuildTc.tsx
@@ -18,7 +18,6 @@ import InfoIcon from '@mui/icons-material/Info'
 import {
   Box,
   Button,
-  CardActionArea,
   CardContent,
   CardHeader,
   Divider,
@@ -57,7 +56,15 @@ export default function BuildTc({
     // trigger validation
     database.teamChars.set(teamCharId, {})
   }
-
+  const canActivate = !active
+  const titleElement = (
+    <Box sx={{ p: 1, display: 'flex', gap: 1, alignItems: 'center' }}>
+      <Typography variant="h6">{name}</Typography>
+      <BootstrapTooltip title={<Typography>{description}</Typography>}>
+        <InfoIcon />
+      </BootstrapTooltip>
+    </Box>
+  )
   return (
     <>
       <ModalWrapper open={open} onClose={onClose}>
@@ -72,21 +79,22 @@ export default function BuildTc({
       >
         <CardContent sx={{ display: 'flex', flexDirection: 'column', gap: 1 }}>
           <Box sx={{ display: 'flex', gap: 1 }}>
-            <CardThemed sx={{ flexGrow: 1 }}>
-              <CardActionArea disabled={active} onClick={onActive}>
-                <Box
-                  component="span"
-                  sx={{ p: 1, display: 'flex', gap: 1, alignItems: 'center' }}
-                >
-                  <Typography variant="h6">{name}</Typography>
-                  <BootstrapTooltip
-                    title={<Typography>{description}</Typography>}
-                  >
-                    <InfoIcon />
-                  </BootstrapTooltip>
-                </Box>
-              </CardActionArea>
-            </CardThemed>
+            {canActivate ? (
+              <Button
+                onClick={onActive}
+                color="info"
+                sx={{
+                  flexGrow: 1,
+                  p: 0,
+                  textAlign: 'left',
+                  justifyContent: 'flex-start',
+                }}
+              >
+                {titleElement}
+              </Button>
+            ) : (
+              <CardThemed sx={{ flexGrow: 1 }}>{titleElement}</CardThemed>
+            )}
             <Tooltip
               title={<Typography>Edit Build Settings</Typography>}
               placement="top"