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.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

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

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

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

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

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

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

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

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

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
(: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

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

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

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

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

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

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

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

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

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

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

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

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

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

@ -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?

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

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

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

@ -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]]

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

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.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))

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

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

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

@ -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]

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@ -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]]

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

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

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

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

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

@ -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]]

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.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

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

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

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
(: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})

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
(: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

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
(: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})

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

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

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
(: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})

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
(: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

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

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

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

@ -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?]

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

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

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

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

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]]
[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]]])))

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

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

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}
[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])]

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

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

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

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

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

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

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

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

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

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

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

@ -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]

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

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

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

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

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

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

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

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

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

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

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

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

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.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?

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

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

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

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

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