From 5d0b739cc01eea66bbae684351682e390b3c0a5d Mon Sep 17 00:00:00 2001 From: erikseppanen Date: Tue, 18 Apr 2023 13:28:12 -0400 Subject: [PATCH] Update contact screen to new design (#15526) --- .../contexts/add_new_contact/style.cljs | 22 +--- .../contexts/add_new_contact/views.cljs | 111 +++++++++--------- src/status_im2/navigation/screens.cljs | 1 + 3 files changed, 58 insertions(+), 76 deletions(-) diff --git a/src/status_im2/contexts/add_new_contact/style.cljs b/src/status_im2/contexts/add_new_contact/style.cljs index a57575760f..1530602da4 100644 --- a/src/status_im2/contexts/add_new_contact/style.cljs +++ b/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 diff --git a/src/status_im2/contexts/add_new_contact/views.cljs b/src/status_im2/contexts/add_new_contact/views.cljs index 164d0ae248..a274d849d0 100644 --- a/src/status_im2/contexts/add_new_contact/views.cljs +++ b/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/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 @@ -67,56 +64,54 @@ (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)]]])))) diff --git a/src/status_im2/navigation/screens.cljs b/src/status_im2/navigation/screens.cljs index 49e7ec1474..a07d9ebaea 100644 --- a/src/status_im2/navigation/screens.cljs +++ b/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