diff --git a/src/status_im/ui/components/profile_header/view.cljs b/src/status_im/ui/components/profile_header/view.cljs index 3455008609..688a3dfe83 100644 --- a/src/status_im/ui/components/profile_header/view.cljs +++ b/src/status_im/ui/components/profile_header/view.cljs @@ -36,7 +36,7 @@ (when-not minimized {:padding-top subtitle-margin}))) -(defn extended-header [{:keys [title photo color subtitle subtitle-icon on-press]}] +(defn extended-header [{:keys [title photo color subtitle subtitle-icon on-press monospace]}] (fn [{:keys [animation minimized]}] (let [wrapper (if on-press [rn/touchable-opacity {:on-press on-press}] @@ -72,6 +72,7 @@ :container-style {:margin-right 4}}]) [quo/text {:number-of-lines 1 :ellipsize-mode :middle + :monospace monospace :size (if minimized :small :base) :color :secondary} subtitle]])]] diff --git a/src/status_im/ui/components/typography.cljs b/src/status_im/ui/components/typography.cljs index 55f9660dec..4ce98dc64b 100644 --- a/src/status_im/ui/components/typography.cljs +++ b/src/status_im/ui/components/typography.cljs @@ -1,6 +1,5 @@ (ns status-im.ui.components.typography - (:require [status-im.ui.components.colors :as colors] - [status-im.utils.platform :as platform])) + (:require [status-im.ui.components.colors :as colors])) (def default-font-family "Inter") (defn default-style [] @@ -37,17 +36,15 @@ (dissoc style :typography :nested?))] (-> style (assoc :font-family - (if (= (:font-family style) "monospace") - (if platform/ios? "Menlo-Regular" "monospace") - (str default-font-family "-" - (case font-weight - "400" (when-not (= font-style :italic) - "Regular") - "500" "Medium" - "600" "SemiBold" - "700" "Bold") - (when (= font-style :italic) - "Italic")))) + (str default-font-family "-" + (case font-weight + "400" (when-not (= font-style :italic) + "Regular") + "500" "Medium" + "600" "SemiBold" + "700" "Bold") + (when (= font-style :italic) + "Italic"))) (dissoc :font-weight :font-style)))) (defn get-nested-style diff --git a/src/status_im/ui/screens/add_new/new_chat/styles.cljs b/src/status_im/ui/screens/add_new/new_chat/styles.cljs index 73d078728e..a0eba0a4b1 100644 --- a/src/status_im/ui/screens/add_new/new_chat/styles.cljs +++ b/src/status_im/ui/screens/add_new/new_chat/styles.cljs @@ -1,8 +1,4 @@ -(ns status-im.ui.screens.add-new.new-chat.styles - (:require [status-im.ui.components.colors :as colors])) +(ns status-im.ui.screens.add-new.new-chat.styles) (def message - {:margin-horizontal 16 - :align-self :center - :font-size 12 - :color colors/gray}) \ No newline at end of file + {:margin-horizontal 16}) diff --git a/src/status_im/ui/screens/add_new/new_chat/views.cljs b/src/status_im/ui/screens/add_new/new_chat/views.cljs index 43aafc830f..4939a61e4f 100644 --- a/src/status_im/ui/screens/add_new/new_chat/views.cljs +++ b/src/status_im/ui/screens/add_new/new_chat/views.cljs @@ -93,16 +93,25 @@ :align-items :center} [input-icon state false]]] [react/view {:min-height 30 :justify-content :flex-end} - [react/text {:style styles/message} + [quo/text {:style styles/message + :size :small + :align :center + :color :secondary} (cond (= state :error) (get-validation-label error) + (= state :valid) (str (if ens-name ens-name (gfycat/generate-gfy public-key)) - " • " - (utils/get-shortened-address public-key)) - :else "")]] + " • ") + + :else "") + (when (= state :valid) + [quo/text {:monospace true + :size :inherit + :color :inherit} + (utils/get-shortened-address public-key)])]] [list/flat-list {:data contacts :key-fn :address :render-fn render-row diff --git a/src/status_im/ui/screens/chat/message/message.cljs b/src/status_im/ui/screens/chat/message/message.cljs index 1c21c5e298..07da72d43f 100644 --- a/src/status_im/ui/screens/chat/message/message.cljs +++ b/src/status_im/ui/screens/chat/message/message.cljs @@ -15,6 +15,7 @@ [status-im.utils.contenthash :as contenthash] [status-im.utils.security :as security] [status-im.ui.screens.chat.message.reactions :as reactions] + [quo.core :as quo] [reagent.core :as reagent]) (:require-macros [status-im.utils.views :refer [defview letsubs]])) @@ -59,7 +60,9 @@ (conj acc literal) "code" - (conj acc [react/text-class (style/inline-code-style) literal]) + (conj acc [quo/text {:max-font-size-multiplier react/max-font-size-multiplier + :style (style/inline-code-style)} + literal]) "emph" (conj acc [react/text-class (style/emph-style outgoing) literal]) @@ -71,7 +74,7 @@ (conj acc [react/text-class {:style - {:color (if outgoing colors/white-persist colors/blue) + {:color (if outgoing colors/white-persist colors/blue) :text-decoration-line :underline} :on-press #(when (and (security/safe-link? destination) @@ -82,16 +85,16 @@ "mention" (conj acc [react/text-class - {:style {:color (cond - (= content-type constants/content-type-system-text) colors/black - outgoing colors/mention-outgoing - :else colors/mention-incoming)} + {:style {:color (cond + (= content-type constants/content-type-system-text) colors/black + outgoing colors/mention-outgoing + :else colors/mention-incoming)} :on-press (when-not (= content-type constants/content-type-system-text) #(re-frame/dispatch [:chat.ui/show-profile literal]))} [mention-element literal]]) "status-tag" (conj acc [react/text-class - {:style {:color (if outgoing colors/white-persist colors/blue) + {:style {:color (if outgoing colors/white-persist colors/blue) :text-decoration-line :underline} :on-press #(re-frame/dispatch @@ -117,8 +120,9 @@ (.substring literal 0 (dec (.-length literal)))]]) "codeblock" - (conj acc [react/view style/codeblock-style - [react/text-class style/codeblock-text-style + (conj acc [react/view {:style style/codeblock-style} + [quo/text {:max-font-size-multiplier react/max-font-size-multiplier + :style style/codeblock-text-style} (.substring literal 0 (dec (.-length literal)))]]) acc)) diff --git a/src/status_im/ui/screens/chat/styles/message/message.cljs b/src/status_im/ui/screens/chat/styles/message/message.cljs index e7fb2d95a7..35a20973a8 100644 --- a/src/status_im/ui/screens/chat/styles/message/message.cljs +++ b/src/status_im/ui/screens/chat/styles/message/message.cljs @@ -3,7 +3,6 @@ [status-im.ui.components.colors :as colors] [status-im.ui.components.react :as react] [status-im.ui.screens.chat.styles.photos :as photos] - [status-im.utils.platform :as platform] [status-im.ui.components.typography :as typography])) (defn style-message-text @@ -235,26 +234,19 @@ (outgoing-strong-text-style) (strong-text-style))) -(def monospace-fonts (if platform/ios? "Courier" "monospace")) - (def code-block-background "#2E386B") (defn inline-code-style [] - (update (default-text-style) :style - assoc - :font-family monospace-fonts - :color colors/white-persist - :background-color code-block-background)) + {:color colors/white-persist + :background-color code-block-background}) -(def codeblock-style {:style {:padding 10 - :background-color code-block-background - :border-radius 4}}) +(def codeblock-style + {:padding 10 + :background-color code-block-background + :border-radius 4}) (def codeblock-text-style - (update (default-text-style) :style - assoc - :font-family monospace-fonts - :color colors/white)) + {:color colors/white-persist}) (defn default-blockquote-style [] {:style {:border-left-width 2 diff --git a/src/status_im/ui/screens/ens/views.cljs b/src/status_im/ui/screens/ens/views.cljs index a935d563bc..1ba557d5f3 100644 --- a/src/status_im/ui/screens/ens/views.cljs +++ b/src/status_im/ui/screens/ens/views.cljs @@ -36,16 +36,16 @@ (defn- section [{:keys [title content]}] [react/view {:style {:margin-horizontal 16 - :align-items :flex-start}} + :align-items :flex-start}} [react/text {:style {:color colors/gray :font-size 15}} title] - [react/view {:margin-top 8 + [react/view {:margin-top 8 :padding-horizontal 16 - :padding-vertical 12 - :border-width 1 - :border-radius 12 - :border-color colors/gray-lighter} - [react/text {:style {:font-size 15}} + :padding-vertical 12 + :border-width 1 + :border-radius 12 + :border-color colors/gray-lighter} + [quo/text {:monospace true} content]]]) (defn- domain-label @@ -320,8 +320,8 @@ (i18n/label :t/ens-deposit)]]] :right [react/view {:padding-horizontal 8} [quo/button - {:disabled? (or (not @checked?) (not sufficient-funds?)) - :on-press #(debounce/dispatch-and-chill [::ens/register-name-pressed] 2000)} + {:disabled (or (not @checked?) (not sufficient-funds?)) + :on-press #(debounce/dispatch-and-chill [::ens/register-name-pressed] 2000)} (if sufficient-funds? (i18n/label :t/ens-register) (i18n/label :t/not-enough-snt))]]}]])))) diff --git a/src/status_im/ui/screens/intro/views.cljs b/src/status_im/ui/screens/intro/views.cljs index 01ad555436..421c0a8399 100644 --- a/src/status_im/ui/screens/intro/views.cljs +++ b/src/status_im/ui/screens/intro/views.cljs @@ -279,7 +279,7 @@ (i18n/label :t/processing)]])]]) (defn recovery-success [pubkey name photo-path] - [react/view {:flex 1 + [react/view {:flex 1 :justify-content :space-between :background-color colors/white} [react/view {:flex 1 @@ -306,12 +306,12 @@ :number-of-lines 1 :ellipsize-mode :middle} name] - [react/text {:style {:text-align :center - :margin-top 4 - :color colors/gray - :font-family "monospace"} - :number-of-lines 1 - :ellipsize-mode :middle} + [quo/text {:style {:margin-top 4} + :monospace true + :color :secondary + :align :center + :number-of-lines 1 + :ellipsize-mode :middle} (utils/get-shortened-address pubkey)]]]]]) (defview wizard-generate-key [] diff --git a/src/status_im/ui/screens/keycard/onboarding/views.cljs b/src/status_im/ui/screens/keycard/onboarding/views.cljs index 75ddd39f94..345747b549 100644 --- a/src/status_im/ui/screens/keycard/onboarding/views.cljs +++ b/src/status_im/ui/screens/keycard/onboarding/views.cljs @@ -128,11 +128,11 @@ (i18n/label :t/puk-code)]] [react/view {:justify-content :flex-start :flex 1} - [react/text {:style {:typography :header - :font-family "monospace" - :text-align :center - :color colors/blue} - :accessibility-label :puk-code} + [quo/text {:color :link + :align :center + :size :large + :monospace true + :accessibility-label :puk-code} puk-code]]]] [react/view {:margin-top 16} [react/text {:style {:color colors/gray}} @@ -156,11 +156,11 @@ (i18n/label :t/pair-code)]] [react/view {:justify-content :flex-start :flex 1} - [react/text {:style {:typography :header - :text-align :center - :font-family "monospace" - :color colors/blue} - :accessibility-label :pair-code} + [quo/text {:color :link + :align :center + :size :large + :monospace true + :accessibility-label :pair-code} (:password secrets)]]]] [react/view {:margin-top 16} [react/text {:style {:color colors/gray}} diff --git a/src/status_im/ui/screens/keycard/recovery/views.cljs b/src/status_im/ui/screens/keycard/recovery/views.cljs index 13ce0a28d2..a219d01496 100644 --- a/src/status_im/ui/screens/keycard/recovery/views.cljs +++ b/src/status_im/ui/screens/keycard/recovery/views.cljs @@ -189,12 +189,12 @@ :number-of-lines 1 :ellipsize-mode :middle} (gfy/generate-gfy whisper-public-key)] - [react/text {:style {:text-align :center - :margin-top 4 - :color colors/gray - :font-family "monospace"} - :number-of-lines 1 - :ellipsize-mode :middle} + [quo/text {:style {:margin-top 4} + :monospace true + :align :center + :color :secondary + :number-of-lines 1 + :ellipsize-mode :middle} (utils.core/truncate-str address 14 true)]]] [react/view {:margin-bottom 50} [quo/button {:on-press #(re-frame/dispatch [:keycard.recovery.success/finish-pressed])} diff --git a/src/status_im/ui/screens/multiaccounts/login/styles.cljs b/src/status_im/ui/screens/multiaccounts/login/styles.cljs index a696fa7b2f..015802eca4 100644 --- a/src/status_im/ui/screens/multiaccounts/login/styles.cljs +++ b/src/status_im/ui/screens/multiaccounts/login/styles.cljs @@ -28,10 +28,7 @@ :font-weight "500"}) (def login-badge-pubkey - {:margin-top 4 - :text-align :center - :color colors/gray - :font-family "monospace"}) + {:margin-top 4}) (def password-container {:margin-top 24 diff --git a/src/status_im/ui/screens/multiaccounts/login/views.cljs b/src/status_im/ui/screens/multiaccounts/login/views.cljs index b99c915364..5d412436c3 100644 --- a/src/status_im/ui/screens/multiaccounts/login/views.cljs +++ b/src/status_im/ui/screens/multiaccounts/login/views.cljs @@ -33,7 +33,10 @@ :numberOfLines 1} ;;TODO this should be done in a subscription name] - [react/text {:style styles/login-badge-pubkey} + [quo/text {:monospace true + :align :center + :color :secondary + :style styles/login-badge-pubkey} (utils/get-shortened-address public-key)]]]) (defview login [] diff --git a/src/status_im/ui/screens/profile/contact/views.cljs b/src/status_im/ui/screens/profile/contact/views.cljs index dc8b5ca61b..ee26bdcb9d 100644 --- a/src/status_im/ui/screens/profile/contact/views.cljs +++ b/src/status_im/ui/screens/profile/contact/views.cljs @@ -47,26 +47,26 @@ ; :content-height 150} ; contact]) -(defn render-detail [{:keys [alias public-key ens-name] :as detail}] - [quo/list-item - {:title (or alias ens-name) - :subtitle (utils/get-shortened-address public-key) - :icon [chat-icon/contact-icon-contacts-tab - (multiaccounts/displayed-photo detail)] - :accessibility-label :profile-public-key - :on-press #(re-frame/dispatch [:show-popover {:view :share-chat-key - :address public-key - :ens-name ens-name}]) - :accessory [icons/icon :main-icons/share styles/contact-profile-detail-share-icon]}]) -(defn profile-details [contact] +(defn profile-details [{:keys [alias public-key ens-name] :as contact}] (when contact [react/view [quo/list-header [quo/text {:accessibility-label :profile-details :color :inherit} (i18n/label :t/profile-details)]] - [render-detail contact]])) + [quo/list-item + {:title (or alias ens-name) + :subtitle [quo/text {:monospace true + :color :secondary} + (utils/get-shortened-address public-key)] + :icon [chat-icon/contact-icon-contacts-tab + (multiaccounts/displayed-photo contact)] + :accessibility-label :profile-public-key + :on-press #(re-frame/dispatch [:show-popover {:view :share-chat-key + :address public-key + :ens-name ens-name}]) + :accessory [icons/icon :main-icons/share styles/contact-profile-detail-share-icon]}]])) ;; TODO: List item (defn block-contact-action [{:keys [blocked? public-key]}] @@ -104,12 +104,13 @@ :accessibility-label :back-button :on-press #(re-frame/dispatch [:navigate-back])}] :extended-header (profile-header/extended-header - {:on-press on-share - :title (multiaccounts/displayed-name contact) - :photo (multiaccounts/displayed-photo contact) - :subtitle (if (and ens-verified public-key) - (gfy/generate-gfy public-key) - public-key)})} + {:on-press on-share + :title (multiaccounts/displayed-name contact) + :photo (multiaccounts/displayed-photo contact) + :monospace (not ens-verified) + :subtitle (if (and ens-verified public-key) + (gfy/generate-gfy public-key) + public-key)})} [react/view {:padding-top 12} (for [{:keys [label subtext accessibility-label icon action disabled?]} (actions contact)] diff --git a/src/status_im/ui/screens/profile/user/views.cljs b/src/status_im/ui/screens/profile/user/views.cljs index 0a7bda2d8a..3ad71f6614 100644 --- a/src/status_im/ui/screens/profile/user/views.cljs +++ b/src/status_im/ui/screens/profile/user/views.cljs @@ -32,9 +32,8 @@ {:label :t/ens-username :container-style {:margin-top 12 :margin-bottom 4} :copied-text ens-name} - [react/nested-text - {:style {:line-height 22 :font-size 15 - :font-family "monospace"} + [quo/text + {:monospace true :accessibility-label :ens-username} ens-name]] [react/view {:height 1 :margin-top 12 :margin-horizontal -16 @@ -43,11 +42,10 @@ {:label :t/chat-key :container-style {:margin-top 12 :margin-bottom 4} :copied-text address} - [react/text {:number-of-lines 1 - :ellipsize-mode :middle - :accessibility-label :chat-key - :style {:line-height 22 :font-size 15 - :font-family "monospace"}} + [quo/text {:number-of-lines 1 + :ellipsize-mode :middle + :accessibility-label :chat-key + :monospace true} address]]] [react/view styles/share-link-button [quo/button @@ -194,10 +192,11 @@ :on-press on-share}] :use-insets true :extended-header (profile-header/extended-header - {:on-press on-share - :title (multiaccounts/displayed-name account) - :photo (multiaccounts/displayed-photo account) - :subtitle (if (and ens-verified public-key) - (gfy/generate-gfy public-key) - public-key)})} + {:on-press on-share + :title (multiaccounts/displayed-name account) + :photo (multiaccounts/displayed-photo account) + :monospace (not ens-verified) + :subtitle (if (and ens-verified public-key) + (gfy/generate-gfy public-key) + public-key)})} [content]]]))) diff --git a/src/status_im/ui/screens/signing/views.cljs b/src/status_im/ui/screens/signing/views.cljs index 2024cb5fae..8e4d58ca1f 100644 --- a/src/status_im/ui/screens/signing/views.cljs +++ b/src/status_im/ui/screens/signing/views.cljs @@ -40,13 +40,11 @@ {:title title :title-prefix-width 45 :size :small - ;; FIXME :accessory :text - :accessory-text [react/text + :accessory-text [quo/text {:ellipsize-mode :middle :number-of-lines 1 - :style {:font-family "monospace" - :line-height 22}} + :monospace true} (displayed-name contact)]}]]) (defn token-item [{:keys [icon color] :as token} display-symbol] diff --git a/src/status_im/ui/screens/wallet/account/views.cljs b/src/status_im/ui/screens/wallet/account/views.cljs index 91099c31b7..f8496a583f 100644 --- a/src/status_im/ui/screens/wallet/account/views.cljs +++ b/src/status_im/ui/screens/wallet/account/views.cljs @@ -50,18 +50,20 @@ [react/small-loading-indicator :colors/white-persist] [react/text {:style {:font-size 32 :color colors/white-persist :font-weight "600"}} portfolio-value]) [react/text {:style {:font-size 32 :color colors/white-transparent-persist :font-weight "600"}} (str " " (:code currency))]] - [react/text {:number-of-lines 1 :ellipsize-mode :middle - :style {:width (/ window-width 3) - :line-height 22 :font-size 13 - :font-family "monospace" - :color colors/white-transparent-70-persist}} + [quo/text {:number-of-lines 1 + :ellipsize-mode :middle + :monospace true + :size :small + :style {:width (/ window-width 3) + :line-height 22 + :color colors/white-transparent-70-persist}} (ethereum/normalized-hex address)]] [react/view {:position :absolute :top 12 :right 12} [react/touchable-highlight {:on-press #(re-frame/dispatch [:show-popover {:view :share-account :address address}])} - [icons/icon :main-icons/share {:color colors/white-persist + [icons/icon :main-icons/share {:color colors/white-persist :accessibility-label :share-wallet-address-icon}]]] - [react/view {:height button-group-height :background-color colors/black-transparent-20 - :border-bottom-right-radius 8 :border-bottom-left-radius 8 :flex-direction :row} + [react/view {:height button-group-height :background-color colors/black-transparent-20 + :border-bottom-right-radius 8 :border-bottom-left-radius 8 :flex-direction :row} (if (= type :watch) [react/view {:flex 1 :align-items :center :justify-content :center} [react/text {:style {:margin-left 8 :color colors/white-persist}} diff --git a/src/status_im/ui/screens/wallet/account_settings/views.cljs b/src/status_im/ui/screens/wallet/account_settings/views.cljs index f04040b257..236d3829d7 100644 --- a/src/status_im/ui/screens/wallet/account_settings/views.cljs +++ b/src/status_im/ui/screens/wallet/account_settings/views.cljs @@ -83,12 +83,15 @@ [property (i18n/label :t/wallet-address) [copyable-text/copyable-text-view {:copied-text address} - [react/text {:style {:margin-top 6 :font-family "monospace"}} address]]] + [quo/text {:style {:margin-top 6} + :monospace true} + address]]] (when-not (= type :watch) [property (i18n/label :t/derivation-path) [copyable-text/copyable-text-view {:copied-text path} - [react/text {:style {:margin-top 6 :font-family "monospace"}} path]]]) + [quo/text {:style {:margin-top 6} + :monospace true} path]]]) (when-not (= type :watch) [property (i18n/label :t/storage) (i18n/label (if keycard? diff --git a/src/status_im/ui/screens/wallet/accounts/views.cljs b/src/status_im/ui/screens/wallet/accounts/views.cljs index 4915cf70f2..95cd1d4cd0 100644 --- a/src/status_im/ui/screens/wallet/accounts/views.cljs +++ b/src/status_im/ui/screens/wallet/accounts/views.cljs @@ -30,8 +30,8 @@ [react/view {:style {:flex-direction :row}} (if prices-loading? [react/small-loading-indicator :colors/white-persist] - [react/text {:style {:color colors/white-persist :font-weight "500"} - :accessibility-label "account-total-value"} portfolio-value]) + [react/text {:style {:color colors/white-persist :font-weight "500"} + :accessibility-label "account-total-value"} portfolio-value]) [react/text {:style {:color colors/white-transparent-persist :font-weight "500"}} (str " " (:code currency))]] [react/touchable-highlight {:on-press #(re-frame/dispatch [:show-popover @@ -39,10 +39,12 @@ [icons/icon :main-icons/share {:color colors/white-persist}]]] [react/view [react/text {:style {:color colors/white-persist :font-weight "500" :line-height 22}} name] - [react/text {:number-of-lines 1 :ellipsize-mode :middle - :style {:line-height 22 :font-size 13 - :font-family "monospace" - :color colors/white-transparent-70-persist}} + [quo/text {:number-of-lines 1 + :ellipsize-mode :middle + :size :small + :monospace true + :style {:line-height 22 + :color colors/white-transparent-70-persist}} address]]]])) (defn add-card [] diff --git a/src/status_im/ui/screens/wallet/add_new/views.cljs b/src/status_im/ui/screens/wallet/add_new/views.cljs index fa11d7927d..f301ca956e 100644 --- a/src/status_im/ui/screens/wallet/add_new/views.cljs +++ b/src/status_im/ui/screens/wallet/add_new/views.cljs @@ -64,6 +64,7 @@ {:label (i18n/label :t/wallet-key-title) :auto-focus false :default-value scanned-address + :monospace true :placeholder (i18n/label :t/enter-address) :accessibility-label :add-account-enter-watch-address :on-change-text #(re-frame/dispatch [:set-in [:add-account :address] %])}] @@ -92,6 +93,7 @@ :height 95 :error account-error :accessibility-label :add-account-enter-seed + :monospace true :on-change-text #(do (re-frame/dispatch [:set-in [:add-account :account-error] nil]) diff --git a/src/status_im/ui/screens/wallet/custom_tokens/views.cljs b/src/status_im/ui/screens/wallet/custom_tokens/views.cljs index c06f121a00..87acab327d 100644 --- a/src/status_im/ui/screens/wallet/custom_tokens/views.cljs +++ b/src/status_im/ui/screens/wallet/custom_tokens/views.cljs @@ -48,6 +48,7 @@ {:on-change-text #(debounce-and-save :contract %) :error error :default-value contract + :monospace true :multiline true :height 78 :auto-focus false diff --git a/src/status_im/ui/screens/wallet/request/views.cljs b/src/status_im/ui/screens/wallet/request/views.cljs index f2fbe6bafb..823085a100 100644 --- a/src/status_im/ui/screens/wallet/request/views.cljs +++ b/src/status_im/ui/screens/wallet/request/views.cljs @@ -24,11 +24,10 @@ {:label :t/wallet-address :container-style {:margin-top 12 :margin-bottom 4} :copied-text (eip55/address->checksum address)} - [react/text {:number-of-lines 1 - :ellipsize-mode :middle - :accessibility-label :address-text - :style {:line-height 22 :font-size 15 - :font-family "monospace"}} + [quo/text {:number-of-lines 1 + :ellipsize-mode :middle + :accessibility-label :address-text + :monospace true} (eip55/address->checksum address)]]] [react/view {:padding-top 12 :padding-horizontal 16 diff --git a/src/status_im/ui/screens/wallet/transactions/styles.cljs b/src/status_im/ui/screens/wallet/transactions/styles.cljs index fa5cf56ca6..288f4958da 100644 --- a/src/status_im/ui/screens/wallet/transactions/styles.cljs +++ b/src/status_im/ui/screens/wallet/transactions/styles.cljs @@ -47,9 +47,7 @@ :font-size 16}) (def address-hash - {:flex-shrink 1 - :font-size 16 - :color colors/gray}) + {:flex-shrink 1}) (defn transaction-icon-background [color] {:justify-content :center diff --git a/src/status_im/ui/screens/wallet/transactions/views.cljs b/src/status_im/ui/screens/wallet/transactions/views.cljs index f2aac2317b..f56cdd256f 100644 --- a/src/status_im/ui/screens/wallet/transactions/views.cljs +++ b/src/status_im/ui/screens/wallet/transactions/views.cljs @@ -63,10 +63,12 @@ [react/text {:style styles/address-contact :accessibility-label contact-accessibility-label} contact]) - [react/text {:style styles/address-hash - :ellipsize-mode "middle" - :number-of-lines 1 - :accessibility-label address-accessibility-label} + [quo/text {:style styles/address-hash + :monospace true + :color :secondary + :ellipsize-mode "middle" + :number-of-lines 1 + :accessibility-label address-accessibility-label} address]]] [list/item-icon {:icon :main-icons/next :style {:margin-top 10} @@ -169,18 +171,23 @@ ([label props-value] (details-list-row label props-value nil)) ([label props-value extra-props-value] - (let [[props value] (if (string? props-value) - [nil props-value] - props-value) + (let [[props value] (if (string? props-value) + [nil props-value] + props-value) [extra-props extra-value] (if (string? extra-props-value) [nil extra-props-value] extra-props-value)] [react/view {:style styles/details-row} [react/i18n-text {:style styles/details-item-label :key label}] [react/view {:style styles/details-item-value-wrapper} - [react/text (merge {:style styles/details-item-value} props) + [quo/text (merge {:size :small + :monospace true} + props) (str (or value "-"))] - [react/text (merge {:style styles/details-item-extra-value} extra-props) + [quo/text (merge {:size :small + :color :secondary + :monospace true} + extra-props) (str extra-value)]]]))) (defn details-list @@ -204,10 +211,10 @@ (when (or to-wallet to-contact) [{:accessibility-label :recipient-address-text} to])] - [details-list-row :t/gas-limit gas-limit] - [details-list-row :t/gas-price gas-price-gwei gas-price-eth] + [details-list-row :t/gas-limit [{:monospace true} gas-limit]] + [details-list-row :t/gas-price gas-price-gwei [{:monospace false} gas-price-eth]] [details-list-row :t/gas-used gas-used] - [details-list-row :t/cost-fee cost] + [details-list-row :t/cost-fee [{:monospace false} cost]] [details-list-row :t/nonce nonce] [details-list-row :t/data data]])