From a8303dbe5023bfcabd2fe7af789d35cc38c80f5e Mon Sep 17 00:00:00 2001 From: Jamie Caprani Date: Fri, 28 Jul 2023 11:36:54 +0200 Subject: [PATCH] chore: remove uses of override theme prop (#16570) --- .../drawers/documentation_drawers/style.cljs | 4 +- .../drawers/documentation_drawers/view.cljs | 21 ++--- src/quo2/components/inputs/input/style.cljs | 76 +++++++++---------- src/quo2/components/inputs/input/view.cljs | 18 +++-- .../inputs/recovery_phrase/style.cljs | 18 ++--- .../inputs/recovery_phrase/view.cljs | 30 +++++--- .../components/list_items/preview_list.cljs | 31 +++++--- .../components/selectors/filter/style.cljs | 22 +++--- .../components/selectors/filter/view.cljs | 15 ++-- src/quo2/components/tabs/segmented_tab.cljs | 13 ++-- src/quo2/components/tags/status_tags.cljs | 14 ++-- src/quo2/core.cljs | 56 ++++++++------ .../identifiers/profile_card/view.cljs | 1 - .../contexts/quo_preview/inputs/input.cljs | 8 -- .../notifications/activity_logs.cljs | 9 +-- .../shell/activity_center/header/view.cljs | 13 ++-- .../notification/common/view.cljs | 10 +-- .../components/switcher_cards/view.cljs | 29 ++++--- src/status_im2/contexts/shell/share/view.cljs | 4 - .../contexts/syncing/scan_sync_code/view.cljs | 4 - .../contexts/syncing/setup_syncing/view.cljs | 1 - .../syncing/syncing_instructions/view.cljs | 17 ++--- src/status_im2/navigation/screens.cljs | 6 +- 23 files changed, 210 insertions(+), 210 deletions(-) diff --git a/src/quo2/components/drawers/documentation_drawers/style.cljs b/src/quo2/components/drawers/documentation_drawers/style.cljs index 70d328f94f..4ece358509 100644 --- a/src/quo2/components/drawers/documentation_drawers/style.cljs +++ b/src/quo2/components/drawers/documentation_drawers/style.cljs @@ -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)}) diff --git a/src/quo2/components/drawers/documentation_drawers/view.cljs b/src/quo2/components/drawers/documentation_drawers/view.cljs index 403ffeaea9..04bad06da8 100644 --- a/src/quo2/components/drawers/documentation_drawers/view.cljs +++ b/src/quo2/components/drawers/documentation_drawers/view.cljs @@ -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)) diff --git a/src/quo2/components/inputs/input/style.cljs b/src/quo2/components/inputs/input/style.cljs index 9abe4e7c33..d4580c9be5 100644 --- a/src/quo2/components/inputs/input/style.cljs +++ b/src/quo2/components/inputs/input/style.cljs @@ -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?] diff --git a/src/quo2/components/inputs/input/view.cljs b/src/quo2/components/inputs/input/view.cljs index 03211bcf45..aed8388b89 100644 --- a/src/quo2/components/inputs/input/view.cljs +++ b/src/quo2/components/inputs/input/view.cljs @@ -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)) diff --git a/src/quo2/components/inputs/recovery_phrase/style.cljs b/src/quo2/components/inputs/recovery_phrase/style.cljs index 6110337f7a..291f7639bd 100644 --- a/src/quo2/components/inputs/recovery_phrase/style.cljs +++ b/src/quo2/components/inputs/recovery_phrase/style.cljs @@ -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)}) diff --git a/src/quo2/components/inputs/recovery_phrase/view.cljs b/src/quo2/components/inputs/recovery_phrase/view.cljs index 3803184dd0..996df743f8 100644 --- a/src/quo2/components/inputs/recovery_phrase/view.cljs +++ b/src/quo2/components/inputs/recovery_phrase/view.cljs @@ -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)) diff --git a/src/quo2/components/list_items/preview_list.cljs b/src/quo2/components/list_items/preview_list.cljs index cf717936c3..6a6f203980 100644 --- a/src/quo2/components/list_items/preview_list.cljs +++ b/src/quo2/components/list_items/preview_list.cljs @@ -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)) diff --git a/src/quo2/components/selectors/filter/style.cljs b/src/quo2/components/selectors/filter/style.cljs index e380c53a41..117cbeec33 100644 --- a/src/quo2/components/selectors/filter/style.cljs +++ b/src/quo2/components/selectors/filter/style.cljs @@ -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)) diff --git a/src/quo2/components/selectors/filter/view.cljs b/src/quo2/components/selectors/filter/view.cljs index e51c133425..e8193cb5bb 100644 --- a/src/quo2/components/selectors/filter/view.cljs +++ b/src/quo2/components/selectors/filter/view.cljs @@ -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)) diff --git a/src/quo2/components/tabs/segmented_tab.cljs b/src/quo2/components/tabs/segmented_tab.cljs index dc8f85b3eb..1e71e930d9 100644 --- a/src/quo2/components/tabs/segmented_tab.cljs +++ b/src/quo2/components/tabs/segmented_tab.cljs @@ -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)) diff --git a/src/quo2/components/tags/status_tags.cljs b/src/quo2/components/tags/status_tags.cljs index 3a4403de59..30c64bb743 100644 --- a/src/quo2/components/tags/status_tags.cljs +++ b/src/quo2/components/tags/status_tags.cljs @@ -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)) diff --git a/src/quo2/core.cljs b/src/quo2/core.cljs index e7bfc4291e..fd8e865a66 100644 --- a/src/quo2/core.cljs +++ b/src/quo2/core.cljs @@ -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) diff --git a/src/status_im2/contexts/onboarding/identifiers/profile_card/view.cljs b/src/status_im2/contexts/onboarding/identifiers/profile_card/view.cljs index aca94e591e..c0d89e7bd6 100644 --- a/src/status_im2/contexts/onboarding/identifiers/profile_card/view.cljs +++ b/src/status_im2/contexts/onboarding/identifiers/profile_card/view.cljs @@ -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}]] diff --git a/src/status_im2/contexts/quo_preview/inputs/input.cljs b/src/status_im2/contexts/quo_preview/inputs/input.cljs index 2e4e6dcf5a..4936d58c85 100644 --- a/src/status_im2/contexts/quo_preview/inputs/input.cljs +++ b/src/status_im2/contexts/quo_preview/inputs/input.cljs @@ -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 diff --git a/src/status_im2/contexts/quo_preview/notifications/activity_logs.cljs b/src/status_im2/contexts/quo_preview/notifications/activity_logs.cljs index c938ed46f4..0adf56500a 100644 --- a/src/status_im2/contexts/quo_preview/notifications/activity_logs.cljs +++ b/src/status_im2/contexts/quo_preview/notifications/activity_logs.cljs @@ -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"] diff --git a/src/status_im2/contexts/shell/activity_center/header/view.cljs b/src/status_im2/contexts/shell/activity_center/header/view.cljs index d1f8aa4851..521b84cea9 100644 --- a/src/status_im2/contexts/shell/activity_center/header/view.cljs +++ b/src/status_im2/contexts/shell/activity_center/header/view.cljs @@ -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 [] diff --git a/src/status_im2/contexts/shell/activity_center/notification/common/view.cljs b/src/status_im2/contexts/shell/activity_center/notification/common/view.cljs index 0f59bcc67d..b6cea06fc3 100644 --- a/src/status_im2/contexts/shell/activity_center/notification/common/view.cljs +++ b/src/status_im2/contexts/shell/activity_center/notification/common/view.cljs @@ -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)])) diff --git a/src/status_im2/contexts/shell/jump_to/components/switcher_cards/view.cljs b/src/status_im2/contexts/shell/jump_to/components/switcher_cards/view.cljs index 81c9f0d866..ab9bd69c10 100644 --- a/src/status_im2/contexts/shell/jump_to/components/switcher_cards/view.cljs +++ b/src/status_im2/contexts/shell/jump_to/components/switcher_cards/view.cljs @@ -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 diff --git a/src/status_im2/contexts/shell/share/view.cljs b/src/status_im2/contexts/shell/share/view.cljs index 5f387004db..97437aa8e4 100644 --- a/src/status_im2/contexts/shell/share/view.cljs +++ b/src/status_im2/contexts/shell/share/view.cljs @@ -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 diff --git a/src/status_im2/contexts/syncing/scan_sync_code/view.cljs b/src/status_im2/contexts/syncing/scan_sync_code/view.cljs index 35b015cac2..35eb73b41a 100644 --- a/src/status_im2/contexts/syncing/scan_sync_code/view.cljs +++ b/src/status_im2/contexts/syncing/scan_sync_code/view.cljs @@ -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)]])) diff --git a/src/status_im2/contexts/syncing/setup_syncing/view.cljs b/src/status_im2/contexts/syncing/setup_syncing/view.cljs index ee0a030589..28aa9ee273 100644 --- a/src/status_im2/contexts/syncing/setup_syncing/view.cljs +++ b/src/status_im2/contexts/syncing/setup_syncing/view.cljs @@ -115,7 +115,6 @@ [quo/input {:default-value @code :type :password - :override-theme :dark :default-shown? true :editable false}] [quo/button diff --git a/src/status_im2/contexts/syncing/syncing_instructions/view.cljs b/src/status_im2/contexts/syncing/syncing_instructions/view.cljs index e8c8f81025..3bc7d85b04 100644 --- a/src/status_im2/contexts/syncing/syncing_instructions/view.cljs +++ b/src/status_im2/contexts/syncing/syncing_instructions/view.cljs @@ -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 diff --git a/src/status_im2/navigation/screens.cljs b/src/status_im2/navigation/screens.cljs index 83c3295462..20d6d7d0ab 100644 --- a/src/status_im2/navigation/screens.cljs +++ b/src/status_im2/navigation/screens.cljs @@ -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