Fixes for "I'm new to Status" screen (#16199)

Various fixes related to spacing in the "I'm new to Status" screen. Fixes
https://github.com/status-im/status-mobile/issues/16064

Out of scope:

- Bottom sheet in Android doesn't occupy the full available height. This problem
  exists in develop.
- Bottom sheet blur.

src/quo2/components/drawers/documentation_drawers/style.cljs

@@ -1,10 +1,9 @@
 (ns quo2.components.drawers.documentation-drawers.style)
 
 (def container
-  {:align-items :flex-start
+  {:align-items        :flex-start
-   :padding     20})
+   :padding-horizontal 20})
 
 (def content
-  {:margin-top    12
+  {:margin-top    8
    :margin-bottom 16})
-

src/status_im2/contexts/onboarding/new_to_status/style.cljs

@@ -1,8 +1,6 @@
 (ns status-im2.contexts.onboarding.new-to-status.style
   (:require [quo2.foundations.colors :as colors]))
 
-(def full-screen {:flex 1})
-
 (def content-container
   {:position :absolute
    :top      0
@@ -18,16 +16,22 @@
   {:color         colors/white
    :margin-bottom 20})
 
+(def subtitle
+  {:margin-bottom 12
+   :color         colors/white-opa-70})
+
 (def subtitle-container
-  {:height        20
+  {:margin-top 16})
-   :margin-top    16
+
+(def doc-main-content
+  {:color         colors/white
    :margin-bottom 4})
 
-(def subtitle
+(def doc-subtitle
+  {:margin-top    20
+   :margin-bottom 4})
+
+(def doc-content
   {:color colors/white-opa-70})
 
-(def suboptions
-  {:padding-top    4
-   :padding-bottom 8})
-
 (def space-between-suboptions {:height 12})

src/status_im2/contexts/onboarding/new_to_status/view.cljs

@@ -20,7 +20,6 @@
        :size   :heading-1
        :weight :semi-bold}
       (i18n/label :t/new-to-status)]
-
      [quo/small-option-card
       {:variant    :main
        :title      (i18n/label :t/generate-keys)
@@ -31,15 +30,13 @@
                       (* 2 16) ;; spacing between items
                       220)     ;; extra spacing (top bar)
        :on-press   #(rf/dispatch [:onboarding-2/navigate-to-create-profile])}]
-
      [rn/view {:style style/subtitle-container}
       [quo/text
        {:style  style/subtitle
         :size   :paragraph-2
         :weight :medium}
        (i18n/label :t/experienced-web3)]]
-
+     [rn/view
-     [rn/view {:style style/suboptions}
       [quo/small-option-card
        {:variant  :icon
         :title    (i18n/label :t/use-recovery-phrase)
@@ -59,35 +56,37 @@
   [quo/documentation-drawers
    {:title  (i18n/label :t/getting-started-with-status)
     :shell? true}
-   [rn/view
+   [:<>
     [quo/text
      {:size  :paragraph-2
-      :style style/title}
+      :style style/doc-main-content}
-     (i18n/label
+     (i18n/label :t/getting-started-description)]
-      :t/getting-started-description)]
     [quo/text
      {:size   :paragraph-1
+      :style  style/doc-subtitle
       :weight :semi-bold}
      (i18n/label :t/generate-keys)]
     [quo/text
      {:size  :paragraph-2
-      :style style/subtitle}
+      :style style/doc-content}
      (i18n/label :t/getting-started-generate-keys-description)]
     [quo/text
      {:size   :paragraph-1
+      :style  style/doc-subtitle
       :weight :semi-bold}
      (i18n/label :t/getting-started-generate-keys-from-recovery-phrase)]
     [quo/text
      {:size  :paragraph-2
-      :style style/subtitle}
+      :style style/doc-content}
      (i18n/label :t/getting-started-generate-keys-from-recovery-phrase-description)]
     [quo/text
      {:size   :paragraph-1
+      :style  style/doc-subtitle
       :weight :semi-bold}
      (i18n/label :t/getting-started-generate-keys-on-keycard)]
     [quo/text
      {:size  :paragraph-2
-      :style style/subtitle}
+      :style style/doc-content}
      (i18n/label :t/getting-started-generate-keys-on-keycard-description)]]])
 
 (defn new-to-status

src/status_im2/contexts/quo_preview/drawers/documentation_drawers.cljs

@@ -106,7 +106,8 @@
         [preview/customizer state descriptor]
         [rn/view {:padding-vertical 60}
          [quo/button
-          {:style    {:margin-horizontal 40}
+          {:style    {:margin-horizontal 40
+                      :margin-bottom     20}
            :on-press #(rf/dispatch [:show-bottom-sheet
                                     {:content     (constantly [render-documenation-drawer @title
                                                                @show-button?
@@ -129,4 +130,3 @@
      :keyboard-should-persist-taps :always
      :header                       [cool-preview]
      :key-fn                       str}]])
-