fix: improve generate colors for tokens label and price impact color

rango-exchange · Jul 7, 2024 · 5f2893c · 5f2893c
1 parent 4953b96
commit 5f2893c
Show file tree

Hide file tree

Showing 5 changed files with 46 additions and 29 deletions.
diff --git a/widget/embedded/src/components/TokenList/TokenList.tsx b/widget/embedded/src/components/TokenList/TokenList.tsx
@@ -136,17 +136,17 @@ export function TokenList(props: PropTypes) {
           ) as BlockchainMeta;
           const colors = createTintsAndShades(blockchain.color, 'main');
           const customCssForTag = {
-            $$color: colors.main250,
+            $$color: colors.main150,
             [`.${darkTheme} &`]: {
-              $$color: colors.main850,
+              $$color: colors.main750,
             },
             backgroundColor: '$$color',
           };
 
           const customCssForTagTitle = {
-            $$color: colors.main600,
+            $$color: colors.main750,
             [`.${darkTheme} &`]: {
-              $$color: colors.main200,
+              $$color: colors.main150,
             },
             color: '$$color',
           };

diff --git a/widget/ui/src/components/FullExpandedQuote/FullExpandedQuote.tsx b/widget/ui/src/components/FullExpandedQuote/FullExpandedQuote.tsx
@@ -253,7 +253,6 @@ export function FullExpandedQuote(props: PropTypes) {
                       </div>
                       <StyledPriceImpact
                         size="small"
-                        outputColor="$neutral700"
                         warningLevel={warningLevel}
                         outputUsdValue={props.outputPrice.usdValue}
                         realOutputUsdValue={props.outputPrice.realUsdValue}

diff --git a/widget/ui/src/components/PriceImpact/PriceImpact.styles.ts b/widget/ui/src/components/PriceImpact/PriceImpact.styles.ts
@@ -1,5 +1,4 @@
-import { styled } from '../../theme';
-import { Typography } from '../Typography';
+import { darkTheme, styled } from '../../theme';
 
 export const Container = styled('div', {
   width: '100%',
@@ -8,8 +7,32 @@ export const Container = styled('div', {
   alignItems: 'center',
 });
 
-export const OutputUsdValue = styled(Typography, {
-  overflow: 'hidden',
+export const ValueTypography = styled('div', {
+  display: 'flex',
   whiteSpace: 'nowrap',
+  overflow: 'hidden',
   textOverflow: 'ellipsis',
+  '& ._typography': {
+    $$color: '$colors$neutral600',
+    [`.${darkTheme} &`]: {
+      $$color: '$colors$neutral700',
+    },
+    color: '$$color',
+  },
+  variants: {
+    hasWarning: {
+      true: {
+        '& ._typography': {
+          color: '$warning500',
+        },
+      },
+    },
+    hasError: {
+      true: {
+        '& ._typography': {
+          color: '$error500',
+        },
+      },
+    },
+  },
 });
diff --git a/widget/ui/src/components/PriceImpact/PriceImpact.tsx b/widget/ui/src/components/PriceImpact/PriceImpact.tsx
@@ -4,7 +4,7 @@ import React from 'react';
 
 import { Divider, Tooltip, Typography } from '..';
 
-import { Container, OutputUsdValue } from './PriceImpact.styles';
+import { Container, ValueTypography } from './PriceImpact.styles';
 
 export function PriceImpact(props: PriceImpactPropTypes) {
   const {
@@ -19,12 +19,8 @@ export function PriceImpact(props: PriceImpactPropTypes) {
     ...rest
   } = props;
 
-  let percentageChangeColor = '$neutral600';
-  if (!outputUsdValue || warningLevel === 'low') {
-    percentageChangeColor = '$warning500';
-  } else if (warningLevel === 'high') {
-    percentageChangeColor = '$error500';
-  }
+  const hasWarning = !outputUsdValue || warningLevel === 'low';
+  const hasError = warningLevel === 'high';
 
   return (
     <Container {...rest}>
@@ -38,19 +34,17 @@ export function PriceImpact(props: PriceImpactPropTypes) {
               : undefined
           }
           side={tooltipProps?.side}>
-          <OutputUsdValue
-            size={size}
-            variant="body"
-            color={outputColor || '$neutral600'}>
-            {outputUsdValue === '0' ? '0.00' : `~$${outputUsdValue}`}
-          </OutputUsdValue>
+          <ValueTypography>
+            <Typography size={size} variant="body" color={outputColor}>
+              {outputUsdValue === '0' ? '0.00' : `~$${outputUsdValue}`}
+            </Typography>
+          </ValueTypography>
         </Tooltip>
       )}
       {((outputUsdValue && percentageChange) || !outputUsdValue) && (
-        <>
+        <ValueTypography hasError={hasError} hasWarning={hasWarning}>
           <Divider direction="horizontal" size={4} />
-
-          <Typography size={size} variant="body" color={percentageChangeColor}>
+          <Typography size={size} variant="body">
             {outputUsdValue &&
               percentageChange &&
               `(${
@@ -61,7 +55,7 @@ export function PriceImpact(props: PriceImpactPropTypes) {
 
             {!outputUsdValue && error}
           </Typography>
-        </>
+        </ValueTypography>
       )}
     </Container>
   );

diff --git a/widget/ui/src/components/TokenAmount/TokenAmount.tsx b/widget/ui/src/components/TokenAmount/TokenAmount.tsx
@@ -5,6 +5,7 @@ import React from 'react';
 import { ChainToken } from '../ChainToken';
 import { Divider } from '../Divider';
 import { PriceImpact } from '../PriceImpact';
+import { ValueTypography } from '../PriceImpact/PriceImpact.styles';
 import { Tooltip } from '../Tooltip';
 import { Typography } from '../Typography';
 
@@ -59,12 +60,12 @@ export function TokenAmount(props: PropTypes) {
             content={props.price.realUsdValue}
             container={props.tooltipContainer}>
             {props.type === 'input' && (
-              <>
-                <Typography size="small" variant="body" color="$neutral700">
+              <ValueTypography>
+                <Typography size="small" variant="body">
                   {`~$${props.price.usdValue}`}
                 </Typography>
                 <Divider direction="horizontal" size={4} />
-              </>
+              </ValueTypography>
             )}
           </Tooltip>
           {props.type === 'output' && (