status-im
/
status-react
mirror of https://github.com/status-im/status-react.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

Use monospace font for address and public-key 

Swap monospace header

Signed-off-by: Gheorghe Pinzaru <feross95@gmail.com>
This commit is contained in:
Gheorghe Pinzaru 2020-08-18 17:13:35 +03:00
parent 399be0686c
commit fdf8d11913
No known key found for this signature in database
GPG Key ID: C9A094959935A952
23 changed files with 169 additions and 158 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/status_im/ui/components/profile_header/view.cljs
View File

@ -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]])]]

23
src/status_im/ui/components/typography.cljs
View File

@ -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

8
src/status_im/ui/screens/add_new/new_chat/styles.cljs
View File

@ -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})
{:margin-horizontal 16})

17
src/status_im/ui/screens/add_new/new_chat/views.cljs
View File

@ -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

22
src/status_im/ui/screens/chat/message/message.cljs
View File

@ -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))

22
src/status_im/ui/screens/chat/styles/message/message.cljs
View File

@ -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

18
src/status_im/ui/screens/ens/views.cljs
View File

@ -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))]]}]]))))

14
src/status_im/ui/screens/intro/views.cljs
View File

@ -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 []

20
src/status_im/ui/screens/keycard/onboarding/views.cljs
View File

@ -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}}

12
src/status_im/ui/screens/keycard/recovery/views.cljs
View File

@ -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])}

5
src/status_im/ui/screens/multiaccounts/login/styles.cljs
View File

@ -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

5
src/status_im/ui/screens/multiaccounts/login/views.cljs
View File

@ -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 []

39
src/status_im/ui/screens/profile/contact/views.cljs
View File

@ -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)]

27
src/status_im/ui/screens/profile/user/views.cljs
View File

@ -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]]])))

6
src/status_im/ui/screens/signing/views.cljs
View File

@ -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]

18
src/status_im/ui/screens/wallet/account/views.cljs
View File

@ -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}}

7
src/status_im/ui/screens/wallet/account_settings/views.cljs
View File

@ -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?

14
src/status_im/ui/screens/wallet/accounts/views.cljs
View File

@ -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 []

2
src/status_im/ui/screens/wallet/add_new/views.cljs
View File

@ -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])

1
src/status_im/ui/screens/wallet/custom_tokens/views.cljs
View File

@ -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

9
src/status_im/ui/screens/wallet/request/views.cljs
View File

@ -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

4
src/status_im/ui/screens/wallet/transactions/styles.cljs
View File

@ -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

31
src/status_im/ui/screens/wallet/transactions/views.cljs
View File

@ -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]])