fix(frontend): better ui modals (#2806)

# Description

Please include a summary of the changes and the related issue. Please
also include relevant motivation and context.

## Checklist before requesting a review

Please delete options that are not relevant.

- [ ] My code follows the style guidelines of this project
- [ ] I have performed a self-review of my code
- [ ] I have commented hard-to-understand areas
- [ ] I have ideally added tests that prove my fix is effective or that
my feature works
- [ ] New and existing unit tests pass locally with my changes
- [ ] Any dependent changes have been merged

## Screenshots (if appropriate):

frontend/lib/components/AddBrainModal/components/BrainRecapStep/BrainRecapStep.module.scss

@@ -7,8 +7,7 @@
   justify-content: space-between;
   flex-direction: column;
   height: 100%;
-  padding-inline: Spacings.$spacing08;
-  gap: Spacings.$spacing03;
+  gap: Spacings.$spacing05;
   overflow: hidden;
 
   .content_wrapper {
@@ -18,11 +17,12 @@
     overflow: scroll;
 
     .title {
-      @include Typography.H2;
+      @include Typography.H3;
     }
 
     .subtitle {
-      @include Typography.H3;
+      font-size: Typography.$small;
+      font-weight: 500;
     }
 
     .warning_message {
@@ -53,14 +53,14 @@
       justify-content: space-between;
       gap: Spacings.$spacing05;
 
-      >* {
+      > * {
         min-width: 120px;
         max-width: 200px;
         flex: 1;
       }
 
       @media screen and (max-width: ScreenSizes.$small) {
-        >* {
+        > * {
           min-width: 100%;
           max-width: 100%;
           flex: 1;

frontend/lib/components/OnboardingModal/OnboardingModal.module.scss

@@ -2,7 +2,7 @@
 
 .modal_content_wrapper {
   height: 100%;
-  padding: Spacings.$spacing05;
+  padding-block: Spacings.$spacing05;
   display: flex;
   flex-direction: column;
   justify-content: space-between;
@@ -18,4 +18,4 @@
     display: flex;
     justify-content: flex-end;
   }
-}
+}