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

chore: remove uses of override theme prop (#16570)

This commit is contained in:
Jamie Caprani 2023-07-28 11:36:54 +02:00 committed by GitHub
parent 43cba161d6
commit a8303dbe50
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
23 changed files with 210 additions and 210 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/quo2/components/drawers/documentation_drawers/style.cljs
View File

@ -15,7 +15,7 @@
:margin-bottom (+ (safe-area/get-bottom) 8)}) :margin-bottom (+ (safe-area/get-bottom) 8)})
(defn title (defn title
[shell?] [theme]
{:color (colors/theme-colors colors/neutral-100 {:color (colors/theme-colors colors/neutral-100
colors/white colors/white
(when shell? :dark))}) theme)})

21
src/quo2/components/drawers/documentation_drawers/view.cljs
View File

@ -3,9 +3,10 @@
[quo2.components.drawers.documentation-drawers.style :as style] [quo2.components.drawers.documentation-drawers.style :as style]
[quo2.components.markdown.text :as text] [quo2.components.markdown.text :as text]
[react-native.core :as rn] [react-native.core :as rn]
[react-native.gesture :as gesture])) [react-native.gesture :as gesture]
[quo2.theme :as quo.theme]))
(defn view (defn- view-internal
"Options "Options
- `title` Title text - `title` Title text
- `show-button?` Show button - `show-button?` Show button
@ -15,7 +16,7 @@
- `shell?` use shell theme - `shell?` use shell theme
`content` Content of the drawer `content` Content of the drawer
" "
[{:keys [title show-button? on-press-button button-label button-icon shell?]} content] [{:keys [title show-button? on-press-button button-label button-icon theme shell?]} content]
[gesture/scroll-view [gesture/scroll-view
{:style style/outer-container {:style style/outer-container
:always-bounce-vertical false :always-bounce-vertical false
@ -24,18 +25,18 @@
[text/text [text/text
{:size :heading-2 {:size :heading-2
:accessibility-label :documentation-drawer-title :accessibility-label :documentation-drawer-title
:style (style/title shell?) :style (style/title theme)
:weight :semi-bold} :weight :semi-bold}
title] title]
[rn/view {:style style/content :accessibility-label :documentation-drawer-content} [rn/view {:style style/content :accessibility-label :documentation-drawer-content}
content] content]
(when show-button? (when show-button?
[button/button [button/button
(cond-> {:size 24 {:size 24
:type (if shell? :blur-bg-outline :outline) :type (if shell? :blur-bg-outline :outline)
:on-press on-press-button :on-press on-press-button
:accessibility-label :documentation-drawer-button :accessibility-label :documentation-drawer-button
:after button-icon} :after button-icon}
shell? (assoc :override-theme :dark))
button-label])]]) button-label])]])
(def view (quo.theme/with-theme view-internal))

76
src/quo2/components/inputs/input/style.cljs
View File

