fix: use grid in cookie banner

Author: satazor

www/app/cookie-banner/CookieBanner.js

@@ -3,22 +3,21 @@ import { FormattedMessage } from 'react-intl';
 import classNames from 'classnames';
 import PropTypes from 'prop-types';
 import Link from 'next/link';
-import { createLocalStorageStateHook } from 'use-local-storage-state';
+import useLocalStorageState from 'use-local-storage-state';
+import { Container, Row, Col } from '../../shared/react/grid';
 
 import styles from './CookieBanner.module.css';
 
 const MAX_CONSENT_DAYS = 365;
 const MAX_REJECTED_DAYS = 7;
 
-const useLocalStorageState = createLocalStorageStateHook('cookie-banner', {
-    consents: [],
-    consentedAt: null,
-    rejectedAt: null,
-});
-
 const CookieBanner = ({ className, onConsents, ...rest }) => {
     const [mounted, setMounted] = useState(false);
-    const [state, setState] = useLocalStorageState();
+    const [state, setState] = useLocalStorageState('cookie-banner', {
+        consents: [],
+        consentedAt: null,
+        rejectedAt: null,
+    });
 
     const consents = useMemo(() => (
         state.consentedAt > Date.now() - (MAX_CONSENT_DAYS * 24 * 60 * 60 * 1000) ? state.consents : []
@@ -59,26 +58,32 @@ const CookieBanner = ({ className, onConsents, ...rest }) => {
 
     return (
         <div className={ classNames(styles.cookieBanner, className) } { ...rest }>
-            <p>
-                <FormattedMessage
-                    id="cookie-banner.text"
-                    values={ {
-                        link: /* istanbul ignore next */ (...chunks) => (
-                            <Link href="/terms">
-                                <a>{ chunks }</a>
-                            </Link>
-                        ),
-                    } } />
-            </p>
+            <Container>
+                <Row justifyContent="space-between" alignItems="center">
+                    <Col>
+                        <p>
+                            <FormattedMessage
+                                id="cookie-banner.text"
+                                values={ {
+                                    link: /* istanbul ignore next */ (...chunks) => (
+                                        <Link href="/terms">
+                                            <a>{ chunks }</a>
+                                        </Link>
+                                    ),
+                                } } />
+                        </p>
+                    </Col>
 
-            <div className={ styles.buttons }>
-                <button className={ styles.accept } type="button" onClick={ handleAcceptClick }>
-                    <FormattedMessage id="cookie-banner.accept" />
-                </button>
-                <button type="button" onClick={ handleRejectClick }>
-                    <FormattedMessage id="cookie-banner.reject" />
-                </button>
-            </div>
+                    <Col columns="auto" className={ styles.buttonsCol }>
+                        <button className={ styles.accept } type="button" onClick={ handleAcceptClick }>
+                            <FormattedMessage id="cookie-banner.accept" />
+                        </button>
+                        <button type="button" onClick={ handleRejectClick }>
+                            <FormattedMessage id="cookie-banner.reject" />
+                        </button>
+                    </Col>
+                </Row>
+            </Container>
         </div>
     );
 };

www/app/cookie-banner/CookieBanner.module.css

@@ -1,20 +1,19 @@
 @import "../../shared/styles/imports";
 
 .cookieBanner {
-    @mixin position fixed, null, null, 0, 0;
-    width: 100%;
+    @mixin position fixed, null, 0, 0, 0;
     min-width: var(--viewport-min-width);
     min-height: 8rem;
     z-index: calc(var(--z-index-cookie-banner) + 1);
-    padding: 2.5rem;
+    padding: 2rem 0;
     display: flex;
-    justify-content: space-between;
     align-items: center;
     border-top: 0.1rem solid;
     background-color: var(--color-white);
-    font-size: 1.4rem;
+    color: var(--color-black);
+    @mixin typography-body-2;
 
-    & .buttons {
+    & .buttonsCol {
         display: flex;
         flex: 0 0 auto;