diff --git a/src/status_im2/contexts/quo_preview/browser/browser_input.cljs b/src/status_im2/contexts/quo_preview/browser/browser_input.cljs index 6711e58e80..b760b5951d 100644 --- a/src/status_im2/contexts/quo_preview/browser/browser_input.cljs +++ b/src/status_im2/contexts/quo_preview/browser/browser_input.cljs @@ -1,6 +1,5 @@ (ns status-im2.contexts.quo-preview.browser.browser-input (:require [quo2.core :as quo] - [quo2.foundations.colors :as colors] [react-native.core :as rn] [react-native.safe-area :as safe-area] [reagent.core :as reagent] @@ -18,7 +17,7 @@ :key :disabled? :type :boolean}]) -(defn cool-preview +(defn preview-browser-input [] (reagent/with-let [keyboard-shown? (reagent/atom false) keyboard-show-listener (.addListener rn/keyboard @@ -27,21 +26,22 @@ keyboard-hide-listener (.addListener rn/keyboard "keyboardWillHide" #(reset! keyboard-shown? false)) - {:keys [bottom top]} (safe-area/get-insets) + {:keys [bottom]} (safe-area/get-insets) state (reagent/atom {:blur? false :disabled? false :favicon? false :placeholder "Search or enter dapp domain" :locked? false})] - [rn/keyboard-avoiding-view {:style {:flex 1 :padding-top top}} + [preview/preview-container + {:state state + :descriptor descriptor} [quo/page-nav {:type :no-title :icon-name :i/arrow-left :on-press #(rf/dispatch [:navigate-back])}] [rn/flat-list - {:header [preview/customizer state descriptor] - :key-fn str + {:key-fn str :keyboard-should-persist-taps :always :style {:flex 1}}] [rn/view @@ -53,10 +53,3 @@ (finally (.remove keyboard-show-listener) (.remove keyboard-hide-listener)))) - -(defn preview-browser-input - [] - [rn/view - {:style {:background-color (colors/theme-colors colors/white colors/neutral-95) - :flex 1}} - [cool-preview]]) diff --git a/src/status_im2/contexts/quo_preview/common.cljs b/src/status_im2/contexts/quo_preview/common.cljs new file mode 100644 index 0000000000..768a9fe1c1 --- /dev/null +++ b/src/status_im2/contexts/quo_preview/common.cljs @@ -0,0 +1,25 @@ +(ns status-im2.contexts.quo-preview.common + (:require + [quo2.core :as quo] + [quo2.theme :as theme] + [utils.re-frame :as rf])) + + +(defn navigation-bar + [] + (let [logged-in? (rf/sub [:multiaccount/logged-in?]) + has-profiles? (boolean (rf/sub [:profile/profiles-overview])) + root (if has-profiles? :profiles :intro) + light? (= (theme/get-theme) :light)] + [quo/page-nav + {:type :title + :title "Quo2 components preview" + :text-align :left + :icon-name :i/close + :right-side [{:icon-name (if light? :i/dark :i/light) + :on-press #(if light? (theme/set-theme :dark) (theme/set-theme :light))}] + :on-press #(if (or logged-in? (not= (rf/sub [:view-id]) :quo2-preview)) + (rf/dispatch [:navigate-back]) + (do + (theme/set-theme :dark) + (rf/dispatch [:init-root root])))}])) diff --git a/src/status_im2/contexts/quo_preview/community/channel_actions.cljs b/src/status_im2/contexts/quo_preview/community/channel_actions.cljs index ae4f40eaf6..d638856810 100644 --- a/src/status_im2/contexts/quo_preview/community/channel_actions.cljs +++ b/src/status_im2/contexts/quo_preview/community/channel_actions.cljs @@ -1,27 +1,27 @@ (ns status-im2.contexts.quo-preview.community.channel-actions (:require [quo2.core :as quo] - [react-native.core :as rn])) + [react-native.core :as rn] + [status-im2.contexts.quo-preview.preview :as preview])) (defn view [] - [rn/view {:flex 1} - [rn/scroll-view {:style {:flex 1 :padding-horizontal 20}} - [quo/channel-actions - {:actions [{:big? true - :label "Pinned Messages" - :color :blue - :icon :i/pin - :counter-value 0}]}] - [rn/view {:height 50}] - [quo/channel-actions - {:actions [{:label "Pinned Messages" :color :blue :icon :i/pin :counter-value 5} - {:label "Mute chat" :color :blue :icon :i/muted}]}] - [rn/view {:height 50}] - [quo/channel-actions - {:actions [{:big? true :label "Pinned Messages" :color :blue :icon :i/pin :counter-value 5} - {:label "Mute chat" :color :blue :icon :i/muted}]}] - [rn/view {:height 50}] - [quo/channel-actions - {:actions [{:label "Pinned Messages" :color :blue :icon :i/pin :counter-value 5} - {:label "Mute chat" :color :blue :icon :i/muted} - {:label "Something else" :color :blue :icon :i/placeholder}]}]]]) + [preview/preview-container + [quo/channel-actions + {:actions [{:big? true + :label "Pinned Messages" + :color :blue + :icon :i/pin + :counter-value 0}]}] + [rn/view {:height 50}] + [quo/channel-actions + {:actions [{:label "Pinned Messages" :color :blue :icon :i/pin :counter-value 5} + {:label "Mute chat" :color :blue :icon :i/muted}]}] + [rn/view {:height 50}] + [quo/channel-actions + {:actions [{:big? true :label "Pinned Messages" :color :blue :icon :i/pin :counter-value 5} + {:label "Mute chat" :color :blue :icon :i/muted}]}] + [rn/view {:height 50}] + [quo/channel-actions + {:actions [{:label "Pinned Messages" :color :blue :icon :i/pin :counter-value 5} + {:label "Mute chat" :color :blue :icon :i/muted} + {:label "Something else" :color :blue :icon :i/placeholder}]}]]) diff --git a/src/status_im2/contexts/quo_preview/list_items/token_value.cljs b/src/status_im2/contexts/quo_preview/list_items/token_value.cljs index 80e7c28b31..ee813d66bd 100644 --- a/src/status_im2/contexts/quo_preview/list_items/token_value.cljs +++ b/src/status_im2/contexts/quo_preview/list_items/token_value.cljs @@ -48,9 +48,10 @@ :percentage-change "0.00" :fiat-change "€0.00"}})] (fn [] - [rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!} + [preview/preview-container + {:state state + :descriptor descriptor} [rn/view - [rn/view {:style {:min-height 300}} [preview/customizer state descriptor]] [rn/view {:style {:align-items :center :margin-top 50}} diff --git a/src/status_im2/contexts/quo_preview/list_items/user_list.cljs b/src/status_im2/contexts/quo_preview/list_items/user_list.cljs index 3af76a581d..200d28fa4f 100644 --- a/src/status_im2/contexts/quo_preview/list_items/user_list.cljs +++ b/src/status_im2/contexts/quo_preview/list_items/user_list.cljs @@ -1,7 +1,6 @@ (ns status-im2.contexts.quo-preview.list-items.user-list (:require [react-native.core :as rn] [reagent.core :as reagent] - [quo2.foundations.colors :as colors] [status-im2.contexts.quo-preview.preview :as preview] [quo2.components.list-items.user-list :as user-list] [utils.address :as address])) @@ -39,7 +38,7 @@ {:key {:type :close} :value "Close"}]}]) -(defn cool-preview +(defn preview-user-list [] (let [state (reagent/atom {:primary-name "Alisher Yakupov" :short-chat-key (address/get-shortened-compressed-key @@ -50,24 +49,12 @@ :untrustworthy? false :online? false})] (fn [] - [rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!} + [preview/preview-container + {:state state + :descriptor descriptor} [rn/view {:padding-bottom 150} - [rn/view {:flex 1} - [preview/customizer state descriptor]] [rn/view {:padding-vertical 60 :padding--horizontal 15 :justify-content :center} [user-list/user-list @state]]]]))) - -(defn preview-user-list - [] - [rn/keyboard-avoiding-view {:style {:flex 1}} - [rn/view - {:background-color (colors/theme-colors colors/white colors/neutral-90) - :flex 1} - [rn/flat-list - {:flex 1 - :keyboard-should-persist-taps :always - :header [cool-preview] - :key-fn str}]]]) diff --git a/src/status_im2/contexts/quo_preview/main.cljs b/src/status_im2/contexts/quo_preview/main.cljs index 522486cd40..9b1b3fa1e9 100644 --- a/src/status_im2/contexts/quo_preview/main.cljs +++ b/src/status_im2/contexts/quo_preview/main.cljs @@ -5,7 +5,7 @@ [reagent.core :as reagent] [react-native.core :as rn] [status-im2.contexts.quo-preview.style :as style] - [status-im2.common.theme.core :as theme] + [status-im2.contexts.quo-preview.common :as common] [status-im2.contexts.quo-preview.animated-header-list.animated-header-list :as animated-header-list] [status-im2.contexts.quo-preview.avatars.account-avatar :as account-avatar] [status-im2.contexts.quo-preview.avatars.channel-avatar :as channel-avatar] @@ -330,7 +330,6 @@ {:name :reorder-item :component reorder-item/preview-reorder-item} {:name :category - :options {:topBar {:visible true}} :component category/preview} {:name :data-item :component data-item/preview-data-item}] @@ -367,7 +366,6 @@ {:name :account-overview :component account-overview/preview-account-overview} {:name :keypair - :options {:topBar {:visible true}} :component keypair/preview} {:name :network-amount :component network-amount/preview} @@ -388,28 +386,6 @@ :keycard [{:name :keycard-component :component keycard/view}]}) -(defn- navigation-bar - [] - (let [logged-in? (rf/sub [:multiaccount/logged-in?]) - has-profiles? (boolean (rf/sub [:profile/profiles-overview])) - root (if has-profiles? :profiles :intro)] - [quo/page-nav - {:type :title - :title "Quo2 components preview" - :text-align :left - :icon-name :i/close - :on-press #(if logged-in? - (rf/dispatch [:navigate-back]) - (do - (theme/set-theme :dark) - (rf/dispatch [:init-root root])))}])) - -(defn- theme-switcher - [] - [rn/view {:style style/theme-switcher} - [quo/button {:on-press #(theme/set-theme :light)} "Set light theme"] - [quo/button {:on-press #(theme/set-theme :dark)} "Set dark theme"]]) - (defn- category-view [] (let [open? (reagent/atom false) @@ -433,8 +409,7 @@ (defn- main-screen [] [:<> - [navigation-bar] - [theme-switcher] + [common/navigation-bar] [rn/scroll-view {:style (style/main)} (for [category (sort screens-categories)] ^{:key (first category)} @@ -448,7 +423,7 @@ (update-in subcategory [:options :topBar] merge - {:visible true}))))) + {:visible false}))))) (def main-screens [{:name :quo2-preview diff --git a/src/status_im2/contexts/quo_preview/markdown/text.cljs b/src/status_im2/contexts/quo_preview/markdown/text.cljs index 8c6aadae2d..1f5dc3226d 100644 --- a/src/status_im2/contexts/quo_preview/markdown/text.cljs +++ b/src/status_im2/contexts/quo_preview/markdown/text.cljs @@ -1,6 +1,5 @@ (ns status-im2.contexts.quo-preview.markdown.text (:require [quo2.components.markdown.text :as quo2] - [quo2.foundations.colors :as colors] [react-native.core :as rn] [reagent.core :as reagent] [status-im2.contexts.quo-preview.preview :as preview])) @@ -31,24 +30,14 @@ {:key :monospace :value "Monospace"}]}]) -(defn cool-preview +(defn preview-text [] (let [state (reagent/atom {})] (fn [] - [rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!} + [preview/preview-container + {:state state + :descriptor descriptor} [rn/view {:padding-bottom 150} - [preview/customizer state descriptor] [rn/view {:padding-vertical 60} [quo2/text @state "The quick brown fox jumped over the lazy dog."]]]]))) - -(defn preview-text - [] - [rn/view - {:background-color (colors/theme-colors colors/white colors/neutral-90) - :flex 1} - [rn/flat-list - {:flex 1 - :keyboard-should-persist-taps :always - :header [cool-preview] - :key-fn str}]]) diff --git a/src/status_im2/contexts/quo_preview/messages/author.cljs b/src/status_im2/contexts/quo_preview/messages/author.cljs index 28f8b9d637..19a1514a9f 100644 --- a/src/status_im2/contexts/quo_preview/messages/author.cljs +++ b/src/status_im2/contexts/quo_preview/messages/author.cljs @@ -1,7 +1,6 @@ (ns status-im2.contexts.quo-preview.messages.author (:require [quo2.components.markdown.text :as text] [quo2.components.messages.author.view :as quo2] - [quo2.foundations.colors :as colors] [react-native.core :as rn] [reagent.core :as reagent] [status-im2.contexts.quo-preview.preview :as preview])) @@ -31,7 +30,7 @@ :key :untrustworthy? :type :boolean}]) -(defn cool-preview +(defn preview-author [] (let [state (reagent/atom {:primary-name "Alisher Yakupov" :seconadary-name "" @@ -40,10 +39,9 @@ :verified? false :untrustworthy? false})] (fn [] - [rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!} + [preview/preview-container + {:state state :descriptor descriptor} [rn/view {:padding-bottom 150} - [rn/view {:flex 1} - [preview/customizer state descriptor]] [rn/view {:padding-vertical 60 :padding--horizontal 15 @@ -51,15 +49,3 @@ [rn/view [text/text "Author:"] [quo2/author @state]]]]]))) - -(defn preview-author - [] - [rn/keyboard-avoiding-view {:style {:flex 1}} - [rn/view - {:background-color (colors/theme-colors colors/white colors/neutral-90) - :flex 1} - [rn/flat-list - {:flex 1 - :keyboard-should-persist-taps :always - :header [cool-preview] - :key-fn str}]]]) diff --git a/src/status_im2/contexts/quo_preview/messages/gap.cljs b/src/status_im2/contexts/quo_preview/messages/gap.cljs index d215ea6199..db79b10629 100644 --- a/src/status_im2/contexts/quo_preview/messages/gap.cljs +++ b/src/status_im2/contexts/quo_preview/messages/gap.cljs @@ -13,7 +13,7 @@ :key :timestamp-near :type :text}]) -(defn preview +(defn preview-messages-gap [] (let [state (reagent/atom {:timestamp-far "Jan 8 Β· 09:12" :timestamp-near "Mar 8 Β· 22:42" @@ -21,18 +21,10 @@ :on-press #(println "fill gaps") :warning-label (i18n/label :messages-gap-warning)})] (fn [] - [rn/view {:margin-bottom 50} - [rn/view {:padding 16} - [preview/customizer state descriptor]] + [preview/preview-container + {:state state + :descriptor descriptor} [rn/view {:padding-vertical 60 :align-items :center} [gap/gap @state]]]))) - -(defn preview-messages-gap - [] - [rn/view {:flex 1} - [rn/flat-list - {:flex 1 - :header [preview] - :key-fn str}]]) diff --git a/src/status_im2/contexts/quo_preview/messages/system_message.cljs b/src/status_im2/contexts/quo_preview/messages/system_message.cljs index 3702f0a3b4..88c9ef5998 100644 --- a/src/status_im2/contexts/quo_preview/messages/system_message.cljs +++ b/src/status_im2/contexts/quo_preview/messages/system_message.cljs @@ -1,6 +1,5 @@ (ns status-im2.contexts.quo-preview.messages.system-message (:require [quo2.components.messages.system-message :as system-message] - [quo2.foundations.colors :as colors] [react-native.core :as rn] [reagent.core :as reagent] [status-im2.contexts.quo-preview.preview :as preview])) @@ -42,7 +41,7 @@ {:child (when (= (:type @state) :pinned) [rn/text "Message content"]) :display-name (:pinned-by @state)})) -(defn preview +(defn preview-system-message [] (let [state (reagent/atom {:type :pinned :pinned-by "Steve" @@ -50,20 +49,10 @@ :content-text "Hello! This is an example of a pinned message!" :content-info "3 photos"})] (fn [] - [rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!} + [preview/preview-container + {:state state + :descriptor descriptor} [rn/view {:padding-bottom 150} - [preview/customizer state descriptor] [rn/view {:padding-vertical 60 :flex 1} [system-message/system-message (finalize-state state)]]]]))) - -(defn preview-system-message - [] - [rn/view - {:background-color (colors/theme-colors colors/white colors/neutral-90) - :flex 1} - [rn/flat-list - {:flex 1 - :header [preview] - :key-fn str - :keyboard-should-persist-taps :always}]]) diff --git a/src/status_im2/contexts/quo_preview/navigation/bottom_nav_tab.cljs b/src/status_im2/contexts/quo_preview/navigation/bottom_nav_tab.cljs index 303cb4cbc1..359481f432 100644 --- a/src/status_im2/contexts/quo_preview/navigation/bottom_nav_tab.cljs +++ b/src/status_im2/contexts/quo_preview/navigation/bottom_nav_tab.cljs @@ -64,7 +64,7 @@ (merge state {:icon-color-anim icon-color-anim}) (:value state)])) -(defn cool-preview +(defn preview-bottom-nav-tab [] (let [state (reagent/atom {:icon :i/communities :new-notifications? true @@ -75,21 +75,11 @@ selected? (reagent/cursor state [:selected?]) pass-through? (reagent/cursor state [:pass-through?])] (fn [] - [rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!} + [preview/preview-container + {:state state + :descriptor descriptor} [rn/view {:padding-bottom 150} - [preview/customizer state descriptor] [rn/view {:padding-vertical 60 :align-items :center} [:f> f-bottom-tab @state @selected? @pass-through?]]]]))) - -(defn preview-bottom-nav-tab - [] - [rn/view - {:background-color colors/neutral-100 - :flex 1} - [rn/flat-list - {:flex 1 - :keyboard-should-persist-taps :always - :header [cool-preview] - :key-fn str}]]) diff --git a/src/status_im2/contexts/quo_preview/navigation/floating_shell_button.cljs b/src/status_im2/contexts/quo_preview/navigation/floating_shell_button.cljs index 674872ec34..9c8a2ea378 100644 --- a/src/status_im2/contexts/quo_preview/navigation/floating_shell_button.cljs +++ b/src/status_im2/contexts/quo_preview/navigation/floating_shell_button.cljs @@ -1,6 +1,5 @@ (ns status-im2.contexts.quo-preview.navigation.floating-shell-button (:require [quo2.core :as quo] - [quo2.foundations.colors :as colors] [react-native.core :as rn] [reagent.core :as reagent] [utils.i18n :as i18n] @@ -42,26 +41,16 @@ (= scroll-type :scroll-to-bottom) (assoc :scroll-to-bottom {:on-press #()}))) -(defn cool-preview +(defn preview-floating-shell-button [] (let [state (reagent/atom {:show-jump-to? true :scroll-type :notification-down})] (fn [] - [rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!} + [preview/preview-container + {:state state + :descriptor descriptor} [rn/view {:padding-bottom 150} - [preview/customizer state descriptor] [rn/view {:padding-vertical 60 :align-items :center} [quo/floating-shell-button (mock-data @state) nil]]]]))) - -(defn preview-floating-shell-button - [] - [rn/view - {:background-color (colors/theme-colors colors/white colors/neutral-90) - :flex 1} - [rn/flat-list - {:flex 1 - :keyboard-should-persist-taps :always - :header [cool-preview] - :key-fn str}]]) diff --git a/src/status_im2/contexts/quo_preview/navigation/page_nav.cljs b/src/status_im2/contexts/quo_preview/navigation/page_nav.cljs index cc7ffee71a..a67930ab5b 100644 --- a/src/status_im2/contexts/quo_preview/navigation/page_nav.cljs +++ b/src/status_im2/contexts/quo_preview/navigation/page_nav.cljs @@ -2,14 +2,13 @@ (:require [clojure.string :as string] [quo2.core :as quo] [quo2.foundations.colors :as colors] - [quo2.theme :as quo.theme] [react-native.blur :as blur] [react-native.core :as rn] [reagent.core :as reagent] [status-im2.common.resources :as resources] [status-im2.contexts.quo-preview.preview :as preview])) -(def ^:private main-descriptor +(def ^:private descriptor [{:label "Type" :key :type :type :select @@ -229,7 +228,7 @@ :blur-type :light :blur-amount 20}]])) -(defn- cool-preview +(defn preview-page-nav [{:keys [theme]}] (let [state (reagent/atom {:type :title-description @@ -257,21 +256,20 @@ :network-name "Mainnet" :network-logo (resources/get-mock-image :diamond)})] (fn [] - [rn/view {:style {:margin-bottom 50 :padding-vertical 16}} - [rn/view {:style {:flex 1}} - [preview/customizer state - (concat main-descriptor - (case (:type @state) - :no-title no-title-descriptor - :title title-descriptor - :dropdown dropdown-descriptor - :token token-descriptor - :channel channel-descriptor - :title-description title-description-descriptor - :wallet-networks wallet-networks-descriptor - :community community-descriptor - :network network-descriptor - nil))]] + [preview/preview-container + {:state state + :descriptor (concat descriptor + (case (:type @state) + :no-title no-title-descriptor + :title title-descriptor + :dropdown dropdown-descriptor + :token token-descriptor + :channel channel-descriptor + :title-description title-description-descriptor + :wallet-networks wallet-networks-descriptor + :community community-descriptor + :network network-descriptor + nil))} [rn/view {:style {:background-color (case (:background @state) :white colors/white @@ -286,14 +284,3 @@ [photo-bg (:background @state)] [blur-bg (:background @state)] [quo/page-nav @state]]]))) - -(defn preview-page-nav - [] - [rn/view - {:style {:background-color (colors/theme-colors colors/white colors/neutral-90) - :flex 1}} - [rn/flat-list - {:flex 1 - :keyboard-should-persist-taps :always - :header [(quo.theme/with-theme cool-preview)] - :key-fn str}]]) diff --git a/src/status_im2/contexts/quo_preview/navigation/top_nav.cljs b/src/status_im2/contexts/quo_preview/navigation/top_nav.cljs index 7dab4132bd..c61c7cc6d5 100644 --- a/src/status_im2/contexts/quo_preview/navigation/top_nav.cljs +++ b/src/status_im2/contexts/quo_preview/navigation/top_nav.cljs @@ -34,9 +34,10 @@ jump-to? (:jump-to? @state) notification (:notification @state) notification-count (:notification-count @state)] - [rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!} + [preview/preview-container + {:state state + :descriptor descriptor} [rn/view {:padding-bottom 150} - [preview/customizer state descriptor] [rn/view {:padding-vertical 60 :padding-horizontal 20 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 39e7f5a047..7ff8435ea7 100644 --- a/src/status_im2/contexts/quo_preview/notifications/activity_logs.cljs +++ b/src/status_im2/contexts/quo_preview/notifications/activity_logs.cljs @@ -104,7 +104,7 @@ {:body "Your favorite color is Turquoise." :title "What's my favorite color?"}) -(defn preview +(defn preview-activity-logs [] (let [state (reagent/atom {:button-1-label "Decline" :button-1-type :danger @@ -165,7 +165,9 @@ (= (:context @state) :complex-user-action) (assoc :context complex-user-action))] - [rn/view {:margin-bottom 50} + [preview/preview-container + {:state state + :descriptor descriptor} [rn/view {:flex 1 :padding 16} @@ -177,12 +179,3 @@ :justify-content :center :padding-vertical 60} [quo/activity-log props]]]])))) - -(defn preview-activity-logs - [] - [rn/view {:flex 1} - [rn/flat-list - {:flex 1 - :header [preview] - :key-fn str - :keyboard-should-persist-taps :always}]]) diff --git a/src/status_im2/contexts/quo_preview/notifications/activity_logs_photos.cljs b/src/status_im2/contexts/quo_preview/notifications/activity_logs_photos.cljs index 615d342b17..ef542ecdc8 100644 --- a/src/status_im2/contexts/quo_preview/notifications/activity_logs_photos.cljs +++ b/src/status_im2/contexts/quo_preview/notifications/activity_logs_photos.cljs @@ -2,7 +2,6 @@ (:require [quo2.core :as quo] [react-native.core :as rn] [reagent.core :as reagent] - [quo2.foundations.colors :as colors] [status-im2.common.resources :as resources] [status-im2.contexts.quo-preview.preview :as preview])) @@ -31,23 +30,13 @@ (resources/get-mock-image :photo2) (resources/get-mock-image :photo3)]) -(defn cool-preview +(defn preview-activity-logs-photos [] (let [state (reagent/atom {:count 1})] (fn [] - [rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!} + [preview/preview-container + {:state state + :descriptor descriptor} [rn/view {:padding-bottom 150} - [preview/customizer state descriptor] [rn/view [quo/activity-logs-photos {:photos (take (:count @state) mock-photos)}]]]]))) - -(defn preview-activity-logs-photos - [] - [rn/view - {:background-color (colors/theme-colors colors/white colors/neutral-95) - :flex 1} - [rn/flat-list - {:flex 1 - :keyboard-should-persist-taps :always - :header [cool-preview] - :key-fn str}]]) diff --git a/src/status_im2/contexts/quo_preview/notifications/notification.cljs b/src/status_im2/contexts/quo_preview/notifications/notification.cljs index 7373cdaf2c..62deaf635d 100644 --- a/src/status_im2/contexts/quo_preview/notifications/notification.cljs +++ b/src/status_im2/contexts/quo_preview/notifications/notification.cljs @@ -2,6 +2,7 @@ (:require [quo2.core :as quo] [react-native.core :as rn] [status-im2.contexts.quo-preview.code.snippet :as snippet-preview] + [status-im2.contexts.quo-preview.preview :as preview] [utils.re-frame :as rf])) (defn notification-button @@ -75,10 +76,10 @@ :duration 3000 :type :notification}]) -(defn preview +(defn preview-notification [] (fn [] - [rn/view + [preview/preview-container [rn/view {:background-color "#508485" :flex-direction :column @@ -92,14 +93,4 @@ [^{:key :0} [notification-button-0] ^{:key :1} [notification-button-1] ^{:key :2} [notification-button-2] - ^{:key :3} [notification-button-3]] - ]])) - -(defn preview-notification - [] - [rn/view {:flex 1} - [rn/flat-list - {:flex 1 - :header [preview] - :key-fn str - :keyboard-should-persist-taps :always}]]) + ^{:key :3} [notification-button-3]]]])) diff --git a/src/status_im2/contexts/quo_preview/notifications/toast.cljs b/src/status_im2/contexts/quo_preview/notifications/toast.cljs index 59339ba4fc..1ae5fd233a 100644 --- a/src/status_im2/contexts/quo_preview/notifications/toast.cljs +++ b/src/status_im2/contexts/quo_preview/notifications/toast.cljs @@ -3,6 +3,7 @@ [quo2.foundations.colors :as colors] [react-native.core :as rn] [reagent.core :as reagent] + [status-im2.contexts.quo-preview.preview :as preview] [utils.re-frame :as rf])) (defn toast-button @@ -85,10 +86,10 @@ :duration 3000}])} "update above toast"]]))))) -(defn preview +(defn preview-toasts [] (fn [] - [rn/view + [preview/preview-container [rn/view {:background-color "#508485" :flex-direction :column @@ -104,12 +105,3 @@ ^{:key :30s-duration} [toast-button-30s-duration] ^{:key :upsert} [update-toast-button]]]])) - -(defn preview-toasts - [] - [rn/view {:flex 1} - [rn/flat-list - {:flex 1 - :header [preview] - :key-fn str - :keyboard-should-persist-taps :always}]]) diff --git a/src/status_im2/contexts/quo_preview/numbered_keyboard/keyboard_key.cljs b/src/status_im2/contexts/quo_preview/numbered_keyboard/keyboard_key.cljs index 81ba86a10b..ad77ab24ed 100644 --- a/src/status_im2/contexts/quo_preview/numbered_keyboard/keyboard_key.cljs +++ b/src/status_im2/contexts/quo_preview/numbered_keyboard/keyboard_key.cljs @@ -1,6 +1,5 @@ (ns status-im2.contexts.quo-preview.numbered-keyboard.keyboard-key (:require [quo2.core :as quo] - [react-native.core :as rn] [quo2.foundations.colors :as colors] [reagent.core :as reagent] [status-im2.contexts.quo-preview.preview :as preview])) @@ -22,7 +21,7 @@ {:key :derivation-path :value "Derivation Path"}]}]) -(defn cool-preview +(defn preview-keyboard-key [] (let [state (reagent/atom {:disabled? false :on-press #(js/alert "pressed" %) @@ -34,9 +33,9 @@ :derivation-path nil :digit 1 nil)] - [rn/view {:style {:padding-bottom 150}} - [rn/view {:style {:flex 1}} - [preview/customizer state descriptor]] + [preview/preview-container + {:state state + :descriptor descriptor} [preview/blur-view {:style {:flex 1 :align-self :center @@ -46,14 +45,3 @@ :blur-view-props (when (:blur? @state) {:overlay-color colors/neutral-80-opa-80})} [quo/keyboard-key @state value]]])))) - -(defn preview-keyboard-key - [] - [rn/view - {:style {:background-color (colors/theme-colors colors/white colors/neutral-90) - :flex 1}} - [rn/flat-list - {:style {:flex 1} - :keyboard-should-persist-taps :always - :header [cool-preview] - :key-fn str}]]) diff --git a/src/status_im2/contexts/quo_preview/numbered_keyboard/numbered_keyboard.cljs b/src/status_im2/contexts/quo_preview/numbered_keyboard/numbered_keyboard.cljs index 38d7139bb7..4197dbade4 100644 --- a/src/status_im2/contexts/quo_preview/numbered_keyboard/numbered_keyboard.cljs +++ b/src/status_im2/contexts/quo_preview/numbered_keyboard/numbered_keyboard.cljs @@ -1,6 +1,5 @@ (ns status-im2.contexts.quo-preview.numbered-keyboard.numbered-keyboard (:require [quo2.core :as quo] - [react-native.core :as rn] [quo2.foundations.colors :as colors] [reagent.core :as reagent] [status-im2.contexts.quo-preview.preview :as preview] @@ -26,7 +25,7 @@ {:key :none :value "None"}]}]) -(defn cool-preview +(defn preview-numbered-keyboard [] (let [state (reagent/atom {:disabled? false :on-press (fn [item] (js/alert (str item " pressed"))) @@ -35,9 +34,9 @@ :left-action :dot}) blur? (reagent/cursor state [:blur?])] (fn [] - [rn/view - [rn/view {:flex 1} - [preview/customizer state descriptor]] + [preview/preview-container + {:state state + :descriptor descriptor} (when @blur? [blur/view {:style {:position :absolute @@ -48,14 +47,3 @@ :background-color colors/neutral-80-opa-70} :overlay-color :transparent}]) [quo/numbered-keyboard @state]]))) - -(defn preview-numbered-keyboard - [] - [rn/view - {:style {:background-color (colors/theme-colors colors/white colors/neutral-90) - :flex 1}} - [rn/flat-list - {:style {:flex 1} - :keyboard-should-persist-taps :always - :header [cool-preview] - :key-fn str}]]) diff --git a/src/status_im2/contexts/quo_preview/onboarding/small_option_card.cljs b/src/status_im2/contexts/quo_preview/onboarding/small_option_card.cljs index 074c3d05f9..9865831db1 100644 --- a/src/status_im2/contexts/quo_preview/onboarding/small_option_card.cljs +++ b/src/status_im2/contexts/quo_preview/onboarding/small_option_card.cljs @@ -29,7 +29,7 @@ :key :subtitle :type :text}]) -(defn cool-preview +(defn preview-small-option-card [] (let [state (reagent/atom {:variant :main :image (-> descriptor second :options first :key) @@ -37,22 +37,11 @@ :subtitle "Your new self-sovereign identity in Status" :on-press #(js/alert "Small option card pressed!")})] (fn [] - [rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!} + [preview/preview-container + {:state state + :descriptor descriptor} [rn/view {:style {:padding-bottom 150}} - [rn/view {:style {:flex 1}} - [preview/customizer state descriptor]] [rn/view {:style {:background-color colors/neutral-80 :padding 20}} [quo2/small-option-card @state]]]]))) - -(defn preview-small-option-card - [] - [rn/view - {:style {:background-color (colors/theme-colors colors/white colors/neutral-90) - :flex 1}} - [rn/flat-list - {:flex 1 - :keyboard-should-persist-taps :always - :header [cool-preview] - :key-fn str}]]) diff --git a/src/status_im2/contexts/quo_preview/password/tips.cljs b/src/status_im2/contexts/quo_preview/password/tips.cljs index aeceb62d20..0088a690fa 100644 --- a/src/status_im2/contexts/quo_preview/password/tips.cljs +++ b/src/status_im2/contexts/quo_preview/password/tips.cljs @@ -13,29 +13,16 @@ :key :completed? :type :boolean}]) -(defn cool-preview +(defn preview-tips [] (let [state (reagent/atom {:text "Lower case" :completed? false}) text (reagent/cursor state [:text]) completed? (reagent/cursor state [:completed?])] (fn [] - [rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!} + [preview/preview-container + {:state state + :descriptor descriptor} [rn/view {:padding-bottom 150} - [preview/customizer state descriptor] [rn/view {:padding 60 :background-color colors/neutral-95} [quo/tips {:completed? @completed?} @text]]]]))) - -(defn preview-tips - [] - [rn/view - {:background-color (colors/theme-colors - colors/white - colors/neutral-95) - :flex 1} - [rn/flat-list - {:flex 1 - :keyboard-should-persist-taps :always - :header [cool-preview] - :key-fn str}]]) - diff --git a/src/status_im2/contexts/quo_preview/preview.cljs b/src/status_im2/contexts/quo_preview/preview.cljs index 03662bbbcf..e575a505bf 100644 --- a/src/status_im2/contexts/quo_preview/preview.cljs +++ b/src/status_im2/contexts/quo_preview/preview.cljs @@ -1,8 +1,10 @@ (ns status-im2.contexts.quo-preview.preview (:require [camel-snake-kebab.core :as camel-snake-kebab] [clojure.string :as string] + [status-im2.contexts.quo-preview.common :as common] [quo2.core :as quo] [quo2.foundations.colors :as colors] + [react-native.safe-area :as safe-area] [quo2.theme :as quo.theme] [react-native.blur :as blur] [react-native.core :as rn] @@ -227,32 +229,37 @@ style)}] children)]) + (defn preview-container [{:keys [state descriptor blur? component-container-style blur-container-style blur-view-props blur-height show-blur-background?] :or {blur-height 200}} & children] - [rn/scroll-view - {:style (style/panel-basic) - :shows-vertical-scroll-indicator false} - [rn/pressable {:on-press rn/dismiss-keyboard!} - (when descriptor - [rn/view {:style style/customizer-container} - [customizer state descriptor]]) - (if blur? - [rn/view {:style (merge style/component-container component-container-style)} - (into [blur-view - {:show-blur-background? show-blur-background? - :height blur-height - :style (merge {:width "100%" - :flex-grow 1} - (when-not show-blur-background? - {:padding-horizontal 0 - :top 0}) - blur-container-style) - :blur-view-props (merge {:blur-type (quo.theme/get-theme)} - blur-view-props)}] - children)] - (into [rn/view {:style (merge style/component-container component-container-style)}] - children))]]) + [rn/view + {:style {:top (safe-area/get-top) + :flex 1}} + [common/navigation-bar] + [rn/scroll-view + {:style (style/panel-basic) + :shows-vertical-scroll-indicator false} + [rn/pressable {:on-press rn/dismiss-keyboard!} + (when descriptor + [rn/view {:style style/customizer-container} + [customizer state descriptor]]) + (if blur? + [rn/view {:style (merge style/component-container component-container-style)} + (into [blur-view + {:show-blur-background? show-blur-background? + :height blur-height + :style (merge {:width "100%" + :flex-grow 1} + (when-not show-blur-background? + {:padding-horizontal 0 + :top 0}) + blur-container-style) + :blur-view-props (merge {:blur-type (quo.theme/get-theme)} + blur-view-props)}] + children)] + (into [rn/view {:style (merge style/component-container component-container-style)}] + children))]]]) diff --git a/src/status_im2/contexts/quo_preview/profile/collectible.cljs b/src/status_im2/contexts/quo_preview/profile/collectible.cljs index 82701ea029..8ec4d8e55e 100644 --- a/src/status_im2/contexts/quo_preview/profile/collectible.cljs +++ b/src/status_im2/contexts/quo_preview/profile/collectible.cljs @@ -20,7 +20,7 @@ :key :shuffle-images :type :boolean}]) -(defn cool-preview +(defn preview-collectible [] (let [state (reagent/atom {:num-images 1 :shuffle-images false})] (fn [] @@ -29,22 +29,12 @@ (shuffle) :always (take (:num-images @state)))] - [rn/view - {:margin-bottom 50 - :padding 16} - [preview/customizer state descriptor] + [preview/preview-container + {:state state + :descriptor descriptor} [rn/view {:padding-vertical 100 :align-items :center} [quo/collectible {:images images-to-show :on-press #(js/alert "Pressed")}]]])))) - -(defn preview-collectible - [] - [rn/view {:style {:flex 1}} - [rn/flat-list - {:flex 1 - :keyboard-should-persist-taps :always - :header [cool-preview] - :key-fn str}]]) diff --git a/src/status_im2/contexts/quo_preview/profile/profile_card.cljs b/src/status_im2/contexts/quo_preview/profile/profile_card.cljs index 9c98cce4bb..0f5b60abdf 100644 --- a/src/status_im2/contexts/quo_preview/profile/profile_card.cljs +++ b/src/status_im2/contexts/quo_preview/profile/profile_card.cljs @@ -45,7 +45,7 @@ :key :emoji-hash :type :text}]) -(defn cool-preview +(defn preview-profile-card [] (let [state (reagent/atom {:keycard-account? false :name "Matt Grote" @@ -63,24 +63,12 @@ :hash "zQ3k83euenmcikw7474hfu73t5N" :emoji-hash "πŸ˜„πŸ˜‚πŸ«£πŸ‘πŸ˜‡πŸ€’πŸ˜»πŸ₯·πŸ»πŸ¦ΈπŸ»β€β™€οΈπŸ¦ΈπŸ»πŸ¦ΈπŸ»β€β™‚οΈπŸ¦ΉπŸ»β€β™€οΈπŸ§‘πŸ»β€πŸŽ„πŸŽ…πŸ»"})] (fn [] - [rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!} + [preview/preview-container + {:state state + :descriptor descriptor} [rn/view {:padding-bottom 150} - [rn/view {:flex 1} - [preview/customizer state descriptor]] [rn/view {:padding-vertical 60 :flex-direction :row :justify-content :center} [quo/profile-card @state]]]]))) - -(defn preview-profile-card - [] - [rn/view - {:background-color (colors/theme-colors colors/white - colors/neutral-90) - :flex 1} - [rn/flat-list - {:flex 1 - :keyboard-should-persist-taps :always - :header [cool-preview] - :key-fn str}]]) diff --git a/src/status_im2/contexts/quo_preview/profile/select_profile.cljs b/src/status_im2/contexts/quo_preview/profile/select_profile.cljs index d2b63ed70d..71c349e75c 100644 --- a/src/status_im2/contexts/quo_preview/profile/select_profile.cljs +++ b/src/status_im2/contexts/quo_preview/profile/select_profile.cljs @@ -21,7 +21,7 @@ :key :selected? :type :boolean}]) -(defn cool-preview +(defn preview-select-profile [] (let [state (reagent/atom {:selected? false :name "Alisher Yakupov" @@ -29,10 +29,10 @@ :profile-picture (resources/get-mock-image :user-picture-male5)}) selected? (reagent/cursor state [:selected?])] (fn [] - [rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!} + [preview/preview-container + {:state state + :descriptor descriptor} [rn/view {:padding-bottom 150} - [rn/view {:flex 1} - [preview/customizer state descriptor]] [rn/view {:padding-vertical 60 :flex-direction :row @@ -40,16 +40,3 @@ :background-color colors/neutral-90 :justify-content :center} [quo/select-profile (merge @state {:on-change #(reset! selected? %)})]]]]))) - -(defn preview-select-profile - [] - [rn/view - {:background-color (colors/theme-colors colors/white - colors/neutral-90) - :flex 1} - [rn/flat-list - {:flex 1 - :keyboard-should-persist-taps :always - :header [cool-preview] - :key-fn str}]]) - diff --git a/src/status_im2/contexts/quo_preview/reactions/react.cljs b/src/status_im2/contexts/quo_preview/reactions/react.cljs index ea2323ddd5..e8a85a39c4 100644 --- a/src/status_im2/contexts/quo_preview/reactions/react.cljs +++ b/src/status_im2/contexts/quo_preview/reactions/react.cljs @@ -1,7 +1,6 @@ (ns status-im2.contexts.quo-preview.reactions.react (:require [clojure.string :as string] [quo2.components.reactions.reaction :as quo2.reaction] - [quo2.foundations.colors :as colors] [react-native.core :as rn] [reagent.core :as reagent] [status-im2.constants :as constants] @@ -21,13 +20,14 @@ :key :neutral? :type :boolean}]) -(defn cool-preview +(defn preview-react [] (let [state (reagent/atom {:emoji :reaction/love})] (fn [] - [rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!} + [preview/preview-container + {:state state + :descriptor descriptor} [rn/view {:padding-bottom 150} - [preview/customizer state descriptor] [rn/view {:padding-vertical 60 :justify-content :center @@ -35,14 +35,3 @@ :align-items :center} [quo2.reaction/reaction @state] [quo2.reaction/add-reaction @state]]]]))) - -(defn preview-react - [] - [rn/view - {:background-color (colors/theme-colors colors/white colors/neutral-90) - :flex 1} - [rn/flat-list - {:flex 1 - :keyboard-should-persist-taps :always - :header [cool-preview] - :key-fn str}]]) diff --git a/src/status_im2/contexts/quo_preview/record_audio/record_audio.cljs b/src/status_im2/contexts/quo_preview/record_audio/record_audio.cljs index dcc9cf6603..798f334df7 100644 --- a/src/status_im2/contexts/quo_preview/record_audio/record_audio.cljs +++ b/src/status_im2/contexts/quo_preview/record_audio/record_audio.cljs @@ -3,6 +3,7 @@ [quo2.core :as quo] [react-native.core :as rn] [reagent.core :as reagent] + [status-im2.contexts.quo-preview.preview :as preview] [utils.re-frame :as rf] [status-im2.common.alert.events :as alert] [utils.i18n :as i18n] @@ -11,7 +12,7 @@ (defonce record-audio-permission-granted (reagent/atom false)) -(defn cool-preview +(defn preview-record-audio [] (let [message (reagent/atom "Press & hold the mic button to start recording...") @@ -40,7 +41,7 @@ :t/audio-recorder-permissions-error))) 50)}]))] (fn [] - [rn/view + [preview/preview-container [rn/view {:padding-top 150 :align-items :center @@ -56,13 +57,3 @@ :on-request-record-audio-permission on-request-record-audio-permission :max-duration-ms constants/audio-max-duration-ms}]] [quo/text {:style {:margin-horizontal 20}} @message]]))) - -(defn preview-record-audio - [] - [rn/view {:flex 1} - [rn/flat-list - {:flex 1 - :keyboard-should-persist-taps :never - :scroll-enabled false - :header [cool-preview] - :key-fn str}]]) diff --git a/src/status_im2/contexts/quo_preview/selectors/disclaimer.cljs b/src/status_im2/contexts/quo_preview/selectors/disclaimer.cljs index da28ae6ac2..0c594c20f9 100644 --- a/src/status_im2/contexts/quo_preview/selectors/disclaimer.cljs +++ b/src/status_im2/contexts/quo_preview/selectors/disclaimer.cljs @@ -1,6 +1,5 @@ (ns status-im2.contexts.quo-preview.selectors.disclaimer (:require [quo2.core :as quo] - [quo2.foundations.colors :as colors] [quo2.theme :as theme] [react-native.core :as rn] [reagent.core :as reagent] @@ -30,16 +29,16 @@ {:style {:flex 1} :show-blur-background? true}]])) -(defn cool-preview +(defn preview-disclaimer [] (let [state (reagent/atom {:checked? false :blur? true :text "I agree with the community rules"})] (fn [] (let [{:keys [blur? checked? text]} @state] - [rn/view {:style {:flex 1}} - [rn/view {:style {:flex 1}} - [preview/customizer state descriptor]] + [preview/preview-container + {:state state + :descriptor descriptor} [rn/view {:style {:padding-horizontal 15}} [blur-background blur?] [rn/view {:style {:margin-vertical 50}} @@ -50,14 +49,3 @@ text]] [quo/button {:disabled? (not checked?)} "submit"]]])))) - -(defn preview-disclaimer - [] - [rn/view - {:background-color (colors/theme-colors colors/white colors/neutral-90) - :flex 1} - [rn/flat-list - {:flex 1 - :keyboard-should-persist-taps :always - :header [cool-preview] - :key-fn str}]]) diff --git a/src/status_im2/contexts/quo_preview/selectors/filter.cljs b/src/status_im2/contexts/quo_preview/selectors/filter.cljs index 5277c2b8cc..45ea95e4fb 100644 --- a/src/status_im2/contexts/quo_preview/selectors/filter.cljs +++ b/src/status_im2/contexts/quo_preview/selectors/filter.cljs @@ -18,16 +18,14 @@ :key :blur? :type :boolean}]) -(defn cool-preview +(defn preview [] (let [state (reagent/atom {:override-theme (theme/get-theme) :blur? false})] (fn [] - [rn/view - {:style {:margin-bottom 50 - :padding-vertical 16 - :padding-horizontal 20}} - [preview/customizer state descriptor] + [preview/preview-container + {:state state + :descriptor descriptor} [rn/view {:style {:padding-vertical 60 :align-items :center}} @@ -43,14 +41,3 @@ (= :light (:override-theme @state)) colors/white)}} [quo/view @state]]]]))) - -(defn preview - [] - [rn/view - {:style {:background-color (colors/theme-colors colors/white colors/neutral-90) - :flex 1}} - [rn/flat-list - {:style {:flex 1} - :keyboard-should-persist-taps :always - :header [cool-preview] - :key-fn str}]]) diff --git a/src/status_im2/contexts/quo_preview/selectors/selectors.cljs b/src/status_im2/contexts/quo_preview/selectors/selectors.cljs index ae211c4bb5..bad5755e46 100644 --- a/src/status_im2/contexts/quo_preview/selectors/selectors.cljs +++ b/src/status_im2/contexts/quo_preview/selectors/selectors.cljs @@ -32,14 +32,15 @@ :blur? blur? :customization-color customization-color}]]) -(defn cool-preview +(defn preview-selectors [] (let [state (reagent/atom {:disabled? false :blur? false :customization-color :blue})] (fn [] - [rn/view - [preview/customizer state descriptor] + [preview/preview-container + {:state state + :descriptor descriptor} [rn/view {:style {:margin-vertical 24}} [preview/blur-view {:style {:width "100%" @@ -58,14 +59,3 @@ [selector-preview "Radio" quo2/radio @state] [selector-preview "Checkbox" quo2/checkbox @state] [selector-preview "Checkbox Prefill" quo2/checkbox-prefill @state]]]]]))) - -(defn preview-selectors - [] - [rn/view - {:style {:background-color (colors/theme-colors colors/white colors/neutral-95) - :flex 1}} - [rn/flat-list - {:style {:flex 1} - :keyboard-should-persist-taps :always - :header [cool-preview] - :key-fn str}]]) diff --git a/src/status_im2/contexts/quo_preview/settings/accounts.cljs b/src/status_im2/contexts/quo_preview/settings/accounts.cljs index 2412521d38..77510c26a9 100644 --- a/src/status_im2/contexts/quo_preview/settings/accounts.cljs +++ b/src/status_im2/contexts/quo_preview/settings/accounts.cljs @@ -20,7 +20,7 @@ :key :account-address :type :text}]) -(defn cool-preview +(defn preview-accounts [] (let [state (reagent/atom {:customization-color :blue :account-name "Booze for Dubai" @@ -29,10 +29,9 @@ :on-press-menu (fn [] (js/alert "Menu button pressed"))})] (fn [] - [rn/view - {:margin-bottom 50 - :padding 16} - [preview/customizer state descriptor] + [preview/preview-container + {:state state + :descriptor descriptor} [rn/view {:padding-vertical 100 :align-items :center @@ -40,12 +39,3 @@ colors/neutral-30 colors/neutral-95)} [quo/account @state]]]))) - -(defn preview-accounts - [] - [rn/view {:style {:flex 1}} - [rn/flat-list - {:flex 1 - :keyboard-should-persist-taps :always - :header [cool-preview] - :key-fn str}]]) diff --git a/src/status_im2/contexts/quo_preview/settings/category.cljs b/src/status_im2/contexts/quo_preview/settings/category.cljs index 5199ad47d4..1db1cb0dc9 100644 --- a/src/status_im2/contexts/quo_preview/settings/category.cljs +++ b/src/status_im2/contexts/quo_preview/settings/category.cljs @@ -68,7 +68,9 @@ (reset! data (create-item-array (max (js/parseInt (:size @state)) 1) @state))) [(:blur? @state) (:right-icon? @state) (:image? @state) (:subtitle? @state)]) - [rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!} + [preview/preview-container + {:state state + :descriptor (if (= (:list-type @state) :settings) settings-descriptor reorder-descriptor)} [rn/view {:style {:flex 1 :padding-bottom 150 diff --git a/src/status_im2/contexts/quo_preview/settings/data_item.cljs b/src/status_im2/contexts/quo_preview/settings/data_item.cljs index 457d4ee9bf..92b47c5639 100644 --- a/src/status_im2/contexts/quo_preview/settings/data_item.cljs +++ b/src/status_im2/contexts/quo_preview/settings/data_item.cljs @@ -57,7 +57,7 @@ {:source (resources/get-mock-image :decentraland)} {:source (resources/get-mock-image :rarible)}]) -(defn cool-preview +(defn preview-data-item [] (let [state (reagent/atom {:on-press #(js/alert (str "pressed")) :blur? false @@ -75,7 +75,9 @@ :communities-list communities-list}) blur? (reagent/cursor state [:blur?])] (fn [] - [rn/view + [preview/preview-container + {:state state + :descriptor descriptor} [rn/view {:style {:flex 1}} [preview/customizer state descriptor]] (when @blur? @@ -92,14 +94,3 @@ :padding-vertical 10 :margin-horizontal 20}} [quo/data-item @state]]]))) - -(defn preview-data-item - [] - [rn/view - {:style {:background-color (colors/theme-colors colors/white colors/neutral-100) - :flex 1}} - [rn/flat-list - {:style {:flex 1} - :keyboard-should-persist-taps :always - :header [cool-preview] - :key-fn str}]]) diff --git a/src/status_im2/contexts/quo_preview/settings/privacy_option.cljs b/src/status_im2/contexts/quo_preview/settings/privacy_option.cljs index 7435cca510..032865c0fa 100644 --- a/src/status_im2/contexts/quo_preview/settings/privacy_option.cljs +++ b/src/status_im2/contexts/quo_preview/settings/privacy_option.cljs @@ -1,6 +1,5 @@ (ns status-im2.contexts.quo-preview.settings.privacy-option (:require [quo2.core :as quo] - [quo2.foundations.colors :as colors] [react-native.core :as rn] [reagent.core :as reagent] [status-im2.contexts.quo-preview.preview :as preview])) @@ -22,7 +21,7 @@ :key :li3 :type :text}]) -(defn cool-preview +(defn preview-options [] (let [state (reagent/atom {:selected :contacts :header "header" @@ -36,15 +35,15 @@ list-items (->> (select-keys @state [:li1 :li2 :li3]) vals (remove empty?))] - [rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!} + [preview/preview-container + {:state state + :descriptor descriptor} [rn/view {:margin-horizontal 20 :padding 16 :flex 1} [rn/view {:margin-vertical 2} [quo/text {:size :paragraph-2} "Dynamic sample"]] - [rn/view {:flex 1} - [preview/customizer state descriptor]] [rn/view {:margin-vertical 8} [quo/privacy-option (cond-> {:on-select #(swap! state assoc :selected :preview) @@ -88,14 +87,3 @@ :footer "This footer is exceedingly long to test the overflowing behavior of text in it" :list-items ["A very, very very long text line that serves to test the overflow behavior of this component"]}]]]])))) - -(defn preview-options - [] - [rn/view - {:background-color (colors/theme-colors colors/white colors/neutral-90) - :flex 1} - [rn/flat-list - {:flex 1 - :keyboard-should-persist-taps :always - :header [cool-preview] - :key-fn str}]]) diff --git a/src/status_im2/contexts/quo_preview/settings/settings_list.cljs b/src/status_im2/contexts/quo_preview/settings/settings_list.cljs index 7a12cdab5b..c058c44a35 100644 --- a/src/status_im2/contexts/quo_preview/settings/settings_list.cljs +++ b/src/status_im2/contexts/quo_preview/settings/settings_list.cljs @@ -51,7 +51,7 @@ :label "example" :override-theme :dark})})) -(defn cool-preview +(defn preview-settings-list [] (let [state (reagent/atom {:title "Account" :accessibility-label :settings-list-item @@ -59,20 +59,11 @@ :chevron? true :on-press (fn [] (js/alert "Settings list item pressed"))})] (fn [] - [rn/view - {:margin-bottom 50} - [preview/customizer state descriptor] + [preview/preview-container + {:state state + :descriptor descriptor} [rn/view {:padding-vertical 100 :padding-horizontal 20 :align-items :center} [quo/settings-list (get-props @state)]]]))) - -(defn preview-settings-list - [] - [rn/view {:style {:flex 1}} - [rn/flat-list - {:flex 1 - :keyboard-should-persist-taps :always - :header [cool-preview] - :key-fn str}]]) diff --git a/src/status_im2/contexts/quo_preview/share/qr_code.cljs b/src/status_im2/contexts/quo_preview/share/qr_code.cljs index 91562ec4f1..7ea17ee78a 100644 --- a/src/status_im2/contexts/quo_preview/share/qr_code.cljs +++ b/src/status_im2/contexts/quo_preview/share/qr_code.cljs @@ -1,6 +1,5 @@ (ns status-im2.contexts.quo-preview.share.qr-code - (:require [quo2.foundations.colors :as colors] - [react-native.core :as rn] + (:require [react-native.core :as rn] [quo2.core :as quo] [utils.image-server :as image-server] [utils.re-frame :as rf] @@ -23,7 +22,7 @@ {:key :highest :value "Highest"}]}]) -(defn cool-preview +(defn preview-qr-code [] (let [state (reagent/atom {:text "https://status.im" :error-correction-level :highest}) @@ -36,9 +35,10 @@ :port (rf/sub [:mediaserver/port]) :error-level @error-correction-level :qr-size 250})) - [rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!} + [preview/preview-container + {:state state + :descriptor descriptor} [rn/view {:style {:padding-bottom 150}} - [preview/customizer state descriptor] [rn/view {:style {:flex 1}}] [rn/view {:style {:padding-vertical 60 @@ -53,15 +53,3 @@ [rn/view [rn/text {:style {:padding 20 :flex-shrink 1}} "Media server url -> " @media-server-uri]]]]]]))) - -(defn preview-qr-code - [] - [rn/view - {:style {:background-color (colors/theme-colors colors/white - colors/neutral-90) - :flex 1}} - [rn/flat-list - {:flex 1 - :keyboard-should-persist-taps :always - :header [cool-preview] - :key-fn str}]]) diff --git a/src/status_im2/contexts/quo_preview/share/share_qr_code.cljs b/src/status_im2/contexts/quo_preview/share/share_qr_code.cljs index 9c4fff10f1..ea77b16544 100644 --- a/src/status_im2/contexts/quo_preview/share/share_qr_code.cljs +++ b/src/status_im2/contexts/quo_preview/share/share_qr_code.cljs @@ -1,6 +1,5 @@ (ns status-im2.contexts.quo-preview.share.share-qr-code - (:require [quo2.foundations.colors :as colors] - [react-native.core :as rn] + (:require [react-native.core :as rn] [quo2.core :as quo] [status-im2.contexts.quo-preview.preview :as preview] [status-im2.common.resources :as resources] @@ -15,16 +14,17 @@ :key :link-title :type :text}]) -(defn cool-preview +(defn preview-share-qr-code [] (let [state (reagent/atom {:info-button? true :link-title "Link to profile" :url "status.app/u/zQ34e1zlOdas0pKnvrweeedsasas12adjie8"})] (fn [] - [rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!} + [preview/preview-container + {:state state + :descriptor descriptor} [rn/view {:style {:padding-bottom 150}} [rn/view {:style {:flex 1}}] - [preview/customizer state descriptor] [rn/view {:style {:padding-vertical 60 :justify-content :center}} @@ -40,15 +40,3 @@ :url-on-long-press #(js/alert "url long pressed") :share-on-press #(js/alert "share pressed") :qr-url (:url @state)}]]]]]))) - -(defn preview-share-qr-code - [] - [rn/view - {:style {:background-color (colors/theme-colors colors/white - colors/neutral-90) - :flex 1}} - [rn/flat-list - {:flex 1 - :keyboard-should-persist-taps :always - :header [cool-preview] - :key-fn str}]]) diff --git a/src/status_im2/contexts/quo_preview/style.cljs b/src/status_im2/contexts/quo_preview/style.cljs index 8eca15d3e7..2507217fec 100644 --- a/src/status_im2/contexts/quo_preview/style.cljs +++ b/src/status_im2/contexts/quo_preview/style.cljs @@ -171,9 +171,3 @@ :padding-bottom 8 :padding-horizontal 16 :background-color (colors/theme-colors colors/white colors/neutral-90)}) - -(def theme-switcher - {:flex-direction :row - :justify-content :space-between - :padding-horizontal 24 - :padding-vertical 12}) diff --git a/src/status_im2/contexts/quo_preview/switcher/switcher_cards.cljs b/src/status_im2/contexts/quo_preview/switcher/switcher_cards.cljs index 2fe27bb786..aa6d44dd0f 100644 --- a/src/status_im2/contexts/quo_preview/switcher/switcher_cards.cljs +++ b/src/status_im2/contexts/quo_preview/switcher/switcher_cards.cljs @@ -147,7 +147,7 @@ {:avatar-params community-avatar} {}))) -(defn cool-preview +(defn preview-switcher-cards [] (let [state (reagent/atom {:type shell.constants/private-group-chat-card :title "Alisher Yakupov" @@ -160,21 +160,11 @@ :last-message "This is fantastic! Ethereum" :preview-label-color colors/white})] (fn [] - [rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!} + [preview/preview-container + {:state state + :descriptor descriptor} [rn/view {:padding-bottom 150} - [preview/customizer state descriptor] [rn/view {:padding-vertical 60 :align-items :center} [switcher-cards/card (get-mock-data @state)]]]]))) - -(defn preview-switcher-cards - [] - [rn/view - {:background-color (colors/theme-colors colors/white colors/neutral-90) - :flex 1} - [rn/flat-list - {:flex 1 - :keyboard-should-persist-taps :always - :header [cool-preview] - :key-fn str}]]) diff --git a/src/status_im2/contexts/quo_preview/tabs/account_selector.cljs b/src/status_im2/contexts/quo_preview/tabs/account_selector.cljs index 563fee2886..0271bec817 100644 --- a/src/status_im2/contexts/quo_preview/tabs/account_selector.cljs +++ b/src/status_im2/contexts/quo_preview/tabs/account_selector.cljs @@ -1,6 +1,5 @@ (ns status-im2.contexts.quo-preview.tabs.account-selector (:require [quo2.components.tabs.account-selector :as quo2] - [quo2.foundations.colors :as colors] [react-native.core :as rn] [reagent.core :as reagent] [status-im2.contexts.quo-preview.preview :as preview])) @@ -46,7 +45,7 @@ :account-emoji "🍟" :label-text "Label 3"}]) -(defn cool-preview +(defn preview-this [] (let [state (reagent/atom {:show-label? true :transparent? false @@ -55,21 +54,11 @@ :account-emoji "πŸ‘" :label-text "Label"})] (fn [] - [rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!} + [preview/preview-container + {:state state + :descriptor descriptor} [rn/view {:padding-bottom 150} - [preview/customizer state descriptor] [rn/view {:padding-vertical 60 :align-items :center} [quo2/account-selector @state]]]]))) - -(defn preview-this - [] - [rn/view - {:background-color (colors/theme-colors colors/white colors/neutral-90) - :flex 1} - [rn/flat-list - {:flex 1 - :keyboard-should-persist-taps :always - :header [cool-preview] - :key-fn str}]]) diff --git a/src/status_im2/contexts/quo_preview/tabs/segmented_tab.cljs b/src/status_im2/contexts/quo_preview/tabs/segmented_tab.cljs index 7be100edc0..c2e72a10dd 100644 --- a/src/status_im2/contexts/quo_preview/tabs/segmented_tab.cljs +++ b/src/status_im2/contexts/quo_preview/tabs/segmented_tab.cljs @@ -1,6 +1,5 @@ (ns status-im2.contexts.quo-preview.tabs.segmented-tab (:require [quo2.components.tabs.segmented-tab :as quo2] - [quo2.foundations.colors :as colors] [quo2.theme :as theme] [react-native.core :as rn] [reagent.core :as reagent] @@ -18,15 +17,15 @@ :key :blur? :type :boolean}]) -(defn cool-preview +(defn preview-segmented [] (let [state (reagent/atom {:size 32 :blur? false})] (fn [] - [rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!} + [preview/preview-container + {:state state + :descriptor descriptor} [rn/view {:padding-bottom 150} - [rn/view {:flex 1} - [preview/customizer state descriptor]] [preview/blur-view {:show-blur-background? (:blur? @state) :height 200 @@ -48,14 +47,3 @@ :data [{:id 1 :label "Tab 1"} {:id 2 :label "Tab 2"}] :on-change #(println "Active tab" %)})]]]]]]))) - -(defn preview-segmented - [] - [rn/view - {:background-color (colors/theme-colors colors/white colors/neutral-90) - :flex 1} - [rn/flat-list - {:flex 1 - :keyboard-should-persist-taps :always - :header [cool-preview] - :key-fn str}]]) diff --git a/src/status_im2/contexts/quo_preview/tabs/tabs.cljs b/src/status_im2/contexts/quo_preview/tabs/tabs.cljs index 82f36a546b..4a895caa2f 100644 --- a/src/status_im2/contexts/quo_preview/tabs/tabs.cljs +++ b/src/status_im2/contexts/quo_preview/tabs/tabs.cljs @@ -1,6 +1,5 @@ (ns status-im2.contexts.quo-preview.tabs.tabs (:require [quo2.core :as quo] - [quo2.foundations.colors :as colors] [react-native.core :as rn] [reagent.core :as reagent] [status-im2.contexts.quo-preview.preview :as preview])) @@ -28,15 +27,15 @@ :label (str "Tab " (inc index)) :notification-dot? (and unread-indicators? (zero? (rem index 2)))})) -(defn cool-preview +(defn preview-tabs [] (let [state (reagent/atom {:size 32 :scrollable? false})] (fn [] - [rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!} + [preview/preview-container + {:state state + :descriptor descriptor} [rn/view {:padding-bottom 150} - [rn/view {:flex 1} - [preview/customizer state descriptor]] [rn/view {:padding-vertical 60 :padding-horizontal 20 @@ -52,14 +51,3 @@ {:scroll-on-press? true :fade-end-percentage 0.4 :fade-end? true}))]]]]))) - -(defn preview-tabs - [] - [rn/view - {:background-color (colors/theme-colors colors/white colors/neutral-90) - :flex 1} - [rn/flat-list - {:flex 1 - :keyboard-should-persist-taps :always - :header [cool-preview] - :key-fn str}]]) diff --git a/src/status_im2/contexts/quo_preview/tags/context_tags.cljs b/src/status_im2/contexts/quo_preview/tags/context_tags.cljs index 1308f23bba..e967a11705 100644 --- a/src/status_im2/contexts/quo_preview/tags/context_tags.cljs +++ b/src/status_im2/contexts/quo_preview/tags/context_tags.cljs @@ -1,6 +1,5 @@ (ns status-im2.contexts.quo-preview.tags.context-tags (:require [quo2.core :as quo] - [quo2.foundations.colors :as colors] [react-native.core :as rn] [reagent.core :as reagent] [status-im2.common.resources :as resources] @@ -26,7 +25,7 @@ :options [{:key 24} {:key 32}]}) -(def main-descriptor +(def descriptor [{:label "Type" :key :type :type :select @@ -164,7 +163,7 @@ :key :duration :type :text}]) -(defn cool-preview +(defn preview-context-tags [] (let [state (reagent/atom @@ -203,26 +202,25 @@ :context "Context" :duration "00:32"})] (fn [] - [rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!} + [preview/preview-container + {:state state + :descriptor (concat descriptor + (case (:type @state) + :default default-descriptor + :multiuser multiuser-descriptor + :group group-descriptor + :channel channel-descriptor + :community community-descriptor + :token token-descriptor + :network network-descriptor + :multinetwork multinetwork-descriptor + :account account-descriptor + :collectible collectible-descriptor + :address address-descriptor + :icon icon-descriptor + :audio audio-descriptor + default-descriptor))} [rn/view {:style {:padding-bottom 150}} - [rn/view {:style {:flex 1}} - [preview/customizer state - (concat main-descriptor - (case (:type @state) - :default default-descriptor - :multiuser multiuser-descriptor - :group group-descriptor - :channel channel-descriptor - :community community-descriptor - :token token-descriptor - :network network-descriptor - :multinetwork multinetwork-descriptor - :account account-descriptor - :collectible collectible-descriptor - :address address-descriptor - :icon icon-descriptor - :audio audio-descriptor - default-descriptor))]] [rn/view {:style {:padding-vertical 60}} [preview/blur-view {:style {:flex 1 @@ -230,14 +228,3 @@ :margin-horizontal 40} :show-blur-background? (:blur? @state)} [quo/context-tag @state]]]]]))) - -(defn preview-context-tags - [] - [rn/view - {:style {:background-color (colors/theme-colors colors/white colors/neutral-95) - :flex 1}} - [rn/flat-list - {:style {:flex 1} - :keyboard-should-persist-taps :always - :header [cool-preview] - :key-fn str}]]) diff --git a/src/status_im2/contexts/quo_preview/tags/permission_tag.cljs b/src/status_im2/contexts/quo_preview/tags/permission_tag.cljs index 0ca85051e4..63b17c95d4 100644 --- a/src/status_im2/contexts/quo_preview/tags/permission_tag.cljs +++ b/src/status_im2/contexts/quo_preview/tags/permission_tag.cljs @@ -167,14 +167,14 @@ {:id 5 :token-icon (resources/get-mock-image :status-logo)} {:id 6 :token-icon (resources/get-mock-image :status-logo)}]}]}]) -(defn cool-preview +(defn preview-permission-tag [] (let [state (reagent/atom {:size 32})] (fn [] - [rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!} + [preview/preview-container + {:state state + :descriptor descriptor} [rn/view {:padding-bottom 150} - [rn/view {:flex 1} - [preview/customizer state descriptor]] [rn/view {:padding-vertical 60 :align-self :center @@ -191,16 +191,3 @@ :background-color (colors/theme-colors colors/neutral-10 colors/neutral-80)})]]))]]]))) - -(defn preview-permission-tag - [] - [rn/view - {:background-color (colors/theme-colors - colors/white - colors/neutral-90) - :flex 1} - [rn/flat-list - {:flex 1 - :keyboard-should-persist-taps :always - :header [cool-preview] - :key-fn str}]]) diff --git a/src/status_im2/contexts/quo_preview/tags/status_tags.cljs b/src/status_im2/contexts/quo_preview/tags/status_tags.cljs index 6ab0e24e7f..d98f28436e 100644 --- a/src/status_im2/contexts/quo_preview/tags/status_tags.cljs +++ b/src/status_im2/contexts/quo_preview/tags/status_tags.cljs @@ -30,7 +30,7 @@ :key :blur? :type :boolean}]) -(defn cool-preview +(defn preview-status-tags [] (let [state (reagent/atom {:status :positive :size :small @@ -46,24 +46,12 @@ :pending (-> @state (assoc :status {:type :pending}) (assoc :label (i18n/label :t/pending))))] - [rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!} + [preview/preview-container + {:state state + :descriptor descriptor} [rn/view {:padding-bottom 150} - [rn/view {:flex 1} - [preview/customizer state descriptor]] [preview/blur-view {:show-blur-background? (:blur? @state) :blur-view-props {:blur-type :dark :overlay-color colors/neutral-80-opa-80} :style {:align-self :center}} [quo2/status-tag props]]]])))) - -(defn preview-status-tags - [] - [rn/view - {:background-color (colors/theme-colors colors/white - colors/neutral-90) - :flex 1} - [rn/flat-list - {:flex 1 - :keyboard-should-persist-taps :always - :header [cool-preview] - :key-fn str}]]) diff --git a/src/status_im2/contexts/quo_preview/tags/tag.cljs b/src/status_im2/contexts/quo_preview/tags/tag.cljs index d7db0479d0..cb7f108988 100644 --- a/src/status_im2/contexts/quo_preview/tags/tag.cljs +++ b/src/status_im2/contexts/quo_preview/tags/tag.cljs @@ -1,11 +1,11 @@ (ns status-im2.contexts.quo-preview.tags.tag (:require [quo.react-native :as rn] - [quo.previews.preview :as preview] [quo2.foundations.colors :as colors] [quo2.components.tags.tag :as tag] [status-im.ui.components.react :as react] [status-im2.common.resources :as resources] - [reagent.core :as reagent])) + [reagent.core :as reagent] + [status-im2.contexts.quo-preview.preview :as preview])) (def descriptor [{:label "Size:" @@ -34,18 +34,18 @@ :key :blurred? :type :boolean}]) -(defn cool-preview +(defn preview-tag [] (let [state (reagent/atom {:size 32 :labelled? true :type :emoji})] (fn [] - [rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!} + [preview/preview-container + {:state state + :descriptor descriptor} [rn/view {:style {:padding-bottom 150 :padding-top 60}} - [rn/view {:flex 1} - [preview/customizer state descriptor]] [rn/view {:style {:flex 1 :justify-content :center @@ -84,15 +84,3 @@ :resource (if (= :emoji (:type @state)) (resources/get-image :music) :i/placeholder)})]]]]]))) -(defn preview-tag - [] - [rn/view - {:flex 1 - :background-color (colors/theme-colors - colors/white - colors/neutral-90)} - [rn/flat-list - {:flex 1 - :keyboard-should-persist-taps :always - :header [cool-preview] - :key-fn str}]]) diff --git a/src/status_im2/contexts/quo_preview/tags/tags.cljs b/src/status_im2/contexts/quo_preview/tags/tags.cljs index ba82838ad8..56aaf5071b 100644 --- a/src/status_im2/contexts/quo_preview/tags/tags.cljs +++ b/src/status_im2/contexts/quo_preview/tags/tags.cljs @@ -44,7 +44,7 @@ :key :blurred? :type :boolean}]) -(defn cool-preview +(defn preview-tags [] (let [state (reagent/atom {:size 32 :labelled? true @@ -52,12 +52,12 @@ :fade-end-percentage 0.4 :scrollable? false})] (fn [] - [rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!} + [preview/preview-container + {:state state + :descriptor descriptor} [rn/view {:style {:padding-bottom 150 :padding-top 60}} - [rn/view {:style {:flex 1}} - [preview/customizer state descriptor]] [rn/view {:style {:flex 1 :justify-content :center @@ -101,15 +101,3 @@ (when (:scrollable? @state) {:scroll-on-press? true :fade-end? true}))]]]]]))) -(defn preview-tags - [] - [rn/view - {:flex 1 - :background-color (colors/theme-colors - colors/white - colors/neutral-90)} - [rn/flat-list - {:flex 1 - :keyboard-should-persist-taps :always - :header [cool-preview] - :key-fn str}]]) diff --git a/src/status_im2/contexts/quo_preview/tags/token_tag.cljs b/src/status_im2/contexts/quo_preview/tags/token_tag.cljs index dc8be22cd7..f9701576af 100644 --- a/src/status_im2/contexts/quo_preview/tags/token_tag.cljs +++ b/src/status_im2/contexts/quo_preview/tags/token_tag.cljs @@ -1,6 +1,5 @@ (ns status-im2.contexts.quo-preview.tags.token-tag (:require [quo2.components.tags.token-tag :as quo2] - [quo2.foundations.colors :as colors] [quo2.foundations.resources :as resources] [react-native.core :as rn] [reagent.core :as reagent] @@ -44,27 +43,17 @@ (def eth-token (resources/get-token :eth)) (def snt-token (resources/get-token :snt)) -(defn cool-preview +(defn preview-token-tag [] (let [state (reagent/atom {:size :big :value 10 :token "ETH" :sufficient? false :purchasable? false})] (fn [] - [rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!} + [preview/preview-container + {:state state + :descriptor descriptor} [rn/view {:padding-bottom 150} - [preview/customizer state descriptor] [rn/view {:padding-vertical 60 :align-items :center} [quo2/token-tag (merge @state {:token-img-src (if (= (get-in @state [:token]) "ETH") eth-token snt-token)})]]]]))) - -(defn preview-token-tag - [] - [rn/view - {:background-color (colors/theme-colors colors/white colors/neutral-90) - :flex 1} - [rn/flat-list - {:flex 1 - :keyboard-should-persist-taps :always - :header [cool-preview] - :key-fn str}]]) diff --git a/src/status_im2/contexts/quo_preview/text_combinations/preview.cljs b/src/status_im2/contexts/quo_preview/text_combinations/preview.cljs index ae8f538c73..d4b7e5c70a 100644 --- a/src/status_im2/contexts/quo_preview/text_combinations/preview.cljs +++ b/src/status_im2/contexts/quo_preview/text_combinations/preview.cljs @@ -1,6 +1,5 @@ (ns status-im2.contexts.quo-preview.text-combinations.preview (:require [quo2.components.text-combinations.view :as quo2] - [quo2.foundations.colors :as colors] [react-native.core :as rn] [reagent.core :as reagent] [status-im2.common.resources :as resources] @@ -30,7 +29,7 @@ (assoc state :avatar (resources/get-mock-image :user-picture-male4)) state)) -(defn cool-preview +(defn preview [] (let [state (reagent/atom {:title "Title" :title-accessibility-label :title @@ -38,24 +37,12 @@ :description-props "" :description-accessibility-label :subtitle})] (fn [] - [rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!} + [preview/preview-container + {:state state + :descriptor descriptor} [rn/view {:padding-bottom 150} - [preview/customizer state descriptor] [rn/view {:padding-vertical 60 :align-items :center} [quo2/view (state->text-combinations-props @state)]]]]))) - -(defn preview - [] - [rn/view - {:background-color (colors/theme-colors colors/white colors/neutral-90) - :flex 1} - [rn/flat-list - {:flex 1 - :flex-grow 1 - :nested-scroll-enabled true - :keyboard-should-persist-taps :always - :header [cool-preview] - :key-fn str}]]) diff --git a/src/status_im2/contexts/quo_preview/wallet/account_card.cljs b/src/status_im2/contexts/quo_preview/wallet/account_card.cljs index cdf6e35096..2a20291e92 100644 --- a/src/status_im2/contexts/quo_preview/wallet/account_card.cljs +++ b/src/status_im2/contexts/quo_preview/wallet/account_card.cljs @@ -86,7 +86,8 @@ :metrics? true :type :add-account})) -(defn cool-preview + +(defn preview-account-card [] (let [state (reagent/atom (initial-state :default))] [:f> @@ -94,8 +95,9 @@ (rn/use-effect (fn [] (reset! state (initial-state (:type @state)))) [(:type @state)]) - [rn/view - {:style {:flex 1}} + [preview/preview-container + {:state state + :descriptor descriptor} [rn/view {:style {:margin-vertical 40 :padding-left 40 @@ -118,15 +120,3 @@ [preview/customizer state descriptor]] [rn/view {:style {:align-items :center :margin-top 40}} [quo/account-card @state]]])])) - -(defn preview-account-card - [] - [rn/view - {:background-color (colors/theme-colors colors/white - colors/neutral-90) - :flex 1} - [rn/flat-list - {:flex 1 - :keyboard-should-persist-taps :always - :header [cool-preview] - :key-fn str}]]) diff --git a/src/status_im2/contexts/quo_preview/wallet/account_overview.cljs b/src/status_im2/contexts/quo_preview/wallet/account_overview.cljs index 67ab368ee4..fdc32bd78b 100644 --- a/src/status_im2/contexts/quo_preview/wallet/account_overview.cljs +++ b/src/status_im2/contexts/quo_preview/wallet/account_overview.cljs @@ -1,6 +1,5 @@ (ns status-im2.contexts.quo-preview.wallet.account-overview (:require [quo2.core :as quo] - [quo2.foundations.colors :as colors] [react-native.core :as rn] [reagent.core :as reagent] [status-im2.contexts.quo-preview.preview :as preview])) @@ -68,7 +67,7 @@ {:key :custom :value "Custom"}]}]) -(defn cool-preview +(defn preview-account-overview [] (let [state (reagent/atom {:metrics :positive :currency-change "€0.00" @@ -81,24 +80,12 @@ :account :default :customization-color :blue})] (fn [] - [rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!} + [preview/preview-container + {:state state + :descriptor descriptor} [rn/view {:style {:padding-bottom 150}} - [rn/view {:style {:flex 1}} - [preview/customizer state descriptor]] [rn/view {:style {:padding-vertical 60 :flex-direction :row :justify-content :center}} [quo/account-overview @state]]]]))) - -(defn preview-account-overview - [] - [rn/view - {:style {:background-color (colors/theme-colors colors/white - colors/neutral-95) - :flex 1}} - [rn/flat-list - {:flex 1 - :keyboard-should-persist-taps :always - :header [cool-preview] - :key-fn str}]]) diff --git a/src/status_im2/contexts/quo_preview/wallet/keypair.cljs b/src/status_im2/contexts/quo_preview/wallet/keypair.cljs index fb5b898324..49b898195b 100644 --- a/src/status_im2/contexts/quo_preview/wallet/keypair.cljs +++ b/src/status_im2/contexts/quo_preview/wallet/keypair.cljs @@ -82,7 +82,7 @@ (def other-details {:full-name "Metamask"}) -(defn cool-preview +(defn preview [] (let [state (reagent/atom {:accounts accounts :customization-color :blue @@ -91,25 +91,14 @@ :on-options-press #(js/alert "Options pressed") :action :selector})] (fn [] - [rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!} - [rn/view {:style {:padding-bottom 150}} - [rn/view {:style {:flex 1}} - [preview/customizer state descriptor]] - [rn/view - {:style {:padding-vertical 30 - :flex-direction :row - :justify-content :center}} - [quo/keypair - (merge - @state - {:details (if (= (:type @state) :default-keypair) default-details other-details)})]]]]))) - -(defn preview - [] - [rn/view - {:style {:flex 1}} - [rn/flat-list - {:flex 1 - :keyboard-should-persist-taps :always - :header [cool-preview] - :key-fn str}]]) + [preview/preview-container + {:state state + :descriptor descriptor} + [rn/view + {:style {:padding-vertical 30 + :flex-direction :row + :justify-content :center}} + [quo/keypair + (merge + @state + {:details (if (= (:type @state) :default-keypair) default-details other-details)})]]]))) diff --git a/src/status_im2/contexts/quo_preview/wallet/network_amount.cljs b/src/status_im2/contexts/quo_preview/wallet/network_amount.cljs index cf82561baf..d45402f206 100644 --- a/src/status_im2/contexts/quo_preview/wallet/network_amount.cljs +++ b/src/status_im2/contexts/quo_preview/wallet/network_amount.cljs @@ -23,9 +23,10 @@ (let [state (reagent/atom {:amount "5.123456" :token :eth})] (fn [] - [rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!} + [preview/preview-container + {:state state + :descriptor descriptor} [rn/view {:style {:flex 1 :padding-horizontal 20}} - [rn/view {:style {:min-height 150}} [preview/customizer state descriptor]] [quo/network-amount @state]]]))) diff --git a/src/status_im2/contexts/quo_preview/wallet/network_bridge.cljs b/src/status_im2/contexts/quo_preview/wallet/network_bridge.cljs index 40ca4011fd..f9d15f72be 100644 --- a/src/status_im2/contexts/quo_preview/wallet/network_bridge.cljs +++ b/src/status_im2/contexts/quo_preview/wallet/network_bridge.cljs @@ -31,11 +31,12 @@ :status :default :amount "50 SNT"})] (fn [] - [rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!} + [preview/preview-container + {:state state + :descriptor descriptor} [rn/view {:style {:flex 1 :padding-horizontal 20}} - [rn/view {:style {:min-height 150}} [preview/customizer state descriptor]] [rn/view {:style {:flex 1 :margin-top 50 diff --git a/src/status_im2/contexts/quo_preview/wallet/network_link.cljs b/src/status_im2/contexts/quo_preview/wallet/network_link.cljs index dec720ab5b..a6f2b66a1a 100644 --- a/src/status_im2/contexts/quo_preview/wallet/network_link.cljs +++ b/src/status_im2/contexts/quo_preview/wallet/network_link.cljs @@ -38,11 +38,9 @@ :source :ethereum :destination :optimism})] (fn [] - [rn/view - {:style {:flex 1 - :padding-horizontal 20}} - [rn/view {:style {:min-height 150}} - [preview/customizer state descriptor]] + [preview/preview-container + {:state state + :descriptor descriptor} [rn/view {:style {:flex 1 :padding-top 40 diff --git a/src/status_im2/contexts/quo_preview/wallet/progress_bar.cljs b/src/status_im2/contexts/quo_preview/wallet/progress_bar.cljs index 743db728b4..e0c439331a 100644 --- a/src/status_im2/contexts/quo_preview/wallet/progress_bar.cljs +++ b/src/status_im2/contexts/quo_preview/wallet/progress_bar.cljs @@ -23,11 +23,9 @@ (let [state (reagent/atom {:state :pending :customization-color :blue})] (fn [] - [rn/view - {:style {:flex 1 - :padding-horizontal 20}} - [rn/view {:style {:min-height 150}} - [preview/customizer state descriptor]] + [preview/preview-container + {:state state + :descriptor descriptor} [rn/view {:style {:flex 1 :padding-top 40 diff --git a/src/status_im2/contexts/quo_preview/wallet/summary_info.cljs b/src/status_im2/contexts/quo_preview/wallet/summary_info.cljs index 1a37076f76..27349ba99b 100644 --- a/src/status_im2/contexts/quo_preview/wallet/summary_info.cljs +++ b/src/status_im2/contexts/quo_preview/wallet/summary_info.cljs @@ -47,9 +47,10 @@ :status-account (merge status-account-props {:size 16})}] (fn [] (let [account-props (if (= (:type @state) :status-account) status-account-props user-props)] - [rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!} + [preview/preview-container + {:state state + :descriptor descriptor} [rn/view {:style {:flex 1 :padding-horizontal 20}} - [rn/view {:style {:min-height 150}} [preview/customizer state descriptor]] [quo/summary-info (merge @state {:account-props account-props})]]])))) diff --git a/src/status_im2/contexts/quo_preview/wallet/token_input.cljs b/src/status_im2/contexts/quo_preview/wallet/token_input.cljs index 13827b803b..0f3b2df9f6 100644 --- a/src/status_im2/contexts/quo_preview/wallet/token_input.cljs +++ b/src/status_im2/contexts/quo_preview/wallet/token_input.cljs @@ -27,11 +27,12 @@ :currency :usd :conversion 0.02})] (fn [] - [rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!} + [preview/preview-container + {:state state + :descriptor descriptor} [rn/view {:style {:flex 1 :padding-horizontal 20}} - [rn/view {:style {:min-height 150}} [preview/customizer state descriptor]] [rn/view {:style {:flex 1 :margin-top 50 diff --git a/src/status_im2/contexts/quo_preview/wallet/wallet_overview.cljs b/src/status_im2/contexts/quo_preview/wallet/wallet_overview.cljs index e9efcf46e8..cea3a8f4df 100644 --- a/src/status_im2/contexts/quo_preview/wallet/wallet_overview.cljs +++ b/src/status_im2/contexts/quo_preview/wallet/wallet_overview.cljs @@ -1,6 +1,5 @@ (ns status-im2.contexts.quo-preview.wallet.wallet-overview (:require [quo2.core :as quo] - [quo2.foundations.colors :as colors] [react-native.core :as rn] [reagent.core :as reagent] [status-im2.contexts.quo-preview.preview :as preview])) @@ -42,7 +41,7 @@ {:key :negative :value "Negative"}]}]) -(defn cool-preview +(defn preview-wallet-overview [] (let [state (reagent/atom {:state :default :time-frame :one-week @@ -54,24 +53,12 @@ :currency-change "€0.00" :percentage-change "0.00%"})] (fn [] - [rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!} + [preview/preview-container + {:state state + :descriptor descriptor} [rn/view {:padding-bottom 150} - [rn/view {:flex 1} - [preview/customizer state descriptor]] [rn/view {:padding-vertical 60 :flex-direction :row :justify-content :center} [quo/wallet-overview @state]]]]))) - -(defn preview-wallet-overview - [] - [rn/view - {:background-color (colors/theme-colors colors/white - colors/neutral-95) - :flex 1} - [rn/flat-list - {:flex 1 - :keyboard-should-persist-taps :always - :header [cool-preview] - :key-fn str}]])