From f6ae31fd04f8a11282ab6c1eb75d56d8eebd33de Mon Sep 17 00:00:00 2001
From: Lucid Kobold <72232219+LucidKobold@users.noreply.github.com>
Date: Sun, 3 Apr 2022 02:03:10 -0500
Subject: [PATCH] Updated the add sticker modal. Disabled the next button on
 the edit modal when no sticker has been selected.

---
 .../calender/modals/AddUpdateSticker.tsx      | 31 +++++++++++++------
 package.json                                  |  2 +-
 theme/layout/Header.tsx                       |  2 +-
 3 files changed, 24 insertions(+), 11 deletions(-)

diff --git a/components/calender/modals/AddUpdateSticker.tsx b/components/calender/modals/AddUpdateSticker.tsx
index 5691816..f38a6ce 100644
--- a/components/calender/modals/AddUpdateSticker.tsx
+++ b/components/calender/modals/AddUpdateSticker.tsx
@@ -58,6 +58,8 @@ const AddUpdateSticker = ({
 
   const { addEditSticker } = useContext(StickersContext);
 
+  // ! Update these states to sat "add" and "edit" for easier reading.
+
   const [modalVariant] = useState<"currDate" | "notCurrDate">(
     isSameDay(date, new Date()) ? "currDate" : "notCurrDate"
   );
@@ -80,12 +82,23 @@ const AddUpdateSticker = ({
       {
         header: `Which sticker did you earn for ${format(date, "LLL d, y")}?`,
         body: (
-          <StickerSelector
-            stickerSet="Demo"
-            currSticker={currSticker}
-            selectedSticker={selectedSticker}
-            updateSelectedSticker={updateSelectedSticker}
-          />
+          <VStack
+            w="100%"
+            h="auto"
+            justifyContent="space-between"
+            alignContent="center"
+            spacing="4"
+          >
+            <Heading textAlign="center" as="h3" size="md" w="100%" h="auto">
+              {"Select a sticker"}
+            </Heading>
+            <StickerSelector
+              stickerSet="Demo"
+              currSticker={currSticker}
+              selectedSticker={selectedSticker}
+              updateSelectedSticker={updateSelectedSticker}
+            />
+          </VStack>
         ),
         footer: (
           <Button
@@ -133,9 +146,9 @@ const AddUpdateSticker = ({
         footer: (
           <Button
             variant="primary"
-            // isDisabled={
-            //   selectedSticker === null || selectedSticker === currSticker
-            // }
+            isDisabled={
+              selectedSticker === null || selectedSticker === currSticker
+            }
             onClick={() => updateStep(step + 1)}
           >
             {"Next"}
diff --git a/package.json b/package.json
index 3766517..a9ba0e3 100644
--- a/package.json
+++ b/package.json
@@ -2,7 +2,7 @@
   "private": true,
   "name": "lucid-creations-media-potty-chart",
   "homepage": "https://lucidcreations.media/introducing-code-name-potty-chart/",
-  "version": "v0.0.9.0-alpha",
+  "version": "v0.0.9.1-alpha",
   "author": {
     "name": "Lucid Creations Media",
     "url": "https://lucidcreations.media",
diff --git a/theme/layout/Header.tsx b/theme/layout/Header.tsx
index c280d51..2f32a6a 100644
--- a/theme/layout/Header.tsx
+++ b/theme/layout/Header.tsx
@@ -15,7 +15,7 @@ import appLogo from "../../public/images/logo.svg";
 
 const Header = (): JSX.Element => {
   const appName = "LCM Potty Chart";
-  const appVersion = "v0.0.9.0-alpha";
+  const appVersion = "v0.0.9.1-alpha";
 
   // Add transparency while not at the top of the page.
   const [transparentNavbar, setTransparentNavbar] = useState<boolean>(false);