@ -3,62 +3,62 @@
[quo2.foundations.colors :as colors])) [quo2.foundations.colors :as colors]))
(defn variants-colors (defn variants-colors
[blur? override-theme] [blur? theme]
(if blur? (if blur?
{:label (colors/theme-colors colors/neutral-80-opa-40 colors/white-opa-40 override-theme) {:label (colors/theme-colors colors/neutral-80-opa-40 colors/white-opa-40 theme)
:icon (colors/theme-colors colors/neutral-80-opa-70 colors/white-opa-70 override-theme) :icon (colors/theme-colors colors/neutral-80-opa-70 colors/white-opa-70 theme)
:button-border (colors/theme-colors colors/neutral-80-opa-30 colors/white-opa-10 override-theme) :button-border (colors/theme-colors colors/neutral-80-opa-30 colors/white-opa-10 theme)
:password-icon (colors/theme-colors colors/neutral-100 colors/white-opa-70 override-theme) :password-icon (colors/theme-colors colors/neutral-100 colors/white-opa-70 theme)
:clear-icon (colors/theme-colors colors/neutral-80-opa-30 colors/white-opa-10 override-theme) :clear-icon (colors/theme-colors colors/neutral-80-opa-30 colors/white-opa-10 theme)
:cursor (colors/theme-colors (colors/custom-color :blue 50) :cursor (colors/theme-colors (colors/custom-color :blue 50)
colors/white colors/white
override-theme)} theme)}
{:label (colors/theme-colors colors/neutral-50 colors/neutral-40 override-theme) {:label (colors/theme-colors colors/neutral-50 colors/neutral-40 theme)
:icon (colors/theme-colors colors/neutral-50 colors/neutral-40 override-theme) :icon (colors/theme-colors colors/neutral-50 colors/neutral-40 theme)
:button-border (colors/theme-colors colors/neutral-30 colors/neutral-70 override-theme) :button-border (colors/theme-colors colors/neutral-30 colors/neutral-70 theme)
:clear-icon (colors/theme-colors colors/neutral-40 colors/neutral-60 override-theme) :clear-icon (colors/theme-colors colors/neutral-40 colors/neutral-60 theme)
:password-icon (colors/theme-colors colors/neutral-50 colors/white override-theme) :password-icon (colors/theme-colors colors/neutral-50 colors/white theme)
:cursor (colors/theme-colors (colors/custom-color :blue 50) :cursor (colors/theme-colors (colors/custom-color :blue 50)
(colors/custom-color :blue 60) (colors/custom-color :blue 60)
override-theme)})) theme)}))
(defn status-colors (defn status-colors
[status blur? override-theme] [status blur? theme]
(if blur? (if blur?
(case status (case status
:focus :focus
{:border-color (colors/theme-colors colors/neutral-80-opa-20 colors/white-opa-40 override-theme) {:border-color (colors/theme-colors colors/neutral-80-opa-20 colors/white-opa-40 theme)
:placeholder (colors/theme-colors colors/neutral-80-opa-20 colors/white-opa-20 override-theme) :placeholder (colors/theme-colors colors/neutral-80-opa-20 colors/white-opa-20 theme)
:text (colors/theme-colors colors/neutral-100 colors/white override-theme)} :text (colors/theme-colors colors/neutral-100 colors/white theme)}
:error :error
{:border-color (colors/theme-colors colors/danger-opa-40 colors/danger-opa-40 override-theme) {:border-color (colors/theme-colors colors/danger-opa-40 colors/danger-opa-40 theme)
:placeholder (colors/theme-colors colors/neutral-80-opa-40 colors/white-opa-40 override-theme) :placeholder (colors/theme-colors colors/neutral-80-opa-40 colors/white-opa-40 theme)
:text (colors/theme-colors colors/neutral-100 colors/white override-theme)} :text (colors/theme-colors colors/neutral-100 colors/white theme)}
:disabled :disabled
{:border-color (colors/theme-colors colors/neutral-80-opa-10 colors/white-opa-10 override-theme) {:border-color (colors/theme-colors colors/neutral-80-opa-10 colors/white-opa-10 theme)
:placeholder (colors/theme-colors colors/neutral-80-opa-30 colors/white-opa-20 override-theme) :placeholder (colors/theme-colors colors/neutral-80-opa-30 colors/white-opa-20 theme)
:text (colors/theme-colors colors/neutral-80-opa-30 colors/white-opa-20 override-theme)} :text (colors/theme-colors colors/neutral-80-opa-30 colors/white-opa-20 theme)}
;; :default ;; :default
{:border-color (colors/theme-colors colors/neutral-80-opa-10 colors/white-opa-10 override-theme) {:border-color (colors/theme-colors colors/neutral-80-opa-10 colors/white-opa-10 theme)
:placeholder (colors/theme-colors colors/neutral-80-opa-40 colors/white-opa-40 override-theme) :placeholder (colors/theme-colors colors/neutral-80-opa-40 colors/white-opa-40 theme)
:text (colors/theme-colors colors/neutral-100 colors/white override-theme)}) :text (colors/theme-colors colors/neutral-100 colors/white theme)})
(case status (case status
:focus :focus
{:border-color (colors/theme-colors colors/neutral-40 colors/neutral-60 override-theme) {:border-color (colors/theme-colors colors/neutral-40 colors/neutral-60 theme)
:placeholder (colors/theme-colors colors/neutral-30 colors/neutral-60 override-theme) :placeholder (colors/theme-colors colors/neutral-30 colors/neutral-60 theme)
:text (colors/theme-colors colors/neutral-100 colors/white override-theme)} :text (colors/theme-colors colors/neutral-100 colors/white theme)}
:error :error
{:border-color (colors/theme-colors colors/danger-opa-40 colors/danger-opa-40 override-theme) {:border-color (colors/theme-colors colors/danger-opa-40 colors/danger-opa-40 theme)
:placeholder (colors/theme-colors colors/neutral-40 colors/white-opa-40 override-theme) :placeholder (colors/theme-colors colors/neutral-40 colors/white-opa-40 theme)
:text (colors/theme-colors colors/neutral-100 colors/white override-theme)} :text (colors/theme-colors colors/neutral-100 colors/white theme)}
:disabled :disabled
{:border-color (colors/theme-colors colors/neutral-20 colors/neutral-80 override-theme) {:border-color (colors/theme-colors colors/neutral-20 colors/neutral-80 theme)
:placeholder (colors/theme-colors colors/neutral-40 colors/neutral-40 override-theme) :placeholder (colors/theme-colors colors/neutral-40 colors/neutral-40 theme)
:text (colors/theme-colors colors/neutral-40 colors/neutral-40 override-theme)} :text (colors/theme-colors colors/neutral-40 colors/neutral-40 theme)}
;; :default ;; :default
{:border-color (colors/theme-colors colors/neutral-20 colors/neutral-80 override-theme) {:border-color (colors/theme-colors colors/neutral-20 colors/neutral-80 theme)
:placeholder (colors/theme-colors colors/neutral-40 colors/neutral-50 override-theme) :placeholder (colors/theme-colors colors/neutral-40 colors/neutral-50 theme)
:text (colors/theme-colors colors/neutral-100 colors/white override-theme)}))) :text (colors/theme-colors colors/neutral-100 colors/white theme)})))
(defn input-container (defn input-container
[colors-by-status small? disabled?] [colors-by-status small? disabled?]

18
src/quo2/components/inputs/input/view.cljs
View File

@ -5,7 +5,7 @@
[quo2.components.markdown.text :as text] [quo2.components.markdown.text :as text]
[react-native.core :as rn] [react-native.core :as rn]
[reagent.core :as reagent] [reagent.core :as reagent]
[quo2.theme :as theme])) [quo2.theme :as quo.theme]))
(defn- label-&-counter (defn- label-&-counter
[{:keys [label current-chars char-limit variant-colors]}] [{:keys [label current-chars char-limit variant-colors]}]
@ -54,7 +54,7 @@
(def ^:private custom-props (def ^:private custom-props
"Custom properties that must be removed from properties map passed to InputText." "Custom properties that must be removed from properties map passed to InputText."
[:type :blur? :override-theme :error? :right-icon :left-icon :disabled? :small? :button [:type :blur? :theme :error? :right-icon :left-icon :disabled? :small? :button
:label :char-limit :on-char-limit-reach :icon-name :multiline? :on-focus :on-blur]) :label :char-limit :on-char-limit-reach :icon-name :multiline? :on-focus :on-blur])
(defn- base-input (defn- base-input
@ -74,15 +74,15 @@
(reset! char-count amount-chars) (reset! char-count amount-chars)
(when (>= amount-chars char-limit) (when (>= amount-chars char-limit)
(on-char-limit-reach amount-chars))))] (on-char-limit-reach amount-chars))))]
(fn [{:keys [blur? override-theme error? right-icon left-icon disabled? small? button (fn [{:keys [blur? theme error? right-icon left-icon disabled? small? button
label char-limit multiline? clearable? on-focus on-blur] label char-limit multiline? clearable? on-focus on-blur]
:as props}] :as props}]
(let [status-kw (cond (let [status-kw (cond
disabled? :disabled disabled? :disabled
error? :error error? :error
:else @status) :else @status)
colors-by-status (style/status-colors status-kw blur? override-theme) colors-by-status (style/status-colors status-kw blur? theme)
variant-colors (style/variants-colors blur? override-theme) variant-colors (style/variants-colors blur? theme)
clean-props (apply dissoc props custom-props)] clean-props (apply dissoc props custom-props)]
[:<> [:<>
(when (or label char-limit) (when (or label char-limit)
@ -101,7 +101,7 @@
(cond-> {:style (style/input colors-by-status small? @multiple-lines?) (cond-> {:style (style/input colors-by-status small? @multiple-lines?)
:accessibility-label :input :accessibility-label :input
:placeholder-text-color (:placeholder colors-by-status) :placeholder-text-color (:placeholder colors-by-status)
:keyboard-appearance (theme/theme-value :light :dark override-theme) :keyboard-appearance (quo.theme/theme-value :light :dark theme)
:cursor-color (:cursor variant-colors) :cursor-color (:cursor variant-colors)
:editable (not disabled?) :editable (not disabled?)
:on-focus (fn [] :on-focus (fn []
@ -148,11 +148,11 @@
:icon-name (if @password-shown? :i/hide :i/reveal) :icon-name (if @password-shown? :i/hide :i/reveal)
:on-press #(swap! password-shown? not)})]))) :on-press #(swap! password-shown? not)})])))
(defn input (defn input-internal
"This input supports the following properties: "This input supports the following properties:
- :type - Can be `:text`(default) or `:password`. - :type - Can be `:text`(default) or `:password`.
- :blur? - Boolean to set the blur color variant. - :blur? - Boolean to set the blur color variant.
- :override-theme - Can be `light` or `:dark`. - :theme - Can be `light` or `:dark`.
- :small? - Boolean to specify if this input is rendered in its small version. - :small? - Boolean to specify if this input is rendered in its small version.
- :multiline? - Boolean to specify if this input support multiple lines. - :multiline? - Boolean to specify if this input support multiple lines.
- :icon-name - The name of an icon to display at the left of the input. - :icon-name - The name of an icon to display at the left of the input.
@ -188,3 +188,5 @@
(if (= type :password) (if (= type :password)
[password-input base-props] [password-input base-props]
[base-input base-props]))) [base-input base-props])))
(def input (quo.theme/with-theme input-internal))

18
src/quo2/components/inputs/recovery_phrase/style.cljs
View File

@ -17,29 +17,29 @@
:text-align-vertical :top)) :text-align-vertical :top))
(defn placeholder-color (defn placeholder-color
[input-state override-theme blur?] [input-state theme blur?]
(cond (cond
(and (= input-state :focused) blur?) (and (= input-state :focused) blur?)
(colors/theme-colors colors/neutral-80-opa-20 colors/white-opa-20 override-theme) (colors/theme-colors colors/neutral-80-opa-20 colors/white-opa-20 theme)
(= input-state :focused) ; Not blur (= input-state :focused) ; Not blur
(colors/theme-colors colors/neutral-30 colors/neutral-60 override-theme) (colors/theme-colors colors/neutral-30 colors/neutral-60 theme)
blur? ; :default & blur blur? ; :default & blur
(colors/theme-colors colors/neutral-80-opa-40 colors/white-opa-30 override-theme) (colors/theme-colors colors/neutral-80-opa-40 colors/white-opa-30 theme)
:else ; :default & not blur :else ; :default & not blur
(colors/theme-colors colors/neutral-40 colors/neutral-50 override-theme))) (colors/theme-colors colors/neutral-40 colors/neutral-50 theme)))
(defn cursor-color (defn cursor-color
[customization-color override-theme] [customization-color theme]
(colors/theme-colors (colors/custom-color customization-color 50) (colors/theme-colors (colors/custom-color customization-color 50)
(colors/custom-color customization-color 60) (colors/custom-color customization-color 60)
override-theme)) theme))
(defn error-word (defn error-word
[] [theme]
{:height 22 {:height 22
:padding-horizontal 20 :padding-horizontal 20
:background-color colors/danger-50-opa-10 :background-color colors/danger-50-opa-10
:color (colors/theme-colors colors/danger-50 colors/danger-60)}) :color (colors/theme-colors colors/danger-50 colors/danger-60 theme)})

30
src/quo2/components/inputs/recovery_phrase/view.cljs
View File

@ -3,19 +3,19 @@
[quo2.components.inputs.recovery-phrase.style :as style] [quo2.components.inputs.recovery-phrase.style :as style]
[react-native.core :as rn] [react-native.core :as rn]
[reagent.core :as reagent] [reagent.core :as reagent]
[quo2.theme :as theme])) [quo2.theme :as quo.theme]))
(def ^:private custom-props (def ^:private custom-props
[:customization-color :override-theme :blur? :cursor-color :multiline :on-focus :on-blur [:customization-color :theme :blur? :cursor-color :multiline :on-focus :on-blur
:placeholder-text-color :mark-errors? :error-pred :word-limit]) :placeholder-text-color :mark-errors? :error-pred :word-limit])
(defn- error-word (defn- error-word
[text] [text theme]
[rn/text {:style (style/error-word)} [rn/text {:style (style/error-word theme)}
text]) text])
(defn- mark-error-words (defn- mark-error-words
[pred-last-word pred-previous-words text word-limit] [{:keys [pred-last-word pred-previous-words text word-limit theme]}]
(let [last-index (dec (count (string/split text #"\s+"))) (let [last-index (dec (count (string/split text #"\s+")))
words (map #(apply str %) words (map #(apply str %)
(partition-by #(= " " %) text))] (partition-by #(= " " %) text))]
@ -31,18 +31,18 @@
:always (update :result :always (update :result
conj conj
(if invalid-word? (if invalid-word?
[error-word word] [error-word word theme]
word))))) word)))))
{:result [:<>] {:result [:<>]
:idx 0}) :idx 0})
:result))) :result)))
(defn recovery-phrase-input (defn recovery-phrase-input-internal
[_ _] [_ _]
(let [state (reagent/atom :default) (let [state (reagent/atom :default)
set-focused #(reset! state :focused) set-focused #(reset! state :focused)
set-default #(reset! state :default)] set-default #(reset! state :default)]
(fn [{:keys [customization-color override-theme blur? on-focus on-blur mark-errors? (fn [{:keys [customization-color theme blur? on-focus on-blur mark-errors?
error-pred-current-word error-pred-written-words word-limit] error-pred-current-word error-pred-written-words word-limit]
:or {customization-color :blue :or {customization-color :blue
word-limit ##Inf word-limit ##Inf
@ -55,9 +55,9 @@
[rn/text-input [rn/text-input
(merge {:accessibility-label :recovery-phrase-input (merge {:accessibility-label :recovery-phrase-input
:style (style/input) :style (style/input)
:placeholder-text-color (style/placeholder-color @state override-theme blur?) :placeholder-text-color (style/placeholder-color @state theme blur?)
:cursor-color (style/cursor-color customization-color override-theme) :cursor-color (style/cursor-color customization-color theme)
:keyboard-appearance (theme/theme-value :light :dark override-theme) :keyboard-appearance (quo.theme/theme-value :light :dark theme)
:multiline true :multiline true
:on-focus (fn [] :on-focus (fn []
(set-focused) (set-focused)
@ -67,5 +67,11 @@
(when on-blur (on-blur)))} (when on-blur (on-blur)))}
extra-props) extra-props)
(if mark-errors? (if mark-errors?
(mark-error-words error-pred-current-word error-pred-written-words text word-limit) (mark-error-words {:pred-last-word error-pred-current-word
:pred-previous-words error-pred-written-words
:text text
:word-limit word-limit
:theme theme})
text)]])))) text)]]))))
(def recovery-phrase-input (quo.theme/with-theme recovery-phrase-input-internal))

31
src/quo2/components/list_items/preview_list.cljs
View File

@ -5,7 +5,8 @@
[quo2.foundations.colors :as colors] [quo2.foundations.colors :as colors]
[react-native.core :as rn] [react-native.core :as rn]
[react-native.fast-image :as fast-image] [react-native.fast-image :as fast-image]
[react-native.hole-view :as hole-view])) [react-native.hole-view :as hole-view]
[quo2.theme :as quo.theme]))
(def params (def params
{32 {:border-radius {:circular 16 :rounded 10} {32 {:border-radius {:circular 16 :rounded 10}
@ -61,13 +62,13 @@
[avatar item type size border-radius]])) [avatar item type size border-radius]]))
(defn get-overflow-color (defn get-overflow-color
[transparent? transparent-color light-color dark-color override-theme] [transparent? transparent-color light-color dark-color theme]
(if transparent? (if transparent?
transparent-color transparent-color
(colors/theme-colors light-color dark-color override-theme))) (colors/theme-colors light-color dark-color theme)))
(defn overflow-label (defn overflow-label
[label size transparent? border-radius margin-left override-theme more-than-99-label] [{:keys [label size transparent? border-radius margin-left theme more-than-99-label]}]
[rn/view [rn/view
{:style {:width size {:style {:width size
:height size :height size
@ -80,7 +81,7 @@
colors/white-opa-10 colors/white-opa-10
colors/neutral-20 colors/neutral-20
colors/neutral-70 colors/neutral-70
override-theme)}} theme)}}
(if (= size 16) (if (= size 16)
[quo2.icons/icon :i/more [quo2.icons/icon :i/more
{:size 12 {:size 12
@ -89,7 +90,7 @@
colors/white-opa-70 colors/white-opa-70
colors/neutral-50 colors/neutral-50
colors/neutral-40 colors/neutral-40
override-theme)}] theme)}]
[quo2.text/text [quo2.text/text
{:size (if (= size 32) :paragraph-2 :label) {:size (if (= size 32) :paragraph-2 :label)
:weight :medium :weight :medium
@ -98,7 +99,7 @@
colors/white-opa-70 colors/white-opa-70
colors/neutral-60 colors/neutral-60
colors/neutral-40 colors/neutral-40
override-theme) theme)
:margin-left -2}} :margin-left -2}}
;; If overflow label is below 100, show label as +label (ex. +30), else just show 99+ ;; If overflow label is below 100, show label as +label (ex. +30), else just show 99+
(if (< label 100) (if (< label 100)
@ -111,7 +112,7 @@
(:account :collectible :photo) :rounded (:account :collectible :photo) :rounded
:circular)) :circular))
(defn preview-list (defn- preview-list-internal
"[preview-list opts items] "[preview-list opts items]
opts opts
{:type :user/:community/:account/:token/:collectible/:dapp {:type :user/:community/:account/:token/:collectible/:dapp
@ -120,7 +121,7 @@
:transparent? overflow-label transparent?} :transparent? overflow-label transparent?}
items preview list items (only 4 items is required for preview) items preview list items (only 4 items is required for preview)
" "
[{:keys [type size list-size transparent? override-theme more-than-99-label]} items] [{:keys [type size list-size transparent? theme more-than-99-label]} items]
(let [items-arr (into [] items) (let [items-arr (into [] items)
list-size (or list-size (count items)) list-size (or list-size (count items))
margin-left (get-in params [size :margin-left]) margin-left (get-in params [size :margin-left])
@ -135,5 +136,13 @@
[list-item index type size (get items-arr index) list-size [list-item index type size (get items-arr index) list-size
margin-left hole-size hole-radius hole-x hole-y border-radius]) margin-left hole-size hole-radius hole-x hole-y border-radius])
(when (> list-size 4) (when (> list-size 4)
[overflow-label (- list-size 3) size transparent? border-radius margin-left override-theme [overflow-label
more-than-99-label])])) {:label (- list-size 3)
:size size
:transparent? transparent?
:border-radius border-radius
:margin-left margin-left
:theme theme
:more-than-99-label more-than-99-label}])]))
(def preview-list (quo.theme/with-theme preview-list-internal))

