Update contact screen to new design (#15526)

Author: erikseppanen

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-80-opa-60)
-   :style                     {:position :absolute
-                               :left     20
-                               :top      20}})
+                               colors/neutral-10
+                               colors/neutral-90)})
 
 (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,68 +54,64 @@
             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/image
-           {:source (resources/get-image :add-new-contact)
-            :style  style/image}]
+
+        [rn/view (style/container-outer)
+         [rn/view style/container-inner
           [quo/button
            (merge (style/button-close)
                   {:on-press
                    (fn []
                      (reset! clipboard nil)
                      (reset! default-value nil)
                      (rf/dispatch [:contacts/clear-new-identity])
-                     (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)
-            (i18n/label :t/find-your-friends)]
-           [quo/text (style/text-description)
-            (i18n/label :t/ens-or-chat-key)]
-           [rn/view style/container-text-input
-            [rn/view (style/text-input-container invalid?)
-             [rn/text-input
-              (merge (style/text-input)
-                     {:default-value  (or scanned @default-value input)
-                      :placeholder    (i18n/label :t/type-some-chat-key)
-                      :on-change-text (fn [v]
-                                        (reset! default-value v)
-                                        (debounce/debounce-and-dispatch
-                                         [:contacts/set-new-identity v nil]
-                                         600))})]
-             (when show-paste-button?
-               [quo/button
-                (merge style/button-paste
-                       {:on-press
-                        (fn []
-                          (reset! default-value @clipboard)
-                          (rf/dispatch
-                           [:contacts/set-new-identity @clipboard nil]))})
-                (i18n/label :t/paste)])]
-            [quo/button
-             (merge style/button-qr
-                    {:on-press #(rf/dispatch
-                                 [::qr-scanner/scan-code
-                                  {:handler :contacts/qr-code-scanned}])})
-             :i/scan]]
-           (when invalid?
-             [rn/view style/container-invalid
-              [quo/icon :i/alert style/icon-invalid]
-              [quo/text style/text-invalid
-               (i18n/label (or msg :t/invalid-ens-or-key))]])
-           (when (= state :valid)
-             [found-contact public-key])]
-          [rn/view
+                     (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)]
+          [quo/text (style/text-description)
+           (i18n/label :t/ens-or-chat-key)]
+          [rn/view style/container-text-input
+           [rn/view (style/text-input-container invalid?)
+            [rn/text-input
+             (merge (style/text-input)
+                    {:default-value  (or scanned @default-value input)
+                     :placeholder    (i18n/label :t/type-some-chat-key)
+                     :on-change-text (fn [v]
+                                       (reset! default-value v)
+                                       (debounce/debounce-and-dispatch
+                                        [:contacts/set-new-identity v nil]
+                                        600))})]
+            (when show-paste-button?
+              [quo/button
+               (merge style/button-paste
+                      {:on-press
+                       (fn []
+                         (reset! default-value @clipboard)
+                         (rf/dispatch
+                          [:contacts/set-new-identity @clipboard nil]))})
+               (i18n/label :t/paste)])]
            [quo/button
-            (merge (style/button-view-profile state)
-                   {:on-press
-                    (fn []
-                      (reset! clipboard nil)
-                      (reset! default-value nil)
-                      (rf/dispatch [:contacts/clear-new-identity])
-                      (rf/dispatch [:navigate-back])
-                      (rf/dispatch [:chat.ui/show-profile public-key ens]))})
-            (i18n/label :t/view-profile)]]]]))))
+            (merge style/button-qr
+                   {:on-press #(rf/dispatch
+                                [::qr-scanner/scan-code
+                                 {:handler :contacts/qr-code-scanned}])})
+            :i/scan]]
+          (when invalid?
+            [rn/view style/container-invalid
+             [quo/icon :i/alert style/icon-invalid]
+             [quo/text style/text-invalid
+              (i18n/label (or msg :t/invalid-ens-or-key))]])
+          (when (= state :valid)
+            [found-contact public-key])]
+         [rn/view
+          [quo/button
+           (merge (style/button-view-profile state)
+                  {:on-press
+                   (fn []
+                     (reset! clipboard nil)
+                     (reset! default-value nil)
+                     (rf/dispatch [:contacts/clear-new-identity])
+                     (rf/dispatch [:navigate-back])
+                     (rf/dispatch [:chat.ui/show-profile public-key ens]))})
+           (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