Update contact screen to new design (#15526)

src/status_im2/contexts/add_new_contact/style.cljs

@@ -3,18 +3,6 @@
             [react-native.platform :as platform]
             [quo2.foundations.typography :as typography]))
 
-(defn container-kbd
-  []
-  {:style                  {:flex 1}
-   :keyboardVerticalOffset 60})
-
-(def container-image
-  {:style {:flex           1
-           :flex-direction :row}})
-
-(def image
-  {:flex 1})
-
 (defn container-outer
   []
   {:style {:flex             (if platform/ios? 4.5 5)
@@ -41,7 +29,8 @@
   []
   {:size   :heading-1
    :weight :semi-bold
-   :style  {:margin-bottom 6
+   :style  {:margin-top    32
+            :margin-bottom 6
             :color         (colors/theme-colors
                             colors/neutral-100
                             colors/white)}})
@@ -127,11 +116,8 @@
    :accessibility-label       :new-contact-close-button
    :size                      32
    :override-background-color (colors/theme-colors
-                               colors/white-opa-60
+                               colors/neutral-10
-                               colors/neutral-80-opa-60)
+                               colors/neutral-90)})
-   :style                     {:position :absolute
-                               :left     20
-                               :top      20}})
 
 (def button-qr
   {:type :outline

src/status_im2/contexts/add_new_contact/views.cljs

@@ -5,7 +5,6 @@
     [react-native.core :as rn]
     [react-native.clipboard :as clipboard]
     [reagent.core :as reagent]
-    [status-im2.common.resources :as resources]
     [status-im.qr-scanner.core :as qr-scanner]
     [status-im.utils.utils :as utils]
     [status-im2.contexts.add-new-contact.style :as style]
@@ -55,11 +54,9 @@
             show-paste-button? (and (not (string/blank? @clipboard))
                                     (string/blank? @default-value)
                                     (string/blank? input))]
-        [rn/keyboard-avoiding-view (style/container-kbd)
+
-         [rn/view style/container-image
+        [rn/view (style/container-outer)
-          [rn/image
+         [rn/view style/container-inner
-           {:source (resources/get-image :add-new-contact)
-            :style  style/image}]
           [quo/button
            (merge (style/button-close)
                   {:on-press
@@ -67,9 +64,7 @@
                      (reset! clipboard nil)
                      (reset! default-value nil)
                      (rf/dispatch [:contacts/clear-new-identity])
-                     (rf/dispatch [:navigate-back]))}) :i/close]]
+                     (rf/dispatch [:navigate-back]))}) :i/close]
-         [rn/view (style/container-outer)
-          [rn/view style/container-inner
           [quo/text (style/text-title)
            (i18n/label :t/add-a-contact)]
           [quo/text (style/text-subtitle)
@@ -119,4 +114,4 @@
                      (rf/dispatch [:contacts/clear-new-identity])
                      (rf/dispatch [:navigate-back])
                      (rf/dispatch [:chat.ui/show-profile public-key ens]))})
-            (i18n/label :t/view-profile)]]]]))))
+           (i18n/label :t/view-profile)]]]))))

src/status_im2/navigation/screens.cljs

@@ -71,6 +71,7 @@
      :component album-selector/album-selector}
 
     {:name      :new-contact
+     :options   {:sheet? true}
      :component add-new-contact/new-contact}
 
     {:name      :discover-communities