22
src/quo2/components/selectors/filter/style.cljs
View File

@ -10,8 +10,8 @@
:padding 6}) :padding 6})
(defn container-border-color (defn container-border-color
[pressed? blur? override-theme] [pressed? blur? theme]
(let [dark? (= :dark override-theme)] (let [dark? (= :dark theme)]
(cond (cond
(and (not pressed?) (not dark?) (not blur?)) (and (not pressed?) (not dark?) (not blur?))
colors/neutral-20 colors/neutral-20
@ -35,26 +35,24 @@
nil))) nil)))
(defn container-background-color (defn container-background-color
[pressed? override-theme] [pressed? theme]
(when pressed? (when pressed?
(if (= :dark override-theme) (colors/theme-colors colors/primary-50 colors/primary-60 theme)))
colors/primary-60
colors/primary-50)))
(defn container-outer (defn container-outer
[pressed? override-theme] [pressed? theme]
(merge container-default (merge container-default
{:background-color (container-background-color pressed? override-theme)})) {:background-color (container-background-color pressed? theme)}))
(defn container-inner (defn container-inner
[pressed? blur? override-theme] [pressed? blur? theme]
(merge container-default (merge container-default
{:border-width 1 {:border-width 1
:border-color (container-border-color pressed? blur? override-theme)})) :border-color (container-border-color pressed? blur? theme)}))
(defn icon-color (defn icon-color
[pressed? override-theme] [pressed? theme]
(if (and (not pressed?) (if (and (not pressed?)
(= :light override-theme)) (= :light theme))
colors/neutral-100 colors/neutral-100
colors/white)) colors/white))

