feat(staking): [LW-8691] make pool details in management drawer stick…

…y (#598)
lgobbi-atix · Oct 10, 2023 · 3c5bc80 · 3c5bc80
1 parent 97140de
commit 3c5bc80
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 8 deletions.
diff --git a/packages/staking/src/features/drawer/preferences/StepPreferencesContent.css.ts b/packages/staking/src/features/drawer/preferences/StepPreferencesContent.css.ts
@@ -0,0 +1,15 @@
+import { style } from '@lace/ui';
+import { theme } from '../../theme';
+
+export const delegationCardWrapper = style({
+  '@media': {
+    '(min-height: 668px)': {
+      backgroundColor: theme.colors.$drawerBackgroundColor,
+      boxShadow: `10px ${theme.spacing.$24} 10px ${theme.colors.$drawerBackgroundColor}, -10px ${theme.spacing.$24} 10px ${theme.colors.$drawerBackgroundColor}`,
+      minWidth: theme.spacing.$584,
+      position: 'sticky',
+      top: 0,
+      zIndex: 1,
+    },
+  },
+});
diff --git a/packages/staking/src/features/drawer/preferences/StepPreferencesContent.tsx b/packages/staking/src/features/drawer/preferences/StepPreferencesContent.tsx
@@ -1,6 +1,6 @@
 /* eslint-disable unicorn/consistent-destructuring */
 import { Wallet } from '@lace/cardano';
-import { ControlButton, Flex, PIE_CHART_DEFAULT_COLOR_SET, PieChartColor, Text } from '@lace/ui';
+import { Box, ControlButton, Flex, PIE_CHART_DEFAULT_COLOR_SET, PieChartColor, Text } from '@lace/ui';
 import { useTranslation } from 'react-i18next';
 import { DelegationCard, DelegationStatus } from '../../delegation-card';
 import { useOutsideHandles } from '../../outside-handles-provider';
@@ -11,6 +11,7 @@ import {
   useDelegationPortfolioStore,
 } from '../../store';
 import { PoolDetailsCard } from './PoolDetailsCard';
+import * as styles from './StepPreferencesContent.css';
 
 const getDraftDelegationStatus = ({ draftPortfolio }: DelegationPortfolioStore): DelegationStatus => {
   if (!draftPortfolio || draftPortfolio.length === 0) return 'no-selection';
@@ -84,13 +85,15 @@ export const StepPreferencesContent = () => {
 
   return (
     <Flex flexDirection="column" gap="$32" alignItems="stretch">
-      <DelegationCard
-        balance={compactNumber(balancesBalance?.available?.coinBalance || '0')}
-        cardanoCoinSymbol={symbol}
-        distribution={displayData}
-        status={delegationStatus}
-        showDistribution
-      />
+      <Box className={styles.delegationCardWrapper}>
+        <DelegationCard
+          balance={compactNumber(balancesBalance?.available?.coinBalance || '0')}
+          cardanoCoinSymbol={symbol}
+          distribution={displayData}
+          status={delegationStatus}
+          showDistribution
+        />
+      </Box>
       <Flex justifyContent="space-between">
         <Text.Body.Large weight="$semibold">
           {t('drawer.preferences.selectedStakePools', { count: draftPortfolio.length })}

diff --git a/packages/staking/src/features/theme/colors.ts b/packages/staking/src/features/theme/colors.ts
@@ -6,6 +6,7 @@ export const colorsContract = {
   $delegationCardInfoLabelColor: '',
   $delegationCardInfoValueColor: '',
   $delegationCardWarningValueColor: '',
+  $drawerBackgroundColor: '',
   $getStartedStepBorderColor: '',
   $getStartedStepDescriptionColor: '',
   $getStartedStepFillColor: '',
@@ -30,6 +31,7 @@ export const lightThemeColors: typeof colorsContract = {
   $delegationCardInfoLabelColor: lightColorScheme.$primary_dark_grey,
   $delegationCardInfoValueColor: lightColorScheme.$primary_black,
   $delegationCardWarningValueColor: lightColorScheme.$secondary_data_pink,
+  $drawerBackgroundColor: lightColorScheme.$primary_white,
   $getStartedStepBorderColor: lightColorScheme.$primary_light_grey_plus,
   $getStartedStepDescriptionColor: lightColorScheme.$primary_dark_grey,
   $getStartedStepFillColor: 'transparent',
@@ -56,6 +58,7 @@ export const darkThemeColors: typeof colorsContract = {
   $delegationCardInfoLabelColor: darkColorScheme.$primary_light_grey,
   $delegationCardInfoValueColor: darkColorScheme.$primary_white,
   $delegationCardWarningValueColor: lightColorScheme.$secondary_data_pink,
+  $drawerBackgroundColor: darkColorScheme.$primary_light_black,
   $getStartedStepBorderColor: darkColorScheme.$primary_mid_black,
   $getStartedStepDescriptionColor: darkColorScheme.$primary_light_grey,
   $getStartedStepFillColor: darkColorScheme.$primary_mid_black,