From 7a466746e3eb56953d83738924ea4210928164a0 Mon Sep 17 00:00:00 2001
From: Janith Rathnayaka <janithr@xepatagon.com>
Date: Mon, 15 Apr 2024 14:47:46 +0530
Subject: [PATCH] cookie-consent mobile reponsive

---
 ui/components/cookie-consent.tsx | 66 ++++++++++++++++++--------------
 1 file changed, 37 insertions(+), 29 deletions(-)

diff --git a/ui/components/cookie-consent.tsx b/ui/components/cookie-consent.tsx
index d576be87f..33bba14fb 100644
--- a/ui/components/cookie-consent.tsx
+++ b/ui/components/cookie-consent.tsx
@@ -1,37 +1,45 @@
-import { useState, useEffect } from 'react';
+import { useState, useEffect } from "react";
 
 const CookieConsent = () => {
-    const [isVisible, setIsVisible] = useState(false);
+  const [isVisible, setIsVisible] = useState(false);
 
-    useEffect(() => {
-        const cookieConsent = localStorage.getItem('cookieConsent');
-        if (!cookieConsent) {
-            setIsVisible(true);
-        }
-    }, []);
+  useEffect(() => {
+    const cookieConsent = localStorage.getItem("cookieConsent");
+    if (!cookieConsent) {
+      setIsVisible(true);
+    }
+  }, []);
 
-    const handleAccept = () => {
-        localStorage.setItem('cookieConsent', 'true');
-        setIsVisible(false);
-    };
+  const handleAccept = () => {
+    localStorage.setItem("cookieConsent", "true");
+    setIsVisible(false);
+  };
 
-    if (!isVisible) return null;
+  if (!isVisible) return null;
 
-    return (
-        <div className="fixed inset-x-0 bottom-0 cookie-bg-color text-white p-4 flex justify-between items-center">
-            <div className="max-w-[calc(100%-250px)]"> {/* Adjust max-width accordingly */}
-                <p>We use cookies on our website to give you the most relevant experience by remembering your preferences and repeat visits. By clicking “Accept All”, you consent to the use of ALL the cookies. However, you may visit "Cookie Settings" to provide a controlled consent.</p>
-            </div>
-            <div className="flex items-center space-x-2">
-                <button onClick={handleAccept} className="bg-white hover:bg-brand-blue text-brand-blue-dark hover:text-white font-semibold py-2 px-4 rounded">
-                    Accept All
-                </button>
-                <a href="https://www.undp.org/copyright-terms-use" target='_blank' >
-                    Cookie Settings
-                </a>
-            </div>
-        </div>
-    );
+  return (
+    <div className="fixed inset-x-0 bottom-0 cookie-bg-color text-white p-4 flex flex-col md:flex-row justify-between items-center">
+      <div className="max-w-full md:max-w-[calc(100%-250px)] space-y-4 md:space-y-0">
+        <p>
+          We use cookies on our website to give you the most relevant experience
+          by remembering your preferences and repeat visits. By clicking “Accept
+          All”, you consent to the use of ALL the cookies. However, you may
+          visit "Cookie Settings" to provide a controlled consent.
+        </p>
+      </div>
+      <div className="flex flex-wrap items-center space-x-2 mt-4 md:mt-0">
+        <button
+          onClick={handleAccept}
+          className="bg-white hover:bg-brand-blue text-brand-blue-dark hover:text-white font-semibold py-2 px-4 rounded"
+        >
+          Accept All
+        </button>
+        <a href="https://www.undp.org/copyright-terms-use" target="_blank">
+          Cookie Settings
+        </a>
+      </div>
+    </div>
+  );
 };
 
-export default CookieConsent;
\ No newline at end of file
+export default CookieConsent;