From 619a839eaaf91fd0d27c3d78ac4fb15f7140c986 Mon Sep 17 00:00:00 2001
From: Lucid Kobold <72232219+LucidKobold@users.noreply.github.com>
Date: Sun, 3 Apr 2022 01:19:37 -0500
Subject: [PATCH] Styling

---
 components/calender/Day.tsx                   |  4 +--
 .../{AddSticker.tsx => AddUpdateSticker.tsx}  | 30 +++++++++++--------
 2 files changed, 20 insertions(+), 14 deletions(-)
 rename components/calender/modals/{AddSticker.tsx => AddUpdateSticker.tsx} (91%)

diff --git a/components/calender/Day.tsx b/components/calender/Day.tsx
index 8b7ba03..ca19e4f 100644
--- a/components/calender/Day.tsx
+++ b/components/calender/Day.tsx
@@ -12,7 +12,7 @@ import {
 import router from "next/router";
 import React, { Fragment, useState } from "react";
 import { StickersContextProvider } from "../../contexts/StickerContext";
-import AddSticker from "./modals/AddSticker";
+import AddUpdateSticker from "./modals/AddUpdateSticker";
 import DemoStickers from "./stickers/DemoStickers";
 
 interface DayProps {
@@ -163,7 +163,7 @@ const Day = ({
           </Box>
           <StickersContextProvider>
             {isBefore(date, endOfDay(new Date())) && (
-              <AddSticker
+              <AddUpdateSticker
                 date={date}
                 isOpen={isOpen}
                 updateIsOpen={setIsOpen}
diff --git a/components/calender/modals/AddSticker.tsx b/components/calender/modals/AddUpdateSticker.tsx
similarity index 91%
rename from components/calender/modals/AddSticker.tsx
rename to components/calender/modals/AddUpdateSticker.tsx
index b8ba82a..9816fa6 100644
--- a/components/calender/modals/AddSticker.tsx
+++ b/components/calender/modals/AddUpdateSticker.tsx
@@ -43,7 +43,7 @@ interface AddStickerProps {
  * @param {React.Dispatch<React.SetStateAction<number>>} updateStep Used to navigate the pages of the modal by updating the step the modal is on.
  * @param {React.Dispatch<React.SetStateAction<StickerVal>>} updateSticker The react state function to update the selected sticker that will be added or updated.
  */
-const AddSticker = ({
+const AddUpdateSticker = ({
   isOpen,
   updateIsOpen,
   date,
@@ -171,19 +171,19 @@ const AddSticker = ({
           <HStack
             w="100%"
             h="auto"
-            justifyContent={"space-between"}
-            alignContent={"center"}
+            justifyContent="space-between"
+            alignContent="center"
           >
             <Button variant="primary" onClick={() => updateStep(step - 1)}>
               {"Previous"}
             </Button>
-            <HStack w="auto" h="auto" alignContent={"center"} spacing={6}>
+            <HStack w="auto" h="auto" alignContent="center" spacing={6}>
               <Button
                 variant="submit"
-              isDisabled={
-                selectedSticker === null || selectedSticker === currSticker
-              }
-              onClick={() => handleSubmit(selectedSticker)}
+                isDisabled={
+                  selectedSticker === null || selectedSticker === currSticker
+                }
+                onClick={() => handleSubmit(selectedSticker)}
               >
                 {"Confirm"}
               </Button>
@@ -216,13 +216,19 @@ const AddSticker = ({
           <HStack
             w="100%"
             h="auto"
-            justifyContent={"space-between"}
-            alignContent={"center"}
+            justifyContent="space-between"
+            alignContent="center"
           >
             <Heading textAlign="center" as="h2" size="md" w="100%" h="auto">
               {modalVariant && variants[modalVariant][step].header}
             </Heading>
-            <Button onClick={() => updateIsOpen(!isOpen)}>{"X"}</Button>
+            <Button
+              fontSize="2rem"
+              px="1"
+              onClick={() => updateIsOpen(!isOpen)}
+            >
+              <Icon icon="bi:x" />
+            </Button>
           </HStack>
         </ModalHeader>
         <ModalBody>
@@ -236,4 +242,4 @@ const AddSticker = ({
   );
 };
 
-export default AddSticker;
+export default AddUpdateSticker;