make header buttons more button-like

frzyc · Dec 16, 2024 · 0a1dea3 · 0a1dea3
1 parent 66413c0
commit 0a1dea3
Show file tree

Hide file tree

Showing 5 changed files with 233 additions and 205 deletions.
diff --git a/libs/common/ui/src/theme/index.ts b/libs/common/ui/src/theme/index.ts
@@ -103,6 +103,16 @@ declare module '@mui/material/Button' {
     roll4: true
     roll5: true
     roll6: true
+
+    neutral100: true
+    neutral200: true
+    neutral300: true
+    neutral400: true
+    neutral500: true
+    neutral600: true
+    neutral700: true
+    neutral800: true
+    neutral900: true
   }
 }
 

diff --git a/libs/gi/page-team/src/CharacterDisplay/Content.tsx b/libs/gi/page-team/src/CharacterDisplay/Content.tsx
@@ -1,4 +1,5 @@
 import { CardThemed } from '@genshin-optimizer/common/ui'
+import { colorToRgbaString, hexToColor } from '@genshin-optimizer/common/util'
 import { characterAsset } from '@genshin-optimizer/gi/assets'
 import type { CharacterKey, ElementKey } from '@genshin-optimizer/gi/consts'
 import { TeamCharacterContext, useDBMeta } from '@genshin-optimizer/gi/db-ui'
@@ -8,14 +9,7 @@ import PersonIcon from '@mui/icons-material/Person'
 import ScienceIcon from '@mui/icons-material/Science'
 import TrendingUpIcon from '@mui/icons-material/TrendingUp'
 import UpgradeIcon from '@mui/icons-material/Upgrade'
-import {
-  Divider,
-  Skeleton,
-  Tab,
-  Tabs,
-  useMediaQuery,
-  useTheme,
-} from '@mui/material'
+import { Skeleton, Tab, Tabs, useMediaQuery, useTheme } from '@mui/material'
 import { Suspense, useContext } from 'react'
 import { useTranslation } from 'react-i18next'
 import { Navigate, Route, Link as RouterLink, Routes } from 'react-router-dom'
