[#16073] Password info box

* Refactor: Remove use of f-component

* Fix documentation drawer styles

* Refactor: move title styles to style ns

* Fix StaticSafeAreaInsets not being defined on component tests

* Fix bottom sheet height on Android

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

@@ -1,4 +1,10 @@
-(ns quo2.components.drawers.documentation-drawers.style)
+(ns quo2.components.drawers.documentation-drawers.style
+  (:require [quo2.foundations.colors :as colors]
+            [react-native.safe-area :as safe-area]))
+
+(def outer-container
+  ;; Margin negative to fill the bottom-sheet container where this component is used
+  {:margin-bottom (- (+ (safe-area/get-bottom) 8))})
 
 (def container
   {:align-items        :flex-start
@@ -6,4 +12,10 @@
 
 (def content
   {:margin-top    8
-   :margin-bottom 16})
+   :margin-bottom (+ (safe-area/get-bottom) 8)})
+
+(defn title
+  [shell?]
+  {:color (colors/theme-colors colors/neutral-100
+                               colors/white
+                               (when shell? :dark))})

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

@@ -1,10 +1,9 @@
 (ns quo2.components.drawers.documentation-drawers.view
-  (:require [quo2.components.markdown.text :as text]
+  (:require [quo2.components.buttons.button :as button]
             [quo2.components.drawers.documentation-drawers.style :as style]
+            [quo2.components.markdown.text :as text]
             [react-native.core :as rn]
-            [react-native.gesture :as gesture]
-            [quo2.components.buttons.button :as button]
-            [quo2.foundations.colors :as colors]))
+            [react-native.gesture :as gesture]))
 
 (defn view
   "Options
@@ -14,18 +13,18 @@
    - `button-icon` button icon
    - `on-press-button` On press handler for the button
    - `shell?` use shell theme
-
    `content` Content of the drawer
    "
   [{:keys [title show-button? on-press-button button-label button-icon shell?]} content]
   [gesture/scroll-view
+   {:style                             style/outer-container
+    :always-bounce-vertical            false
+    :content-inset-adjustment-behavior :never}
    [rn/view {:style style/container}
     [text/text
      {:size                :heading-2
       :accessibility-label :documentation-drawer-title
-      :style               {:color (colors/theme-colors colors/neutral-100
-                                                        colors/white
-                                                        (when shell? :dark))}
+      :style               (style/title shell?)
       :weight              :semi-bold}
      title]
     [rn/view {:style style/content :accessibility-label :documentation-drawer-content}

src/react_native/safe_area.cljs

@@ -10,7 +10,8 @@
 
 (defn- get-static-bottom
   []
-  (oops/oget StaticSafeAreaInsets "safeAreaInsetsBottom"))
+  (some-> StaticSafeAreaInsets
+          (oops/oget "safeAreaInsetsBottom")))
 
 (defn get-top
   []
@@ -20,8 +21,8 @@
 
 (defn get-bottom
   []
-  (if platform/ios?
-    (get-static-bottom)
+  (if-let [bottom (and platform/ios? (get-static-bottom))]
+    bottom
     0))
 
 (defn get-insets

src/status_im2/common/bottom_sheet/style.cljs

@@ -16,8 +16,7 @@
 (defn sheet
   [{:keys [top bottom]} window-height override-theme padding-bottom-override shell?]
   {:position                :absolute
-   :max-height              (cond-> window-height
-                              platform/ios? (- top))
+   :max-height              (- window-height top)
    :z-index                 1
    :bottom                  0
    :left                    0

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

@@ -187,54 +187,44 @@
 (defn create-password-doc
   []
   [quo/documentation-drawers
-   {:title  (i18n/label
-             :t/create-profile-password-info-box-title)
+   {:title  (i18n/label :t/create-profile-password-info-box-title)
     :shell? true}
    [rn/view
-    [quo/text
-     {:size :paragraph-2}
-     (i18n/label
-      :t/create-profile-password-info-box-description)]]])
-
-(defn- f-create-password
-  []
-  (let [keyboard-shown?      (reagent/atom false)
-        {:keys [top bottom]} (safe-area/get-insets)]
-    (fn []
-      (rn/use-effect
-       (let [will-show-listener (ocall rn/keyboard
-                                       "addListener"
-                                       "keyboardWillShow"
-                                       #(reset! keyboard-shown? true))
-             will-hide-listener (ocall rn/keyboard
-                                       "addListener"
-                                       "keyboardWillHide"
-                                       #(reset! keyboard-shown? false))]
-         (fn []
-           (fn []
-             (ocall will-show-listener "remove")
-             (ocall will-hide-listener "remove"))))
-       [])
-      [rn/touchable-without-feedback
-       {:on-press   rn/dismiss-keyboard!
-        :accessible false}
-       [rn/view {:style style/flex-fill}
-        [rn/keyboard-avoiding-view {:style style/flex-fill}
-         [navigation-bar/navigation-bar
-          {:top                   top
-           :right-section-buttons [{:type                :blur-bg
-                                    :icon                :i/info
-                                    :icon-override-theme :dark
-                                    :on-press            (fn []
-                                                           (rn/dismiss-keyboard!)
-                                                           (rf/dispatch [:show-bottom-sheet
-                                                                         {:content create-password-doc
-                                                                          :shell?  true}]))}]}]
-         [password-form]
-         [rn/view {:style {:height (if-not @keyboard-shown? bottom 0)}}]]]])))
+    [quo/text {:size :paragraph-2}
+     (i18n/label :t/create-profile-password-info-box-description)]]])
 
 (defn create-password
   []
-  [:<>
-   [background/view true]
-   [:f> f-create-password]])
+  (reagent/with-let [keyboard-shown?      (reagent/atom false)
+                     {:keys [top bottom]} (safe-area/get-insets)
+                     will-show-listener   (ocall rn/keyboard
+                                                 "addListener"
+                                                 "keyboardWillShow"
+                                                 #(reset! keyboard-shown? true))
+                     will-hide-listener   (ocall rn/keyboard
+                                                 "addListener"
+                                                 "keyboardWillHide"
+                                                 #(reset! keyboard-shown? false))
+                     on-press-info        (fn []
+                                            (rn/dismiss-keyboard!)
+                                            (rf/dispatch [:show-bottom-sheet
+                                                          {:content create-password-doc
+                                                           :shell?  true}]))]
+    [:<>
+     [background/view true]
+     [rn/touchable-without-feedback
+      {:on-press   rn/dismiss-keyboard!
+       :accessible false}
+      [rn/view {:style style/flex-fill}
+       [rn/keyboard-avoiding-view {:style style/flex-fill}
+        [navigation-bar/navigation-bar
+         {:top                   top
+          :right-section-buttons [{:type                :blur-bg
+                                   :icon                :i/info
+                                   :icon-override-theme :dark
+                                   :on-press            on-press-info}]}]
+        [password-form]
+        [rn/view {:style {:height (if-not @keyboard-shown? bottom 0)}}]]]]]
+    (finally
+     (ocall will-show-listener "remove")
+     (ocall will-hide-listener "remove"))))