Merge pull request #3658 from Emurgo/sorin/YOEXT-1324/fixes

fixes: UI issues after merging latest release
Emurgo · Sep 27, 2024 · 65a2186 · 65a2186
2 parents c5a74ea + 487bfbd
commit 65a2186
Show file tree

Hide file tree

Showing 7 changed files with 48 additions and 40 deletions.
diff --git a/packages/yoroi-extension/app/components/wallet/assets/NFTDetails.js b/packages/yoroi-extension/app/components/wallet/assets/NFTDetails.js
@@ -190,10 +190,11 @@ function NFTDetails({ nftInfo, network, intl, nextNftId, prevNftId, tab }: Props
                 objectFit: 'unset',
               },
               backgroundColor: 'ds.bg_color_max',
+              height: '100%',
             }}
             onClick={() => nftImage !== null && setOpenAndTrack()}
           >
-            <NftImage imageUrl={nftImage} name={nftInfo.name || '-'} width="100%" height="auto" contentHeight="502px" />
+            <NftImage imageUrl={nftImage} name={nftInfo.name || '-'} width="100%" height="auto" />
           </ImageItem>
         </Grid>
 

diff --git a/packages/yoroi-extension/app/components/wallet/assets/NFTsList.js b/packages/yoroi-extension/app/components/wallet/assets/NFTsList.js
@@ -206,13 +206,11 @@ export function NftImage({
   name,
   width,
   height,
-  contentHeight,
 }: {|
   imageUrl: ?string,
   name: string,
   width: string,
   height: string,
-  contentHeight?: string,
 |}): Node {
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState(false);
@@ -235,7 +233,7 @@ export function NftImage({
 
   if (error || url === null)
     return (
-      <SvgWrapper height={contentHeight}>
+      <SvgWrapper height="100%">
         <DefaultNFT />
       </SvgWrapper>
     );
@@ -266,7 +264,7 @@ function NftCardImage({ ipfsUrl, name }: {| ipfsUrl: string | null, name: string
   return (
     <Box sx={{ height: '100%', display: 'flex', flexDirection: 'column' }}>
       <Box sx={{ borderRadius: '4px', overflow: 'hidden', flex: '1 1 auto' }}>
-        <NftImage imageUrl={ipfsUrl} name={name} width="100%" height="100%" contentHeight="334px" />
+        <NftImage imageUrl={ipfsUrl} name={name} width="100%" height="100%" />
       </Box>
       <Box>
         <Typography

diff --git a/packages/yoroi-extension/app/components/wallet/send/WalletSendFormSteps/AssetsDropdown.js b/packages/yoroi-extension/app/components/wallet/send/WalletSendFormSteps/AssetsDropdown.js
@@ -65,7 +65,9 @@ export default class AssetsDropdown extends Component<Props, State> {
             </IconWrapper>
             <Typography color="ds.text_gray_medium">{token.label}</Typography>
           </div>
-          <div className={styles.amount}>{displayAmount}</div>
+          <Typography color="ds.text_gray_medium" className={styles.amount}>
+            {displayAmount}
+          </Typography>
         </div>
       );
     });

diff --git a/...s/yoroi-extension/app/components/wallet/send/WalletSendFormSteps/WalletSendPreviewStep.js b/...s/yoroi-extension/app/components/wallet/send/WalletSendFormSteps/WalletSendPreviewStep.js
@@ -217,21 +217,33 @@ export default class WalletSendPreviewStep extends Component<Props, State> {
 
     const { unitOfAccountSetting } = this.props;
     return unitOfAccountSetting.enabled ? (
-      <>
-        <div className={styles.totalAmount} id="wallet:send:confrimTransactionStep-totalAmount-text">
-          {formatValue(entry)}
-          <span className={styles.currencySymbol}>&nbsp;{truncateToken(getTokenName(this.props.getTokenInfo(entry)))}</span>
-        </div>
-        <div className={styles.totalFiatAmount} id="wallet:send:confrimTransactionStep-totalAmountInFiat-text">
-          {this.convertedToUnitOfAccount(entry, unitOfAccountSetting.currency)}
-          <span className={styles.currencySymbol}>&nbsp;{unitOfAccountSetting.currency}</span>
-        </div>
-      </>
+      <Stack direction="column" alignItems="flex-end">
+        <Stack direction="row" id="wallet:send:confrimTransactionStep-totalAmount-text">
+          <Typography variant="h4" color="ds.white_static" fontWeight={500} fontSize="20px">
+            {formatValue(entry)}
+          </Typography>
+          <Typography variant="h4" color="ds.white_static" fontWeight={500} fontSize="20px">
+            &nbsp;{truncateToken(getTokenName(this.props.getTokenInfo(entry)))}
+          </Typography>
+        </Stack>
+        <Stack direction="row" id="wallet:send:confrimTransactionStep-totalAmountInFiat-text">
+          <Typography variant="body1" color="ds.white_static" sx={{ opacity: '0.5' }}>
+            {this.convertedToUnitOfAccount(entry, unitOfAccountSetting.currency)}
+          </Typography>
+          <Typography variant="body1" color="ds.white_static" sx={{ opacity: '0.5' }}>
+            &nbsp;{unitOfAccountSetting.currency}
+          </Typography>
+        </Stack>
+      </Stack>
     ) : (
-      <div className={styles.totalAmount} id="wallet:send:confrimTransactionStep-totalAmount-text">
-        {formatValue(entry)}
-        <span className={styles.currencySymbol}>&nbsp;{truncateToken(getTokenName(this.props.getTokenInfo(entry)))}</span>
-      </div>
+      <Stack direction="row" id="wallet:send:confrimTransactionStep-totalAmount-text">
+        <Typography variant="h4" color="ds.white_static" fontWeight={500} fontSize="20px">
+          {formatValue(entry)}
+        </Typography>
+        <Typography variant="h4" color="ds.white_static" fontWeight={500} fontSize="20px">
+          &nbsp;{truncateToken(getTokenName(this.props.getTokenInfo(entry)))}
+        </Typography>
+      </Stack>
     );
   };
   renderSingleFee: TokenEntry => Node = entry => {
@@ -497,19 +509,21 @@ export default class WalletSendPreviewStep extends Component<Props, State> {
             </div>
 
             <SBox className={styles.totalAmountWrapper}>
-              <div className={styles.totalAmountLabel}>{intl.formatMessage(globalMessages.walletSendConfirmationTotalLabel)}</div>
+              <Typography variant="body1" color="ds.white_static" fontWeight={400}>
+                {intl.formatMessage(globalMessages.walletSendConfirmationTotalLabel)}
+              </Typography>
               <div>
                 <Box className={styles.totalAmountValue} mb="12px">
-                  <Typography variant="body2" color="ds.text_gray_medium">
-                    {this.renderTotalAmount(this.props.totalAmount.getDefaultEntry())}
-                  </Typography>
+                  {/* <Typography variant="body2" color="ds.text_gray_medium"> */}
+                  {this.renderTotalAmount(this.props.totalAmount.getDefaultEntry())}
+                  {/* </Typography> */}
                 </Box>
                 {amount.nonDefaultEntries().length > 0 && (
-                  <div className={styles.assetsCount}>
+                  <Typography variant="h4" color="ds.white_static" fontWeight={500} fontSize="20px" textAlign="right">
                     {intl.formatMessage(messages.nAssets, {
                       number: amount.nonDefaultEntries().length,
                     })}
-                  </div>
+                  </Typography>
                 )}
               </div>
             </SBox>

diff --git a/packages/yoroi-extension/app/containers/swap/asset-swap/ConfirmSwapTransaction.js b/packages/yoroi-extension/app/containers/swap/asset-swap/ConfirmSwapTransaction.js
@@ -182,24 +182,24 @@ export default function ConfirmSwapTransaction({
       </Box>
       <GradientBox p="16px" borderRadius="8px" color="common.white">
         <Box display="flex" justifyContent="space-between">
-          <Box>Total</Box>
+          <Typography color="ds.white_static">Total</Typography>
           <Box>
-            <Typography component="div" fontSize="20px" fontWeight="500" color="ds.text_gray_medium">
+            <Typography component="div" fontSize="20px" fontWeight="500" color="ds.white_static">
               {formattedNonPtAmount ?? formattedPtAmount}
             </Typography>
           </Box>
         </Box>
         {formattedNonPtAmount && (
           <Box display="flex" justifyContent="right">
             <Box>
-              <Typography component="div" fontSize="20px" fontWeight="500" color="ds.text_gray_medium">
+              <Typography component="div" fontSize="20px" fontWeight="500" color="ds.white_static">
                 {formattedPtAmount}
               </Typography>
             </Box>
           </Box>
         )}
         <Box display="flex" justifyContent="right">
-          <Typography component="div" variant="body1" color="ds.text_gray_medium">
+          <Typography component="div" variant="body1" color="ds.white_static" sx={{ opacity: '0.5' }}>
             {getFormattedPairingValue(ptAmount)}
           </Typography>
         </Box>

diff --git a/packages/yoroi-extension/app/containers/wallet/WalletDelegationBanner.js b/packages/yoroi-extension/app/containers/wallet/WalletDelegationBanner.js
@@ -101,14 +101,8 @@ function WalletDelegationBanner({
       <Box sx={{ position: 'absolute', bottom: '-4px', right: '20px' }}>
         <StakingIllustration height="300px" />
       </Box>
-      <Box id='staking-delegationBanner-box'>
-        <Typography
-          component="div"
-          variant="h3"
-          fontWeight={500}
-          color="comon.black"
-          marginBottom="4px"
-        >
+      <Box id="staking-delegationBanner-box">
+        <Typography component="div" variant="h3" fontWeight={500} color="comon.black" marginBottom="4px">
           {intl.formatMessage(emptyDashboardMessages.title, { ticker })}
         </Typography>
         <Typography component="div" variant="body1" color="ds.text_gray_medium">
@@ -210,7 +204,6 @@ const WrapperBanner = styled(Box)({
   padding: '24px',
   borderRadius: '8px',
   overflowY: 'hidden',
-  border: '2px solid red',
 });
 
 const AvatarWrapper = styled(Box)({

diff --git a/packages/yoroi-extension/app/styles/themes/base-palettes/light-palette.js b/packages/yoroi-extension/app/styles/themes/base-palettes/light-palette.js
@@ -51,7 +51,7 @@ export const lightPalette = {
   sys_orange_500: '#ED8600',
   sys_orange_100: '#FFF2E2',
 
-  bg_gradient_1: 'linear-gradient(180deg, #93F5E1 100%, #E4E8F7 100%)',
+  bg_gradient_1: 'linear-gradient(312deg, #C6F7ED 0%, #E4E8F7 70.58%)',
   bg_gradient_2: 'linear-gradient(206deg, rgba(11, 153, 125, 0.48) -10.43%, rgba(8, 194, 157, 0.08) 100%)',
   bg_gradient_3: 'linear-gradient(180deg, #244ABF 100%, #4760FF 100%)',
   special_web_overlay: 'rgba(31, 35, 46, 0.80)',