diff --git a/src/legacy/status_im/multiaccounts/create/core.cljs b/src/legacy/status_im/multiaccounts/create/core.cljs index 7aadb49ccc..af59e96715 100644 --- a/src/legacy/status_im/multiaccounts/create/core.cljs +++ b/src/legacy/status_im/multiaccounts/create/core.cljs @@ -59,7 +59,7 @@ :selected-storage-type :default :selected-id (-> result first :id) :step :choose-key)))) - :navigate-to :choose-name}) + :navigate-to [:choose-name (:theme db)]}) (rf/defn generate-and-derive-addresses {:events [:generate-and-derive-addresses]} diff --git a/src/quo/components/inputs/recovery_phrase/style.cljs b/src/quo/components/inputs/recovery_phrase/style.cljs index a248875e83..0e1ff1e5fa 100644 --- a/src/quo/components/inputs/recovery_phrase/style.cljs +++ b/src/quo/components/inputs/recovery_phrase/style.cljs @@ -12,8 +12,8 @@ container-style)) (defn input - [] - (assoc (text/text-style {} nil) + [theme] + (assoc (text/text-style {} theme) :height 32 :flex-grow 1 :padding-vertical 5 diff --git a/src/quo/components/inputs/recovery_phrase/view.cljs b/src/quo/components/inputs/recovery_phrase/view.cljs index 6a81691199..e8691e8098 100644 --- a/src/quo/components/inputs/recovery_phrase/view.cljs +++ b/src/quo/components/inputs/recovery_phrase/view.cljs @@ -61,7 +61,7 @@ [rn/view {:style (style/container container-style)} [rn/text-input (merge {:accessibility-label :recovery-phrase-input - :style (style/input) + :style (style/input theme) :placeholder-text-color (style/placeholder-color state theme blur?) :cursor-color (style/cursor-color customization-color theme) :keyboard-appearance theme diff --git a/src/quo/components/notifications/notification/view.cljs b/src/quo/components/notifications/notification/view.cljs index 60fae46150..c4bca19119 100644 --- a/src/quo/components/notifications/notification/view.cljs +++ b/src/quo/components/notifications/notification/view.cljs @@ -63,22 +63,23 @@ (defn notification [{title-text :title :keys [avatar user header title-weight text body container-style theme]}] - (let [theme theme - body (or body (when text [message text theme])) - header (or header - (when title-text - [title - {:text title-text - :weight title-weight - :theme theme - :multiline? (some? body)}])) - header (when header [header-container header]) - body (when body [body-container body]) - user-avatar (or avatar (when user (user-avatar/user-avatar user))) - avatar (when user-avatar - [avatar-container - {:multiline? (and header body)} - user-avatar])] + (let [context-theme (quo.theme/use-theme) + theme (or theme context-theme) + body (or body (when text [message text theme])) + header (or header + (when title-text + [title + {:text title-text + :weight title-weight + :theme theme + :multiline? (some? body)}])) + header (when header [header-container header]) + body (when body [body-container body]) + user-avatar (or avatar (when user (user-avatar/user-avatar user))) + avatar (when user-avatar + [avatar-container + {:multiline? (and header body)} + user-avatar])] [quo.theme/provider theme [notification-container {:avatar avatar diff --git a/src/quo/components/notifications/toast/view.cljs b/src/quo/components/notifications/toast/view.cljs index b39d8c306e..ecf8686ce7 100644 --- a/src/quo/components/notifications/toast/view.cljs +++ b/src/quo/components/notifications/toast/view.cljs @@ -72,7 +72,8 @@ " [{:keys [type icon title text action undo-duration undo-on-press container-style theme user] :or {type :neutral icon :i/placeholder}}] - (let [context-theme theme + (let [context-theme (quo.theme/use-theme) + context-theme (or theme context-theme) icon-name (case type :positive (if (= theme :light) :i/correct diff --git a/src/quo/components/tags/context_tag/view.cljs b/src/quo/components/tags/context_tag/view.cljs index 0d434074a9..68fd5e94dc 100644 --- a/src/quo/components/tags/context_tag/view.cljs +++ b/src/quo/components/tags/context_tag/view.cljs @@ -16,19 +16,21 @@ [schema.core :as schema])) (defn- tag-skeleton - [{:keys [theme size text] :or {size 24}} logo-component] - [rn/view {:style (style/tag-container size)} - logo-component - [rn/view {:style (style/tag-spacing size)} - [text/text - {:style (style/text theme) - :weight :medium - :size (if (= size 24) :paragraph-2 :paragraph-1)} - text]]]) + [{:keys [size text] :or {size 24}} logo-component] + (let [theme (quo.theme/use-theme)] + [rn/view {:style (style/tag-container size)} + logo-component + [rn/view {:style (style/tag-spacing size)} + [text/text + {:style (style/text theme) + :weight :medium + :size (if (= size 24) :paragraph-2 :paragraph-1)} + text]]])) (defn- communities-tag - [{:keys [theme size community-logo community-name blur? channel? channel-name]}] - (let [text-size (if (= size 24) :paragraph-2 :paragraph-1) + [{:keys [size community-logo community-name blur? channel? channel-name]}] + (let [theme (quo.theme/use-theme) + text-size (if (= size 24) :paragraph-2 :paragraph-1) icon-size (if (= size 24) 16 20)] [rn/view {:style (style/tag-container size)} [fast-image/fast-image {:style (style/circle-logo size) :source community-logo}] @@ -54,26 +56,28 @@ (str (subs pk 0 5) "..." (subs pk (- (count pk) 3)))) (defn- address-tag - [{:keys [theme size address]}] - [rn/view {:style (style/address size)} - [text/text - {:style (style/text theme) - :weight :monospace ;; TODO: fix this style (issue #17009) - :size (if (= size 24) :paragraph-2 :paragraph-1)} - (trim-public-key address)]]) + [{:keys [size address]}] + (let [theme (quo.theme/use-theme)] + [rn/view {:style (style/address size)} + [text/text + {:style (style/text theme) + :weight :monospace ;; TODO: fix this style (issue #17009) + :size (if (= size 24) :paragraph-2 :paragraph-1)} + (trim-public-key address)]])) (defn- icon-tag - [{:keys [theme size icon blur? context]}] - [rn/view {:style (style/icon size)} - [icons/icon icon - {:color (style/context-tag-icon-color theme blur?) - :size (if (= size 24) 12 20)}] - [rn/view {:style (style/icon-spacing size)} - [text/text - {:style (style/text theme) - :weight :medium - :size (if (= size 24) :paragraph-2 :paragraph-1)} - context]]]) + [{:keys [size icon blur? context]}] + (let [theme (quo.theme/use-theme)] + [rn/view {:style (style/icon size)} + [icons/icon icon + {:color (style/context-tag-icon-color theme blur?) + :size (if (= size 24) 12 20)}] + [rn/view {:style (style/icon-spacing size)} + [text/text + {:style (style/text theme) + :weight :medium + :size (if (= size 24) :paragraph-2 :paragraph-1)} + context]]])) (defn- view-internal [{:keys [type size state blur? customization-color profile-picture full-name users diff --git a/src/quo/components/wallet/token_input/view.cljs b/src/quo/components/wallet/token_input/view.cljs index 6c05568058..be301c41c5 100644 --- a/src/quo/components/wallet/token_input/view.cljs +++ b/src/quo/components/wallet/token_input/view.cljs @@ -92,36 +92,36 @@ (oops/oget "nativeEvent.selection") (js->clj :keywordize-keys true) (on-selection-change))))] - (fn [{:keys [theme token customization-color show-keyboard? crypto? currency value error? - selection] + (fn [{:keys [token customization-color show-keyboard? crypto? currency value error? selection] :or {show-keyboard? true}}] - [rn/view {:style {:flex 1}} - [rn/pressable {:on-press on-token-press} - [token/view - {:token token - :size :size-32}]] - [rn/pressable - {:style style/text-input-container - :on-press focus-input} - [rn/text-input - (cond-> {:style (style/text-input theme error?) - :placeholder-text-color (style/placeholder-text theme) - :auto-focus true - :ref set-ref - :placeholder "0" - :keyboard-type :numeric - :max-length 12 - :on-change-text handle-on-change-text - :selection-color customization-color - :show-soft-input-on-focus show-keyboard? - :on-selection-change handle-selection-change - :selection (clj->js selection)} - controlled-input? (assoc :value value) - (not controlled-input?) (assoc :default-value value-internal))]] - [token-label - {:theme theme - :text (if crypto? token currency) - :value (if controlled-input? value value-internal)}]]))) + (let [theme (quo.theme/use-theme)] + [rn/view {:style {:flex 1}} + [rn/pressable {:on-press on-token-press} + [token/view + {:token token + :size :size-32}]] + [rn/pressable + {:style style/text-input-container + :on-press focus-input} + [rn/text-input + (cond-> {:style (style/text-input theme error?) + :placeholder-text-color (style/placeholder-text theme) + :auto-focus true + :ref set-ref + :placeholder "0" + :keyboard-type :numeric + :max-length 12 + :on-change-text handle-on-change-text + :selection-color customization-color + :show-soft-input-on-focus show-keyboard? + :on-selection-change handle-selection-change + :selection (clj->js selection)} + controlled-input? (assoc :value value) + (not controlled-input?) (assoc :default-value value-internal))]] + [token-label + {:theme theme + :text (if crypto? token currency) + :value (if controlled-input? value value-internal)}]])))) (defn- view-internal [{:keys [container-style value on-swap] :as props}] diff --git a/src/quo/components/wallet/wallet_overview/view.cljs b/src/quo/components/wallet/wallet_overview/view.cljs index bd0b370bac..8d02176876 100644 --- a/src/quo/components/wallet/wallet_overview/view.cljs +++ b/src/quo/components/wallet/wallet_overview/view.cljs @@ -66,52 +66,53 @@ (defn- view-info-bottom [{:keys [state time-frame metrics date begin-date end-date - currency-change percentage-change theme]}] - [rn/view {:style style/container-info-bottom} - (when (= state :loading) - [rn/view - {:style {:flex-direction :row - :align-items :center}} - (loading-bars [{:width 32 :height 10 :margin 8} - {:width 32 :height 10 :margin 2} - {:width 62 :height 10 :margin 4} - {:width 10 :height 10 :margin 0}] - theme)]) - (when (and (= state :default) (= time-frame :selected)) - [text/text - {:weight :medium - :size :paragraph-2 - :style (style/style-text-paragraph theme)} - date]) - (when (and (= state :default) (= time-frame :custom)) - [rn/view {:style {:flex-direction :row}} - [text/text - {:weight :medium - :size :paragraph-2 - :style (style/style-text-paragraph theme)} - begin-date] - [icon/icon :i/positive-right - {:color (style/color-text-paragraph theme) - :size 16}] - [text/text - {:weight :medium - :size :paragraph-2 - :style (style/style-text-paragraph theme)} - end-date]]) - (when (and (= state :default) (not (#{:none :selected} time-frame))) - [rn/view {:style {:flex-direction :row}} - [text/text - {:weight :medium - :size :paragraph-2 - :style {:color (style/color-text-paragraph theme) - :margin-right 8}} - (time-frame time-frames)] - (when (and (= state :default) (not= metrics :none)) - [view-metrics - {:metrics metrics - :currency-change currency-change - :percentage-change percentage-change - :theme theme}])])]) + currency-change percentage-change]}] + (let [theme (quo.theme/use-theme)] + [rn/view {:style style/container-info-bottom} + (when (= state :loading) + [rn/view + {:style {:flex-direction :row + :align-items :center}} + (loading-bars [{:width 32 :height 10 :margin 8} + {:width 32 :height 10 :margin 2} + {:width 62 :height 10 :margin 4} + {:width 10 :height 10 :margin 0}] + theme)]) + (when (and (= state :default) (= time-frame :selected)) + [text/text + {:weight :medium + :size :paragraph-2 + :style (style/style-text-paragraph theme)} + date]) + (when (and (= state :default) (= time-frame :custom)) + [rn/view {:style {:flex-direction :row}} + [text/text + {:weight :medium + :size :paragraph-2 + :style (style/style-text-paragraph theme)} + begin-date] + [icon/icon :i/positive-right + {:color (style/color-text-paragraph theme) + :size 16}] + [text/text + {:weight :medium + :size :paragraph-2 + :style (style/style-text-paragraph theme)} + end-date]]) + (when (and (= state :default) (not (#{:none :selected} time-frame))) + [rn/view {:style {:flex-direction :row}} + [text/text + {:weight :medium + :size :paragraph-2 + :style {:color (style/color-text-paragraph theme) + :margin-right 8}} + (time-frame time-frames)] + (when (and (= state :default) (not= metrics :none)) + [view-metrics + {:metrics metrics + :currency-change currency-change + :percentage-change percentage-change + :theme theme}])])])) (defn- view-internal [props] diff --git a/src/status_im/common/emoji_picker/view.cljs b/src/status_im/common/emoji_picker/view.cljs index 3e1b4ac8d8..27277c9082 100644 --- a/src/status_im/common/emoji_picker/view.cljs +++ b/src/status_im/common/emoji_picker/view.cljs @@ -94,30 +94,31 @@ :container-style style/empty-results}]) (defn- render-list - [{:keys [theme filtered-data on-viewable-items-changed scroll-enabled? on-scroll + [{:keys [filtered-data on-viewable-items-changed scroll-enabled? on-scroll on-select set-scroll-ref close sheet-animating?]}] - [gesture/flat-list - {:ref set-scroll-ref - :scroll-enabled @scroll-enabled? - :data (or filtered-data emoji-picker.data/flatten-data) - :initial-num-to-render 14 - :max-to-render-per-batch 10 - :render-fn render-item - :get-item-layout get-item-layout - :keyboard-dismiss-mode :on-drag - :keyboard-should-persist-taps :handled - :shows-vertical-scroll-indicator false - :on-scroll-to-index-failed identity - :empty-component [empty-result] - :on-scroll on-scroll - :render-data {:close close - :theme theme - :on-select on-select} - :content-container-style style/list-container - :viewability-config {:item-visible-percent-threshold 100 - :minimum-view-time 200} - :on-viewable-items-changed on-viewable-items-changed - :window-size (if @sheet-animating? 1 10)}]) + (let [theme (quo.theme/use-theme)] + [gesture/flat-list + {:ref set-scroll-ref + :scroll-enabled @scroll-enabled? + :data (or filtered-data emoji-picker.data/flatten-data) + :initial-num-to-render 14 + :max-to-render-per-batch 10 + :render-fn render-item + :get-item-layout get-item-layout + :keyboard-dismiss-mode :on-drag + :keyboard-should-persist-taps :handled + :shows-vertical-scroll-indicator false + :on-scroll-to-index-failed identity + :empty-component [empty-result] + :on-scroll on-scroll + :render-data {:close close + :theme theme + :on-select on-select} + :content-container-style style/list-container + :viewability-config {:item-visible-percent-threshold 100 + :minimum-view-time 200} + :on-viewable-items-changed on-viewable-items-changed + :window-size (if @sheet-animating? 1 10)}])) (defn- footer [{:keys [active-category scroll-ref]}] diff --git a/src/status_im/common/scroll_page/view.cljs b/src/status_im/common/scroll_page/view.cljs index 806c4fe690..f56766683b 100644 --- a/src/status_im/common/scroll_page/view.cljs +++ b/src/status_im/common/scroll_page/view.cljs @@ -101,50 +101,52 @@ (defn scroll-page [_ _ _] (let [scroll-height (reagent/atom negative-scroll-position-0)] - (fn [{:keys [theme cover-image cover-color logo on-scroll + (fn [{:keys [cover-image cover-color logo on-scroll collapsed? height top-nav title-colum background-color navigate-back? page-nav-props overlay-shown? sticky-header children-style]} children] - [:<> - [:f> f-scroll-page-header - {:scroll-height @scroll-height - :height height - :sticky-header sticky-header - :top-nav top-nav - :title-colum title-colum - :navigate-back? navigate-back? - :collapsed? collapsed? - :page-nav-props page-nav-props - :overlay-shown? overlay-shown?}] - [rn/scroll-view - {:content-container-style {:flex-grow 1} - :content-inset-adjustment-behavior :never - :shows-vertical-scroll-indicator false - :scroll-event-throttle 16 - :on-scroll (fn [^js event] - (reset! scroll-height (int - (oops/oget - event - "nativeEvent.contentOffset.y"))) - (when on-scroll - (on-scroll @scroll-height)))} - (when cover-color - [rn/view {:style (style/cover-background cover-color)}]) - (when cover-image - [rn/view {:style {:height (if collapsed? 110 151)}} - [rn/image - {:source cover-image - ;; Using negative margin-bottom as a workaround because on Android, - ;; ScrollView clips its children despite setting overflow: 'visible'. - ;; Related issue: https://github.com/facebook/react-native/issues/31218 - :style {:margin-bottom -16 - :flex 1}}]]) - (when children - [rn/view - {:style (style/children-container (merge - children-style - {:border-radius (diff-with-max-min @scroll-height 16 0) - :background-color background-color}))} - (when (and (not collapsed?) cover-image) - [:f> f-display-picture @scroll-height logo theme]) - children])]]))) + (let [theme (quo.theme/use-theme)] + [:<> + [:f> f-scroll-page-header + {:scroll-height @scroll-height + :height height + :sticky-header sticky-header + :top-nav top-nav + :title-colum title-colum + :navigate-back? navigate-back? + :collapsed? collapsed? + :page-nav-props page-nav-props + :overlay-shown? overlay-shown?}] + [rn/scroll-view + {:content-container-style {:flex-grow 1} + :content-inset-adjustment-behavior :never + :shows-vertical-scroll-indicator false + :scroll-event-throttle 16 + :on-scroll (fn [^js event] + (reset! scroll-height (int + (oops/oget + event + "nativeEvent.contentOffset.y"))) + (when on-scroll + (on-scroll @scroll-height)))} + (when cover-color + [rn/view {:style (style/cover-background cover-color)}]) + (when cover-image + [rn/view {:style {:height (if collapsed? 110 151)}} + [rn/image + {:source cover-image + ;; Using negative margin-bottom as a workaround because on Android, + ;; ScrollView clips its children despite setting overflow: 'visible'. + ;; Related issue: https://github.com/facebook/react-native/issues/31218 + :style {:margin-bottom -16 + :flex 1}}]]) + (when children + [rn/view + {:style (style/children-container + (merge + children-style + {:border-radius (diff-with-max-min @scroll-height 16 0) + :background-color background-color}))} + (when (and (not collapsed?) cover-image) + [:f> f-display-picture @scroll-height logo theme]) + children])]])))) diff --git a/src/status_im/contexts/communities/discover/view.cljs b/src/status_im/contexts/communities/discover/view.cljs index c34b3c07d4..1b74bb7362 100644 --- a/src/status_im/contexts/communities/discover/view.cljs +++ b/src/status_im/contexts/communities/discover/view.cljs @@ -209,8 +209,7 @@ featured-communities-count (count featured-communities)] (fn [] [scroll-page/scroll-page - {:theme theme - :on-scroll #(reset! scroll-height %) + {:on-scroll #(reset! scroll-height %) :page-nav-props {:background :blur} :navigate-back? :true :height (if (> @scroll-height 360) diff --git a/src/status_im/contexts/shell/jump_to/events.cljs b/src/status_im/contexts/shell/jump_to/events.cljs index 8d4449076e..a5241047c8 100644 --- a/src/status_im/contexts/shell/jump_to/events.cljs +++ b/src/status_im/contexts/shell/jump_to/events.cljs @@ -147,7 +147,7 @@ (:current-chat-id db)) (conj [:chat/close]))}) {:db (assoc db :view-id go-to-view-id) - :navigate-to go-to-view-id})) + :navigate-to [go-to-view-id (:theme db)]})) (rf/defn shell-navigate-back {:events [:shell/navigate-back]} diff --git a/src/status_im/navigation/core.cljs b/src/status_im/navigation/core.cljs index 6a16d6a0c6..bdf8395a82 100644 --- a/src/status_im/navigation/core.cljs +++ b/src/status_im/navigation/core.cljs @@ -54,10 +54,10 @@ (reset! state/modals (vec (butlast @state/modals))) (reset! state/modals [])) - (let [component @state/dissmissing] + (let [dissmissing @state/dissmissing] (reset! state/dissmissing false) - (when (keyword? component) - (effects/open-modal component))))) + (when (vector? dissmissing) + (effects/open-modal dissmissing))))) ;;;; Toast diff --git a/src/status_im/navigation/effects.cljs b/src/status_im/navigation/effects.cljs index 90043dd1b6..8756b44739 100644 --- a/src/status_im/navigation/effects.cljs +++ b/src/status_im/navigation/effects.cljs @@ -86,14 +86,14 @@ ;;;; Navigate to (defn- navigate - [component] + [[component theme]] (let [{:keys [options]} (get views/screens component)] (dismiss-all-modals) (navigation/push (name @state/root-id) {:component {:id component :name component - :options (merge (options/root-options {:theme (:theme options)}) + :options (merge (options/root-options {:theme (or (:theme options) theme)}) options)}}) (state/navigation-state-push {:id component :type :stack @@ -139,11 +139,6 @@ (rf/reg-fx :navigate-back navigate-back) -(rf/reg-fx :navigate-replace-fx - (fn [view-id] - (navigate-back) - (navigate view-id))) - (rf/reg-fx :navigate-back-to (fn [comp-id] (navigation/pop-to (name comp-id)) @@ -164,18 +159,19 @@ ;;;; Modal (defn open-modal - [component] + [[component theme]] (let [{:keys [options]} (get views/screens component) sheet? (:sheet? options)] (if @state/dissmissing - (reset! state/dissmissing component) + (reset! state/dissmissing [component theme]) (do (swap! state/modals conj component) (navigation/show-modal {:stack {:children [{:component {:name component :id component - :options (merge (options/root-options {:theme (:theme options)}) + :options (merge (options/root-options {:theme (or (:theme options) + theme)}) options (when sheet? options/sheet-options))}}]}}))) diff --git a/src/status_im/navigation/events.cljs b/src/status_im/navigation/events.cljs index 3313462acb..79ed133b24 100644 --- a/src/status_im/navigation/events.cljs +++ b/src/status_im/navigation/events.cljs @@ -37,7 +37,7 @@ (all-screens-params component screen-params)) :fx [[:dispatch [:hide-bottom-sheet]] [:dispatch [:dismiss-keyboard]] - [:open-modal-fx component]]})) + [:open-modal-fx [component (:theme db)]]]})) (rf/defn dismiss-modal {:events [:dismiss-modal]} @@ -80,15 +80,6 @@ {:db (assoc db :view-id stack-id) :effects.shell/change-tab stack-id}) -(rf/defn navigate-replace - {:events [:navigate-replace]} - [{:keys [db]} go-to-view-id screen-params] - (let [db (cond-> (assoc db :view-id go-to-view-id) - (seq screen-params) - (assoc-in [:navigation/screen-params go-to-view-id] screen-params))] - {:db db - :navigate-replace-fx go-to-view-id})) - (rf/defn hide-bottom-sheet {:events [:hide-bottom-sheet]} [{:keys [db]}]