From d32f15243d2a1c42ed15bea529417354dcc6042c Mon Sep 17 00:00:00 2001 From: Andrey Shovkoplyas Date: Mon, 24 Sep 2018 16:00:36 +0200 Subject: [PATCH] colors refactoring Signed-off-by: Andrey Shovkoplyas --- .../src/status_im/ui/components/react.cljs | 11 +- .../chat/commands/impl/transactions.cljs | 12 +- .../commands/impl/transactions/styles.cljs | 37 +++--- .../chat/commands/styles/validation.cljs | 8 +- src/status_im/chat/models.cljs | 5 +- .../realm/schemas/account/chat.cljs | 12 +- .../ui/components/action_button/styles.cljs | 8 +- .../ui/components/button/styles.cljs | 14 +-- .../ui/components/chat_icon/screen.cljs | 14 +-- .../ui/components/chat_icon/styles.cljs | 7 +- src/status_im/ui/components/colors.cljs | 84 ++++++------- .../ui/components/common/styles.cljs | 12 +- .../ui/components/connectivity/styles.cljs | 2 +- .../ui/components/contact/styles.cljs | 4 +- src/status_im/ui/components/desktop/tabs.cljs | 2 +- .../ui/components/desktop/views.cljs | 7 +- .../ui/components/icons/vector_icons.cljs | 19 +-- src/status_im/ui/components/list/styles.cljs | 2 +- src/status_im/ui/components/list/views.cljs | 2 +- .../ui/components/status_bar/styles.cljs | 16 +-- src/status_im/ui/components/styles.cljs | 113 ++---------------- .../ui/components/toolbar/actions.cljs | 2 +- .../ui/components/toolbar/styles.cljs | 17 +++ .../ui/components/tooltip/styles.cljs | 4 +- .../ui/components/tooltip/views.cljs | 2 +- .../ui/screens/accounts/login/styles.cljs | 4 +- .../ui/screens/accounts/recover/styles.cljs | 2 +- src/status_im/ui/screens/accounts/styles.cljs | 2 +- src/status_im/ui/screens/accounts/views.cljs | 2 +- .../add_new/new_public_chat/styles.cljs | 2 +- src/status_im/ui/screens/browser/styles.cljs | 4 +- .../ui/screens/chat/input/input.cljs | 2 +- .../ui/screens/chat/message/message.cljs | 3 +- .../ui/screens/chat/styles/animations.cljs | 7 +- .../chat/styles/input/parameter_box.cljs | 5 +- .../chat/styles/input/suggestions.cljs | 8 +- .../chat/styles/input/validation_message.cljs | 9 +- .../ui/screens/chat/styles/main.cljs | 33 ++--- .../chat/styles/message/command_pill.cljs | 15 --- .../screens/chat/styles/message/datemark.cljs | 4 +- .../screens/chat/styles/message/message.cljs | 47 +++----- .../ui/screens/chat/styles/photos.cljs | 2 +- src/status_im/ui/screens/chat/views.cljs | 2 +- .../screens/desktop/main/add_new/views.cljs | 4 +- .../ui/screens/desktop/main/chat/styles.cljs | 13 +- .../ui/screens/desktop/main/chat/views.cljs | 13 +- .../desktop/main/tabs/profile/styles.cljs | 4 +- .../desktop/main/tabs/profile/views.cljs | 4 +- .../authentication_method/styles.cljs | 2 +- src/status_im/ui/screens/home/styles.cljs | 28 +---- .../ui/screens/home/views/inner_item.cljs | 2 +- .../ui/screens/main_tabs/styles.cljs | 10 +- .../ui/screens/profile/seed/styles.cljs | 4 +- .../wallet/choose_recipient/styles.cljs | 2 +- .../ui/screens/wallet/components/styles.cljs | 36 ++---- .../ui/screens/wallet/components/views.cljs | 2 +- .../ui/screens/wallet/main/styles.cljs | 8 +- .../ui/screens/wallet/onboarding/styles.cljs | 2 +- .../ui/screens/wallet/request/styles.cljs | 2 +- .../ui/screens/wallet/send/styles.cljs | 8 +- .../ui/screens/wallet/send/views.cljs | 9 +- .../wallet/transaction_sent/styles.cljs | 9 -- .../wallet/transaction_sent/views.cljs | 5 +- .../screens/wallet/transactions/styles.cljs | 37 +----- 64 files changed, 288 insertions(+), 485 deletions(-) delete mode 100644 src/status_im/ui/screens/chat/styles/message/command_pill.cljs diff --git a/components/src/status_im/ui/components/react.cljs b/components/src/status_im/ui/components/react.cljs index e7445c6fbc..b9c201000e 100644 --- a/components/src/status_im/ui/components/react.cljs +++ b/components/src/status_im/ui/components/react.cljs @@ -7,7 +7,8 @@ [status-im.utils.utils :as utils] [status-im.utils.platform :as platform] [status-im.i18n :as i18n] - [status-im.react-native.js-dependencies :as js-dependencies])) + [status-im.react-native.js-dependencies :as js-dependencies] + [status-im.ui.components.colors :as colors])) (defn get-react-property [name] (if js-dependencies/react-native @@ -112,7 +113,7 @@ (let [font (get-in platform/platform-specific [:fonts (keyword font)])] [text-input-class (merge {:underline-color-android :transparent - :placeholder-text-color styles/text2-color + :placeholder-text-color colors/text-gray :placeholder (i18n/label :t/type-a-message) :value text} (-> opts @@ -263,20 +264,20 @@ :wallet-settings-assets :wallet-modal :wallet-onboarding-setup-modal) - styles/color-blue4 + colors/blue (:qr-viewer :recipient-qr-code) "#2f3031" - styles/color-white)}) + colors/white)}) bottom-background (when (#{:wallet :recent-recipients :wallet-send-assets :wallet-request-assets :wallet-settings-assets :wallet-modal} current-view) - [view {:background-color styles/color-white + [view {:background-color colors/white :position :absolute :bottom 0 :right 0 diff --git a/src/status_im/chat/commands/impl/transactions.cljs b/src/status_im/chat/commands/impl/transactions.cljs index 35c46c7bb1..7d39d3f0d2 100644 --- a/src/status_im/chat/commands/impl/transactions.cljs +++ b/src/status_im/chat/commands/impl/transactions.cljs @@ -191,10 +191,10 @@ (re-frame/dispatch [:show-transaction-details tx-hash]))} [react/view transactions-styles/command-send-status-container [vector-icons/icon (if confirmed? :icons/check :icons/dots) - {:color colors/blue + {:color (if outgoing colors/blue-light colors/blue) :container-style (transactions-styles/command-send-status-icon outgoing)}] [react/view - [react/text {:style transactions-styles/command-send-status-text} + [react/text {:style (transactions-styles/command-send-status-text outgoing)} (i18n/label (cond confirmed? :status-confirmed tx-exists? :status-pending @@ -210,7 +210,7 @@ [react/view [react/view transactions-styles/command-send-amount-row [react/view transactions-styles/command-send-amount - [react/text {:style transactions-styles/command-send-amount-text + [react/text {:style (transactions-styles/command-send-amount-text outgoing) :font :medium} amount [react/text {:style (transactions-styles/command-amount-currency-separator outgoing)} @@ -221,7 +221,7 @@ (when (and fiat-amount platform/mobile?) [react/view transactions-styles/command-send-fiat-amount - [react/text {:style transactions-styles/command-send-fiat-amount-text} + [react/text {:style (transactions-styles/command-send-fiat-amount-text outgoing)} (str "~ " fiat-amount " " (or currency (i18n/label :usd-currency)))]]) (when (and group-chat recipient-name) @@ -396,7 +396,7 @@ [react/text {:style (transactions-styles/command-request-header-text outgoing)} (i18n/label :transaction-request)]] [react/view transactions-styles/command-request-row - [react/text {:style transactions-styles/command-request-amount-text + [react/text {:style (transactions-styles/command-request-amount-text outgoing) :font :medium} amount [react/text {:style (transactions-styles/command-amount-currency-separator outgoing)} @@ -406,7 +406,7 @@ asset]]] (when platform/mobile? [react/view transactions-styles/command-request-fiat-amount-row - [react/text {:style transactions-styles/command-request-fiat-amount-text} + [react/text {:style (transactions-styles/command-request-fiat-amount-text outgoing)} (str "~ " fiat-amount " " (or currency (i18n/label :usd-currency)))]]) (when network-mismatch? [react/text {:style transactions-styles/command-request-network-text} diff --git a/src/status_im/chat/commands/impl/transactions/styles.cljs b/src/status_im/chat/commands/impl/transactions/styles.cljs index 375488d0df..ff3bbe30ef 100644 --- a/src/status_im/chat/commands/impl/transactions/styles.cljs +++ b/src/status_im/chat/commands/impl/transactions/styles.cljs @@ -1,7 +1,6 @@ (ns status-im.chat.commands.impl.transactions.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-macros [status-im.utils.styles :refer [defstyle defnstyle]]) + (:require [status-im.ui.components.colors :as colors])) (def asset-container {:flex-direction :row @@ -42,16 +41,16 @@ (defn command-send-status-icon [outgoing] {:background-color (if outgoing - colors/blue-darker - colors/blue-transparent) + colors/black-transparent + colors/blue-light) :width 24 :height 24 :border-radius 16 :padding-top 4 :padding-left 4}) -(defstyle command-send-status-text - {:color colors/blue +(defnstyle command-send-status-text [outgoing] + {:color (if outgoing colors/white-transparent colors/blue) :android {:margin-top 3} :ios {:margin-top 4} :margin-left 6 @@ -70,9 +69,9 @@ :align-items :flex-end :max-width 250}) -(defstyle command-send-amount-text +(defnstyle command-send-amount-text [outgoing] {:font-size 22 - :color colors/blue + :color (if outgoing colors/white colors/blue) :ios {:letter-spacing -0.5}}) (def command-send-currency @@ -81,13 +80,13 @@ (defn command-amount-currency-separator [outgoing] {:opacity 0 - :color (if outgoing colors/hawkes-blue colors/white)}) + :color colors/white}) (defn command-send-currency-text [outgoing] {:font-size 22 :margin-left 4 :letter-spacing 1 - :color (if outgoing colors/wild-blue-yonder colors/blue-transparent-40)}) + :color (if outgoing colors/white-transparent colors/blue-light)}) (defn command-request-currency-text [outgoing] {:font-size 22 @@ -103,9 +102,9 @@ :justify-content :flex-end :margin-top 6}) -(def command-send-fiat-amount-text +(defn command-send-fiat-amount-text [outgoing] {:font-size 12 - :color colors/black}) + :color (if outgoing colors/white colors/black)}) (def command-send-recipient-text {:color colors/blue @@ -113,7 +112,7 @@ :line-height 18}) (defn command-send-timestamp [outgoing] - {:color (if outgoing colors/wild-blue-yonder colors/gray) + {:color (if outgoing colors/white-transparent colors/gray) :margin-top 6 :font-size 12}) @@ -143,7 +142,7 @@ (defn command-request-message-view [outgoing] {:border-radius 14 :padding-vertical 4 - :background-color (if outgoing colors/hawkes-blue styles/color-white)}) + :background-color (if outgoing colors/blue colors/white)}) (defn command-request-header-text [outgoing] {:font-size 12 @@ -153,10 +152,10 @@ {:flex-direction :row :margin-top 6}) -(defstyle command-request-amount-text +(defnstyle command-request-amount-text [outgoing] {:font-size 22 :ios {:letter-spacing -0.5} - :color colors/black}) + :color (if outgoing colors/white colors/black)}) (def command-request-separator-line {:background-color colors/gray-light @@ -175,9 +174,9 @@ (def command-request-fiat-amount-row {:margin-top 6}) -(def command-request-fiat-amount-text +(defn command-request-fiat-amount-text [outgoing] {:font-size 12 - :color colors/black}) + :color (if outgoing colors/white colors/black)}) (def command-request-recipient-text {:color colors/blue diff --git a/src/status_im/chat/commands/styles/validation.cljs b/src/status_im/chat/commands/styles/validation.cljs index e993788de0..cbf7e314ac 100644 --- a/src/status_im/chat/commands/styles/validation.cljs +++ b/src/status_im/chat/commands/styles/validation.cljs @@ -1,5 +1,5 @@ (ns status-im.chat.commands.styles.validation - (:require [status-im.ui.components.styles :as common])) + (:require [status-im.ui.components.colors :as colors])) (defn root [bottom] {:flex-direction :column @@ -9,14 +9,14 @@ :position :absolute}) (def message-container - {:background-color common/color-red + {:background-color colors/red :padding 16}) (def message-title - {:color common/color-white + {:color colors/white :font-size 12}) (def message-description - {:color common/color-white + {:color colors/white :font-size 12 :opacity 0.9}) diff --git a/src/status_im/chat/models.cljs b/src/status_im/chat/models.cljs index 21d99a7b9d..8dfdb43b7f 100644 --- a/src/status_im/chat/models.cljs +++ b/src/status_im/chat/models.cljs @@ -16,7 +16,8 @@ [status-im.utils.clocks :as utils.clocks] [status-im.utils.datetime :as time] [status-im.utils.gfycat.core :as gfycat] - [status-im.utils.fx :as fx])) + [status-im.utils.fx :as fx] + [status-im.ui.components.colors :as colors])) (defn multi-user-chat? [cofx chat-id] (get-in cofx [:db :chats chat-id :group-chat])) @@ -43,7 +44,7 @@ (let [name (get-in db [:contacts/contacts chat-id :name])] {:chat-id chat-id :name (or name (gfycat/generate-gfy chat-id)) - :color (styles/random-chat-color) + :color (rand-nth colors/chat-colors) :group-chat false :is-active true :timestamp now diff --git a/src/status_im/data_store/realm/schemas/account/chat.cljs b/src/status_im/data_store/realm/schemas/account/chat.cljs index 5ff52a565e..684c67caa7 100644 --- a/src/status_im/data_store/realm/schemas/account/chat.cljs +++ b/src/status_im/data_store/realm/schemas/account/chat.cljs @@ -1,19 +1,19 @@ (ns status-im.data-store.realm.schemas.account.chat - (:require [status-im.ui.components.styles :refer [default-chat-color]])) + (:require [status-im.ui.components.colors :as colors])) (def v1 {:name :chat :primaryKey :chat-id :properties {:chat-id :string :name :string :color {:type :string - :default default-chat-color} + :default colors/default-chat-color} :group-chat {:type :bool :indexed true} :group-admin {:type :string :optional true} :is-active :bool :timestamp :int - :contacts {:type "string[]"} + :contacts {:type "string[]"} :removed-at {:type :int :optional true} :removed-from-at {:type :int @@ -36,7 +36,7 @@ :properties {:chat-id :string :name :string :color {:type :string - :default default-chat-color} + :default colors/default-chat-color} :group-chat {:type :bool :indexed true} :group-admin {:type :string @@ -68,7 +68,7 @@ :properties {:chat-id :string :name :string :color {:type :string - :default default-chat-color} + :default colors/default-chat-color} :group-chat {:type :bool :indexed true} :group-admin {:type :string @@ -98,7 +98,7 @@ :properties {:chat-id :string :name :string :color {:type :string - :default default-chat-color} + :default colors/default-chat-color} :group-chat {:type :bool :indexed true} :group-admin {:type :string diff --git a/src/status_im/ui/components/action_button/styles.cljs b/src/status_im/ui/components/action_button/styles.cljs index a4699b46d3..329dea63e1 100644 --- a/src/status_im/ui/components/action_button/styles.cljs +++ b/src/status_im/ui/components/action_button/styles.cljs @@ -16,7 +16,7 @@ :height 40 :align-items :center :justify-content :center - :background-color (or circle-color styles/color-light-blue-transparent)}) + :background-color (or circle-color colors/blue-light)}) (def action-button-label-container {:padding-left 16}) @@ -27,13 +27,13 @@ :font-size 16}) (defstyle actions-list - {:background-color styles/color-white + {:background-color colors/white :android {:padding-top 8 :padding-bottom 8}}) (def action-button-label-disabled (merge action-button-label - {:color styles/color-gray4})) + {:color colors/gray})) (defstyle action-button-icon-container-disabled {:border-radius 50 @@ -41,5 +41,5 @@ :height 40 :align-items :center :justify-content :center - :background-color styles/color-light-gray}) + :background-color colors/gray-lighter}) diff --git a/src/status_im/ui/components/button/styles.cljs b/src/status_im/ui/components/button/styles.cljs index d93c8cd71f..794269c1dc 100644 --- a/src/status_im/ui/components/button/styles.cljs +++ b/src/status_im/ui/components/button/styles.cljs @@ -4,8 +4,8 @@ [status-im.ui.components.styles :as styles] [status-im.utils.platform :as platform])) -(def border-color styles/color-white-transparent-3) -(def border-color-high styles/color-white-transparent-4) +(def border-color colors/white-light-transparent) +(def border-color-high colors/white-light-transparent) (def buttons-container {:flex-direction :row}) @@ -40,7 +40,7 @@ (defstyle button-text {:font-weight :normal - :color styles/color-white + :color colors/white :padding-horizontal 16 :android {:font-size 14 :padding-vertical 10 @@ -62,16 +62,16 @@ (def primary-button (merge button-borders - {:background-color styles/color-blue4})) + {:background-color colors/blue})) -(def primary-button-text {:color styles/color-white}) +(def primary-button-text {:color colors/white}) (def secondary-button (merge button-borders - {:background-color styles/color-blue4-transparent})) + {:background-color colors/blue-light})) -(def secondary-button-text {:color styles/color-blue4}) +(def secondary-button-text {:color colors/blue}) (def button-with-icon-container {:flex-direction :row diff --git a/src/status_im/ui/components/chat_icon/screen.cljs b/src/status_im/ui/components/chat_icon/screen.cljs index 65bc79ed61..70d40d2ee7 100644 --- a/src/status_im/ui/components/chat_icon/screen.cljs +++ b/src/status_im/ui/components/chat_icon/screen.cljs @@ -1,12 +1,10 @@ (ns status-im.ui.components.chat-icon.screen (:require-macros [status-im.utils.views :refer [defview letsubs]]) (:require [clojure.string :as string] - [status-im.i18n :as i18n] [status-im.ui.components.react :as react] [status-im.ui.components.chat-icon.styles :as styles] - [status-im.ui.components.styles :as components.styles] [status-im.ui.screens.chat.photos :as photos] - [status-im.react-native.resources :as resources])) + [status-im.ui.components.colors :as colors])) (defn default-chat-icon [name styles] (when-not (string/blank? name) @@ -81,7 +79,7 @@ :online-dot-right styles/online-dot-right :size 40 :chat-icon styles/chat-icon-chat-list - :default-chat-icon (styles/default-chat-icon-chat-list components.styles/default-chat-color) + :default-chat-icon (styles/default-chat-icon-chat-list colors/default-chat-color) :default-chat-icon-text styles/default-chat-icon-text}]) (defn chat-icon-view-menu-item [chat-id group-chat name color online] @@ -135,7 +133,7 @@ :online-dot-right styles/online-dot-right :size 40 :chat-icon styles/chat-icon-chat-list - :default-chat-icon (styles/default-chat-icon-chat-list components.styles/default-chat-color) + :default-chat-icon (styles/default-chat-icon-chat-list colors/default-chat-color) :default-chat-icon-text styles/default-chat-icon-text}]) (defn dapp-icon-browser [contact size] @@ -147,7 +145,7 @@ :online-dot-right styles/online-dot-right :size size :chat-icon (styles/custom-size-icon size) - :default-chat-icon (styles/default-chat-icon-chat-list components.styles/default-chat-color) + :default-chat-icon (styles/default-chat-icon-chat-list colors/default-chat-color) :default-chat-icon-text styles/default-chat-icon-text}]) (defn dapp-icon-permission [contact size] @@ -159,7 +157,7 @@ :online-dot-right styles/online-dot-right :size size :chat-icon (styles/custom-size-icon size) - :default-chat-icon (styles/default-chat-icon-profile components.styles/default-chat-color size) + :default-chat-icon (styles/default-chat-icon-profile colors/default-chat-color size) :default-chat-icon-text styles/default-chat-icon-text}]) (defn profile-icon-view [photo-path name color edit? size] @@ -183,6 +181,6 @@ (defn my-profile-icon [{{:keys [photo-path name]} :account edit? :edit?}] - (let [color components.styles/default-chat-color + (let [color colors/default-chat-color size 56] [profile-icon-view photo-path name color edit? size])) diff --git a/src/status_im/ui/components/chat_icon/styles.cljs b/src/status_im/ui/components/chat_icon/styles.cljs index 1fd735f893..17f66317b1 100644 --- a/src/status_im/ui/components/chat_icon/styles.cljs +++ b/src/status_im/ui/components/chat_icon/styles.cljs @@ -1,6 +1,5 @@ (ns status-im.ui.components.chat-icon.styles - (:require [status-im.ui.components.colors :as colors] - [status-im.ui.components.styles :refer [online-color]])) + (:require [status-im.ui.components.colors :as colors])) (defn default-chat-icon [color] {:margin 0 @@ -112,7 +111,7 @@ :width 13 :height 13 :border-radius 9 - :background-color online-color}) + :background-color colors/blue}) (def online-view-menu-item (merge online-view @@ -218,7 +217,7 @@ :justify-content :center}) (def pending-outer-circle - {:background-color online-color + {:background-color colors/blue :width 8 :height 8 :border-radius 4 diff --git a/src/status_im/ui/components/colors.cljs b/src/status_im/ui/components/colors.cljs index b88e10dd21..c3d66d8b33 100644 --- a/src/status_im/ui/components/colors.cljs +++ b/src/status_im/ui/components/colors.cljs @@ -1,47 +1,6 @@ (ns status-im.ui.components.colors (:require [clojure.string :as string])) -(def white "#ffffff") -(def transparent "transparent") -(def white-light-transparent "rgba(255, 255, 255, 0.1)") ;; Used as icon background color for a dark foreground -(def white-transparent "rgba(255, 255, 255, 0.2)") ;; Used as icon color on dark background -(def white-lighter-transparent "rgba(255, 255, 255, 0.6)") ;; Used for input placeholder color -(def black "#000000") ;; Used as the default text color -(def black-transparent "#00000020") ;; Used as background color for rounded button on dark background -(def black-darker-transparent "#00000033") ;; Used as background color for containers like "Backup seed phrase" -(def gray "#939ba1") ;; Used as a background for a light foreground and as section header and secondary text color -(def gray-icon "#6e777e") ;; Used for forward icon in accounts -(def gray-light "#e8ebec") ;; Used as divider color -(def gray-lighter "#eef2f5") ;; Used as a background or shadow -(def gray-transparent "rgba(184, 193, 199, 0.5)") ;; Used for tabs -(def gray-notifications "#4A5054cc") ;; Used for notifications background -(def gray-border "#ececf0") -(def gray-background "#eceffc") -(def blue "#4360df") ;; Used as main wallet color, and ios home add button -(def blue-transparent "rgba(67, 96, 223, 0.2)") -(def blue-transparent-10 "rgba(67, 96, 223, 0.1)") -(def blue-transparent-40 "rgba(67, 96, 223, 0.4)") -(def blue-darker "#c4cced") -(def blue-dark "#3147ac") ;; Used as secondary wallet color (icon background) -(def hawkes-blue "#dce2fb") ;; Outgoing chat messages background -(def wild-blue-yonder "#707caf") ;; Text color for outgoing messages timestamp -(def blue-light "#cad1ed") ;; Text and bottom border color for own quoted messages -(def red "#ff2d55") ;; Used to highlight errors or "dangerous" actions -(def red-light "#ffe5ea") ;; error tooltip -(def text-light-gray "#212121") ;; Used for labels (home items) -(def cyan "#7adcfb") ;; Used by wallet transaction filtering icon -(def photo-border-color "#ccd3d6") -(def green "#44d058") ;; icon for successful inboud transaction -(def tooltip-green-text "#66bf50") ;; fading tooltip text color -(def tooltip-green "#e9f6e6") ;; fading tooltip background color - -(def chat-colors ["#fa6565" - "#7cda00" - "#887af9" - "#51d0f0" - "#fe8f59" - "#d37ef4"]) - (defn alpha [hex opacity] (let [hex (string/replace hex #"#" "") r (js/parseInt (subs hex 0 2) 16) @@ -49,4 +8,47 @@ b (js/parseInt (subs hex 4 6) 16)] (str "rgba(" r "," g "," b "," opacity ")"))) +;; TRANSPARENT +(def transparent "transparent") + +;; WHITE +(def white "#ffffff") +(def white-light-transparent (alpha white 0.1)) ;; Used as icon background color for a dark foreground +(def white-transparent (alpha white 0.4)) ;; Used as icon color on dark background and input placeholder color +(def wild-blue-yonder white-transparent) ;; Text color for outgoing messages timestamp +(def red-light "#ffe5ea") ;; error tooltip TODO (andrey) should be white, but shadow needed +(def tooltip-green "#e9f6e6") ;; fading tooltip background color TODO (andrey) should be white, but shadow needed + +;; BLACK +(def black "#000000") ;; Used as the default text color +(def black-transparent (alpha black 0.1)) ;; Used as background color for rounded button on dark background and as background color for containers like "Backup seed phrase" +(def gray-light black-transparent) ;; Used as divider color + +;; DARK GREY +(def gray "#939ba1") ;; Dark grey, used as a background for a light foreground and as section header and secondary text color +;; LIGHT GREY +(def gray-lighter "#eef2f5") ;; Light Grey, used as a background or shadow + +;; ACCENT BLUE +(def blue "#4360df") ;; Accent blue, used as main wallet color, and ios home add button +;; LIGHT BLUE +(def blue-light "#ECEFFC") ;; Light Blue +(def gray-background blue-light) ;; TODO (andrey) should be refactored later by Dmitry + +;; RED +(def red "#ff2d55") ;; Used to highlight errors or "dangerous" actions + +;; GREEN +(def green "#44d058") ;; icon for successful inboud transaction + +(def chat-colors ["#fa6565" + "#7cda00" + "#887af9" + "#51d0f0" + "#fe8f59" + "#d37ef4"]) + (def text black) +(def text-gray gray) + +(def default-chat-color :purpule) ;; legacy \ No newline at end of file diff --git a/src/status_im/ui/components/common/styles.cljs b/src/status_im/ui/components/common/styles.cljs index da716571ba..fc9738204a 100644 --- a/src/status_im/ui/components/common/styles.cljs +++ b/src/status_im/ui/components/common/styles.cljs @@ -52,10 +52,10 @@ (defstyle form-title {:flex-shrink 1 - :ios {:color styles/text1-color + :ios {:color colors/text :letter-spacing -0.2 :font-size 16} - :android {:color styles/text4-color + :android {:color colors/text-gray :font-size 14}}) (def form-title-count @@ -64,11 +64,7 @@ :opacity 0.6 :padding-left 8 :padding-right 5 - :color styles/text4-color})) - -(defstyle form-spacer - {:ios {:height 16} - :android {:height 11}}) + :color colors/text-gray})) (defstyle list-header-footer-spacing {:android {:background-color colors/white @@ -91,7 +87,7 @@ {:width 40 :height 40 :border-radius (/ 40 2) - :background-color styles/color-green-4 + :background-color colors/green :align-items :center :justify-content :center}) diff --git a/src/status_im/ui/components/connectivity/styles.cljs b/src/status_im/ui/components/connectivity/styles.cljs index 5725290937..69832cb09d 100644 --- a/src/status_im/ui/components/connectivity/styles.cljs +++ b/src/status_im/ui/components/connectivity/styles.cljs @@ -6,7 +6,7 @@ (defnstyle text-wrapper [{:keys [top window-width pending? modal?]}] (cond-> {:opacity 1.0 - :background-color colors/gray-notifications + :background-color colors/gray :height 35 :position :absolute} platform/desktop? diff --git a/src/status_im/ui/components/contact/styles.cljs b/src/status_im/ui/components/contact/styles.cljs index a3d24f9f7a..d25015bff4 100644 --- a/src/status_im/ui/components/contact/styles.cljs +++ b/src/status_im/ui/components/contact/styles.cljs @@ -21,7 +21,7 @@ :justify-content :center}) (defstyle name-text - {:color common/text1-color + {:color colors/text :android {:font-size 16} :ios {:font-size 17 :letter-spacing -0.2}}) @@ -29,7 +29,7 @@ (def info-text {:margin-top 1 :font-size 12 - :color common/text2-color}) + :color colors/text-gray}) (def contact-container {:flex-direction :row diff --git a/src/status_im/ui/components/desktop/tabs.cljs b/src/status_im/ui/components/desktop/tabs.cljs index 1f555a024b..482a988124 100644 --- a/src/status_im/ui/components/desktop/tabs.cljs +++ b/src/status_im/ui/components/desktop/tabs.cljs @@ -38,7 +38,7 @@ [react/view {:style tabs.styles/tab-container} (let [icon (if active? icon-active icon-inactive)] [react/view - [icons/icon icon {:style {:tint-color (if active? colors/blue colors/gray-icon)}}]]) + [icons/icon icon {:style {:tint-color (if active? colors/blue colors/black)}}]]) [react/view [react/text {:style (tabs.styles/tab-title active?)} title]] diff --git a/src/status_im/ui/components/desktop/views.cljs b/src/status_im/ui/components/desktop/views.cljs index a420b483d4..ebd2e47de4 100644 --- a/src/status_im/ui/components/desktop/views.cljs +++ b/src/status_im/ui/components/desktop/views.cljs @@ -5,7 +5,8 @@ [status-im.ui.components.action-button.styles :as st] [status-im.ui.components.styles :as common] [status-im.ui.components.checkbox.styles :as checkbox.styles] - [status-im.ui.components.react :as react])) + [status-im.ui.components.react :as react] + [status-im.ui.components.colors :as colors])) (defn checkbox [{:keys [on-value-change checked?]}] [react/touchable-highlight {:style checkbox.styles/wrapper :on-press #(do (when on-value-change (on-value-change (not checked?))))} @@ -33,10 +34,10 @@ :height 52 :justify-content :center :align-items :center - :background-color common/color-light-blue}) + :background-color colors/blue}) (def sticky-button-label-style - {:color common/color-white + {:color colors/white :font-size 17 :line-height 20 :letter-spacing -0.2}) diff --git a/src/status_im/ui/components/icons/vector_icons.cljs b/src/status_im/ui/components/icons/vector_icons.cljs index 26341d4a4f..755adeddc5 100644 --- a/src/status_im/ui/components/icons/vector_icons.cljs +++ b/src/status_im/ui/components/icons/vector_icons.cljs @@ -5,7 +5,8 @@ [status-im.ui.components.react :as react] [status-im.utils.platform :as platform] [status-im.ui.components.styles :as styles] - [status-im.react-native.js-dependencies :as js-dependencies]) + [status-im.react-native.js-dependencies :as js-dependencies] + [status-im.ui.components.colors :as colors]) (:refer-clojure :exclude [use])) (when-not platform/desktop? @@ -202,17 +203,17 @@ (cond (keyword? color) (case color - :dark styles/icon-dark-color - :gray styles/icon-gray-color - :blue styles/color-light-blue - :active styles/color-blue4 - :white styles/color-white - :red styles/icon-red-color - styles/icon-dark-color) + :dark colors/black + :gray colors/gray + :blue colors/blue + :active colors/blue + :white colors/white + :red colors/red + colors/black) (string? color) color :else - styles/icon-dark-color))] + colors/black))] (if width (update icon-vec 1 assoc :width width :height height) icon-vec)) diff --git a/src/status_im/ui/components/list/styles.cljs b/src/status_im/ui/components/list/styles.cljs index a1347f0a31..ff9f6e803d 100644 --- a/src/status_im/ui/components/list/styles.cljs +++ b/src/status_im/ui/components/list/styles.cljs @@ -98,7 +98,7 @@ {:background-color colors/blue}) (def action - {:background-color colors/white-transparent + {:background-color colors/white-light-transparent :border-radius 50}) (def action-disabled diff --git a/src/status_im/ui/components/list/views.cljs b/src/status_im/ui/components/list/views.cljs index edfcb2649f..2f7f6cc443 100644 --- a/src/status_im/ui/components/list/views.cljs +++ b/src/status_im/ui/components/list/views.cljs @@ -95,7 +95,7 @@ (def item-icon-forward [item-icon {:icon :icons/forward - :icon-opts {:color colors/white-light-transparent}}]) + :icon-opts {:color colors/white-transparent}}]) (defn- wrap-render-fn [f] (fn [data] diff --git a/src/status_im/ui/components/status_bar/styles.cljs b/src/status_im/ui/components/status_bar/styles.cljs index 4be05fb0b9..4e12609bd4 100644 --- a/src/status_im/ui/components/status_bar/styles.cljs +++ b/src/status_im/ui/components/status_bar/styles.cljs @@ -30,11 +30,11 @@ ;; :transparent (defstyle status-bar-transparent - {:ios (create-status-bar-style {:background-color styles/color-transparent}) + {:ios (create-status-bar-style {:background-color colors/transparent}) :android (create-status-bar-style {:translucent? true})}) (def view-transparent - (create-view-style {:background-color styles/color-transparent})) + (create-view-style {:background-color colors/transparent})) ;; :modal (defstyle status-bar-modal @@ -70,12 +70,12 @@ ;; :transaction (defstyle status-bar-transaction - {:ios (create-status-bar-style {:background-color styles/color-transparent}) - :android (create-status-bar-style {:background-color styles/color-dark-blue-2})}) + {:ios (create-status-bar-style {:background-color colors/transparent}) + :android (create-status-bar-style {:background-color colors/black})}) (defstyle view-transaction - {:ios (create-view-style {:background-color styles/color-transparent}) - :android (create-view-style {:background-color styles/color-dark-blue-2 + {:ios (create-view-style {:background-color colors/transparent}) + :android (create-view-style {:background-color colors/black :height 0})}) ;; TODO(jeluard) Fix status-bar mess by removing useless view and introducing 2dn level tab-bar @@ -86,7 +86,7 @@ :android (create-status-bar-style {:translucent? true})}) (def view-wallet-tab - (create-view-style {:background-color styles/color-blue4})) + (create-view-style {:background-color colors/blue})) ;; :wallet (defstyle status-bar-wallet @@ -94,7 +94,7 @@ :android (create-status-bar-style {:translucent? true})}) (def view-wallet - (create-view-style {:background-color styles/color-blue4 + (create-view-style {:background-color colors/blue :elevation elevation})) ;; :default diff --git a/src/status_im/ui/components/styles.cljs b/src/status_im/ui/components/styles.cljs index cb859ea483..3d0f3566cd 100644 --- a/src/status_im/ui/components/styles.cljs +++ b/src/status_im/ui/components/styles.cljs @@ -1,111 +1,12 @@ (ns status-im.ui.components.styles (:require [status-im.ui.components.colors :as colors])) -(def color-transparent "transparent") -(def color-blue "#7099e6") -(def color-blue4 "#4360df") ; colors/blue -(def color-blue4-transparent "rgba(67, 96, 223, 0.10)") -(def color-blue6 "#3745AF") -(def color-blue-transparent "#7099e632") -(def color-black "#000000") -(def color-purple "#a187d5") -(def color-gray-transparent "rgba(0, 0, 0, 0.4)") -(def color-gray4-transparent "rgba(147, 155, 161, 0.2)") -(def color-gray "#838c93de") -(def color-gray2 "#8f838c93") -(def color-gray3 "#00000040") -(def color-gray4 "#939ba1") -(def color-gray5 "#d9dae1") -(def color-gray6 "#212121") -(def color-gray7 "#9fa3b4") -(def color-gray9 "#E9EBEC") -(def color-dark "#49545d") -(def color-white "white") -(def color-white-transparent "#ffffff66") -(def color-white-transparent-1 "#f1f1f11a") -(def color-white-transparent-3 "#FFFFFF1A") -(def color-white-transparent-4 "#FFFFFF33") -(def color-white-transparent-5 "#FFFFFF8C") -(def color-light-blue "#628fe3") -(def color-light-blue-transparent "#628fe333") -(def color-dark-blue-2 "#1f253f") -(def color-light-gray "#EEF2F5") -(def color-light-gray3 "#e8ebec") -(def color-light-gray6 "#BAC1C6") -(def color-red "red") -(def color-red-2 "#d84b4b") -(def color-light-red "#e86363") -(def color-green-3 "#44d058") -(def color-green-3-light "rgba(68, 208, 88, 0.2)") -(def color-green-4 "#0dcd8d") - -(def color-separator "#D6D6D6") - -(def text1-color color-black) -(def text2-color color-gray) -(def text4-color color-gray4) -(def icon-dark-color color-dark) -(def icon-gray-color color-gray7) -(def icon-red-color color-red-2) -(def online-color color-light-blue) -(def new-messages-count-color color-blue-transparent) -(def chat-background color-light-gray) -(def separator-color "#0000001f") -(def default-chat-color color-purple) - -(defn random-chat-color [] - (rand-nth colors/chat-colors)) - -;;rgb 237 241 243 - (def flex {:flex 1}) -(def create-icon - {:font-size 20 - :height 22 - :color :white}) - -(def icon-back - {:width 8 - :height 14}) - -(def icon-default - {:width 24 - :height 24}) - -(def icon-add - {:width 24 - :height 24 - :color colors/blue}) - -(def icon-add-illuminated - {:width 24 - :height 24 - :color colors/blue - :container-style {:background-color (colors/alpha colors/blue 0.12) - :border-radius 32 - :width 32 - :height 32 - :display :flex - :justify-content :center - :align-items :center}}) - -(def icon-ok - {:width 18 - :height 14}) - -(def icon-qr - {:width 23 - :height 22}) - -(def button-input-container - {:flex 1 - :flex-direction :row}) - -(def button-input - {:flex 1 - :flex-direction :column}) +(def main-container + {:background-color colors/white + :flex 1}) (def modal {:position :absolute @@ -114,8 +15,8 @@ :right 0 :bottom 0}) -(def main-container - {:background-color color-white - :flex 1}) - (def border-radius 8) + +(def icon-default + {:width 24 + :height 24}) \ No newline at end of file diff --git a/src/status_im/ui/components/toolbar/actions.cljs b/src/status_im/ui/components/toolbar/actions.cljs index 32147dcf9b..22c146bbbc 100644 --- a/src/status_im/ui/components/toolbar/actions.cljs +++ b/src/status_im/ui/components/toolbar/actions.cljs @@ -1,6 +1,6 @@ (ns status-im.ui.components.toolbar.actions (:require [re-frame.core :as re-frame] - [status-im.ui.components.styles :as styles])) + [status-im.ui.components.toolbar.styles :as styles])) (defn add [illuminated? handler] {:icon :icons/add diff --git a/src/status_im/ui/components/toolbar/styles.cljs b/src/status_im/ui/components/toolbar/styles.cljs index 9ecdd94645..312cf769cb 100644 --- a/src/status_im/ui/components/toolbar/styles.cljs +++ b/src/status_im/ui/components/toolbar/styles.cljs @@ -91,3 +91,20 @@ (def counter-container {:top 3}) + +(def icon-add + {:width 24 + :height 24 + :color colors/blue}) + +(def icon-add-illuminated + {:width 24 + :height 24 + :color colors/blue + :container-style {:background-color (colors/alpha colors/blue 0.12) + :border-radius 32 + :width 32 + :height 32 + :display :flex + :justify-content :center + :align-items :center}}) diff --git a/src/status_im/ui/components/tooltip/styles.cljs b/src/status_im/ui/components/tooltip/styles.cljs index 82e45726d3..dd4a0e2b6f 100644 --- a/src/status_im/ui/components/tooltip/styles.cljs +++ b/src/status_im/ui/components/tooltip/styles.cljs @@ -38,11 +38,11 @@ :margin-horizontal 12 :padding-horizontal 16 :padding-vertical 9 - :background-color colors/gray-notifications + :background-color colors/gray :border-radius 8}) (defn tooltip-text [font-size] - {:color styles/color-red-2 + {:color colors/red :font-size font-size}) (def bottom-tooltip-text diff --git a/src/status_im/ui/components/tooltip/views.cljs b/src/status_im/ui/components/tooltip/views.cljs index 960036ef4e..1cb1df9518 100644 --- a/src/status_im/ui/components/tooltip/views.cljs +++ b/src/status_im/ui/components/tooltip/views.cljs @@ -24,7 +24,7 @@ {:component-did-mount (animations/animate-tooltip -150 bottom-anim-value opacity-value -10)} [react/view styles/bottom-tooltip-container [react/animated-view {:style (styles/tooltip-animated bottom-anim-value opacity-value)} - [vector-icons/icon :icons/tooltip-triangle {:color colors/gray-notifications + [vector-icons/icon :icons/tooltip-triangle {:color colors/gray :style styles/tooltip-triangle :container-style {:transform [{:rotate "180deg"}]}}] [react/view styles/bottom-tooltip-text-container diff --git a/src/status_im/ui/screens/accounts/login/styles.cljs b/src/status_im/ui/screens/accounts/login/styles.cljs index af1ee35a3a..59104c10c6 100644 --- a/src/status_im/ui/screens/accounts/login/styles.cljs +++ b/src/status_im/ui/screens/accounts/login/styles.cljs @@ -18,7 +18,7 @@ (def sign-you-in {:margin-top 16 :font-size 13 - :color colors/text-light-gray}) + :color colors/black}) (def bottom-button-container {:flex-direction :row @@ -33,7 +33,7 @@ (def login-badge-name {:font-size 15 - :color colors/text-light-gray + :color colors/black :margin-top 8}) (def password-container diff --git a/src/status_im/ui/screens/accounts/recover/styles.cljs b/src/status_im/ui/screens/accounts/recover/styles.cljs index 4c551aef1b..8752acb4ea 100644 --- a/src/status_im/ui/screens/accounts/recover/styles.cljs +++ b/src/status_im/ui/screens/accounts/recover/styles.cljs @@ -24,7 +24,7 @@ (def sign-you-in {:margin-top 16 :font-size 13 - :color colors/text-light-gray}) + :color colors/black}) (def recovery-phrase-input {:flex 1 diff --git a/src/status_im/ui/screens/accounts/styles.cljs b/src/status_im/ui/screens/accounts/styles.cljs index 4031903b19..99c9c5a607 100644 --- a/src/status_im/ui/screens/accounts/styles.cljs +++ b/src/status_im/ui/screens/accounts/styles.cljs @@ -43,7 +43,7 @@ (def account-badge-text {:font-size 17 :letter-spacing -0.2 - :color common/color-black}) + :color colors/black}) (defstyle account-badge-pub-key-text {:font-size 14 diff --git a/src/status_im/ui/screens/accounts/views.cljs b/src/status_im/ui/screens/accounts/views.cljs index 81ce290ad8..8d6a3cf1cd 100644 --- a/src/status_im/ui/screens/accounts/views.cljs +++ b/src/status_im/ui/screens/accounts/views.cljs @@ -27,7 +27,7 @@ :numberOfLines 1} public-key]] [react/view {:flex 1}] - [icons/icon :icons/forward {:color (colors/alpha colors/gray-icon 0.4)}]]]) + [icons/icon :icons/forward {:color (colors/alpha colors/black 0.4)}]]]) (defview accounts [] (letsubs [accounts [:get-accounts]] diff --git a/src/status_im/ui/screens/add_new/new_public_chat/styles.cljs b/src/status_im/ui/screens/add_new/new_public_chat/styles.cljs index 10b78fe547..b10066f8d5 100644 --- a/src/status_im/ui/screens/add_new/new_public_chat/styles.cljs +++ b/src/status_im/ui/screens/add_new/new_public_chat/styles.cljs @@ -6,7 +6,7 @@ {:font-size 17 :padding-bottom 0 :letter-spacing -0.2 - :color colors/text}) + :color colors/black}) (def topic-hash (merge group-chat-name-input diff --git a/src/status_im/ui/screens/browser/styles.cljs b/src/status_im/ui/screens/browser/styles.cljs index 883be9a3d6..3903746310 100644 --- a/src/status_im/ui/screens/browser/styles.cljs +++ b/src/status_im/ui/screens/browser/styles.cljs @@ -11,7 +11,7 @@ :android {:padding-bottom 6}}) (def dapp-name-text - {:color colors/text-light-gray + {:color colors/black :font-size 16}) (defstyle dapp-text @@ -44,7 +44,7 @@ (def web-view-loading {:flex 1 - :background-color colors/gray-transparent + :background-color colors/gray :align-items :center :justify-content :center :position :absolute diff --git a/src/status_im/ui/screens/chat/input/input.cljs b/src/status_im/ui/screens/chat/input/input.cljs index 35e531e91f..ffd81c595f 100644 --- a/src/status_im/ui/screens/chat/input/input.cljs +++ b/src/status_im/ui/screens/chat/input/input.cljs @@ -110,7 +110,7 @@ current-public-key [:get-current-public-key]] [react/view {:style style/reply-message-content} [react/text {:style style/reply-message-author} (chat-utils/format-reply-author from username current-public-key)] - [react/text {:style message-style/style-message-text} message-text]])) + [react/text {:style (message-style/style-message-text false)} message-text]])) (defview reply-message-view [] (letsubs [{:keys [content from] :as message} [:get-reply-message]] diff --git a/src/status_im/ui/screens/chat/message/message.cljs b/src/status_im/ui/screens/chat/message/message.cljs index 1bc002de26..54beee6306 100644 --- a/src/status_im/ui/screens/chat/message/message.cljs +++ b/src/status_im/ui/screens/chat/message/message.cljs @@ -10,7 +10,6 @@ [status-im.chat.commands.core :as commands] [status-im.chat.commands.receiving :as commands-receiving] [status-im.ui.screens.chat.styles.message.message :as style] - [status-im.ui.screens.chat.styles.message.command-pill :as pill-style] [status-im.ui.screens.chat.photos :as photos] [status-im.constants :as constants] [status-im.ui.components.chat-icon.screen :as chat-icon.screen] @@ -195,7 +194,7 @@ [react/view (when (:response-to content) [quoted-message (:response-to content) outgoing current-public-key]) - [react/text {:style (style/text-message collapsible?) + [react/text {:style (style/text-message collapsible? outgoing) :number-of-lines (when collapsible? number-of-lines) :ref (partial reset! ref)} parsed-text diff --git a/src/status_im/ui/screens/chat/styles/animations.cljs b/src/status_im/ui/screens/chat/styles/animations.cljs index 4226799126..9f70aee389 100644 --- a/src/status_im/ui/screens/chat/styles/animations.cljs +++ b/src/status_im/ui/screens/chat/styles/animations.cljs @@ -1,5 +1,6 @@ (ns status-im.ui.screens.chat.styles.animations - (:require [status-im.ui.components.styles :as common])) + (:require [status-im.ui.components.styles :as common] + [status-im.ui.components.colors :as colors])) (def header-draggable-icon "rgba(73, 84, 93, 0.23)") @@ -11,7 +12,7 @@ :bottom 0}) (defn expandable-container [anim-value bottom max-height] - {:background-color common/color-white + {:background-color colors/white :height anim-value :left 0 :right 0 @@ -22,7 +23,7 @@ (def header-container {:min-height 19 - :background-color common/color-white + :background-color colors/white :align-items :center}) (def header-icon diff --git a/src/status_im/ui/screens/chat/styles/input/parameter_box.cljs b/src/status_im/ui/screens/chat/styles/input/parameter_box.cljs index c27f9d5be2..f09cc7b9fc 100644 --- a/src/status_im/ui/screens/chat/styles/input/parameter_box.cljs +++ b/src/status_im/ui/screens/chat/styles/input/parameter_box.cljs @@ -1,9 +1,8 @@ (ns status-im.ui.screens.chat.styles.input.parameter-box - (:require [status-im.ui.components.styles :as common] - [status-im.ui.components.colors :as colors])) + (:require [status-im.ui.components.colors :as colors])) (def root - {:background-color common/color-white + {:background-color colors/white :border-bottom-color colors/gray-light :border-bottom-width 1}) diff --git a/src/status_im/ui/screens/chat/styles/input/suggestions.cljs b/src/status_im/ui/screens/chat/styles/input/suggestions.cljs index c510a3b663..517204042f 100644 --- a/src/status_im/ui/screens/chat/styles/input/suggestions.cljs +++ b/src/status_im/ui/screens/chat/styles/input/suggestions.cljs @@ -1,14 +1,12 @@ (ns status-im.ui.screens.chat.styles.input.suggestions (:require-macros [status-im.utils.styles :refer [defnstyle]]) - (:require [status-im.ui.components.styles :as common] - [status-im.ui.components.colors :as colors] - [status-im.utils.platform :as platform])) + (:require [status-im.ui.components.colors :as colors])) (def item-height 52) (def border-height 1) (def root - {:background-color common/color-white + {:background-color colors/white :border-top-color colors/gray-light :border-top-width 1}) @@ -21,7 +19,7 @@ :border-bottom-width border-height}) (def item-suggestion-name - {:color common/color-black + {:color colors/black :font-size 15}) (def item-suggestion-description diff --git a/src/status_im/ui/screens/chat/styles/input/validation_message.cljs b/src/status_im/ui/screens/chat/styles/input/validation_message.cljs index e6fbcc0602..f62c4f1d22 100644 --- a/src/status_im/ui/screens/chat/styles/input/validation_message.cljs +++ b/src/status_im/ui/screens/chat/styles/input/validation_message.cljs @@ -1,5 +1,6 @@ (ns status-im.ui.screens.chat.styles.input.validation-message - (:require [status-im.ui.components.styles :as common])) + (:require [status-im.ui.components.styles :as common] + [status-im.ui.components.colors :as colors])) (defn root [bottom] {:flex-direction :column @@ -9,14 +10,14 @@ :position :absolute}) (def message-container - {:background-color common/color-red + {:background-color colors/red :padding 16}) (def message-title - {:color common/color-white + {:color colors/white :font-size 12}) (def message-description - {:color common/color-white + {:color colors/white :font-size 12 :opacity 0.9}) diff --git a/src/status_im/ui/screens/chat/styles/main.cljs b/src/status_im/ui/screens/chat/styles/main.cljs index 88c8e1688d..24909f774e 100644 --- a/src/status_im/ui/screens/chat/styles/main.cljs +++ b/src/status_im/ui/screens/chat/styles/main.cljs @@ -8,7 +8,7 @@ (def chat-view {:flex 1 - :background-color component.styles/chat-background}) + :background-color colors/gray-lighter}) (def toolbar-container {:flex 1 @@ -24,7 +24,7 @@ (def toolbar-view {:flex-direction :row :height 56 - :background-color component.styles/color-white + :background-color colors/white :elevation 2}) (def action @@ -54,7 +54,7 @@ :margin-bottom 2}) (defstyle chat-name-text - {:color component.styles/color-black + {:color colors/black :android {:font-size 15 :line-height 20} :ios {:font-size 16 @@ -66,25 +66,21 @@ :width 14 :height 9}) -(def up-icon - {:width 14 - :height 8}) - (defstyle toolbar-subtitle - {:color component.styles/text4-color + {:color colors/text-gray :line-height 15 :font-size 13 :ios {:margin-top 4}}) (defstyle last-activity-text - {:color component.styles/text4-color + {:color colors/text-gray :line-height 15 :ios {:font-size 14 :margin-top 4} :android {:font-size 13}}) (defn actions-wrapper [status-bar-height] - {:background-color component.styles/color-white + {:background-color colors/white :elevation 2 :position :absolute :top (+ 55 status-bar-height) @@ -94,7 +90,7 @@ (def actions-separator {:margin-left 16 :height 1.5 - :background-color component.styles/separator-color}) + :background-color colors/black-transparent}) (def actions-view {:margin-vertical 10}) @@ -115,14 +111,9 @@ (def action-title {:margin-top -2.5 - :color component.styles/text1-color + :color colors/text :font-size 14}) -(def action-subtitle - {:margin-top 1 - :color component.styles/text2-color - :font-size 12}) - (def typing-all {:marginBottom 20}) @@ -137,7 +128,7 @@ (def typing-text {:margin-top -2 :font-size 12 - :color component.styles/text2-color}) + :color colors/text-gray}) (def overlay-highlight {:flex 1}) @@ -154,7 +145,7 @@ :elevation 8}) (defn bottom-info-container [height] - {:background-color component.styles/color-white + {:background-color colors/white :elevation 2 :position :absolute :bottom 16 @@ -213,10 +204,6 @@ (def add-contact-close-icon {:margin-right 12}) -(defstyle actions-list-view - {:ios {:border-bottom-color component.styles/color-gray3 - :border-bottom-width 0.5}}) - (def message-view-preview {:flex 1 :align-items :center diff --git a/src/status_im/ui/screens/chat/styles/message/command_pill.cljs b/src/status_im/ui/screens/chat/styles/message/command_pill.cljs deleted file mode 100644 index 3bfb27093a..0000000000 --- a/src/status_im/ui/screens/chat/styles/message/command_pill.cljs +++ /dev/null @@ -1,15 +0,0 @@ -(ns status-im.ui.screens.chat.styles.message.command-pill - (:require [status-im.utils.platform :as p] - [status-im.ui.components.styles :refer [color-white]])) - -(defn pill [command] - {:background-color (:color command) - :height 24 - :border-radius 50 - :padding-top (if p/ios? 4 3) - :paddingHorizontal 12 - :text-align :left}) - -(def pill-text - {:font-size 12 - :color color-white}) diff --git a/src/status_im/ui/screens/chat/styles/message/datemark.cljs b/src/status_im/ui/screens/chat/styles/message/datemark.cljs index f6e18b4a91..cd80d2bb1a 100644 --- a/src/status_im/ui/screens/chat/styles/message/datemark.cljs +++ b/src/status_im/ui/screens/chat/styles/message/datemark.cljs @@ -1,6 +1,6 @@ (ns status-im.ui.screens.chat.styles.message.datemark (:require-macros [status-im.utils.styles :refer [defstyle]]) - (:require [status-im.ui.components.styles :as common])) + (:require [status-im.ui.components.colors :as colors])) (def datemark-wrapper {:flex 1 @@ -11,6 +11,6 @@ :height 22}) (defstyle datemark-text - {:color common/color-gray4 + {:color colors/gray :ios {:letter-spacing -0.2} :font-size 15}) 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 a5c4f3824c..e0413ed828 100644 --- a/src/status_im/ui/screens/chat/styles/message/message.cljs +++ b/src/status_im/ui/screens/chat/styles/message/message.cljs @@ -1,25 +1,17 @@ (ns status-im.ui.screens.chat.styles.message.message (:require-macros [status-im.utils.styles :refer [defstyle defnstyle]]) - (:require [status-im.ui.components.styles :as styles] - [status-im.ui.components.colors :as colors] + (:require [status-im.ui.components.colors :as colors] [status-im.ui.screens.chat.styles.photos :as photos] [status-im.utils.platform :as platform] [status-im.constants :as constants])) -(defstyle style-message-text +(defnstyle style-message-text [outgoing] {:font-size 15 - :color styles/text1-color + :color (if outgoing colors/white colors/text) :letter-spacing -0.2 :android {:line-height 22} :ios {:line-height 22}}) -(def style-sub-text - {:top -2 - :font-size 12 - :color styles/text2-color - :line-height 14 - :height 16}) - (defn message-padding-top [{:keys [first-in-group? display-username?]}] (if (and display-username? @@ -27,9 +19,6 @@ 6 2)) -(def message-empty-spacing - {:height 16}) - (defn last-message-padding [{:keys [last? typing]}] (when (and last? (not typing)) @@ -63,7 +52,7 @@ (defn message-timestamp-placeholder-text [outgoing] (assoc message-timestamp :color - (if outgoing colors/hawkes-blue styles/color-white))) + (if outgoing colors/blue colors/white))) (def message-expand-button {:color colors/gray @@ -75,7 +64,7 @@ {:margin-top 18 :margin-left 40 :font-size 12 - :color styles/text2-color}) + :color colors/text-gray}) (defn group-message-wrapper [message] (merge {:flex-direction :column} @@ -109,7 +98,7 @@ :margin-top 2}) (def delivery-text - {:color styles/color-gray4 + {:color colors/gray :font-size 12}) (def not-sent-view @@ -119,7 +108,7 @@ (def not-sent-text (assoc delivery-text - :color styles/color-red + :color colors/red :text-align :right :padding-top 4)) @@ -131,13 +120,13 @@ {:padding-top 4}) (defn text-message - [collapsed?] - (assoc style-message-text :margin-bottom (if collapsed? 2 0))) + [collapsed? outgoing] + (assoc (style-message-text outgoing) :margin-bottom (if collapsed? 2 0))) (defnstyle emoji-message [{:keys [incoming-group]}] {:font-size 40 - :color styles/text1-color + :color colors/text :android {:line-height 45} :ios {:line-height 46} :margin-top (if incoming-group 4 0)}) @@ -153,7 +142,7 @@ 16 4)} (when-not (= content-type constants/content-type-emoji) - {:background-color (if outgoing colors/hawkes-blue styles/color-white)}) + {:background-color (if outgoing colors/blue colors/white)}) (when (= content-type constants/content-type-command) {:padding-top 12 :padding-bottom 10}))) @@ -175,27 +164,19 @@ (def status-from {:margin-top 20 :font-size 18 - :color styles/text1-color}) + :color colors/text}) (def status-text {:margin-top 10 :font-size 14 :line-height 20 :text-align :center - :color styles/text2-color}) - -(defn message-animated-container [height] - {:height height}) + :color colors/text-gray}) (defn message-container [window-width] {:position :absolute :width window-width}) -(defn new-message-container [margin on-top?] - {:background-color styles/color-white - :margin-bottom margin - :elevation (if on-top? 6 5)}) - (def message-author-name {:font-size 12 :padding-top 6 @@ -205,7 +186,7 @@ {:margin-bottom 6 :padding-bottom 6 :border-bottom-color (if outgoing - colors/blue-light + colors/white-light-transparent colors/gray-lighter) :border-bottom-width 2 :border-bottom-left-radius 2 diff --git a/src/status_im/ui/screens/chat/styles/photos.cljs b/src/status_im/ui/screens/chat/styles/photos.cljs index 9b86c6f64a..f6715c95bf 100644 --- a/src/status_im/ui/screens/chat/styles/photos.cljs +++ b/src/status_im/ui/screens/chat/styles/photos.cljs @@ -14,7 +14,7 @@ :width size :height size :opacity 0.4 - :border-color colors/photo-border-color + :border-color colors/gray :border-width 1 :border-radius (radius size)}) diff --git a/src/status_im/ui/screens/chat/views.cljs b/src/status_im/ui/screens/chat/views.cljs index 3176dbf2cb..6efaa8f84e 100644 --- a/src/status_im/ui/screens/chat/views.cljs +++ b/src/status_im/ui/screens/chat/views.cljs @@ -40,7 +40,7 @@ [react/touchable-highlight {:on-press #(re-frame/dispatch [:hide-contact contact-identity]) :accessibility-label :add-to-contacts-close-button} - [vector-icons/icon :icons/close {:color colors/gray-icon + [vector-icons/icon :icons/close {:color colors/black :container-style style/add-contact-close-icon}]]]))) (defn- on-options [chat-id chat-name group-chat? public?] diff --git a/src/status_im/ui/screens/desktop/main/add_new/views.cljs b/src/status_im/ui/screens/desktop/main/add_new/views.cljs index b37e09a2e1..853c068eae 100644 --- a/src/status_im/ui/screens/desktop/main/add_new/views.cljs +++ b/src/status_im/ui/screens/desktop/main/add_new/views.cljs @@ -68,7 +68,7 @@ [error-tooltip chat-error]) [react/text-input {:placeholder "0x..." :flex 1 - :selection-color colors/hawkes-blue + :selection-color colors/blue :font :default :on-change (fn [e] (let [native-event (.-nativeEvent e) @@ -118,7 +118,7 @@ [react/text-input {:flex 1 :font :default - :selection-color colors/hawkes-blue + :selection-color colors/blue :placeholder "" :on-change on-topic-change :on-submit-editing (when-not disable? create-public-chat)}]] diff --git a/src/status_im/ui/screens/desktop/main/chat/styles.cljs b/src/status_im/ui/screens/desktop/main/chat/styles.cljs index 15a240925f..4d957cc942 100644 --- a/src/status_im/ui/screens/desktop/main/chat/styles.cljs +++ b/src/status_im/ui/screens/desktop/main/chat/styles.cljs @@ -9,7 +9,7 @@ (defn message-box [{:keys [outgoing] :as message}] (let [align (if outgoing :flex-end :flex-start) - color (if outgoing colors/hawkes-blue colors/white)] + color (if outgoing colors/blue colors/white)] {:align-self align :background-color color :border-radius 8 @@ -37,9 +37,9 @@ :text-align-vertical :center :width 60}) -(defn message-timestamp [] +(defn message-timestamp [outgoing] (merge (message-timestamp-placeholder) - {:color colors/gray + {:color (if outgoing colors/white colors/gray) :position :absolute :bottom 0 :right -5})) @@ -129,8 +129,9 @@ :color color :margin-bottom 4}) -(def message-text - {:font-size 14}) +(defn message-text [outgoing] + {:color (if outgoing colors/white colors/black) + :font-size 14}) (def message-container {:flex-direction :column}) @@ -257,5 +258,5 @@ :tint-color colors/white}) (defn reply-icon [outgoing] - {:tint-color (if outgoing colors/wild-blue-yonder colors/gray)}) + {:tint-color (if outgoing colors/white colors/gray)}) diff --git a/src/status_im/ui/screens/desktop/main/chat/views.cljs b/src/status_im/ui/screens/desktop/main/chat/views.cljs index d9eb9cef70..590f771d46 100644 --- a/src/status_im/ui/screens/desktop/main/chat/views.cljs +++ b/src/status_im/ui/screens/desktop/main/chat/views.cljs @@ -98,27 +98,28 @@ (views/letsubs [username [:get-contact-name-by-identity from]] [react/view {:style (message.style/quoted-message-container outgoing)} [react/view {:style message.style/quoted-message-author-container} - [icons/icon :icons/reply {:style (styles/reply-icon outgoing)}] + [icons/icon :icons/reply {:style (styles/reply-icon outgoing) + :container-style (when outgoing {:opacity 0.4})}] [react/text {:style (message.style/quoted-message-author outgoing)} (chat-utils/format-reply-author from username current-public-key)]] [react/text {:style (message.style/quoted-message-text outgoing) :number-of-lines 5} text]])) -(views/defview message-with-timestamp [text {:keys [message-id timestamp outgoing content current-public-key] :as message} style] +(views/defview message-with-timestamp [text {:keys [message-id timestamp outgoing content current-public-key]} style] [react/view {:style style} [react/touchable-highlight {:on-press #(re-frame/dispatch [:chat.ui/reply-to-message message-id])} [react/view {:style styles/message-container} (when (:response-to content) [quoted-message (:response-to content) outgoing current-public-key]) [react/view {:style styles/message-wrapper} - [react/text {:style (styles/message-text message) + [react/text {:style (styles/message-text outgoing) :selectable true - :selection-color (if outgoing colors/white colors/hawkes-blue)} + :selection-color (if outgoing colors/white colors/blue-light)} text] [react/text {:style (styles/message-timestamp-placeholder)} (time/timestamp->time timestamp)] - [react/text {:style (styles/message-timestamp)} + [react/text {:style (styles/message-timestamp outgoing)} (time/timestamp->time timestamp)]]]]]) (views/defview text-only-message [text message] @@ -337,4 +338,4 @@ [react/text {:style styles/chat-profile-contact-code} (i18n/label :t/contact-code)] [react/text {:style {:font-size 14} :selectable true - :selection-color colors/hawkes-blue} whisper-identity]]]))) + :selection-color colors/blue} whisper-identity]]]))) diff --git a/src/status_im/ui/screens/desktop/main/tabs/profile/styles.cljs b/src/status_im/ui/screens/desktop/main/tabs/profile/styles.cljs index 5f03aaa413..569ec76755 100644 --- a/src/status_im/ui/screens/desktop/main/tabs/profile/styles.cljs +++ b/src/status_im/ui/screens/desktop/main/tabs/profile/styles.cljs @@ -96,13 +96,13 @@ (def close-icon {:height 24 :width 24 - :tint-color colors/gray-icon}) + :tint-color colors/black}) (def check-icon {:height 16 :width 16 :margin-right 8 - :tint-color colors/tooltip-green-text}) + :tint-color colors/green}) (def qr-code-title {:font-size 20 diff --git a/src/status_im/ui/screens/desktop/main/tabs/profile/views.cljs b/src/status_im/ui/screens/desktop/main/tabs/profile/views.cljs index ef452f40d3..c124df498f 100644 --- a/src/status_im/ui/screens/desktop/main/tabs/profile/views.cljs +++ b/src/status_im/ui/screens/desktop/main/tabs/profile/views.cljs @@ -39,7 +39,7 @@ [react/view {:style styles/tooltip-icon-text} [vector-icons/icon :icons/check {:style styles/check-icon}] - [react/text {:style {:font-size 14 :color colors/tooltip-green-text}} + [react/text {:style {:font-size 14 :color colors/green}} (i18n/label :sharing-copied-to-clipboard)]] [react/view {:style styles/tooltip-triangle}]])) @@ -56,7 +56,7 @@ [react/view {:style {:align-items :center}} [react/text {:style styles/qr-code-text :selectable true - :selection-color colors/hawkes-blue} + :selection-color colors/blue} public-key] (when tooltip-opacity [copied-tooltip tooltip-opacity])] diff --git a/src/status_im/ui/screens/hardwallet/authentication_method/styles.cljs b/src/status_im/ui/screens/hardwallet/authentication_method/styles.cljs index d729b51acd..a12d35b624 100644 --- a/src/status_im/ui/screens/hardwallet/authentication_method/styles.cljs +++ b/src/status_im/ui/screens/hardwallet/authentication_method/styles.cljs @@ -33,7 +33,7 @@ :height 63}) (def authentication-method-row-icon-container - {:background-color colors/blue-transparent-10 + {:background-color colors/blue-light :width 40 :height 40 :border-radius 50 diff --git a/src/status_im/ui/screens/home/styles.cljs b/src/status_im/ui/screens/home/styles.cljs index e0e856d89c..3b99f3eb85 100644 --- a/src/status_im/ui/screens/home/styles.cljs +++ b/src/status_im/ui/screens/home/styles.cljs @@ -1,17 +1,12 @@ (ns status-im.ui.screens.home.styles (:require-macros [status-im.utils.styles :refer [defstyle defnstyle]]) - (:require [status-im.ui.components.styles :as component.styles] - [status-im.ui.components.colors :as colors])) + (:require [status-im.ui.components.colors :as colors])) (def delete-button-width 100) (defn toolbar [] {:background-color colors/white}) -(def chat-separator-item - {:border-bottom-width 1 - :border-bottom-color component.styles/color-gray5}) - (defstyle chat-container {:flex-direction :row :background-color colors/white @@ -70,7 +65,7 @@ :margin-right 4}) (defstyle name-text - {:color component.styles/text1-color + {:color colors/text :android {:font-size 16 :height 26} :ios {:font-size 17 @@ -90,7 +85,7 @@ {:flex-shrink 1}) (defstyle last-message-text - {:color component.styles/text4-color + {:color colors/text-gray :android {:font-size 14 :height 24} :ios {:font-size 15 @@ -108,19 +103,11 @@ :height 16}) (defstyle datetime-text - {:color component.styles/text4-color + {:color colors/text-gray :android {:font-size 14} :desktop {:font-size 14} :ios {:font-size 15}}) -(def new-messages-container - {:min-width 22 - :height 22 - :padding-horizontal 8 - :margin-left 15 - :background-color component.styles/new-messages-count-color - :border-radius 50}) - (defstyle new-messages-text {:left 0 :font-size 12 @@ -132,13 +119,6 @@ (def container {:flex 1}) -(def native-button-offset 16) - -(def create-icon - {:font-size 20 - :height 22 - :color colors/white}) - (def group-icon {:margin-top 8 :margin-right 6 diff --git a/src/status_im/ui/screens/home/views/inner_item.cljs b/src/status_im/ui/screens/home/views/inner_item.cljs index 22ce8dcf10..629e0dfc08 100644 --- a/src/status_im/ui/screens/home/views/inner_item.cljs +++ b/src/status_im/ui/screens/home/views/inner_item.cljs @@ -110,7 +110,7 @@ (if dapp [chat-icon.screen/dapp-icon-browser dapp 36] [react/view styles/browser-icon-container - [vector-icons/icon :icons/discover {:color component.styles/color-light-gray6}]])] + [vector-icons/icon :icons/discover {:color colors/gray}]])] [react/view styles/chat-info-container [react/view styles/item-upper-container [react/view styles/name-view diff --git a/src/status_im/ui/screens/main_tabs/styles.cljs b/src/status_im/ui/screens/main_tabs/styles.cljs index 6fc53d75e8..6956cc478a 100644 --- a/src/status_im/ui/screens/main_tabs/styles.cljs +++ b/src/status_im/ui/screens/main_tabs/styles.cljs @@ -15,9 +15,9 @@ (def tabs-container {:flex-direction :row :height tabs-height - :background-color styles/color-white + :background-color colors/white :border-top-width 1 - :border-top-color styles/color-light-gray3}) + :border-top-color colors/black-transparent}) (def tab-container {:height tabs-height @@ -31,11 +31,11 @@ :font-weight (if active? "600" :normal)} :text-align :center :color (if active? - styles/color-blue4 - styles/color-gray4)}) + colors/blue + colors/gray)}) (defn tab-icon [active?] - {:color (if active? styles/color-blue4 styles/color-gray4)}) + {:color (if active? colors/blue colors/gray)}) (def counter-container {:position :absolute diff --git a/src/status_im/ui/screens/profile/seed/styles.cljs b/src/status_im/ui/screens/profile/seed/styles.cljs index e2ffd0d5f9..58f3849930 100644 --- a/src/status_im/ui/screens/profile/seed/styles.cljs +++ b/src/status_im/ui/screens/profile/seed/styles.cljs @@ -78,11 +78,11 @@ :border-radius 8 :background-color colors/white :border-width 1 - :border-color colors/gray-border}) + :border-color colors/gray-lighter}) (def twelve-words-columns-separator {:width 1 - :background-color colors/gray-border}) + :background-color colors/gray-lighter}) (def enter-word-container {:flex 1 diff --git a/src/status_im/ui/screens/wallet/choose_recipient/styles.cljs b/src/status_im/ui/screens/wallet/choose_recipient/styles.cljs index 1655131c85..37b86c4e09 100644 --- a/src/status_im/ui/screens/wallet/choose_recipient/styles.cljs +++ b/src/status_im/ui/screens/wallet/choose_recipient/styles.cljs @@ -82,7 +82,7 @@ (def qr-code {:flex 1 - :background-color colors/white-lighter-transparent + :background-color colors/white-transparent :align-items :center}) (defn qr-code-text [dimensions] diff --git a/src/status_im/ui/screens/wallet/components/styles.cljs b/src/status_im/ui/screens/wallet/components/styles.cljs index 2ce875ff72..22c8ada94d 100644 --- a/src/status_im/ui/screens/wallet/components/styles.cljs +++ b/src/status_im/ui/screens/wallet/components/styles.cljs @@ -21,9 +21,9 @@ :padding-left 14 :padding-right 8} (if disabled? - {:border-color colors/white-light-transparent - :border-width 1} - {:background-color colors/white-transparent}))) + {:border-width 1 + :border-color colors/white-light-transparent} + {:background-color colors/white-light-transparent}))) (def cartouche-icon-wrapper {:flex 1 @@ -47,7 +47,7 @@ {:color colors/white}) (def text-secondary-content - {:color colors/white-lighter-transparent}) + {:color colors/white-transparent}) (def text {:margin-right 10}) @@ -76,19 +76,9 @@ :ios {:line-height 16} :android {:font-size 12}}) -(def amount-text-input-container - {:margin-top 8}) - (def label-transparent (merge label - {:color colors/white-lighter-transparent})) - -(defn amount-container [active?] - {:height 52 - :background-color (if active? - colors/white-light-transparent - styles/color-white-transparent-3) - :border-radius 8}) + {:color colors/white-transparent})) (def network {:color :white @@ -107,7 +97,7 @@ (def asset-container {:margin-top 8 :height 52 - :background-color styles/color-white-transparent-3 + :background-color colors/white-light-transparent :justify-content :center :padding-left 14 :padding-vertical 14 @@ -117,7 +107,7 @@ (def asset-container-read-only {:margin-top 8 :height 52 - :border-color styles/color-white-transparent-3 + :border-color colors/white-light-transparent :border-width 1 :justify-content :center :padding-left 14 @@ -131,7 +121,7 @@ :margin-vertical 11}) (def asset-icon - {:background-color styles/color-gray9 + {:background-color colors/gray-lighter :border-radius 50}) (def asset-text-content @@ -150,7 +140,7 @@ {:margin-right 10}) (def asset-text - {:color styles/color-white}) + {:color colors/white}) (defstyle container-disabled {:border-width 1 @@ -174,7 +164,7 @@ :letter-spacing -0.2}) (defn participant [address?] - {:color (if address? :white colors/white-lighter-transparent) + {:color (if address? :white colors/white-transparent) :flex-shrink 1 :font-size 15 :letter-spacing -0.2}) @@ -196,7 +186,7 @@ :color colors/white}) (def recipient-no-address - {:color colors/white-lighter-transparent}) + {:color colors/white-transparent}) (def recent-recipients {:flex 1 @@ -208,7 +198,7 @@ (def wallet-value {:padding-left 6 - :color styles/color-white-transparent-5 + :color colors/white-transparent :font-size 15 :letter-spacing -0.2}) @@ -218,7 +208,7 @@ (def separator {:height 1 :margin-horizontal 15 - :background-color styles/color-white-transparent-1}) + :background-color colors/white-light-transparent}) (def button-text {:color :white diff --git a/src/status_im/ui/screens/wallet/components/views.cljs b/src/status_im/ui/screens/wallet/components/views.cljs index d845a5365f..a8f4a81e45 100644 --- a/src/status_im/ui/screens/wallet/components/views.cljs +++ b/src/status_im/ui/screens/wallet/components/views.cljs @@ -33,7 +33,7 @@ ;; 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 + [react/text-input (utils.core/deep-merge {:placeholder-text-color colors/white-transparent :selection-color colors/white :style {:color colors/white :font-size 15 diff --git a/src/status_im/ui/screens/wallet/main/styles.cljs b/src/status_im/ui/screens/wallet/main/styles.cljs index cf66b066d9..4733df9cf2 100644 --- a/src/status_im/ui/screens/wallet/main/styles.cljs +++ b/src/status_im/ui/screens/wallet/main/styles.cljs @@ -26,7 +26,7 @@ :align-items :center :border-radius 8 :margin 16 - :background-color colors/black-darker-transparent + :background-color colors/black-transparent :padding-top 10 :padding-bottom 10 :padding-left 14 @@ -42,7 +42,7 @@ (def backup-seed-phrase-description {:line-height 20 - :color colors/white-lighter-transparent}) + :color colors/white-transparent}) (def total-balance-container {:align-items :center @@ -64,12 +64,12 @@ (defstyle total-balance-currency {:font-size 37 :margin-left 9 - :color colors/white-lighter-transparent + :color colors/white-transparent :android {:letter-spacing 1.5} :ios {:letter-spacing 1.16}}) (def snackbar-container - {:background-color colors/gray-notifications}) + {:background-color colors/gray}) (def snackbar-text {:color colors/white diff --git a/src/status_im/ui/screens/wallet/onboarding/styles.cljs b/src/status_im/ui/screens/wallet/onboarding/styles.cljs index 5585cf0ad8..84107911e4 100644 --- a/src/status_im/ui/screens/wallet/onboarding/styles.cljs +++ b/src/status_im/ui/screens/wallet/onboarding/styles.cljs @@ -32,7 +32,7 @@ :font-size 14 :letter-spacing -0.2 :text-align :center - :color colors/white-lighter-transparent}) + :color colors/white-transparent}) (def set-up-button {:flex-direction :row diff --git a/src/status_im/ui/screens/wallet/request/styles.cljs b/src/status_im/ui/screens/wallet/request/styles.cljs index dd43d0ddd0..b89819b44d 100644 --- a/src/status_im/ui/screens/wallet/request/styles.cljs +++ b/src/status_im/ui/screens/wallet/request/styles.cljs @@ -2,7 +2,7 @@ (:require [status-im.ui.components.colors :as colors])) (def hint - {:color colors/white-lighter-transparent}) + {:color colors/white-transparent}) (def footer {:color colors/white diff --git a/src/status_im/ui/screens/wallet/send/styles.cljs b/src/status_im/ui/screens/wallet/send/styles.cljs index b65959cb23..f4f0bc8439 100644 --- a/src/status_im/ui/screens/wallet/send/styles.cljs +++ b/src/status_im/ui/screens/wallet/send/styles.cljs @@ -71,7 +71,7 @@ (def advanced-button {:flex-direction :row - :background-color styles/color-blue6 + :background-color colors/black-transparent :border-radius 50 :padding 8 :align-items :center}) @@ -106,7 +106,7 @@ {:color colors/white}) (def advanced-fees-details-text - {:color colors/white-lighter-transparent}) + {:color colors/white-transparent}) (def transaction-fee-block-wrapper {:flex-direction :row}) @@ -125,7 +125,7 @@ :margin-right 15 :align-items :center :justify-content :center - :background-color colors/blue-dark}) + :background-color colors/black-transparent}) (def transaction-fee-info-icon-text {:color colors/white @@ -135,7 +135,7 @@ {:keyboard-type :numeric :auto-capitalize "none" :placeholder "0.000" - :placeholder-text-color colors/white-lighter-transparent + :placeholder-text-color colors/white-transparent :selection-color colors/white :style wallet.components.styles/text-input}) diff --git a/src/status_im/ui/screens/wallet/send/views.cljs b/src/status_im/ui/screens/wallet/send/views.cljs index d176a5b35a..374fc5ad93 100644 --- a/src/status_im/ui/screens/wallet/send/views.cljs +++ b/src/status_im/ui/screens/wallet/send/views.cljs @@ -27,7 +27,8 @@ [status-im.utils.ethereum.core :as ethereum] [status-im.transport.utils :as transport.utils] [taoensso.timbre :as log] - [reagent.core :as reagent])) + [reagent.core :as reagent] + [status-im.ui.components.colors :as colors])) (defn- toolbar [modal? title] (let [action (if modal? act/close-white act/back-white)] @@ -90,7 +91,7 @@ {:auto-focus true :secure-text-entry true :placeholder (i18n/label :t/enter-password) - :placeholder-text-color components.styles/color-gray4 + :placeholder-text-color colors/gray :on-change-text #(re-frame/dispatch [:wallet.send/set-password (security/mask-data %)]) :style styles/password :accessibility-label :enter-password-input @@ -113,7 +114,7 @@ (= :offline network-status)) :accessibility-label :sign-transaction-button} (i18n/label sign-label) - [vector-icons/icon :icons/forward {:color :white}]]])) + [vector-icons/icon :icons/forward {:color colors/white}]]])) ;; "Sign Transaction >" button (defn- sign-transaction-button [amount-error to amount sufficient-funds? sufficient-gas? modal? online?] @@ -134,7 +135,7 @@ :text-style {:color :white} :accessibility-label :sign-transaction-button} (i18n/label :t/transactions-sign-transaction) - [vector-icons/icon :icons/forward {:color (if sign-enabled? :white :gray)}]]])) + [vector-icons/icon :icons/forward {:color (if sign-enabled? colors/white colors/white-light-transparent)}]]])) (defn- render-send-transaction-view [{:keys [modal? transaction scroll advanced? network amount-input network-status]}] (let [{:keys [amount amount-text amount-error asset-error show-password-input? to to-name sufficient-funds? diff --git a/src/status_im/ui/screens/wallet/transaction_sent/styles.cljs b/src/status_im/ui/screens/wallet/transaction_sent/styles.cljs index 1b4a4774de..ce068137e3 100644 --- a/src/status_im/ui/screens/wallet/transaction_sent/styles.cljs +++ b/src/status_im/ui/screens/wallet/transaction_sent/styles.cljs @@ -28,15 +28,6 @@ :text-align :center :padding-horizontal 16}) -(def transaction-details-container - {:height 42 - :background-color colors/black-darker-transparent - :margin-horizontal 16 - :opacity 0.2 - :align-items :center - :justify-content :center - :border-radius 8}) - (def transaction-details {:color :white :font-size 15}) diff --git a/src/status_im/ui/screens/wallet/transaction_sent/views.cljs b/src/status_im/ui/screens/wallet/transaction_sent/views.cljs index 86bbfb7909..584e8191c5 100644 --- a/src/status_im/ui/screens/wallet/transaction_sent/views.cljs +++ b/src/status_im/ui/screens/wallet/transaction_sent/views.cljs @@ -9,7 +9,8 @@ [re-frame.core :as re-frame] [status-im.ui.screens.wallet.components.views :as components] [status-im.i18n :as i18n] - [status-im.utils.platform :as platform])) + [status-im.utils.platform :as platform] + [status-im.ui.components.colors :as colors])) (defview transaction-sent [& [modal?]] (letsubs [chat-id [:get-current-chat-id]] @@ -17,7 +18,7 @@ [status-bar/status-bar {:type (if modal? :modal-wallet :transparent)}] [react/view styles/transaction-sent-container [react/view styles/ok-icon-container - [vi/icon :icons/ok {:color components.styles/color-blue4}]] + [vi/icon :icons/ok {:color colors/blue}]] [react/text {:style styles/transaction-sent :font (if platform/android? :medium :default) :accessibility-label :transaction-sent-text} diff --git a/src/status_im/ui/screens/wallet/transactions/styles.cljs b/src/status_im/ui/screens/wallet/transactions/styles.cljs index 7fd4e6dcd6..d0f8715011 100644 --- a/src/status_im/ui/screens/wallet/transactions/styles.cljs +++ b/src/status_im/ui/screens/wallet/transactions/styles.cljs @@ -12,7 +12,7 @@ :border-bottom-width (if active? 2 1) :border-bottom-color (if active? colors/blue - colors/gray-transparent)}) + colors/gray)}) (def tabs-container {:flex-direction :row @@ -30,10 +30,6 @@ {:flex 1 :background-color :white}) -(def tab-unsigned-transactions-count - (merge (tab-title false) - {:color colors/gray})) - (def forward {:color colors/gray}) @@ -51,7 +47,7 @@ :android {:padding-top 14}}) (def amount-text - {:color colors/text}) + {:color colors/black}) (def tx-amount {:flex-grow 1 @@ -88,36 +84,11 @@ (merge address-item {:flex-shrink 1})) -(def action-buttons - {:flex 1 - :flex-direction :row - :padding-vertical 12}) - (def sign-all-view {:flex 1 :flex-direction :column :justify-content :center - :background-color colors/gray-transparent}) - -(def sign-all-popup - {:align-self :flex-start - :background-color colors/white - :margin-horizontal 12 - :border-radius 8}) - -(def sign-all-popup-text - {:margin-top 8 - :margin-horizontal 12}) - -(def sign-all-actions - {:flex-direction :row - :justify-content :space-between - :margin-horizontal 12 - :margin-vertical 20}) - -(def sign-all-input - {:width 150 - :height 38}) + :background-color colors/gray}) (def sign-all-done {:position :absolute @@ -226,7 +197,7 @@ :width 4 :height 4 :border-radius 2 - :background-color colors/cyan}) + :background-color colors/blue}) (def filter-container {:flex 1})