cookie banner styles (#493)

* cookie banner styles * Update src/components/CookieConsent/CookieConsentModal.tsx Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com> Signed-off-by: Prathipati Nithish <92970000+Nithishprem@users.noreply.github.com> --------- Signed-off-by: Prathipati Nithish <92970000+Nithishprem@users.noreply.github.com> Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>
omnistrate-oss · Jan 10, 2025 · b10c1e4 · b10c1e4
1 parent 77cf6e6
commit b10c1e4
Show file tree

Hide file tree

Showing 4 changed files with 130 additions and 61 deletions.
diff --git a/src/components/CookieConsent/CookieConsentModal.tsx b/src/components/CookieConsent/CookieConsentModal.tsx
@@ -1,8 +1,8 @@
 import { useState } from "react";
 import { Box, Stack, styled, Typography } from "@mui/material";
-import Flag from "../Icons/Flag/Flag";
+import FlagWithBackground from "../Icons/Flag/FlagWithBackground";
 import CloseIcon from "@mui/icons-material/Close";
-import StyledButton from "../Button/Button";
+import Button from "../Button/Button";
 // import CookiePreferenceModal from "./CookiePreferenceModal";
 import { useCookieConsentContext } from "src/context/cookieConsentContext";
 import Link from "next/link";
@@ -13,9 +13,9 @@ const StyledConsentContainer = styled(Box)<{ maxWidth?: string }>(
     bottom: "0",
     right: "50%",
     transform: "translateX(50%)",
-    background: "#4B5565",
+    background: "#364152",
     borderRadius: "12px",
-    border: "1px solid #364152",
+    border: "1px solid #4B5565",
     boxShadow:
       "0px 2px 2px -1px #0A0D120A, 0px 4px 6px -2px #0A0D1208, 0px 12px 16px -4px #0A0D1214",
     padding: "12px",
@@ -28,28 +28,6 @@ const StyledConsentContainer = styled(Box)<{ maxWidth?: string }>(
   })
 );
 
