diff --git a/src/status_im/ui/components/qr_code_viewer/styles.cljs b/src/status_im/ui/components/qr_code_viewer/styles.cljs index f533d2c082..63689a949f 100644 --- a/src/status_im/ui/components/qr_code_viewer/styles.cljs +++ b/src/status_im/ui/components/qr_code_viewer/styles.cljs @@ -68,10 +68,11 @@ (def footer {:flex-direction :row :justify-content :center - :padding-top 22}) + :padding-top 17}) (def wallet-info - {:align-items :center + {:flex-grow 1 + :align-items :center :padding-bottom 20}) (def hash-value-type @@ -80,6 +81,7 @@ (def hash-value-text {:color colors/black + :align-self :stretch :margin-horizontal 60 :text-align :center :font-size 15 diff --git a/src/status_im/ui/components/qr_code_viewer/views.cljs b/src/status_im/ui/components/qr_code_viewer/views.cljs index e26faa26de..de7b9addcb 100644 --- a/src/status_im/ui/components/qr_code_viewer/views.cljs +++ b/src/status_im/ui/components/qr_code_viewer/views.cljs @@ -2,7 +2,8 @@ (:require [reagent.core :as reagent] [status-im.react-native.js-dependencies :as rn-dependencies] [status-im.ui.components.qr-code-viewer.styles :as styles] - [status-im.ui.components.react :as react])) + [status-im.ui.components.react :as react] + [status-im.ui.components.text :as text])) (defn qr-code [props] (reagent/create-element @@ -12,9 +13,8 @@ (defn- footer [style value] [react/view styles/footer [react/view styles/wallet-info - [react/text {:style (merge styles/hash-value-text style) - :accessibility-label :address-text} - value]]]) + [text/selectable-text {:value value + :style (merge styles/hash-value-text style)}]]]) (defn qr-code-viewer [{:keys [style hint-style footer-style]} value hint legend] {:pre [(not (nil? value))]} diff --git a/src/status_im/ui/components/text.cljs b/src/status_im/ui/components/text.cljs new file mode 100644 index 0000000000..b514aabd0d --- /dev/null +++ b/src/status_im/ui/components/text.cljs @@ -0,0 +1,14 @@ +(ns status-im.ui.components.text + (:require [status-im.ui.components.react :as react] + [status-im.utils.platform :as platform])) + +(defn- selectable-text [{:keys [value style]}] + (if platform/ios? + [react/text-input {:value value + :editable false + :multiline true + :style style}] + [react/text {:style style + :accessibility-label :address-text + :selectable true} + value])) diff --git a/src/status_im/ui/screens/profile/contact/styles.cljs b/src/status_im/ui/screens/profile/contact/styles.cljs index 7a46e4f0be..13242bce1d 100644 --- a/src/status_im/ui/screens/profile/contact/styles.cljs +++ b/src/status_im/ui/screens/profile/contact/styles.cljs @@ -54,4 +54,3 @@ (defstyle contact-profile-info-container {:padding-top 26 :background-color colors/white}) - diff --git a/src/status_im/ui/screens/profile/contact/views.cljs b/src/status_im/ui/screens/profile/contact/views.cljs index 1f8d42071c..ced8ecdbec 100644 --- a/src/status_im/ui/screens/profile/contact/views.cljs +++ b/src/status_im/ui/screens/profile/contact/views.cljs @@ -9,7 +9,8 @@ [re-frame.core :as re-frame] [status-im.utils.contacts :as utils.contacts] [status-im.ui.components.toolbar.view :as toolbar] - [status-im.ui.components.list.views :as list])) + [status-im.ui.components.list.views :as list] + [status-im.ui.components.text :as text])) (defn profile-contact-toolbar [] [toolbar/toolbar {} @@ -42,9 +43,8 @@ [react/text {:style styles/profile-info-title} label] [react/view styles/profile-setting-spacing] - [react/text {:style styles/profile-setting-text - :accessibility-label accessibility-label} - value]]]) + [text/selectable-text {:value value + :style styles/profile-setting-text}]]]) (defn profile-info-contact-code-item [whisper-identity] [profile-info-item