@@ -91,7 +85,7 @@ function TabNav({
         return {
           position: 'relative',
           boxShadow: elementKey
-            ? `0px 0px 0px 0.5px ${theme.palette[elementKey].main} inset`
+            ? `0px 0px 0px 1px ${theme.palette[elementKey].main} inset`
             : undefined,
           '&::before': {
             content: '""',
@@ -101,20 +95,15 @@ function TabNav({
             left: 0,
             width: '100%',
             height: '100%',
-            opacity: 0.4,
+            opacity: 0.3,
             backgroundImage: `url(${banner})`,
             backgroundPosition: 'center',
             backgroundSize: 'cover',
           },
         }
       }}
     >
-      {!hideTitle && (
-        <>
-          <LoadoutHeader />
-          <Divider />
-        </>
-      )}
+      {!hideTitle && <LoadoutHeader elementKey={elementKey} />}
       <LoadoutTabs tab={tab} isTCBuild={isTCBuild} elementKey={elementKey} />
     </CardThemed>
   )
@@ -138,27 +127,37 @@ function LoadoutTabs({
       variant={isXs ? 'scrollable' : 'fullWidth'}
       allowScrollButtonsMobile
       sx={(theme) => {
+        const color = elementKey && theme.palette[elementKey]?.main
+        const colorrgb = color && hexToColor(color)
+        const colorrbga = (alpha = 1) =>
+          (colorrgb && colorToRgbaString(colorrgb, alpha)) ??
+          `rgba(255,255,255,${alpha})`
         return {
+          minHeight: 0,
           position: 'relative',
           '& .MuiTab-root:hover': {
             transition: 'background-color 0.25s ease',
-            backgroundColor: 'rgba(255,255,255,0.1)',
+            backgroundColor: colorrbga(0.1),
+            border: `1px solid ${colorrbga(0.8)}`,
           },
           '& .MuiTab-root.Mui-selected': {
-            color: 'white !important',
+            color: `${color} !important`,
           },
           '& .MuiTab-root': {
             textShadow: '#000 0 0 10px !important',
+            border: `1px solid ${colorrbga(0.3)}`,
+            minHeight: 0,
           },
           '& .MuiTabs-indicator': {
-            backgroundColor: elementKey && theme.palette[elementKey]?.main,
+            backgroundColor: color,
             height: '4px',
           },
         }
       }}
     >
       {isTCBuild ? (
         <Tab
+          iconPosition="start"
           value="overview"
           label={t('tabs.theorycraft')}
           icon={<ScienceIcon />}
@@ -167,6 +166,7 @@ function LoadoutTabs({
         />
       ) : (
         <Tab
+          iconPosition="start"
           value="overview"
           label={t('tabs.overview')}
           icon={<PersonIcon />}
@@ -175,6 +175,7 @@ function LoadoutTabs({
         />
       )}
       <Tab
+        iconPosition="start"
         value="talent"
         label={t('tabs.talent')}
         icon={<FactCheckIcon />}
@@ -183,6 +184,7 @@ function LoadoutTabs({
       />
       {!isTCBuild && (
         <Tab
+          iconPosition="start"
           value="optimize"
           label={t('tabs.optimize')}
           icon={<TrendingUpIcon />}
@@ -192,6 +194,7 @@ function LoadoutTabs({
       )}
       {!isTCBuild && (
         <Tab
+          iconPosition="start"
           value="upopt"
           label={t('tabs.upopt')}
           icon={<UpgradeIcon />}

diff --git a/libs/gi/page-team/src/CharacterDisplay/LoadoutHeader.tsx b/libs/gi/page-team/src/CharacterDisplay/LoadoutHeader.tsx
@@ -1,22 +1,17 @@
 import { useBoolState } from '@genshin-optimizer/common/react-util'
 import { BootstrapTooltip } from '@genshin-optimizer/common/ui'
+import type { ElementKey } from '@genshin-optimizer/gi/consts'
 import { TeamCharacterContext, useDatabase } from '@genshin-optimizer/gi/db-ui'
 import BorderColorIcon from '@mui/icons-material/BorderColor'
 import CheckroomIcon from '@mui/icons-material/Checkroom'
 import PersonIcon from '@mui/icons-material/Person'
-import {
-  Box,
-  CardActionArea,
-  CardContent,
-  Divider,
-  Typography,
-} from '@mui/material'
+import { Box, Button, Typography } from '@mui/material'
 import { useContext } from 'react'
 import { useTranslation } from 'react-i18next'
 import { BuildsEditorModal } from './BuildsEditorModal'
 import { LoadoutEditorModal } from './LoadoutEditorModal'
 
-export function LoadoutHeader() {
+export function LoadoutHeader({ elementKey }: { elementKey: ElementKey }) {
   const { teamChar, loadoutDatum } = useContext(TeamCharacterContext)
   const database = useDatabase()
   const { t } = useTranslation('page_team')
@@ -25,98 +20,80 @@ export function LoadoutHeader() {
 
   return (
     <Box sx={{ display: 'flex' }}>
-      <CardActionArea onClick={onShowLoadout}>
-        <BootstrapTooltip
-          placement="top"
-          title={
-            <Box>
-              <Box sx={{ display: 'flex', color: 'info.light', gap: 1 }}>
-                <BorderColorIcon />
-                <Typography>
-                  <strong>{t('loadout.edit')}</strong>
-                </Typography>
-              </Box>
-              {!!teamChar.description && (
-                <Typography>{teamChar.description}</Typography>
-              )}
+      <BootstrapTooltip
+        placement="top"
+        title={
+          <Box>
+            <Box sx={{ display: 'flex', color: 'info.light', gap: 1 }}>
+              <BorderColorIcon />
+              <Typography>
+                <strong>{t('loadout.edit')}</strong>
+              </Typography>
             </Box>
-          }
+            {!!teamChar.description && (
+              <Typography>{teamChar.description}</Typography>
+            )}
+          </Box>
+        }
+      >
+        <Button
+          variant="outlined"
+          fullWidth
+          startIcon={<PersonIcon />}
+          color={elementKey}
+          sx={{
+            borderBottomLeftRadius: 0,
+            borderBottomRightRadius: 0,
+            borderTopRightRadius: 0,
+          }}
+          onClick={onShowLoadout}
         >
-          <CardContent
+          <Typography
+            variant="h6"
+            noWrap
             sx={{
-              display: 'flex',
-              gap: 1,
-              justifyContent: 'center',
-              position: 'relative',
-              '&:hover': {
-                color: 'info.light',
-              },
               alignItems: 'center',
+              justifyContent: 'center',
             }}
           >
-            <PersonIcon />
-            <Typography
-              variant="h6"
-              noWrap
-              sx={{
-                gap: 1,
-                alignItems: 'center',
-                justifyContent: 'center',
-                textShadow: '#000 0 0 10px !important',
-              }}
-            >
-              <strong>{teamChar.name}</strong>
-            </Typography>
-          </CardContent>
-        </BootstrapTooltip>
-      </CardActionArea>
+            {teamChar.name}
+          </Typography>
+        </Button>
+      </BootstrapTooltip>
       <LoadoutEditorModal open={showLoadout} onClose={onCloseLoadout} />
-      <Divider orientation="vertical" flexItem />
-      <CardActionArea onClick={onShowBuild}>
-        <BootstrapTooltip
-          placement="top"
-          title={
-            <Box>
-              <Box sx={{ display: 'flex', color: 'info.light', gap: 1 }}>
-                <BorderColorIcon />
-                <Typography>
-                  <strong>{t('buildInfo.editorTitle')}</strong>
-                </Typography>
-              </Box>
-              {!!teamChar.description && (
-                <Typography>{teamChar.description}</Typography>
-              )}
+      <BootstrapTooltip
+        placement="top"
+        title={
+          <Box>
+            <Box sx={{ display: 'flex', color: 'info.light', gap: 1 }}>
+              <BorderColorIcon />
+              <Typography>
+                <strong>{t('buildInfo.editorTitle')}</strong>
+              </Typography>
             </Box>
-          }
+            {!!teamChar.description && (
+              <Typography>{teamChar.description}</Typography>
+            )}
+          </Box>
+        }
+      >
+        <Button
+          variant="outlined"
+          fullWidth
+          startIcon={<CheckroomIcon />}
+          color={elementKey}
+          sx={{
+            borderBottomLeftRadius: 0,
+            borderBottomRightRadius: 0,
+            borderTopLeftRadius: 0,
+          }}
+          onClick={onShowBuild}
         >
-          <CardContent
-            sx={{
-              display: 'flex',
-              gap: 1,
-              justifyContent: 'center',
-              position: 'relative',
-              '&:hover': {
-                color: 'info.light',
-              },
-              alignItems: 'center',
-            }}
-          >
-            <CheckroomIcon />
-            <Typography
-              variant="h6"
-              noWrap
-              sx={{
-                gap: 1,
-                alignItems: 'center',
-                justifyContent: 'center',
-                textShadow: '#000 0 0 10px !important',
-              }}
-            >
-              {database.teams.getActiveBuildName(loadoutDatum)}
-            </Typography>
-          </CardContent>
-        </BootstrapTooltip>
-      </CardActionArea>
+          <Typography variant="h6" noWrap>
+            {database.teams.getActiveBuildName(loadoutDatum)}
+          </Typography>
+        </Button>
+      </BootstrapTooltip>
       <BuildsEditorModal open={showBuild} onClose={onCloseBuild} />
     </Box>
   )