-const StartIcon = () => {
-  return (
-    <Box
-      sx={{
-        padding: "12px",
-        borderRadius: "12px",
-        background: "#4B5565",
-        border: "2px solid rgba(255, 255, 255, 0.12)",
-        // borderImageSource:
-        //   'linear-gradient(180deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0) 100%)',
-        // boxShadow:
-        //   '0px 1px 2px 0px #0A0D120D, 0px -2px 0px 0px #0A0D120D inset, 0px 0px 0px 1px #0A0D122E inset',
-        display: "flex",
-        alignItems: "center",
-        justifyContent: "center",
-      }}
-    >
-      <Flag color="#ffffff" />
-    </Box>
-  );
-};
-
 function CookieConsentModal() {
   const [isPreferenceModalOpen, setIsPreferenceModalOpen] = useState(false);
 
@@ -100,7 +78,7 @@ function CookieConsentModal() {
         <StyledConsentContainer maxWidth={"1216px"}>
           <Stack direction="row" justifyContent="space-between">
             <Stack direction="row" alignItems="center" gap="16px">
-              <StartIcon />
+              <FlagWithBackground />
               <Typography
                 sx={{
                   fontSize: "16px",
@@ -125,22 +103,24 @@ function CookieConsentModal() {
             </Stack>
 
             <Stack direction="row" gap="16px" alignItems="center">
-              <StyledButton
+              <Button
+                size="large"
                 variant="contained"
                 fontColor="#000000"
                 bgColor="#ffffff"
                 onClick={handleAllowNecessary}
               >
-                Allow Necessary
-              </StyledButton>
-              <StyledButton
+                Allow necessary
+              </Button>
+              <Button
+                size="large"
                 variant="contained"
                 fontColor="#ffffff"
                 bgColor="#000000"
                 onClick={handleAllowAll}
               >
                 Allow all
-              </StyledButton>
+              </Button>
               <CloseIcon
                 htmlColor="#ffffff"
                 sx={{ cursor: "pointer" }}

diff --git a/src/components/CookieConsent/CookiePreferenceModal.tsx b/src/components/CookieConsent/CookiePreferenceModal.tsx
@@ -7,7 +7,6 @@ import {
   styled,
   Typography,
 } from "@mui/material";
-import Flag from "../Icons/Flag/Flag";
 import CloseIcon from "@mui/icons-material/Close";
 import StyledButton from "../Button/Button";
 import _ from "lodash";
@@ -68,9 +67,7 @@ const Header = ({ handleClose }: HeaderProps) => {
           alignItems: "center",
           justifyContent: "center",
         }}
-      >
-        <Flag color="#414651" />
-      </Box>
+      />
 
       <IconButton onClick={handleClose}>
         <CloseIcon />

diff --git a/src/components/Icons/Flag/Flag.tsx b/src/components/Icons/Flag/Flag.tsx
diff --git a/src/components/Icons/Flag/FlagWithBackground.tsx b/src/components/Icons/Flag/FlagWithBackground.tsx
@@ -0,0 +1,117 @@
+const FlagWithBackground = () => (
+  <svg
+    width={52}
+    height={53}
+    viewBox="0 0 52 53"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <g filter="url(#filter0_dii_10108_1692)">
+      <path
+        d="M2 11.5439C2 6.0211 6.47715 1.54395 12 1.54395H40C45.5229 1.54395 50 6.0211 50 11.5439V39.5439C50 45.0668 45.5228 49.5439 40 49.5439H12C6.47715 49.5439 2 45.0668 2 39.5439V11.5439Z"
+        fill="#4B5565"
+      />
+      <path
+        d="M3 11.5439C3 6.57338 7.02944 2.54395 12 2.54395H40C44.9706 2.54395 49 6.57338 49 11.5439V39.5439C49 44.5145 44.9706 48.5439 40 48.5439H12C7.02944 48.5439 3 44.5145 3 39.5439V11.5439Z"
+        stroke="url(#paint0_linear_10108_1692)"
+        strokeWidth={2}
+      />
+      <path
+        d="M28.0913 20.2662H34.0451C34.5172 20.2662 34.7533 20.2662 34.8914 20.3654C35.0118 20.452 35.0903 20.5854 35.1075 20.7327C35.1272 20.9016 35.0126 21.108 34.7833 21.5207L33.3624 24.0783C33.2792 24.228 33.2376 24.3028 33.2213 24.3821C33.2069 24.4522 33.2069 24.5246 33.2213 24.5947C33.2376 24.674 33.2792 24.7488 33.3624 24.8985L34.7833 27.4561C35.0126 27.8688 35.1272 28.0752 35.1075 28.2441C35.0903 28.3914 35.0118 28.5247 34.8914 28.6113C34.7533 28.7106 34.5172 28.7106 34.0451 28.7106H26.6136C26.0224 28.7106 25.7268 28.7106 25.501 28.5956C25.3024 28.4944 25.1409 28.3329 25.0397 28.1343C24.9247 27.9085 24.9247 27.6129 24.9247 27.0217V24.4884M21.2302 35.0439L17.008 18.1551M18.5914 24.4884H26.4024C26.9936 24.4884 27.2892 24.4884 27.515 24.3733C27.7136 24.2721 27.8751 24.1107 27.9763 23.912C28.0913 23.6863 28.0913 23.3907 28.0913 22.7995V17.7328C28.0913 17.1417 28.0913 16.8461 27.9763 16.6203C27.8751 16.4217 27.7136 16.2602 27.515 16.159C27.2892 16.0439 26.9936 16.0439 26.4024 16.0439H18.6433C17.906 16.0439 17.5373 16.0439 17.2852 16.1967C17.0642 16.3306 16.8999 16.5409 16.8236 16.7878C16.7366 17.0695 16.826 17.4272 17.0048 18.1425L18.5914 24.4884Z"
+        stroke="white"
+        strokeWidth={2}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </g>
+    <defs>
+      <filter
+        id="filter0_dii_10108_1692"
+        x={0}
+        y={0.543945}
+        width={52}
+        height={52}
+        filterUnits="userSpaceOnUse"
+        colorInterpolationFilters="sRGB"
+      >
+        <feFlood floodOpacity={0} result="BackgroundImageFix" />
+        <feColorMatrix
+          in="SourceAlpha"
+          type="matrix"
+          values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
+          result="hardAlpha"
+        />
+        <feOffset dy={1} />
+        <feGaussianBlur stdDeviation={1} />
+        <feComposite in2="hardAlpha" operator="out" />
+        <feColorMatrix
+          type="matrix"
+          values="0 0 0 0 0.0392157 0 0 0 0 0.0496732 0 0 0 0 0.0705882 0 0 0 0.05 0"
+        />
+        <feBlend
+          mode="normal"
+          in2="BackgroundImageFix"
+          result="effect1_dropShadow_10108_1692"
+        />
+        <feBlend
+          mode="normal"
+          in="SourceGraphic"
+          in2="effect1_dropShadow_10108_1692"
+          result="shape"
+        />
+        <feColorMatrix
+          in="SourceAlpha"
+          type="matrix"
+          values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
+          result="hardAlpha"
+        />
+        <feOffset dy={-2} />
+        <feComposite in2="hardAlpha" operator="arithmetic" k2={-1} k3={1} />
+        <feColorMatrix
+          type="matrix"
+          values="0 0 0 0 0.0392157 0 0 0 0 0.0496732 0 0 0 0 0.0705882 0 0 0 0.05 0"
+        />
+        <feBlend
+          mode="normal"
+          in2="shape"
+          result="effect2_innerShadow_10108_1692"
+        />
+        <feColorMatrix
+          in="SourceAlpha"
+          type="matrix"
+          values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
+          result="hardAlpha"
+        />
+        <feMorphology
+          radius={1}
+          operator="erode"
+          in="SourceAlpha"
+          result="effect3_innerShadow_10108_1692"
+        />
+        <feOffset />
+        <feComposite in2="hardAlpha" operator="arithmetic" k2={-1} k3={1} />
+        <feColorMatrix
+          type="matrix"
+          values="0 0 0 0 0.0392157 0 0 0 0 0.0496732 0 0 0 0 0.0705882 0 0 0 0.18 0"
+        />
+        <feBlend
+          mode="normal"
+          in2="effect2_innerShadow_10108_1692"
+          result="effect3_innerShadow_10108_1692"
+        />
+      </filter>
+      <linearGradient
+        id="paint0_linear_10108_1692"
+        x1={26}
+        y1={1.54395}
+        x2={26}
+        y2={49.5439}
+        gradientUnits="userSpaceOnUse"
+      >
+        <stop stopColor="white" stopOpacity={0.12} />
+        <stop offset={1} stopColor="white" stopOpacity={0} />
+      </linearGradient>
+    </defs>
+  </svg>
+);
+export default FlagWithBackground;