From bd7f3f7da6febc48a1ef6272af92220468365e05 Mon Sep 17 00:00:00 2001
From: Lucid Kobold <lucid@lucidcreations.media>
Date: Sun, 5 Dec 2021 21:12:10 -0600
Subject: [PATCH] Added emoji to the date form.

---
 components/calender/DatePicker.tsx        | 30 +++++++++++++++++------
 components/calender/FormValidateEmoji.tsx |  8 +++---
 2 files changed, 26 insertions(+), 12 deletions(-)

diff --git a/components/calender/DatePicker.tsx b/components/calender/DatePicker.tsx
index 83742f9..7dd0995 100644
--- a/components/calender/DatePicker.tsx
+++ b/components/calender/DatePicker.tsx
@@ -26,6 +26,7 @@ import {
 } from "formik";
 import { format } from "date-fns";
 import { CalenderContext } from "../../contexts/CalenderContext";
+import FormValidateEmoji from "./FormValidateEmoji";
 
 interface UpdateCalendarProps {
   year: number;
@@ -129,7 +130,7 @@ const DatePicker = (): JSX.Element => {
   const initRef = useRef();
 
   return (
-    <Popover placement="bottom" initialFocusRef={initRef}>
+    <Popover w="100%" h="auto" placement="bottom" initialFocusRef={initRef}>
       <PopoverTrigger>
         <Button border="none" variant="outline">
           <Heading w="100%" h="auto">
@@ -179,6 +180,10 @@ const DatePicker = (): JSX.Element => {
                   spacing={6}
                   py={4}
                 >
+                  <Heading as="h4" size="sm" fontWeight="semibold">
+                    Required fields indicated with{" "}
+                    <FormValidateEmoji type="Required" />
+                  </Heading>
                   <Field name="date" validate={validateDate}>
                     {({ field, form }: FieldProps) => (
                       <FormControl
@@ -196,10 +201,10 @@ const DatePicker = (): JSX.Element => {
                           <HStack
                             alignContent="center"
                             alignItems="center"
-                            pl={6}
+                            pl={4}
                             w="100%"
                             h="auto"
-                            spacing={0}
+                            spacing={2}
                           >
                             <FormLabel fontWeight="semibold" htmlFor="date">
                               {"Date:"}
@@ -214,15 +219,24 @@ const DatePicker = (): JSX.Element => {
                               textAlign="center"
                               {...(!form.errors.date && form.touched.date
                                 ? {
+                                  borderColor: "brand.valid",
+                                  boxShadow: "0 0 0 1px #00c17c",
+                                  _hover: {
                                     borderColor: "brand.valid",
                                     boxShadow: "0 0 0 1px #00c17c",
-                                    _hover: {
-                                      borderColor: "brand.valid",
-                                      boxShadow: "0 0 0 1px #00c17c",
-                                    },
-                                  }
+                                  },
+                                }
                                 : "")}
                             />
+                            {!form.touched.date && (
+                              <FormValidateEmoji type="Required" />
+                            )}
+                            {form.errors.name && form.touched.date && (
+                              <FormValidateEmoji type="Error" />
+                            )}
+                            {!form.errors.name && form.touched.date && (
+                              <FormValidateEmoji type="Valid" />
+                            )}
                           </HStack>
                           <FormErrorMessage>
                             {form.errors.date}
diff --git a/components/calender/FormValidateEmoji.tsx b/components/calender/FormValidateEmoji.tsx
index 4571d36..d89e6f8 100644
--- a/components/calender/FormValidateEmoji.tsx
+++ b/components/calender/FormValidateEmoji.tsx
@@ -1,12 +1,12 @@
 import React, { FC } from "react";
 
-interface EmojiValidateEmojiProps {
+interface FormValidateEmojiProps {
   type: string;
 }
 
-const EmojiValidateEmoji: FC<EmojiValidateEmojiProps> = ({
+const FormValidateEmoji: FC<FormValidateEmojiProps> = ({
   type,
-}: EmojiValidateEmojiProps) => {
+}: FormValidateEmojiProps) => {
   interface Validations {
     [key: string]: JSX.Element;
   }
@@ -32,4 +32,4 @@ const EmojiValidateEmoji: FC<EmojiValidateEmojiProps> = ({
   return validations[`${type}`];
 };
 
-export default EmojiValidateEmoji;
+export default FormValidateEmoji