From 17ec7cb2ec79496ba3c94fe11497f9d5296593de Mon Sep 17 00:00:00 2001 From: Goran Jovic Date: Fri, 3 Aug 2018 15:45:27 +0200 Subject: [PATCH] refactor - moved main wallet screen into its own package; merged wallet components into one ns Signed-off-by: Goran Jovic --- src/status_im/ui/screens/main_tabs/views.cljs | 4 +- src/status_im/ui/screens/views.cljs | 4 +- .../ui/screens/wallet/components.cljs | 86 --------- .../ui/screens/wallet/components/styles.cljs | 40 ++++ .../ui/screens/wallet/components/views.cljs | 130 ++++++++++--- .../ui/screens/wallet/main/styles.cljs | 136 ++++++++++++++ .../ui/screens/wallet/{ => main}/views.cljs | 9 +- .../wallet/onboarding/setup/views.cljs | 2 +- .../ui/screens/wallet/request/views.cljs | 12 +- .../ui/screens/wallet/send/views.cljs | 2 +- src/status_im/ui/screens/wallet/styles.cljs | 176 +----------------- 11 files changed, 298 insertions(+), 303 deletions(-) delete mode 100644 src/status_im/ui/screens/wallet/components.cljs create mode 100644 src/status_im/ui/screens/wallet/main/styles.cljs rename src/status_im/ui/screens/wallet/{ => main}/views.cljs (96%) diff --git a/src/status_im/ui/screens/main_tabs/views.cljs b/src/status_im/ui/screens/main_tabs/views.cljs index 24ae8cc73e..b5649a35b0 100644 --- a/src/status_im/ui/screens/main_tabs/views.cljs +++ b/src/status_im/ui/screens/main_tabs/views.cljs @@ -7,7 +7,7 @@ [status-im.ui.components.status-bar.view :as status-bar.view] [status-im.ui.components.styles :as common.styles] [status-im.ui.screens.home.views :as home] - [status-im.ui.screens.wallet.views :as wallet] + [status-im.ui.screens.wallet.main.views :as wallet.main] [status-im.ui.screens.main-tabs.styles :as styles] [status-im.ui.screens.profile.user.views :as profile.user] [status-im.ui.components.common.common :as components.common])) @@ -73,7 +73,7 @@ (case view-id :home [home/home] - :wallet [wallet/wallet] + :wallet [wallet.main/wallet] :my-profile [profile.user/my-profile]) (when tab-bar-visible? diff --git a/src/status_im/ui/screens/views.cljs b/src/status_im/ui/screens/views.cljs index 5e6f78506b..b5bef3cf8d 100644 --- a/src/status_im/ui/screens/views.cljs +++ b/src/status_im/ui/screens/views.cljs @@ -25,7 +25,7 @@ [status-im.ui.screens.profile.contact.views :as profile.contact] [status-im.ui.screens.profile.group-chat.views :as profile.group-chat] [status-im.ui.screens.profile.photo-capture.views :refer [profile-photo-capture]] - [status-im.ui.screens.wallet.views :refer [wallet-modal]] + [status-im.ui.screens.wallet.main.views :as wallet.main] [status-im.ui.screens.wallet.collectibles.views :refer [collectibles-list]] [status-im.ui.screens.wallet.send.views :refer [send-transaction send-transaction-modal sign-message-modal]] [status-im.ui.screens.wallet.choose-recipient.views :refer [choose-recipient]] @@ -104,7 +104,7 @@ (case modal-view :qr-scanner qr-scanner :profile-qr-viewer profile.user/qr-viewer - :wallet-modal wallet-modal + :wallet-modal wallet.main/wallet-modal :wallet-transactions-filter wallet-transactions/filter-history :wallet-settings-assets wallet-settings/manage-assets :wallet-send-transaction-modal send-transaction-modal diff --git a/src/status_im/ui/screens/wallet/components.cljs b/src/status_im/ui/screens/wallet/components.cljs deleted file mode 100644 index bc38eecf74..0000000000 --- a/src/status_im/ui/screens/wallet/components.cljs +++ /dev/null @@ -1,86 +0,0 @@ -(ns status-im.ui.screens.wallet.components - " - Higher-level components used in the wallet screens. - " - (:require [status-im.utils.core :as utils] - [status-im.ui.components.colors :as colors] - [status-im.ui.components.icons.vector-icons :as vector-icons] - [status-im.ui.components.react :as react] - [status-im.ui.components.status-bar.view :as status-bar] - [status-im.ui.components.toolbar.actions :as actions] - [status-im.ui.components.toolbar.view :as toolbar] - [status-im.ui.screens.wallet.styles :as styles])) - -;; Wallet tab has a different coloring scheme (dark) that forces color changes (background, text) -;; It might be replaced by some theme mechanism - -(defn text-input [props text] - [react/text-input (utils/deep-merge {:placeholder-text-color colors/white-lighter-transparent - :selection-color colors/white - :style {:color colors/white - :font-size 15 - :height 52 - :letter-spacing -0.2}} - props) - text]) - -(def default-action (actions/back-white actions/default-handler)) - -(defn- toolbar - ([title] (toolbar {} title)) - ([props title] (toolbar props default-action title)) - ([props action title] (toolbar props action title nil)) - ([props action title options] - [toolbar/toolbar (utils/deep-merge {:style styles/toolbar} - props) - [toolbar/nav-button action] - [toolbar/content-title {:color :white} - title] - options])) - -(defn- top-view [avoid-keyboard?] - (if avoid-keyboard? - react/keyboard-avoiding-view - react/view)) - -(defn simple-screen - ([toolbar content] (simple-screen nil toolbar content)) - ([{:keys [avoid-keyboard? status-bar-type]} toolbar content] - [(top-view avoid-keyboard?) {:flex 1 :background-color colors/blue} - [status-bar/status-bar {:type (or status-bar-type :wallet)}] - toolbar - content])) - -(defn- cartouche-content [{:keys [disabled?]} content] - [react/view {:style (styles/cartouche-content-wrapper disabled?)} - [react/view {:flex 1} - content]]) - -(defn cartouche [{:keys [disabled? on-press icon icon-opts] :or {icon :icons/forward} :as m} header content] - [react/view {:style styles/cartouche-container} - [react/text {:style styles/cartouche-header} - header] - (if (or disabled? (nil? on-press)) - [cartouche-content m content] - [react/touchable-highlight {:on-press on-press} - [react/view - [cartouche-content m - (if-not (true? disabled?) - [react/view styles/cartouche-icon-wrapper - [react/view {:flex 1} ;; Let content shrink if needed - content] - [vector-icons/icon icon (merge {:color :white} icon-opts)]] - content)]]])]) - -(defn- cartouche-primary-text [s] - [react/text {:style styles/cartouche-primary-text} - s]) - -(defn- cartouche-secondary-text [s] - [react/text {:style styles/cartouche-secondary-text} - s]) - -(defn cartouche-text-content [primary secondary] - [react/view styles/cartouche-text-wrapper - [cartouche-primary-text primary] - [cartouche-secondary-text secondary]]) diff --git a/src/status_im/ui/screens/wallet/components/styles.cljs b/src/status_im/ui/screens/wallet/components/styles.cljs index 8e4f1a8a09..86b753c051 100644 --- a/src/status_im/ui/screens/wallet/components/styles.cljs +++ b/src/status_im/ui/screens/wallet/components/styles.cljs @@ -3,6 +3,46 @@ (:require [status-im.ui.components.colors :as colors] [status-im.ui.components.styles :as styles])) +;; Components + +(def cartouche-container + {:flex 1 + :margin-top 16 + :margin-horizontal 16}) + +(def cartouche-header + {:color colors/white}) + +(defn cartouche-content-wrapper [disabled?] + (merge + {:flex-direction :row + :margin-top 8 + :border-radius styles/border-radius + :padding-left 14 + :padding-right 8} + (if disabled? + {:border-color colors/white-light-transparent + :border-width 1} + {:background-color colors/white-transparent}))) + +(def cartouche-icon-wrapper + {:flex 1 + :flex-direction :row + :justify-content :space-between + :align-items :center}) + +(def cartouche-text-wrapper + {:flex-direction :row + :justify-content :space-between + :padding-horizontal 15 + :padding-vertical 15}) + +(def cartouche-primary-text + {:color colors/white}) + +(def cartouche-secondary-text + {:color colors/white-transparent}) + (def text-content {:color colors/white}) diff --git a/src/status_im/ui/screens/wallet/components/views.cljs b/src/status_im/ui/screens/wallet/components/views.cljs index 713e362f4a..7da791f176 100644 --- a/src/status_im/ui/screens/wallet/components/views.cljs +++ b/src/status_im/ui/screens/wallet/components/views.cljs @@ -12,10 +12,8 @@ [status-im.ui.components.list-selection :as list-selection] [status-im.ui.components.react :as react] [status-im.ui.components.styles :as components.styles] - [status-im.ui.screens.wallet.components :as components] [status-im.ui.screens.wallet.components.styles :as styles] [status-im.ui.screens.wallet.choose-recipient.views :as choose-recipient] - [status-im.ui.screens.wallet.views :as wallet] [status-im.ui.screens.wallet.styles :as wallet.styles] [status-im.ui.screens.wallet.utils :as wallet.utils] [status-im.utils.ethereum.core :as ethereum] @@ -23,7 +21,87 @@ [status-im.utils.money :as money] [status-im.utils.platform :as platform] [status-im.ui.components.tooltip.views :as tooltip] - [status-im.utils.utils :as utils])) + [status-im.ui.components.colors :as colors] + [status-im.utils.core :as utils.core] + [status-im.utils.utils :as utils.utils] + [status-im.ui.components.toolbar.actions :as actions] + [status-im.ui.components.toolbar.view :as toolbar] + [status-im.ui.components.status-bar.view :as status-bar] + [status-im.ui.components.icons.vector-icons :as vector-icons])) + +;; Wallet tab has a different coloring scheme (dark) that forces color changes (background, text) +;; It might be replaced by some theme mechanism + +(defn text-input [props text] + [react/text-input (utils.core/deep-merge {:placeholder-text-color colors/white-lighter-transparent + :selection-color colors/white + :style {:color colors/white + :font-size 15 + :height 52 + :letter-spacing -0.2}} + props) + text]) + +(def default-action (actions/back-white actions/default-handler)) + +(defn- toolbar + ([title] (toolbar {} title)) + ([props title] (toolbar props default-action title)) + ([props action title] (toolbar props action title nil)) + ([props action title options] + [toolbar/toolbar (utils.core/deep-merge {:style wallet.styles/toolbar} + props) + [toolbar/nav-button action] + [toolbar/content-title {:color :white} + title] + options])) + +(defn- top-view [avoid-keyboard?] + (if avoid-keyboard? + react/keyboard-avoiding-view + react/view)) + +(defn simple-screen + ([toolbar content] (simple-screen nil toolbar content)) + ([{:keys [avoid-keyboard? status-bar-type]} toolbar content] + [(top-view avoid-keyboard?) {:flex 1 :background-color colors/blue} + [status-bar/status-bar {:type (or status-bar-type :wallet)}] + toolbar + content])) + +(defn- cartouche-content [{:keys [disabled?]} content] + [react/view {:style (styles/cartouche-content-wrapper disabled?)} + [react/view {:flex 1} + content]]) + +(defn cartouche [{:keys [disabled? on-press icon icon-opts] :or {icon :icons/forward} :as m} header content] + [react/view {:style styles/cartouche-container} + [react/text {:style styles/cartouche-header} + header] + (if (or disabled? (nil? on-press)) + [cartouche-content m content] + [react/touchable-highlight {:on-press on-press} + [react/view + [cartouche-content m + (if-not (true? disabled?) + [react/view styles/cartouche-icon-wrapper + [react/view {:flex 1} ;; Let content shrink if needed + content] + [vector-icons/icon icon (merge {:color :white} icon-opts)]] + content)]]])]) + +(defn- cartouche-primary-text [s] + [react/text {:style styles/cartouche-primary-text} + s]) + +(defn- cartouche-secondary-text [s] + [react/text {:style styles/cartouche-secondary-text} + s]) + +(defn cartouche-text-content [primary secondary] + [react/view styles/cartouche-text-wrapper + [cartouche-primary-text primary] + [cartouche-secondary-text secondary]]) (defn view-asset [symbol] [react/view @@ -54,8 +132,8 @@ (views/defview assets [type] (views/letsubs [assets [:wallet/transferrable-assets-with-amount]] - [components/simple-screen - [components/toolbar (i18n/label :t/wallet-assets)] + [simple-screen + [toolbar (i18n/label :t/wallet-assets)] [react/view {:style (assoc components.styles/flex :background-color :white)} [list/flat-list {:default-separator? true :data assets @@ -79,7 +157,7 @@ network [:network]] (let [{:keys [name icon decimals]} (tokens/asset-for (ethereum/network->chain-keyword network) symbol)] [react/view - [components/cartouche {:disabled? disabled? :on-press #(re-frame/dispatch [:navigate-to (type->view type)])} + [cartouche {:disabled? disabled? :on-press #(re-frame/dispatch [:navigate-to (type->view type)])} (i18n/label :t/wallet-asset) [react/view {:style styles/asset-content-container :accessibility-label :choose-asset-button} @@ -129,8 +207,8 @@ (views/defview recent-recipients [] (views/letsubs [contacts [:all-added-people-contacts]] - [components/simple-screen - [components/toolbar (i18n/label :t/recipient)] + [simple-screen + [toolbar (i18n/label :t/recipient)] [react/view styles/recent-recipients [list/flat-list {:data contacts :key-fn :address @@ -139,18 +217,18 @@ (defn contact-code [] (let [content (reagent/atom nil)] (fn [] - [components/simple-screen {:avoid-keyboard? true} - [components/toolbar {:style wallet.styles/toolbar-bottom-line} - components/default-action + [simple-screen {:avoid-keyboard? true} + [toolbar {:style wallet.styles/toolbar-bottom-line} + default-action (i18n/label :t/recipient)] [react/view components.styles/flex - [components/cartouche {} + [cartouche {} (i18n/label :t/recipient) - [components/text-input {:multiline true - :style styles/contact-code-text-input - :placeholder (i18n/label :t/recipient-code) - :on-change-text #(reset! content %) - :accessibility-label :recipient-address-input}]] + [text-input {:multiline true + :style styles/contact-code-text-input + :placeholder (i18n/label :t/recipient-code) + :on-change-text #(reset! content %) + :accessibility-label :recipient-address-input}]] [bottom-buttons/bottom-button [button/button {:disabled? (string/blank? @content) :on-press #(re-frame/dispatch [:wallet/fill-request-from-url @content :code]) @@ -163,10 +241,10 @@ (defn- request-camera-permissions [] (re-frame/dispatch [:request-permissions {:permissions [:camera] :on-allowed #(re-frame/dispatch [:navigate-to :recipient-qr-code]) - :on-denied #(utils/set-timeout + :on-denied #(utils.utils/set-timeout (fn [] - (utils/show-popup (i18n/label :t/error) - (i18n/label :t/camera-access-error))) + (utils.utils/show-popup (i18n/label :t/error) + (i18n/label :t/camera-access-error))) 50)}])) (defn- on-choose-recipient [contact-only?] @@ -181,10 +259,10 @@ :action #(re-frame/dispatch [:navigate-to :contact-code])}]))})) (defn recipient-selector [{:keys [name address disabled? contact-only? request?]}] - [components/cartouche {:on-press #(on-choose-recipient contact-only?) - :disabled? disabled? - :icon :icons/dots-horizontal - :icon-opts {:accessibility-label :choose-contact-button}} + [cartouche {:on-press #(on-choose-recipient contact-only?) + :disabled? disabled? + :icon :icons/dots-horizontal + :icon-opts {:accessibility-label :choose-contact-button}} (i18n/label :t/wallet-choose-recipient) [react/view {:accessibility-label :choose-recipient-button} (if name @@ -195,7 +273,7 @@ {:keys [symbol decimals]}] [react/view {:style components.styles/flex :accessibility-label :specify-amount-button} - [components/text-input + [text-input (merge input-options ;; We only auto-correct and prettify user's input when it is valid and positive. @@ -214,7 +292,7 @@ (defn amount-selector [{:keys [error disabled?] :as m} token] [react/view - [components/cartouche {:disabled? disabled?} + [cartouche {:disabled? disabled?} (i18n/label :t/amount) [amount-input m token]] (when error diff --git a/src/status_im/ui/screens/wallet/main/styles.cljs b/src/status_im/ui/screens/wallet/main/styles.cljs new file mode 100644 index 0000000000..a64532ed35 --- /dev/null +++ b/src/status_im/ui/screens/wallet/main/styles.cljs @@ -0,0 +1,136 @@ +(ns status-im.ui.screens.wallet.main.styles + (:require-macros [status-im.utils.styles :refer [defstyle]]) + (:require [status-im.ui.components.colors :as colors])) + +;; Main section + +(defstyle main-section + {:flex 1 + :android {:background-color colors/white} + :ios {:background-color colors/blue}}) + +(defstyle scroll-bottom + {:background-color colors/white + :zIndex -1 + :position :absolute + :left 0 + :right 0 + :android {:height 0} + :ios {:height 9999}}) + +(def section + {:background-color colors/blue}) + +(def backup-seed-phrase-container + {:flex-direction :row + :align-items :center + :border-radius 8 + :margin 16 + :background-color colors/black-darker-transparent + :padding-top 10 + :padding-bottom 10 + :padding-left 14 + :padding-right 12}) + +(def backup-seed-phrase-text-container + {:flex 1}) + +(def backup-seed-phrase-title + {:font-size 15 + :line-height 20 + :color colors/white}) + +(def backup-seed-phrase-description + {:line-height 20 + :color colors/white-lighter-transparent}) + +(def total-balance-container + {:align-items :center + :justify-content :center}) + +(def total-balance + {:flex-direction :row}) + +(def total-balance-value + {:font-size 37 + :color colors/white}) + +(def total-value + {:color colors/white-transparent}) + +(defstyle total-balance-currency + {:font-size 37 + :margin-left 9 + :color colors/white-lighter-transparent + :android {:letter-spacing 1.5} + :ios {:letter-spacing 1.16}}) + +;; Actions section + +(def action-section + {:background-color colors/blue}) + +(def action + {:background-color colors/white-transparent + :width 40 + :height 40 + :border-radius 50}) + +(def action-label + {:color :white}) + +(def action-separator + {:height 1 + :background-color colors/white-light-transparent + :margin-left 70}) + +;; Assets section + +(def asset-section + {:flex 1 + :padding-top 16 + :background-color colors/white}) + +(def asset-item-container + {:flex 1 + :flex-direction :row + :align-items :center + :justify-content :space-between}) + +(def asset-item-value-container + {:flex 1 + :flex-direction :row + :align-items :center}) + +(def asset-item-value + {:flex -1 + :font-size 16 + :color colors/black}) + +(def asset-item-currency + {:font-size 16 + :color colors/gray + :margin-left 6}) + +(def asset-item-price + {:font-size 16 + :color colors/gray + :margin-left 6}) + +(def wallet-address + {:color :white + :text-align :center + :font-size 15 + :letter-spacing -0.2 + :line-height 20}) + +(def address-section + (merge + section + {:flex-grow 1 + :align-items :center + :padding 20})) + +(def modal-history + {:flex 1 + :background-color :white}) diff --git a/src/status_im/ui/screens/wallet/views.cljs b/src/status_im/ui/screens/wallet/main/views.cljs similarity index 96% rename from src/status_im/ui/screens/wallet/views.cljs rename to src/status_im/ui/screens/wallet/main/views.cljs index 7c9cea3cbb..eb6929a76e 100644 --- a/src/status_im/ui/screens/wallet/views.cljs +++ b/src/status_im/ui/screens/wallet/main/views.cljs @@ -1,4 +1,4 @@ -(ns status-im.ui.screens.wallet.views +(ns status-im.ui.screens.wallet.main.views (:require-macros [status-im.utils.views :as views]) (:require [reagent.core :as reagent] [re-frame.core :as re-frame] @@ -8,7 +8,8 @@ [status-im.ui.components.toolbar.view :as toolbar] [status-im.ui.components.icons.vector-icons :as vector-icons] [status-im.ui.screens.wallet.onboarding.views :as onboarding.views] - [status-im.ui.screens.wallet.styles :as styles] + [status-im.ui.screens.wallet.styles :as wallet.styles] + [status-im.ui.screens.wallet.main.styles :as styles] [status-im.ui.screens.wallet.utils :as wallet.utils] [status-im.utils.money :as money] [status-im.ui.components.toolbar.actions :as action] @@ -20,7 +21,7 @@ [status-im.ui.screens.wallet.transactions.views :as transactions.views])) (defn toolbar-view [] - [toolbar/toolbar {:style styles/toolbar :flat? true} + [toolbar/toolbar {:style wallet.styles/toolbar :flat? true} nil [toolbar/content-wrapper] [toolbar/actions @@ -33,7 +34,7 @@ (defn toolbar-modal [modal-history?] [react/view [status-bar.view/status-bar {:type :modal-wallet}] - [toolbar/toolbar {:style styles/toolbar :flat? true} + [toolbar/toolbar {:style wallet.styles/toolbar :flat? true} [toolbar/nav-button (action/close-white action/default-handler)] [toolbar/content-wrapper] [toolbar/actions diff --git a/src/status_im/ui/screens/wallet/onboarding/setup/views.cljs b/src/status_im/ui/screens/wallet/onboarding/setup/views.cljs index 49cc68da0a..0fba97cba0 100644 --- a/src/status_im/ui/screens/wallet/onboarding/setup/views.cljs +++ b/src/status_im/ui/screens/wallet/onboarding/setup/views.cljs @@ -6,7 +6,7 @@ [status-im.react-native.resources :as resources] [status-im.ui.components.react :as react] [status-im.ui.components.styles :as components.styles] - [status-im.ui.screens.wallet.components :as wallet.components] + [status-im.ui.screens.wallet.components.views :as wallet.components] [status-im.ui.screens.wallet.onboarding.setup.styles :as styles] [status-im.ui.components.bottom-buttons.view :as bottom-buttons] [status-im.ui.components.button.view :as button] diff --git a/src/status_im/ui/screens/wallet/request/views.cljs b/src/status_im/ui/screens/wallet/request/views.cljs index cfecd14949..94e7fdc390 100644 --- a/src/status_im/ui/screens/wallet/request/views.cljs +++ b/src/status_im/ui/screens/wallet/request/views.cljs @@ -15,7 +15,7 @@ [status-im.ui.screens.wallet.request.styles :as styles] [status-im.ui.screens.wallet.styles :as wallet.styles] [status-im.ui.components.styles :as components.styles] - [status-im.ui.screens.wallet.components :as comp] + [status-im.ui.screens.wallet.components.views :as wallet.components] [status-im.ui.screens.wallet.components.views :as components] [status-im.utils.ethereum.core :as ethereum] [status-im.utils.ethereum.eip681 :as eip681] @@ -31,8 +31,8 @@ {:keys [amount amount-error amount-text symbol]} [:wallet.request/transaction] scroll (atom nil)] (let [{:keys [decimals] :as token} (tokens/asset-for (ethereum/network->chain-keyword network) symbol)] - [comp/simple-screen {:avoid-keyboard? true} - [comp/toolbar (i18n/label :t/new-request)] + [wallet.components/simple-screen {:avoid-keyboard? true} + [wallet.components/toolbar (i18n/label :t/new-request)] [react/view components.styles/flex [common/network-info {:text-color :white}] [react/scroll-view {:ref #(reset! scroll %) :keyboardShouldPersistTaps :always} @@ -70,9 +70,9 @@ (views/defview request-transaction [] (views/letsubs [address-hex [:get-current-account-hex] chain-id [:get-network-id]] - [comp/simple-screen - [comp/toolbar {} - comp/default-action + [wallet.components/simple-screen + [wallet.components/toolbar {} + wallet.components/default-action (i18n/label :t/receive) [toolbar/actions [{:icon :icons/share :icon-opts {:color :white diff --git a/src/status_im/ui/screens/wallet/send/views.cljs b/src/status_im/ui/screens/wallet/send/views.cljs index 1ebd131e2b..ea91e2471d 100644 --- a/src/status_im/ui/screens/wallet/send/views.cljs +++ b/src/status_im/ui/screens/wallet/send/views.cljs @@ -15,7 +15,7 @@ [status-im.ui.components.tooltip.views :as tooltip] [status-im.ui.screens.wallet.components.styles :as wallet.components.styles] [status-im.ui.screens.wallet.components.views :as components] - [status-im.ui.screens.wallet.components :as wallet.components] + [status-im.ui.screens.wallet.components.views :as wallet.components] [status-im.ui.screens.wallet.send.animations :as send.animations] [status-im.ui.screens.wallet.send.styles :as styles] [status-im.ui.screens.wallet.styles :as wallet.styles] diff --git a/src/status_im/ui/screens/wallet/styles.cljs b/src/status_im/ui/screens/wallet/styles.cljs index 5dbe3306a7..fc2ff1e177 100644 --- a/src/status_im/ui/screens/wallet/styles.cljs +++ b/src/status_im/ui/screens/wallet/styles.cljs @@ -1,7 +1,6 @@ (ns status-im.ui.screens.wallet.styles (:require-macros [status-im.utils.styles :refer [defstyle]]) - (:require [status-im.ui.components.colors :as colors] - [status-im.ui.components.styles :as styles])) + (:require [status-im.ui.components.colors :as colors])) ;; wallet @@ -21,176 +20,3 @@ (def wallet-modal-container {:flex 1 :background-color colors/blue}) - -;; Components - -(def cartouche-container - {:flex 1 - :margin-top 16 - :margin-horizontal 16}) - -(def cartouche-header - {:color colors/white}) - -(defn cartouche-content-wrapper [disabled?] - (merge - {:flex-direction :row - :margin-top 8 - :border-radius styles/border-radius - :padding-left 14 - :padding-right 8} - (if disabled? - {:border-color colors/white-light-transparent - :border-width 1} - {:background-color colors/white-transparent}))) - -(def cartouche-icon-wrapper - {:flex 1 - :flex-direction :row - :justify-content :space-between - :align-items :center}) - -(def cartouche-text-wrapper - {:flex-direction :row - :justify-content :space-between - :padding-horizontal 15 - :padding-vertical 15}) - -(def cartouche-primary-text - {:color colors/white}) - -(def cartouche-secondary-text - {:color colors/white-transparent}) - -;; Main section - -(defstyle main-section - {:flex 1 - :android {:background-color colors/white} - :ios {:background-color colors/blue}}) - -(defstyle scroll-bottom - {:background-color colors/white - :zIndex -1 - :position :absolute - :left 0 - :right 0 - :android {:height 0} - :ios {:height 9999}}) - -(def section - {:background-color colors/blue}) - -(def backup-seed-phrase-container - {:flex-direction :row - :align-items :center - :border-radius 8 - :margin 16 - :background-color colors/black-darker-transparent - :padding-top 10 - :padding-bottom 10 - :padding-left 14 - :padding-right 12}) - -(def backup-seed-phrase-text-container - {:flex 1}) - -(def backup-seed-phrase-title - {:font-size 15 - :line-height 20 - :color colors/white}) - -(def backup-seed-phrase-description - {:line-height 20 - :color colors/white-lighter-transparent}) - -(def total-balance-container - {:align-items :center - :justify-content :center}) - -(def total-balance - {:flex-direction :row}) - -(def total-balance-value - {:font-size 37 - :color colors/white}) - -(def total-value - {:color colors/white-transparent}) - -(defstyle total-balance-currency - {:font-size 37 - :margin-left 9 - :color colors/white-lighter-transparent - :android {:letter-spacing 1.5} - :ios {:letter-spacing 1.16}}) - -;; Actions section - -(def action-section - {:background-color colors/blue}) - -(def action - {:background-color colors/white-transparent - :width 40 - :height 40 - :border-radius 50}) - -(def action-label - {:color :white}) - -(def action-separator - {:height 1 - :background-color colors/white-light-transparent - :margin-left 70}) - -;; Assets section - -(def asset-section - {:flex 1 - :padding-top 16 - :background-color colors/white}) - -(def asset-item-container - {:flex 1 - :flex-direction :row - :align-items :center - :justify-content :space-between}) - -(def asset-item-value-container - {:flex 1 - :flex-direction :row - :align-items :center}) - -(def asset-item-value - {:flex -1 - :font-size 16 - :color colors/black}) - -(def asset-item-currency - {:font-size 16 - :color colors/gray - :margin-left 6}) - -(def asset-item-price - {:font-size 16 - :color colors/gray - :margin-left 6}) - -(def wallet-address - {:color :white - :text-align :center - :font-size 15 - :letter-spacing -0.2 - :line-height 20}) - -(def address-section - (merge - section - {:flex-grow 1 - :align-items :center - :padding 20})) - -(def modal-history - {:flex 1 - :background-color :white}) \ No newline at end of file