15
src/quo2/components/selectors/filter/view.cljs
View File

@ -1,23 +1,24 @@
(ns quo2.components.selectors.filter.view (ns quo2.components.selectors.filter.view
(:require [quo2.components.icon :as icon] (:require [quo2.components.icon :as icon]
[quo2.components.selectors.filter.style :as style] [quo2.components.selectors.filter.style :as style]
[quo2.theme :as theme] [quo2.theme :as quo.theme]
[react-native.core :as rn] [react-native.core :as rn]
[reagent.core :as reagent])) [reagent.core :as reagent]))
(defn view (defn view-internal
[initial-props] [initial-props]
(let [pressed? (reagent/atom (:pressed? initial-props))] (let [pressed? (reagent/atom (:pressed? initial-props))]
(fn [{:keys [blur? override-theme on-press-out] (fn [{:keys [blur? theme on-press-out]}]
:or {override-theme (theme/get-theme)}}]
[rn/touchable-without-feedback [rn/touchable-without-feedback
{:accessibility-label :selector-filter {:accessibility-label :selector-filter
:on-press-out (fn [] :on-press-out (fn []
(swap! pressed? not) (swap! pressed? not)
(when on-press-out (when on-press-out
(on-press-out @pressed?)))} (on-press-out @pressed?)))}
[rn/view {:style (style/container-outer @pressed? override-theme)} [rn/view {:style (style/container-outer @pressed? theme)}
[rn/view {:style (style/container-inner @pressed? blur? override-theme)} [rn/view {:style (style/container-inner @pressed? blur? theme)}
[icon/icon :i/unread [icon/icon :i/unread
{:color (style/icon-color @pressed? override-theme) {:color (style/icon-color @pressed? theme)
:size 20}]]]]))) :size 20}]]]])))
(def view (quo.theme/with-theme view-internal))

