fix: page design issues

Author: sanjam-deriv

src/features/dashboard/components/AppForm/app-form.module.scss

@@ -11,7 +11,6 @@ fieldset .customTextInput:last-child {
   display: flex;
   position: relative;
   box-sizing: border-box;
-  margin: rem(1) 0;
   &:focus-within {
     border-color: var(--colors-blue400);
     border-radius: rem(1.6);
@@ -59,6 +58,12 @@ fieldset .customTextInput:last-child {
   }
 }
 
+.helperMargin {
+  margin: rem(1) 0;
+}
+.verificationMargin {
+  margin: rem(2) 0;
+}
 .apps_form {
   display: flex;
   flex-direction: column;
@@ -96,6 +101,7 @@ fieldset .customTextInput:last-child {
     .helperText {
       width: 100%;
       padding-left: rem(1);
+      padding-bottom: rem(1);
       color: var(--colors-greyLight600);
       margin-bottom: 0;
     }
@@ -165,5 +171,6 @@ fieldset .customTextInput:last-child {
 }
 
 .termsOfConditionRegister {
-  margin-left: rem(2);
+  margin-left: rem(4);
+  margin-top: rem(6);
 }

src/features/dashboard/components/AppForm/index.tsx

@@ -121,7 +121,10 @@ const AppForm = ({
                   </div>
                 </React.Fragment>
               )}
-              <div className={styles.customTextInput} id='custom-text-input'>
+              <div
+                className={`${styles.helperMargin} ${styles.customTextInput}`}
+                id='custom-text-input'
+              >
                 <input {...register('name')} type='text' id='app_name' placeholder=' ' />
                 <label htmlFor='app_name'>App name (required)</label>
               </div>
@@ -211,7 +214,10 @@ const AppForm = ({
             </div>
 
             <div>
-              <div className={styles.customTextInput} id='custom-text-input'>
+              <div
+                className={`${styles.verificationMargin} ${styles.customTextInput}`}
+                id='custom-text-input'
+              >
                 <input
                   {...register('verification_uri')}
                   id='app_verification_uri'