Update entry points for Quo2 Preview (#16843)

This commit adds two new entry points (button on the top right corner in the navigation bar) for the Quo2 preview screen without having to log in to the app:

- "New to Status"
- "login" 

Additionally, this commit updates the theme switcher to be sticky at the top of the Quo2 preview screen to quickly change the theme without having to scroll all the way top.

Signed-off-by: Mohamed Javid <19339952+smohamedjavid@users.noreply.github.com>

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
+     :right-section-buttons [(when config/quo-preview-enabled?
-                              :icon                :i/info
+                               {:type            :grey
-                              :icon-background     :blur
+                                :icon            :i/reveal-whitelist
-                              :icon-override-theme :dark
+                                :icon-background :blur
-                              :on-press            #(rf/dispatch
+                                :on-press        #(rf/dispatch [:navigate-to
-                                                     [:show-bottom-sheet
+                                                                :quo2-preview])})
-                                                      {:content getting-started-doc
+                             {:type            :grey
-                                                       :shell?  true}])}]}]])
+                              :icon            :i/info
+                              :icon-background :blur
+                              :on-press        #(rf/dispatch
+                                                 [:show-bottom-sheet
+                                                  {:content getting-started-doc
+                                                   :shell?  true}])}]}]])
 
 (defn new-to-status
   []

src/status_im2/contexts/profile/profiles/style.cljs

@@ -45,9 +45,10 @@
    :padding-top        56
    :padding-horizontal 20})
 
-(def multi-profile-button
+(def multi-profile-button-container
-  {:align-self    :flex-end
+  {:flex-direction  :row
-   :margin-bottom 20})
+   :justify-content :flex-end
+   :margin-bottom   20})
 
 (def login-profile-card
   {:margin-bottom 20})

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]
+            [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]))
 
 (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
+     [rn/view
-      {:size                32
+      {:style style/multi-profile-button-container}
-       :type                :grey
+      (when config/quo-preview-enabled?
-       :background          :blur
+        [quo/button
-       :icon-only?          true
+         {:size                32
-       :on-press            set-show-profiles
+          :type                :grey
-       :disabled?           processing
+          :background          :blur
-       :accessibility-label :show-profiles
+          :icon-only?          true
-       :container-style     style/multi-profile-button}
+          :on-press            #(rf/dispatch [:navigate-to :quo2-preview])
-      :i/multi-profile]
+          :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}}

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
+   {:style {:flex-direction     :row
-            :margin-vertical 8}}
+            :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
+     [navigation-bar]
-      :padding-bottom     8
-      :padding-horizontal 16
-      :background-color   (colors/theme-colors colors/white colors/neutral-90)}
      [theme-switcher]
-     [quo/text {:size :heading-1} "Preview Quo2 Components"]
+     [rn/scroll-view
-     [rn/view
+      {:flex               1
-      (map (fn [category]
+       :padding-bottom     8
-             ^{:key (get category 0)}
+       :padding-horizontal 16
-             [category-view category])
+       :background-color   (colors/theme-colors colors/white colors/neutral-90)}
-           (sort screens-categories))]]))
+      [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}])