fix(staking): fix up staking panel colors (#655)

dydxprotocol · Jun 10, 2024 · 7152bfe · 7152bfe
1 parent 03ae027
commit 7152bfe
Show file tree

Hide file tree

Showing 8 changed files with 55 additions and 33 deletions.
diff --git a/src/constants/styles/base.ts b/src/constants/styles/base.ts
@@ -53,13 +53,17 @@ export enum ColorToken {
   Green2 = '#2CCC98',
   Green3 = '#3EB68A',
   Green4 = '#2C5254',
+  Green5 = '#CEEDE3',
 
   Yellow0 = '#FFCC48',
   Yellow1 = '#FFB647',
 
   Red0 = '#FF5C5C',
   Red1 = '#E76565',
   Red2 = '#E45555',
+  Red3 = '#462C2E',
+  Red4 = '#412A38',
+  Red5 = '#F5E1E3',
 }
 
 /** Maps opacity to corresponding hex value */

diff --git a/src/constants/styles/colors.ts b/src/constants/styles/colors.ts
@@ -33,8 +33,6 @@ type BaseColors = {
   red: string;
 
   whiteFaded: string;
-
-  greenDark: string;
 };
 
 type LayerColors = {
@@ -87,6 +85,8 @@ type StatusColors = {
 type DirectionalColors = {
   positive: string;
   negative: string;
+  positiveDark: string;
+  negativeDark: string;
   positiveFaded: string;
   negativeFaded: string;
 };

diff --git a/src/pages/token/rewards/StakingRewardPanel.tsx b/src/pages/token/rewards/StakingRewardPanel.tsx
@@ -1,6 +1,6 @@
 import { useCallback } from 'react';
 
-import styled from 'styled-components';
+import styled, { css } from 'styled-components';
 
 import { ButtonAction } from '@/constants/buttons';
 import { DialogTypes } from '@/constants/dialogs';
@@ -16,7 +16,8 @@ import { Button } from '@/components/Button';
 import { Output, OutputType, ShowSign } from '@/components/Output';
 import { Panel } from '@/components/Panel';
 
-import { useAppDispatch } from '@/state/appTypes';
+import { useAppDispatch, useAppSelector } from '@/state/appTypes';
+import { getChartDotBackground } from '@/state/configsSelectors';
 import { openDialog } from '@/state/dialogs';
 
 import { BigNumberish } from '@/lib/numbers';
@@ -29,6 +30,8 @@ export const StakingRewardPanel = ({ usdcRewards }: ElementProps) => {
   const dispatch = useAppDispatch();
   const stringGetter = useStringGetter();
 
+  const chartDotsBackground = useAppSelector(getChartDotBackground);
+
   const openStakingRewardDialog = useCallback(
     () =>
       dispatch(
@@ -42,6 +45,7 @@ export const StakingRewardPanel = ({ usdcRewards }: ElementProps) => {
 
   return (
     <$Panel
+      backgroundImagePath={chartDotsBackground}
       slotHeader={
         <$Title>
           {stringGetter({
@@ -75,9 +79,13 @@ const $Title = styled.h3`
   z-index: 1;
 `;
 
-const $Panel = styled(Panel)`
-  background: url('/chart-dots-background-dark.svg'),
-    linear-gradient(to right, var(--color-layer-6) 65%, var(--color-green-dark));
+const $Panel = styled(Panel)<{ backgroundImagePath: string }>`
+  --gradient-start-color: var(--color-layer-5);
+
+  ${({ backgroundImagePath }) => css`
+    background: url(${backgroundImagePath}),
+      linear-gradient(270deg, var(--color-positive-dark), var(--gradient-start-color) 60%);
+  `}
   position: relative;
 
   &::before {
@@ -89,8 +97,8 @@ const $Panel = styled(Panel)`
     right: 0;
 
     border-radius: var(--panel-border-radius);
-    background: var(--color-layer-6);
-    mask-image: linear-gradient(to right, var(--color-layer-6) 30%, transparent);
+    background: var(--gradient-start-color);
+    mask-image: linear-gradient(270deg, transparent, var(--gradient-start-color) 60%);
   }
 `;
 

diff --git a/src/state/configsSelectors.ts b/src/state/configsSelectors.ts
@@ -16,6 +16,14 @@ export const getAppTheme = (state: RootState): AppTheme => {
   }
 };
 
+const DARK_CHART_BACKGROUND_URL = '/chart-dots-background-dark.svg';
+const LIGHT_CHART_BACKGROUND_URL = '/chart-dots-background-light.svg';
+
+export const getChartDotBackground = (state: RootState): string => {
+  const appTheme = getAppTheme(state);
+  return appTheme === AppTheme.Light ? LIGHT_CHART_BACKGROUND_URL : DARK_CHART_BACKGROUND_URL;
+};
+
 export const getAppColorMode = (state: RootState) => state.configs.appColorMode;
 
 export const getFeeTiers = createAppSelector([(state: RootState) => state.configs.feeTiers], (t) =>

diff --git a/src/styles/globalStyle.ts b/src/styles/globalStyle.ts
@@ -9,8 +9,6 @@ export const GlobalStyle = createGlobalStyle`
 
     --color-white-faded: ${({ theme }) => theme.whiteFaded};
 
-    --color-green-dark: ${({ theme }) => theme.greenDark};
-
     --color-layer-0: ${({ theme }) => theme.layer0};
     --color-layer-1: ${({ theme }) => theme.layer1};
     --color-layer-2: ${({ theme }) => theme.layer2};
@@ -45,6 +43,8 @@ export const GlobalStyle = createGlobalStyle`
 
     --color-positive: ${({ theme }) => theme.positive};
     --color-negative: ${({ theme }) => theme.negative};
+    --color-positive-dark: ${({ theme }) => theme.positiveDark};
+    --color-negative-dark: ${({ theme }) => theme.negativeDark};
     --color-gradient-positive: ${({ theme }) => theme.positiveFaded};
     --color-gradient-negative: ${({ theme }) => theme.negativeFaded};
 

diff --git a/src/styles/themes.ts b/src/styles/themes.ts
@@ -13,8 +13,6 @@ const ClassicThemeBase: ThemeColorBase = {
 
   whiteFaded: generateFadedColorVariant(ColorToken.White, OpacityToken.Opacity16),
 
-  greenDark: ColorToken.Green4,
-
   layer0: ColorToken.GrayBlue7,
   layer1: ColorToken.GrayBlue6,
   layer2: ColorToken.GrayBlue5,
@@ -49,6 +47,8 @@ const ClassicThemeBase: ThemeColorBase = {
 
   positive: ColorToken.Green1,
   negative: ColorToken.Red2,
+  positiveDark: ColorToken.Green4,
+  negativeDark: ColorToken.Red4,
   positiveFaded: generateFadedColorVariant(ColorToken.Green1, OpacityToken.Opacity16),
   negativeFaded: generateFadedColorVariant(ColorToken.Red2, OpacityToken.Opacity16),
 
@@ -78,8 +78,6 @@ const DarkThemeBase: ThemeColorBase = {
 
   whiteFaded: generateFadedColorVariant(ColorToken.White, OpacityToken.Opacity16),
 
-  greenDark: ColorToken.Green4,
-
   layer0: ColorToken.Black,
   layer1: ColorToken.DarkGray11,
   layer2: ColorToken.DarkGray13,
@@ -114,6 +112,8 @@ const DarkThemeBase: ThemeColorBase = {
 
   positive: ColorToken.Green0,
   negative: ColorToken.Red0,
+  positiveDark: ColorToken.Green4,
+  negativeDark: ColorToken.Red3,
   positiveFaded: generateFadedColorVariant(ColorToken.Green0, OpacityToken.Opacity16),
   negativeFaded: generateFadedColorVariant(ColorToken.Red0, OpacityToken.Opacity16),
 
@@ -143,8 +143,6 @@ const LightThemeBase: ThemeColorBase = {
 
   whiteFaded: generateFadedColorVariant(ColorToken.White, OpacityToken.Opacity16),
 
-  greenDark: ColorToken.Green4,
-
   layer0: ColorToken.White,
   layer1: ColorToken.LightGray6,
   layer2: ColorToken.White,
@@ -179,6 +177,8 @@ const LightThemeBase: ThemeColorBase = {
 
   positive: ColorToken.Green2,
   negative: ColorToken.Red1,
+  positiveDark: ColorToken.Green5,
+  negativeDark: ColorToken.Red5,
   positiveFaded: generateFadedColorVariant(ColorToken.Green2, OpacityToken.Opacity16),
   negativeFaded: generateFadedColorVariant(ColorToken.Red1, OpacityToken.Opacity16),
 
@@ -208,6 +208,8 @@ const generateTheme = (themeBase: ThemeColorBase): Theme => {
       // #InvertDirectionalColors
       positive: themeBase.negative,
       negative: themeBase.positive,
+      positiveDark: themeBase.negativeDark,
+      negativeDark: themeBase.positiveDark,
       positiveFaded: themeBase.negativeFaded,
       negativeFaded: themeBase.positiveFaded,
     },

diff --git a/src/views/charts/PnlChart.tsx b/src/views/charts/PnlChart.tsx
@@ -25,8 +25,7 @@ import {
   getSubaccountId,
 } from '@/state/accountSelectors';
 import { useAppSelector } from '@/state/appTypes';
-import { AppTheme } from '@/state/configs';
-import { getAppTheme } from '@/state/configsSelectors';
+import { getChartDotBackground } from '@/state/configsSelectors';
 
 import abacusStateManager from '@/lib/abacus';
 import { formatRelativeTime } from '@/lib/dateTime';
@@ -54,9 +53,6 @@ const PNL_TIME_RESOLUTION = 1 * timeUnits.hour;
 const getPeriodFromName = (periodName: string) =>
   HISTORICAL_PNL_PERIODS[periodName as keyof typeof HISTORICAL_PNL_PERIODS];
 
-const DARK_CHART_BACKGROUND_URL = '/chart-dots-background-dark.svg';
-const LIGHT_CHART_BACKGROUND_URL = '/chart-dots-background-light.svg';
-
 type ElementProps = {
   onTooltipContext?: (tooltipContext: TooltipContextType<PnlDatum>) => void;
   onVisibleDataChange?: (data: Array<PnlDatum>) => void;
@@ -78,10 +74,11 @@ export const PnlChart = ({
   slotEmpty,
 }: PnlChartProps) => {
   const { isTablet } = useBreakpoints();
-  const appTheme = useAppSelector(getAppTheme);
   const { equity } = useAppSelector(getSubaccount, shallowEqual) ?? {};
   const now = useNow({ intervalMs: timeUnits.minute });
 
+  const chartDotsBackground = useAppSelector(getChartDotBackground);
+
   // Chart data
   const pnlData = useAppSelector(getSubaccountHistoricalPnl, shallowEqual);
   const subaccountId = useAppSelector(getSubaccountId, shallowEqual);
@@ -219,8 +216,7 @@ export const PnlChart = ({
 
   const chartStyles = useMemo(
     () => ({
-      background:
-        appTheme === AppTheme.Light ? LIGHT_CHART_BACKGROUND_URL : DARK_CHART_BACKGROUND_URL,
+      background: chartDotsBackground,
       margin: {
         left: -0.5, // left: isMobile ? -0.5 : 70,
         right: -0.5,
@@ -234,7 +230,7 @@ export const PnlChart = ({
         bottom: 0.1,
       },
     }),
-    [appTheme, isTablet]
+    [chartDotsBackground, isTablet]
   );
 
   const xAccessorFunc = useCallback((datum: PnlDatum) => datum?.createdAt, []);

diff --git a/src/views/dialogs/StakingRewardDialog.tsx b/src/views/dialogs/StakingRewardDialog.tsx
@@ -1,5 +1,5 @@
 import { shallowEqual } from 'react-redux';
-import styled from 'styled-components';
+import styled, { css } from 'styled-components';
 
 import { ButtonAction } from '@/constants/buttons';
 import { STRING_KEYS } from '@/constants/localization';
@@ -18,6 +18,7 @@ import { WithDetailsReceipt } from '@/components/WithDetailsReceipt';
 
 import { getSubaccountEquity } from '@/state/accountSelectors';
 import { useAppSelector } from '@/state/appTypes';
+import { getChartDotBackground } from '@/state/configsSelectors';
 
 import { BigNumberish, MustBigNumber } from '@/lib/numbers';
 
@@ -30,6 +31,7 @@ export const StakingRewardDialog = ({ usdcRewards, setIsOpen }: ElementProps) =>
   const stringGetter = useStringGetter();
   const { usdcLabel } = useTokenConfigs();
 
+  const chartDotsBackground = useAppSelector(getChartDotBackground);
   const { current: equity } = useAppSelector(getSubaccountEquity, shallowEqual) ?? {};
   const newEquity = MustBigNumber(equity).plus(usdcRewards);
 
@@ -70,15 +72,15 @@ export const StakingRewardDialog = ({ usdcRewards, setIsOpen }: ElementProps) =>
 
   return (
     <$Dialog isOpen setIsOpen={setIsOpen} hasHeaderBlur={false}>
-      <$Container>
+      <$Container backgroundImagePath={chartDotsBackground}>
         <$AssetContainer>
           <$Pill>
             <$PositiveOutput type={OutputType.Asset} value={usdcRewards} showSign={ShowSign.Both} />
             {usdcLabel}
           </$Pill>
           <$AssetIcon symbol="USDC" />
         </$AssetContainer>
-        <$Heading>{stringGetter({ key: STRING_KEYS.CLAIM_STAKING_REWARDS })}</$Heading>
+        <$Heading>{stringGetter({ key: STRING_KEYS.YOU_EARNED })}</$Heading>
         <$WithDetailsReceipt detailItems={detailItems}>
           <Button action={ButtonAction.Primary} onClick={claimRewards}>
             {stringGetter({
@@ -105,7 +107,7 @@ const $Dialog = styled(Dialog)`
   --dialog-header-paddingBottom: 0rem;
 `;
 
-const $Container = styled.div`
+const $Container = styled.div<{ backgroundImagePath: string }>`
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -119,8 +121,10 @@ const $Container = styled.div`
     bottom: 0;
     right: 0;
 
-    background-image: url('/chart-dots-background-dark.svg'),
-      linear-gradient(to top, var(--color-layer-3) 60%, var(--color-green-dark) 130%);
+    ${({ backgroundImagePath }) => css`
+      background-image: url(${backgroundImagePath}),
+        linear-gradient(to top, var(--color-layer-3) 60%, var(--color-positive-dark));
+    `}
     mask-image: linear-gradient(to bottom, var(--color-layer-3) 20%, transparent);
   }
 `;
@@ -138,7 +142,7 @@ const $Pill = styled.div`
   padding: 0.25rem 0.5rem;
   gap: 0.5ch;
 
-  background: var(--color-green-dark);
+  background: var(--color-positive-dark);
   color: var(--color-text-2);
 
   margin-bottom: -0.5rem;