styling

app/layout.tsx

@@ -1,4 +1,5 @@
 import "styles/tailwind.css"
+import "styles/global.css"
 
 export default function RootLayout({ children }: { children: React.ReactNode }) {
   return (

app/page.tsx

@@ -1,29 +1,21 @@
-import { faXmark } from "@fortawesome/free-solid-svg-icons"
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
 import { Metadata } from "next"
 import Form from "components/Form"
+import Head from "next/head"
 
 export const metadata: Metadata = {
   title: "Form Components",
 }
 
 export default function Web() {
+  
   return (
     <>
+      <Head>
+        <link href="https://fonts.googleapis.com/css2?family=Raleway:wght@400;700&display=swap" rel="stylesheet" />
+      </Head>
       <section className="flex min-h-full grow items-center justify-center bg-slate-200 p-4">
         <div className="max-w-screen-lg grow rounded-3xl bg-white p-8">
-          {/* Close button */}
-          <div className="flex h-10 w-10 items-center justify-center rounded-lg bg-blue-950	text-white">
-            <FontAwesomeIcon icon={faXmark} className="h-6 w-6" />
-          </div>
-          {/* Title */}
-          <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 */}
-          <div className="flex gap-14">
             <Form />
-          </div>
         </div>
       </section>
     </>

components/Form/ClientField.tsx

@@ -13,7 +13,7 @@ type ClientFieldProps = {
 // Destructure the props in the function parameter
 const ClientField: React.FC<ClientFieldProps> = ({ testingCenters, clients }) => {
   return (
-    <div className="flex flex-col gap-4">
+    <div className="flex flex-col gap-4 text-sm leading-tight">
       {testingCenters.map((testingCenter) => (
         <div key={Utils.camelize(testingCenter)} className="flex items-center gap-14">
           <span>{testingCenter}</span>

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="text-xs">{error}</p>
+    return <p className="text-xs text-red-500">{error}</p>
   }
   return null
 }

components/Form/FileInput.tsx

@@ -83,7 +83,7 @@ const FileInput: React.FC<FileInputProps> = ({ label, ...props }) => {
       {/* Title */}
       <div className="flex flex-col gap-4">
         <Separator/>
-        <label className="text-md" htmlFor={props.name}>
+        <label className="font-bold text-sm leading-tight text-indigo-900" htmlFor={props.name}>
           {label}
           <RequiredAsterisk required={required} />
         </label>  
@@ -99,7 +99,7 @@ const FileInput: React.FC<FileInputProps> = ({ label, ...props }) => {
       >
         <div className="border border-grey-500 border-dashed flex flex-col gap-4 items-center justify-center rounded-md py-9 w-full">
           <FontAwesomeIcon icon={faFile} className="text-amber-500 h-5 w-5" />
-          <h4>Drag & Drop Here or <span className="font-bold">Browse</span></h4>
+          <h4 className="text-sm leading-tight">Drag & Drop Here or <span className="font-bold">Browse</span></h4>
         </div>
         <button type="button" className="text-white px-12 py-2 rounded-md bg-blue-950 w-fit">Upload Manifest</button>
       </div>

components/Form/RadioGroup.tsx

@@ -8,11 +8,13 @@ import Separator from "./Separator"
 const RadioGroupField = ({
   name,
   label,
+  separator,
   options,
   ...props
 }: {
   name: string
   label: string
+  separator?: boolean
   options: string[]
   [x: string]: any // Allow any other props
 }) => {
@@ -26,8 +28,8 @@ const RadioGroupField = ({
   return (
     <div className="flex flex-col gap-3">
       <div className="flex flex-col gap-4">
-        <Separator/>
+        {separator && <Separator/>}
-        <label className="text-md" htmlFor={label}>
+        <label className="font-bold text-sm leading-tight text-indigo-900" htmlFor={label}>
           {label}
           <RequiredAsterisk required={required} />
         </label>

components/Form/StatusField.tsx

@@ -14,9 +14,9 @@ const StatusField = ({
     <div className="flex flex-col gap-2">
       <div className="flex flex-col gap-4">
         <Separator/>
-        <h4>{label}</h4>
+        <h4 className="font-bold text-sm leading-tight text-indigo-900">{label}</h4>
       </div>
-      <span className={statusColor}>{statusLabel}</span>
+      <span className={`text-sm leading-tight ${statusColor}`}>{statusLabel}</span>
     </div>
   )
 }

components/Form/ToggleField.tsx

@@ -21,25 +21,28 @@ const ToggleField = ({
     <div className="flex flex-col gap-4">
       <div className="flex flex-col gap-4">
         <Separator/>
-        <label className="flex items-center gap-2">
+        <label className="flex items-center gap-2 font-bold text-sm leading-tight text-indigo-900">
           {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"
+          className="relative h-[25px] w-[42px] cursor-default rounded-full bg-indigo-900 outline-none"
           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.Thumb className="block h-[21px] w-[21px] translate-x-0.5 rounded-full bg-white transition-transform duration-100 will-change-transform data-[state=checked]:translate-x-[19px]" />
         </SwitchPrimitive.Root>
-        <span>Toggle ON</span>
+        <div className="flex gap-4 items-center text-sm leading-tight">
-        <span>|</span>
+          <span>Toggle ON</span>
-        <span className="flex gap-2 items-center"><FontAwesomeIcon icon={faClock} />Select Tolerance Level</span>
+          <span>|</span>
+          <span className="flex gap-2 items-center"><FontAwesomeIcon icon={faClock} />Select Tolerance Level</span>
+        </div>
+        
       </div>
       
       <ErrorMessage touched={meta.touched} error={meta.error} />

components/Form/data.tsx

@@ -2,6 +2,6 @@ export const data = {
   importNames: ["Import ABC", "Import DEF", "Import GHI"],
   splitScheduleOptions: ["Yes", "No"],
   clientOptions: ["Single", "Multiple"],
-  testingCenterOptions: ["testing center 1", "testing center 2", "testing center 3", "testing center 4"],
+  testingCenterOptions: ["Testing Center 1", "Testing Center 2", "Testing Center 3", "Testing Center 4"],
-  clientsOptions: ["client 1", "client 2", "client 3"],
+  clientsOptions: ["Client 1", "Client 2", "Client 3"],
 }

components/Form/index.tsx

@@ -1,7 +1,7 @@
 "use client"
 
 import axios from "axios"
-import { Form, Formik } from "formik"
+import { Form, Formik, useFormikContext } from "formik"
 import React, { useState } from "react"
 
 //Dependencies
@@ -17,6 +17,24 @@ import StatusField from "./StatusField"
 import ToggleField from "./ToggleField"
 
 import { FormValues } from "./types"
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
+import { faXmark } from "@fortawesome/free-solid-svg-icons"
+
+{/* Close button */}
+const CloseButton: React.FC = () => {
+  const { resetForm,setFieldValue } = useFormikContext();
+  const handleReset = () => {
+    resetForm();
+    setFieldValue("manifestFile", "");
+  }
+  
+  return (
+    <button className="flex h-10 w-10 items-center justify-center rounded-lg bg-blue-950	text-white" onClick={() => handleReset()}>
+      <FontAwesomeIcon icon={faXmark} className="h-6 w-6" />
+    </button>
+  )
+};
+
 
 const FormComponent: React.FC = () => {
   const [formSubmitted, setFormSubmitted] = useState(false);
@@ -38,76 +56,101 @@ const FormComponent: React.FC = () => {
 
   return (
     <>
-    <Formik
-      initialValues={initialValues}
-      validationSchema={validationSchema}
-      onSubmit={async (values, { setSubmitting }) => {
-        console.log("Form values:", values); // Log form values on submit
-        try {
-          //await submitForm(values)
-          setFormSubmitted(true)
-        } catch (error) {
-          console.error("Error submitting form:", error)
-        } finally {
-          setSubmitting(false)
-        }
-      }}
-    >
-      {(formik) => {
-        console.log("Form errors:", formik.errors); // Log form errors on every render
-        console.log("Form values:", formik.values); // Log current form values on every render
-
-        return (
-          <Form>
-            <div className="flex flex-col gap-4 lg:flex-row lg:gap-16">
-              <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}>
-                      {option}
-                    </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>
-                
-              </div>
-              <div className="flex w-full flex-col gap-5 lg:w-[350px]">
-                <RadioGroup
-                  key="splitSchedule"
-                  name="splitSchedule"
-                  label="Split schedule using social distancing?"
-                  options={data.splitScheduleOptions}
-                  required={true}
-                />
-                <StatusField label="Location Checking:" statusLabel="All Available!" statusColor="text-green-500" />
-                <RadioGroup key="client" name="client" label="Client" options={data.clientOptions} required={true} />
-                <ClientField testingCenters={data.testingCenterOptions} clients={data.clientsOptions} />
-              </div>
-            </div>
-            <button
-                className="mx-auto mt-4 flex items-center justify-center rounded-full py-3 px-9 text-center text-md font-bold shadow-xs transition-all bg-blue-950 text-white"
-                type="submit"
-                disabled={formik.isSubmitting}
-            >
-                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>
-    </>
     
+      <Formik
+        initialValues={initialValues}
+        validationSchema={validationSchema}
+        onSubmit={async (values, { setSubmitting }) => {
+          //console.log("Form values:", values); // Log form values on submit
+          try {
+            //await submitForm(values)
+            setFormSubmitted(true)
+          } catch (error) {
+            console.error("Error submitting form:", error)
+          } finally {
+            setSubmitting(false)
+          }
+        }}
+      >
+        {(formik) => {
+          //console.log("Form errors:", formik.errors); // Log form errors on every render
+          //console.log("Form values:", formik.values); // Log current form values on every render
+
+          return (
+            <Form>
+              <CloseButton />
+              {/* Title */}
+              <div className="flex justify-center mb-12">
+                <h1 className="border-grey-300 w-fit border-b pb-4 font-bold text-3xl text-indigo-900">Document Upload</h1>
+              </div>
+              
+              <div className="flex flex-col gap-12">
+
+                {/* Form layout */}
+                <div className="flex flex-col gap-4 lg:flex-row lg:gap-16">
+                  {/* Left Column */}
+                  <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}>
+                          {option}
+                        </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>
+                    
+                  </div>
+                  {/* Right Column */}
+                  <div className="flex w-full flex-col gap-5 lg:w-[350px]">
+                    <RadioGroup
+                      key="splitSchedule"
+                      name="splitSchedule"
+                      label="Split schedule using social distancing?"
+                      options={data.splitScheduleOptions}
+                      required={true}
+                    />
+                    <StatusField label="Location Checking:" statusLabel="All Available!" statusColor="text-green-500" />
+                    <RadioGroup key="client" name="client" label="Client" options={data.clientOptions} required={true} separator />
+                    <ClientField testingCenters={data.testingCenterOptions} clients={data.clientsOptions} />
+                  </div>
+                </div>
+
+                {/* Form Footer */}
+                <div className="flex flex-col gap-6">
+                  <p className="text-lg leading-tight text-center">Data in the import file is correct. Please press Continue to import.</p>
+                  <div className="flex gap-6 justify-center">
+                    <button
+                        className="flex items-center justify-center rounded-md py-3 px-9 text-center text-sm font-bold transition-all bg-blue-950 text-white min-w-[240px]"
+                        type="submit"
+                        disabled={formik.isSubmitting}
+                    >
+                        Continue Import
+                        {formik.isSubmitting && <div className="ml-3 h-5 w-5 animate-spin rounded-full border-x-2 border-b-2"></div>}
+                    </button>
+                    <button
+                        className="flex items-center justify-center rounded-md py-3 px-9 text-center text-sm font-bold transition-all border-2 border-amber-500 text-amber-500 min-w-[240px]"
+                    >
+                        Cancel
+                    </button>
+                  </div>
+                  
+                  {formSubmitted && <div className="text-center text-green-500">Success</div>}
+                </div>
+              </div>
+
+            </Form>
+          )
+        }
+        }
+      </Formik>
+    </>
   )
 }
 

styles/global.css

@@ -0,0 +1,5 @@
+@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@400;700&display=swap');
+
+body {
+    font-family: 'Raleway', sans-serif;
+  }