13
src/quo2/components/tabs/segmented_tab.cljs
View File

@ -1,9 +1,9 @@
(ns quo2.components.tabs.segmented-tab (ns quo2.components.tabs.segmented-tab
(:require [quo2.components.tabs.tab.view :as tab] (:require [quo2.components.tabs.tab.view :as tab]
[quo2.foundations.colors :as colors] [quo2.foundations.colors :as colors]
[quo2.theme :as theme]
[react-native.core :as rn] [react-native.core :as rn]
[reagent.core :as reagent])) [reagent.core :as reagent]
[quo2.theme :as quo.theme]))
(def themes-for-blur (def themes-for-blur
{:light {:background-color colors/neutral-80-opa-5} {:light {:background-color colors/neutral-80-opa-5}
@ -13,17 +13,17 @@
{:light {:background-color colors/neutral-10} {:light {:background-color colors/neutral-10}
:dark {:background-color colors/neutral-90}}) :dark {:background-color colors/neutral-90}})
(defn segmented-control (defn- segmented-control-internal
[{:keys [default-active on-change]}] [{:keys [default-active on-change]}]
(let [active-tab-id (reagent/atom default-active)] (let [active-tab-id (reagent/atom default-active)]
(fn [{:keys [data size override-theme blur? container-style item-container-style (fn [{:keys [data size theme blur? container-style item-container-style
active-item-container-style]}] active-item-container-style]}]
(let [active-id @active-tab-id] (let [active-id @active-tab-id]
[rn/view [rn/view
(merge (merge
{:flex-direction :row {:flex-direction :row
:background-color (get-in (if blur? themes-for-blur themes) :background-color (get-in (if blur? themes-for-blur themes)
[(or override-theme (theme/get-theme)) :background-color]) [theme :background-color])
:border-radius (case size :border-radius (case size
32 10 32 10
28 8 28 8
@ -42,7 +42,6 @@
:item-container-style item-container-style :item-container-style item-container-style
:segmented? true :segmented? true
:size size :size size
:override-theme override-theme
:blur? blur? :blur? blur?
:active (= id active-id) :active (= id active-id)
:on-press (fn [tab-id] :on-press (fn [tab-id]
@ -50,3 +49,5 @@
(when on-change (when on-change
(on-change tab-id)))} (on-change tab-id)))}
label]])])))) label]])]))))
(def segmented-control (quo.theme/with-theme segmented-control-internal))

14
src/quo2/components/tags/status_tags.cljs
View File

