diff --git a/src/status_im2/contexts/onboarding/new_to_status/view.cljs b/src/status_im2/contexts/onboarding/new_to_status/view.cljs index 84af75b363..01808bb4de 100644 --- a/src/status_im2/contexts/onboarding/new_to_status/view.cljs +++ b/src/status_im2/contexts/onboarding/new_to_status/view.cljs @@ -9,7 +9,8 @@ [utils.i18n :as i18n] [utils.re-frame :as rf] [status-im2.contexts.onboarding.common.overlay.view :as overlay] - [status-im2.contexts.profile.profiles.view :as profiles])) + [status-im2.contexts.profile.profiles.view :as profiles] + [status-im2.config :as config])) (defn navigate-back [] @@ -109,14 +110,19 @@ :icon-background :blur :icon :i/arrow-left :on-press navigate-back} - :right-section-buttons [{:type :grey - :icon :i/info - :icon-background :blur - :icon-override-theme :dark - :on-press #(rf/dispatch - [:show-bottom-sheet - {:content getting-started-doc - :shell? true}])}]}]]) + :right-section-buttons [(when config/quo-preview-enabled? + {:type :grey + :icon :i/reveal-whitelist + :icon-background :blur + :on-press #(rf/dispatch [:navigate-to + :quo2-preview])}) + {:type :grey + :icon :i/info + :icon-background :blur + :on-press #(rf/dispatch + [:show-bottom-sheet + {:content getting-started-doc + :shell? true}])}]}]]) (defn new-to-status [] diff --git a/src/status_im2/contexts/profile/profiles/style.cljs b/src/status_im2/contexts/profile/profiles/style.cljs index 7753eb3976..458cadcfc0 100644 --- a/src/status_im2/contexts/profile/profiles/style.cljs +++ b/src/status_im2/contexts/profile/profiles/style.cljs @@ -45,9 +45,10 @@ :padding-top 56 :padding-horizontal 20}) -(def multi-profile-button - {:align-self :flex-end - :margin-bottom 20}) +(def multi-profile-button-container + {:flex-direction :row + :justify-content :flex-end + :margin-bottom 20}) (def login-profile-card {:margin-bottom 20}) diff --git a/src/status_im2/contexts/profile/profiles/view.cljs b/src/status_im2/contexts/profile/profiles/view.cljs index e37f6a20f3..d7e0ff9fa2 100644 --- a/src/status_im2/contexts/profile/profiles/view.cljs +++ b/src/status_im2/contexts/profile/profiles/view.cljs @@ -1,21 +1,22 @@ (ns status-im2.contexts.profile.profiles.view - (:require [native-module.core :as native-module] + (:require [clojure.string :as string] + [native-module.core :as native-module] [quo2.core :as quo] + [quo2.foundations.colors :as colors] [react-native.core :as rn] + [react-native.reanimated :as reanimated] + [react-native.safe-area :as safe-area] [reagent.core :as reagent] [status-im2.common.confirmation-drawer.view :as confirmation-drawer] + [status-im2.config :as config] + [status-im2.constants :as constants] [status-im2.contexts.onboarding.common.background.view :as background] [status-im2.contexts.profile.profiles.style :as style] [taoensso.timbre :as log] [utils.i18n :as i18n] [utils.re-frame :as rf] [utils.security.core :as security] - [utils.transforms :as types] - [quo2.foundations.colors :as colors] - [react-native.safe-area :as safe-area] - [clojure.string :as string] - [react-native.reanimated :as reanimated] - [status-im2.constants :as constants])) + [utils.transforms :as types])) (defonce push-animation-fn-atom (atom nil)) (defonce pop-animation-fn-atom (atom nil)) @@ -228,16 +229,28 @@ [rn/keyboard-avoiding-view {:style style/login-container :keyboardVerticalOffset (- (safe-area/get-bottom))} - [quo/button - {:size 32 - :type :grey - :background :blur - :icon-only? true - :on-press set-show-profiles - :disabled? processing - :accessibility-label :show-profiles - :container-style style/multi-profile-button} - :i/multi-profile] + [rn/view + {:style style/multi-profile-button-container} + (when config/quo-preview-enabled? + [quo/button + {:size 32 + :type :grey + :background :blur + :icon-only? true + :on-press #(rf/dispatch [:navigate-to :quo2-preview]) + :disabled? processing + :accessibility-label :quo2-preview + :container-style {:margin-right 12}} + :i/reveal-whitelist]) + [quo/button + {:size 32 + :type :grey + :background :blur + :icon-only? true + :on-press set-show-profiles + :disabled? processing + :accessibility-label :show-profiles} + :i/multi-profile]] [rn/scroll-view {:keyboard-should-persist-taps :always :style {:flex 1}} diff --git a/src/status_im2/contexts/quo_preview/main.cljs b/src/status_im2/contexts/quo_preview/main.cljs index 0817c24b41..1ebc0dfc91 100644 --- a/src/status_im2/contexts/quo_preview/main.cljs +++ b/src/status_im2/contexts/quo_preview/main.cljs @@ -3,7 +3,7 @@ (:require [quo2.core :as quo] [quo2.foundations.colors :as colors] - [re-frame.core :as re-frame] + [reagent.core :as reagent] [react-native.core :as rn] [status-im2.common.theme.core :as theme] [status-im2.contexts.quo-preview.animated-header-list.animated-header-list :as animated-header-list] @@ -107,7 +107,7 @@ [status-im2.contexts.quo-preview.wallet.network-bridge :as network-bridge] [status-im2.contexts.quo-preview.wallet.account-card :as account-card] [status-im2.contexts.quo-preview.wallet.token-input :as token-input] - [reagent.core :as reagent])) + [utils.re-frame :as rf])) (def screens-categories {:foundations [{:name :shadows @@ -206,7 +206,7 @@ :options {:topBar {:visible true}} :component action-drawers/preview-action-drawers} {:name :documentation-drawer - :insets {:top false} + :options {:topBar {:visible true}} :component documenation-drawers/preview-documenation-drawers} {:name :drawer-buttons :options {:topBar {:visible true}} @@ -420,11 +420,29 @@ (def screens (flatten (map val screens-categories))) +(defn navigation-bar + [] + (let [logged-in? (rf/sub [:multiaccount/logged-in?]) + has-profiles? (boolean (rf/sub [:profile/profiles-overview]))] + [quo/page-nav + {:align-mid? true + :mid-section {:type :text-only + :main-text "Quo2 components preview"} + :left-section {:icon :i/close + :on-press (fn [] + (when-not logged-in? + (theme/set-theme :dark)) + (rf/dispatch [:navigate-back]) + (when-not has-profiles? + (rf/dispatch [:open-modal :new-to-status])))}}])) + (defn theme-switcher [] [rn/view - {:style {:flex-direction :row - :margin-vertical 8}} + {:style {:flex-direction :row + :justify-content :space-between + :padding-horizontal 24 + :padding-vertical 12}} [quo/button {:on-press #(theme/set-theme :light)} "Set light theme"] [quo/button {:on-press #(theme/set-theme :dark)} "Set dark theme"]]) @@ -441,26 +459,28 @@ [quo/button {:type :outline :container-style {:margin-vertical 8} - :on-press #(re-frame/dispatch [:navigate-to name])} + :on-press #(rf/dispatch [:navigate-to name])} (clojure.core/name name)]))]))) (defn main-screen [] (fn [] - [rn/scroll-view - {:flex 1 - :padding-bottom 8 - :padding-horizontal 16 - :background-color (colors/theme-colors colors/white colors/neutral-90)} + [:<> + [navigation-bar] [theme-switcher] - [quo/text {:size :heading-1} "Preview Quo2 Components"] - [rn/view - (map (fn [category] - ^{:key (get category 0)} - [category-view category]) - (sort screens-categories))]])) + [rn/scroll-view + {:flex 1 + :padding-bottom 8 + :padding-horizontal 16 + :background-color (colors/theme-colors colors/white colors/neutral-90)} + [rn/view + (map (fn [category] + ^{:key (get category 0)} + [category-view category]) + (sort screens-categories))]]])) (def main-screens [{:name :quo2-preview - :options {:topBar {:visible true}} + :options {:topBar {:visible false} + :insets {:top? true}} :component main-screen}])