From c8a10144ef7e40cde724977fa371d6a00428f4df Mon Sep 17 00:00:00 2001
From: Arjun Patel <patel.arjun50@gmail.com>
Date: Tue, 25 Jan 2022 00:07:38 -0800
Subject: [PATCH] building initial onboarding teaching

---
 components/Modals/ShortcutHelpModal.tsx       | 132 ++++++++++++++++--
 .../undraw_takeout_boxes_ap54.svg             |   1 +
 styles/globals.css                            |   7 +
 3 files changed, 128 insertions(+), 12 deletions(-)
 create mode 100644 public/illustrations/undraw_takeout_boxes_ap54.svg

diff --git a/components/Modals/ShortcutHelpModal.tsx b/components/Modals/ShortcutHelpModal.tsx
index cc7f2d1..838d66b 100644
--- a/components/Modals/ShortcutHelpModal.tsx
+++ b/components/Modals/ShortcutHelpModal.tsx
@@ -1,24 +1,35 @@
-import { Carousel, Modal } from "antd";
-import { useState } from "react";
+import { Carousel, Drawer, Modal } from "antd";
+import { useRef, useState } from "react";
 import { GlobalHotKeys, KeyMap } from "react-hotkeys";
+import { FaArrowLeft, FaArrowRight, FaUserCheck } from "react-icons/fa";
+import { useKeyboardContext } from "../../contexts/keyboardContext";
 
 export default function ShortcutHelpModal() {
   const [visible, setVisible] = useState<boolean>(false);
+  const carouselRef = useRef<HTMLDivElement>();
+  const { isRecording } = useKeyboardContext();
 
-  function handleToggleModal() {
-    setVisible((pv) => !pv);
+  function handleShowModal() {
+    setVisible(true);
+  }
+  function handleDismissModal() {
+    setVisible(false);
   }
 
   const keyMap: KeyMap = {
-    SHOW_HELP_MODAL: "/",
+    SHOW_HELP_MODAL: {
+      name: "show help modal",
+      sequence: "/",
+      action: "keyup",
+    },
   };
-  const handlers = { SHOW_HELP_MODAL: handleToggleModal };
+  const handlers = { SHOW_HELP_MODAL: handleShowModal };
 
   return (
     <>
       {/* fixed help on bottom left */}
       <span
-        onClick={handleToggleModal}
+        onClick={handleShowModal}
         className="hover:cursor-pointer fixed bottom-10 right-10 bg-gray-200 bg-opacity-80 py-2 px-3 rounded text-gray-500 flex flex-row items-center space-x-2"
       >
         <span>Help</span>
@@ -33,18 +44,115 @@ export default function ShortcutHelpModal() {
 
       <GlobalHotKeys keyMap={keyMap} handlers={handlers} />
 
+      {/* <Drawer
+        title="Help"
+        placement={"right"}
+        closable={false}
+        onClose={handleDismissModal}
+        visible={visible}
+        zIndex={0}
+      ></Drawer> */}
+
       <Modal
         title="Help"
+        onCancel={handleDismissModal}
         visible={visible}
-        onCancel={handleToggleModal}
-        onOk={handleToggleModal}
+        footer={<></>}
+        zIndex={5}
       >
-        <Carousel autoplay className="text-black bg-black h-[25rem]">
+        <Carousel
+          // autoplay
+          ref={carouselRef}
+          dotPosition="top"
+          className="h-[20rem] pt-5"
+        >
           <div>
-            <h3>1</h3>
+            <span className="flex flex-col px-10">
+              <span className="flex flex-row justify-between items-center mb-10">
+                <FaArrowLeft
+                  onClick={() => carouselRef.current.prev()}
+                  className="hover:cursor-pointer bg-teal-600 text-white p-1 rounded-full text-xl"
+                />
+
+                <span className="flex flex-col ml-2 items-center">
+                  <span className="text-lg text-gray-500">
+                    Select a Teammate
+                  </span>
+                  <span className="text-md text-gray-300">
+                    Type numbers on your keyboard.
+                  </span>
+
+                  <span className="flex flex-row space-x-2">
+                    <button
+                      className={`right-1 rounded-lg py-1 px-2 ml-1 
+                            shadow-md text-center text-gray-300 text-sm font-bold`}
+                    >
+                      1
+                    </button>
+                    <button
+                      className={`right-1 rounded-lg py-1 px-2 ml-1 
+                            shadow-md text-center text-gray-300 text-sm font-bold`}
+                    >
+                      2
+                    </button>
+                    <button
+                      className={`right-1 rounded-lg py-1 px-2 ml-1 
+                            shadow-md text-center text-gray-300 text-sm font-bold`}
+                    >
+                      3
+                    </button>
+                    <span className="text-gray-300">...</span>
+                  </span>
+                </span>
+
+                <FaArrowRight
+                  onClick={() => carouselRef.current.next()}
+                  className="hover:cursor-pointer bg-teal-600 text-white p-1 rounded-full text-xl"
+                />
+              </span>
+
+              <img
+                src="/illustrations/undraw_takeout_boxes_ap54.svg"
+                className=""
+              />
+            </span>
           </div>
           <div>
-            <h3>2</h3>
+            <span className="flex flex-col px-10">
+              <span className="flex flex-row justify-between items-center mb-10">
+                <FaArrowLeft
+                  onClick={() => carouselRef.current.prev()}
+                  className="hover:cursor-pointer bg-teal-600 text-white p-1 rounded-full text-xl"
+                />
+
+                <span className="flex flex-col ml-2 items-center">
+                  <span className="text-lg text-gray-500">
+                    Send an Audio Message
+                  </span>
+                  <span className={`text-md text-gray-300`}>
+                    Press and hold R. Try it now!
+                  </span>
+
+                  <button
+                    className={`right-1 rounded-lg py-1 px-2 ml-1 
+                            shadow-md text-center text-gray-300 text-sm font-bold 
+                            ${isRecording ? "bg-orange-500 text-white" : ""}`}
+                  >
+                    R
+                  </button>
+                </span>
+
+                <FaArrowRight
+                  onClick={() => carouselRef.current.next()}
+                  className="hover:cursor-pointer bg-teal-600 text-white p-1 rounded-full text-xl"
+                />
+              </span>
+
+              <img
+                src="/illustrations/undraw_takeout_boxes_ap54.svg"
+                className=""
+              />
+            </span>
           </div>
           <div>
             <h3>3</h3>
diff --git a/public/illustrations/undraw_takeout_boxes_ap54.svg b/public/illustrations/undraw_takeout_boxes_ap54.svg
new file mode 100644
index 0000000..faa0caf
--- /dev/null
+++ b/public/illustrations/undraw_takeout_boxes_ap54.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" data-name="Layer 1" width="996.31191" height="510.67557" viewBox="0 0 996.31191 510.67557" xmlns:xlink="http://www.w3.org/1999/xlink"><polygon points="496.326 126.028 496.3 126.202 496.229 126.705 488.902 179.283 444.038 195.744 443.335 195.408 418.217 183.479 405.229 133.645 404.339 130.224 404.61 130.12 460.176 109.244 496.293 126.008 496.326 126.028" fill="#1582a0"/><polygon points="443.335 195.408 418.217 183.479 404.339 130.224 404.61 130.12 440.811 145.393 443.335 195.408" fill="#1582a0"/><polygon points="443.965 194.8 424.859 158.186 427.313 147.806 415.756 134.197 414.772 135.033 425.906 148.144 417.589 183.33 418.846 183.628 424.405 160.107 442.82 195.397 443.965 194.8" opacity="0.2"/><polygon points="496.326 126.673 496.229 126.705 440.811 146.039 405.229 133.645 404.339 130.224 404.61 130.12 460.176 109.244 496.293 126.008 496.3 126.202 496.326 126.673" fill="#3f3d56"/><polygon points="441.779 147.007 430.482 138.293 433.064 128.61 465.34 116.99 487.288 118.281 496.003 125.705 496.648 127.641 441.779 147.007" fill="#1582a0"/><polygon points="404.984 130.224 430.482 129.255 444.295 124.567 465.831 116.99 469.859 111.181 459.809 109.382 404.984 130.224" fill="#1582a0"/><rect x="544.15024" y="316.79485" width="14.08994" height="1.29074" transform="translate(-175.86286 5.76571) rotate(-19.33759)" fill="#ccc"/><polygon points="280.668 44.344 274.435 75.507 303.521 97.322 317.026 56.809 280.668 44.344" fill="#9f616a"/><circle cx="304.04072" cy="44.86323" r="28.04729" fill="#9f616a"/><path d="M345.11563,452.03529c.12826,9.04888,39.539,109.75747,34.067,122.871-8.62565,8.81723-27.17952,55.74726-35.10643,68.26672-1.03814-.00064-6.23209,15.58119-6.23209,15.58119s12.46547,19.737,25.96972,11.42667c16.98028-39.937,59.50573-62.21128,60.25713-114.26323,2.05257,16.44306,8.11167,121.98865,8.11167,121.98865s-1.16216.49347,25,3c4.06168-61.25756,20.66016-165.47535-16.49993-230.94948C429.25751,444.76377,345.11563,452.03529,345.11563,452.03529Z" transform="translate(-101.84405 -194.66221)" fill="#2f2e41"/><path d="M432.18088,675.8519c-1.21444,2.33546-9.9238,23.89289-1.99825,26.05441,9.14,2.49272,18-1,18-1s16,5,25.79186-1.35462c4.57-4.57,3.53136-8.72453,1.35022-11.73657a12.72274,12.72274,0,0,0-9.43858-5.08761c-4.969-.3543-6.547-1.27527-7.1162-3.552C457.939,675.8519,432.18088,675.8519,432.18088,675.8519Z" transform="translate(-101.84405 -194.66221)" fill="#2f2e41"/><path d="M346.70784,657.027s-22.32655,7.05049-17.62622,15.276a30.91256,30.91256,0,0,0,12.83814,11.83857s4.65644,19.19621,17.58234,19.19621c6.463,0,8.66622-3.67213,9.25376-7.34426a12.72274,12.72274,0,0,0-3.0766-10.27157c-3.26308-3.76413-3.72769-5.53119-2.52028-7.54354C364.9216,675.24072,346.70784,657.027,346.70784,657.027Z" transform="translate(-101.84405 -194.66221)" fill="#2f2e41"/><path d="M445.88264,455.07629s-4.16,8.31-20.78,5.19c-16.62-3.11-82.06,0-82.06,0s3.63-74.27-4.68-118.94,24.41-70.12,24.41-70.12l10.39-10.39c10.39-1.03,32.33,31.21,32.33,31.21,7.22,1.21,13.96,31.9,19.71,60.94.34,1.66.66,3.3.98,4.94,2.65,13.54,6.34,28.61,8.55,42.14.16.96.31,1.91.45,2.86A494.56274,494.56274,0,0,0,445.88264,455.07629Z" transform="translate(-101.84405 -194.66221)" fill="#e6e6e6"/><path d="M373.07308,222.0615s-5.24388-11.53654,8.39022-16.78043c0,0,11.53654-18.878,34.60961-6.29265,0,0,15.73165,6.29265,15.73165,23.07308s5.24388,19.92675,5.24388,19.92675-7.80905-8.01137-9.9066-14.304-18.41036-7.72028-24.703-1.42762-22.0243,5.24388-22.0243,5.24388l1.04878,23.07308s-5.24389-13.63409-7.34144-13.63409S369.92676,222.0615,373.07308,222.0615Z" transform="translate(-101.84405 -194.66221)" fill="#2f2e41"/><path d="M434.73262,400.04632c-24.78-13.47-64.92-43.01-77.87-58.99-17.07-21.05,1.55-37.05,1.55-37.05,21.11-13.32,46.35,32.38,46.35,32.38l20.44,16.58c.34,1.66.66,3.3.98,4.94C428.83265,371.44629,432.52265,386.51629,434.73262,400.04632Z" transform="translate(-101.84405 -194.66221)" opacity="0.2"/><path d="M508.70616,384.52358s36.84,14.95552,42.90343-1.85648-29.08578-16.52347-29.08578-16.52347l-13.799,1.95527Z" transform="translate(-101.84405 -194.66221)" fill="#9f616a"/><path d="M353.69062,297.165s-18.611,16.00934-1.5532,37.05235,95.451,66.00443,95.451,66.00443l51.06366-13.80439,14.45073,2.64438,2.7245-27.13051-21.28877,2.07816L440.49724,352.5027l-34.46008-27.96117S374.79507,283.85216,353.69062,297.165Z" transform="translate(-101.84405 -194.66221)" fill="#e6e6e6"/><polygon points="319.646 295.362 322.902 371.443 314.646 295.362 319.646 295.362" opacity="0.2"/><path d="M773.02557,435.60087l-29.55817,6.84884a9.01736,9.01736,0,0,1-10.75861-6.5v0a9.01736,9.01736,0,0,1,8.5135-11.29956l28.55117-.664Z" transform="translate(-101.84405 -194.66221)" fill="#ffb9b9"/><path d="M769.88743,439.93866l-6.56466-19.694L802.67813,406.802l-10.44527-91.98576h0c18.80625,3.41932,27.75663,18.2077,26.91826,37.30387l5.09144,62.76855Z" transform="translate(-101.84405 -194.66221)" fill="#3f3d56"/><path d="M797.07916,294.53589h64.2979V262.56038a32.80042,32.80042,0,0,0-9.417-23.08849,31.69094,31.69094,0,0,0-22.73419-9.56558,32.19878,32.19878,0,0,0-32.13694,31.8c-.0049.29283-.0098.571-.0098.85411Z" transform="translate(-101.84405 -194.66221)" fill="#2f2e41"/><path d="M888.262,670.29236l-20.55361-2.35863L843.11143,501.82025,792.23286,668.60762l-22.23831.67389,25.27081-205.199L791.559,417.24727l63.00855-19.87972C899.19447,428.5206,898.27088,538.55536,888.262,670.29236Z" transform="translate(-101.84405 -194.66221)" fill="#2f2e41"/><circle cx="721.72463" cy="69.27546" r="24.25998" fill="#ffb9b9"/><path d="M847.82865,307.74041l-41.10719,10.78222c6.926-13.31911,9.14216-25.75254,5.39111-37.06386l28.9772-4.71722A42.27757,42.27757,0,0,0,847.82865,307.74041Z" transform="translate(-101.84405 -194.66221)" fill="#ffb9b9"/><path d="M861.64336,406.46505c-23.056,14.66271-49.91355,31.50708-69.74744,15.16249l-9.43444-45.82441c-7.49852-6.67883-4.17326-27.28819,5.96362-56.66433a12.99436,12.99436,0,0,1,8.05522-8.04647l15.63225-5.37358c6.928,5.82606,18.28449,2.35122,31.67275-5.39111l15.49943,4.04333,6.73889,50.54163C856.29585,369.48736,857.995,388.89407,861.64336,406.46505Z" transform="translate(-101.84405 -194.66221)" fill="#3f3d56"/><path d="M842.43607,426.16643l-29.55817,6.84885a9.01739,9.01739,0,0,1-10.75862-6.5v0a9.01737,9.01737,0,0,1,8.5135-11.29957l28.55117-.664Z" transform="translate(-101.84405 -194.66221)" fill="#ffb9b9"/><path d="M884.68951,702.05094c-3.452,1.57547-6.34351-8.18888-9.25533-5.32739-8.14475,8.004-27.68348,6.20984-27.68348,6.20984a5.09135,5.09135,0,0,1-3.20912-6.63478h0a5.09135,5.09135,0,0,1,3.53235-3.15164l8.66194-2.16549,13.60049-23.9181,14.82213-1.87593.37437.61224a38.21709,38.21709,0,0,1,4.09544,31.25C888.39565,700.99921,886.71781,701.12524,884.68951,702.05094Z" transform="translate(-101.84405 -194.66221)" fill="#2f2e41"/><path d="M786.9757,702.05094c-3.452,1.57547-6.34351-8.18888-9.25532-5.32739-8.14476,8.004-27.68349,6.20984-27.68349,6.20984a5.09135,5.09135,0,0,1-3.20912-6.63478h0a5.09135,5.09135,0,0,1,3.53235-3.15164l8.66194-2.16549,13.60049-23.9181,14.82213-1.87593.37437.61224a38.21709,38.21709,0,0,1,4.09544,31.25C790.68184,700.99921,789.004,701.12524,786.9757,702.05094Z" transform="translate(-101.84405 -194.66221)" fill="#2f2e41"/><path d="M852.00893,243.70278l-6.11,19.4396-52.82626-.93884a32.65551,32.65551,0,0,1,58.93629-18.50076Z" transform="translate(-101.84405 -194.66221)" fill="#2f2e41"/><path d="M839.29793,430.50423l-6.56466-19.694,39.35536-13.44268-14.88708-93.97905h0a38.23684,38.23684,0,0,1,31.36,39.29716l5.09144,62.76854Z" transform="translate(-101.84405 -194.66221)" fill="#3f3d56"/><polygon points="643.455 182.748 602.522 191.551 594.159 151.278 609.564 130.591 623.428 127.95 638.833 143.575 643.455 182.748" fill="#ccc"/><polygon points="624.529 184.504 599.879 184.504 596.519 167.914 592.839 149.734 598.339 141.814 608.909 145.114 620.349 160.964 623.219 177.114 623.419 178.264 624.529 184.504" fill="#e6e6e6"/><polygon points="665.902 174.825 637.513 178.126 642.575 142.035 654.018 131.691 663.921 134.112 670.524 149.297 665.902 174.825" fill="#ccc"/><polygon points="669.639 153.474 666.999 168.004 658.419 217.514 625.409 228.084 624.269 227.464 606.479 217.734 596.469 167.894 596.519 167.914 622.989 178.564 623.219 177.114 623.379 176.064 625.409 163.164 634.429 153.474 664.579 146.214 669.639 153.474" fill="#e6e6e6"/><circle cx="648.73654" cy="144.89555" r="7.04226" fill="#e6e6e6"/><rect x="717.1135" y="344.61942" width="16.31791" height="0.44008" transform="translate(-151.06735 -62.16848) rotate(-10.09713)" fill="#fff"/><polygon points="624.269 227.464 606.479 217.734 596.469 167.894 596.519 167.914 592.839 149.734 598.339 141.814 608.909 145.114 620.349 160.964 623.219 177.114 623.379 176.064 623.419 178.264 623.529 184.504 624.269 227.464" fill="#f2f2f2"/><polygon points="606.696 217.796 606.27 217.682 615.045 184.776 604.997 171.529 605.348 171.263 615.526 184.681 606.696 217.796" fill="#ccc"/><rect x="720.05447" y="392.17469" width="0.44005" height="32.16289" transform="translate(-207.6544 158.34687) rotate(-25.7187)" fill="#ccc"/><path d="M769.75106,359.65063l-1.65273,9.13074-.08363.00879-7.39877,42.68492-33.01061,10.56339-.19806.09463-.132-.27509-18.596-10.16286-.21347-.05722.11443-.43134L698.666,361.84914l.05061.0198-1.09815-5.41814.82086-1.18178,2.53742-3.65317,10.56339,3.30106L722.98384,370.762l.16726.9419,1.20157,6.76058.482,2.71566,1.01893,5.73725.96831-6.16419.34772-2.2183.87588-5.57219,9.02289-9.68311,4.01189-.96612,2.7927-.67341,3.84244-.9243a7.04235,7.04235,0,1,1,9.6545-2.32615l9.84816-2.37235,2.42738,3.4837Z" transform="translate(-101.84405 -194.66221)" opacity="0.2"/><polygon points="625.321 201.848 600.673 201.848 593.631 167.077 599.133 159.154 609.696 162.455 621.14 178.3 625.321 201.848" fill="#e6e6e6"/><polygon points="659.212 234.859 626.201 245.422 607.275 235.079 597.262 185.233 623.781 195.906 626.201 180.501 635.224 170.818 665.374 163.556 670.436 170.818 667.795 185.343 659.212 234.859" fill="#e6e6e6"/><circle cx="649.52891" cy="162.23533" r="7.04226" fill="#e6e6e6"/><polygon points="625.079 244.464 607.289 234.734 597.279 184.894 597.329 184.914 593.649 166.734 599.149 158.814 609.719 162.114 621.159 177.964 624.029 194.114 624.189 193.064 624.229 195.264 624.339 201.504 625.079 244.464" fill="#f2f2f2"/><polygon points="607.488 235.135 607.063 235.022 615.838 202.115 605.789 188.868 606.14 188.602 616.319 202.021 607.488 235.135" fill="#ccc"/><rect x="720.84685" y="409.51448" width="0.44005" height="32.16289" transform="translate(-215.10056 160.40849) rotate(-25.7187)" fill="#ccc"/><polygon points="901.455 465.094 860.522 473.897 852.159 433.624 867.564 412.937 881.428 410.296 896.833 425.921 901.455 465.094" fill="#ccc"/><polygon points="882.529 466.85 857.879 466.85 854.519 450.26 850.839 432.08 856.339 424.16 866.909 427.46 878.349 443.31 881.219 459.46 881.419 460.61 882.529 466.85" fill="#e6e6e6"/><polygon points="923.902 457.171 895.513 460.473 900.575 424.381 912.018 414.038 921.921 416.458 928.524 431.643 923.902 457.171" fill="#ccc"/><polygon points="927.639 435.82 924.999 450.35 916.419 499.86 883.409 510.43 882.269 509.81 864.479 500.08 854.469 450.24 854.519 450.26 880.989 460.91 881.219 459.46 881.379 458.41 883.409 445.51 892.429 435.82 922.579 428.56 927.639 435.82" fill="#e6e6e6"/><circle cx="906.73654" cy="427.24186" r="7.04226" fill="#e6e6e6"/><rect x="975.1135" y="626.96573" width="16.31791" height="0.44008" transform="translate(-196.57165 -12.56361) rotate(-10.09713)" fill="#fff"/><polygon points="882.269 509.81 864.479 500.08 854.469 450.24 854.519 450.26 850.839 432.08 856.339 424.16 866.909 427.46 878.349 443.31 881.219 459.46 881.379 458.41 881.419 460.61 881.529 466.85 882.269 509.81" fill="#f2f2f2"/><polygon points="864.696 500.142 864.27 500.029 873.045 467.122 862.997 453.875 863.348 453.609 873.526 467.027 864.696 500.142" fill="#ccc"/><rect x="978.05447" y="674.521" width="0.44005" height="32.16289" transform="translate(-304.62081 298.27729) rotate(-25.7187)" fill="#ccc"/><polygon points="982.339 506.59 955.339 506.59 951.339 454.59 986.339 454.59 982.339 506.59" fill="#e6e6e6"/><rect x="950.83858" y="475.5904" width="36" height="8" fill="#f2f2f2"/><polygon points="996.089 458.323 990.333 456.628 990.259 454.521 964.679 446.986 963.474 448.716 957.719 447.021 954.105 452.211 996.312 464.644 996.089 458.323" fill="#ccc"/><polygon points="149.326 440.959 149.3 441.133 149.229 441.637 141.902 494.215 97.038 510.676 96.335 510.34 71.217 498.411 58.229 448.576 57.339 445.155 57.61 445.052 113.176 424.176 149.293 440.94 149.326 440.959" fill="#1582a0"/><polygon points="96.335 510.34 71.217 498.411 57.339 445.155 57.61 445.052 93.811 460.325 96.335 510.34" fill="#1582a0"/><polygon points="96.965 509.731 77.859 473.117 80.313 462.738 68.756 449.128 67.772 449.964 78.906 463.076 70.589 498.262 71.846 498.559 77.405 475.039 95.82 510.329 96.965 509.731" opacity="0.2"/><polygon points="149.326 441.605 149.229 441.637 93.811 460.97 58.229 448.576 57.339 445.155 57.61 445.052 113.176 424.176 149.293 440.94 149.3 441.133 149.326 441.605" fill="#3f3d56"/><polygon points="94.779 461.939 83.482 453.224 86.064 443.541 118.34 431.922 140.288 433.213 149.003 440.636 149.648 442.573 94.779 461.939" fill="#1582a0"/><polygon points="57.984 445.155 83.482 444.187 97.295 439.498 118.831 431.922 122.859 426.112 112.809 424.314 57.984 445.155" fill="#1582a0"/><rect x="197.15024" y="631.72632" width="14.08994" height="1.29074" transform="translate(-299.7236 -91.37041) rotate(-19.33759)" fill="#ccc"/><polygon points="36 507.786 9 507.786 5 455.786 40 455.786 36 507.786" fill="#1582a0"/><rect x="4.5" y="476.78581" width="36" height="8" fill="#e6e6e6"/><polygon points="42 452.786 36 452.786 35.333 450.786 8.667 450.786 8 452.786 2 452.786 0 458.786 44 458.786 42 452.786" fill="#3f3d56"/><rect x="202.24279" y="507.1729" width="606.0958" height="2" fill="#3f3d56"/></svg>
\ No newline at end of file
diff --git a/styles/globals.css b/styles/globals.css
index 872d8c2..9131d52 100644
--- a/styles/globals.css
+++ b/styles/globals.css
@@ -114,6 +114,13 @@ p {
   @apply bg-white text-black rounded  !important;
 }
 
+.slick-dots > li {
+  @apply bg-teal-600 !important;
+}
+li.slick-active button {
+  @apply bg-orange-500 !important;
+}
+
 /* scrollbar customization */
 ::-webkit-scrollbar {
   height: 5px;