From 7a3399edb1ae28506de47f9d0a35f85b646e0c8c Mon Sep 17 00:00:00 2001
From: Quentin Leonetti <q.leonetti@gmail.com>
Date: Tue, 5 Mar 2024 14:46:31 +0100
Subject: [PATCH] Analytics - alternating colour on table (#4184)

* new color on table

* turn analytics flag off

* safer css

* fix test

* fix linting
---
 packages/flags/src/index.ts                          |  1 +
 .../src/organisms/LeadershipMembershipTable.tsx      | 12 +++++++-----
 .../src/organisms/__tests__/MainNavigation.test.tsx  |  9 +++++++++
 3 files changed, 17 insertions(+), 5 deletions(-)

diff --git a/packages/flags/src/index.ts b/packages/flags/src/index.ts
index 4738f04b59..fee0419eac 100644
--- a/packages/flags/src/index.ts
+++ b/packages/flags/src/index.ts
@@ -8,6 +8,7 @@ export type Flags = Partial<Record<Flag, boolean | undefined>>;
 let overrides: Flags = {
   // flags already live in prod:
   // can also be used to manually disable a flag in development:
+  ANALYTICS: false,
   DISPLAY_EVENTS: false,
 };
 
diff --git a/packages/react-components/src/organisms/LeadershipMembershipTable.tsx b/packages/react-components/src/organisms/LeadershipMembershipTable.tsx
index 9d9014b717..1d13184af6 100644
--- a/packages/react-components/src/organisms/LeadershipMembershipTable.tsx
+++ b/packages/react-components/src/organisms/LeadershipMembershipTable.tsx
@@ -1,11 +1,11 @@
 import { css } from '@emotion/react';
 import { Card } from '../atoms';
-import { charcoal, steel } from '../colors';
+import { charcoal, neutral200, steel } from '../colors';
 import { perRem, tabletScreen } from '../pixels';
 
 const container = css({
   display: 'grid',
-  padding: `${32 / perRem}em ${24 / perRem}em ${15 / perRem}em`,
+  paddingTop: `${32 / perRem}em`,
 });
 
 const gridTitleStyles = css({
@@ -25,16 +25,18 @@ const rowTitleStyles = css({
 
 const rowStyles = css({
   display: 'grid',
-  paddingTop: `${20 / perRem}em`,
-  paddingBottom: 0,
+  padding: `${20 / perRem}em ${24 / perRem}em 0`,
   borderBottom: `1px solid ${steel.rgb}`,
   ':first-of-type': {
     borderBottom: 'none',
   },
+  ':nth-of-type(2n+3)': {
+    background: neutral200.rgb,
+  },
   ':last-child': {
     borderBottom: 'none',
     marginBottom: 0,
-    paddingBottom: 0,
+    paddingBottom: `${15 / perRem}em`,
   },
   [`@media (min-width: ${tabletScreen.min}px)`]: {
     gridTemplateColumns: '1fr 1fr 1fr 1fr 1fr',
diff --git a/packages/react-components/src/organisms/__tests__/MainNavigation.test.tsx b/packages/react-components/src/organisms/__tests__/MainNavigation.test.tsx
index 37637a2a26..f563d46c6d 100644
--- a/packages/react-components/src/organisms/__tests__/MainNavigation.test.tsx
+++ b/packages/react-components/src/organisms/__tests__/MainNavigation.test.tsx
@@ -2,11 +2,20 @@ import { StaticRouter } from 'react-router-dom';
 import { render } from '@testing-library/react';
 import { network } from '@asap-hub/routing';
 import { findParentWithStyle } from '@asap-hub/dom-test-utils';
+import { renderHook } from '@testing-library/react-hooks';
+import { useFlags } from '@asap-hub/react-context';
 
 import MainNavigation from '../MainNavigation';
 
 it('renders the navigation items', () => {
+  const {
+    result: { current },
+  } = renderHook(useFlags);
+
+  current.enable('ANALYTICS');
+
   const { getAllByRole } = render(<MainNavigation userOnboarded={true} />);
+
   expect(
     getAllByRole('listitem').map((item) => {
       expect(item).toHaveStyle('opacity:');