style: adjust currency dialog

Author: Nick-1979

packages/extension-polkagate/src/fullscreen/homeFullScreen/partials/Currency.tsx

@@ -19,15 +19,15 @@ export interface CurrencyItemType {
 }
 
 interface Props {
-  fontSize?: string;
   color?: string;
-  bgcolor?: string;
+  dialogLeft?: number;
+  fontSize?: string;
   height?: string;
   minWidth?: string;
-  noBorder?: boolean;
 }
 
-export default function Currency ({ bgcolor, color, fontSize = '22px', height, minWidth, noBorder }: Props): React.ReactElement {
+export default function Currency ({ color, fontSize = '22px', height, minWidth, dialogLeft=260 }: Props): React.ReactElement {
+// export default function Currency ({ color, fontSize = '22px' }: Props): React.ReactElement {
   const theme = useTheme();
 
   const [anchorEl, setAnchorEl] = useState<HTMLButtonElement | null>(null);
@@ -55,7 +55,15 @@ export default function Currency ({ bgcolor, color, fontSize = '22px', height, m
 
   return (
     <>
-      <Grid alignItems='center' component='button' container direction='column' item justifyContent='center' onClick={onCurrencyClick} sx={{ ...HEADER_COMPONENT_STYLE, zIndex: anchorEl && theme.zIndex.modal + 1 }}>
+      <Grid
+        alignItems='center' component='button' container direction='column' item justifyContent='center' onClick={onCurrencyClick}
+        sx={{
+          ...HEADER_COMPONENT_STYLE,
+          height: height || HEADER_COMPONENT_STYLE?.height,
+          minWidth: minWidth || HEADER_COMPONENT_STYLE?.minWidth,
+          zIndex: anchorEl && theme.zIndex.modal + 1
+        }}
+      >
         <Infotip2 text={currencyToShow?.currency}>
           <Typography color={textColor} fontSize={ fontSize } fontWeight={500}>
             {currencyToShow?.sign || '$'}
@@ -71,7 +79,7 @@ export default function Currency ({ bgcolor, color, fontSize = '22px', height, m
               boxShadow: theme.palette.mode === 'dark'
                 ? '0px 4px 4px rgba(255, 255, 255, 0.25)'
                 : '0px 0px 25px 0px rgba(0, 0, 0, 0.50)',
-              left: anchorEl?.getBoundingClientRect().right - 260,
+              left: anchorEl?.getBoundingClientRect().right - dialogLeft,
               position: 'absolute',
               top: anchorEl?.getBoundingClientRect().bottom - 30
             }

packages/extension-polkagate/src/popup/home/ProfileTab.tsx

@@ -96,11 +96,12 @@ function ProfileTab ({ index, isContainerHovered, isSelected, orderedAccounts, t
         }}
       >
         <Grid alignItems='center' container item justifyContent='center' sx={{ display: 'flex', flexDirection: 'row', flexWrap: 'nowrap', minWidth: '40px', px: '8px', width: 'fit-content' }}>
-          <Typography color='text.primary' fontSize='14px' fontWeight={400} sx={{ lineHeight: 'normal', maxWidth: '100px', overflowX: 'hidden', textOverflow: 'ellipsis', transition: 'visibility 0.1s ease', userSelect: 'none', visibility: visibleContent ? 'visible' : 'hidden', whiteSpace: 'nowrap', width: 'fit-content' }} textAlign='center'>
+          <Typography color='text.primary' fontSize='14px' sx={{ lineHeight: 'normal', maxWidth: '100px', overflowX: 'hidden', textOverflow: 'ellipsis', transition: 'visibility 0.1s ease', userSelect: 'none', visibility: visibleContent ? 'visible' : 'hidden', whiteSpace: 'nowrap', width: 'fit-content' }} textAlign='center'>
             {t(text)}
           </Typography>
           {areAllHidden && isSelected &&
-            <VaadinIcon icon='vaadin:eye-slash' style={{ display: 'block', height: '13px', marginLeft: '5px', width: '15px' }} />}
+            <VaadinIcon icon='vaadin:eye-slash' style={{ display: 'block', height: '13px', marginLeft: '5px', width: '15px' }} />
+          }
         </Grid>
       </Collapse>
     </Grid>

packages/extension-polkagate/src/popup/home/YouHave.tsx

@@ -55,7 +55,7 @@ export default function YouHave (): React.ReactElement {
     <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' }}>
+          <Typography sx={{ fontSize: '16px', fontVariant: 'small-caps', fontWeight: 400, mt: '10px' }}>
             {t('My Portfolio')}
           </Typography>
         </Grid>
@@ -70,12 +70,11 @@ export default function YouHave (): React.ReactElement {
               <Stack alignItems='center' direction='row' justifyContent='space-between' sx={{ flexWrap: 'wrap', mr: '15px', textAlign: 'start', width: '100%' }}>
                 <Stack alignItems='flex-start' direction='row' sx= {{ ml: '-5px' }}>
                   <Currency
-                    bgcolor='background.paper'
                     color='secondary.light'
-                    fontSize='28px'
-                    height='30px'
+                    dialogLeft ={64}
+                    fontSize='25px'
+                    height='27px'
                     minWidth='27px'
-                    noBorder
                   />
                   <FormatPrice
                     fontSize='28px'
@@ -117,12 +116,12 @@ export default function YouHave (): React.ReactElement {
           }
           <IconButton
             onClick={onMenuClick}
-            sx={{ p: 0, position: 'absolute', pt: '3px', right: '3px', top: '11px' }}
+            sx={{ p: 0, position: 'absolute', pt: '3px', right: '3px', top: '8px' }}
           >
             <MoreVertIcon sx={{ color: 'secondary.light', fontSize: '33px' }} />
           </IconButton>
         </Grid>
-        <Grid item sx={{ position: 'absolute', right: '30px', top: '8px' }}>
+        <Grid item sx={{ position: 'absolute', right: '30px', top: '5px' }}>
           <HideBalance
             darkColor={theme.palette.secondary.light}
             hide={isHideNumbers}
@@ -135,7 +134,7 @@ export default function YouHave (): React.ReactElement {
       <Box
         component='img'
         src={theme.palette.mode === 'dark' ? logoBlack as string : logoWhite as string}
-        sx={{ filter: 'drop-shadow(1px 1px 1px rgba(0, 0, 0, 0.5))', height: 40, left: 'calc(50% - 26px)', position: 'absolute', top: '5px', width: 40 }}
+        sx={{ filter: 'drop-shadow(1px 1px 1px rgba(0, 0, 0, 0.5))', height: 40, left: 'calc(50% - 20px)', position: 'absolute', top: '5px', width: 40 }}
       />
       {isMenuOpen &&
         <Menu

packages/extension/public/locales/en/translation.json

@@ -1462,5 +1462,6 @@
   "Unable to fetch NFT/Unique items!": "",
   "Referenda Id": "",
   "Track Id": "",
-  "Select the currency for your balance": ""
+  "Select the currency for your balance": "",
+  "available": ""
 }