style: registration form spacing

KK-1072.

Restyle margins and paddings in registration form,
since many fields were too close to each others.

src/common/components/form/fields/checkbox/CheckboxField.tsx

@@ -40,6 +40,7 @@ function CheckboxField(props: Props) {
       <Checkbox
         {...props}
         {...field}
+        className={styles.checkboxField}
         type="checkbox"
         style={kukkuuCheckboxStyles}
         checked={Boolean(field.value)}

src/common/components/form/fields/checkbox/checkboxField.module.scss

@@ -1,3 +1,7 @@
+.checkboxField {
+  margin: var(--spacing-xs);
+}
+
 .errorText {
   color: var(--color-error);
 }

src/domain/home/__tests__/__snapshots__/Home.test.tsx.snap

@@ -537,7 +537,7 @@ exports[`<Home /> > renders snapshot correctly 1`] = `
               </div>
               <div>
                 <div
-                  class="Checkbox-module_checkbox__3L0GR checkbox_hds-checkbox__9HMCz"
+                  class="Checkbox-module_checkbox__3L0GR checkbox_hds-checkbox__9HMCz _checkboxField_639ec5"
                   style="--background-hover: var(--color-summer-dark); --background-selected: var(--color-summer); --background-color-selected-hover: var(--color-summer-dark); --background-color-selected-focus: var(--color-summer-dark); --background-color-selected-hover-focus: var(--color-summer-dark); --border-color-selected: var(--color-summer); --border-color-selected-hover: var(--color-summer-dark); --border-color-selected-focus: var(--color-summer-dark); --border-color-selected-hover-focus: var(--color-summer-dark); --icon-color-selected: var(--color-black);"
                 >
                   <input

src/domain/home/form/__test__/__snapshots__/HomePreliminaryForm.test.tsx.snap

@@ -90,7 +90,7 @@ exports[`renders snapshot correctly 1`] = `
         </div>
         <div>
           <div
-            class="Checkbox-module_checkbox__3L0GR checkbox_hds-checkbox__9HMCz"
+            class="Checkbox-module_checkbox__3L0GR checkbox_hds-checkbox__9HMCz _checkboxField_639ec5"
             style="--background-hover: var(--color-summer-dark); --background-selected: var(--color-summer); --background-color-selected-hover: var(--color-summer-dark); --background-color-selected-focus: var(--color-summer-dark); --background-color-selected-hover-focus: var(--color-summer-dark); --border-color-selected: var(--color-summer); --border-color-selected-hover: var(--color-summer-dark); --border-color-selected-focus: var(--color-summer-dark); --border-color-selected-hover-focus: var(--color-summer-dark); --icon-color-selected: var(--color-black);"
           >
             <input

src/domain/registration/form/partial/childFormFields.module.scss

@@ -22,6 +22,7 @@ $childIconHeight: 4rem;
     grid-template-columns: 1fr 1fr;
     grid-gap: $baseMargin;
   }
+  padding: $baseMargin 0;
 }
 
 .childBirthyear,
@@ -45,6 +46,7 @@ $childIconHeight: 4rem;
   display: flex;
   flex-direction: row;
   align-items: center;
+  padding: $baseMargin 0;
 
   h2 {
     flex-grow: 1;

src/domain/registration/form/registrationForm.module.scss

@@ -32,7 +32,7 @@ $plusIconHeight: 2rem;
 }
 
 .submitButton {
-  margin: $largeMargin 0;
+  margin: $largeMargin 0 !important;
 }
 
 .addNewChildButton {
@@ -62,6 +62,7 @@ $plusIconHeight: 2rem;
   > * {
     grid-column: 2;
   }
+  margin: $baseMargin;
 }
 
 .guardianInfo {
@@ -72,3 +73,7 @@ $plusIconHeight: 2rem;
   height: $plusIconHeight;
   width: $plusIconHeight;
 }
+
+.heading {
+  padding: $baseMargin;
+}