From 3c035c1c11e878611f27eaeb4e2c8c7fd1192d9c Mon Sep 17 00:00:00 2001
From: Maximus <ten.maksim97@gmail.com>
Date: Fri, 12 Aug 2022 13:32:33 +0300
Subject: [PATCH 1/4] fixed #23 changed blue color variants

---
 src/index.css | 20 ++++++++++----------
 1 file changed, 10 insertions(+), 10 deletions(-)

diff --git a/src/index.css b/src/index.css
index 34ea437..5364fa1 100644
--- a/src/index.css
+++ b/src/index.css
@@ -78,16 +78,16 @@
     --color-serv-800: 9 11 16;
     --color-serv-900: 6 7 10;
     /* ---------------------------------- Blue ---------------------------------- */
-    --color-blue-50: 240 247 254;
-    --color-blue-100: 221 237 254;
-    --color-blue-200: 182 216 252;
-    --color-blue-300: 137 192 250;
-    --color-blue-400: 74 158 247;
-    --color-blue-500: 9 109 217;
-    --color-blue-600: 8 99 196;
-    --color-blue-700: 7 87 171;
-    --color-blue-800: 6 69 137;
-    --color-blue-900: 4 49 98;
+    --color-blue-50: 230 247 255;
+    --color-blue-100: 186 231 255;
+    --color-blue-200: 145 213 255;
+    --color-blue-300: 89 192 255;
+    --color-blue-400: 64 169 255;
+    --color-blue-500: 24 144 255;
+    --color-blue-600: 9 109 217;
+    --color-blue-700: 0 80 179;
+    --color-blue-800: 0 58 140;
+    --color-blue-900: 0 39 102;
     /* ---------------------------------- Gray ---------------------------------- */
     --color-gray-50: 250 250 250;
     --color-gray-75: 240 240 240;

From 4083efda6230c1d8a5086a576839f8f5d30ecdfb Mon Sep 17 00:00:00 2001
From: Maximus <ten.maksim97@gmail.com>
Date: Fri, 12 Aug 2022 13:32:33 +0300
Subject: [PATCH 2/4] fixed #23 changed blue color variants

---
 src/index.css | 20 ++++++++++----------
 1 file changed, 10 insertions(+), 10 deletions(-)

diff --git a/src/index.css b/src/index.css
index 34ea437..5364fa1 100644
--- a/src/index.css
+++ b/src/index.css
@@ -78,16 +78,16 @@
     --color-serv-800: 9 11 16;
     --color-serv-900: 6 7 10;
     /* ---------------------------------- Blue ---------------------------------- */
-    --color-blue-50: 240 247 254;
-    --color-blue-100: 221 237 254;
-    --color-blue-200: 182 216 252;
-    --color-blue-300: 137 192 250;
-    --color-blue-400: 74 158 247;
-    --color-blue-500: 9 109 217;
-    --color-blue-600: 8 99 196;
-    --color-blue-700: 7 87 171;
-    --color-blue-800: 6 69 137;
-    --color-blue-900: 4 49 98;
+    --color-blue-50: 230 247 255;
+    --color-blue-100: 186 231 255;
+    --color-blue-200: 145 213 255;
+    --color-blue-300: 89 192 255;
+    --color-blue-400: 64 169 255;
+    --color-blue-500: 24 144 255;
+    --color-blue-600: 9 109 217;
+    --color-blue-700: 0 80 179;
+    --color-blue-800: 0 58 140;
+    --color-blue-900: 0 39 102;
     /* ---------------------------------- Gray ---------------------------------- */
     --color-gray-50: 250 250 250;
     --color-gray-75: 240 240 240;

From a17af4002fd054749841d55f8bd2f53dabb030ce Mon Sep 17 00:00:00 2001
From: Maximus <ten.maksim97@gmail.com>
Date: Fri, 12 Aug 2022 17:00:15 +0300
Subject: [PATCH 3/4] closed issue #72 add ability to custom styles for button

---
 src/components/Button/Button.tsx | 31 ++++++++++++++++++++-----------
 1 file changed, 20 insertions(+), 11 deletions(-)