@ -2,8 +2,8 @@
(:require [quo2.components.icon :as icon] (:require [quo2.components.icon :as icon]
[quo2.components.markdown.text :as text] [quo2.components.markdown.text :as text]
[quo2.foundations.colors :as colors] [quo2.foundations.colors :as colors]
[quo2.theme :as quo2.theme] [react-native.core :as rn]
[react-native.core :as rn])) [quo2.theme :as quo.theme]))
(def default-container-style (def default-container-style
{:border-radius 20 {:border-radius 20
@ -81,7 +81,7 @@
:border-color colors/danger-50-opa-20 :border-color colors/danger-50-opa-20
:label label :label label
;; The negative tag uses the same color for `dark` and `dark blur` variant ;; The negative tag uses the same color for `dark` and `dark blur` variant
:text-color (if (= theme :light) colors/danger-50 colors/danger-60)}]) :text-color (colors/theme-colors colors/danger-50 colors/danger-60 theme)}])
(defn- pending (defn- pending
[size theme label blur? no-icon?] [size theme label blur? no-icon?]
@ -104,8 +104,8 @@
colors/white-opa-70 colors/white-opa-70
(colors/theme-colors colors/neutral-50 colors/neutral-40 theme))}]) (colors/theme-colors colors/neutral-50 colors/neutral-40 theme))}])
(defn status-tag (defn- status-tag-internal
[{:keys [status size override-theme label blur? no-icon?]}] [{:keys [status size theme label blur? no-icon?]}]
(when status (when status
(when-let [status-component (case (:type status) (when-let [status-component (case (:type status)
:positive positive :positive positive
@ -114,7 +114,9 @@
nil)] nil)]
[status-component [status-component
size size
(or override-theme (quo2.theme/get-theme)) theme
label label
blur? blur?
no-icon?]))) no-icon?])))
(def status-tag (quo.theme/with-theme status-tag-internal))

56
src/quo2/core.cljs
View File

@ -98,30 +98,7 @@
quo2.components.tags.token-tag quo2.components.tags.token-tag
quo2.components.text-combinations.title.view)) quo2.components.text-combinations.title.view))
(def icon quo2.components.icon/icon)
(def separator quo2.components.common.separator.view/separator) (def separator quo2.components.common.separator.view/separator)
(def header quo2.components.header/header)
(def dropdown quo2.components.dropdowns.dropdown/dropdown)
(def info-message quo2.components.info.info-message/info-message)
(def information-box quo2.components.info.information-box.view/view)
(def gap quo2.components.messages.gap/gap)
(def system-message quo2.components.messages.system-message/system-message)
(def reaction quo2.components.reactions.reaction/reaction)
(def add-reaction quo2.components.reactions.reaction/add-reaction)
(def user-avatar-tag quo2.components.tags.context-tag.view/user-avatar-tag)
(def context-tag quo2.components.tags.context-tag.view/context-tag)
(def group-avatar-tag quo2.components.tags.context-tag.view/group-avatar-tag)
(def audio-tag quo2.components.tags.context-tag.view/audio-tag)
(def community-tag quo2.components.tags.context-tag.view/community-tag)
(def disclaimer quo2.components.selectors.disclaimer.view/view)
(def checkbox quo2.components.selectors.selectors.view/checkbox)
(def filter quo2.components.selectors.filter.view/view)
(def author quo2.components.messages.author.view/author)
;;;; SELECTORS
(def reactions quo2.components.selectors.reactions.view/view)
;;;; AVATAR ;;;; AVATAR
(def account-avatar quo2.components.avatars.account-avatar/account-avatar) (def account-avatar quo2.components.avatars.account-avatar/account-avatar)
@ -184,9 +161,22 @@
(def drawer-buttons quo2.components.drawers.drawer-buttons.view/view) (def drawer-buttons quo2.components.drawers.drawer-buttons.view/view)
(def permission-context quo2.components.drawers.permission-context.view/view) (def permission-context quo2.components.drawers.permission-context.view/view)
;;;; DROPDOWNS
(def dropdown quo2.components.dropdowns.dropdown/dropdown)
;;;; EMPTY STATE ;;;; EMPTY STATE
(def empty-state quo2.components.empty-state.empty-state.view/empty-state) (def empty-state quo2.components.empty-state.empty-state.view/empty-state)
;;;; HEADER
(def header quo2.components.header/header)
;;;; ICON
(def icon quo2.components.icon/icon)
;;;; INFO
(def info-message quo2.components.info.info-message/info-message)
(def information-box quo2.components.info.information-box.view/view)
;;;; INPUTS ;;;; INPUTS
(def input quo2.components.inputs.input.view/input) (def input quo2.components.inputs.input.view/input)
(def profile-input quo2.components.inputs.profile-input.view/profile-input) (def profile-input quo2.components.inputs.profile-input.view/profile-input)
@ -213,6 +203,10 @@
(def markdown-list quo2.components.markdown.list.view/view) (def markdown-list quo2.components.markdown.list.view/view)
(def text quo2.components.markdown.text/text) (def text quo2.components.markdown.text/text)
;;;; MESSAGES
(def gap quo2.components.messages.gap/gap)
(def system-message quo2.components.messages.system-message/system-message)
;;;; NOTIFICATIONS ;;;; NOTIFICATIONS
(def activity-log quo2.components.notifications.activity-log.view/view) (def activity-log quo2.components.notifications.activity-log.view/view)
(def activity-logs-photos quo2.components.notifications.activity-logs-photos.view/view) (def activity-logs-photos quo2.components.notifications.activity-logs-photos.view/view)
@ -229,10 +223,21 @@
(def profile-card quo2.components.profile.profile-card.view/profile-card) (def profile-card quo2.components.profile.profile-card.view/profile-card)
(def select-profile quo2.components.profile.select-profile.view/view) (def select-profile quo2.components.profile.select-profile.view/view)
;;;; REACTIONS
(def reaction quo2.components.reactions.reaction/reaction)
(def add-reaction quo2.components.reactions.reaction/add-reaction)
;;;; RECORD AUDIO ;;;; RECORD AUDIO
(def record-audio quo2.components.record-audio.record-audio.view/record-audio) (def record-audio quo2.components.record-audio.record-audio.view/record-audio)
(def soundtrack quo2.components.record-audio.soundtrack.view/f-soundtrack) (def soundtrack quo2.components.record-audio.soundtrack.view/f-soundtrack)
;;;; SELECTORS
(def author quo2.components.messages.author.view/author)
(def disclaimer quo2.components.selectors.disclaimer.view/view)
(def filter quo2.components.selectors.filter.view/view)
(def reactions quo2.components.selectors.reactions.view/view)
(def checkbox quo2.components.selectors.selectors.view/checkbox)
;;;; SETTINGS ;;;; SETTINGS
(def privacy-option quo2.components.settings.privacy-option/card) (def privacy-option quo2.components.settings.privacy-option/card)
(def account quo2.components.settings.accounts.view/account) (def account quo2.components.settings.accounts.view/account)
@ -255,6 +260,11 @@
(def permission-tag quo2.components.tags.permission-tag/tag) (def permission-tag quo2.components.tags.permission-tag/tag)
(def status-tag quo2.components.tags.status-tags/status-tag) (def status-tag quo2.components.tags.status-tags/status-tag)
(def token-tag quo2.components.tags.token-tag/tag) (def token-tag quo2.components.tags.token-tag/tag)
(def user-avatar-tag quo2.components.tags.context-tag.view/user-avatar-tag)
(def context-tag quo2.components.tags.context-tag.view/context-tag)
(def group-avatar-tag quo2.components.tags.context-tag.view/group-avatar-tag)
(def audio-tag quo2.components.tags.context-tag.view/audio-tag)
(def community-tag quo2.components.tags.context-tag.view/community-tag)
;;;; TITLE ;;;; TITLE
(def title quo2.components.text-combinations.title.view/title) (def title quo2.components.text-combinations.title.view/title)

