From 4d56adba43c52575d90c8e69920afc2f462e4c77 Mon Sep 17 00:00:00 2001
From: Saheb Giri <47132373+iamsahebgiri@users.noreply.github.com>
Date: Thu, 30 Mar 2023 18:35:29 +0530
Subject: [PATCH] style: create cycle modal makeover (#617)

---
 apps/app/components/cycles/date.tsx |  71 ++++++++++++++
 apps/app/components/cycles/form.tsx | 141 +++++++++++++---------------
 apps/app/components/cycles/index.ts |   1 +
 3 files changed, 137 insertions(+), 76 deletions(-)
 create mode 100644 apps/app/components/cycles/date.tsx

diff --git a/apps/app/components/cycles/date.tsx b/apps/app/components/cycles/date.tsx
new file mode 100644
index 0000000000..4325f5a42b
--- /dev/null
+++ b/apps/app/components/cycles/date.tsx
@@ -0,0 +1,71 @@
+import React from "react";
+
+import { Popover, Transition } from "@headlessui/react";
+import { CalendarDaysIcon, XMarkIcon } from "@heroicons/react/24/outline";
+// react-datepicker
+import DatePicker from "react-datepicker";
+// import "react-datepicker/dist/react-datepicker.css";
+import { renderDateFormat } from "helpers/date-time.helper";
+
+type Props = {
+  value: string | null;
+  onChange: (val: string | null) => void;
+  label: string;
+};
+
+export const DateSelect: React.FC<Props> = ({ value, onChange, label }) => (
+  <Popover className="relative flex items-center justify-center  rounded-lg">
+    {({ open }) => (
+      <>
+        <Popover.Button
+          className={({ open }) =>
+            `flex cursor-pointer items-center rounded-md border text-xs shadow-sm duration-200 
+              ${
+                open
+                  ? "border-theme bg-theme/5 outline-none ring-1 ring-theme "
+                  : "hover:bg-theme/5 "
+              }`
+          }
+        >
+          <span className="flex items-center justify-center gap-2 px-3 py-1.5 text-xs">
+            {value ? (
+              <>
+                <span className="text-gray-600">{value}</span>
+                <button onClick={() => onChange(null)}>
+                  <XMarkIcon className="h-3 w-3 text-gray-600" />
+                </button>
+              </>
+            ) : (
+              <>
+                <CalendarDaysIcon className="h-4 w-4 flex-shrink-0 text-gray-500" />
+                <span className="text-gray-500">{label}</span>
+              </>
+            )}
+          </span>
+        </Popover.Button>
+
+        <Transition
+          as={React.Fragment}
+          enter="transition ease-out duration-200"
+          enterFrom="opacity-0 translate-y-1"
+          enterTo="opacity-100 translate-y-0"
+          leave="transition ease-in duration-150"
+          leaveFrom="opacity-100 translate-y-0"
+          leaveTo="opacity-0 translate-y-1"
+        >
+          <Popover.Panel className="absolute top-10 -left-10 z-20  transform overflow-hidden">
+            <DatePicker
+              selected={value ? new Date(value) : null}
+              onChange={(val) => {
+                if (!val) onChange("");
+                else onChange(renderDateFormat(val));
+              }}
+              dateFormat="dd-MM-yyyy"
+              inline
+            />
+          </Popover.Panel>
+        </Transition>
+      </>
+    )}
+  </Popover>
+);
diff --git a/apps/app/components/cycles/form.tsx b/apps/app/components/cycles/form.tsx
index 9bff6f4398..fa244d3488 100644
--- a/apps/app/components/cycles/form.tsx
+++ b/apps/app/components/cycles/form.tsx
@@ -9,7 +9,8 @@ import cyclesService from "services/cycles.service";
 // hooks
 import useToast from "hooks/use-toast";
 // ui
-import { CustomDatePicker, Input, PrimaryButton, SecondaryButton, TextArea } from "components/ui";
+import { Input, PrimaryButton, SecondaryButton, TextArea } from "components/ui";
+import { DateSelect } from "components/cycles";
 // helpers
 import { getDateRangeStatus, isDateRangeValid } from "helpers/date-time.helper";
 // types
@@ -100,12 +101,13 @@ export const CycleForm: React.FC<Props> = ({ handleFormSubmit, handleClose, stat
         <div className="space-y-3">
           <div>
             <Input
+              mode="transparent"
+              autoComplete="off"
               id="name"
-              label="Name"
               name="name"
               type="name"
-              placeholder="Enter name"
-              autoComplete="off"
+              className="resize-none text-xl"
+              placeholder="Title"
               error={errors.name}
               register={register}
               validations={{
@@ -121,94 +123,81 @@ export const CycleForm: React.FC<Props> = ({ handleFormSubmit, handleClose, stat
             <TextArea
               id="description"
               name="description"
-              label="Description"
-              placeholder="Enter description"
+              placeholder="Description"
+              className="h-32 resize-none text-sm"
+              mode="transparent"
               error={errors.description}
               register={register}
             />
           </div>
 
-          <div className="flex gap-x-2">
-            <div className="w-full">
-              <h6 className="text-gray-500">Start Date</h6>
-              <div className="w-full">
-                <Controller
-                  control={control}
-                  name="start_date"
-                  render={({ field: { value, onChange } }) => (
-                    <CustomDatePicker
-                      renderAs="input"
-                      value={value}
-                      onChange={(val) => {
-                        onChange(val);
-                        if (val && watch("end_date")) {
-                          if (isDateRangeValid(val, `${watch("end_date")}`)) {
-                            cycleStatus != "current" &&
-                              dateChecker({
-                                start_date: val,
-                                end_date: watch("end_date"),
-                              });
-                          } else {
-                            setIsDateValid(false);
-                            setToastAlert({
-                              type: "error",
-                              title: "Error!",
-                              message: "You have enter invalid date.",
+          <div className="flex flex-wrap items-center gap-2">
+            <div>
+              <Controller
+                control={control}
+                name="start_date"
+                render={({ field: { value, onChange } }) => (
+                  <DateSelect
+                    label="Start date"
+                    value={value}
+                    onChange={(val) => {
+                      onChange(val);
+                      if (val && watch("end_date")) {
+                        if (isDateRangeValid(val, `${watch("end_date")}`)) {
+                          cycleStatus != "current" &&
+                            dateChecker({
+                              start_date: val,
+                              end_date: watch("end_date"),
                             });
-                          }
+                        } else {
+                          setIsDateValid(false);
+                          setToastAlert({
+                            type: "error",
+                            title: "Error!",
+                            message: "You have enter invalid date.",
+                          });
                         }
-                      }}
-                      error={errors.start_date ? true : false}
-                    />
-                  )}
-                />
-                {errors.start_date && (
-                  <h6 className="text-sm text-red-500">{errors.start_date.message}</h6>
+                      }
+                    }}
+                  />
                 )}
-              </div>
+              />
             </div>
-            <div className="w-full">
-              <h6 className="text-gray-500">End Date</h6>
-              <div className="w-full">
-                <Controller
-                  control={control}
-                  name="end_date"
-                  render={({ field: { value, onChange } }) => (
-                    <CustomDatePicker
-                      renderAs="input"
-                      value={value}
-                      onChange={(val) => {
-                        onChange(val);
-                        if (watch("start_date") && val) {
-                          if (isDateRangeValid(`${watch("start_date")}`, val)) {
-                            cycleStatus != "current" &&
-                              dateChecker({
-                                start_date: watch("start_date"),
-                                end_date: val,
-                              });
-                          } else {
-                            setIsDateValid(false);
-                            setToastAlert({
-                              type: "error",
-                              title: "Error!",
-                              message: "You have enter invalid date.",
+            <div>
+              <Controller
+                control={control}
+                name="end_date"
+                render={({ field: { value, onChange } }) => (
+                  <DateSelect
+                    label="End date"
+                    value={value}
+                    onChange={(val) => {
+                      onChange(val);
+                      if (watch("start_date") && val) {
+                        if (isDateRangeValid(`${watch("start_date")}`, val)) {
+                          cycleStatus != "current" &&
+                            dateChecker({
+                              start_date: watch("start_date"),
+                              end_date: val,
                             });
-                          }
+                        } else {
+                          setIsDateValid(false);
+                          setToastAlert({
+                            type: "error",
+                            title: "Error!",
+                            message: "You have enter invalid date.",
+                          });
                         }
-                      }}
-                      error={errors.end_date ? true : false}
-                    />
-                  )}
-                />
-                {errors.end_date && (
-                  <h6 className="text-sm text-red-500">{errors.end_date.message}</h6>
+                      }
+                    }}
+                  />
                 )}
-              </div>
+              />
             </div>
           </div>
         </div>
       </div>
-      <div className="mt-5 flex justify-end gap-2">
+      <div className="-mx-5 mt-5 flex justify-end gap-2 border-t px-5 pt-5">
         <SecondaryButton onClick={handleClose}>Cancel</SecondaryButton>
         <PrimaryButton
           type="submit"
diff --git a/apps/app/components/cycles/index.ts b/apps/app/components/cycles/index.ts
index 082070eb05..f137e81eb9 100644
--- a/apps/app/components/cycles/index.ts
+++ b/apps/app/components/cycles/index.ts
@@ -7,3 +7,4 @@ export * from "./select";
 export * from "./sidebar";
 export * from "./single-cycle-card";
 export * from "./empty-cycle";
+export * from "./date";