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 b05feb06b2..751361cc16 100644 --- a/src/status_im/ui/components/qr_code_viewer/views.cljs +++ b/src/status_im/ui/components/qr_code_viewer/views.cljs @@ -15,10 +15,10 @@ [react/text {:style (merge styles/hash-value-text style)} value]]]) -(defn qr-code-viewer [{:keys [hint-style footer-style]} value hint legend] +(defn qr-code-viewer [{:keys [style hint-style footer-style]} value hint legend] {:pre [(not (nil? value))]} (let [{:keys [width height]} (react/get-dimensions "window")] - [react/view {:style styles/qr-code} + [react/view {:style (merge styles/qr-code style)} [react/text {:style (merge styles/qr-code-hint hint-style)} hint] (when width diff --git a/src/status_im/ui/screens/profile/components/styles.cljs b/src/status_im/ui/screens/profile/components/styles.cljs index 57f63b187c..a924bbdfb5 100644 --- a/src/status_im/ui/screens/profile/components/styles.cljs +++ b/src/status_im/ui/screens/profile/components/styles.cljs @@ -42,23 +42,27 @@ (def settings-item-separator {:margin-left 16}) -(defstyle settings-item +(def settings-item {:padding-horizontal 16 + :flex 1 :flex-direction :row :align-items :center :background-color colors/white :height 52}) +(def settings-item-text-wrapper + {:flex 1 + :flex-direction :row + :justify-content :space-between}) + (defstyle settings-item-text - {:flex 1 - :flex-wrap :nowrap + {:flex-wrap :nowrap :font-size 15 :ios {:letter-spacing -0.2} :android {:color colors/black}}) (def settings-item-value - {:flex 2 - :flex-wrap :nowrap + {:flex-wrap :nowrap :text-align :right :padding-right 10 :font-size 15 @@ -86,4 +90,4 @@ :padding 16}) (defstyle profile-info-container - {:background-color colors/white}) \ No newline at end of file + {:background-color colors/white}) diff --git a/src/status_im/ui/screens/profile/components/views.cljs b/src/status_im/ui/screens/profile/components/views.cljs index bbe0c5f07f..ef7f6566c3 100644 --- a/src/status_im/ui/screens/profile/components/views.cljs +++ b/src/status_im/ui/screens/profile/components/views.cljs @@ -66,12 +66,14 @@ {:on-press action-fn :disabled (not active?)} [react/view styles/settings-item - [react/text {:style styles/settings-item-text} - (i18n/label label-kw)] - (when-not (string/blank? value) - [react/text {:style styles/settings-item-value - :number-of-lines 1 - :uppercase? components.styles/uppercase?} - value]) + [react/view styles/settings-item-text-wrapper + [react/text {:style styles/settings-item-text + :number-of-lines 1} + (i18n/label label-kw)] + (when-not (string/blank? value) + [react/text {:style styles/settings-item-value + :number-of-lines 1 + :uppercase? components.styles/uppercase?} + value])] (when active? - [vector-icons/icon :icons/forward {:color colors/gray}])]]) \ No newline at end of file + [vector-icons/icon :icons/forward {:color colors/gray}])]]) diff --git a/src/status_im/ui/screens/profile/user/styles.cljs b/src/status_im/ui/screens/profile/user/styles.cljs index 0c0d971a56..833f6e4064 100644 --- a/src/status_im/ui/screens/profile/user/styles.cljs +++ b/src/status_im/ui/screens/profile/user/styles.cljs @@ -32,6 +32,13 @@ :align-items :center :justify-content :center}) +(def qr-code + {:background-color colors/gray-lighter}) + +(def qr-code-viewer + {:flex-grow 1 + :flex-direction :column}) + (defstyle logout-text (merge profile.components.styles/settings-item-text - {:color colors/red})) \ No newline at end of file + {:color colors/red})) diff --git a/src/status_im/ui/screens/profile/user/views.cljs b/src/status_im/ui/screens/profile/user/views.cljs index b81be3fc3f..b4115962a6 100644 --- a/src/status_im/ui/screens/profile/user/views.cljs +++ b/src/status_im/ui/screens/profile/user/views.cljs @@ -1,24 +1,25 @@ (ns status-im.ui.screens.profile.user.views (:require-macros [status-im.utils.views :refer [defview letsubs]]) - (:require [status-im.ui.screens.profile.user.styles :as styles] - [status-im.ui.components.toolbar.view :as toolbar] - [status-im.ui.components.react :as react] - [re-frame.core :as re-frame] - [status-im.ui.components.common.styles :as common.styles] - [status-im.ui.components.styles :as components.styles] + (:require [re-frame.core :as re-frame] [status-im.i18n :as i18n] + [status-im.protocol.core :as protocol] + [status-im.ui.components.action-button.styles :as action-button.styles] [status-im.ui.components.colors :as colors] - [status-im.utils.utils :as utils] + [status-im.ui.components.common.styles :as common.styles] [status-im.ui.components.icons.vector-icons :as vector-icons] [status-im.ui.components.list-selection :as list-selection] - [status-im.ui.components.status-bar.view :as status-bar] [status-im.ui.components.qr-code-viewer.views :as qr-code-viewer] - [status-im.utils.config :as config] - [status-im.utils.platform :as platform] + [status-im.ui.components.react :as react] + [status-im.ui.components.status-bar.view :as status-bar] + [status-im.ui.components.styles :as components.styles] + [status-im.ui.components.toolbar.view :as toolbar] [status-im.ui.screens.profile.components.views :as profile.components] [status-im.ui.screens.profile.components.styles :as profile.components.styles] - [status-im.ui.components.action-button.styles :as action-button.styles] - [status-im.protocol.core :as protocol])) + [status-im.ui.screens.profile.user.styles :as styles] + [status-im.utils.config :as config] + [status-im.utils.platform :as platform] + [status-im.utils.utils :as utils])) + (defn my-profile-toolbar [] [toolbar/toolbar {} @@ -59,11 +60,10 @@ (defview qr-viewer [] (letsubs [{:keys [value contact]} [:get :qr-modal]] - [react/view {:flex-grow 1 - :flex-direction :column} + [react/view styles/qr-code-viewer [status-bar/status-bar {:type :modal}] [qr-viewer-toolbar (:name contact) value] - [qr-code-viewer/qr-code-viewer {} + [qr-code-viewer/qr-code-viewer {:style styles/qr-code} value (i18n/label :t/qr-code-public-key-hint) (str value)]])) (defn- show-qr [contact source value]