From 64c936b9b5fa239d5749d7271a4ac89615c662ab Mon Sep 17 00:00:00 2001
From: Saheb Giri <47132373+iamsahebgiri@users.noreply.github.com>
Date: Thu, 30 Mar 2023 19:28:04 +0530
Subject: [PATCH] style: module modal consistent design (#625)

---
 apps/app/components/cycles/form.tsx         |   3 +-
 apps/app/components/cycles/index.ts         |   1 -
 apps/app/components/modules/form.tsx        | 136 ++++++++++----------
 apps/app/components/{cycles => ui}/date.tsx |   0
 apps/app/components/ui/index.ts             |   1 +
 5 files changed, 68 insertions(+), 73 deletions(-)
 rename apps/app/components/{cycles => ui}/date.tsx (100%)

diff --git a/apps/app/components/cycles/form.tsx b/apps/app/components/cycles/form.tsx
index fa244d348..32cf45f2a 100644
--- a/apps/app/components/cycles/form.tsx
+++ b/apps/app/components/cycles/form.tsx
@@ -9,8 +9,7 @@ import cyclesService from "services/cycles.service";
 // hooks
 import useToast from "hooks/use-toast";
 // ui
-import { Input, PrimaryButton, SecondaryButton, TextArea } from "components/ui";
-import { DateSelect } from "components/cycles";
+import { DateSelect, Input, PrimaryButton, SecondaryButton, TextArea } from "components/ui";
 // helpers
 import { getDateRangeStatus, isDateRangeValid } from "helpers/date-time.helper";
 // types
diff --git a/apps/app/components/cycles/index.ts b/apps/app/components/cycles/index.ts
index 33a43c18c..6de1ae130 100644
--- a/apps/app/components/cycles/index.ts
+++ b/apps/app/components/cycles/index.ts
@@ -8,4 +8,3 @@ export * from "./sidebar";
 export * from "./single-cycle-card";
 export * from "./empty-cycle";
 export * from "./transfer-issues-modal";
-export * from "./date";
\ No newline at end of file
diff --git a/apps/app/components/modules/form.tsx b/apps/app/components/modules/form.tsx
index aa646693b..5b797e7c9 100644
--- a/apps/app/components/modules/form.tsx
+++ b/apps/app/components/modules/form.tsx
@@ -7,7 +7,13 @@ import useToast from "hooks/use-toast";
 // components
 import { ModuleLeadSelect, ModuleMembersSelect, ModuleStatusSelect } from "components/modules";
 // ui
-import { CustomDatePicker, Input, PrimaryButton, SecondaryButton, TextArea } from "components/ui";
+import {
+  DateSelect,
+  Input,
+  PrimaryButton,
+  SecondaryButton,
+  TextArea,
+} from "components/ui";
 // helper
 import { isDateRangeValid } from "helpers/date-time.helper";
 // types
@@ -67,18 +73,19 @@ export const ModuleForm: React.FC<Props> = ({ handleFormSubmit, handleClose, sta
           <div>
             <Input
               id="name"
-              label="Name"
               name="name"
               type="name"
-              placeholder="Enter name"
+              placeholder="Title"
               autoComplete="off"
+              mode="transparent"
+              className="resize-none text-xl"
               error={errors.name}
               register={register}
               validations={{
-                required: "Name is required",
+                required: "Title is required",
                 maxLength: {
                   value: 255,
-                  message: "Name should be less than 255 characters",
+                  message: "Title should be less than 255 characters",
                 },
               }}
             />
@@ -87,75 +94,64 @@ export const ModuleForm: React.FC<Props> = ({ handleFormSubmit, handleClose, sta
             <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("target_date")) {
-                          if (isDateRangeValid(val, `${watch("target_date")}`)) {
-                            setIsDateValid(true);
-                          } else {
-                            setIsDateValid(false);
-                            setToastAlert({
-                              type: "error",
-                              title: "Error!",
-                              message: "You have enter invalid date.",
-                            });
-                          }
-                        }
-                      }}
-                    />
-                  )}
-                />
-              </div>
-            </div>
-            <div className="w-full">
-              <h6 className="text-gray-500">Target Date</h6>
-              <div className="w-full">
-                <Controller
-                  control={control}
-                  name="target_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)) {
-                            setIsDateValid(true);
-                          } else {
-                            setIsDateValid(false);
-                            setToastAlert({
-                              type: "error",
-                              title: "Error!",
-                              message: "You have enter invalid date.",
-                            });
-                          }
-                        }
-                      }}
-                    />
-                  )}
-                />
-              </div>
-            </div>
-          </div>
           <div className="flex flex-wrap items-center gap-2">
+            <Controller
+              control={control}
+              name="start_date"
+              render={({ field: { value, onChange } }) => (
+                <DateSelect
+                  label="Start date"
+                  value={value}
+                  onChange={(val) => {
+                    onChange(val);
+                    if (val && watch("target_date")) {
+                      if (isDateRangeValid(val, `${watch("target_date")}`)) {
+                        setIsDateValid(true);
+                      } else {
+                        setIsDateValid(false);
+                        setToastAlert({
+                          type: "error",
+                          title: "Error!",
+                          message: "You have enter invalid date.",
+                        });
+                      }
+                    }
+                  }}
+                />
+              )}
+            />
+            <Controller
+              control={control}
+              name="target_date"
+              render={({ field: { value, onChange } }) => (
+                <DateSelect
+                  label="Target date"
+                  value={value}
+                  onChange={(val) => {
+                    onChange(val);
+                    if (watch("start_date") && val) {
+                      if (isDateRangeValid(`${watch("start_date")}`, val)) {
+                        setIsDateValid(true);
+                      } else {
+                        setIsDateValid(false);
+                        setToastAlert({
+                          type: "error",
+                          title: "Error!",
+                          message: "You have enter invalid date.",
+                        });
+                      }
+                    }
+                  }}
+                />
+              )}
+            />
             <ModuleStatusSelect control={control} error={errors.status} />
             <Controller
               control={control}
@@ -174,7 +170,7 @@ export const ModuleForm: React.FC<Props> = ({ handleFormSubmit, handleClose, sta
           </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" loading={isSubmitting || isDateValid ? false : true}>
           {status
diff --git a/apps/app/components/cycles/date.tsx b/apps/app/components/ui/date.tsx
similarity index 100%
rename from apps/app/components/cycles/date.tsx
rename to apps/app/components/ui/date.tsx
diff --git a/apps/app/components/ui/index.ts b/apps/app/components/ui/index.ts
index b52c66a00..0a021d7af 100644
--- a/apps/app/components/ui/index.ts
+++ b/apps/app/components/ui/index.ts
@@ -6,6 +6,7 @@ export * from "./context-menu";
 export * from "./custom-menu";
 export * from "./custom-search-select";
 export * from "./custom-select";
+export * from "./date";
 export * from "./datepicker";
 export * from "./empty-space";
 export * from "./loader";