feat: add new theming mechanism (#16191)
* chore: set react-dom to same version as react
This commit is contained in:
parent
1591a5e2da
commit
e5778ee300
|
@ -37,7 +37,7 @@
|
||||||
"node-libs-react-native": "^1.2.1",
|
"node-libs-react-native": "^1.2.1",
|
||||||
"qrcode": "^1.4.1",
|
"qrcode": "^1.4.1",
|
||||||
"react": "18.0.0",
|
"react": "18.0.0",
|
||||||
"react-dom": "^16.4.2",
|
"react-dom": "18.0.0",
|
||||||
"react-native": "0.69.10",
|
"react-native": "0.69.10",
|
||||||
"react-native-background-timer": "^2.1.1",
|
"react-native-background-timer": "^2.1.1",
|
||||||
"react-native-blob-util": "^0.13.18",
|
"react-native-blob-util": "^0.13.18",
|
||||||
|
|
|
@ -204,7 +204,7 @@
|
||||||
(when disabled
|
(when disabled
|
||||||
{:opacity 0.3})))
|
{:opacity 0.3})))
|
||||||
|
|
||||||
(defn button
|
(defn- button-internal
|
||||||
"with label
|
"with label
|
||||||
[button opts \"label\"]
|
[button opts \"label\"]
|
||||||
opts
|
opts
|
||||||
|
@ -223,7 +223,7 @@
|
||||||
(let [pressed-in (reagent/atom false)]
|
(let [pressed-in (reagent/atom false)]
|
||||||
(fn
|
(fn
|
||||||
[{:keys [on-press disabled type size before after above icon-secondary-no-color
|
[{:keys [on-press disabled type size before after above icon-secondary-no-color
|
||||||
width customization-color override-theme override-background-color pressed
|
width customization-color theme override-background-color pressed
|
||||||
on-long-press accessibility-label icon icon-no-color style inner-style test-ID]
|
on-long-press accessibility-label icon icon-no-color style inner-style test-ID]
|
||||||
:or {type :primary
|
:or {type :primary
|
||||||
size 40
|
size 40
|
||||||
|
@ -231,9 +231,7 @@
|
||||||
children]
|
children]
|
||||||
(let [{:keys [icon-color icon-secondary-color background-color label-color border-color]}
|
(let [{:keys [icon-color icon-secondary-color background-color label-color border-color]}
|
||||||
(get-in (themes customization-color)
|
(get-in (themes customization-color)
|
||||||
[(or
|
[theme type])
|
||||||
override-theme
|
|
||||||
(theme/get-theme)) type])
|
|
||||||
state (cond disabled :disabled
|
state (cond disabled :disabled
|
||||||
(or @pressed-in pressed) :pressed
|
(or @pressed-in pressed) :pressed
|
||||||
:else :default)
|
:else :default)
|
||||||
|
@ -309,3 +307,5 @@
|
||||||
:no-color icon-secondary-no-color
|
:no-color icon-secondary-no-color
|
||||||
:color icon-secondary-color
|
:color icon-secondary-color
|
||||||
:size icon-size}]])]]]))))
|
:size icon-size}]])]]]))))
|
||||||
|
|
||||||
|
(def button (theme/with-theme button-internal))
|
||||||
|
|
|
@ -1,5 +1,6 @@
|
||||||
(ns quo2.components.dividers.divider-label
|
(ns quo2.components.dividers.divider-label
|
||||||
(:require [quo2.components.icon :as icons]
|
(:require [quo2.theme :as theme]
|
||||||
|
[quo2.components.icon :as icons]
|
||||||
[quo2.components.markdown.text :as markdown.text]
|
[quo2.components.markdown.text :as markdown.text]
|
||||||
[quo2.foundations.colors :as colors]
|
[quo2.foundations.colors :as colors]
|
||||||
[react-native.core :as rn]))
|
[react-native.core :as rn]))
|
||||||
|
@ -8,7 +9,7 @@
|
||||||
|
|
||||||
(def chevron-icon-container-height 20)
|
(def chevron-icon-container-height 20)
|
||||||
|
|
||||||
(defn divider-label
|
(defn themed-view
|
||||||
"label -> string
|
"label -> string
|
||||||
chevron-position -> :left, :right
|
chevron-position -> :left, :right
|
||||||
chevron-icon -> keyword
|
chevron-icon -> keyword
|
||||||
|
@ -16,7 +17,8 @@
|
||||||
padding-bottom -> number
|
padding-bottom -> number
|
||||||
counter-value -> number
|
counter-value -> number
|
||||||
increase-padding-top? -> boolean
|
increase-padding-top? -> boolean
|
||||||
blur? -> boolean"
|
blur? -> boolean
|
||||||
|
theme -> theme value passed from with-theme HOC"
|
||||||
[{:keys [label
|
[{:keys [label
|
||||||
chevron-position
|
chevron-position
|
||||||
chevron-icon
|
chevron-icon
|
||||||
|
@ -25,8 +27,9 @@
|
||||||
padding-bottom
|
padding-bottom
|
||||||
blur?
|
blur?
|
||||||
container-style
|
container-style
|
||||||
on-press]}]
|
on-press
|
||||||
(let [dark? (colors/dark?)
|
theme]}]
|
||||||
|
(let [dark? (= :dark theme)
|
||||||
border-and-counter-bg-color (if dark?
|
border-and-counter-bg-color (if dark?
|
||||||
(if blur? colors/white-opa-5 colors/neutral-70)
|
(if blur? colors/white-opa-5 colors/neutral-70)
|
||||||
colors/neutral-10)
|
colors/neutral-10)
|
||||||
|
@ -83,3 +86,5 @@
|
||||||
:weight :medium
|
:weight :medium
|
||||||
:style {:color counter-text-color}}
|
:style {:color counter-text-color}}
|
||||||
counter-value]])]]))
|
counter-value]])]]))
|
||||||
|
|
||||||
|
(def divider-label (theme/with-theme themed-view))
|
||||||
|
|
|
@ -1,6 +1,5 @@
|
||||||
(ns quo2.components.tabs.tab.style
|
(ns quo2.components.tabs.tab.style
|
||||||
(:require [quo2.foundations.colors :as colors]
|
(:require [quo2.foundations.colors :as colors]))
|
||||||
[quo2.theme :as theme]))
|
|
||||||
|
|
||||||
(def tab-background-opacity 0.3)
|
(def tab-background-opacity 0.3)
|
||||||
|
|
||||||
|
@ -99,10 +98,10 @@
|
||||||
:label {:style {:color colors/white}}}}})
|
:label {:style {:color colors/white}}}}})
|
||||||
|
|
||||||
(defn by-theme
|
(defn by-theme
|
||||||
[{:keys [override-theme disabled active blur?]}]
|
[{:keys [disabled active blur? theme]}]
|
||||||
(let [state (cond disabled :disabled
|
(let [state (cond disabled :disabled
|
||||||
active :active
|
active :active
|
||||||
:else :default)
|
:else :default)]
|
||||||
theme (or override-theme (theme/get-theme))]
|
|
||||||
(get-in (if blur? themes-for-blur-background themes)
|
(get-in (if blur? themes-for-blur-background themes)
|
||||||
[theme state])))
|
[theme state])))
|
||||||
|
|
|
@ -1,8 +1,9 @@
|
||||||
(ns quo2.components.tabs.tab.view
|
(ns quo2.components.tabs.tab.view
|
||||||
(:require [quo2.components.icon :as icons]
|
(:require [quo2.components.icon :as icons]
|
||||||
[quo2.components.markdown.text :as text]
|
[quo2.components.markdown.text :as text]
|
||||||
[quo2.components.tabs.tab.style :as style]
|
|
||||||
[quo2.components.notifications.notification-dot :as notification-dot]
|
[quo2.components.notifications.notification-dot :as notification-dot]
|
||||||
|
[quo2.components.tabs.tab.style :as style]
|
||||||
|
[quo2.theme :as theme]
|
||||||
[react-native.core :as rn]
|
[react-native.core :as rn]
|
||||||
[react-native.svg :as svg]))
|
[react-native.svg :as svg]))
|
||||||
|
|
||||||
|
@ -46,7 +47,7 @@
|
||||||
(vector? children)
|
(vector? children)
|
||||||
children)])
|
children)])
|
||||||
|
|
||||||
(defn view
|
(defn- themed-view
|
||||||
[{:keys [accessibility-label
|
[{:keys [accessibility-label
|
||||||
active
|
active
|
||||||
before
|
before
|
||||||
|
@ -56,7 +57,7 @@
|
||||||
disabled
|
disabled
|
||||||
id
|
id
|
||||||
on-press
|
on-press
|
||||||
override-theme
|
theme
|
||||||
segmented?
|
segmented?
|
||||||
size
|
size
|
||||||
notification-dot?]
|
notification-dot?]
|
||||||
|
@ -65,8 +66,7 @@
|
||||||
(let [show-notification-dot? (and notification-dot? (= size 32))
|
(let [show-notification-dot? (and notification-dot? (= size 32))
|
||||||
{:keys [icon-color
|
{:keys [icon-color
|
||||||
background-color
|
background-color
|
||||||
label]}
|
label]} (style/by-theme {:theme theme
|
||||||
(style/by-theme {:override-theme override-theme
|
|
||||||
:blur? blur?
|
:blur? blur?
|
||||||
:disabled disabled
|
:disabled disabled
|
||||||
:active active})]
|
:active active})]
|
||||||
|
@ -101,3 +101,5 @@
|
||||||
:height size
|
:height size
|
||||||
:disabled disabled
|
:disabled disabled
|
||||||
:background-color background-color}])]]))
|
:background-color background-color}])]]))
|
||||||
|
|
||||||
|
(def view (theme/with-theme themed-view))
|
||||||
|
|
|
@ -65,7 +65,6 @@
|
||||||
flat-list-ref
|
flat-list-ref
|
||||||
number-of-items
|
number-of-items
|
||||||
on-change
|
on-change
|
||||||
override-theme
|
|
||||||
scroll-on-press?
|
scroll-on-press?
|
||||||
size
|
size
|
||||||
style]}
|
style]}
|
||||||
|
@ -80,7 +79,6 @@
|
||||||
:notification-dot? notification-dot?
|
:notification-dot? notification-dot?
|
||||||
:accessibility-label accessibility-label
|
:accessibility-label accessibility-label
|
||||||
:size size
|
:size size
|
||||||
:override-theme override-theme
|
|
||||||
:blur? blur?
|
:blur? blur?
|
||||||
:active (= id @active-tab-id)
|
:active (= id @active-tab-id)
|
||||||
:on-press (fn [id]
|
:on-press (fn [id]
|
||||||
|
@ -101,7 +99,6 @@
|
||||||
- `blur?` Boolean passed down to `quo2.components.tabs.tab/tab`.
|
- `blur?` Boolean passed down to `quo2.components.tabs.tab/tab`.
|
||||||
- `data` Vector of tab items.
|
- `data` Vector of tab items.
|
||||||
- `on-change` Callback called after a tab is selected.
|
- `on-change` Callback called after a tab is selected.
|
||||||
- `override-theme` Passed down to `quo2.components.tabs.tab/tab`.
|
|
||||||
- `size` 32/24
|
- `size` 32/24
|
||||||
- `style` Style map passed to View wrapping tabs or to the FlatList when tabs
|
- `style` Style map passed to View wrapping tabs or to the FlatList when tabs
|
||||||
are scrollable.
|
are scrollable.
|
||||||
|
@ -132,7 +129,6 @@
|
||||||
style
|
style
|
||||||
size
|
size
|
||||||
blur?
|
blur?
|
||||||
override-theme
|
|
||||||
in-scroll-view?]
|
in-scroll-view?]
|
||||||
:or {fade-end-percentage fade-end-percentage
|
:or {fade-end-percentage fade-end-percentage
|
||||||
fade-end? false
|
fade-end? false
|
||||||
|
@ -183,7 +179,6 @@
|
||||||
:flat-list-ref flat-list-ref
|
:flat-list-ref flat-list-ref
|
||||||
:number-of-items (count data)
|
:number-of-items (count data)
|
||||||
:on-change on-change
|
:on-change on-change
|
||||||
:override-theme override-theme
|
|
||||||
:scroll-on-press? scroll-on-press?
|
:scroll-on-press? scroll-on-press?
|
||||||
:size size
|
:size size
|
||||||
:style style})})]]]
|
:style style})})]]]
|
||||||
|
@ -195,7 +190,6 @@
|
||||||
:blur? blur?
|
:blur? blur?
|
||||||
:number-of-items (count data)
|
:number-of-items (count data)
|
||||||
:on-change on-change
|
:on-change on-change
|
||||||
:override-theme override-theme
|
|
||||||
:size size
|
:size size
|
||||||
:style style}
|
:style style}
|
||||||
item
|
item
|
||||||
|
|
|
@ -1,19 +1,23 @@
|
||||||
(ns quo2.theme
|
(ns quo2.theme
|
||||||
(:require [reagent.core :as reagent]))
|
(:require [react-native.core :as rn]
|
||||||
|
["react" :as react]
|
||||||
|
[reagent.core :as reagent]
|
||||||
|
utils.transforms))
|
||||||
|
|
||||||
(def theme (reagent/atom :light))
|
(defonce ^:private theme-context (react/createContext :light))
|
||||||
|
(defonce ^:private theme-state (reagent/atom :light))
|
||||||
|
|
||||||
(defn dark?
|
(defn dark?
|
||||||
[]
|
[]
|
||||||
(= :dark @theme))
|
(= :dark @theme-state))
|
||||||
|
|
||||||
(defn get-theme
|
(defn get-theme
|
||||||
[]
|
[]
|
||||||
@theme)
|
@theme-state)
|
||||||
|
|
||||||
(defn set-theme
|
(defn set-theme
|
||||||
[value]
|
[value]
|
||||||
(reset! theme value))
|
(reset! theme-state value))
|
||||||
|
|
||||||
(defn theme-value
|
(defn theme-value
|
||||||
"Returns a value based on the current/override-theme theme."
|
"Returns a value based on the current/override-theme theme."
|
||||||
|
@ -22,3 +26,31 @@
|
||||||
([light-value dark-value override-theme]
|
([light-value dark-value override-theme]
|
||||||
(let [theme (or override-theme (get-theme))]
|
(let [theme (or override-theme (get-theme))]
|
||||||
(if (= theme :light) light-value dark-value))))
|
(if (= theme :light) light-value dark-value))))
|
||||||
|
|
||||||
|
(defn provider
|
||||||
|
"Wrap `children` in a React Provider using `quo2.theme/theme-context` as the
|
||||||
|
context.
|
||||||
|
|
||||||
|
`options`: Clojure map. Currently we only use the `:theme` key. In the future
|
||||||
|
we may support other settings.
|
||||||
|
"
|
||||||
|
[options & children]
|
||||||
|
(into [:> (.-Provider theme-context) {:value options}]
|
||||||
|
children))
|
||||||
|
|
||||||
|
(defn use-theme
|
||||||
|
"A hook that returns the current theme context."
|
||||||
|
[]
|
||||||
|
(utils.transforms/js->clj (rn/use-context theme-context)))
|
||||||
|
|
||||||
|
(defn ^:private f-with-theme
|
||||||
|
[component props & args]
|
||||||
|
(let [theme (-> (use-theme) :theme keyword)]
|
||||||
|
(into [component (assoc props :theme theme)] args)))
|
||||||
|
|
||||||
|
(defn with-theme
|
||||||
|
"Create a functional component that assoc `:theme` into the first arg of
|
||||||
|
`component`. The theme value is taken from the nearest `quo2.theme/provider`."
|
||||||
|
[component]
|
||||||
|
(fn [& args]
|
||||||
|
(into [:f> f-with-theme component] args)))
|
||||||
|
|
|
@ -95,6 +95,10 @@
|
||||||
[ref]
|
[ref]
|
||||||
(oops/oget ref "current"))
|
(oops/oget ref "current"))
|
||||||
|
|
||||||
|
(def create-context react/createContext)
|
||||||
|
|
||||||
|
(def use-context react/useContext)
|
||||||
|
|
||||||
(defn use-effect
|
(defn use-effect
|
||||||
([effect-fn]
|
([effect-fn]
|
||||||
(use-effect effect-fn []))
|
(use-effect effect-fn []))
|
||||||
|
|
|
@ -1,5 +1,6 @@
|
||||||
(ns status-im.bottom-sheet.sheets
|
(ns status-im.bottom-sheet.sheets
|
||||||
(:require [utils.re-frame :as rf]
|
(:require [utils.re-frame :as rf]
|
||||||
|
[quo2.theme :as theme]
|
||||||
[status-im.ui.screens.about-app.views :as about-app]
|
[status-im.ui.screens.about-app.views :as about-app]
|
||||||
[status-im.ui.screens.keycard.views :as keycard]
|
[status-im.ui.screens.keycard.views :as keycard]
|
||||||
[status-im.ui.screens.mobile-network-settings.view :as mobile-network-settings]
|
[status-im.ui.screens.mobile-network-settings.view :as mobile-network-settings]
|
||||||
|
@ -28,7 +29,8 @@
|
||||||
(merge keycard/more-sheet)
|
(merge keycard/more-sheet)
|
||||||
|
|
||||||
(= view :learn-more)
|
(= view :learn-more)
|
||||||
(merge about-app/learn-more))]
|
(merge about-app/learn-more))
|
||||||
|
page-theme (:theme options)]
|
||||||
|
|
||||||
[:f>
|
[:f>
|
||||||
(fn []
|
(fn []
|
||||||
|
@ -36,6 +38,7 @@
|
||||||
(rn/hw-back-add-listener dismiss-bottom-sheet-callback)
|
(rn/hw-back-add-listener dismiss-bottom-sheet-callback)
|
||||||
(fn []
|
(fn []
|
||||||
(rn/hw-back-remove-listener dismiss-bottom-sheet-callback))))
|
(rn/hw-back-remove-listener dismiss-bottom-sheet-callback))))
|
||||||
|
[theme/provider {:theme (or page-theme (theme/get-theme))}
|
||||||
[bottom-sheet/bottom-sheet opts
|
[bottom-sheet/bottom-sheet opts
|
||||||
(when content
|
(when content
|
||||||
[content (when options options)])])]))
|
[content (when options options)])]])]))
|
||||||
|
|
|
@ -83,7 +83,6 @@
|
||||||
{:size 32
|
{:size 32
|
||||||
:scrollable? true
|
:scrollable? true
|
||||||
:blur? true
|
:blur? true
|
||||||
:override-theme :dark
|
|
||||||
:style style/tabs
|
:style style/tabs
|
||||||
:fade-end-percentage 0.79
|
:fade-end-percentage 0.79
|
||||||
:scroll-on-press? true
|
:scroll-on-press? true
|
||||||
|
|
|
@ -120,8 +120,7 @@
|
||||||
:size 32
|
:size 32
|
||||||
:icon true
|
:icon true
|
||||||
:on-press show-new-account-options
|
:on-press show-new-account-options
|
||||||
:accessibility-label :show-new-account-options
|
:accessibility-label :show-new-account-options}
|
||||||
:override-theme :dark}
|
|
||||||
:main-icons/add]]
|
:main-icons/add]]
|
||||||
[rn/flat-list
|
[rn/flat-list
|
||||||
{:data (sort-by :timestamp > profiles-data)
|
{:data (sort-by :timestamp > profiles-data)
|
||||||
|
|
|
@ -2,6 +2,7 @@
|
||||||
(:require [utils.i18n :as i18n]
|
(:require [utils.i18n :as i18n]
|
||||||
[quo2.core :as quo]
|
[quo2.core :as quo]
|
||||||
[quo2.foundations.colors :as colors]
|
[quo2.foundations.colors :as colors]
|
||||||
|
[quo2.theme :as theme]
|
||||||
[utils.re-frame :as rf]
|
[utils.re-frame :as rf]
|
||||||
[react-native.core :as rn]
|
[react-native.core :as rn]
|
||||||
[react-native.blur :as blur]
|
[react-native.blur :as blur]
|
||||||
|
@ -98,6 +99,7 @@
|
||||||
width (rf/sub [:dimensions/window-width])
|
width (rf/sub [:dimensions/window-width])
|
||||||
top (safe-area/get-top)
|
top (safe-area/get-top)
|
||||||
shell-margin (/ (- width (* 2 shell.constants/switcher-card-size)) 3)]
|
shell-margin (/ (- width (* 2 shell.constants/switcher-card-size)) 3)]
|
||||||
|
[theme/provider {:theme :dark}
|
||||||
[rn/view
|
[rn/view
|
||||||
{:style {:top 0
|
{:style {:top 0
|
||||||
:left 0
|
:left 0
|
||||||
|
@ -111,4 +113,4 @@
|
||||||
{:type :shell
|
{:type :shell
|
||||||
:avatar {:customization-color customization-color}
|
:avatar {:customization-color customization-color}
|
||||||
:style {:margin-top top
|
:style {:margin-top top
|
||||||
:z-index 2}}]]))
|
:z-index 2}}]]]))
|
||||||
|
|
|
@ -125,7 +125,6 @@
|
||||||
:icon-color colors/success-50
|
:icon-color colors/success-50
|
||||||
:text (i18n/label
|
:text (i18n/label
|
||||||
:t/sharing-copied-to-clipboard)}]))
|
:t/sharing-copied-to-clipboard)}]))
|
||||||
:override-theme :dark
|
|
||||||
:type :grey
|
:type :grey
|
||||||
:style {:margin-top 12}
|
:style {:margin-top 12}
|
||||||
:before :i/copy}
|
:before :i/copy}
|
||||||
|
|
|
@ -73,6 +73,7 @@
|
||||||
(def transparent-screen-options
|
(def transparent-screen-options
|
||||||
(merge
|
(merge
|
||||||
{:modalPresentationStyle :overCurrentContext
|
{:modalPresentationStyle :overCurrentContext
|
||||||
|
:theme :dark
|
||||||
:layout {:componentBackgroundColor :transparent
|
:layout {:componentBackgroundColor :transparent
|
||||||
:orientation ["portrait"]
|
:orientation ["portrait"]
|
||||||
:backgroundColor :transparent}}
|
:backgroundColor :transparent}}
|
||||||
|
@ -96,7 +97,8 @@
|
||||||
|
|
||||||
(def dark-screen
|
(def dark-screen
|
||||||
(merge (statusbar true)
|
(merge (statusbar true)
|
||||||
{:layout {:componentBackgroundColor colors/neutral-95
|
{:theme :dark
|
||||||
|
:layout {:componentBackgroundColor colors/neutral-95
|
||||||
:orientation ["portrait"]
|
:orientation ["portrait"]
|
||||||
:backgroundColor colors/neutral-95}}))
|
:backgroundColor colors/neutral-95}}))
|
||||||
|
|
||||||
|
|
|
@ -81,7 +81,8 @@
|
||||||
:component add-new-contact/new-contact}
|
:component add-new-contact/new-contact}
|
||||||
|
|
||||||
{:name :how-to-pair
|
{:name :how-to-pair
|
||||||
:options {:sheet? true}
|
:options {:theme :dark
|
||||||
|
:sheet? true}
|
||||||
:component how-to-pair/instructions}
|
:component how-to-pair/instructions}
|
||||||
|
|
||||||
{:name :discover-communities
|
{:name :discover-communities
|
||||||
|
@ -100,31 +101,38 @@
|
||||||
|
|
||||||
;; Onboarding
|
;; Onboarding
|
||||||
{:name :intro
|
{:name :intro
|
||||||
|
:options {:theme :dark}
|
||||||
:component intro/view}
|
:component intro/view}
|
||||||
|
|
||||||
{:name :profiles
|
{:name :profiles
|
||||||
:options {:layout options/onboarding-layout}
|
:options {:theme :dark
|
||||||
|
:layout options/onboarding-layout}
|
||||||
:component profiles/views}
|
:component profiles/views}
|
||||||
|
|
||||||
{:name :new-to-status
|
{:name :new-to-status
|
||||||
:options {:layout options/onboarding-layout}
|
:options {:theme :dark
|
||||||
|
:layout options/onboarding-layout}
|
||||||
:component new-to-status/new-to-status}
|
:component new-to-status/new-to-status}
|
||||||
|
|
||||||
{:name :create-profile
|
{:name :create-profile
|
||||||
:options {:layout options/onboarding-layout}
|
:options {:theme :dark
|
||||||
|
:layout options/onboarding-layout}
|
||||||
:component create-profile/create-profile}
|
:component create-profile/create-profile}
|
||||||
|
|
||||||
{:name :create-profile-password
|
{:name :create-profile-password
|
||||||
:options {:insets {:top false}
|
:options {:theme :dark
|
||||||
|
:insets {:top false}
|
||||||
:layout options/onboarding-layout}
|
:layout options/onboarding-layout}
|
||||||
:component create-password/create-password}
|
:component create-password/create-password}
|
||||||
|
|
||||||
{:name :enable-biometrics
|
{:name :enable-biometrics
|
||||||
:options {:layout options/onboarding-layout}
|
:options {:theme :dark
|
||||||
|
:layout options/onboarding-layout}
|
||||||
:component enable-biometrics/enable-biometrics}
|
:component enable-biometrics/enable-biometrics}
|
||||||
|
|
||||||
{:name :generating-keys
|
{:name :generating-keys
|
||||||
:options {:layout options/onboarding-layout
|
:options {:theme :dark
|
||||||
|
:layout options/onboarding-layout
|
||||||
:popGesture false
|
:popGesture false
|
||||||
:hardwareBackButton {:dismissModalOnPress false
|
:hardwareBackButton {:dismissModalOnPress false
|
||||||
:popStackOnPress false}}
|
:popStackOnPress false}}
|
||||||
|
@ -135,7 +143,8 @@
|
||||||
:component enter-seed-phrase/enter-seed-phrase}
|
:component enter-seed-phrase/enter-seed-phrase}
|
||||||
|
|
||||||
{:name :enable-notifications
|
{:name :enable-notifications
|
||||||
:options {:layout options/onboarding-layout
|
:options {:theme :dark
|
||||||
|
:layout options/onboarding-layout
|
||||||
:popGesture false
|
:popGesture false
|
||||||
:hardwareBackButton {:dismissModalOnPress false
|
:hardwareBackButton {:dismissModalOnPress false
|
||||||
:popStackOnPress false}}
|
:popStackOnPress false}}
|
||||||
|
@ -143,11 +152,13 @@
|
||||||
|
|
||||||
{:name :identifiers
|
{:name :identifiers
|
||||||
:component identifiers/view
|
:component identifiers/view
|
||||||
:options {:layout options/onboarding-layout
|
:options {:theme :dark
|
||||||
|
:layout options/onboarding-layout
|
||||||
:popGesture false
|
:popGesture false
|
||||||
:hardwareBackButton {:dismissModalOnPress false
|
:hardwareBackButton {:dismissModalOnPress false
|
||||||
:popStackOnPress false}}}
|
:popStackOnPress false}}}
|
||||||
{:name :scan-sync-code-page
|
{:name :scan-sync-code-page
|
||||||
|
:options {:theme :dark}
|
||||||
:component scan-sync-code-page/view}
|
:component scan-sync-code-page/view}
|
||||||
|
|
||||||
{:name :sign-in
|
{:name :sign-in
|
||||||
|
@ -155,15 +166,18 @@
|
||||||
:component sign-in/view}
|
:component sign-in/view}
|
||||||
|
|
||||||
{:name :syncing-progress
|
{:name :syncing-progress
|
||||||
:options {:layout options/onboarding-layout
|
:options {:theme :dark
|
||||||
|
:layout options/onboarding-layout
|
||||||
:popGesture false}
|
:popGesture false}
|
||||||
:component syncing-devices/view}
|
:component syncing-devices/view}
|
||||||
|
|
||||||
{:name :syncing-results
|
{:name :syncing-results
|
||||||
|
:options {:theme :dark}
|
||||||
:component syncing-results/view}
|
:component syncing-results/view}
|
||||||
|
|
||||||
{:name :welcome
|
{:name :welcome
|
||||||
:options {:layout options/onboarding-layout}
|
:options {:theme :dark
|
||||||
|
:layout options/onboarding-layout}
|
||||||
:component welcome/view}]
|
:component welcome/view}]
|
||||||
|
|
||||||
(when config/quo-preview-enabled?
|
(when config/quo-preview-enabled?
|
||||||
|
|
|
@ -14,7 +14,8 @@
|
||||||
[status-im2.navigation.screens :as screens]
|
[status-im2.navigation.screens :as screens]
|
||||||
[status-im2.setup.hot-reload :as reloader]
|
[status-im2.setup.hot-reload :as reloader]
|
||||||
[utils.re-frame :as rf]
|
[utils.re-frame :as rf]
|
||||||
[status-im2.common.bottom-sheet-screen.view :as bottom-sheet-screen]))
|
[status-im2.common.bottom-sheet-screen.view :as bottom-sheet-screen]
|
||||||
|
[quo2.theme :as theme]))
|
||||||
|
|
||||||
(defn get-screens
|
(defn get-screens
|
||||||
[]
|
[]
|
||||||
|
@ -53,15 +54,17 @@
|
||||||
[key]
|
[key]
|
||||||
(reagent.core/reactify-component
|
(reagent.core/reactify-component
|
||||||
(fn []
|
(fn []
|
||||||
(let [{:keys [component options]}
|
(let [{:keys [component options]} (get (if js/goog.DEBUG
|
||||||
(get (if js/goog.DEBUG (get-screens) screens) (keyword key)) ;; needed for hot reload
|
(get-screens)
|
||||||
{:keys [insets sheet?]} options
|
screens)
|
||||||
|
(keyword key))
|
||||||
|
{:keys [insets sheet? theme]} options
|
||||||
|
user-theme (theme/get-theme)
|
||||||
background-color (or (get-in options [:layout :backgroundColor])
|
background-color (or (get-in options [:layout :backgroundColor])
|
||||||
(when sheet? :transparent))]
|
(when sheet? :transparent))]
|
||||||
^{:key (str "root" key @reloader/cnt)}
|
^{:key (str "root" key @reloader/cnt)}
|
||||||
[:<>
|
[theme/provider {:theme (or theme user-theme)}
|
||||||
[rn/view
|
[rn/view {:style (wrapped-screen-style insets background-color)}
|
||||||
{:style (wrapped-screen-style insets background-color)}
|
|
||||||
[inactive]
|
[inactive]
|
||||||
(if sheet?
|
(if sheet?
|
||||||
[:f> bottom-sheet-screen/f-view component]
|
[:f> bottom-sheet-screen/f-view component]
|
||||||
|
@ -72,11 +75,13 @@
|
||||||
(def bottom-sheet
|
(def bottom-sheet
|
||||||
(reagent/reactify-component
|
(reagent/reactify-component
|
||||||
(fn []
|
(fn []
|
||||||
(let [{:keys [sheets hide?]} (rf/sub [:bottom-sheet])
|
(let [{:keys [sheets hide? theme]} (rf/sub [:bottom-sheet])
|
||||||
sheet (last sheets)
|
sheet (last sheets)
|
||||||
insets (safe-area/get-insets)]
|
insets (safe-area/get-insets)
|
||||||
|
user-theme (theme/get-theme)]
|
||||||
^{:key (str "sheet" @reloader/cnt)}
|
^{:key (str "sheet" @reloader/cnt)}
|
||||||
[:<>
|
(js/console.log "HEHREHRE")
|
||||||
|
[theme/provider {:theme (or theme user-theme)}
|
||||||
[inactive]
|
[inactive]
|
||||||
[rn/keyboard-avoiding-view
|
[rn/keyboard-avoiding-view
|
||||||
{:style {:position :relative :flex 1}
|
{:style {:position :relative :flex 1}
|
||||||
|
|
22
yarn.lock
22
yarn.lock
|
@ -8768,7 +8768,7 @@ prompts@^2.4.0:
|
||||||
kleur "^3.0.3"
|
kleur "^3.0.3"
|
||||||
sisteransi "^1.0.5"
|
sisteransi "^1.0.5"
|
||||||
|
|
||||||
prop-types@15.x.x, prop-types@^15.6.2, prop-types@^15.7.2:
|
prop-types@15.x.x, prop-types@^15.7.2:
|
||||||
version "15.7.2"
|
version "15.7.2"
|
||||||
resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.7.2.tgz#52c41e75b8c87e72b9d9360e0206b99dcbffa6c5"
|
resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.7.2.tgz#52c41e75b8c87e72b9d9360e0206b99dcbffa6c5"
|
||||||
integrity sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ==
|
integrity sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ==
|
||||||
|
@ -8931,15 +8931,13 @@ react-devtools-core@4.24.0:
|
||||||
shell-quote "^1.6.1"
|
shell-quote "^1.6.1"
|
||||||
ws "^7"
|
ws "^7"
|
||||||
|
|
||||||
react-dom@^16.4.2:
|
react-dom@18.0.0:
|
||||||
version "16.13.1"
|
version "18.0.0"
|
||||||
resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-16.13.1.tgz#c1bd37331a0486c078ee54c4740720993b2e0e7f"
|
resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-18.0.0.tgz#26b88534f8f1dbb80853e1eabe752f24100d8023"
|
||||||
integrity sha512-81PIMmVLnCNLO/fFOQxdQkvEq/+Hfpv24XNJfpyZhTRfO0QcmQIF/PgCa1zCOj2w1hrn12MFLyaJ/G0+Mxtfag==
|
integrity sha512-XqX7uzmFo0pUceWFCt7Gff6IyIMzFUn7QMZrbrQfGxtaxXZIcGQzoNpRLE3fQLnS4XzLLPMZX2T9TRcSrasicw==
|
||||||
dependencies:
|
dependencies:
|
||||||
loose-envify "^1.1.0"
|
loose-envify "^1.1.0"
|
||||||
object-assign "^4.1.1"
|
scheduler "^0.21.0"
|
||||||
prop-types "^15.6.2"
|
|
||||||
scheduler "^0.19.1"
|
|
||||||
|
|
||||||
react-is@^16.12.0, react-is@^16.7.0, react-is@^16.8.1:
|
react-is@^16.12.0, react-is@^16.7.0, react-is@^16.8.1:
|
||||||
version "16.13.1"
|
version "16.13.1"
|
||||||
|
@ -9762,14 +9760,6 @@ saxes@^5.0.1:
|
||||||
dependencies:
|
dependencies:
|
||||||
xmlchars "^2.2.0"
|
xmlchars "^2.2.0"
|
||||||
|
|
||||||
scheduler@^0.19.1:
|
|
||||||
version "0.19.1"
|
|
||||||
resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.19.1.tgz#4f3e2ed2c1a7d65681f4c854fa8c5a1ccb40f196"
|
|
||||||
integrity sha512-n/zwRWRYSUj0/3g/otKDRPMh6qv2SYMWNq85IEa8iZyAv8od9zDYpGSnpBEjNgcMNq6Scbu5KfIPxNF72R/2EA==
|
|
||||||
dependencies:
|
|
||||||
loose-envify "^1.1.0"
|
|
||||||
object-assign "^4.1.1"
|
|
||||||
|
|
||||||
scheduler@^0.21.0:
|
scheduler@^0.21.0:
|
||||||
version "0.21.0"
|
version "0.21.0"
|
||||||
resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.21.0.tgz#6fd2532ff5a6d877b6edb12f00d8ab7e8f308820"
|
resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.21.0.tgz#6fd2532ff5a6d877b6edb12f00d8ab7e8f308820"
|
||||||
|
|
Loading…
Reference in New Issue