bugfix - resolved modal form ui issue

Frontend/sections/ContactUs/FormLeftDescriptionRightContactUs.tsx

@@ -44,7 +44,8 @@ const FormLeftDescriptionRightContactUs = () => {
               <h2 className="mb-8 text-xl font-semibold text-base-content ">
                 Fill in the form
               </h2>
-              {!localStorage.getItem("contactus") ? (
+              {typeof window !== "undefined" &&
+              !localStorage.getItem("contactus") ? (
                 <form onSubmit={handleSubmit(onSubmit)}>
                   <div className="grid gap-4 gap-y-0">
                     {/* Grid */}

Frontend/sections/ModalSignUp/ModalSignUp.tsx

@@ -38,7 +38,7 @@ function ModalSignUp() {
           <div className="flex justify-end pb-2 select-none">
             <label
               htmlFor="sign-up-modal"
-              className="cursor-pointer"
+              className="cursor-pointer text-base-content"
               onClick={() => {
                 reset();
               }}
@@ -46,8 +46,9 @@ function ModalSignUp() {
               <Icon name="Dismiss20Filled" size="medium" />
             </label>
           </div>
+          <div className="flex flex-grow flex-col h-[30rem] lg:h-full overflow-y-scroll">
             <div
-            className="w-[100%] bg-gradient-to-r from-primary to-secondary px-6 pt-2 mt-3 pb-6 rounded-lg"
+              className="w-[100%] bg-gradient-to-r from-primary to-secondary px-6 mt-3 pb-6 rounded-lg"
               data-aos="fade-up"
             >
               <h3 className="pb-1 text-3xl font-bold md:text-3xl pt-6">
@@ -66,27 +67,29 @@ function ModalSignUp() {
             >
               <div className="relative mt-6">
                 <input
-                {...register("email")}
                   type="text"
                   id="SignUpEmail"
                   className="py-3 px-4 block w-full bg-base-200 text-base-content border-white rounded-lg text-sm focus:border-blue-500 focus:ring-blue-500 disabled:opacity-50 disabled:pointer-events-none "
                   placeholder="Email…"
                   aria-label="Email…"
                   autoComplete="on"
+                  {...register("email")}
                 />
                 <div className="text-start text-sm italic text-error-content">
                   {errors.email?.message}&nbsp;
                 </div>
               </div>
+
+              <div className="flex flex-row gap-4">
                 <div className="relative mt-1">
                   <input
-                {...register("firstName")}
                     id="SignUpFirstName"
                     type="text"
                     className="py-3 px-4 block w-full bg-base-200 text-base-content border-white rounded-lg text-sm focus:border-blue-500 focus:ring-blue-500 disabled:opacity-50 disabled:pointer-events-none "
                     placeholder="First Name…"
                     aria-label="First Name…"
                     autoComplete="on"
+                    {...register("firstName")}
                   />
                   <div className="text-start text-sm italic text-error-content">
                     {errors.firstName?.message}&nbsp;
@@ -94,39 +97,41 @@ function ModalSignUp() {
                 </div>
                 <div className="relative mt-1">
                   <input
-                {...register("lastName")}
                     id="SignUpLastName"
                     type="text"
                     className="py-3 px-4 block w-full bg-base-200 text-base-content border-white rounded-lg text-sm focus:border-blue-500 focus:ring-blue-500 disabled:opacity-50 disabled:pointer-events-none "
                     placeholder="Last Name…"
                     aria-label="Last Name…"
+                    {...register("lastName")}
                   />
                   <div className="text-start text-sm italic text-error-content">
                     {errors.lastName?.message}&nbsp;
                   </div>
                 </div>
+              </div>
 
               <div className="relative mt-1">
                 <input
-                {...register("phoneNumber")}
                   id="SignUpPhoneNumber"
                   type="text"
                   className="py-3 px-4 block w-full bg-base-200 text-base-content border-white rounded-lg text-sm focus:border-blue-500 focus:ring-blue-500 disabled:opacity-50 disabled:pointer-events-none "
                   placeholder="Phone Number…"
                   aria-label="Phone Number…"
+                  {...register("phoneNumber")}
                 />
                 <div className="text-start text-sm italic text-error-content">
                   {errors.phoneNumber?.message}&nbsp;
                 </div>
               </div>
+              <div className="flex flex-row gap-4">
                 <div className="relative mt-1">
                   <input
-                {...register("organisation")}
                     id="SignUpOrganisation"
                     type="text"
                     className="py-3 px-4 block w-full bg-base-200 text-base-content border-white rounded-lg text-sm focus:border-blue-500 focus:ring-blue-500 disabled:opacity-50 disabled:pointer-events-none "
                     placeholder="Organisation…"
                     aria-label="Organisation…"
+                    {...register("organisation")}
                   />
                   <div className="text-start text-sm italic text-error-content">
                     {errors.organisation?.message}&nbsp;
@@ -134,10 +139,10 @@ function ModalSignUp() {
                 </div>
                 <div className="relative mt-1">
                   <select
-                {...register("organisationSize")}
                     id="SignUpCompanySize"
                     defaultValue={""}
                     className="py-3 px-4 block w-full bg-base-200 text-base-content border-white rounded-lg text-sm focus:border-blue-500 focus:ring-blue-500 disabled:opacity-50 disabled:pointer-events-none "
+                    {...register("organisationSize")}
                   >
                     <option className="bg-gray-850" value={""} disabled>
                       Company Size…
@@ -158,14 +163,16 @@ function ModalSignUp() {
                     {errors.organisationSize?.message}&nbsp;
                   </div>
                 </div>
+              </div>
+              <div className="flex flex-row gap-4">
                 <div className="relative mt-1">
                   <input
-                {...register("password")}
                     id="SignUpPwd"
                     type="password"
                     className="py-3 px-4 block w-full bg-base-200 text-base-content border-white rounded-lg text-sm focus:border-blue-500 focus:ring-blue-500 disabled:opacity-50 disabled:pointer-events-none "
                     placeholder="Password..."
                     aria-label="Password"
+                    {...register("password")}
                   />
                   <div className="text-start text-sm italic text-error-content">
                     {errors.password?.message}&nbsp;
@@ -173,22 +180,24 @@ function ModalSignUp() {
                 </div>
                 <div className="relative mt-1 mb-2">
                   <input
-                {...register("passwordConfirmation")}
                     id="SignUpPwdConfirm"
                     type="password"
                     className="py-3 px-4 block w-full bg-base-200 text-base-content border-white rounded-lg text-sm focus:border-blue-500 focus:ring-blue-500 disabled:opacity-50 disabled:pointer-events-none "
-                placeholder="Confirmed Password..."
+                    placeholder="Confirm Password..."
                     aria-label="Confirmed Password"
+                    {...register("passwordConfirmation")}
                   />
                   <div className="text-start text-sm italic text-error-content">
                     {errors.passwordConfirmation?.message}&nbsp;
                   </div>
                 </div>
+              </div>
 
               <button type="submit" className="btn btn-primary">
                 Sign Up
               </button>
             </form>
+          </div>
         </label>
       </label>
     </>