fix(staking): [LW-10546] grid view breakpoints and card fade scale computations (#1148)

* fix(staking): grid view breakpoints and card fade scale computations LW-10546

* test(extension): update LW-9996

---------

Co-authored-by: Tom Mayel <tom.mayel@iohk.io>
Co-authored-by: wklos-iohk <wojciech.klos@iohk.io>

Author: 3 people

packages/e2e-tests/src/features/MultiDelegationPageExtended.part1.feature

@@ -221,13 +221,13 @@ Feature: Staking Page - Extended View
     And I open Browse pools tab
     And I switch to grid view on "Browse pools" tab
     Then stake pool grid view is displayed
-    Then I see 5 stake pool cards in a row
-    When I resize the window to a width of: 1660 and a height of: 1080
-    Then I see 5 stake pool cards in a row
-    When I resize the window to a width of: 1659 and a height of: 1080
     Then I see 4 stake pool cards in a row
-    When I resize the window to a width of: 668 and a height of: 1080
+    When I resize the window to a width of: 1660 and a height of: 1080
     Then I see 4 stake pool cards in a row
-    When I resize the window to a width of: 667 and a height of: 1080
+    When I resize the window to a width of: 1659 and a height of: 1080
+    Then I see 3 stake pool cards in a row
+    When I resize the window to a width of: 669 and a height of: 1080
     Then I see 3 stake pool cards in a row
+    When I resize the window to a width of: 668 and a height of: 1080
+    Then I see 2 stake pool cards in a row
 

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>>;

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"
+    />
+  );
+};

packages/staking/src/features/BrowsePools/StakePoolsGrid/StakePoolsGrid.css.ts

@@ -10,14 +10,14 @@ export const grid = style([
   }),
   {
     '@media': {
-      'screen and (min-width: 668px)': {
-        gridTemplateColumns: 'repeat(4, minmax(0, 1fr))',
+      'screen and (min-width: 669px)': {
+        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))',
   },
 ]);
 

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(
     () => ({