Improve CookiesConsent Popup

Author: quentinguidee

src/App.tsx

@@ -58,6 +58,14 @@ function App() {
         setCookie("theme", newTheme);
     };
 
+    if (getCookie("cookieconsent_status") === "accepted") {
+        // @ts-ignore
+        window["ga-disable-214882935"] = false;
+    } else {
+        // @ts-ignore
+        window["ga-disable-214882935"] = true;
+    }
+
     return (
         <IntlProvider locale={lang} messages={messages}>
             <Router>

src/components/button/sass/Button.module.sass

@@ -1,8 +1,7 @@
 @import '../../../sass/variables.omega.library'
 
 .button
-    background-color: #e0e0e0
-    color: #303030
+    color: $color-secondary-text
     font-size: 12px
     cursor: pointer
     font-weight: 700
@@ -18,7 +17,7 @@
     white-space: nowrap
 
     &:hover
-        background-color: #c0c0c0
+        background-color: $color-third-background
         animation: hover-feedback 0.2s
         box-shadow: 0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.08)
 

src/components/cookiesconsent/CookiesConsent.tsx

@@ -16,23 +16,33 @@ type CookiesConsentProps = {
 export default function CookiesConsent(props: CookiesConsentProps) {
     let _show = false;
     const cookie = getCookie("cookieconsent_status");
-    if (cookie !== "dismiss" && cookie !== "allow") {
+    if (cookie !== "refused" && cookie !== "accepted") {
         _show = true;
     }
 
     const [show, setShow] = useState(_show);
 
     const agree = () => {
-        setCookie("cookieconsent_status", "dismiss");
+        setCookie("cookieconsent_status", "accepted");
         setShow(false);
+        // @ts-ignore
+        window["ga-disable-214882935"] = false;
+    };
+
+    const refuse = () => {
+        setCookie("cookieconsent_status", "refused");
+        setShow(false);
+        // @ts-ignore
+        window["ga-disable-214882935"] = true;
     };
 
     const messages = {
         text:
             props.message ||
             "This website uses cookies to ensure you get the best experience on our website.",
         learnMore: props.messageLearnMore || "Learn more",
-        gotIt: props.messageGotIt || "Got it!",
+        accept: "Accept",
+        refuse: "Refuse",
     };
 
     return (
@@ -46,9 +56,27 @@ export default function CookiesConsent(props: CookiesConsentProps) {
                     {messages.learnMore}
                 </Link>
             </div>
-            <Button onClick={agree} className={styles.button} blue>
-                {messages.gotIt}
-            </Button>
+            <div
+                style={{
+                    display: "flex",
+                    flexDirection: "row-reverse",
+                    gap: "16px",
+                    width: "100%",
+                }}
+            >
+                <Button
+                    rightIcon="sentiment_very_satisfied"
+                    onClick={agree}
+                    className={styles.button}
+                    blue
+                    big
+                >
+                    {messages.accept.toUpperCase()}
+                </Button>
+                <Button onClick={refuse} className={styles.button} big>
+                    {messages.refuse.toUpperCase()}
+                </Button>
+            </div>
         </div>
     );
 }

src/components/cookiesconsent/sass/CookiesConsent.module.sass

@@ -1,24 +1,33 @@
 @import '../../../sass/variables.omega.library'
 
 .cookiesConsent
+    display: flex
+    flex-direction: column
+    align-items: flex-start
+    gap: 16px
     z-index: 10000000
-    width: 100%
+    width: calc(100% - 96px)
     box-sizing: border-box
-    background-color: $color-third-background
+    background-color: $color-secondary-background
+    border: 1px solid $color-third-background
     color: $color-primary-text
-    padding: 12px 48px
+    margin: 24px 48px
+    margin-top: 48px
+    padding: 24px 32px
     vertical-align: middle
     font-size: 14px
     overflow: hidden
     box-shadow: 0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.08)
+    position: relative
+    border-radius: 16px
 
 .text
+    font-size: 15px
     display: inline-block
     line-height: 20px
-    margin-top: 8px
     display: inline-block
     vertical-align: middle
-    margin-right: 100px
+    margin-bottom: 16px
 
 .link
     padding: 2px 4px
@@ -31,13 +40,16 @@
 
 .button
     margin-top: 2px
-    float: right
     vertical-align: middle
+    padding: 12px 24px
 
 @media screen and ( min-width: 1400px )
     .cookiesConsent
-        padding: 12px calc(15% - 16px)
+        margin: 48px calc(15% - 16px)
+        width: calc(100% - 30% + 32px)
 
 @media screen and ( max-width: 700px )
     .cookiesConsent
-        padding: 12px 24px
+        margin: 24px
+        margin-top: 48px
+        width: calc(100% - 48px)