updated form input component

src/common/styles/global.scss

@@ -1,4 +1,5 @@
 @import url('https://fonts.googleapis.com/css2?family=Oswald:wght@200;300;400;500;600&family=Poppins:wght@200;300;400;500;600&display=swap');
+
 :root {
     font-size: 62.5%;
 }

src/components/formInput/Input.module.scss

@@ -1,17 +1,17 @@
 $clouded-vision: #D1D1D1;
+$dim-grey: #696969;
 
 .inputContainer {
     display: flex;
-    // align-items: center;
     flex-direction: column;
-    // margin-top: 5rem;
-    // margin-left: 1.5rem;
-    position: relative;
-
-    .icon {
-        position: absolute;
-        left: 2rem;
-        top: 1.2rem;
+
+    .inputHolder {
+        margin-left: 2rem;
+        margin-top: 2rem;
+        width: max-content;
+        border: 0.1rem solid $clouded-vision;
+        box-shadow: inset 0rem 0rem 1.5rem 0.1rem $clouded-vision;
+        border-radius: 2.5rem;
     }
 
 }
@@ -22,28 +22,28 @@ ion-icon {
 }
 
 ion-input {
-    position: relative;
-    border: 0.1rem solid $clouded-vision;
-    box-shadow: inset 0rem 0rem 0.5rem $clouded-vision;
-    border-radius: 2.5rem;
     font-size: 1.4rem !important;
     --color: #696969 !important;
     font-weight: 400 !important;
     width: 25rem !important;
 
     input {
-        --padding-start: 4rem;   
-        --placeholder-color: $clouded-vision;
+        --padding-start: 1rem;   
     }
 }
 
-ion-item {
-    width: 34rem;
+ion-item {  
+    border-radius: 2.5rem;
+    width: 32rem;
+    height: 4rem;
+    margin: 0.2rem;
+
 }
 
 ion-label {
-    color: #696969;
-    font-size: 1.4rem;
-    margin-left: 4rem;
-    margin-bottom: 0.8rem;
-}
+    margin: 0;
+    margin-left: 0.8rem;
+    --color: #696969 !important;
+    font-size: 1.4rem !important;  
+}
+

src/components/formInput/Input.tsx

@@ -11,19 +11,18 @@ interface Props {
 const Input: React.FC<Props> = (props) => {
     return (
         <div className={styles.inputContainer}>
-            {props.text &&
-                <IonLabel>{props.text}</IonLabel>
-            }
-
-            <IonItem lines='none'>
-                <div className={styles.icon}>
+            <div className={styles.inputHolder}>
+                <IonItem lines='none'>
                     {props.icon &&
                         <IonIcon src={props.icon}></IonIcon>
                     }
-                </div>
-                <IonInput type={props.type ? props.type : "text"}
-                    placeholder={props.placeholder ? props.placeholder : ""}></IonInput>
-            </IonItem>
+                    {props.text &&
+                        <IonLabel>{props.text}</IonLabel>
+                    }
+                    <IonInput type={props.type ? props.type : "text"}
+                        placeholder={props.placeholder ? props.placeholder : ""}></IonInput>
+                </IonItem>
+            </div>
 
         </div>
     )