1
src/status_im2/contexts/onboarding/identifiers/profile_card/view.cljs
View File

@ -31,7 +31,6 @@
[quo/user-avatar [quo/user-avatar
{:full-name name {:full-name name
:profile-picture profile-picture :profile-picture profile-picture
:override-theme :dark
:size :medium :size :medium
:status-indicator? false :status-indicator? false
:customization-color customization-color}]] :customization-color customization-color}]]

8
src/status_im2/contexts/quo_preview/inputs/input.cljs
View File

@ -17,13 +17,6 @@
{:label "Blur:" {:label "Blur:"
:key :blur? :key :blur?
:type :boolean} :type :boolean}
{:label "Override Theme:"
:key :override-theme
:type :select
:options [{:key :dark
:value "Dark"}
{:key :light
:value "Light"}]}
{:label "Error:" {:label "Error:"
:key :error? :key :error?
:type :boolean} :type :boolean}
@ -65,7 +58,6 @@
[] []
(let [state (reagent/atom {:type :text (let [state (reagent/atom {:type :text
:blur false :blur false
:override-theme nil
:placeholder "Type something" :placeholder "Type something"
:error false :error false
:icon-name false :icon-name false

9
src/status_im2/contexts/quo_preview/notifications/activity_logs.cljs
View File

@ -77,11 +77,10 @@
"did something here."]) "did something here."])
(def complex-user-action (def complex-user-action
(let [tag-props {:color :purple (let [tag-props {:color :purple
:override-theme :dark :size :small
:size :small :style {:background-color colors/white-opa-10}
:style {:background-color colors/white-opa-10} :text-style {:color colors/white}}]
:text-style {:color colors/white}}]
[[quo2/user-avatar-tag tag-props "Alice"] [[quo2/user-avatar-tag tag-props "Alice"]
"from" "from"
[quo2/user-avatar-tag tag-props "Mainnet"] [quo2/user-avatar-tag tag-props "Mainnet"]

13
src/status_im2/contexts/shell/activity_center/header/view.cljs
View File

@ -11,13 +11,12 @@
[] []
(let [unread-filter-enabled? (rf/sub [:activity-center/filter-status-unread-enabled?])] (let [unread-filter-enabled? (rf/sub [:activity-center/filter-status-unread-enabled?])]
[quo/filter [quo/filter
{:pressed? unread-filter-enabled? {:pressed? unread-filter-enabled?
:blur? true :blur? true
:override-theme :dark :on-press-out #(rf/dispatch [:activity-center.notifications/fetch-first-page
:on-press-out #(rf/dispatch [:activity-center.notifications/fetch-first-page {:filter-status (if unread-filter-enabled?
{:filter-status (if unread-filter-enabled? :all
:all :unread)}])}]))
:unread)}])}]))
(defn header (defn header
[] []

10
src/status_im2/contexts/shell/activity_center/notification/common/view.cljs
View File

@ -10,7 +10,6 @@
(def tag-params (def tag-params
{:size :small {:size :small
:override-theme :dark
:color colors/primary-50 :color colors/primary-50
:style style/user-avatar-tag :style style/user-avatar-tag
:text-style style/user-avatar-tag-text :text-style style/user-avatar-tag-text
@ -20,11 +19,10 @@
[user-id] [user-id]
(let [{:keys [primary-name] :as contact} (rf/sub [:contacts/contact-by-identity user-id])] (let [{:keys [primary-name] :as contact} (rf/sub [:contacts/contact-by-identity user-id])]
[quo/user-avatar-tag [quo/user-avatar-tag
{:color :purple {:color :purple
:override-theme :dark :size :small
:size :small :style style/user-avatar-tag
:style style/user-avatar-tag :text-style style/user-avatar-tag-text}
:text-style style/user-avatar-tag-text}
primary-name primary-name
(multiaccounts/displayed-photo contact)])) (multiaccounts/displayed-photo contact)]))

29
src/status_im2/contexts/shell/jump_to/components/switcher_cards/view.cljs
View File

@ -38,15 +38,13 @@
shell.constants/community-card shell.constants/community-card
(case (:type community-info) (case (:type community-info)
:pending [quo/status-tag :pending [quo/status-tag
{:status {:type :pending} {:status {:type :pending}
:label (i18n/label :t/pending) :label (i18n/label :t/pending)
:size :small :size :small}]
:override-theme :dark}]
:kicked [quo/status-tag :kicked [quo/status-tag
{:status {:type :negative} {:status {:type :negative}
:size :small :size :small
:override-theme :dark :label (i18n/label :t/kicked)}]
:label (i18n/label :t/kicked)}]
(:count :permission) [:<>] ;; Add components for these cases (:count :permission) [:<>] ;; Add components for these cases
nil) nil)
@ -69,8 +67,8 @@
[quo/preview-list [quo/preview-list
{:type :photo {:type :photo
:more-than-99-label (i18n/label :counter-99-plus) :more-than-99-label (i18n/label :counter-99-plus)
:size 24 :size 24}
:override-theme :dark} data] data]
constants/content-type-sticker constants/content-type-sticker
[fast-image/fast-image [fast-image/fast-image
@ -262,12 +260,11 @@
[rn/view {:style style/avatar-container} [rn/view {:style style/avatar-container}
[avatar avatar-params type customization-color]]) [avatar avatar-params type customization-color]])
[quo/button [quo/button
{:size 24 {:size 24
:type :grey :type :grey
:icon true :icon true
:on-press #(rf/dispatch [:shell/close-switcher-card id]) :on-press #(rf/dispatch [:shell/close-switcher-card id])
:override-theme :dark :style style/close-button}
:style style/close-button}
:i/close]]])))) :i/close]]]))))
;; browser Card ;; browser Card

