Added stickers to modal.

components/calender/modals/AddSticker.tsx

@@ -7,10 +7,13 @@ import {
   ModalCloseButton,
   ModalBody,
   ModalFooter,
-  Heading
+  Heading,
+  HStack,
+  VStack
 } from "@chakra-ui/react";
-import React, { Fragment } from "react";
+import React, { Fragment, useState } from "react";
 import { format } from "date-fns";
+import DemoStickers from "../stickers/DemoStickers";
 
 interface AddStickerProps {
   isOpen: boolean;
@@ -40,6 +43,8 @@ const AddSticker = ({
    * Show a message when a date before the current date is selected.
    */
 
+  const [selectedSticker, setSelectedSticker] = useState<StickerVal>(null);
+
   return (
     <Fragment>
       <Modal
@@ -48,17 +53,52 @@ const AddSticker = ({
         onClose={() => updateIsOpen(!isOpen)}
         motionPreset="slideInBottom"
         scrollBehavior="inside"
+        size="lg"
       >
         <ModalOverlay />
         <ModalContent>
           <ModalHeader>
-            <Heading textAlign="center" as="h2" size="md" w="100%">
-              {format(date, "LLLL do, y")}
+            <Heading textAlign="center" as="h2" size="md" w="100%" h="auto">
+              {`Which sticker did you earn for ${format(date, "LLL d, y")}?`}
             </Heading>
           </ModalHeader>
           <ModalCloseButton />
-          <ModalBody></ModalBody>
-
+          <ModalBody>
+            <VStack>
+              <HStack
+                w="100%"
+                h="auto"
+                justifyContent="center"
+                alignContent="center"
+                spacing={6}
+              >
+                <Button
+                  border={selectedSticker === 1 ? "1px solid #FFF" : "opx"}
+                  bg={selectedSticker === 1 && "gray.800"}
+                  onClick={() => setSelectedSticker(1)}
+                  variant="stickerButton"
+                >
+                  <DemoStickers stickerVal={1} />
+                </Button>
+                <Button
+                  border={selectedSticker === 0 ? "1px solid #FFF" : "opx"}
+                  bg={selectedSticker === 0 && "gray.800"}
+                  onClick={() => setSelectedSticker(0)}
+                  variant="stickerButton"
+                >
+                  <DemoStickers stickerVal={0} />
+                </Button>
+                <Button
+                  border={selectedSticker === -1 ? "1px solid #FFF" : "opx"}
+                  bg={selectedSticker === -1 && "gray.800"}
+                  onClick={() => setSelectedSticker(-1)}
+                  variant="stickerButton"
+                >
+                  <DemoStickers stickerVal={-1} />
+                </Button>
+              </HStack>
+            </VStack>
+          </ModalBody>
           <ModalFooter>
             <Button
               colorScheme="blue"

theme/components/buttonStyles.ts

@@ -14,7 +14,7 @@ const buttonStyles = {
   sizes: {},
   // styles for different visual variants ("outline", "solid")
   variants: {
-    contactPrimary: (props: Dict<never> | StyleFunctionProps) => ({
+    primary: (props: Dict<never> | StyleFunctionProps) => ({
       bg: "rgba(255, 255, 255, .15)",
       fontSize: "xl",
       p: "2",
@@ -25,7 +25,7 @@ const buttonStyles = {
         )(props)
       }
     }),
-    contactSecondary: (props: Dict<never> | StyleFunctionProps) => ({
+    secondary: (props: Dict<never> | StyleFunctionProps) => ({
       bg: "brand.primary",
       fontSize: "xl",
       p: "2",
@@ -36,6 +36,18 @@ const buttonStyles = {
         )(props)
       }
     }),
+    stickerButton: (props: Dict<never> | StyleFunctionProps) => ({
+      bg: "transparent",
+      fontSize: "4rem",
+      px: 2,
+      py: 14,
+      _hover: {
+        bg: mode(
+          whiten("brand.secondary", 20),
+          darken("brand.secondary", 20)
+        )(props)
+      }
+    }),
     project: (props: Dict<never> | StyleFunctionProps) => ({
       bg: "transparent",
       fontSize: "md",