fix(docs): update cookie consent ui changes (#1019)

* fix(docs): update cookie consent ui changes

* fix(docs): move zIndex value away from sprinkles

* fix(docs): make cookie consent sticky

* fix(docs): move title header outside of the main content area

* fix(docs): tile header global variables

* fix(react-ui): move padding to notification content wrapper

.changeset/good-lizards-admire.md

@@ -0,0 +1,2 @@
+---
+---

packages/apps/docs/src/components/CookieConsent/CookieConsent.tsx

@@ -0,0 +1,66 @@
+import { Notification, Text } from '@kadena/react-ui';
+
+import { notificationClass } from './styles.css';
+
+import { updateConsent } from '@/utils/analytics';
+import type { FC } from 'react';
+import React, { useCallback, useEffect, useState } from 'react';
+
+export const CookieConsent: FC = () => {
+  const [cookieConsent, setCookieConsent] = useState<boolean | null>(null);
+
+  useEffect(() => {
+    const stickyValue = localStorage.getItem('cookie_consent');
+    if (stickyValue === null) return;
+    setCookieConsent(JSON.parse(stickyValue));
+  }, []);
+
+  useEffect(() => {
+    if (cookieConsent === null) return;
+    updateConsent(cookieConsent);
+  }, [cookieConsent]);
+
+  const handleAccept = useCallback(() => {
+    setCookieConsent(true);
+  }, []);
+
+  const handleReject = useCallback(() => {
+    setCookieConsent(false);
+  }, []);
+
+  if (cookieConsent !== null) return null;
+
+  return (
+    <div className={notificationClass}>
+      <Notification.Root
+        title="Cookie Consent"
+        color="info"
+        expanded
+        variant="standard"
+        icon="Cookie"
+      >
+        <Text>
+          This notification concerns the cookie policy requirement to ask users
+          for their consent to use <strong>Google Analytics</strong> or other
+          tracking tools for better optimizations/performances.
+        </Text>
+        <Notification.Actions>
+          <Notification.Button
+            icon="Check"
+            color={'positive'}
+            onClick={handleAccept}
+          >
+            Accept
+          </Notification.Button>
+          <Notification.Button
+            icon="Close"
+            color={'negative'}
+            onClick={handleReject}
+          >
+            Reject
+          </Notification.Button>
+        </Notification.Actions>
+      </Notification.Root>
+    </div>
+  );
+};

packages/apps/docs/src/components/CookieConsent/styles.css.ts

@@ -0,0 +1,13 @@
+import { sprinkles } from '@kadena/react-ui/theme';
+
+import { style } from '@vanilla-extract/css';
+
+export const notificationClass = style([
+  sprinkles({
+    position: 'sticky',
+    top: '$17',
+  }),
+  {
+    zIndex: 1000,
+  },
+]);

packages/apps/docs/src/components/Layout/components/Menu/menu.css.ts

@@ -64,10 +64,7 @@ export const menuInLayoutVariants = styleVariants({
 });
 
 export const menuLayoutVariants = styleVariants({
-  landing: {
-    ...responsiveStyle({ md: {} }),
-  },
-
+  landing: {},
   normal: {},
 });
 

packages/apps/docs/src/pages/_app.tsx

@@ -4,7 +4,7 @@ import { ModalProvider } from '@kadena/react-ui';
 import { darkThemeClass } from '@kadena/react-ui/theme';
 
 import { Analytics } from '@/components/Analytics/Analytics';
-import { ConsentModal } from '@/components/ConsentModal/ConsentModal';
+import { CookieConsent } from '@/components/CookieConsent/CookieConsent';
 import { Header } from '@/components/Layout/components/Header/Header';
 import { markDownComponents } from '@/components/Markdown';
 import { MenuProvider } from '@/hooks/useMenu/MenuProvider';
@@ -126,10 +126,10 @@ export const MyApp = ({
           <ModalProvider>
             <MenuProvider>
               <Header menuItems={props.leftMenuTree} />
+              <CookieConsent />
               <Layout {...props}>
                 <Component {...props} />
               </Layout>
-              <ConsentModal />
             </MenuProvider>
           </ModalProvider>
         </ThemeProvider>

packages/libs/react-ui/src/components/Notification/Notification.css.ts

@@ -18,7 +18,11 @@ export const containerClass = style([
   sprinkles({
     display: 'flex',
     alignItems: 'flex-start',
+<<<<<<< HEAD
     padding: '$md',
+=======
+    borderRadius: '$sm',
+>>>>>>> e7b5557dd (fix(docs): update cookie consent ui changes (#1019))
     borderStyle: 'solid',
     justifyContent: 'center',
   }),
@@ -29,6 +33,7 @@ export const containerClass = style([
 
 export const containerWrapperClass = style([
   sprinkles({
+    padding: '$md',
     display: 'flex',
     width: '100%',
     alignItems: 'flex-start',