fix(staking): grid view breakpoints and card fade scale computations

input-output-hk · May 10, 2024 · 396812f · 396812f
1 parent 6af17d6
commit 396812f
Show file tree

Hide file tree

Showing 4 changed files with 23 additions and 23 deletions.
diff --git a/packages/staking/src/features/BrowsePools/StakePoolCard/StakePoolCard.css.ts b/packages/staking/src/features/BrowsePools/StakePoolCard/StakePoolCard.css.ts
@@ -48,28 +48,22 @@ export const skeleton = recipe({
     },
   ],
   variants: {
-    fade3: {
-      0: style({ opacity: '0.75' }),
-      1: style({ opacity: '0.5' }),
-      2: style({ opacity: '0.25' }),
-      3: style({ opacity: '0.5' }),
+    fade2: {
+      0: style({ opacity: '1' }),
+      1: style({ opacity: '0.75' }),
     },
-    fade4: {
+    fade3: {
       0: style({ opacity: '1' }),
       1: style({ opacity: '0.75' }),
       2: style({ opacity: '0.5' }),
-      3: style({ opacity: '0.25' }),
-      4: style({ opacity: '0.5' }),
     },
-    fade5: {
+    fade4: {
       0: style({ opacity: '1' }),
       1: style({ opacity: '0.75' }),
       2: style({ opacity: '0.5' }),
       3: style({ opacity: '0.25' }),
-      4: style({ opacity: '0.5' }),
-      5: style({ opacity: '0.75' }),
     },
   },
 });
 
-export type fadeVariants = Required<NonNullable<RecipeVariants<typeof skeleton>>>;
+export type FadeVariant = keyof NonNullable<RecipeVariants<typeof skeleton>>;
diff --git a/packages/staking/src/features/BrowsePools/StakePoolCard/StakePoolCardSkeleton.tsx b/packages/staking/src/features/BrowsePools/StakePoolCard/StakePoolCardSkeleton.tsx
@@ -2,6 +2,7 @@
 import { Card } from '@lace/ui';
 import cn from 'classnames';
 import * as styles from './StakePoolCard.css';
+import { FadeVariant } from './StakePoolCard.css';
 
 interface Props {
   index?: number;
@@ -10,9 +11,14 @@ interface Props {
 
 const defaultFadeScale = 4;
 
-export const StakePoolCardSkeleton = ({ index = 0, fadeScale = defaultFadeScale }: Props) => (
-  <Card.Greyed
-    className={cn(styles.card, styles.skeleton({ [`fade${fadeScale}`]: index % (fadeScale + 1) }))}
-    data-testid="stake-pool-card-skeleton"
-  />
-);
+export const StakePoolCardSkeleton = ({ index = 0, fadeScale = defaultFadeScale }: Props) => {
+  // this is necessary because computed key in `styles.skeleton({ [`fade${fadeScale}`]: 0 })` isn't type-safe for some reason
+  const skeletonVariant: FadeVariant = `fade${fadeScale}`;
+
+  return (
+    <Card.Greyed
+      className={cn(styles.card, styles.skeleton({ [skeletonVariant]: index % fadeScale }))}
+      data-testid="stake-pool-card-skeleton"
+    />
+  );
+};
diff --git a/packages/staking/src/features/BrowsePools/StakePoolsGrid/StakePoolsGrid.css.ts b/packages/staking/src/features/BrowsePools/StakePoolsGrid/StakePoolsGrid.css.ts
@@ -11,13 +11,13 @@ export const grid = style([
   {
     '@media': {
       'screen and (min-width: 668px)': {
-        gridTemplateColumns: 'repeat(4, minmax(0, 1fr))',
+        gridTemplateColumns: 'repeat(3, minmax(0, 1fr))',
       },
       'screen and (min-width: 1660px)': {
-        gridTemplateColumns: 'repeat(5, minmax(0, 1fr))',
+        gridTemplateColumns: 'repeat(4, minmax(0, 1fr))',
       },
     },
-    gridTemplateColumns: 'repeat(3, minmax(0, 1fr))',
+    gridTemplateColumns: 'repeat(2, minmax(0, 1fr))',
   },
 ]);
 

diff --git a/packages/staking/src/features/BrowsePools/StakePoolsGrid/StakePoolsGrid.tsx b/packages/staking/src/features/BrowsePools/StakePoolsGrid/StakePoolsGrid.tsx
@@ -43,8 +43,8 @@ export const StakePoolsGrid = ({
 
   const showEmptyPlaceholder = !showSkeleton && pools.length === 0;
   const matchTwoColumnsLayout = useMediaQuery({ maxWidth: 668 });
-  const matchThreeColumnsLayout = useMediaQuery({ maxWidth: 1024, minWidth: 669 });
-  const matchFourColumnsLayout = useMediaQuery({ minWidth: 1025 });
+  const matchThreeColumnsLayout = useMediaQuery({ maxWidth: 1660, minWidth: 668 });
+  const matchFourColumnsLayout = useMediaQuery({ minWidth: 1660 });
 
   const numberOfItemsPerMediaQueryMap: Partial<Record<StakePoolsGridColumnCount, boolean>> = useMemo(
     () => ({