Merge pull request #164 from Morta1/design-facelift

Design facelift
Morta1 · Mar 2, 2025 · b7e071a · b7e071a
2 parents bf5fe18 + 2d1d8ba
commit b7e071a
Show file tree

Hide file tree

Showing 61 changed files with 1,018 additions and 493 deletions.
diff --git a/components/Leaderboard.jsx b/components/Leaderboard.jsx
@@ -77,7 +77,7 @@ const LeaderboardSection = ({ leaderboards, loggedMainChar, searchedChar }) => {
                   return <ListItem
                     sx={{
                       mb: entry?.loggedMainChar || entry?.searchedChar ? .8 : 0,
-                      backgroundColor: entry?.loggedMainChar || entry?.searchedChar ? HIGHLIGHTED_BG_COLOR : '#1a1d2a',
+                      backgroundColor: entry?.loggedMainChar || entry?.searchedChar ? HIGHLIGHTED_BG_COLOR : '#1e262e',
                       outline: entry?.loggedMainChar || entry?.searchedChar ? '2px solid' : 'none',
                       outlineColor: entry?.loggedMainChar ? HIGHLIGHTED_OUTLINED_COLOR : entry?.searchedChar
                         ? SECONDARY_HIGHLIGHTED_OUTLINED_COLOR
@@ -180,7 +180,7 @@ const TextWrapper = styled(Paper, {
   border-radius: 12px 12px 0 0;
   box-shadow: none;
   width: 100%;
-  background-color: ${({ outline }) => outline ? HIGHLIGHTED_BG_COLOR : '#161826'};
+  background-color: ${({ outline }) => outline ? HIGHLIGHTED_BG_COLOR : '#1e262e'};
   outline: ${({ loggedMainChar, searchedChar }) => loggedMainChar || searchedChar ? '3px solid' : 'none'};
   outline-color: ${({ loggedMainChar, searchedChar }) => loggedMainChar ? HIGHLIGHTED_OUTLINED_COLOR : searchedChar
           ? SECONDARY_HIGHLIGHTED_OUTLINED_COLOR

diff --git a/components/Tooltip.jsx b/components/Tooltip.jsx
@@ -2,22 +2,15 @@ import { Tooltip, tooltipClasses } from '@mui/material';
 import styled from '@emotion/styled';
 
 const HtmlTooltip = styled(({ className, children, followCursor = true, dark, maxWidth, ...props }) => (
-  <Tooltip followCursor={followCursor} enterTouchDelay={200} {...props}
-           dark={dark}
+  <Tooltip enterTouchDelay={200} {...props}
            classes={{ popper: className }}>{children}</Tooltip>
 ), {
-  shouldForwardProp: (prop) => prop !== 'dark' && prop !== 'maxWidth'
-})(({ theme, dark, maxWidth }) => ({
+  shouldForwardProp: (prop) => prop !== 'maxWidth'
+})(({ theme, maxWidth }) => ({
   [`& .${tooltipClasses.tooltip}`]: {
-    backgroundColor: dark ? '#222831' : '#d5d5dc',
-    color: dark ? 'white' : 'black',
     maxWidth: maxWidth ? maxWidth : 320,
-    fontSize: theme.typography.pxToRem(14),
-    border: '1px solid #dadde9',
-  },
-  [`& .${tooltipClasses.arrow}`]: {
-    color: '#dadde9'
-  },
+    fontSize: theme.typography.pxToRem(14)
+  }
 }));
 
 export default HtmlTooltip;

diff --git a/components/account/Misc/Dungeons/Upgrades.js b/components/account/Misc/Dungeons/Upgrades.js
@@ -51,11 +51,10 @@ const UpgradeList = ({ isFlurbo, upgrades = [] }) => {
           const { level, type, effect } = upgrade;
           const isMaxed = level >= (isFlurbo ? flurboUpgradeMaxLevel : insideDungeonUpgradeMaxLevel);
           return (
-            <Card key={`${effect}-${index}`} sx={{ width: { md: 450 } }}>
+            <Card key={`${effect}-${index}`} sx={{ width: { md: 450 },
+              border: isMaxed ? '1px solid' : '',
+              borderColor: isMaxed ? 'success.light' : ''}}>
               <CardContent sx={{
-                border: isMaxed ? '1px solid' : '',
-                borderColor: isMaxed ? 'success.light' : '',
-                borderRadius: '6px'
               }}>
                 <Stack direction="row" justifyContent="space-between" gap={2}>
                   <Stack>

diff --git a/components/account/Misc/Totals.js b/components/account/Misc/Totals.js
@@ -19,15 +19,15 @@ const Totals = ({ account, characters }) => {
   return (
     <Stack gap={1}>
       <Typography variant={'h5'}>Totals</Typography>
-      <TotalStat text={'Total Bubbles'} icon={'aBrewOptionA0'} stat={totalBubbleLevels}/>
-      <TotalStat text={'Total Stamps'} icon={'StampA34'} stat={totalStampLevels}/>
-      <TotalStat text={'Total Statues'} icon={'EquipmentStatues1'} stat={totalStatueLevels}/>
-      <TotalStat text={'Total Shrines'} icon={'UISkillIcon639'} stat={totalShrineLevels}/>
+      <TotalStat text={'Bubbles'} icon={'aBrewOptionA0'} stat={totalBubbleLevels}/>
+      <TotalStat text={'Stamps'} icon={'StampA34'} stat={totalStampLevels}/>
+      <TotalStat text={'Statues'} icon={'EquipmentStatues1'} stat={totalStatueLevels}/>
+      <TotalStat text={'Shrines'} icon={'UISkillIcon639'} stat={totalShrineLevels}/>
       <TotalStat text={'Highest Damage'} icon={'StampA8'} stat={account?.tasks?.[0]?.[1]?.[0]}/>
       <TotalStat text={'PO Orders'} icon={'DeliveryBox'} stat={account?.tasks?.[0]?.[1]?.[5]}/>
       <TotalStat text={'Monsters Killed'} icon={'UISkillIcon110'} stat={account?.tasks?.[0]?.[0]?.[0]}/>
       <TotalStat text={'Refined Salts'} icon={'TaskSc6'} stat={account?.tasks?.[0]?.[2]?.[0]}/>
-      <TotalStat text={'Total Mats Printed'} icon={'PrintSlot'} stat={account?.tasks?.[0]?.[2]?.[3]}/>
+      <TotalStat text={'Mats Printed'} icon={'PrintSlot'} stat={account?.tasks?.[0]?.[2]?.[3]}/>
       <TotalStat text={'Trashed Cogs'} icon={'Cog3B4'} stat={account?.tasks?.[0]?.[2]?.[1]}/>
       <TotalStat text={'Plants Picked'} icon={'GamingPlant1'} stat={account?.tasks?.[0]?.[4]?.[3]}/>
       {account?.finishedWorlds?.World2 ? <>

diff --git a/components/account/Worlds/World1/Statues.jsx b/components/account/Worlds/World1/Statues.jsx
@@ -1,4 +1,4 @@
-import { capitalize, Stack, Typography } from '@mui/material';
+import { capitalize, Divider, Stack, Typography } from '@mui/material';
 import { cleanUnderscore, notateNumber, pascalCase } from 'utility/helpers';
 import HtmlTooltip from 'components/Tooltip';
 import { IconWithText, TitleAndValue } from '@components/common/styles';
@@ -28,13 +28,16 @@ const Statues = ({ statues, characters }) => {
 const StatueTooltip = ({ effect, talentMulti, name, rawName, progress, statues, characters, calcBonus, nextLv }) => {
   const desc = cleanUnderscore(pascalCase(effect?.replace(/(%?)(@)/, '$2$1_').replace('@', Math.floor(10 * calcBonus) / 10)));
   return <>
-    <Typography fontWeight={'bold'} variant={'h5'}>{capitalize(cleanUnderscore(name.toLowerCase()))}</Typography>
+    <Typography fontWeight={'bold'} variant={'h6'}>{capitalize(cleanUnderscore(name.toLowerCase()))}</Typography>
     <Typography variant={'body1'}>{desc}</Typography>
-    <ProgressBar percent={progress / nextLv * 100} label={false}/>
+    <Divider sx={{ my: 1 }}/>
+    <ProgressBar percent={progress / nextLv * 100}/>
     <Typography
       variant={'body2'}>{notateNumber(progress, 'Big')} / {notateNumber(nextLv, 'Big')}</Typography>
-    <Typography my={2} component={'div'} variant={'caption'}>Voodo
+    <Divider sx={{ my: 1 }}/>
+    <Typography component={'div'} variant={'caption'}>Voodo
       Statufication: {notateNumber(talentMulti, 'MultiplierInfo')}x</Typography>
+    <Divider sx={{ my: 1 }}/>
     <Stack>
       {characters?.map(({ name: cName, talents }) => {
         const bonus = getStatueBonus(statues, rawName, talents);

diff --git a/components/account/Worlds/World2/ObolsView.jsx b/components/account/Worlds/World2/ObolsView.jsx
@@ -32,8 +32,7 @@ const ObolsView = ({ obols, type = 'character', obolStats }) => {
   return (
     <ObolsStyled>
       {!obolStats ? <>
-          <Card variant={'outlined'} sx={{ border: type === 'account' ? 'none' : '1px solid rgba(255, 255, 255, 0.12)' }}>
-            <CardContent sx={{ '&:last-child': { padding: type === 'account' ? 0 : 2 } }}>
+      <Wrapper type={type}>
               {(type === 'character' ? [5, 9, 12, 16, 23] : [5, 10, 14, 19, 24]).map((endInd, rowNumber, array) => {
                 const startInd = rowNumber === 0 ? 0 : array[rowNumber - 1];
                 const relevantArray = obols?.list?.slice(startInd, endInd);
@@ -52,8 +51,7 @@ const ObolsView = ({ obols, type = 'character', obolStats }) => {
                   })}
                 </div>
               })}
-            </CardContent>
-          </Card>
+      </Wrapper>
         </> :
         <Card variant={'outlined'}>
           <CardContent>
@@ -87,6 +85,17 @@ const Stat = ({ statName, personalBonus, familyBonus }) => {
   </Stack>
 }
 
+const Wrapper = ({type, children}) => {
+  if (type === 'account') {
+    return <div>{children}</div>
+  }
+  return <Card variant={'outlined'} sx={{ border: type === 'account' ? 'none' : '1px solid rgba(255, 255, 255, 0.12)' }}>
+    <CardContent sx={{ '&:last-child': { padding: type === 'account' ? 0 : 2 } }}>
+      {children}
+    </CardContent>
+  </Card>
+}
+
 const ObolsStyled = styled.div`
   max-width: 400px;
 

diff --git a/components/account/Worlds/World3/Shrines.jsx b/components/account/Worlds/World3/Shrines.jsx
@@ -1,4 +1,4 @@
-import { Stack, Typography } from '@mui/material';
+import { Divider, Stack, Typography } from '@mui/material';
 import { cleanUnderscore, kFormatter, numberWithCommas } from 'utility/helpers';
 import HtmlTooltip from 'components/Tooltip';
 import { IconWithText } from '@components/common/styles';
@@ -47,16 +47,19 @@ const ShrineTooltip = ({
                          timeLeft
                        }) => {
   return <>
-    <Typography fontWeight={'bold'} variant={'h5'}>{cleanUnderscore(name)} Lv.{shrineLevel}</Typography>
+    <Typography fontWeight={'bold'} variant={'h6'}>{cleanUnderscore(name)} Lv.{shrineLevel}</Typography>
     <Typography variant={'body1'}>{description}</Typography>
+    <Divider sx={{ my: 1 }}/>
     <Typography fontWeight={'bold'} variant={'body1'}>Map: {cleanUnderscore(mapNames[mapId])}</Typography>
-    <Typography fontWeight={'bold'}>Progress:</Typography>
-    <ProgressBar percent={progress / hoursReq * 100} label={false}/>
+    <ProgressBar percent={progress / hoursReq * 100}/>
     <Typography
       variant={'body1'}>{numberWithCommas(parseInt(progress))} / {numberWithCommas(parseInt(hoursReq))}</Typography>
+    <Divider sx={{ my: 1 }}/>
     <Typography sx={{ fontWeight: 'bold' }} mt={1}>Affected by:</Typography>
     <Typography variant={'body1'}>{affectingCharacters?.join(', ')}</Typography>
-    <Typography sx={{ fontWeight: 'bold' }} mt={1}>{progressPerHour.toFixed(2)}/hr</Typography>
+    <Divider sx={{ my: 1 }}/>
+    <Typography sx={{ fontWeight: 'bold' }} mt={1}>Progress: {progressPerHour.toFixed(2)}/hr</Typography>
+    <Divider sx={{ my: 1 }}/>
     <Typography variant={'inherit'} mt={1}>{convertMsToHHMM(timeLeft)}</Typography>
     <Timer date={new Date().getTime() + timeLeft} staticTime={true}/>
   </>

diff --git a/components/account/Worlds/World3/worship/Totems.jsx b/components/account/Worlds/World3/worship/Totems.jsx
@@ -13,9 +13,9 @@ const Totems = () => {
   return (
     <>
       <Stack sx={{ my: 3 }} direction={'row'} alignItems={'center'} gap={2} flexWrap={'wrap'}>
-        <TextField value={worshipEff} onChange={({ target }) => setWorshipEff(target.value)}
+        <TextField size={'small'} value={worshipEff} onChange={({ target }) => setWorshipEff(target.value)}
                    label={'Worship Efficiency'}/>
-        <TextField value={foodEff} onChange={({ target }) => setFoodEff(target.value)}
+        <TextField size={'small'} value={foodEff} onChange={({ target }) => setFoodEff(target.value)}
                    label={'Food Effect'}/>
       </Stack>
       <Stack direction={'row'} gap={2} sx={{ width: 'fit-content' }} flexWrap={'wrap'}>

diff --git a/components/account/Worlds/World4/Breeding/Pets.jsx b/components/account/Worlds/World4/Breeding/Pets.jsx
@@ -157,16 +157,16 @@ const Pets = ({
                              size={'small'}
                              onChange={() => setApplyThreshold(!applyThreshold)}/>}
           label={'Apply level threshold'}/>
-        <TextField sx={{ width: 'fit-content' }}
+        <TextField size={'small'} sx={{ width: 'fit-content', mt: 1 }}
                    type={'number'} value={threshold} label={'Pet level threshold'}
                    onChange={(e) => setThreshold(e.target.value)}
                    helperText={'Show pets under this level only'}/>
-        <Stack mt={2} direction={'row'} gap={2}>
+        <Stack mt={2} direction={'row'} gap={2} alignItems={'center'}>
           <ToggleButtonGroup exclusive sx={{ flexWrap: 'wrap' }} value={filter} onChange={handleFilter}>
             <ToggleButton value="worlds">Worlds</ToggleButton>
             <ToggleButton value="stats">Stats</ToggleButton>
           </ToggleButtonGroup>
-          <TextField sx={{ width: 'fit-content' }}
+          <TextField size={'small'} sx={{ width: 'fit-content' }}
                      value={filterBy} label={'Filter by category'}
                      onChange={(e) => setFilterBy(e.target.value)}/>
         </Stack>
@@ -215,7 +215,7 @@ const Pets = ({
                             <Typography variant={'caption'}>Days {notateNumber(progress)} / {goal}</Typography>
                             <Tooltip title={<Stack>
                               <Typography>Faster Shiny Level Multi: {fasterShinyLv.value.toFixed(3)}x</Typography>
-                              <Divider sx={{ my: 1, backgroundColor: 'black' }}/>
+                              <Divider sx={{ my: 1 }}/>
                               <Breakdown breakdown={fasterShinyLv.breakdown} notation={'MultiplierInfo'}
                                          titleStyle={{ width: 170 }}/>
                             </Stack>}>

diff --git a/components/account/Worlds/World4/Meals.jsx b/components/account/Worlds/World4/Meals.jsx
@@ -271,7 +271,7 @@ const Meals = ({ account, characters, meals, totalMealSpeed, achievements, artif
         </ToggleButton> : null}
       </ToggleButtonGroup>
       <Stack direction={'row'} alignItems={'center'} gap={3}>
-        <TextField sx={{ width: 150 }} label={'Sort by'} select value={sortBy} onChange={handleSortChange}>
+        <TextField size={'small'} sx={{ width: 150 }} label={'Sort by'} select value={sortBy} onChange={handleSortChange}>
           {breakpoints?.map((val) => (<MenuItem key={val} value={val}>
             {val === -1 ? 'Order' : val === 0 ? 'Time' : val === -2 ? 'NMLB' : val === -3 ? 'Ribbon' : `Time to ${val}`}
           </MenuItem>))}
@@ -283,7 +283,7 @@ const Meals = ({ account, characters, meals, totalMealSpeed, achievements, artif
               level {breakpoint}
               !</Typography> : null;
         })}
-        <TextField label={'Food lust bosses'} type={'number'} value={foodLust}
+        <TextField size={'small'} label={'Food lust bosses'} type={'number'} value={foodLust}
                    inputProps={{ min: 0, max: 14 }}
                    sx={{ width: 130 }}
                    onChange={({ target }) => setFoodLust(target.value)}/>

diff --git a/components/account/Worlds/World6/farming/Plot.jsx b/components/account/Worlds/World6/farming/Plot.jsx
@@ -16,7 +16,7 @@ const Plot = ({ plot, market, ranks, lastUpdated, account }) => {
       <Stack direction={'row'} gap={1} flexWrap={'wrap'}>
         {Object.entries(totals || {}).map(([icon, quantity]) => {
           return <Card variant={'outlined'} key={icon}>
-            <CardContent>
+            <CardContent sx={{ '&:last-child': { padding: 1.5 } }}>
               <Stack direction={'row'} gap={1}>
                 <Typography>{commaNotation(Math.round(quantity))}</Typography>
                 <img width={20} height={20} src={`${prefix}data/${icon}`} alt={''}/>
@@ -76,12 +76,14 @@ const Plot = ({ plot, market, ranks, lastUpdated, account }) => {
                 <Typography variant={'caption'}>Floor {Math.floor((index / 9) + 1)}</Typography>
                 <Typography variant={'caption'}>Rank {rank || 0}</Typography>
                 <Typography
-                  variant={'caption'}>{rankProgress ? notateNumber(rankProgress) : 0} / {rankRequirement ? notateNumber(rankRequirement) : 0}</Typography>
+                  variant={'caption'}>{rankProgress ? notateNumber(rankProgress) : 0} / {rankRequirement
+                  ? notateNumber(rankRequirement)
+                  : 0}</Typography>
               </Stack>
               {isLocked ? <LockIcon sx={{ ml: 'auto' }}/> : null}
             </Stack>
             <Typography mt={2}>Current OG: {currentOG} (x{ogMulti})</Typography>
-            <Typography>Next OG: {nextOGChance.toFixed(3).replace('.000','')}%</Typography>
+            <Typography>Next OG: {nextOGChance.toFixed(3).replace('.000', '')}%</Typography>
             <Timer type={'countdown'} lastUpdated={lastUpdated}
                    date={new Date().getTime() + timeLeft * 1000}/>
           </CardContent>

diff --git a/components/characters/Bags.jsx b/components/characters/Bags.jsx
@@ -8,7 +8,7 @@ const Bags = ({ bags, capBags }) => {
   const isXs = useMediaQuery('(max-width: 370px)', { noSsr: true });
 
   return (
-    <Card variant={'outlined'}>
+    <Card variant={'outlined'} sx={{height:'fit-content'}}>
       <CardContent>
         <Stack sx={{ width: 200 }} alignItems={'center'}>
           <Stack direction={'row'} flexWrap={'wrap'}>

diff --git a/components/characters/Equipment.jsx b/components/characters/Equipment.jsx
@@ -22,7 +22,7 @@ const EquipmentPage = ({ items, character, account }) => {
     sx={{
       display: 'grid',
       justifyContent: 'center',
-      gridTemplateColumns: 'repeat(2, 60px)',
+      gridTemplateColumns: 'repeat(2, 60px)'
     }}>
     {items?.map((item, itemIndex) => {
       const { rawName, displayName, amount } = item;
@@ -31,13 +31,13 @@ const EquipmentPage = ({ items, character, account }) => {
               variant={'outlined'} key={`${rawName}-${itemIndex}`}>
           <CardContent sx={{ '&:last-child': { padding: 0 } }}>
             <Stack alignItems={'center'} justifyContent={'center'}>
-              <Tooltip
-                title={displayName && displayName !== 'ERROR' ? <ItemDisplay {...item} character={character}
-                                                                             account={account}/> : ''}>
-                <ItemIcon src={`${prefix}data/${rawName}.png`} alt={rawName}/>
-              </Tooltip>
-              {displayName !== 'ERROR' ? amount : ' '}
-            </Stack>
+            <Tooltip
+              title={displayName && displayName !== 'ERROR' ? <ItemDisplay {...item} character={character}
+                                                                           account={account}/> : ''}>
+              <ItemIcon src={`${prefix}data/${rawName}.png`} alt={rawName}/>
+            </Tooltip>
+            {displayName !== 'ERROR' && rawName !== 'Blank' ? amount : ' '}
+          </Stack>
           </CardContent>
         </Card> : null;
     })}

diff --git a/components/characters/Prayers.jsx b/components/characters/Prayers.jsx
@@ -7,7 +7,7 @@ import React from 'react';
 
 const Prayers = ({ prayers }) => {
   return <>
-    <Card variant={'outlined'}>
+    <Card variant={'outlined'} sx={{ height: 'fit-content' }}>
       <CardContent>
         <Stack direction={'row'} gap={2} flexWrap="wrap" justifyContent={'center'}>
           {prayers?.map((prayer, index) => {
@@ -32,20 +32,20 @@ const CurseTooltip = ({ name, x1, x2, level, prayerIndex, effect, curse, maxLeve
   const cost = calcPrayerCost({ name, x1, x2, level, prayerIndex, costMulti });
   return <>
     <Typography mb={1} fontWeight={'bold'} variant={'h5'}>{cleanUnderscore(name)}</Typography>
-    <Typography fontWeight={'bold'} variant={'body1'} color={'success.dark'}>Bonus: <Typography color={'black'}
-                                                                                                fontWeight={400}
-                                                                                                component={'span'}>{cleanUnderscore(effect).replace('{', calculatedBonus)}</Typography></Typography>
-    <Typography fontWeight={'bold'} variant={'body1'} color={'error.dark'}>Curse: <Typography color={'black'}
-                                                                                              fontWeight={400}
-                                                                                              component={'span'}>{cleanUnderscore(curse).replace('{', calculatedCurse)}</Typography></Typography>
+    <Typography fontWeight={'bold'} variant={'body1'} color={'success.light'}>Bonus: <Typography
+      fontWeight={400}
+      component={'span'}>{cleanUnderscore(effect).replace('{', calculatedBonus)}</Typography></Typography>
+    <Typography fontWeight={'bold'} variant={'body1'} color={'error.light'}>Curse: <Typography
+      fontWeight={400}
+      component={'span'}>{cleanUnderscore(curse).replace('{', calculatedCurse)}</Typography></Typography>
     <Box mt={1}>Cost: {level !== maxLevel ? <><Typography component={'span'}
                                                           sx={{
                                                             color: level === 0 ? '' : cost <= totalAmount
-                                                              ? 'success.dark'
-                                                              : 'error.dark'
+                                                              ? 'success.light'
+                                                              : 'error.light'
                                                           }}>
         {kFormatter(round(cost), 2)}</Typography> ({kFormatter(totalAmount, 2)})</> :
-      <Typography fontWeight={'bold'} color={'success.dark'} component={'span'}>Maxed</Typography>}
+      <Typography fontWeight={'bold'} color={'success.light'} component={'span'}>Maxed</Typography>}
     </Box>
   </>
 }