From 57a8da218a9696230fbc68fb325ee2db68502d4b Mon Sep 17 00:00:00 2001 From: Mohamed Ismail Date: Wed, 11 Oct 2023 16:31:54 +0200 Subject: [PATCH] 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 | 2 + .../components/ConsentModal/ConsentModal.tsx | 77 ------------------- .../src/components/ConsentModal/styles.css.ts | 40 ---------- .../CookieConsent/CookieConsent.tsx | 66 ++++++++++++++++ .../components/CookieConsent/styles.css.ts | 13 ++++ .../Layout/components/Menu/menu.css.ts | 5 +- packages/apps/docs/src/pages/_app.tsx | 4 +- .../Notification/Notification.css.ts | 5 ++ 8 files changed, 89 insertions(+), 123 deletions(-) create mode 100644 .changeset/good-lizards-admire.md delete mode 100644 packages/apps/docs/src/components/ConsentModal/ConsentModal.tsx delete mode 100644 packages/apps/docs/src/components/ConsentModal/styles.css.ts create mode 100644 packages/apps/docs/src/components/CookieConsent/CookieConsent.tsx create mode 100644 packages/apps/docs/src/components/CookieConsent/styles.css.ts diff --git a/.changeset/good-lizards-admire.md b/.changeset/good-lizards-admire.md new file mode 100644 index 0000000000..a845151cc8 --- /dev/null +++ b/.changeset/good-lizards-admire.md @@ -0,0 +1,2 @@ +--- +--- diff --git a/packages/apps/docs/src/components/ConsentModal/ConsentModal.tsx b/packages/apps/docs/src/components/ConsentModal/ConsentModal.tsx deleted file mode 100644 index 9fb8d4f21f..0000000000 --- a/packages/apps/docs/src/components/ConsentModal/ConsentModal.tsx +++ /dev/null @@ -1,77 +0,0 @@ -import { Box, Stack, SystemIcon, Text, useModal } from '@kadena/react-ui'; - -import { consentButtonColorVariants } from './styles.css'; - -import { updateConsent } from '@/utils/analytics'; -import type { FC } from 'react'; -import React, { useCallback, useEffect, useState } from 'react'; - -export const ConsentModal: FC = () => { - const [cookieConsent, setCookieConsent] = useState(null); - const [mounted, setMounted] = useState(false); - const { renderModal, clearModal } = useModal(); - - useEffect(() => { - setMounted(true); - 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); - clearModal(); - }, [clearModal]); - - const handleReject = useCallback(() => { - setCookieConsent(false); - clearModal(); - }, [clearModal]); - - useEffect(() => { - if (!mounted) return; - if (cookieConsent !== null) { - clearModal(); - return; - } - - renderModal( - <> - We are using cookies on this website! - - - - - - - , - - 'Cookie consent', - ); - }, [ - clearModal, - cookieConsent, - mounted, - handleAccept, - handleReject, - renderModal, - ]); - return null; -}; diff --git a/packages/apps/docs/src/components/ConsentModal/styles.css.ts b/packages/apps/docs/src/components/ConsentModal/styles.css.ts deleted file mode 100644 index f744456ef5..0000000000 --- a/packages/apps/docs/src/components/ConsentModal/styles.css.ts +++ /dev/null @@ -1,40 +0,0 @@ -import { sprinkles, vars } from '@kadena/react-ui/theme'; - -import { style, styleVariants } from '@vanilla-extract/css'; - -const consentButton = style([ - sprinkles({ - display: 'flex', - alignItems: 'center', - backgroundColor: 'transparent', - cursor: 'pointer', - }), - { - border: 0, - }, -]); - -export const consentButtonColorVariants = styleVariants({ - positive: [ - consentButton, - sprinkles({ - color: '$positiveContrastInverted', - }), - { - ':hover': { - color: vars.colors.$positiveHighContrast, - }, - }, - ], - negative: [ - consentButton, - sprinkles({ - color: '$negativeContrastInverted', - }), - { - ':hover': { - color: vars.colors.$negativeHighContrast, - }, - }, - ], -}); diff --git a/packages/apps/docs/src/components/CookieConsent/CookieConsent.tsx b/packages/apps/docs/src/components/CookieConsent/CookieConsent.tsx new file mode 100644 index 0000000000..36f1d7bd18 --- /dev/null +++ b/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(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 ( +
+ + + This notification concerns the cookie policy requirement to ask users + for their consent to use Google Analytics or other + tracking tools for better optimizations/performances. + + + + Accept + + + Reject + + + +
+ ); +}; diff --git a/packages/apps/docs/src/components/CookieConsent/styles.css.ts b/packages/apps/docs/src/components/CookieConsent/styles.css.ts new file mode 100644 index 0000000000..6947adac31 --- /dev/null +++ b/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, + }, +]); diff --git a/packages/apps/docs/src/components/Layout/components/Menu/menu.css.ts b/packages/apps/docs/src/components/Layout/components/Menu/menu.css.ts index 4a5d0af27a..d380de51bd 100644 --- a/packages/apps/docs/src/components/Layout/components/Menu/menu.css.ts +++ b/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: {}, }); diff --git a/packages/apps/docs/src/pages/_app.tsx b/packages/apps/docs/src/pages/_app.tsx index 0c7de8cd7a..b09848a730 100644 --- a/packages/apps/docs/src/pages/_app.tsx +++ b/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 = ({
+ - diff --git a/packages/libs/react-ui/src/components/Notification/Notification.css.ts b/packages/libs/react-ui/src/components/Notification/Notification.css.ts index f8335bda28..340023370c 100644 --- a/packages/libs/react-ui/src/components/Notification/Notification.css.ts +++ b/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',