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

colors refactoring 

Signed-off-by: Andrey Shovkoplyas <motor4ik@gmail.com>
This commit is contained in:
Andrey Shovkoplyas 2018-09-24 16:00:36 +02:00
parent 78b6d67d79
commit d32f15243d
No known key found for this signature in database
GPG Key ID: EAAB7C8622D860A4
64 changed files with 288 additions and 485 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
components/src/status_im/ui/components/react.cljs
View File

@ -7,7 +7,8 @@
[status-im.utils.utils :as utils] [status-im.utils.utils :as utils]
[status-im.utils.platform :as platform] [status-im.utils.platform :as platform]
[status-im.i18n :as i18n] [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] (defn get-react-property [name]
(if js-dependencies/react-native (if js-dependencies/react-native
@ -112,7 +113,7 @@
(let [font (get-in platform/platform-specific [:fonts (keyword font)])] (let [font (get-in platform/platform-specific [:fonts (keyword font)])]
[text-input-class (merge [text-input-class (merge
{:underline-color-android :transparent {:underline-color-android :transparent
:placeholder-text-color styles/text2-color :placeholder-text-color colors/text-gray
:placeholder (i18n/label :t/type-a-message) :placeholder (i18n/label :t/type-a-message)
:value text} :value text}
(-> opts (-> opts
@ -263,20 +264,20 @@
:wallet-settings-assets :wallet-settings-assets
:wallet-modal :wallet-modal
:wallet-onboarding-setup-modal) :wallet-onboarding-setup-modal)
styles/color-blue4 colors/blue
(:qr-viewer (:qr-viewer
:recipient-qr-code) :recipient-qr-code)
"#2f3031" "#2f3031"
styles/color-white)}) colors/white)})
bottom-background (when (#{:wallet bottom-background (when (#{:wallet
:recent-recipients :recent-recipients
:wallet-send-assets :wallet-send-assets
:wallet-request-assets :wallet-request-assets
:wallet-settings-assets :wallet-settings-assets
:wallet-modal} current-view) :wallet-modal} current-view)
[view {:background-color styles/color-white [view {:background-color colors/white
:position :absolute :position :absolute
:bottom 0 :bottom 0
:right 0 :right 0

12
src/status_im/chat/commands/impl/transactions.cljs
View File

@ -191,10 +191,10 @@
(re-frame/dispatch [:show-transaction-details tx-hash]))} (re-frame/dispatch [:show-transaction-details tx-hash]))}
[react/view transactions-styles/command-send-status-container [react/view transactions-styles/command-send-status-container
[vector-icons/icon (if confirmed? :icons/check :icons/dots) [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)}] :container-style (transactions-styles/command-send-status-icon outgoing)}]
[react/view [react/view
[react/text {:style transactions-styles/command-send-status-text} [react/text {:style (transactions-styles/command-send-status-text outgoing)}
(i18n/label (cond (i18n/label (cond
confirmed? :status-confirmed confirmed? :status-confirmed
tx-exists? :status-pending tx-exists? :status-pending
@ -210,7 +210,7 @@
[react/view [react/view
[react/view transactions-styles/command-send-amount-row [react/view transactions-styles/command-send-amount-row
[react/view transactions-styles/command-send-amount [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} :font :medium}
amount amount
[react/text {:style (transactions-styles/command-amount-currency-separator outgoing)} [react/text {:style (transactions-styles/command-amount-currency-separator outgoing)}
@ -221,7 +221,7 @@
(when (and fiat-amount (when (and fiat-amount
platform/mobile?) platform/mobile?)
[react/view transactions-styles/command-send-fiat-amount [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)))]]) (str "~ " fiat-amount " " (or currency (i18n/label :usd-currency)))]])
(when (and group-chat (when (and group-chat
recipient-name) recipient-name)
@ -396,7 +396,7 @@
[react/text {:style (transactions-styles/command-request-header-text outgoing)} [react/text {:style (transactions-styles/command-request-header-text outgoing)}
(i18n/label :transaction-request)]] (i18n/label :transaction-request)]]
[react/view transactions-styles/command-request-row [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} :font :medium}
amount amount
[react/text {:style (transactions-styles/command-amount-currency-separator outgoing)} [react/text {:style (transactions-styles/command-amount-currency-separator outgoing)}
@ -406,7 +406,7 @@
asset]]] asset]]]
(when platform/mobile? (when platform/mobile?
[react/view transactions-styles/command-request-fiat-amount-row [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)))]]) (str "~ " fiat-amount " " (or currency (i18n/label :usd-currency)))]])
(when network-mismatch? (when network-mismatch?
[react/text {:style transactions-styles/command-request-network-text} [react/text {:style transactions-styles/command-request-network-text}

37
src/status_im/chat/commands/impl/transactions/styles.cljs
View File

@ -1,7 +1,6 @@
(ns status-im.chat.commands.impl.transactions.styles (ns status-im.chat.commands.impl.transactions.styles
(:require-macros [status-im.utils.styles :refer [defstyle]]) (:require-macros [status-im.utils.styles :refer [defstyle defnstyle]])
(:require [status-im.ui.components.colors :as colors] (:require [status-im.ui.components.colors :as colors]))
[status-im.ui.components.styles :as styles]))
(def asset-container (def asset-container
{:flex-direction :row {:flex-direction :row
@ -42,16 +41,16 @@
(defn command-send-status-icon [outgoing] (defn command-send-status-icon [outgoing]
{:background-color (if outgoing {:background-color (if outgoing
colors/blue-darker colors/black-transparent
colors/blue-transparent) colors/blue-light)
:width 24 :width 24
:height 24 :height 24
:border-radius 16 :border-radius 16
:padding-top 4 :padding-top 4
:padding-left 4}) :padding-left 4})
(defstyle command-send-status-text (defnstyle command-send-status-text [outgoing]
{:color colors/blue {:color (if outgoing colors/white-transparent colors/blue)
:android {:margin-top 3} :android {:margin-top 3}
:ios {:margin-top 4} :ios {:margin-top 4}
:margin-left 6 :margin-left 6
@ -70,9 +69,9 @@
:align-items :flex-end :align-items :flex-end
:max-width 250}) :max-width 250})
(defstyle command-send-amount-text (defnstyle command-send-amount-text [outgoing]
{:font-size 22 {:font-size 22
:color colors/blue :color (if outgoing colors/white colors/blue)
:ios {:letter-spacing -0.5}}) :ios {:letter-spacing -0.5}})
(def command-send-currency (def command-send-currency
@ -81,13 +80,13 @@
(defn command-amount-currency-separator [outgoing] (defn command-amount-currency-separator [outgoing]
{:opacity 0 {:opacity 0
:color (if outgoing colors/hawkes-blue colors/white)}) :color colors/white})
(defn command-send-currency-text [outgoing] (defn command-send-currency-text [outgoing]
{:font-size 22 {:font-size 22
:margin-left 4 :margin-left 4
:letter-spacing 1 :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] (defn command-request-currency-text [outgoing]
{:font-size 22 {:font-size 22
@ -103,9 +102,9 @@
:justify-content :flex-end :justify-content :flex-end
:margin-top 6}) :margin-top 6})
(def command-send-fiat-amount-text (defn command-send-fiat-amount-text [outgoing]
{:font-size 12 {:font-size 12
:color colors/black}) :color (if outgoing colors/white colors/black)})
(def command-send-recipient-text (def command-send-recipient-text
{:color colors/blue {:color colors/blue
@ -113,7 +112,7 @@
:line-height 18}) :line-height 18})
(defn command-send-timestamp [outgoing] (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 :margin-top 6
:font-size 12}) :font-size 12})
@ -143,7 +142,7 @@
(defn command-request-message-view [outgoing] (defn command-request-message-view [outgoing]
{:border-radius 14 {:border-radius 14
:padding-vertical 4 :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] (defn command-request-header-text [outgoing]
{:font-size 12 {:font-size 12
@ -153,10 +152,10 @@
{:flex-direction :row {:flex-direction :row
:margin-top 6}) :margin-top 6})
(defstyle command-request-amount-text (defnstyle command-request-amount-text [outgoing]
{:font-size 22 {:font-size 22
:ios {:letter-spacing -0.5} :ios {:letter-spacing -0.5}
:color colors/black}) :color (if outgoing colors/white colors/black)})
(def command-request-separator-line (def command-request-separator-line
{:background-color colors/gray-light {:background-color colors/gray-light
@ -175,9 +174,9 @@
(def command-request-fiat-amount-row (def command-request-fiat-amount-row
{:margin-top 6}) {:margin-top 6})
(def command-request-fiat-amount-text (defn command-request-fiat-amount-text [outgoing]
{:font-size 12 {:font-size 12
:color colors/black}) :color (if outgoing colors/white colors/black)})
(def command-request-recipient-text (def command-request-recipient-text
{:color colors/blue {:color colors/blue

8
src/status_im/chat/commands/styles/validation.cljs
View File

@ -1,5 +1,5 @@
(ns status-im.chat.commands.styles.validation (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] (defn root [bottom]
{:flex-direction :column {:flex-direction :column
@ -9,14 +9,14 @@
:position :absolute}) :position :absolute})
(def message-container (def message-container
{:background-color common/color-red {:background-color colors/red
:padding 16}) :padding 16})
(def message-title (def message-title
{:color common/color-white {:color colors/white
:font-size 12}) :font-size 12})
(def message-description (def message-description
{:color common/color-white {:color colors/white
:font-size 12 :font-size 12
:opacity 0.9}) :opacity 0.9})

5
src/status_im/chat/models.cljs
View File

@ -16,7 +16,8 @@
[status-im.utils.clocks :as utils.clocks] [status-im.utils.clocks :as utils.clocks]
[status-im.utils.datetime :as time] [status-im.utils.datetime :as time]
[status-im.utils.gfycat.core :as gfycat] [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] (defn multi-user-chat? [cofx chat-id]
(get-in cofx [:db :chats chat-id :group-chat])) (get-in cofx [:db :chats chat-id :group-chat]))
@ -43,7 +44,7 @@
(let [name (get-in db [:contacts/contacts chat-id :name])] (let [name (get-in db [:contacts/contacts chat-id :name])]
{:chat-id chat-id {:chat-id chat-id
:name (or name (gfycat/generate-gfy chat-id)) :name (or name (gfycat/generate-gfy chat-id))
:color (styles/random-chat-color) :color (rand-nth colors/chat-colors)
:group-chat false :group-chat false
:is-active true :is-active true
:timestamp now :timestamp now

12
src/status_im/data_store/realm/schemas/account/chat.cljs
View File

@ -1,19 +1,19 @@
(ns status-im.data-store.realm.schemas.account.chat (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 (def v1 {:name :chat
:primaryKey :chat-id :primaryKey :chat-id
:properties {:chat-id :string :properties {:chat-id :string
:name :string :name :string
:color {:type :string :color {:type :string
:default default-chat-color} :default colors/default-chat-color}
:group-chat {:type :bool :group-chat {:type :bool
:indexed true} :indexed true}
:group-admin {:type :string :group-admin {:type :string
:optional true} :optional true}
:is-active :bool :is-active :bool
:timestamp :int :timestamp :int
:contacts {:type "string[]"} :contacts {:type "string[]"}
:removed-at {:type :int :removed-at {:type :int
:optional true} :optional true}
:removed-from-at {:type :int :removed-from-at {:type :int
@ -36,7 +36,7 @@
:properties {:chat-id :string :properties {:chat-id :string
:name :string :name :string
:color {:type :string :color {:type :string
:default default-chat-color} :default colors/default-chat-color}
:group-chat {:type :bool :group-chat {:type :bool
:indexed true} :indexed true}
:group-admin {:type :string :group-admin {:type :string
@ -68,7 +68,7 @@
:properties {:chat-id :string :properties {:chat-id :string
:name :string :name :string
:color {:type :string :color {:type :string
:default default-chat-color} :default colors/default-chat-color}
:group-chat {:type :bool :group-chat {:type :bool
:indexed true} :indexed true}
:group-admin {:type :string :group-admin {:type :string
@ -98,7 +98,7 @@
:properties {:chat-id :string :properties {:chat-id :string
:name :string :name :string
:color {:type :string :color {:type :string
:default default-chat-color} :default colors/default-chat-color}
:group-chat {:type :bool :group-chat {:type :bool
:indexed true} :indexed true}
:group-admin {:type :string :group-admin {:type :string

8
src/status_im/ui/components/action_button/styles.cljs
View File

@ -16,7 +16,7 @@
:height 40 :height 40
:align-items :center :align-items :center
:justify-content :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 (def action-button-label-container
{:padding-left 16}) {:padding-left 16})
@ -27,13 +27,13 @@
:font-size 16}) :font-size 16})
(defstyle actions-list (defstyle actions-list
{:background-color styles/color-white {:background-color colors/white
:android {:padding-top 8 :android {:padding-top 8
:padding-bottom 8}}) :padding-bottom 8}})
(def action-button-label-disabled (def action-button-label-disabled
(merge action-button-label (merge action-button-label
{:color styles/color-gray4})) {:color colors/gray}))
(defstyle action-button-icon-container-disabled (defstyle action-button-icon-container-disabled
{:border-radius 50 {:border-radius 50
@ -41,5 +41,5 @@
:height 40 :height 40
:align-items :center :align-items :center
:justify-content :center :justify-content :center
:background-color styles/color-light-gray}) :background-color colors/gray-lighter})

14
src/status_im/ui/components/button/styles.cljs
View File

@ -4,8 +4,8 @@
[status-im.ui.components.styles :as styles] [status-im.ui.components.styles :as styles]
[status-im.utils.platform :as platform])) [status-im.utils.platform :as platform]))
(def border-color styles/color-white-transparent-3) (def border-color colors/white-light-transparent)
(def border-color-high styles/color-white-transparent-4) (def border-color-high colors/white-light-transparent)
(def buttons-container {:flex-direction :row}) (def buttons-container {:flex-direction :row})
@ -40,7 +40,7 @@
(defstyle button-text (defstyle button-text
{:font-weight :normal {:font-weight :normal
:color styles/color-white :color colors/white
:padding-horizontal 16 :padding-horizontal 16
:android {:font-size 14 :android {:font-size 14
:padding-vertical 10 :padding-vertical 10
@ -62,16 +62,16 @@
(def primary-button (def primary-button
(merge (merge
button-borders 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 (def secondary-button
(merge (merge
button-borders 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 (def button-with-icon-container
{:flex-direction :row {:flex-direction :row

14
src/status_im/ui/components/chat_icon/screen.cljs
View File

@ -1,12 +1,10 @@
(ns status-im.ui.components.chat-icon.screen (ns status-im.ui.components.chat-icon.screen
(:require-macros [status-im.utils.views :refer [defview letsubs]]) (:require-macros [status-im.utils.views :refer [defview letsubs]])
(:require [clojure.string :as string] (:require [clojure.string :as string]
[status-im.i18n :as i18n]
[status-im.ui.components.react :as react] [status-im.ui.components.react :as react]
[status-im.ui.components.chat-icon.styles :as styles] [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.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] (defn default-chat-icon [name styles]
(when-not (string/blank? name) (when-not (string/blank? name)
@ -81,7 +79,7 @@
:online-dot-right styles/online-dot-right :online-dot-right styles/online-dot-right
:size 40 :size 40
:chat-icon styles/chat-icon-chat-list :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}]) :default-chat-icon-text styles/default-chat-icon-text}])
(defn chat-icon-view-menu-item [chat-id group-chat name color online] (defn chat-icon-view-menu-item [chat-id group-chat name color online]
@ -135,7 +133,7 @@
:online-dot-right styles/online-dot-right :online-dot-right styles/online-dot-right
:size 40 :size 40
:chat-icon styles/chat-icon-chat-list :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}]) :default-chat-icon-text styles/default-chat-icon-text}])
(defn dapp-icon-browser [contact size] (defn dapp-icon-browser [contact size]
@ -147,7 +145,7 @@
:online-dot-right styles/online-dot-right :online-dot-right styles/online-dot-right
:size size :size size
:chat-icon (styles/custom-size-icon 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}]) :default-chat-icon-text styles/default-chat-icon-text}])
(defn dapp-icon-permission [contact size] (defn dapp-icon-permission [contact size]
@ -159,7 +157,7 @@
:online-dot-right styles/online-dot-right :online-dot-right styles/online-dot-right
:size size :size size
:chat-icon (styles/custom-size-icon 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}]) :default-chat-icon-text styles/default-chat-icon-text}])
(defn profile-icon-view [photo-path name color edit? size] (defn profile-icon-view [photo-path name color edit? size]
@ -183,6 +181,6 @@
(defn my-profile-icon [{{:keys [photo-path name]} :account (defn my-profile-icon [{{:keys [photo-path name]} :account
edit? :edit?}] edit? :edit?}]
(let [color components.styles/default-chat-color (let [color colors/default-chat-color
size 56] size 56]
[profile-icon-view photo-path name color edit? size])) [profile-icon-view photo-path name color edit? size]))

7
src/status_im/ui/components/chat_icon/styles.cljs
View File

@ -1,6 +1,5 @@
(ns status-im.ui.components.chat-icon.styles (ns status-im.ui.components.chat-icon.styles
(:require [status-im.ui.components.colors :as colors] (:require [status-im.ui.components.colors :as colors]))
[status-im.ui.components.styles :refer [online-color]]))
(defn default-chat-icon [color] (defn default-chat-icon [color]
{:margin 0 {:margin 0
@ -112,7 +111,7 @@
:width 13 :width 13
:height 13 :height 13
:border-radius 9 :border-radius 9
:background-color online-color}) :background-color colors/blue})
(def online-view-menu-item (def online-view-menu-item
(merge online-view (merge online-view
@ -218,7 +217,7 @@
:justify-content :center}) :justify-content :center})
(def pending-outer-circle (def pending-outer-circle
{:background-color online-color {:background-color colors/blue
:width 8 :width 8
:height 8 :height 8
:border-radius 4 :border-radius 4

84
src/status_im/ui/components/colors.cljs
View File

@ -1,47 +1,6 @@
(ns status-im.ui.components.colors (ns status-im.ui.components.colors
(:require [clojure.string :as string])) (: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] (defn alpha [hex opacity]
(let [hex (string/replace hex #"#" "") (let [hex (string/replace hex #"#" "")
r (js/parseInt (subs hex 0 2) 16) r (js/parseInt (subs hex 0 2) 16)
@ -49,4 +8,47 @@
b (js/parseInt (subs hex 4 6) 16)] b (js/parseInt (subs hex 4 6) 16)]
(str "rgba(" r "," g "," b "," opacity ")"))) (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 black)
(def text-gray gray)
(def default-chat-color :purpule) ;; legacy

12
src/status_im/ui/components/common/styles.cljs
View File

@ -52,10 +52,10 @@
(defstyle form-title (defstyle form-title
{:flex-shrink 1 {:flex-shrink 1
:ios {:color styles/text1-color :ios {:color colors/text
:letter-spacing -0.2 :letter-spacing -0.2
:font-size 16} :font-size 16}
:android {:color styles/text4-color :android {:color colors/text-gray
:font-size 14}}) :font-size 14}})
(def form-title-count (def form-title-count
@ -64,11 +64,7 @@
:opacity 0.6 :opacity 0.6
:padding-left 8 :padding-left 8
:padding-right 5 :padding-right 5
:color styles/text4-color})) :color colors/text-gray}))
(defstyle form-spacer
{:ios {:height 16}
:android {:height 11}})
(defstyle list-header-footer-spacing (defstyle list-header-footer-spacing
{:android {:background-color colors/white {:android {:background-color colors/white
@ -91,7 +87,7 @@
{:width 40 {:width 40
:height 40 :height 40
:border-radius (/ 40 2) :border-radius (/ 40 2)
:background-color styles/color-green-4 :background-color colors/green
:align-items :center :align-items :center
:justify-content :center}) :justify-content :center})

2
src/status_im/ui/components/connectivity/styles.cljs
View File

@ -6,7 +6,7 @@
(defnstyle text-wrapper [{:keys [top window-width pending? modal?]}] (defnstyle text-wrapper [{:keys [top window-width pending? modal?]}]
(cond-> (cond->
{:opacity 1.0 {:opacity 1.0
:background-color colors/gray-notifications :background-color colors/gray
:height 35 :height 35
:position :absolute} :position :absolute}
platform/desktop? platform/desktop?

4
src/status_im/ui/components/contact/styles.cljs
View File

@ -21,7 +21,7 @@
:justify-content :center}) :justify-content :center})
(defstyle name-text (defstyle name-text
{:color common/text1-color {:color colors/text
:android {:font-size 16} :android {:font-size 16}
:ios {:font-size 17 :ios {:font-size 17
:letter-spacing -0.2}}) :letter-spacing -0.2}})
@ -29,7 +29,7 @@
(def info-text (def info-text
{:margin-top 1 {:margin-top 1
:font-size 12 :font-size 12
:color common/text2-color}) :color colors/text-gray})
(def contact-container (def contact-container
{:flex-direction :row {:flex-direction :row

2
src/status_im/ui/components/desktop/tabs.cljs
View File

@ -38,7 +38,7 @@
[react/view {:style tabs.styles/tab-container} [react/view {:style tabs.styles/tab-container}
(let [icon (if active? icon-active icon-inactive)] (let [icon (if active? icon-active icon-inactive)]
[react/view [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/view
[react/text {:style (tabs.styles/tab-title active?)} [react/text {:style (tabs.styles/tab-title active?)}
title]] title]]

7
src/status_im/ui/components/desktop/views.cljs
View File

@ -5,7 +5,8 @@
[status-im.ui.components.action-button.styles :as st] [status-im.ui.components.action-button.styles :as st]
[status-im.ui.components.styles :as common] [status-im.ui.components.styles :as common]
[status-im.ui.components.checkbox.styles :as checkbox.styles] [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?]}] (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?))))} [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 :height 52
:justify-content :center :justify-content :center
:align-items :center :align-items :center
:background-color common/color-light-blue}) :background-color colors/blue})
(def sticky-button-label-style (def sticky-button-label-style
{:color common/color-white {:color colors/white
:font-size 17 :font-size 17
:line-height 20 :line-height 20
:letter-spacing -0.2}) :letter-spacing -0.2})

19
src/status_im/ui/components/icons/vector_icons.cljs
View File

@ -5,7 +5,8 @@
[status-im.ui.components.react :as react] [status-im.ui.components.react :as react]
[status-im.utils.platform :as platform] [status-im.utils.platform :as platform]
[status-im.ui.components.styles :as styles] [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])) (:refer-clojure :exclude [use]))
(when-not platform/desktop? (when-not platform/desktop?
@ -202,17 +203,17 @@
(cond (cond
(keyword? color) (keyword? color)
(case color (case color
:dark styles/icon-dark-color :dark colors/black
:gray styles/icon-gray-color :gray colors/gray
:blue styles/color-light-blue :blue colors/blue
:active styles/color-blue4 :active colors/blue
:white styles/color-white :white colors/white
:red styles/icon-red-color :red colors/red
styles/icon-dark-color) colors/black)
(string? color) (string? color)
color color
:else :else
styles/icon-dark-color))] colors/black))]
(if width (if width
(update icon-vec 1 assoc :width width :height height) (update icon-vec 1 assoc :width width :height height)
icon-vec)) icon-vec))

2
src/status_im/ui/components/list/styles.cljs
View File

@ -98,7 +98,7 @@
{:background-color colors/blue}) {:background-color colors/blue})
(def action (def action
{:background-color colors/white-transparent {:background-color colors/white-light-transparent
:border-radius 50}) :border-radius 50})
(def action-disabled (def action-disabled

2
src/status_im/ui/components/list/views.cljs
View File

@ -95,7 +95,7 @@
(def item-icon-forward (def item-icon-forward
[item-icon {:icon :icons/forward [item-icon {:icon :icons/forward
:icon-opts {:color colors/white-light-transparent}}]) :icon-opts {:color colors/white-transparent}}])
(defn- wrap-render-fn [f] (defn- wrap-render-fn [f]
(fn [data] (fn [data]

16
src/status_im/ui/components/status_bar/styles.cljs
View File

@ -30,11 +30,11 @@
;; :transparent ;; :transparent
(defstyle status-bar-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})}) :android (create-status-bar-style {:translucent? true})})
(def view-transparent (def view-transparent
(create-view-style {:background-color styles/color-transparent})) (create-view-style {:background-color colors/transparent}))
;; :modal ;; :modal
(defstyle status-bar-modal (defstyle status-bar-modal
@ -70,12 +70,12 @@
;; :transaction ;; :transaction
(defstyle status-bar-transaction (defstyle status-bar-transaction
{:ios (create-status-bar-style {:background-color styles/color-transparent}) {:ios (create-status-bar-style {:background-color colors/transparent})
:android (create-status-bar-style {:background-color styles/color-dark-blue-2})}) :android (create-status-bar-style {:background-color colors/black})})
(defstyle view-transaction (defstyle view-transaction
{:ios (create-view-style {:background-color styles/color-transparent}) {:ios (create-view-style {:background-color colors/transparent})
:android (create-view-style {:background-color styles/color-dark-blue-2 :android (create-view-style {:background-color colors/black
:height 0})}) :height 0})})
;; TODO(jeluard) Fix status-bar mess by removing useless view and introducing 2dn level tab-bar ;; 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})}) :android (create-status-bar-style {:translucent? true})})
(def view-wallet-tab (def view-wallet-tab
(create-view-style {:background-color styles/color-blue4})) (create-view-style {:background-color colors/blue}))
;; :wallet ;; :wallet
(defstyle status-bar-wallet (defstyle status-bar-wallet
@ -94,7 +94,7 @@
:android (create-status-bar-style {:translucent? true})}) :android (create-status-bar-style {:translucent? true})})
(def view-wallet (def view-wallet
(create-view-style {:background-color styles/color-blue4 (create-view-style {:background-color colors/blue
:elevation elevation})) :elevation elevation}))
;; :default ;; :default

113
src/status_im/ui/components/styles.cljs
View File

@ -1,111 +1,12 @@
(ns status-im.ui.components.styles (ns status-im.ui.components.styles
(:require [status-im.ui.components.colors :as colors])) (: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 (def flex
{:flex 1}) {:flex 1})
(def create-icon (def main-container
{:font-size 20 {:background-color colors/white
:height 22 :flex 1})
: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 modal (def modal
{:position :absolute {:position :absolute
@ -114,8 +15,8 @@
:right 0 :right 0
:bottom 0}) :bottom 0})
(def main-container
{:background-color color-white
:flex 1})
(def border-radius 8) (def border-radius 8)
(def icon-default
{:width 24
:height 24})

2
src/status_im/ui/components/toolbar/actions.cljs
View File

@ -1,6 +1,6 @@
(ns status-im.ui.components.toolbar.actions (ns status-im.ui.components.toolbar.actions
(:require [re-frame.core :as re-frame] (: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] (defn add [illuminated? handler]
{:icon :icons/add {:icon :icons/add

17
src/status_im/ui/components/toolbar/styles.cljs
View File

@ -91,3 +91,20 @@
(def counter-container (def counter-container
{:top 3}) {: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}})

4
src/status_im/ui/components/tooltip/styles.cljs
View File

@ -38,11 +38,11 @@
:margin-horizontal 12 :margin-horizontal 12
:padding-horizontal 16 :padding-horizontal 16
:padding-vertical 9 :padding-vertical 9
:background-color colors/gray-notifications :background-color colors/gray
:border-radius 8}) :border-radius 8})
(defn tooltip-text [font-size] (defn tooltip-text [font-size]
{:color styles/color-red-2 {:color colors/red
:font-size font-size}) :font-size font-size})
(def bottom-tooltip-text (def bottom-tooltip-text

2
src/status_im/ui/components/tooltip/views.cljs
View File

@ -24,7 +24,7 @@
{:component-did-mount (animations/animate-tooltip -150 bottom-anim-value opacity-value -10)} {:component-did-mount (animations/animate-tooltip -150 bottom-anim-value opacity-value -10)}
[react/view styles/bottom-tooltip-container [react/view styles/bottom-tooltip-container
[react/animated-view {:style (styles/tooltip-animated bottom-anim-value opacity-value)} [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 :style styles/tooltip-triangle
:container-style {:transform [{:rotate "180deg"}]}}] :container-style {:transform [{:rotate "180deg"}]}}]
[react/view styles/bottom-tooltip-text-container [react/view styles/bottom-tooltip-text-container

4
src/status_im/ui/screens/accounts/login/styles.cljs
View File

@ -18,7 +18,7 @@
(def sign-you-in (def sign-you-in
{:margin-top 16 {:margin-top 16
:font-size 13 :font-size 13
:color colors/text-light-gray}) :color colors/black})
(def bottom-button-container (def bottom-button-container
{:flex-direction :row {:flex-direction :row
@ -33,7 +33,7 @@
(def login-badge-name (def login-badge-name
{:font-size 15 {:font-size 15
:color colors/text-light-gray :color colors/black
:margin-top 8}) :margin-top 8})
(def password-container (def password-container

2
src/status_im/ui/screens/accounts/recover/styles.cljs
View File

@ -24,7 +24,7 @@
(def sign-you-in (def sign-you-in
{:margin-top 16 {:margin-top 16
:font-size 13 :font-size 13
:color colors/text-light-gray}) :color colors/black})
(def recovery-phrase-input (def recovery-phrase-input
{:flex 1 {:flex 1

2
src/status_im/ui/screens/accounts/styles.cljs
View File

@ -43,7 +43,7 @@
(def account-badge-text (def account-badge-text
{:font-size 17 {:font-size 17
:letter-spacing -0.2 :letter-spacing -0.2
:color common/color-black}) :color colors/black})
(defstyle account-badge-pub-key-text (defstyle account-badge-pub-key-text
{:font-size 14 {:font-size 14

2
src/status_im/ui/screens/accounts/views.cljs
View File

@ -27,7 +27,7 @@
:numberOfLines 1} :numberOfLines 1}
public-key]] public-key]]
[react/view {:flex 1}] [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 [] (defview accounts []
(letsubs [accounts [:get-accounts]] (letsubs [accounts [:get-accounts]]

2
src/status_im/ui/screens/add_new/new_public_chat/styles.cljs
View File

@ -6,7 +6,7 @@
{:font-size 17 {:font-size 17
:padding-bottom 0 :padding-bottom 0
:letter-spacing -0.2 :letter-spacing -0.2
:color colors/text}) :color colors/black})
(def topic-hash (def topic-hash
(merge group-chat-name-input (merge group-chat-name-input

4
src/status_im/ui/screens/browser/styles.cljs
View File

@ -11,7 +11,7 @@
:android {:padding-bottom 6}}) :android {:padding-bottom 6}})
(def dapp-name-text (def dapp-name-text
{:color colors/text-light-gray {:color colors/black
:font-size 16}) :font-size 16})
(defstyle dapp-text (defstyle dapp-text
@ -44,7 +44,7 @@
(def web-view-loading (def web-view-loading
{:flex 1 {:flex 1
:background-color colors/gray-transparent :background-color colors/gray
:align-items :center :align-items :center
:justify-content :center :justify-content :center
:position :absolute :position :absolute

2
src/status_im/ui/screens/chat/input/input.cljs
View File

@ -110,7 +110,7 @@
current-public-key [:get-current-public-key]] current-public-key [:get-current-public-key]]
[react/view {:style style/reply-message-content} [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 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 [] (defview reply-message-view []
(letsubs [{:keys [content from] :as message} [:get-reply-message]] (letsubs [{:keys [content from] :as message} [:get-reply-message]]

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

@ -10,7 +10,6 @@
[status-im.chat.commands.core :as commands] [status-im.chat.commands.core :as commands]
[status-im.chat.commands.receiving :as commands-receiving] [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.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.ui.screens.chat.photos :as photos]
[status-im.constants :as constants] [status-im.constants :as constants]
[status-im.ui.components.chat-icon.screen :as chat-icon.screen] [status-im.ui.components.chat-icon.screen :as chat-icon.screen]
@ -195,7 +194,7 @@
[react/view [react/view
(when (:response-to content) (when (:response-to content)
[quoted-message (:response-to content) outgoing current-public-key]) [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) :number-of-lines (when collapsible? number-of-lines)
:ref (partial reset! ref)} :ref (partial reset! ref)}
parsed-text parsed-text

7
src/status_im/ui/screens/chat/styles/animations.cljs
View File

@ -1,5 +1,6 @@
(ns status-im.ui.screens.chat.styles.animations (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)") (def header-draggable-icon "rgba(73, 84, 93, 0.23)")
@ -11,7 +12,7 @@
:bottom 0}) :bottom 0})
(defn expandable-container [anim-value bottom max-height] (defn expandable-container [anim-value bottom max-height]
{:background-color common/color-white {:background-color colors/white
:height anim-value :height anim-value
:left 0 :left 0
:right 0 :right 0
@ -22,7 +23,7 @@
(def header-container (def header-container
{:min-height 19 {:min-height 19
:background-color common/color-white :background-color colors/white
:align-items :center}) :align-items :center})
(def header-icon (def header-icon

5
src/status_im/ui/screens/chat/styles/input/parameter_box.cljs
View File

@ -1,9 +1,8 @@
(ns status-im.ui.screens.chat.styles.input.parameter-box (ns status-im.ui.screens.chat.styles.input.parameter-box
(:require [status-im.ui.components.styles :as common] (:require [status-im.ui.components.colors :as colors]))
[status-im.ui.components.colors :as colors]))
(def root (def root
{:background-color common/color-white {:background-color colors/white
:border-bottom-color colors/gray-light :border-bottom-color colors/gray-light
:border-bottom-width 1}) :border-bottom-width 1})

8
src/status_im/ui/screens/chat/styles/input/suggestions.cljs
View File

@ -1,14 +1,12 @@
(ns status-im.ui.screens.chat.styles.input.suggestions (ns status-im.ui.screens.chat.styles.input.suggestions
(:require-macros [status-im.utils.styles :refer [defnstyle]]) (:require-macros [status-im.utils.styles :refer [defnstyle]])
(:require [status-im.ui.components.styles :as common] (:require [status-im.ui.components.colors :as colors]))
[status-im.ui.components.colors :as colors]
[status-im.utils.platform :as platform]))
(def item-height 52) (def item-height 52)
(def border-height 1) (def border-height 1)
(def root (def root
{:background-color common/color-white {:background-color colors/white
:border-top-color colors/gray-light :border-top-color colors/gray-light
:border-top-width 1}) :border-top-width 1})
@ -21,7 +19,7 @@
:border-bottom-width border-height}) :border-bottom-width border-height})
(def item-suggestion-name (def item-suggestion-name
{:color common/color-black {:color colors/black
:font-size 15}) :font-size 15})
(def item-suggestion-description (def item-suggestion-description

9
src/status_im/ui/screens/chat/styles/input/validation_message.cljs
View File

@ -1,5 +1,6 @@
(ns status-im.ui.screens.chat.styles.input.validation-message (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] (defn root [bottom]
{:flex-direction :column {:flex-direction :column
@ -9,14 +10,14 @@
:position :absolute}) :position :absolute})
(def message-container (def message-container
{:background-color common/color-red {:background-color colors/red
:padding 16}) :padding 16})
(def message-title (def message-title
{:color common/color-white {:color colors/white
:font-size 12}) :font-size 12})
(def message-description (def message-description
{:color common/color-white {:color colors/white
:font-size 12 :font-size 12
:opacity 0.9}) :opacity 0.9})

33
src/status_im/ui/screens/chat/styles/main.cljs
View File

@ -8,7 +8,7 @@
(def chat-view (def chat-view
{:flex 1 {:flex 1
:background-color component.styles/chat-background}) :background-color colors/gray-lighter})
(def toolbar-container (def toolbar-container
{:flex 1 {:flex 1
@ -24,7 +24,7 @@
(def toolbar-view (def toolbar-view
{:flex-direction :row {:flex-direction :row
:height 56 :height 56
:background-color component.styles/color-white :background-color colors/white
:elevation 2}) :elevation 2})
(def action (def action
@ -54,7 +54,7 @@
:margin-bottom 2}) :margin-bottom 2})
(defstyle chat-name-text (defstyle chat-name-text
{:color component.styles/color-black {:color colors/black
:android {:font-size 15 :android {:font-size 15
:line-height 20} :line-height 20}
:ios {:font-size 16 :ios {:font-size 16
@ -66,25 +66,21 @@
:width 14 :width 14
:height 9}) :height 9})
(def up-icon
{:width 14
:height 8})
(defstyle toolbar-subtitle (defstyle toolbar-subtitle
{:color component.styles/text4-color {:color colors/text-gray
:line-height 15 :line-height 15
:font-size 13 :font-size 13
:ios {:margin-top 4}}) :ios {:margin-top 4}})
(defstyle last-activity-text (defstyle last-activity-text
{:color component.styles/text4-color {:color colors/text-gray
:line-height 15 :line-height 15
:ios {:font-size 14 :ios {:font-size 14
:margin-top 4} :margin-top 4}
:android {:font-size 13}}) :android {:font-size 13}})
(defn actions-wrapper [status-bar-height] (defn actions-wrapper [status-bar-height]
{:background-color component.styles/color-white {:background-color colors/white
:elevation 2 :elevation 2
:position :absolute :position :absolute
:top (+ 55 status-bar-height) :top (+ 55 status-bar-height)
@ -94,7 +90,7 @@
(def actions-separator (def actions-separator
{:margin-left 16 {:margin-left 16
:height 1.5 :height 1.5
:background-color component.styles/separator-color}) :background-color colors/black-transparent})
(def actions-view (def actions-view
{:margin-vertical 10}) {:margin-vertical 10})
@ -115,14 +111,9 @@
(def action-title (def action-title
{:margin-top -2.5 {:margin-top -2.5
:color component.styles/text1-color :color colors/text
:font-size 14}) :font-size 14})
(def action-subtitle
{:margin-top 1
:color component.styles/text2-color
:font-size 12})
(def typing-all (def typing-all
{:marginBottom 20}) {:marginBottom 20})
@ -137,7 +128,7 @@
(def typing-text (def typing-text
{:margin-top -2 {:margin-top -2
:font-size 12 :font-size 12
:color component.styles/text2-color}) :color colors/text-gray})
(def overlay-highlight (def overlay-highlight
{:flex 1}) {:flex 1})
@ -154,7 +145,7 @@
:elevation 8}) :elevation 8})
(defn bottom-info-container [height] (defn bottom-info-container [height]
{:background-color component.styles/color-white {:background-color colors/white
:elevation 2 :elevation 2
:position :absolute :position :absolute
:bottom 16 :bottom 16
@ -213,10 +204,6 @@
(def add-contact-close-icon (def add-contact-close-icon
{:margin-right 12}) {:margin-right 12})
(defstyle actions-list-view
{:ios {:border-bottom-color component.styles/color-gray3
:border-bottom-width 0.5}})
(def message-view-preview (def message-view-preview
{:flex 1 {:flex 1
:align-items :center :align-items :center

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

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

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

@ -1,6 +1,6 @@
(ns status-im.ui.screens.chat.styles.message.datemark (ns status-im.ui.screens.chat.styles.message.datemark
(:require-macros [status-im.utils.styles :refer [defstyle]]) (: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 (def datemark-wrapper
{:flex 1 {:flex 1
@ -11,6 +11,6 @@
:height 22}) :height 22})
(defstyle datemark-text (defstyle datemark-text
{:color common/color-gray4 {:color colors/gray
:ios {:letter-spacing -0.2} :ios {:letter-spacing -0.2}
:font-size 15}) :font-size 15})

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

@ -1,25 +1,17 @@
(ns status-im.ui.screens.chat.styles.message.message (ns status-im.ui.screens.chat.styles.message.message
(:require-macros [status-im.utils.styles :refer [defstyle defnstyle]]) (:require-macros [status-im.utils.styles :refer [defstyle defnstyle]])
(:require [status-im.ui.components.styles :as styles] (:require [status-im.ui.components.colors :as colors]
[status-im.ui.components.colors :as colors]
[status-im.ui.screens.chat.styles.photos :as photos] [status-im.ui.screens.chat.styles.photos :as photos]
[status-im.utils.platform :as platform] [status-im.utils.platform :as platform]
[status-im.constants :as constants])) [status-im.constants :as constants]))
(defstyle style-message-text (defnstyle style-message-text [outgoing]
{:font-size 15 {:font-size 15
:color styles/text1-color :color (if outgoing colors/white colors/text)
:letter-spacing -0.2 :letter-spacing -0.2
:android {:line-height 22} :android {:line-height 22}
:ios {: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 (defn message-padding-top
[{:keys [first-in-group? display-username?]}] [{:keys [first-in-group? display-username?]}]
(if (and display-username? (if (and display-username?
@ -27,9 +19,6 @@
6 6
2)) 2))
(def message-empty-spacing
{:height 16})
(defn last-message-padding (defn last-message-padding
[{:keys [last? typing]}] [{:keys [last? typing]}]
(when (and last? (not typing)) (when (and last? (not typing))
@ -63,7 +52,7 @@
(defn message-timestamp-placeholder-text [outgoing] (defn message-timestamp-placeholder-text [outgoing]
(assoc message-timestamp (assoc message-timestamp
:color :color
(if outgoing colors/hawkes-blue styles/color-white))) (if outgoing colors/blue colors/white)))
(def message-expand-button (def message-expand-button
{:color colors/gray {:color colors/gray
@ -75,7 +64,7 @@
{:margin-top 18 {:margin-top 18
:margin-left 40 :margin-left 40
:font-size 12 :font-size 12
:color styles/text2-color}) :color colors/text-gray})
(defn group-message-wrapper [message] (defn group-message-wrapper [message]
(merge {:flex-direction :column} (merge {:flex-direction :column}
@ -109,7 +98,7 @@
:margin-top 2}) :margin-top 2})
(def delivery-text (def delivery-text
{:color styles/color-gray4 {:color colors/gray
:font-size 12}) :font-size 12})
(def not-sent-view (def not-sent-view
@ -119,7 +108,7 @@
(def not-sent-text (def not-sent-text
(assoc delivery-text (assoc delivery-text
:color styles/color-red :color colors/red
:text-align :right :text-align :right
:padding-top 4)) :padding-top 4))
@ -131,13 +120,13 @@
{:padding-top 4}) {:padding-top 4})
(defn text-message (defn text-message
[collapsed?] [collapsed? outgoing]
(assoc style-message-text :margin-bottom (if collapsed? 2 0))) (assoc (style-message-text outgoing) :margin-bottom (if collapsed? 2 0)))
(defnstyle emoji-message (defnstyle emoji-message
[{:keys [incoming-group]}] [{:keys [incoming-group]}]
{:font-size 40 {:font-size 40
:color styles/text1-color :color colors/text
:android {:line-height 45} :android {:line-height 45}
:ios {:line-height 46} :ios {:line-height 46}
:margin-top (if incoming-group 4 0)}) :margin-top (if incoming-group 4 0)})
@ -153,7 +142,7 @@
16 16
4)} 4)}
(when-not (= content-type constants/content-type-emoji) (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) (when (= content-type constants/content-type-command)
{:padding-top 12 {:padding-top 12
:padding-bottom 10}))) :padding-bottom 10})))
@ -175,27 +164,19 @@
(def status-from (def status-from
{:margin-top 20 {:margin-top 20
:font-size 18 :font-size 18
:color styles/text1-color}) :color colors/text})
(def status-text (def status-text
{:margin-top 10 {:margin-top 10
:font-size 14 :font-size 14
:line-height 20 :line-height 20
:text-align :center :text-align :center
:color styles/text2-color}) :color colors/text-gray})
(defn message-animated-container [height]
{:height height})
(defn message-container [window-width] (defn message-container [window-width]
{:position :absolute {:position :absolute
:width window-width}) :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 (def message-author-name
{:font-size 12 {:font-size 12
:padding-top 6 :padding-top 6
@ -205,7 +186,7 @@
{:margin-bottom 6 {:margin-bottom 6
:padding-bottom 6 :padding-bottom 6
:border-bottom-color (if outgoing :border-bottom-color (if outgoing
colors/blue-light colors/white-light-transparent
colors/gray-lighter) colors/gray-lighter)
:border-bottom-width 2 :border-bottom-width 2
:border-bottom-left-radius 2 :border-bottom-left-radius 2

2
src/status_im/ui/screens/chat/styles/photos.cljs
View File

@ -14,7 +14,7 @@
:width size :width size
:height size :height size
:opacity 0.4 :opacity 0.4
:border-color colors/photo-border-color :border-color colors/gray
:border-width 1 :border-width 1
:border-radius (radius size)}) :border-radius (radius size)})

2
src/status_im/ui/screens/chat/views.cljs
View File

@ -40,7 +40,7 @@
[react/touchable-highlight [react/touchable-highlight
{:on-press #(re-frame/dispatch [:hide-contact contact-identity]) {:on-press #(re-frame/dispatch [:hide-contact contact-identity])
:accessibility-label :add-to-contacts-close-button} :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}]]]))) :container-style style/add-contact-close-icon}]]])))
(defn- on-options [chat-id chat-name group-chat? public?] (defn- on-options [chat-id chat-name group-chat? public?]

4
src/status_im/ui/screens/desktop/main/add_new/views.cljs
View File

@ -68,7 +68,7 @@
[error-tooltip chat-error]) [error-tooltip chat-error])
[react/text-input {:placeholder "0x..." [react/text-input {:placeholder "0x..."
:flex 1 :flex 1
:selection-color colors/hawkes-blue :selection-color colors/blue
:font :default :font :default
:on-change (fn [e] :on-change (fn [e]
(let [native-event (.-nativeEvent e) (let [native-event (.-nativeEvent e)
@ -118,7 +118,7 @@
[react/text-input {:flex 1 [react/text-input {:flex 1
:font :default :font :default
:selection-color colors/hawkes-blue :selection-color colors/blue
:placeholder "" :placeholder ""
:on-change on-topic-change :on-change on-topic-change
:on-submit-editing (when-not disable? create-public-chat)}]] :on-submit-editing (when-not disable? create-public-chat)}]]

13
src/status_im/ui/screens/desktop/main/chat/styles.cljs
View File

@ -9,7 +9,7 @@
(defn message-box [{:keys [outgoing] :as message}] (defn message-box [{:keys [outgoing] :as message}]
(let [align (if outgoing :flex-end :flex-start) (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 {:align-self align
:background-color color :background-color color
:border-radius 8 :border-radius 8
@ -37,9 +37,9 @@
:text-align-vertical :center :text-align-vertical :center
:width 60}) :width 60})
(defn message-timestamp [] (defn message-timestamp [outgoing]
(merge (message-timestamp-placeholder) (merge (message-timestamp-placeholder)
{:color colors/gray {:color (if outgoing colors/white colors/gray)
:position :absolute :position :absolute
:bottom 0 :bottom 0
:right -5})) :right -5}))
@ -129,8 +129,9 @@
:color color :color color
:margin-bottom 4}) :margin-bottom 4})
(def message-text (defn message-text [outgoing]
{:font-size 14}) {:color (if outgoing colors/white colors/black)
:font-size 14})
(def message-container (def message-container
{:flex-direction :column}) {:flex-direction :column})
@ -257,5 +258,5 @@
:tint-color colors/white}) :tint-color colors/white})
(defn reply-icon [outgoing] (defn reply-icon [outgoing]
{:tint-color (if outgoing colors/wild-blue-yonder colors/gray)}) {:tint-color (if outgoing colors/white colors/gray)})

13
src/status_im/ui/screens/desktop/main/chat/views.cljs
View File

@ -98,27 +98,28 @@
(views/letsubs [username [:get-contact-name-by-identity from]] (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-container outgoing)}
[react/view {:style message.style/quoted-message-author-container} [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)} [react/text {:style (message.style/quoted-message-author outgoing)}
(chat-utils/format-reply-author from username current-public-key)]] (chat-utils/format-reply-author from username current-public-key)]]
[react/text {:style (message.style/quoted-message-text outgoing) [react/text {:style (message.style/quoted-message-text outgoing)
:number-of-lines 5} :number-of-lines 5}
text]])) 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/view {:style style}
[react/touchable-highlight {:on-press #(re-frame/dispatch [:chat.ui/reply-to-message message-id])} [react/touchable-highlight {:on-press #(re-frame/dispatch [:chat.ui/reply-to-message message-id])}
[react/view {:style styles/message-container} [react/view {:style styles/message-container}
(when (:response-to content) (when (:response-to content)
[quoted-message (:response-to content) outgoing current-public-key]) [quoted-message (:response-to content) outgoing current-public-key])
[react/view {:style styles/message-wrapper} [react/view {:style styles/message-wrapper}
[react/text {:style (styles/message-text message) [react/text {:style (styles/message-text outgoing)
:selectable true :selectable true
:selection-color (if outgoing colors/white colors/hawkes-blue)} :selection-color (if outgoing colors/white colors/blue-light)}
text] text]
[react/text {:style (styles/message-timestamp-placeholder)} [react/text {:style (styles/message-timestamp-placeholder)}
(time/timestamp->time timestamp)] (time/timestamp->time timestamp)]
[react/text {:style (styles/message-timestamp)} [react/text {:style (styles/message-timestamp outgoing)}
(time/timestamp->time timestamp)]]]]]) (time/timestamp->time timestamp)]]]]])
(views/defview text-only-message [text message] (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 styles/chat-profile-contact-code} (i18n/label :t/contact-code)]
[react/text {:style {:font-size 14} [react/text {:style {:font-size 14}
:selectable true :selectable true
:selection-color colors/hawkes-blue} whisper-identity]]]))) :selection-color colors/blue} whisper-identity]]])))

4
src/status_im/ui/screens/desktop/main/tabs/profile/styles.cljs
View File

@ -96,13 +96,13 @@
(def close-icon (def close-icon
{:height 24 {:height 24
:width 24 :width 24
:tint-color colors/gray-icon}) :tint-color colors/black})
(def check-icon (def check-icon
{:height 16 {:height 16
:width 16 :width 16
:margin-right 8 :margin-right 8
:tint-color colors/tooltip-green-text}) :tint-color colors/green})
(def qr-code-title (def qr-code-title
{:font-size 20 {:font-size 20

4
src/status_im/ui/screens/desktop/main/tabs/profile/views.cljs
View File

@ -39,7 +39,7 @@
[react/view {:style styles/tooltip-icon-text} [react/view {:style styles/tooltip-icon-text}
[vector-icons/icon :icons/check [vector-icons/icon :icons/check
{:style styles/check-icon}] {: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)]] (i18n/label :sharing-copied-to-clipboard)]]
[react/view {:style styles/tooltip-triangle}]])) [react/view {:style styles/tooltip-triangle}]]))
@ -56,7 +56,7 @@
[react/view {:style {:align-items :center}} [react/view {:style {:align-items :center}}
[react/text {:style styles/qr-code-text [react/text {:style styles/qr-code-text
:selectable true :selectable true
:selection-color colors/hawkes-blue} :selection-color colors/blue}
public-key] public-key]
(when tooltip-opacity (when tooltip-opacity
[copied-tooltip tooltip-opacity])] [copied-tooltip tooltip-opacity])]

2
src/status_im/ui/screens/hardwallet/authentication_method/styles.cljs
View File

@ -33,7 +33,7 @@
:height 63}) :height 63})
(def authentication-method-row-icon-container (def authentication-method-row-icon-container
{:background-color colors/blue-transparent-10 {:background-color colors/blue-light
:width 40 :width 40
:height 40 :height 40
:border-radius 50 :border-radius 50

28
src/status_im/ui/screens/home/styles.cljs
View File

@ -1,17 +1,12 @@
(ns status-im.ui.screens.home.styles (ns status-im.ui.screens.home.styles
(:require-macros [status-im.utils.styles :refer [defstyle defnstyle]]) (:require-macros [status-im.utils.styles :refer [defstyle defnstyle]])
(:require [status-im.ui.components.styles :as component.styles] (:require [status-im.ui.components.colors :as colors]))
[status-im.ui.components.colors :as colors]))
(def delete-button-width 100) (def delete-button-width 100)
(defn toolbar [] (defn toolbar []
{:background-color colors/white}) {:background-color colors/white})
(def chat-separator-item
{:border-bottom-width 1
:border-bottom-color component.styles/color-gray5})
(defstyle chat-container (defstyle chat-container
{:flex-direction :row {:flex-direction :row
:background-color colors/white :background-color colors/white
@ -70,7 +65,7 @@
:margin-right 4}) :margin-right 4})
(defstyle name-text (defstyle name-text
{:color component.styles/text1-color {:color colors/text
:android {:font-size 16 :android {:font-size 16
:height 26} :height 26}
:ios {:font-size 17 :ios {:font-size 17
@ -90,7 +85,7 @@
{:flex-shrink 1}) {:flex-shrink 1})
(defstyle last-message-text (defstyle last-message-text
{:color component.styles/text4-color {:color colors/text-gray
:android {:font-size 14 :android {:font-size 14
:height 24} :height 24}
:ios {:font-size 15 :ios {:font-size 15
@ -108,19 +103,11 @@
:height 16}) :height 16})
(defstyle datetime-text (defstyle datetime-text
{:color component.styles/text4-color {:color colors/text-gray
:android {:font-size 14} :android {:font-size 14}
:desktop {:font-size 14} :desktop {:font-size 14}
:ios {:font-size 15}}) :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 (defstyle new-messages-text
{:left 0 {:left 0
:font-size 12 :font-size 12
@ -132,13 +119,6 @@
(def container (def container
{:flex 1}) {:flex 1})
(def native-button-offset 16)
(def create-icon
{:font-size 20
:height 22
:color colors/white})
(def group-icon (def group-icon
{:margin-top 8 {:margin-top 8
:margin-right 6 :margin-right 6

2
src/status_im/ui/screens/home/views/inner_item.cljs
View File

@ -110,7 +110,7 @@
(if dapp (if dapp
[chat-icon.screen/dapp-icon-browser dapp 36] [chat-icon.screen/dapp-icon-browser dapp 36]
[react/view styles/browser-icon-container [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/chat-info-container
[react/view styles/item-upper-container [react/view styles/item-upper-container
[react/view styles/name-view [react/view styles/name-view

10
src/status_im/ui/screens/main_tabs/styles.cljs
View File

@ -15,9 +15,9 @@
(def tabs-container (def tabs-container
{:flex-direction :row {:flex-direction :row
:height tabs-height :height tabs-height
:background-color styles/color-white :background-color colors/white
:border-top-width 1 :border-top-width 1
:border-top-color styles/color-light-gray3}) :border-top-color colors/black-transparent})
(def tab-container (def tab-container
{:height tabs-height {:height tabs-height
@ -31,11 +31,11 @@
:font-weight (if active? "600" :normal)} :font-weight (if active? "600" :normal)}
:text-align :center :text-align :center
:color (if active? :color (if active?
styles/color-blue4 colors/blue
styles/color-gray4)}) colors/gray)})
(defn tab-icon [active?] (defn tab-icon [active?]
{:color (if active? styles/color-blue4 styles/color-gray4)}) {:color (if active? colors/blue colors/gray)})
(def counter-container (def counter-container
{:position :absolute {:position :absolute

4
src/status_im/ui/screens/profile/seed/styles.cljs
View File

@ -78,11 +78,11 @@
:border-radius 8 :border-radius 8
:background-color colors/white :background-color colors/white
:border-width 1 :border-width 1
:border-color colors/gray-border}) :border-color colors/gray-lighter})
(def twelve-words-columns-separator (def twelve-words-columns-separator
{:width 1 {:width 1
:background-color colors/gray-border}) :background-color colors/gray-lighter})
(def enter-word-container (def enter-word-container
{:flex 1 {:flex 1

2
src/status_im/ui/screens/wallet/choose_recipient/styles.cljs
View File

@ -82,7 +82,7 @@
(def qr-code (def qr-code
{:flex 1 {:flex 1
:background-color colors/white-lighter-transparent :background-color colors/white-transparent
:align-items :center}) :align-items :center})
(defn qr-code-text [dimensions] (defn qr-code-text [dimensions]

36
src/status_im/ui/screens/wallet/components/styles.cljs
View File

@ -21,9 +21,9 @@
:padding-left 14 :padding-left 14
:padding-right 8} :padding-right 8}
(if disabled? (if disabled?
{:border-color colors/white-light-transparent {:border-width 1
:border-width 1} :border-color colors/white-light-transparent}
{:background-color colors/white-transparent}))) {:background-color colors/white-light-transparent})))
(def cartouche-icon-wrapper (def cartouche-icon-wrapper
{:flex 1 {:flex 1
@ -47,7 +47,7 @@
{:color colors/white}) {:color colors/white})
(def text-secondary-content (def text-secondary-content
{:color colors/white-lighter-transparent}) {:color colors/white-transparent})
(def text (def text
{:margin-right 10}) {:margin-right 10})
@ -76,19 +76,9 @@
:ios {:line-height 16} :ios {:line-height 16}
:android {:font-size 12}}) :android {:font-size 12}})
(def amount-text-input-container
{:margin-top 8})
(def label-transparent (def label-transparent
(merge label (merge label
{:color colors/white-lighter-transparent})) {:color colors/white-transparent}))
(defn amount-container [active?]
{:height 52
:background-color (if active?
colors/white-light-transparent
styles/color-white-transparent-3)
:border-radius 8})
(def network (def network
{:color :white {:color :white
@ -107,7 +97,7 @@
(def asset-container (def asset-container
{:margin-top 8 {:margin-top 8
:height 52 :height 52
:background-color styles/color-white-transparent-3 :background-color colors/white-light-transparent
:justify-content :center :justify-content :center
:padding-left 14 :padding-left 14
:padding-vertical 14 :padding-vertical 14
@ -117,7 +107,7 @@
(def asset-container-read-only (def asset-container-read-only
{:margin-top 8 {:margin-top 8
:height 52 :height 52
:border-color styles/color-white-transparent-3 :border-color colors/white-light-transparent
:border-width 1 :border-width 1
:justify-content :center :justify-content :center
:padding-left 14 :padding-left 14
@ -131,7 +121,7 @@
:margin-vertical 11}) :margin-vertical 11})
(def asset-icon (def asset-icon
{:background-color styles/color-gray9 {:background-color colors/gray-lighter
:border-radius 50}) :border-radius 50})
(def asset-text-content (def asset-text-content
@ -150,7 +140,7 @@
{:margin-right 10}) {:margin-right 10})
(def asset-text (def asset-text
{:color styles/color-white}) {:color colors/white})
(defstyle container-disabled (defstyle container-disabled
{:border-width 1 {:border-width 1
@ -174,7 +164,7 @@
:letter-spacing -0.2}) :letter-spacing -0.2})
(defn participant [address?] (defn participant [address?]
{:color (if address? :white colors/white-lighter-transparent) {:color (if address? :white colors/white-transparent)
:flex-shrink 1 :flex-shrink 1
:font-size 15 :font-size 15
:letter-spacing -0.2}) :letter-spacing -0.2})
@ -196,7 +186,7 @@
:color colors/white}) :color colors/white})
(def recipient-no-address (def recipient-no-address
{:color colors/white-lighter-transparent}) {:color colors/white-transparent})
(def recent-recipients (def recent-recipients
{:flex 1 {:flex 1
@ -208,7 +198,7 @@
(def wallet-value (def wallet-value
{:padding-left 6 {:padding-left 6
:color styles/color-white-transparent-5 :color colors/white-transparent
:font-size 15 :font-size 15
:letter-spacing -0.2}) :letter-spacing -0.2})
@ -218,7 +208,7 @@
(def separator (def separator
{:height 1 {:height 1
:margin-horizontal 15 :margin-horizontal 15
:background-color styles/color-white-transparent-1}) :background-color colors/white-light-transparent})
(def button-text (def button-text
{:color :white {:color :white

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

@ -33,7 +33,7 @@
;; It might be replaced by some theme mechanism ;; It might be replaced by some theme mechanism
(defn text-input [props text] (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 :selection-color colors/white
:style {:color colors/white :style {:color colors/white
:font-size 15 :font-size 15

8
src/status_im/ui/screens/wallet/main/styles.cljs
View File

@ -26,7 +26,7 @@
:align-items :center :align-items :center
:border-radius 8 :border-radius 8
:margin 16 :margin 16
:background-color colors/black-darker-transparent :background-color colors/black-transparent
:padding-top 10 :padding-top 10
:padding-bottom 10 :padding-bottom 10
:padding-left 14 :padding-left 14
@ -42,7 +42,7 @@
(def backup-seed-phrase-description (def backup-seed-phrase-description
{:line-height 20 {:line-height 20
:color colors/white-lighter-transparent}) :color colors/white-transparent})
(def total-balance-container (def total-balance-container
{:align-items :center {:align-items :center
@ -64,12 +64,12 @@
(defstyle total-balance-currency (defstyle total-balance-currency
{:font-size 37 {:font-size 37
:margin-left 9 :margin-left 9
:color colors/white-lighter-transparent :color colors/white-transparent
:android {:letter-spacing 1.5} :android {:letter-spacing 1.5}
:ios {:letter-spacing 1.16}}) :ios {:letter-spacing 1.16}})
(def snackbar-container (def snackbar-container
{:background-color colors/gray-notifications}) {:background-color colors/gray})
(def snackbar-text (def snackbar-text
{:color colors/white {:color colors/white

2
src/status_im/ui/screens/wallet/onboarding/styles.cljs
View File

@ -32,7 +32,7 @@
:font-size 14 :font-size 14
:letter-spacing -0.2 :letter-spacing -0.2
:text-align :center :text-align :center
:color colors/white-lighter-transparent}) :color colors/white-transparent})
(def set-up-button (def set-up-button
{:flex-direction :row {:flex-direction :row

2
src/status_im/ui/screens/wallet/request/styles.cljs
View File

@ -2,7 +2,7 @@
(:require [status-im.ui.components.colors :as colors])) (:require [status-im.ui.components.colors :as colors]))
(def hint (def hint
{:color colors/white-lighter-transparent}) {:color colors/white-transparent})
(def footer (def footer
{:color colors/white {:color colors/white

8
src/status_im/ui/screens/wallet/send/styles.cljs
View File

@ -71,7 +71,7 @@
(def advanced-button (def advanced-button
{:flex-direction :row {:flex-direction :row
:background-color styles/color-blue6 :background-color colors/black-transparent
:border-radius 50 :border-radius 50
:padding 8 :padding 8
:align-items :center}) :align-items :center})
@ -106,7 +106,7 @@
{:color colors/white}) {:color colors/white})
(def advanced-fees-details-text (def advanced-fees-details-text
{:color colors/white-lighter-transparent}) {:color colors/white-transparent})
(def transaction-fee-block-wrapper (def transaction-fee-block-wrapper
{:flex-direction :row}) {:flex-direction :row})
@ -125,7 +125,7 @@
:margin-right 15 :margin-right 15
:align-items :center :align-items :center
:justify-content :center :justify-content :center
:background-color colors/blue-dark}) :background-color colors/black-transparent})
(def transaction-fee-info-icon-text (def transaction-fee-info-icon-text
{:color colors/white {:color colors/white
@ -135,7 +135,7 @@
{:keyboard-type :numeric {:keyboard-type :numeric
:auto-capitalize "none" :auto-capitalize "none"
:placeholder "0.000" :placeholder "0.000"
:placeholder-text-color colors/white-lighter-transparent :placeholder-text-color colors/white-transparent
:selection-color colors/white :selection-color colors/white
:style wallet.components.styles/text-input}) :style wallet.components.styles/text-input})

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

@ -27,7 +27,8 @@
[status-im.utils.ethereum.core :as ethereum] [status-im.utils.ethereum.core :as ethereum]
[status-im.transport.utils :as transport.utils] [status-im.transport.utils :as transport.utils]
[taoensso.timbre :as log] [taoensso.timbre :as log]
[reagent.core :as reagent])) [reagent.core :as reagent]
[status-im.ui.components.colors :as colors]))
(defn- toolbar [modal? title] (defn- toolbar [modal? title]
(let [action (if modal? act/close-white act/back-white)] (let [action (if modal? act/close-white act/back-white)]
@ -90,7 +91,7 @@
{:auto-focus true {:auto-focus true
:secure-text-entry true :secure-text-entry true
:placeholder (i18n/label :t/enter-password) :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 %)]) :on-change-text #(re-frame/dispatch [:wallet.send/set-password (security/mask-data %)])
:style styles/password :style styles/password
:accessibility-label :enter-password-input :accessibility-label :enter-password-input
@ -113,7 +114,7 @@
(= :offline network-status)) (= :offline network-status))
:accessibility-label :sign-transaction-button} :accessibility-label :sign-transaction-button}
(i18n/label sign-label) (i18n/label sign-label)
[vector-icons/icon :icons/forward {:color :white}]]])) [vector-icons/icon :icons/forward {:color colors/white}]]]))
;; "Sign Transaction >" button ;; "Sign Transaction >" button
(defn- sign-transaction-button [amount-error to amount sufficient-funds? sufficient-gas? modal? online?] (defn- sign-transaction-button [amount-error to amount sufficient-funds? sufficient-gas? modal? online?]
@ -134,7 +135,7 @@
:text-style {:color :white} :text-style {:color :white}
:accessibility-label :sign-transaction-button} :accessibility-label :sign-transaction-button}
(i18n/label :t/transactions-sign-transaction) (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]}] (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? (let [{:keys [amount amount-text amount-error asset-error show-password-input? to to-name sufficient-funds?

9
src/status_im/ui/screens/wallet/transaction_sent/styles.cljs
View File

@ -28,15 +28,6 @@
:text-align :center :text-align :center
:padding-horizontal 16}) :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 (def transaction-details
{:color :white {:color :white
:font-size 15}) :font-size 15})

5
src/status_im/ui/screens/wallet/transaction_sent/views.cljs
View File

@ -9,7 +9,8 @@
[re-frame.core :as re-frame] [re-frame.core :as re-frame]
[status-im.ui.screens.wallet.components.views :as components] [status-im.ui.screens.wallet.components.views :as components]
[status-im.i18n :as i18n] [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?]] (defview transaction-sent [& [modal?]]
(letsubs [chat-id [:get-current-chat-id]] (letsubs [chat-id [:get-current-chat-id]]
@ -17,7 +18,7 @@
[status-bar/status-bar {:type (if modal? :modal-wallet :transparent)}] [status-bar/status-bar {:type (if modal? :modal-wallet :transparent)}]
[react/view styles/transaction-sent-container [react/view styles/transaction-sent-container
[react/view styles/ok-icon-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 [react/text {:style styles/transaction-sent
:font (if platform/android? :medium :default) :font (if platform/android? :medium :default)
:accessibility-label :transaction-sent-text} :accessibility-label :transaction-sent-text}

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

@ -12,7 +12,7 @@
:border-bottom-width (if active? 2 1) :border-bottom-width (if active? 2 1)
:border-bottom-color (if active? :border-bottom-color (if active?
colors/blue colors/blue
colors/gray-transparent)}) colors/gray)})
(def tabs-container (def tabs-container
{:flex-direction :row {:flex-direction :row
@ -30,10 +30,6 @@
{:flex 1 {:flex 1
:background-color :white}) :background-color :white})
(def tab-unsigned-transactions-count
(merge (tab-title false)
{:color colors/gray}))
(def forward (def forward
{:color colors/gray}) {:color colors/gray})
@ -51,7 +47,7 @@
:android {:padding-top 14}}) :android {:padding-top 14}})
(def amount-text (def amount-text
{:color colors/text}) {:color colors/black})
(def tx-amount (def tx-amount
{:flex-grow 1 {:flex-grow 1
@ -88,36 +84,11 @@
(merge address-item (merge address-item
{:flex-shrink 1})) {:flex-shrink 1}))
(def action-buttons
{:flex 1
:flex-direction :row
:padding-vertical 12})
(def sign-all-view (def sign-all-view
{:flex 1 {:flex 1
:flex-direction :column :flex-direction :column
:justify-content :center :justify-content :center
:background-color colors/gray-transparent}) :background-color colors/gray})
(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})
(def sign-all-done (def sign-all-done
{:position :absolute {:position :absolute
@ -226,7 +197,7 @@
:width 4 :width 4
:height 4 :height 4
:border-radius 2 :border-radius 2
:background-color colors/cyan}) :background-color colors/blue})
(def filter-container (def filter-container
{:flex 1}) {:flex 1})