style: adjust stuff

PolkaGate · Nov 14, 2024 · c33e855 · c33e855
1 parent 8b6309c
commit c33e855
Show file tree

Hide file tree

Showing 6 changed files with 38 additions and 26 deletions.
diff --git a/packages/extension-polkagate/src/fullscreen/governance/FullScreenHeader.tsx b/packages/extension-polkagate/src/fullscreen/governance/FullScreenHeader.tsx
@@ -33,9 +33,10 @@ export const HEADER_COMPONENT_STYLE = {
   borderRadius: '5px',
   cursor: 'pointer',
   height: '42px',
+  minWidth: '42px',
   overflow: 'hidden',
   position: 'relative',
-  width: '42px'
+  width: 'fit-content'
 };
 
 function FullScreenHeader ({ _otherComponents, noAccountDropDown = false, noChainSwitch = false, page, unableToChangeAccount }: Props): React.ReactElement {

diff --git a/packages/extension-polkagate/src/fullscreen/homeFullScreen/partials/Currency.tsx b/packages/extension-polkagate/src/fullscreen/homeFullScreen/partials/Currency.tsx
@@ -21,10 +21,13 @@ export interface CurrencyItemType {
 interface Props {
   fontSize?: string;
   color?: string;
+  bgcolor?: string;
+  height?: string;
+  minWidth?: string;
   noBorder?: boolean;
 }
 
-export default function Currency ({ color, fontSize = '22px', noBorder }: Props): React.ReactElement {
+export default function Currency ({ bgcolor, color, fontSize = '22px', height, minWidth, noBorder }: Props): React.ReactElement {
   const theme = useTheme();
   const [anchorEl, setAnchorEl] = useState<HTMLButtonElement | null>(null);
   const [currencyToShow, setCurrencyToShow] = useState<CurrencyItemType | undefined>();
@@ -54,7 +57,9 @@ export default function Currency ({ color, fontSize = '22px', noBorder }: Props)
 
   return (
     <>
-      <Grid alignItems='center' aria-describedby={id} component='button' container direction='column' item justifyContent='center' onClick={onCurrencyClick} sx={{ ...HEADER_COMPONENT_STYLE, border: noBorder ? 0 : HEADER_COMPONENT_STYLE?.border }}>
+      <Grid alignItems='center' aria-describedby={id} component='button' container direction='column' item justifyContent='center' onClick={onCurrencyClick} 
+      // eslint-disable-next-line sort-keys
+        sx={{ ...HEADER_COMPONENT_STYLE, border: noBorder ? 0 : HEADER_COMPONENT_STYLE?.border, bgcolor: bgcolor || HEADER_COMPONENT_STYLE?.bgcolor, height: height || HEADER_COMPONENT_STYLE?.height, minWidth: minWidth || HEADER_COMPONENT_STYLE?.minWidth }}>
         <Infotip2 text={currencyToShow?.currency}>
           <Typography color={textColor} fontSize={ fontSize } fontWeight={500}>
             {currencyToShow?.sign || '$'}

diff --git a/packages/extension-polkagate/src/partials/SettingSubMenu.tsx b/packages/extension-polkagate/src/partials/SettingSubMenu.tsx
@@ -96,7 +96,7 @@ export default function SettingSubMenu ({ isTestnetEnabledChecked, onChange, set
                 <IconButton
                   sx={{ height: '35px', p: 0, width: '35px' }}
                 >
-                  <ThemeChanger color= 'secondary.light' left='4px' noBorder />
+                  <ThemeChanger color= 'secondary.light' noBorder />
                 </IconButton>
               </Infotip2>
             </Grid>

diff --git a/packages/extension-polkagate/src/popup/home/AiBackgroundImage.tsx b/packages/extension-polkagate/src/popup/home/AiBackgroundImage.tsx
@@ -98,7 +98,7 @@ export default function AiBackgroundImage ({ bgImage, setBgImage }: Props): Reac
       <Grid alignItems='baseline' container item justifyContent='flex-end' xs>
         <Grid item onClick={onAiBackground}>
           <Infotip2 showInfoMark text={t('Click to set an AI-generated background.')}>
-            <Typography sx={{ cursor: 'pointer', fontSize: '11px', pl: '5px', textDecoration: 'underline', userSelect: 'none' }}>
+            <Typography sx={{ color: 'secondary.contrastText', cursor: 'pointer', fontSize: '11px', pl: '5px', textDecoration: 'underline', userSelect: 'none' }}>
               {t('AI Background')}
             </Typography>
           </Infotip2>

diff --git a/packages/extension-polkagate/src/popup/home/YouHave.tsx b/packages/extension-polkagate/src/popup/home/YouHave.tsx
@@ -32,6 +32,8 @@ export default function YouHave (): React.ReactElement {
   const youHave = useYouHave();
   const currency = useCurrency();
 
+  const isDark = theme.palette.mode === 'dark';
+
   const { isHideNumbers, toggleHideNumbers } = useIsHideNumbers();
   const [isMenuOpen, setOpenMenu] = useState(false);
 
@@ -50,7 +52,7 @@ export default function YouHave (): React.ReactElement {
   }, []);
 
   return (
-    <Grid alignItems='flex-start' container sx={{ bgcolor: 'background.paper', borderRadius: '10px', minHeight: '125px', mx: '10px', my: '20px', width: '100%', boxShadow: pgBoxShadow(theme) }}>
+    <Grid alignItems='flex-start' container sx={{ bgcolor: 'background.paper', borderRadius: '10px', minHeight: '125px', m: '20px 10px 10px', width: '100%', boxShadow: isDark ? '3px 2px 15px rgba(255, 255, 255, 0.25)' : '2px 3px 4px 2px rgba(0, 0, 0, 0.10)' }}>
       <Grid container sx={{ position: 'relative', px: '10px', py: '5px' }}>
         <Grid container item sx={{ textAlign: 'left' }}>
           <Typography sx={{ fontSize: '16px', fontVariant: 'small-caps', mt: '10px' }}>
@@ -65,17 +67,28 @@ export default function YouHave (): React.ReactElement {
               sx={{ height: '30px', width: '154px' }}
             />
             : <>
-              <Stack alignItems='flex-end' direction='row' justifyContent='space-between' sx={{ textAlign: 'start', width: '100%', pr: '15px' }}>
-                <FormatPrice
-                  fontSize='28px'
-                  fontWeight={500}
-                  num={youHave?.portfolio}
-                  skeletonHeight={28}
-                  textColor={isPriceOutdated(youHave) ? 'primary.light' : 'text.primary'}
-                  width='100px'
-                  withCountUp
-                  withSmallDecimal
-                />
+              <Stack alignItems='center' direction='row' justifyContent='space-between' sx={{ flexWrap: 'wrap', textAlign: 'start', width: '100%' }}>
+                <Stack alignItems='flex-start' direction='row' sx= {{ ml: '-5px' }}>
+                  <Currency
+                    bgcolor='background.paper'
+                    color='secondary.light'
+                    fontSize='28px'
+                    height='30px'
+                    minWidth='27px'
+                    noBorder
+                  />
+                  <FormatPrice
+                    fontSize='28px'
+                    fontWeight={500}
+                    num={youHave?.portfolio}
+                    sign= ' '
+                    skeletonHeight={28}
+                    textColor={isPriceOutdated(youHave) ? 'primary.light' : 'text.primary'}
+                    width='100px'
+                    withCountUp
+                    withSmallDecimal
+                  />
+                </Stack>
                 <Typography sx={{ color: !youHave?.change ? 'secondary.contrastText' : youHave.change > 0 ? 'success.main' : 'warning.main', fontSize: '15px', fontWeight: 400 }}>
                   <CountUp
                     decimals={countDecimalPlaces(portfolioChange) || PORTFOLIO_CHANGE_DECIMAL}
@@ -109,7 +122,7 @@ export default function YouHave (): React.ReactElement {
             <MoreVertIcon sx={{ color: 'secondary.light', fontSize: '33px' }} />
           </IconButton>
         </Grid>
-        <Grid item sx={{ position: 'absolute', right: '55px', top: '8px' }}>
+        <Grid item sx={{ position: 'absolute', right: '30px', top: '8px' }}>
           <HideBalance
             darkColor={theme.palette.secondary.light}
             hide={isHideNumbers}
@@ -118,13 +131,6 @@ export default function YouHave (): React.ReactElement {
             size={20}
           />
         </Grid>
-        <Grid item sx={{ position: 'absolute', right: '25px', top: '10px' }}>
-          <Currency
-            color='secondary.light'
-            fontSize='19px'
-            noBorder
-          />
-        </Grid>
       </Grid>
       <Box
         component='img'

diff --git a/packages/extension-polkagate/src/popup/home/index.tsx b/packages/extension-polkagate/src/popup/home/index.tsx
@@ -109,7 +109,7 @@ export default function Home (): React.ReactElement {
             </Grid>
           }
           <ProfileTabs orderedAccounts={accountsOrder} />
-          <Container disableGutters sx={[{ m: 'auto', maxHeight: `${self.innerHeight - (hasActiveRecovery ? 220 : 165)}px`, overflowY: 'scroll', pb: '10px', px: '4%' }]}>
+          <Container disableGutters sx={[{ m: 'auto', maxHeight: `${self.innerHeight - (hasActiveRecovery ? 252 : 197)}px`, overflowY: 'scroll', pb: '10px', px: '4%' }]}>
             {initialAccountList.map((json, index): React.ReactNode => (
               <AccountsTree
                 {...json}