Skip to content

Commit

Permalink
Use monospace font for address and public-key
Browse files Browse the repository at this point in the history 
Swap monospace header

Signed-off-by: Gheorghe Pinzaru <[email protected]>
  • Loading branch information
@Ferossgp
Ferossgp committed Aug 31, 2020
1 parent 399be06 commit fdf8d11
Show file tree
Hide file tree
Showing 23 changed files with 169 additions and 158 deletions.
3 changes: 2 additions & 1 deletion src/status_im/ui/components/profile_header/view.cljs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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}]
Expand Down Expand Up @@ -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]])]]
Expand Down
23 changes: 10 additions & 13 deletions src/status_im/ui/components/typography.cljs
View file
Original file line number Diff line number Diff line change
@@ -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 []
Expand Down Expand Up @@ -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
Expand Down
8 changes: 2 additions & 6 deletions src/status_im/ui/screens/add_new/new_chat/styles.cljs
View file
Original file line number Diff line number Diff line change
@@ -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 changes: 13 additions & 4 deletions src/status_im/ui/screens/add_new/new_chat/views.cljs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
22 changes: 13 additions & 9 deletions src/status_im/ui/screens/chat/message/message.cljs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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]]))

Expand Down Expand Up @@ -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])
Expand All @@ -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)
Expand All @@ -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
Expand All @@ -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))
Expand Down
22 changes: 7 additions & 15 deletions src/status_im/ui/screens/chat/styles/message/message.cljs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -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
Expand Down
18 changes: 9 additions & 9 deletions src/status_im/ui/screens/ens/views.cljs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -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))]]}]]))))
Expand Down
14 changes: 7 additions & 7 deletions src/status_im/ui/screens/intro/views.cljs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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 []
Expand Down
20 changes: 10 additions & 10 deletions src/status_im/ui/screens/keycard/onboarding/views.cljs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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}}
Expand All @@ -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}}
Expand Down
12 changes: 6 additions & 6 deletions src/status_im/ui/screens/keycard/recovery/views.cljs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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])}
Expand Down
5 changes: 1 addition & 4 deletions src/status_im/ui/screens/multiaccounts/login/styles.cljs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
5 changes: 4 additions & 1 deletion src/status_im/ui/screens/multiaccounts/login/views.cljs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 []
Expand Down
39 changes: 20 additions & 19 deletions src/status_im/ui/screens/profile/contact/views.cljs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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]}]
Expand Down Expand Up @@ -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)]
Expand Down
Loading

0 comments on commit fdf8d11

Please sign in to comment.