4
src/status_im2/contexts/shell/share/view.cljs
View File

@ -21,7 +21,6 @@
:type :blur-bg :type :blur-bg
:size 32 :size 32
:accessibility-label :close-shell-share-tab :accessibility-label :close-shell-share-tab
:override-theme :dark
:style style/header-button :style style/header-button
:on-press #(rf/dispatch [:navigate-back])} :on-press #(rf/dispatch [:navigate-back])}
:i/close] :i/close]
@ -84,7 +83,6 @@
:type :blur-bg :type :blur-bg
:size 32 :size 32
:accessibility-label :link-to-profile :accessibility-label :link-to-profile
:override-theme :dark
:on-press #(list-selection/open-share {:message profile-url})} :on-press #(list-selection/open-share {:message profile-url})}
:i/share]]]] :i/share]]]]
@ -113,7 +111,6 @@
:type :blur-bg :type :blur-bg
:size 32 :size 32
:accessibility-label :link-to-profile :accessibility-label :link-to-profile
:override-theme :dark
:style {:margin-right 12} :style {:margin-right 12}
:on-press #(rf/dispatch [:share/copy-text-and-show-toast :on-press #(rf/dispatch [:share/copy-text-and-show-toast
{:text-to-copy emoji-hash-string {:text-to-copy emoji-hash-string
@ -137,7 +134,6 @@
[quo/segmented-control [quo/segmented-control
{:size 28 {:size 28
:blur? true :blur? true
:override-theme :dark
:on-change #(reset! selected-tab %) :on-change #(reset! selected-tab %)
:default-active :profile :default-active :profile
:data [{:id :profile :data [{:id :profile

4
src/status_im2/contexts/syncing/scan_sync_code/view.cljs
View File

@ -54,7 +54,6 @@
:type :blur-bg :type :blur-bg
:size 32 :size 32
:accessibility-label :close-sign-in-by-syncing :accessibility-label :close-sign-in-by-syncing
:override-theme :dark
:on-press (fn [] :on-press (fn []
(if (and animated? reset-animations-fn) (if (and animated? reset-animations-fn)
(reset-animations-fn) (reset-animations-fn)
@ -70,7 +69,6 @@
:type :blur-bg :type :blur-bg
:size 32 :size 32
:accessibility-label :find-sync-code :accessibility-label :find-sync-code
:override-theme :dark
:on-press #(rf/dispatch [:open-modal :find-sync-code])} :on-press #(rf/dispatch [:open-modal :find-sync-code])}
(i18n/label :t/find-sync-code)]]] (i18n/label :t/find-sync-code)]]]
[reanimated/view [reanimated/view
@ -101,7 +99,6 @@
style/tabs-container)} style/tabs-container)}
[quo/segmented-control [quo/segmented-control
{:size 32 {:size 32
:override-theme :dark
:blur? true :blur? true
:default-active @active-tab :default-active @active-tab
:data [{:id 1 :label (i18n/label :t/scan-sync-qr-code)} :data [{:id 1 :label (i18n/label :t/scan-sync-qr-code)}
@ -151,7 +148,6 @@
:type :primary :type :primary
:size 32 :size 32
:accessibility-label accessibility-label :accessibility-label accessibility-label
:override-theme :dark
:customization-color :blue :customization-color :blue
:on-press on-press} :on-press on-press}
(i18n/label button-label)]])) (i18n/label button-label)]]))

1
src/status_im2/contexts/syncing/setup_syncing/view.cljs
View File

@ -115,7 +115,6 @@
[quo/input [quo/input
{:default-value @code {:default-value @code
:type :password :type :password
:override-theme :dark
:default-shown? true :default-shown? true
:editable false}] :editable false}]
[quo/button [quo/button

17
src/status_im2/contexts/syncing/syncing_instructions/view.cljs
View File

@ -26,19 +26,17 @@
:button-grey :button-grey
[quo/button [quo/button
{:type :grey {:type :grey
:override-theme :dark :size 24
:size 24 :style style/button-grey}
:style style/button-grey}
(i18n/label value)] (i18n/label value)]
:button-grey-placeholder :button-grey-placeholder
[quo/button [quo/button
{:type :grey {:type :grey
:override-theme :dark :size 24
:size 24 :before :i/placeholder
:before :i/placeholder :style style/button-grey-placeholder}
:style style/button-grey-placeholder}
(i18n/label value)] (i18n/label value)]
:context-tag :context-tag
@ -111,7 +109,6 @@
[rn/view {:style style/tabs-container} [rn/view {:style style/tabs-container}
[quo/segmented-control [quo/segmented-control
{:size 28 {:size 28
:override-theme :dark
:blur? true :blur? true
:default-active :mobile :default-active :mobile
:data platform-data :data platform-data

6
src/status_im2/navigation/screens.cljs
View File

@ -88,13 +88,11 @@
:component add-new-contact/new-contact} :component add-new-contact/new-contact}
{:name :how-to-pair {:name :how-to-pair
:options {:theme :dark :options (assoc options/dark-screen :sheet? true)
:sheet? true}
:component how-to-pair/view} :component how-to-pair/view}
{:name :find-sync-code {:name :find-sync-code
:options {:theme :dark :options (assoc options/dark-screen :sheet? true)
:sheet? true}
:component find-sync-code/view} :component find-sync-code/view}
{:name :discover-communities {:name :discover-communities