[#19264] fix: add contact bottom margin (#19398)

src/status_im/contexts/chat/home/add_new_contact/style.cljs

@@ -1,6 +1,5 @@
 (ns status-im.contexts.chat.home.add-new-contact.style
-  (:require [quo.foundations.colors :as colors]
+  (:require [quo.foundations.colors :as colors]))
-            [react-native.safe-area :as safe-area]))
 
 (defn container-outer
   []
@@ -8,30 +7,14 @@
    :background-color   (colors/theme-colors colors/white colors/neutral-95)
    :justify-content    :space-between
    :align-items        :center
+   :margin-top         2
    :padding-horizontal 20})
 
-(def container-inner {:align-items :flex-start})
-
 (def container-invalid
   {:style {:flex-direction :row
            :align-items    :center
            :margin-top     8}})
 
-(defn text-title
-  []
-  {:size   :heading-1
-   :weight :semi-bold
-   :style  {:margin-top    28
-            :margin-bottom 6
-            :color         (colors/theme-colors colors/neutral-100 colors/white)}})
-
-(defn text-subtitle
-  []
-  {:size   :paragraph-1
-   :weight :regular
-   :style  {:margin-bottom 20
-            :color         (colors/theme-colors colors/neutral-100 colors/white)}})
-
 (defn text-description
   []
   {:size   :paragraph-2
@@ -100,6 +83,5 @@
            colors/neutral-40)})
 
 (def button-view-profile
-  {:margin-top    24
+  {:margin-top 24
-   :width         "100%"
+   :width      "100%"})
-   :margin-bottom (+ (safe-area/get-bottom) 12)})

src/status_im/contexts/chat/home/add_new_contact/views.cljs

@@ -3,6 +3,7 @@
             [quo.core :as quo]
             [react-native.clipboard :as clipboard]
             [react-native.core :as rn]
+            [status-im.common.floating-button-page.view :as floating-button-page]
             [status-im.contexts.chat.home.add-new-contact.style :as style]
             [utils.address :as address]
             [utils.debounce :as debounce]
@@ -35,19 +36,6 @@
            :style  (style/found-user-key)}
           (address/get-shortened-compressed-key compressed-key)]]]])))
 
-(defn- header
-  []
-  [:<>
-   [quo/button
-    {:type                :grey
-     :icon-only?          true
-     :accessibility-label :new-contact-close-button
-     :size                32
-     :on-press            #(rf/dispatch [:navigate-back])}
-    :i/close]
-   [quo/text (style/text-title) (i18n/label :t/add-a-contact)]
-   [quo/text (style/text-subtitle) (i18n/label :t/find-your-friends)]])
-
 (defn- search-input
   []
   (let [[input-value set-input-value] (rn/use-state nil)
@@ -118,31 +106,42 @@
    [quo/text style/text-invalid
     (i18n/label (or message :t/invalid-ens-or-key))]])
 
+(defn navigate-back [] (rf/dispatch [:navigate-back]))
+
 (defn new-contact
   []
   (let [{:keys [public-key ens state msg]} (rf/sub [:contacts/new-identity])
         customization-color                (rf/sub [:profile/customization-color])]
-    [rn/keyboard-avoiding-view {:style {:flex 1}}
+    [floating-button-page/view
-     [rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!}
+     {:header-container-style {:margin-top 8}
-      [rn/view {:style (style/container-outer)}
+      :header                 [quo/page-nav
-       [rn/view {:style style/container-inner}
+                               {:type                :no-title
-        [header]
+                                :icon-name           :i/close
-        [search-input]
+                                :accessibility-label :new-contact-close-button
-        (case state
+                                :on-press            navigate-back}]
-          :invalid [invalid-text msg]
+      :footer                 [quo/button
-          :valid   [found-contact public-key]
+                               {:type                :primary
-          nil)]
+                                :customization-color customization-color
-       [quo/button
+                                :size                40
-        {:type                :primary
+                                :accessibility-label :new-contact-button
-         :customization-color customization-color
+                                :icon-left           :i/profile
-         :size                40
+                                :disabled?           (not= state :valid)
-         :container-style     style/button-view-profile
+                                :on-press            (fn []
-         :accessibility-label :new-contact-button
+                                                       (rf/dispatch [:navigate-back])
-         :icon-left           :i/profile
+                                                       (rf/dispatch [:chat.ui/show-profile public-key
-         :disabled?           (not= state :valid)
+                                                                     ens])
-         :on-press            (fn []
+                                                       (js/setTimeout #(rf/dispatch
-                                (rf/dispatch [:navigate-back])
+                                                                        [:contacts/clear-new-identity])
-                                (rf/dispatch [:chat.ui/show-profile public-key ens])
+                                                                      600))}
-                                (js/setTimeout #(rf/dispatch [:contacts/clear-new-identity])
+                               (i18n/label :t/view-profile)]}
-                                               600))}
+     [quo/page-top
-        (i18n/label :t/view-profile)]]]]))
+      {:title            (i18n/label :t/add-a-contact)
+       :description      :text
+       :description-text (i18n/label :t/find-your-friends)
+       :container-style  {:padding-vertical 8}}]
+     [rn/view {:style (style/container-outer)}
+      [search-input]
+      (case state
+        :invalid [invalid-text msg]
+        :valid   [found-contact public-key]
+        nil)]]))