chore: remove uses of override theme prop (#16570)
This commit is contained in:
Jamie Caprani
GitHub
parent
43cba161d6
commit
a8303dbe50
|
|
@ -15,7 +15,7 @@
|
|||
:margin-bottom (+ (safe-area/get-bottom) 8)})
|
||||
|
||||
(defn title
|
||||
[shell?]
|
||||
[theme]
|
||||
{:color (colors/theme-colors colors/neutral-100
|
||||
colors/white
|
||||
(when shell? :dark))})
|
||||
theme)})
|
||||
|
|
|
|||
|
|
@ -3,9 +3,10 @@
|
|||
[quo2.components.drawers.documentation-drawers.style :as style]
|
||||
[quo2.components.markdown.text :as text]
|
||||
[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
|
||||
- `title` Title text
|
||||
- `show-button?` Show button
|
||||
|
|
@ -15,7 +16,7 @@
|
|||
- `shell?` use shell theme
|
||||
`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
|
||||
{:style style/outer-container
|
||||
:always-bounce-vertical false
|
||||
|
|
@ -24,18 +25,18 @@
|
|||
[text/text
|
||||
{:size :heading-2
|
||||
:accessibility-label :documentation-drawer-title
|
||||
:style (style/title shell?)
|
||||
:style (style/title theme)
|
||||
:weight :semi-bold}
|
||||
title]
|
||||
[rn/view {:style style/content :accessibility-label :documentation-drawer-content}
|
||||
content]
|
||||
(when show-button?
|
||||
[button/button
|
||||
(cond-> {:size 24
|
||||
:type (if shell? :blur-bg-outline :outline)
|
||||
:on-press on-press-button
|
||||
:accessibility-label :documentation-drawer-button
|
||||
:after button-icon}
|
||||
shell? (assoc :override-theme :dark))
|
||||
{:size 24
|
||||
:type (if shell? :blur-bg-outline :outline)
|
||||
:on-press on-press-button
|
||||
:accessibility-label :documentation-drawer-button
|
||||
:after button-icon}
|
||||
button-label])]])
|
||||
|
||||
(def view (quo.theme/with-theme view-internal))
|
||||
|
|
|
|||
|
|
@ -3,62 +3,62 @@
|
|||
[quo2.foundations.colors :as colors]))
|
||||
|
||||
(defn variants-colors
|
||||
[blur? override-theme]
|
||||
[blur? theme]
|
||||
(if blur?
|
||||
{:label (colors/theme-colors colors/neutral-80-opa-40 colors/white-opa-40 override-theme)
|
||||
:icon (colors/theme-colors colors/neutral-80-opa-70 colors/white-opa-70 override-theme)
|
||||
:button-border (colors/theme-colors colors/neutral-80-opa-30 colors/white-opa-10 override-theme)
|
||||
:password-icon (colors/theme-colors colors/neutral-100 colors/white-opa-70 override-theme)
|
||||
:clear-icon (colors/theme-colors colors/neutral-80-opa-30 colors/white-opa-10 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 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 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)
|
||||
colors/white
|
||||
override-theme)}
|
||||
{:label (colors/theme-colors colors/neutral-50 colors/neutral-40 override-theme)
|
||||
:icon (colors/theme-colors colors/neutral-50 colors/neutral-40 override-theme)
|
||||
:button-border (colors/theme-colors colors/neutral-30 colors/neutral-70 override-theme)
|
||||
:clear-icon (colors/theme-colors colors/neutral-40 colors/neutral-60 override-theme)
|
||||
:password-icon (colors/theme-colors colors/neutral-50 colors/white override-theme)
|
||||
theme)}
|
||||
{:label (colors/theme-colors colors/neutral-50 colors/neutral-40 theme)
|
||||
:icon (colors/theme-colors colors/neutral-50 colors/neutral-40 theme)
|
||||
:button-border (colors/theme-colors colors/neutral-30 colors/neutral-70 theme)
|
||||
:clear-icon (colors/theme-colors colors/neutral-40 colors/neutral-60 theme)
|
||||
:password-icon (colors/theme-colors colors/neutral-50 colors/white theme)
|
||||
:cursor (colors/theme-colors (colors/custom-color :blue 50)
|
||||
(colors/custom-color :blue 60)
|
||||
override-theme)}))
|
||||
theme)}))
|
||||
|
||||
(defn status-colors
|
||||
[status blur? override-theme]
|
||||
[status blur? theme]
|
||||
(if blur?
|
||||
(case status
|
||||
:focus
|
||||
{:border-color (colors/theme-colors colors/neutral-80-opa-20 colors/white-opa-40 override-theme)
|
||||
:placeholder (colors/theme-colors colors/neutral-80-opa-20 colors/white-opa-20 override-theme)
|
||||
:text (colors/theme-colors colors/neutral-100 colors/white 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 theme)
|
||||
:text (colors/theme-colors colors/neutral-100 colors/white theme)}
|
||||
:error
|
||||
{:border-color (colors/theme-colors colors/danger-opa-40 colors/danger-opa-40 override-theme)
|
||||
:placeholder (colors/theme-colors colors/neutral-80-opa-40 colors/white-opa-40 override-theme)
|
||||
:text (colors/theme-colors colors/neutral-100 colors/white 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 theme)
|
||||
:text (colors/theme-colors colors/neutral-100 colors/white theme)}
|
||||
:disabled
|
||||
{:border-color (colors/theme-colors colors/neutral-80-opa-10 colors/white-opa-10 override-theme)
|
||||
:placeholder (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 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 theme)
|
||||
:text (colors/theme-colors colors/neutral-80-opa-30 colors/white-opa-20 theme)}
|
||||
;; :default
|
||||
{:border-color (colors/theme-colors colors/neutral-80-opa-10 colors/white-opa-10 override-theme)
|
||||
:placeholder (colors/theme-colors colors/neutral-80-opa-40 colors/white-opa-40 override-theme)
|
||||
:text (colors/theme-colors colors/neutral-100 colors/white 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 theme)
|
||||
:text (colors/theme-colors colors/neutral-100 colors/white theme)})
|
||||
(case status
|
||||
:focus
|
||||
{:border-color (colors/theme-colors colors/neutral-40 colors/neutral-60 override-theme)
|
||||
:placeholder (colors/theme-colors colors/neutral-30 colors/neutral-60 override-theme)
|
||||
:text (colors/theme-colors colors/neutral-100 colors/white override-theme)}
|
||||
{:border-color (colors/theme-colors colors/neutral-40 colors/neutral-60 theme)
|
||||
:placeholder (colors/theme-colors colors/neutral-30 colors/neutral-60 theme)
|
||||
:text (colors/theme-colors colors/neutral-100 colors/white theme)}
|
||||
:error
|
||||
{:border-color (colors/theme-colors colors/danger-opa-40 colors/danger-opa-40 override-theme)
|
||||
:placeholder (colors/theme-colors colors/neutral-40 colors/white-opa-40 override-theme)
|
||||
:text (colors/theme-colors colors/neutral-100 colors/white 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 theme)
|
||||
:text (colors/theme-colors colors/neutral-100 colors/white theme)}
|
||||
:disabled
|
||||
{:border-color (colors/theme-colors colors/neutral-20 colors/neutral-80 override-theme)
|
||||
:placeholder (colors/theme-colors colors/neutral-40 colors/neutral-40 override-theme)
|
||||
:text (colors/theme-colors colors/neutral-40 colors/neutral-40 override-theme)}
|
||||
{:border-color (colors/theme-colors colors/neutral-20 colors/neutral-80 theme)
|
||||
:placeholder (colors/theme-colors colors/neutral-40 colors/neutral-40 theme)
|
||||
:text (colors/theme-colors colors/neutral-40 colors/neutral-40 theme)}
|
||||
;; :default
|
||||
{:border-color (colors/theme-colors colors/neutral-20 colors/neutral-80 override-theme)
|
||||
:placeholder (colors/theme-colors colors/neutral-40 colors/neutral-50 override-theme)
|
||||
:text (colors/theme-colors colors/neutral-100 colors/white override-theme)})))
|
||||
{:border-color (colors/theme-colors colors/neutral-20 colors/neutral-80 theme)
|
||||
:placeholder (colors/theme-colors colors/neutral-40 colors/neutral-50 theme)
|
||||
:text (colors/theme-colors colors/neutral-100 colors/white theme)})))
|
||||
|
||||
(defn input-container
|
||||
[colors-by-status small? disabled?]
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@
|
|||
[quo2.components.markdown.text :as text]
|
||||
[react-native.core :as rn]
|
||||
[reagent.core :as reagent]
|
||||
[quo2.theme :as theme]))
|
||||
[quo2.theme :as quo.theme]))
|
||||
|
||||
(defn- label-&-counter
|
||||
[{:keys [label current-chars char-limit variant-colors]}]
|
||||
|
|
@ -54,7 +54,7 @@
|
|||
|
||||
(def ^:private custom-props
|
||||
"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])
|
||||
|
||||
(defn- base-input
|
||||
|
|
@ -74,15 +74,15 @@
|
|||
(reset! char-count amount-chars)
|
||||
(when (>= amount-chars char-limit)
|
||||
(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]
|
||||
:as props}]
|
||||
(let [status-kw (cond
|
||||
disabled? :disabled
|
||||
error? :error
|
||||
:else @status)
|
||||
colors-by-status (style/status-colors status-kw blur? override-theme)
|
||||
variant-colors (style/variants-colors blur? override-theme)
|
||||
colors-by-status (style/status-colors status-kw blur? theme)
|
||||
variant-colors (style/variants-colors blur? theme)
|
||||
clean-props (apply dissoc props custom-props)]
|
||||
[:<>
|
||||
(when (or label char-limit)
|
||||
|
|
@ -101,7 +101,7 @@
|
|||
(cond-> {:style (style/input colors-by-status small? @multiple-lines?)
|
||||
:accessibility-label :input
|
||||
: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)
|
||||
:editable (not disabled?)
|
||||
:on-focus (fn []
|
||||
|
|
@ -148,11 +148,11 @@
|
|||
:icon-name (if @password-shown? :i/hide :i/reveal)
|
||||
:on-press #(swap! password-shown? not)})])))
|
||||
|
||||
(defn input
|
||||
(defn input-internal
|
||||
"This input supports the following properties:
|
||||
- :type - Can be `:text`(default) or `:password`.
|
||||
- :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.
|
||||
- :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.
|
||||
|
|
@ -188,3 +188,5 @@
|
|||
(if (= type :password)
|
||||
[password-input base-props]
|
||||
[base-input base-props])))
|
||||
|
||||
(def input (quo.theme/with-theme input-internal))
|
||||
|
|
|
|||
|
|
@ -17,29 +17,29 @@
|
|||
:text-align-vertical :top))
|
||||
|
||||
(defn placeholder-color
|
||||
[input-state override-theme blur?]
|
||||
[input-state theme blur?]
|
||||
(cond
|
||||
(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
|
||||
(colors/theme-colors colors/neutral-30 colors/neutral-60 override-theme)
|
||||
(colors/theme-colors colors/neutral-30 colors/neutral-60 theme)
|
||||
|
||||
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
|
||||
(colors/theme-colors colors/neutral-40 colors/neutral-50 override-theme)))
|
||||
(colors/theme-colors colors/neutral-40 colors/neutral-50 theme)))
|
||||
|
||||
(defn cursor-color
|
||||
[customization-color override-theme]
|
||||
[customization-color theme]
|
||||
(colors/theme-colors (colors/custom-color customization-color 50)
|
||||
(colors/custom-color customization-color 60)
|
||||
override-theme))
|
||||
theme))
|
||||
|
||||
(defn error-word
|
||||
[]
|
||||
[theme]
|
||||
{:height 22
|
||||
:padding-horizontal 20
|
||||
: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)})
|
||||
|
|
|
|||
|
|
@ -3,19 +3,19 @@
|
|||
[quo2.components.inputs.recovery-phrase.style :as style]
|
||||
[react-native.core :as rn]
|
||||
[reagent.core :as reagent]
|
||||
[quo2.theme :as theme]))
|
||||
[quo2.theme :as quo.theme]))
|
||||
|
||||
(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])
|
||||
|
||||
(defn- error-word
|
||||
[text]
|
||||
[rn/text {:style (style/error-word)}
|
||||
[text theme]
|
||||
[rn/text {:style (style/error-word theme)}
|
||||
text])
|
||||
|
||||
(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+")))
|
||||
words (map #(apply str %)
|
||||
(partition-by #(= " " %) text))]
|
||||
|
|
@ -31,18 +31,18 @@
|
|||
:always (update :result
|
||||
conj
|
||||
(if invalid-word?
|
||||
[error-word word]
|
||||
[error-word word theme]
|
||||
word)))))
|
||||
{:result [:<>]
|
||||
:idx 0})
|
||||
:result)))
|
||||
|
||||
(defn recovery-phrase-input
|
||||
(defn recovery-phrase-input-internal
|
||||
[_ _]
|
||||
(let [state (reagent/atom :default)
|
||||
set-focused #(reset! state :focused)
|
||||
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]
|
||||
:or {customization-color :blue
|
||||
word-limit ##Inf
|
||||
|
|
@ -55,9 +55,9 @@
|
|||
[rn/text-input
|
||||
(merge {:accessibility-label :recovery-phrase-input
|
||||
:style (style/input)
|
||||
:placeholder-text-color (style/placeholder-color @state override-theme blur?)
|
||||
:cursor-color (style/cursor-color customization-color override-theme)
|
||||
:keyboard-appearance (theme/theme-value :light :dark override-theme)
|
||||
:placeholder-text-color (style/placeholder-color @state theme blur?)
|
||||
:cursor-color (style/cursor-color customization-color theme)
|
||||
:keyboard-appearance (quo.theme/theme-value :light :dark theme)
|
||||
:multiline true
|
||||
:on-focus (fn []
|
||||
(set-focused)
|
||||
|
|
@ -67,5 +67,11 @@
|
|||
(when on-blur (on-blur)))}
|
||||
extra-props)
|
||||
(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)]]))))
|
||||
|
||||
(def recovery-phrase-input (quo.theme/with-theme recovery-phrase-input-internal))
|
||||
|
|
|
|||
|
|
@ -5,7 +5,8 @@
|
|||
[quo2.foundations.colors :as colors]
|
||||
[react-native.core :as rn]
|
||||
[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
|
||||
{32 {:border-radius {:circular 16 :rounded 10}
|
||||
|
|
@ -61,13 +62,13 @@
|
|||
[avatar item type size border-radius]]))
|
||||
|
||||
(defn get-overflow-color
|
||||
[transparent? transparent-color light-color dark-color override-theme]
|
||||
[transparent? transparent-color light-color dark-color theme]
|
||||
(if transparent?
|
||||
transparent-color
|
||||
(colors/theme-colors light-color dark-color override-theme)))
|
||||
(colors/theme-colors light-color dark-color theme)))
|
||||
|
||||
(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
|
||||
{:style {:width size
|
||||
:height size
|
||||
|
|
@ -80,7 +81,7 @@
|
|||
colors/white-opa-10
|
||||
colors/neutral-20
|
||||
colors/neutral-70
|
||||
override-theme)}}
|
||||
theme)}}
|
||||
(if (= size 16)
|
||||
[quo2.icons/icon :i/more
|
||||
{:size 12
|
||||
|
|
@ -89,7 +90,7 @@
|
|||
colors/white-opa-70
|
||||
colors/neutral-50
|
||||
colors/neutral-40
|
||||
override-theme)}]
|
||||
theme)}]
|
||||
[quo2.text/text
|
||||
{:size (if (= size 32) :paragraph-2 :label)
|
||||
:weight :medium
|
||||
|
|
@ -98,7 +99,7 @@
|
|||
colors/white-opa-70
|
||||
colors/neutral-60
|
||||
colors/neutral-40
|
||||
override-theme)
|
||||
theme)
|
||||
:margin-left -2}}
|
||||
;; If overflow label is below 100, show label as +label (ex. +30), else just show 99+
|
||||
(if (< label 100)
|
||||
|
|
@ -111,7 +112,7 @@
|
|||
(:account :collectible :photo) :rounded
|
||||
:circular))
|
||||
|
||||
(defn preview-list
|
||||
(defn- preview-list-internal
|
||||
"[preview-list opts items]
|
||||
opts
|
||||
{:type :user/:community/:account/:token/:collectible/:dapp
|
||||
|
|
@ -120,7 +121,7 @@
|
|||
:transparent? overflow-label transparent?}
|
||||
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)
|
||||
list-size (or list-size (count items))
|
||||
margin-left (get-in params [size :margin-left])
|
||||
|
|
@ -135,5 +136,13 @@
|
|||
[list-item index type size (get items-arr index) list-size
|
||||
margin-left hole-size hole-radius hole-x hole-y border-radius])
|
||||
(when (> list-size 4)
|
||||
[overflow-label (- list-size 3) size transparent? border-radius margin-left override-theme
|
||||
more-than-99-label])]))
|
||||
[overflow-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))
|
||||
|
|
|
|||
|
|
@ -10,8 +10,8 @@
|
|||
:padding 6})
|
||||
|
||||
(defn container-border-color
|
||||
[pressed? blur? override-theme]
|
||||
(let [dark? (= :dark override-theme)]
|
||||
[pressed? blur? theme]
|
||||
(let [dark? (= :dark theme)]
|
||||
(cond
|
||||
(and (not pressed?) (not dark?) (not blur?))
|
||||
colors/neutral-20
|
||||
|
|
@ -35,26 +35,24 @@
|
|||
nil)))
|
||||
|
||||
(defn container-background-color
|
||||
[pressed? override-theme]
|
||||
[pressed? theme]
|
||||
(when pressed?
|
||||
(if (= :dark override-theme)
|
||||
colors/primary-60
|
||||
colors/primary-50)))
|
||||
(colors/theme-colors colors/primary-50 colors/primary-60 theme)))
|
||||
|
||||
(defn container-outer
|
||||
[pressed? override-theme]
|
||||
[pressed? theme]
|
||||
(merge container-default
|
||||
{:background-color (container-background-color pressed? override-theme)}))
|
||||
{:background-color (container-background-color pressed? theme)}))
|
||||
|
||||
(defn container-inner
|
||||
[pressed? blur? override-theme]
|
||||
[pressed? blur? theme]
|
||||
(merge container-default
|
||||
{:border-width 1
|
||||
:border-color (container-border-color pressed? blur? override-theme)}))
|
||||
:border-color (container-border-color pressed? blur? theme)}))
|
||||
|
||||
(defn icon-color
|
||||
[pressed? override-theme]
|
||||
[pressed? theme]
|
||||
(if (and (not pressed?)
|
||||
(= :light override-theme))
|
||||
(= :light theme))
|
||||
colors/neutral-100
|
||||
colors/white))
|
||||
|
|
|
|||
|
|
@ -1,23 +1,24 @@
|
|||
(ns quo2.components.selectors.filter.view
|
||||
(:require [quo2.components.icon :as icon]
|
||||
[quo2.components.selectors.filter.style :as style]
|
||||
[quo2.theme :as theme]
|
||||
[quo2.theme :as quo.theme]
|
||||
[react-native.core :as rn]
|
||||
[reagent.core :as reagent]))
|
||||
|
||||
(defn view
|
||||
(defn view-internal
|
||||
[initial-props]
|
||||
(let [pressed? (reagent/atom (:pressed? initial-props))]
|
||||
(fn [{:keys [blur? override-theme on-press-out]
|
||||
:or {override-theme (theme/get-theme)}}]
|
||||
(fn [{:keys [blur? theme on-press-out]}]
|
||||
[rn/touchable-without-feedback
|
||||
{:accessibility-label :selector-filter
|
||||
:on-press-out (fn []
|
||||
(swap! pressed? not)
|
||||
(when on-press-out
|
||||
(on-press-out @pressed?)))}
|
||||
[rn/view {:style (style/container-outer @pressed? override-theme)}
|
||||
[rn/view {:style (style/container-inner @pressed? blur? override-theme)}
|
||||
[rn/view {:style (style/container-outer @pressed? theme)}
|
||||
[rn/view {:style (style/container-inner @pressed? blur? theme)}
|
||||
[icon/icon :i/unread
|
||||
{:color (style/icon-color @pressed? override-theme)
|
||||
{:color (style/icon-color @pressed? theme)
|
||||
:size 20}]]]])))
|
||||
|
||||
(def view (quo.theme/with-theme view-internal))
|
||||
|
|
|
|||
|
|
@ -1,9 +1,9 @@
|
|||
(ns quo2.components.tabs.segmented-tab
|
||||
(:require [quo2.components.tabs.tab.view :as tab]
|
||||
[quo2.foundations.colors :as colors]
|
||||
[quo2.theme :as theme]
|
||||
[react-native.core :as rn]
|
||||
[reagent.core :as reagent]))
|
||||
[reagent.core :as reagent]
|
||||
[quo2.theme :as quo.theme]))
|
||||
|
||||
(def themes-for-blur
|
||||
{:light {:background-color colors/neutral-80-opa-5}
|
||||
|
|
@ -13,17 +13,17 @@
|
|||
{:light {:background-color colors/neutral-10}
|
||||
:dark {:background-color colors/neutral-90}})
|
||||
|
||||
(defn segmented-control
|
||||
(defn- segmented-control-internal
|
||||
[{:keys [default-active on-change]}]
|
||||
(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]}]
|
||||
(let [active-id @active-tab-id]
|
||||
[rn/view
|
||||
(merge
|
||||
{:flex-direction :row
|
||||
: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
|
||||
32 10
|
||||
28 8
|
||||
|
|
@ -42,7 +42,6 @@
|
|||
:item-container-style item-container-style
|
||||
:segmented? true
|
||||
:size size
|
||||
:override-theme override-theme
|
||||
:blur? blur?
|
||||
:active (= id active-id)
|
||||
:on-press (fn [tab-id]
|
||||
|
|
@ -50,3 +49,5 @@
|
|||
(when on-change
|
||||
(on-change tab-id)))}
|
||||
label]])]))))
|
||||
|
||||
(def segmented-control (quo.theme/with-theme segmented-control-internal))
|
||||
|
|
|
|||
|
|
@ -2,8 +2,8 @@
|
|||
(:require [quo2.components.icon :as icon]
|
||||
[quo2.components.markdown.text :as text]
|
||||
[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
|
||||
{:border-radius 20
|
||||
|
|
@ -81,7 +81,7 @@
|
|||
:border-color colors/danger-50-opa-20
|
||||
:label label
|
||||
;; 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
|
||||
[size theme label blur? no-icon?]
|
||||
|
|
@ -104,8 +104,8 @@
|
|||
colors/white-opa-70
|
||||
(colors/theme-colors colors/neutral-50 colors/neutral-40 theme))}])
|
||||
|
||||
(defn status-tag
|
||||
[{:keys [status size override-theme label blur? no-icon?]}]
|
||||
(defn- status-tag-internal
|
||||
[{:keys [status size theme label blur? no-icon?]}]
|
||||
(when status
|
||||
(when-let [status-component (case (:type status)
|
||||
:positive positive
|
||||
|
|
@ -114,7 +114,9 @@
|
|||
nil)]
|
||||
[status-component
|
||||
size
|
||||
(or override-theme (quo2.theme/get-theme))
|
||||
theme
|
||||
label
|
||||
blur?
|
||||
no-icon?])))
|
||||
|
||||
(def status-tag (quo.theme/with-theme status-tag-internal))
|
||||
|
|
|
|||
|
|
@ -98,30 +98,7 @@
|
|||
quo2.components.tags.token-tag
|
||||
quo2.components.text-combinations.title.view))
|
||||
|
||||
(def icon quo2.components.icon/icon)
|
||||
(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
|
||||
(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 permission-context quo2.components.drawers.permission-context.view/view)
|
||||
|
||||
;;;; DROPDOWNS
|
||||
(def dropdown quo2.components.dropdowns.dropdown/dropdown)
|
||||
|
||||
;;;; 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
|
||||
(def input quo2.components.inputs.input.view/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 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
|
||||
(def activity-log quo2.components.notifications.activity-log.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 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
|
||||
(def record-audio quo2.components.record-audio.record-audio.view/record-audio)
|
||||
(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
|
||||
(def privacy-option quo2.components.settings.privacy-option/card)
|
||||
(def account quo2.components.settings.accounts.view/account)
|
||||
|
|
@ -255,6 +260,11 @@
|
|||
(def permission-tag quo2.components.tags.permission-tag/tag)
|
||||
(def status-tag quo2.components.tags.status-tags/status-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
|
||||
(def title quo2.components.text-combinations.title.view/title)
|
||||
|
|
|
|||
|
|
@ -31,7 +31,6 @@
|
|||
[quo/user-avatar
|
||||
{:full-name name
|
||||
:profile-picture profile-picture
|
||||
:override-theme :dark
|
||||
:size :medium
|
||||
:status-indicator? false
|
||||
:customization-color customization-color}]]
|
||||
|
|
|
|||
|
|
@ -17,13 +17,6 @@
|
|||
{:label "Blur:"
|
||||
:key :blur?
|
||||
:type :boolean}
|
||||
{:label "Override Theme:"
|
||||
:key :override-theme
|
||||
:type :select
|
||||
:options [{:key :dark
|
||||
:value "Dark"}
|
||||
{:key :light
|
||||
:value "Light"}]}
|
||||
{:label "Error:"
|
||||
:key :error?
|
||||
:type :boolean}
|
||||
|
|
@ -65,7 +58,6 @@
|
|||
[]
|
||||
(let [state (reagent/atom {:type :text
|
||||
:blur false
|
||||
:override-theme nil
|
||||
:placeholder "Type something"
|
||||
:error false
|
||||
:icon-name false
|
||||
|
|
|
|||
|
|
@ -77,11 +77,10 @@
|
|||
"did something here."])
|
||||
|
||||
(def complex-user-action
|
||||
(let [tag-props {:color :purple
|
||||
:override-theme :dark
|
||||
:size :small
|
||||
:style {:background-color colors/white-opa-10}
|
||||
:text-style {:color colors/white}}]
|
||||
(let [tag-props {:color :purple
|
||||
:size :small
|
||||
:style {:background-color colors/white-opa-10}
|
||||
:text-style {:color colors/white}}]
|
||||
[[quo2/user-avatar-tag tag-props "Alice"]
|
||||
"from"
|
||||
[quo2/user-avatar-tag tag-props "Mainnet"]
|
||||
|
|
|
|||
|
|
@ -11,13 +11,12 @@
|
|||
[]
|
||||
(let [unread-filter-enabled? (rf/sub [:activity-center/filter-status-unread-enabled?])]
|
||||
[quo/filter
|
||||
{:pressed? unread-filter-enabled?
|
||||
:blur? true
|
||||
:override-theme :dark
|
||||
:on-press-out #(rf/dispatch [:activity-center.notifications/fetch-first-page
|
||||
{:filter-status (if unread-filter-enabled?
|
||||
:all
|
||||
:unread)}])}]))
|
||||
{:pressed? unread-filter-enabled?
|
||||
:blur? true
|
||||
:on-press-out #(rf/dispatch [:activity-center.notifications/fetch-first-page
|
||||
{:filter-status (if unread-filter-enabled?
|
||||
:all
|
||||
:unread)}])}]))
|
||||
|
||||
(defn header
|
||||
[]
|
||||
|
|
|
|||
|
|
@ -10,7 +10,6 @@
|
|||
|
||||
(def tag-params
|
||||
{:size :small
|
||||
:override-theme :dark
|
||||
:color colors/primary-50
|
||||
:style style/user-avatar-tag
|
||||
:text-style style/user-avatar-tag-text
|
||||
|
|
@ -20,11 +19,10 @@
|
|||
[user-id]
|
||||
(let [{:keys [primary-name] :as contact} (rf/sub [:contacts/contact-by-identity user-id])]
|
||||
[quo/user-avatar-tag
|
||||
{:color :purple
|
||||
:override-theme :dark
|
||||
:size :small
|
||||
:style style/user-avatar-tag
|
||||
:text-style style/user-avatar-tag-text}
|
||||
{:color :purple
|
||||
:size :small
|
||||
:style style/user-avatar-tag
|
||||
:text-style style/user-avatar-tag-text}
|
||||
primary-name
|
||||
(multiaccounts/displayed-photo contact)]))
|
||||
|
||||
|
|
|
|||
|
|
@ -38,15 +38,13 @@
|
|||
shell.constants/community-card
|
||||
(case (:type community-info)
|
||||
:pending [quo/status-tag
|
||||
{:status {:type :pending}
|
||||
:label (i18n/label :t/pending)
|
||||
:size :small
|
||||
:override-theme :dark}]
|
||||
{:status {:type :pending}
|
||||
:label (i18n/label :t/pending)
|
||||
:size :small}]
|
||||
:kicked [quo/status-tag
|
||||
{:status {:type :negative}
|
||||
:size :small
|
||||
:override-theme :dark
|
||||
:label (i18n/label :t/kicked)}]
|
||||
{:status {:type :negative}
|
||||
:size :small
|
||||
:label (i18n/label :t/kicked)}]
|
||||
(:count :permission) [:<>] ;; Add components for these cases
|
||||
nil)
|
||||
|
||||
|
|
@ -69,8 +67,8 @@
|
|||
[quo/preview-list
|
||||
{:type :photo
|
||||
:more-than-99-label (i18n/label :counter-99-plus)
|
||||
:size 24
|
||||
:override-theme :dark} data]
|
||||
:size 24}
|
||||
data]
|
||||
|
||||
constants/content-type-sticker
|
||||
[fast-image/fast-image
|
||||
|
|
@ -262,12 +260,11 @@
|
|||
[rn/view {:style style/avatar-container}
|
||||
[avatar avatar-params type customization-color]])
|
||||
[quo/button
|
||||
{:size 24
|
||||
:type :grey
|
||||
:icon true
|
||||
:on-press #(rf/dispatch [:shell/close-switcher-card id])
|
||||
:override-theme :dark
|
||||
:style style/close-button}
|
||||
{:size 24
|
||||
:type :grey
|
||||
:icon true
|
||||
:on-press #(rf/dispatch [:shell/close-switcher-card id])
|
||||
:style style/close-button}
|
||||
:i/close]]]))))
|
||||
|
||||
;; browser Card
|
||||
|
|
|
|||
|
|
@ -21,7 +21,6 @@
|
|||
:type :blur-bg
|
||||
:size 32
|
||||
:accessibility-label :close-shell-share-tab
|
||||
:override-theme :dark
|
||||
:style style/header-button
|
||||
:on-press #(rf/dispatch [:navigate-back])}
|
||||
:i/close]
|
||||
|
|
@ -84,7 +83,6 @@
|
|||
:type :blur-bg
|
||||
:size 32
|
||||
:accessibility-label :link-to-profile
|
||||
:override-theme :dark
|
||||
:on-press #(list-selection/open-share {:message profile-url})}
|
||||
:i/share]]]]
|
||||
|
||||
|
|
@ -113,7 +111,6 @@
|
|||
:type :blur-bg
|
||||
:size 32
|
||||
:accessibility-label :link-to-profile
|
||||
:override-theme :dark
|
||||
:style {:margin-right 12}
|
||||
:on-press #(rf/dispatch [:share/copy-text-and-show-toast
|
||||
{:text-to-copy emoji-hash-string
|
||||
|
|
@ -137,7 +134,6 @@
|
|||
[quo/segmented-control
|
||||
{:size 28
|
||||
:blur? true
|
||||
:override-theme :dark
|
||||
:on-change #(reset! selected-tab %)
|
||||
:default-active :profile
|
||||
:data [{:id :profile
|
||||
|
|
|
|||
|
|
@ -54,7 +54,6 @@
|
|||
:type :blur-bg
|
||||
:size 32
|
||||
:accessibility-label :close-sign-in-by-syncing
|
||||
:override-theme :dark
|
||||
:on-press (fn []
|
||||
(if (and animated? reset-animations-fn)
|
||||
(reset-animations-fn)
|
||||
|
|
@ -70,7 +69,6 @@
|
|||
:type :blur-bg
|
||||
:size 32
|
||||
:accessibility-label :find-sync-code
|
||||
:override-theme :dark
|
||||
:on-press #(rf/dispatch [:open-modal :find-sync-code])}
|
||||
(i18n/label :t/find-sync-code)]]]
|
||||
[reanimated/view
|
||||
|
|
@ -101,7 +99,6 @@
|
|||
style/tabs-container)}
|
||||
[quo/segmented-control
|
||||
{:size 32
|
||||
:override-theme :dark
|
||||
:blur? true
|
||||
:default-active @active-tab
|
||||
:data [{:id 1 :label (i18n/label :t/scan-sync-qr-code)}
|
||||
|
|
@ -151,7 +148,6 @@
|
|||
:type :primary
|
||||
:size 32
|
||||
:accessibility-label accessibility-label
|
||||
:override-theme :dark
|
||||
:customization-color :blue
|
||||
:on-press on-press}
|
||||
(i18n/label button-label)]]))
|
||||
|
|
|
|||
|
|
@ -115,7 +115,6 @@
|
|||
[quo/input
|
||||
{:default-value @code
|
||||
:type :password
|
||||
:override-theme :dark
|
||||
:default-shown? true
|
||||
:editable false}]
|
||||
[quo/button
|
||||
|
|
|
|||
|
|
@ -26,19 +26,17 @@
|
|||
|
||||
:button-grey
|
||||
[quo/button
|
||||
{:type :grey
|
||||
:override-theme :dark
|
||||
:size 24
|
||||
:style style/button-grey}
|
||||
{:type :grey
|
||||
:size 24
|
||||
:style style/button-grey}
|
||||
(i18n/label value)]
|
||||
|
||||
:button-grey-placeholder
|
||||
[quo/button
|
||||
{:type :grey
|
||||
:override-theme :dark
|
||||
:size 24
|
||||
:before :i/placeholder
|
||||
:style style/button-grey-placeholder}
|
||||
{:type :grey
|
||||
:size 24
|
||||
:before :i/placeholder
|
||||
:style style/button-grey-placeholder}
|
||||
(i18n/label value)]
|
||||
|
||||
:context-tag
|
||||
|
|
@ -111,7 +109,6 @@
|
|||
[rn/view {:style style/tabs-container}
|
||||
[quo/segmented-control
|
||||
{:size 28
|
||||
:override-theme :dark
|
||||
:blur? true
|
||||
:default-active :mobile
|
||||
:data platform-data
|
||||
|
|
|
|||
|
|
@ -88,13 +88,11 @@
|
|||
:component add-new-contact/new-contact}
|
||||
|
||||
{:name :how-to-pair
|
||||
:options {:theme :dark
|
||||
:sheet? true}
|
||||
:options (assoc options/dark-screen :sheet? true)
|
||||
:component how-to-pair/view}
|
||||
|
||||
{:name :find-sync-code
|
||||
:options {:theme :dark
|
||||
:sheet? true}
|
||||
:options (assoc options/dark-screen :sheet? true)
|
||||
:component find-sync-code/view}
|
||||
|
||||
{:name :discover-communities
|
||||
|
|
|
|||
Loading…
Reference in New Issue