Cookie banner styling

[tanmoyAtb]

closes #1845

---

Submission checklist:

Layout

• Change looks good in the desktop web ui
• Change looks good in the mobile web ui

Theme

• Components / elements inspected in light mode
• Components / elements inspected in dark mode

[render]

Your Render PR Server URL is https://storage-ui-stage-pr-1855.onrender.com.

Follow its progress at https://dashboard.render.com/static/srv-c7g5n70nlki6i1rl1r6g.

[render]

Your Render PR Server URL is https://chainsafe-components-stage-pr-1855.onrender.com.

Follow its progress at https://dashboard.render.com/static/srv-c7g5n7gnlki6i1rl1rj0.

[render]

Your Render PR Server URL is https://files-ui-stage-pr-1855.onrender.com.

Follow its progress at https://dashboard.render.com/static/srv-c7g5n88nlki6i1rl1ro0.

[Tbaut]

💯

[asnaith]

Oops, I couldn't work out how to test this 🤦‍♂️

Cleared my browser, tried editing local storage etc but could not get it to show. Any tips?

[Tbaut]

Showing the banner is quite a long process, where it first checks that the posthog is initialized etc. This is something we don't have in render to prevent having our tests in the analytics. The easiest to test it would then be to edit the code here https://github.com/ChainSafe/ui-monorepo/blob/dev/packages/files-ui/src/Contexts/PosthogContext.tsx#L97 and make sure you're in a private tab.

[FSM1]

Showing the banner is quite a long process, where it first checks that the posthog is initialized etc. This is something we don't have in render to prevent having our tests in the analytics. The easiest to test it would then be to edit the code here https://github.com/ChainSafe/ui-monorepo/blob/dev/packages/files-ui/src/Contexts/PosthogContext.tsx#L97 and make sure you're in a private tab.

Managed to successfully test this on local by adding the necessary ENV variables:

REACT_APP_POSTHOG_PROJECT_API_KEY=phc_aHikZYLRMFBEPbBokafenhasCyfS7YSalx7rgsHwfXR
REACT_APP_POSTHOG_INSTANCE_ADDRESS=https://posthog.chainsafe.io