Updated the add sticker modal. Disabled the next button on the edit modal when no sticker has been selected.

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"}

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",

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);