diff --git a/src/components/Button/Button.tsx b/src/components/Button/Button.tsx
index e5fd5fa..7928c33 100644
--- a/src/components/Button/Button.tsx
+++ b/src/components/Button/Button.tsx
@@ -22,6 +22,7 @@ type ButtonExtentions = {
 /*                               Component props                              */
 /* -------------------------------------------------------------------------- */
 type ButtonProps = {
+  defaultStyle?: boolean;
   emphasis?: StyleType | undefined; //Choose one of three variants of button. By default it will be "high"
   disabled?: boolean;
 } & Omit<React.ComponentPropsWithoutRef<"button">, "">;
@@ -30,6 +31,7 @@ type ButtonProps = {
 /*                          Component implementation                          */
 /* -------------------------------------------------------------------------- */
 export const Button: React.FC<ButtonProps> & ButtonExtentions = ({
+  defaultStyle = true,
   emphasis = "high",
   disabled = false,
   className,
@@ -62,17 +64,24 @@ export const Button: React.FC<ButtonProps> & ButtonExtentions = ({
         },
         {
           // Define high emphasis
-          [`${btnEmphasis.EnableHigh}`]: !disabled && emphasis === "high",
-          [`${btnEmphasis.DisabledHigh}`]: disabled && emphasis === "high",
-          [`${btnEmphasis.GeneralHigh}`]: emphasis === "high",
-          // Dbtnefine medium emphasis
-          [`${btnEmphasis.EnabledMedium}`]: !disabled && emphasis === "medium",
-          [`${btnEmphasis.DisabledMedium}`]: disabled && emphasis === "medium",
-          [`${btnEmphasis.GeneralMedium}`]: emphasis === "medium",
-          // Dbtnefine low emphasis
-          [`${btnEmphasis.EnabledLow}`]: !disabled && emphasis === "low",
-          [`${btnEmphasis.DisabledLow}`]: disabled && emphasis === "low",
-          [`${btnEmphasis.GenerealLow}`]: emphasis === "low",
+          [`${btnEmphasis.EnableHigh}`]:
+            defaultStyle && !disabled && emphasis === "high",
+          [`${btnEmphasis.DisabledHigh}`]:
+            defaultStyle && disabled && emphasis === "high",
+          [`${btnEmphasis.GeneralHigh}`]: defaultStyle && emphasis === "high",
+          // Define medium emphasis
+          [`${btnEmphasis.EnabledMedium}`]:
+            defaultStyle && !disabled && emphasis === "medium",
+          [`${btnEmphasis.DisabledMedium}`]:
+            defaultStyle && disabled && emphasis === "medium",
+          [`${btnEmphasis.GeneralMedium}`]:
+            defaultStyle && emphasis === "medium",
+          // Define low emphasis
+          [`${btnEmphasis.EnabledLow}`]:
+            defaultStyle && !disabled && emphasis === "low",
+          [`${btnEmphasis.DisabledLow}`]:
+            defaultStyle && disabled && emphasis === "low",
+          [`${btnEmphasis.GenerealLow}`]: defaultStyle && emphasis === "low",
         },
         className,
       ])}

From 04b466d7ba983966df3cd69ac9cdad19002657f8 Mon Sep 17 00:00:00 2001
From: Maximus <ten.maksim97@gmail.com>
Date: Mon, 15 Aug 2022 15:28:47 +0300
Subject: [PATCH 4/4] closed issue #65 added modal bottomsheet bar

---
 src/components/AcceptCookies.tsx              | 41 +++++++++++++
 src/components/BottomSheetBar.tsx             | 58 +++++++++++++++++++
 .../modal/BottomBarAcceptCookies.tsx          | 17 ++++++
 .../containers/modal/BottomSheetModal.tsx     | 33 +++++++++++
 4 files changed, 149 insertions(+)
 create mode 100644 src/components/AcceptCookies.tsx
 create mode 100644 src/components/BottomSheetBar.tsx
 create mode 100644 src/components/containers/modal/BottomBarAcceptCookies.tsx
 create mode 100644 src/components/containers/modal/BottomSheetModal.tsx

diff --git a/src/components/AcceptCookies.tsx b/src/components/AcceptCookies.tsx
new file mode 100644
index 0000000..b2fc1dd
--- /dev/null
+++ b/src/components/AcceptCookies.tsx
@@ -0,0 +1,41 @@
+import React from "react";
+import { Button } from "./Button/Button";
+import Typography from "./typography/Typography";
+
+type AcceptCookiesProps = {
+  onClickAccept?: () => void;
+  onClickCustomise?: () => void;
+};
+
+export function AcceptCookies({
+  onClickAccept,
+  onClickCustomise,
+}: AcceptCookiesProps) {
+  return (
+    <div className="px-12 py-4 w-full bg-blue-900 flex justify-between items-center">
+      <div className="w-2/3 text-white pr-3">
+        <Typography>
+          By clicking “Accept All Cookies”, you agree to the storing of cookies
+          on your device to enhance site navigation, analyze site usage, and
+          assist in our marketing efforts.
+        </Typography>
+      </div>
+      <div className="flex w-1/3  flex-col-reverse  lg:flex-row items-center lg:space-x-5 lg:justify-end ">
+        <Button
+          onClick={onClickCustomise}
+          defaultStyle={false}
+          className="bg-tranparent hover:bg-blue-200 active:bg-blue-400 focus:bg-none focus:outline-none text-blue-700"
+        >
+          Customize settings
+        </Button>
+        <Button
+          onClick={onClickAccept}
+          emphasis="high"
+          className="focus:outline-none"
+        >
+          Accept all cookies
+        </Button>
+      </div>
+    </div>
+  );
+}
diff --git a/src/components/BottomSheetBar.tsx b/src/components/BottomSheetBar.tsx
new file mode 100644
index 0000000..6e25743
--- /dev/null
+++ b/src/components/BottomSheetBar.tsx
@@ -0,0 +1,58 @@
+import { useState } from "react";
+import { Dialog } from "@headlessui/react";
+import { Button } from "./Button/Button";
+import Typography from "components/typography/Typography";
+
+export function BottomSheetBar() {
+  // The open/closed state lives outside of the Dialog and is managed by you
+  let [isOpen, setIsOpen] = useState(true);
+
+  function handleDeactivate() {
+    alert("AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA");
+  }
+
+  return (
+    /*
+      Pass `isOpen` to the `open` prop, and use `onClose` to set
+      the state back to `false` when the user clicks outside of
+      the dialog or presses the escape key.
+    */
+    <Dialog
+      open={isOpen}
+      onClose={() => {}}
+      className="absolute bottom-0 bg-blue-900 text-white w-full"
+    >
+      <Dialog.Panel className="flex px-[47px] py-6 justify-between items-center">
+        <Dialog.Description className="items-center">
+          By clicking “Accept All Cookies”, you agree to the storing of cookies
+          on your device to enhance site navigation, analyze site usage, and
+          assist in our marketing efforts.
+        </Dialog.Description>
+        {/*
+          You can render additional buttons to dismiss your dialog by setting
+          `isOpen` to `false`.
+        */}
+        <div className="flex flex-col md:flex-row">
+          <Button
+            defaultStyle={false}
+            emphasis="low"
+            className=" items-center grow-0 min-h-max mx-3 text-blue-600 hover:bg-blue-200 focus:outline-none active:bg-blue-400"
+            onClick={handleDeactivate}
+          >
+            <Typography fontWeightVariant="semibold">
+              Customize settings
+            </Typography>
+          </Button>
+          <Button
+            className="md:w-max min-h-max mx-3 focus:outline-none items-center"
+            onClick={() => setIsOpen(false)}
+          >
+            <Typography fontWeightVariant="semibold">
+              Accept all cookies
+            </Typography>
+          </Button>
+        </div>
+      </Dialog.Panel>
+    </Dialog>
+  );
+}
diff --git a/src/components/containers/modal/BottomBarAcceptCookies.tsx b/src/components/containers/modal/BottomBarAcceptCookies.tsx
new file mode 100644
index 0000000..886ab5a
--- /dev/null
+++ b/src/components/containers/modal/BottomBarAcceptCookies.tsx
@@ -0,0 +1,17 @@
+import { AcceptCookies } from "components/AcceptCookies";
+import { BottomSheetModal } from "components/containers/modal/BottomSheetModal";
+import { useState } from "react";
+
+export function BottomBarAcceptCookies() {
+  let [isShowing, setIsShowing] = useState(true);
+
+  function closeModal() {
+    setIsShowing(false);
+  }
+
+  return (
+    <BottomSheetModal onClose={closeModal} isShowing={isShowing}>
+      <AcceptCookies onClickAccept={closeModal} />
+    </BottomSheetModal>
+  );
+}
diff --git a/src/components/containers/modal/BottomSheetModal.tsx b/src/components/containers/modal/BottomSheetModal.tsx
new file mode 100644
index 0000000..6ac7ef5
--- /dev/null
+++ b/src/components/containers/modal/BottomSheetModal.tsx
@@ -0,0 +1,33 @@
+import React, { Fragment, useState } from "react";
+import { Dialog, Transition } from "@headlessui/react";
+import { AcceptCookies } from "components/AcceptCookies";
+
+type ButtonSheetBarProps = {
+  isShowing: boolean;
+  onClose: () => void;
+  children?: React.ReactNode;
+} & Omit<React.ComponentPropsWithoutRef<"div">, "">;
+
+export function BottomSheetModal({
+  isShowing,
+  onClose,
+  children,
+}: ButtonSheetBarProps) {
+  return (
+    <Transition
+      appear
+      show={isShowing}
+      as={Fragment}
+      enter="ease-in-out duration-200"
+      enterFrom="translate-y-full"
+      enterTo="translate-y-0"
+      leave="ease-out duration-300"
+      leaveFrom="translate-y-0 opacity-100"
+      leaveTo="translate-y-full opacity-0"
+    >
+      <Dialog className="fixed bottom-0" as="div" onClose={() => {}}>
+        {children}
+      </Dialog>
+    </Transition>
+  );
+}