From e7696e339229e7792289d9eb4842fa3c14776a83 Mon Sep 17 00:00:00 2001
From: Tanmoy Basak Anjan <tanmoy3399@gmail.com>
Date: Fri, 14 Jan 2022 22:46:29 +0600
Subject: [PATCH] cookie index styling (#1855)

Co-authored-by: Thibaut Sardan <33178835+Tbaut@users.noreply.github.com>
---
 .../files-ui/src/Contexts/PosthogContext.tsx  | 25 +++++++++++--------
 1 file changed, 15 insertions(+), 10 deletions(-)

diff --git a/packages/files-ui/src/Contexts/PosthogContext.tsx b/packages/files-ui/src/Contexts/PosthogContext.tsx
index 319ab404d4..98cb723043 100644
--- a/packages/files-ui/src/Contexts/PosthogContext.tsx
+++ b/packages/files-ui/src/Contexts/PosthogContext.tsx
@@ -24,7 +24,7 @@ const PosthogContext = React.createContext<PosthogContext>({
 })
 
 const useStyles = makeStyles(
-  ({ palette, breakpoints, constants }: CSFTheme) => {
+  ({ palette, breakpoints, constants, zIndex }: CSFTheme) => {
     return createStyles({
       cookieBanner: {
         position: "fixed",
@@ -35,35 +35,39 @@ const useStyles = makeStyles(
         flexDirection: "column",
         backgroundColor: constants.cookieBanner.backgroundColor,
         padding: "16px 32px",
+        zIndex: zIndex?.layer1,
         [breakpoints.down("sm")]: {
-          padding: "8px 16px"
+          padding: "16px 16px"
         }
       },
       bannerHeading: {
         fontSize: 24,
-        lineHeight: "28px",
+        lineHeight: "42px",
         [breakpoints.down("sm")]: {
-          fontSize: 18,
-          lineHeight: "22px"
+          fontSize: 22,
+          lineHeight: "40px"
         }
       },
       bannerText: {
         fontSize: 14,
         lineHeight: "18px",
+        marginBottom: constants.generalUnit * 1.5,
         [breakpoints.down("sm")]: {
-          fontSize: 12,
+          fontSize: 13,
           lineHeight: "16px"
         }
       },
       link: {
-        color: palette.common.white.main
+        color: palette.common.white.main,
+        paddingLeft: constants.generalUnit
       },
       buttonSection: {
         display: "flex",
         flexDirection: "row",
-        "& > *": {
-          margin: 8
-        }
+        margin: `${constants.generalUnit}px 0`
+      },
+      acceptButton: {
+        marginLeft: constants.generalUnit * 2
       }
     })
   }
@@ -166,6 +170,7 @@ const PosthogProvider = ({ children }: PosthogProviderProps) => {
             <Button
               onClick={optInCapturing}
               variant='outline'
+              className={classes.acceptButton}
             >
               <Trans>Accept</Trans>
             </Button>