update src/components/FormInput/index.js and src/index.scss

src/components/FormInput/index.js

@@ -12,7 +12,7 @@ const FormInput = ({ items }) => {
   const { register, getValues } = useForm();
 
   return (
-    <div className="mx-auto w-fit mt-20 flex flex-row items-center justify-between divide-x-2 divide-[#F3F3F3] divide-x-reverse bg-white p-4 border border-gray-200 rounded-sm shadow-sm">
+    <div className="mx-auto w-fit flex flex-row items-center justify-between divide-x-2 divide-[#F3F3F3] divide-x-reverse bg-white p-4 border border-gray-200 rounded-sm shadow-sm">
       <div className="flex-grow flex-1 flex flex-col gap-y-4 px-4">
         <Input
           register={register("firstName")}

src/index.scss

@@ -521,7 +521,7 @@ $red: #e92424;
 
 .rmdp-arrow-container {
   background-color: #3b98f3;
-  border-radius: 2px !important;
+  border-radius: 4px !important;
   height: 24px !important;
   width: 24px !important;
 }
@@ -539,6 +539,10 @@ $red: #e92424;
   color: #8798ad !important;
 }
 
+.disabled {
+  background-color: transparent !important;
+}
+
 .rmdp-arrow-container .rmdp-arrow {
   border: solid #fff;
   border-width: 0 2px 2px 0;
@@ -586,9 +590,16 @@ $red: #e92424;
 }
 
 .rmdp-day.rmdp-today span {
+  color: #f7f7f7 !important;
+  background-color: #7ea6f0 !important;
+  border-radius: 4px !important;
+}
+
+.rmdp-day:not(.rmdp-disabled):not(.rmdp-day-hidden) span:hover {
+  color: #fff;
+  border-radius: 4px;
   background: #f7f7f7 !important;
   color: #3b98f3 !important;
-  border-radius: 4px !important;
 }
 
 // * end DateRangePicker Component