From fadaa0fe4ad86340d6ecac058ac2188cf569cff5 Mon Sep 17 00:00:00 2001
From: Jesus Vasquez <jesus.wmr@gmail.com>
Date: Mon, 4 Mar 2024 20:50:32 -0500
Subject: [PATCH] styling

---
 app/page.tsx                         |  2 +-
 components/Form/ErrorMessage.tsx     |  2 +-
 components/Form/FileInput.tsx        | 24 ++++++++++++----
 components/Form/RadioGroup.tsx       | 17 +++++++----
 components/Form/RequiredAsterisk.tsx |  2 +-
 components/Form/SelectInput.tsx      | 13 ++++++---
 components/Form/Separator.tsx        |  9 ++++++
 components/Form/StatusField.tsx      |  8 ++++--
 components/Form/ToggleField.tsx      | 42 ++++++++++++++++++----------
 components/Form/formSchemas.ts       |  4 ---
 components/Form/index.tsx            | 19 +++++++------
 11 files changed, 94 insertions(+), 48 deletions(-)
 create mode 100644 components/Form/Separator.tsx

diff --git a/app/page.tsx b/app/page.tsx
index 3f0fcf6..a2c83d2 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -17,7 +17,7 @@ export default function Web() {
             <FontAwesomeIcon icon={faXmark} className="h-6 w-6" />
           </div>
           {/* Title */}
-          <div className="flex justify-center">
+          <div className="flex justify-center mb-12">
             <h1 className="border-grey-300 w-fit border-b pb-4 text-3xl text-indigo-900">Document Upload</h1>
           </div>
           {/* Form layout */}
diff --git a/components/Form/ErrorMessage.tsx b/components/Form/ErrorMessage.tsx
index 4b3534d..7d36578 100644
--- a/components/Form/ErrorMessage.tsx
+++ b/components/Form/ErrorMessage.tsx
@@ -2,7 +2,7 @@ import React from "react"
 
 const ErrorMessage = ({ touched, error }: { touched: boolean; error?: string }) => {
   if (touched && error) {
-    return <p className="mt-1">{error}</p>
+    return <p className="text-xs">{error}</p>
   }
   return null
 }
diff --git a/components/Form/FileInput.tsx b/components/Form/FileInput.tsx
index 89eeba3..712c27a 100644
--- a/components/Form/FileInput.tsx
+++ b/components/Form/FileInput.tsx
@@ -4,6 +4,7 @@ import { useField, useFormikContext } from "formik";
 import React, { useRef, useState } from "react";
 import ErrorMessage from "./ErrorMessage";
 import RequiredAsterisk from "./RequiredAsterisk";
+import Separator from "./Separator";
 
 interface FileInputProps {
   label: string;
@@ -78,11 +79,17 @@ const FileInput: React.FC<FileInputProps> = ({ label, ...props }) => {
   };
 
   return (
-    <div className="mb-4">
-      <label className="text-md" htmlFor={props.name}>
-        {label}
-        <RequiredAsterisk required={required} />
-      </label>
+    <div className="flex flex-col gap-4">
+      {/* Title */}
+      <div className="flex flex-col gap-4">
+        <Separator/>
+        <label className="text-md" htmlFor={props.name}>
+          {label}
+          <RequiredAsterisk required={required} />
+        </label>  
+      </div>
+             
+      {/* File drop area */}
       <div
         className={`border border-grey-500 rounded-md p-4 flex flex-col items-center gap-4 ${dragging ? "bg-blue-100" : "bg-white"} cursor-pointer`}
         onClick={handleClick}
@@ -96,9 +103,13 @@ const FileInput: React.FC<FileInputProps> = ({ label, ...props }) => {
         </div>
         <button type="button" className="text-white px-12 py-2 rounded-md bg-blue-950 w-fit">Upload Manifest</button>
       </div>
+
+      {/* Hidden input */}
       <input type="file" className="hidden" ref={fileInputRef} onChange={handleChange} />
+
+      {/* File info */}
       {fileInfo && (
-          <div className="flex gap-4 p-4 items-center">
+          <div className="flex gap-4 p-4 items-center border-t border-grey-500">
             <FontAwesomeIcon icon={faFile} className="text-amber-500 h-5 w-5" />
             <div className="grow">
               <div className="flex justify-between text-sm text-slate-500">
@@ -111,6 +122,7 @@ const FileInput: React.FC<FileInputProps> = ({ label, ...props }) => {
             </div>
           </div>
         )}
+
       <ErrorMessage touched={meta.touched} error={meta.error} />
     </div>
   );
diff --git a/components/Form/RadioGroup.tsx b/components/Form/RadioGroup.tsx
index a356049..5fecb8c 100644
--- a/components/Form/RadioGroup.tsx
+++ b/components/Form/RadioGroup.tsx
@@ -3,6 +3,7 @@ import { useField } from "formik"
 import React from "react"
 import ErrorMessage from "./ErrorMessage"
 import RequiredAsterisk from "./RequiredAsterisk"
+import Separator from "./Separator"
 
 const RadioGroupField = ({
   name,
@@ -23,11 +24,15 @@ const RadioGroupField = ({
   }
 
   return (
-    <div className="mb-4">
-      <label className="text-md" htmlFor={label}>
-        {label}
-      </label>
-      <RequiredAsterisk required={required} />
+    <div className="flex flex-col gap-3">
+      <div className="flex flex-col gap-4">
+        <Separator/>
+        <label className="text-md" htmlFor={label}>
+          {label}
+          <RequiredAsterisk required={required} />
+        </label>
+      </div>
+      
       <RadioGroup.Root className="flex gap-3" value={field.value} onValueChange={handleChange} aria-label={label}>
         {options.map((option) => (
           <div className="flex items-center" key={option}>
@@ -36,7 +41,7 @@ const RadioGroupField = ({
               value={option}
               id={`${name}-${option}`}
             >
-              <RadioGroup.Indicator className="relative flex h-full w-full items-center justify-center after:block after:h-[11px] after:w-[11px] after:rounded-[50%] after:bg-violet-400 after:content-['']" />
+              <RadioGroup.Indicator className="relative flex h-full w-full items-center justify-center after:block after:h-[11px] after:w-[11px] after:rounded-[50%] after:bg-blue-950 after:content-['']" />
             </RadioGroup.Item>
             <label className="pl-[15px] text-[15px] leading-none" htmlFor={`${name}-${option}`}>
               {option}
diff --git a/components/Form/RequiredAsterisk.tsx b/components/Form/RequiredAsterisk.tsx
index 2fb2585..cc5e2b1 100644
--- a/components/Form/RequiredAsterisk.tsx
+++ b/components/Form/RequiredAsterisk.tsx
@@ -1,7 +1,7 @@
 import React from "react"
 
 const RequiredAsterisk = ({ required }: { required?: boolean }) => {
-  return required ? <span className="text-sm"> *</span> : null
+  return required ? <span className="text-red-500	text-xs"> *</span> : null
 }
 
 export default RequiredAsterisk
diff --git a/components/Form/SelectInput.tsx b/components/Form/SelectInput.tsx
index 0aece61..678388e 100644
--- a/components/Form/SelectInput.tsx
+++ b/components/Form/SelectInput.tsx
@@ -8,15 +8,20 @@ const SelectInput = ({ label, ...props }: { label?: string; name: string; [x: st
   const [field, meta] = useField(restProps)
 
   return (
-    <div className="">
+    <div className="flex flex-col gap-3">
       {label && (
         <label className="text-md" htmlFor={props.id || props.name}>
           {label}
+          <RequiredAsterisk required={required} />
         </label>
       )}
-      <RequiredAsterisk required={required} />
-      <select className="h-10 w-full rounded-lg border px-3 text-base shadow-sm" {...field} {...restProps} />
-      <ErrorMessage touched={meta.touched} error={meta.error} />
+
+      <div className="flex flex-col">
+        <select className="h-10 w-full rounded-lg border border-grey-500 px-4 text-sm" {...field} {...restProps} />
+        <ErrorMessage touched={meta.touched} error={meta.error} />
+      </div>
+      
+      
     </div>
   )
 }
diff --git a/components/Form/Separator.tsx b/components/Form/Separator.tsx
new file mode 100644
index 0000000..c18519e
--- /dev/null
+++ b/components/Form/Separator.tsx
@@ -0,0 +1,9 @@
+import React from 'react'
+
+const Separator = () => {
+  return (
+    <hr className='w-[285px]'/>
+  )
+}
+
+export default Separator
diff --git a/components/Form/StatusField.tsx b/components/Form/StatusField.tsx
index 793e457..7634ff6 100644
--- a/components/Form/StatusField.tsx
+++ b/components/Form/StatusField.tsx
@@ -1,4 +1,5 @@
 import React from "react"
+import Separator from "./Separator"
 
 const StatusField = ({
   label,
@@ -10,8 +11,11 @@ const StatusField = ({
   statusColor: string
 }) => {
   return (
-    <div>
-      <h4>{label}</h4>
+    <div className="flex flex-col gap-2">
+      <div className="flex flex-col gap-4">
+        <Separator/>
+        <h4>{label}</h4>
+      </div>
       <span className={statusColor}>{statusLabel}</span>
     </div>
   )
diff --git a/components/Form/ToggleField.tsx b/components/Form/ToggleField.tsx
index 720eb24..f6f9aac 100644
--- a/components/Form/ToggleField.tsx
+++ b/components/Form/ToggleField.tsx
@@ -3,6 +3,9 @@ import { useField } from "formik"
 import React, { useState } from "react"
 import ErrorMessage from "./ErrorMessage"
 import RequiredAsterisk from "./RequiredAsterisk"
+import Separator from "./Separator"
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
+import { faClock } from "@fortawesome/free-regular-svg-icons"
 
 const ToggleField = ({
   children,
@@ -15,21 +18,30 @@ const ToggleField = ({
   const [checked, setChecked] = useState(false)
 
   return (
-    <div className="">
-      <label className="flex items-center gap-2">
-        {children}
-        <RequiredAsterisk required={required} />
-      </label>
-      <SwitchPrimitive.Root
-        className="relative h-[25px] w-[42px] cursor-default rounded-full bg-black shadow-[0_2px_10px] outline-none focus:shadow-[0_0_0_2px] focus:shadow-black"
-        checked={checked}
-        onCheckedChange={(isChecked) => {
-          setChecked(isChecked)
-          field.onChange({ target: { name: field.name, value: isChecked } })
-        }}
-      >
-        <SwitchPrimitive.Thumb className="block h-[21px] w-[21px] translate-x-0.5 rounded-full bg-white shadow-[0_2px_2px] shadow-black transition-transform duration-100 will-change-transform data-[state=checked]:translate-x-[19px]" />
-      </SwitchPrimitive.Root>
+    <div className="flex flex-col gap-4">
+      <div className="flex flex-col gap-4">
+        <Separator/>
+        <label className="flex items-center gap-2">
+          {children}
+          <RequiredAsterisk required={required} />
+        </label>
+      </div>
+      <div className="flex gap-3 itens-center">
+        <SwitchPrimitive.Root
+          className="relative h-[25px] w-[42px] cursor-default rounded-full bg-blue-950 shadow-[0_2px_10px] outline-none focus:shadow-[0_0_0_2px] focus:shadow-black"
+          checked={checked}
+          onCheckedChange={(isChecked) => {
+            setChecked(isChecked)
+            field.onChange({ target: { name: field.name, value: isChecked } })
+          }}
+        >
+          <SwitchPrimitive.Thumb className="block h-[21px] w-[21px] translate-x-0.5 rounded-full bg-white shadow-[0_2px_2px] shadow-black transition-transform duration-100 will-change-transform data-[state=checked]:translate-x-[19px]" />
+        </SwitchPrimitive.Root>
+        <span>Toggle ON</span>
+        <span>|</span>
+        <span className="flex gap-2 items-center"><FontAwesomeIcon icon={faClock} />Select Tolerance Level</span>
+      </div>
+      
       <ErrorMessage touched={meta.touched} error={meta.error} />
     </div>
   )
diff --git a/components/Form/formSchemas.ts b/components/Form/formSchemas.ts
index 367c036..b942160 100644
--- a/components/Form/formSchemas.ts
+++ b/components/Form/formSchemas.ts
@@ -20,9 +20,5 @@ export const validationSchema = Yup.object({
   manifestFile: Yup.mixed().required("A file is required").nullable(), // Allows for null values
   splitSchedule: Yup.string().required("This field is required").oneOf(["Yes", "No"], "Invalid Option"),
   client: Yup.string().required("Client selection is required").oneOf(["Single", "Multiple"], "Invalid Client Type"),
-  testingCenter1: Yup.string().required("Testing center selection is required"), // Assuming a selection is required
-  testingCenter2: Yup.string().required("Testing center selection is required"), // Assuming a selection is required
-  testingCenter3: Yup.string().required("Testing center selection is required"), // Assuming a selection is required
-  testingCenter4: Yup.string().required("Testing center selection is required"), // Assuming a selection is required
   toleranceWindow: Yup.boolean().required("Tolerance window selection is required"), // Assuming this is a boolean represented by a toggle
 })
diff --git a/components/Form/index.tsx b/components/Form/index.tsx
index ac41a0a..0db6a5e 100644
--- a/components/Form/index.tsx
+++ b/components/Form/index.tsx
@@ -19,7 +19,7 @@ import ToggleField from "./ToggleField"
 import { FormValues } from "./types"
 
 const FormComponent: React.FC = () => {
-  const [formSubmitted, setFormSubmitted] = useState(false)
+  const [formSubmitted, setFormSubmitted] = useState(false);
 
   const submitForm = (values: FormValues) => {
     return axios.post(
@@ -60,8 +60,8 @@ const FormComponent: React.FC = () => {
         return (
           <Form>
             <div className="flex flex-col gap-4 lg:flex-row lg:gap-16">
-              <div className="flex grow flex-col lg:max-w-[500px]">
-                <SelectInput key="importName" name="importName" label="Select Import Name:" required>
+              <div className="flex w-full flex-col lg:w-[500px] gap-5">
+                <SelectInput key="importName" name="importName" required>
                   <option value="">Select Import Name:</option>
                   {data.importNames.map((option) => (
                     <option key={option} value={option}>
@@ -69,13 +69,16 @@ const FormComponent: React.FC = () => {
                     </option>
                   ))}
                 </SelectInput>
+              
                 <FileInput label="Select a manifest that you'd like to import" name="manifestFile" required />
+                
                 <StatusField label="Elapse Data Checking:" statusLabel="No Elapsed Dates!" statusColor="text-green-500" />
-                <ToggleField key="toleranceWindow" name="toleranceWindow" required={true}>
-                  Tolerance Window:
-                </ToggleField>
+                  <ToggleField key="toleranceWindow" name="toleranceWindow" required={true}>
+                    Tolerance Window:
+                  </ToggleField>
+                
               </div>
-              <div className="flex grow flex-col lg:max-w-[350px]">
+              <div className="flex w-full flex-col gap-5 lg:w-[350px]">
                 <RadioGroup
                   key="splitSchedule"
                   name="splitSchedule"
@@ -96,13 +99,13 @@ const FormComponent: React.FC = () => {
                 Continue Import
                 {formik.isSubmitting && <div className="ml-3 h-5 w-5 animate-spin rounded-full border-x-2 border-b-2"></div>}
             </button>
+            {formSubmitted && <div className="text-center text-green-500">Success</div>}
           </Form>
         )
       }
         
       }
     </Formik>
-    {formSubmitted && <div>Success</div>}
     </>
     
   )