Merge f0564ab into 3ea74b4

apps/frontend/src/app/App.tsx

@@ -146,7 +146,7 @@ function Content() {
       <Grid item>
         <Header anchor="back-to-top-anchor" />
       </Grid>
-      <Container maxWidth="xl" sx={{ px: { xs: 0.5, sm: 1, md: 2 } }}>
+      <Container maxWidth="xl" sx={{ px: { xs: 0.5, sm: 1 } }}>
         <Suspense
           fallback={
             <Skeleton

apps/frontend/src/app/Components/Conditional/ConditionalDisplay.tsx

@@ -1,9 +1,10 @@
+import type { CardBackgroundColor } from '@genshin-optimizer/common/ui'
+import { CardThemed } from '@genshin-optimizer/common/ui'
 import { CardContent } from '@mui/material'
 import { useContext } from 'react'
 import { DataContext } from '../../Context/DataContext'
 import type { DocumentConditional, DocumentSection } from '../../Types/sheet'
 import { evalIfFunc } from '../../Util/Util'
-import CardDark from '../Card/CardDark'
 import { HeaderDisplay } from '../DocumentDisplay'
 import FieldsDisplay from '../FieldDisplay'
 import ConditionalSelector from './ConditionalSelector'
@@ -13,13 +14,15 @@ type ConditionalDisplayProps = {
   hideHeader?: boolean | ((section: DocumentSection) => boolean)
   hideDesc?: boolean
   disabled?: boolean
+  bgt?: CardBackgroundColor
 }
 
 export default function ConditionalDisplay({
   conditional,
   hideHeader = false,
   hideDesc = false,
   disabled = false,
+  bgt = 'normal',
 }: ConditionalDisplayProps) {
   const { data } = useContext(DataContext)
   let fields
@@ -35,14 +38,14 @@ export default function ConditionalDisplay({
     })
   }
   return (
-    <CardDark>
+    <CardThemed bgt={bgt}>
       {!evalIfFunc(hideHeader, conditional) && (
         <HeaderDisplay header={conditional.header} hideDesc={hideDesc} />
       )}
       <CardContent sx={{ p: 0, '&:last-child': { pb: 0 } }}>
         <ConditionalSelector conditional={conditional} disabled={disabled} />
       </CardContent>
-      {fields && <FieldsDisplay fields={fields} />}
-    </CardDark>
+      {fields && <FieldsDisplay bgt={bgt} fields={fields} />}
+    </CardThemed>
   )
 }

apps/frontend/src/app/Components/DocumentDisplay.tsx

@@ -1,3 +1,5 @@
+import type { CardBackgroundColor } from '@genshin-optimizer/common/ui'
+import { CardThemed } from '@genshin-optimizer/common/ui'
 import { Box, Divider, Typography } from '@mui/material'
 import { useContext } from 'react'
 import { DataContext } from '../Context/DataContext'
@@ -8,7 +10,6 @@ import type {
   IDocumentText,
 } from '../Types/sheet'
 import { evalIfFunc } from '../Util/Util'
-import CardDark from './Card/CardDark'
 import CardHeaderCustom from './Card/CardHeaderCustom'
 import ConditionalDisplay from './Conditional/ConditionalDisplay'
 import FieldsDisplay from './FieldDisplay'
@@ -20,6 +21,7 @@ type DocumentDisplayProps = {
   hideDesc?: boolean
   hideHeader?: boolean | ((section: DocumentSection) => boolean)
   disabled?: boolean
+  bgt?: CardBackgroundColor
 }
 
 export default function DocumentDisplay({
@@ -28,6 +30,7 @@ export default function DocumentDisplay({
   hideDesc = false,
   hideHeader = false,
   disabled = false,
+  bgt = 'normal',
 }: DocumentDisplayProps) {
   const { data } = useContext(DataContext)
   if (!sections.length) return null
@@ -44,6 +47,7 @@ export default function DocumentDisplay({
           hideDesc={hideDesc}
           hideHeader={hideHeader}
           disabled={disabled}
+          bgt={bgt}
         />
       )
     })
@@ -61,18 +65,21 @@ function SectionDisplay({
   hideDesc = false,
   hideHeader = false,
   disabled = false,
+  bgt = 'normal',
 }: {
   section: DocumentSection
   hideDesc?: boolean
   hideHeader?: boolean | ((section: DocumentSection) => boolean)
   disabled?: boolean
+  bgt?: CardBackgroundColor
 }) {
   if ('fields' in section) {
     return (
       <FieldsSectionDisplay
         section={section}
         hideDesc={hideDesc}
         hideHeader={hideHeader}
+        bgt={bgt}
       />
     )
   } else if ('states' in section) {
@@ -82,6 +89,7 @@ function SectionDisplay({
         hideDesc={hideDesc}
         hideHeader={hideHeader}
         disabled={disabled}
+        bgt={bgt}
       />
     )
   } /* if ("text" in section) */ else {
@@ -93,22 +101,24 @@ function FieldsSectionDisplay({
   section,
   hideDesc,
   hideHeader,
+  bgt = 'normal',
 }: {
   section: IDocumentFields
   hideDesc?: boolean
   hideHeader?: boolean | ((section: DocumentSection) => boolean)
+  bgt?: CardBackgroundColor
 }) {
   return (
-    <CardDark>
+    <CardThemed bgt={bgt}>
       {!evalIfFunc(hideHeader, section) && section.header && (
         <HeaderDisplay
           header={section.header}
           hideDesc={hideDesc}
           hideDivider={section.fields.length === 0}
         />
       )}
-      <FieldsDisplay fields={section.fields} />
-    </CardDark>
+      <FieldsDisplay bgt={bgt} fields={section.fields} />
+    </CardThemed>
   )
 }
 

apps/frontend/src/app/Components/FieldDisplay.tsx

@@ -1,9 +1,10 @@
+import type { CardBackgroundColor } from '@genshin-optimizer/common/ui'
 import { valueString } from '@genshin-optimizer/common/util'
 import type { AmpReactionKey } from '@genshin-optimizer/gi/consts'
 import { allAmpReactionKeys } from '@genshin-optimizer/gi/consts'
 import { Groups } from '@mui/icons-material'
 import HelpIcon from '@mui/icons-material/Help'
-import type { ListProps, Palette, PaletteColor } from '@mui/material'
+import type { ListProps, PaletteColor } from '@mui/material'
 import {
   Box,
   Divider,
@@ -24,9 +25,15 @@ import AmpReactionModeText from './AmpReactionModeText'
 import BootstrapTooltip from './BootstrapTooltip'
 import ColorText from './ColoredText'
 
-export default function FieldsDisplay({ fields }: { fields: IFieldDisplay[] }) {
+export default function FieldsDisplay({
+  fields,
+  bgt = 'normal',
+}: {
+  fields: IFieldDisplay[]
+  bgt?: CardBackgroundColor
+}) {
   return (
-    <FieldDisplayList sx={{ m: 0 }}>
+    <FieldDisplayList sx={{ m: 0 }} bgt={bgt}>
       {fields.map((field, i) => (
         <FieldDisplay key={i} field={field} component={ListItem} />
       ))}
@@ -213,25 +220,27 @@ export function NodeFieldDisplayText({ node }: { node: NodeDisplay }) {
   )
 }
 export interface FieldDisplayListProps extends ListProps {
-  light?: keyof Palette
-  dark?: keyof Palette
+  bgt?: CardBackgroundColor
   palletOption?: keyof PaletteColor
 }
 export const FieldDisplayList = styled(List)<FieldDisplayListProps>(
-  ({
-    theme,
-    light = 'contentNormal',
-    dark = 'contentDark',
-    palletOption = 'main',
-  }) => ({
-    borderRadius: theme.shape.borderRadius,
-    overflow: 'hidden',
-    margin: 0,
-    '> .MuiListItem-root:nth-of-type(even)': {
-      backgroundColor: (theme.palette[light] as PaletteColor)[palletOption],
-    },
-    '> .MuiListItem-root:nth-of-type(odd)': {
-      backgroundColor: (theme.palette[dark] as PaletteColor)[palletOption],
-    },
-  })
+  ({ theme, bgt = 'normal' }) => {
+    const palette =
+      bgt === 'light'
+        ? 'contentLight'
+        : bgt === 'dark'
+        ? 'contentDark'
+        : 'contentNormal'
+    return {
+      borderRadius: theme.shape.borderRadius,
+      overflow: 'hidden',
+      margin: 0,
+      '> .MuiListItem-root:nth-of-type(even)': {
+        backgroundColor: (theme.palette[palette] as PaletteColor)['main'],
+      },
+      '> .MuiListItem-root:nth-of-type(odd)': {
+        backgroundColor: (theme.palette[palette] as PaletteColor)['dark'],
+      },
+    }
+  }
 )

apps/frontend/src/app/Components/Weapon/WeaponFullCard.tsx

@@ -1,3 +1,5 @@
+import type { CardBackgroundColor } from '@genshin-optimizer/common/ui'
+import { CardThemed } from '@genshin-optimizer/common/ui'
 import { weaponAsset } from '@genshin-optimizer/gi/assets'
 import type { ICachedWeapon } from '@genshin-optimizer/gi/db'
 import { useWeapon } from '@genshin-optimizer/gi/db-ui'
@@ -10,14 +12,19 @@ import { uiInput as input } from '../../Formula'
 import { computeUIData, dataObjForWeapon } from '../../Formula/api'
 import type { NodeDisplay } from '../../Formula/uiData'
 import { nodeVStr } from '../../Formula/uiData'
-import CardDark from '../Card/CardDark'
 import SqBadge from '../SqBadge'
 export default function WeaponFullCard({ weaponId }: { weaponId: string }) {
   const weapon = useWeapon(weaponId)
   if (!weapon) return null
   return <WeaponFullCardObj weapon={weapon} />
 }
-export function WeaponFullCardObj({ weapon }: { weapon: IWeapon }) {
+export function WeaponFullCardObj({
+  weapon,
+  bgt = 'normal',
+}: {
+  weapon: IWeapon
+  bgt?: CardBackgroundColor
+}) {
   const weaponSheet = weapon?.key && getWeaponSheet(weapon.key)
   const UIData = useMemo(
     () =>
@@ -31,7 +38,7 @@ export function WeaponFullCardObj({ weapon }: { weapon: IWeapon }) {
   )
   if (!weapon || !weaponSheet || !UIData) return null
   return (
-    <CardDark>
+    <CardThemed bgt={bgt}>
       <Box display="flex">
         <Box
           flexShrink={1}
@@ -71,7 +78,7 @@ export function WeaponFullCardObj({ weapon }: { weapon: IWeapon }) {
           </Typography>
         </Box>
       </Box>
-    </CardDark>
+    </CardThemed>
   )
 }
 function WeaponStat({ node }: { node: NodeDisplay }) {

apps/frontend/src/app/ErrorBoundary/index.tsx

@@ -22,6 +22,7 @@ import { Trans, withTranslation } from 'react-i18next'
 import CardLight from '../Components/Card/CardLight'
 import DatabaseCard from '../PageSettings/DatabaseCard'
 import SpaghettiCode from './SpaghettiCode.png'
+import { isDev } from '../Util/Util'
 
 interface Props extends WithTranslation {
   children?: ReactNode
@@ -38,6 +39,7 @@ class ErrorBoundary extends Component<Props, State> {
 
   public static getDerivedStateFromError(error: Error): State {
     // Update state so the next render will show the fallback UI.
+    if (isDev) return { error: undefined }
     return { error }
   }
 

apps/frontend/src/app/PageTeam/CharacterDisplay/Content.tsx

@@ -4,7 +4,6 @@ import type { CharacterKey } from '@genshin-optimizer/gi/consts'
 import BarChartIcon from '@mui/icons-material/BarChart'
 import CalculateIcon from '@mui/icons-material/Calculate'
 import FactCheckIcon from '@mui/icons-material/FactCheck'
-import GroupsIcon from '@mui/icons-material/Groups'
 import PersonIcon from '@mui/icons-material/Person'
 import ScienceIcon from '@mui/icons-material/Science'
 import TrendingUpIcon from '@mui/icons-material/TrendingUp'
@@ -31,7 +30,6 @@ import StatModal from './StatModal'
 import TabBuild from './Tabs/TabOptimize'
 import TabOverview from './Tabs/TabOverview'
 import TabTalent from './Tabs/TabTalent'
-import TabTeambuffs from './Tabs/TabTeambuffs'
 import TabTheorycraft from './Tabs/TabTheorycraft'
 import TabUpopt from './Tabs/TabUpgradeOpt'
 
@@ -99,7 +97,6 @@ function CharacterPanel() {
           <Route path="/:characterKey/*" element={<TabOverview />} />
         )}
         <Route path="/:characterKey/talent" element={<TabTalent />} />
-        <Route path="/:characterKey/teambuffs" element={<TabTeambuffs />} />
         {!isTCBuild && (
           <Route path="/:characterKey/optimize" element={<TabBuild />} />
         )}
@@ -159,13 +156,6 @@ function TabNav({
         component={RouterLink}
         to={`${characterKey}/talent`}
       />
-      <Tab
-        value="teambuffs"
-        label={t('tabs.teambuffs')}
-        icon={<GroupsIcon />}
-        component={RouterLink}
-        to={`${characterKey}/teambuffs`}
-      />
       {!isTCBuild && (
         <Tab
           value="optimize"

apps/frontend/src/app/PageTeam/LoadoutDropdown.tsx

@@ -104,17 +104,26 @@ export function LoadoutDropdown({
       </ModalWrapper>
       <DropdownButton
         title={
-          <Box sx={{ display: 'flex', gap: 1 }}>
+          <Box
+            sx={{
+              display: 'flex',
+              gap: 1,
+              flexWrap: 'wrap',
+              justifyContent: 'center',
+            }}
+          >
             <span>{name}</span>
-            <SqBadge
-              color={buildIds.length ? 'success' : 'secondary'}
-              sx={{ marginLeft: 'auto' }}
-            >
-              {buildIds.length} Builds
-            </SqBadge>
-            <SqBadge color={buildTcIds.length ? 'success' : 'secondary'}>
-              {buildTcIds.length} TC Builds
-            </SqBadge>
+            <Box sx={{ display: 'flex', gap: 1 }}>
+              <SqBadge
+                color={buildIds.length ? 'success' : 'secondary'}
+                sx={{ marginLeft: 'auto' }}
+              >
+                {buildIds.length} Builds
+              </SqBadge>
+              <SqBadge color={buildTcIds.length ? 'success' : 'secondary'}>
+                {buildTcIds.length} TC Builds
+              </SqBadge>
+            </Box>
           </Box>
         }
         {...dropdownBtnProps}