update

src/quo2/components/list_items/dapp/component_spec.cljs

@@ -1,24 +0,0 @@
-(ns quo2.components.list-items.dapp.component-spec
-  (:require [quo2.components.list-items.dapp.view :as dapp]
-            [test-helpers.component :as h]))
-
-(def props
-  {:dapp                {:avatar nil
-                         :name   "Coingecko"
-                         :value  "coingecko.com"}
-   :state               :default
-   :action              :icon
-   :blur?               false
-   :customization-color :blue})
-
-(h/describe
-  "dApp component test"
-  (h/test "default render"
-    (h/render [dapp/view props])
-    (h/is-truthy (h/get-by-text (:name (:dapp props))))
-    (h/is-truthy (h/get-by-text (:value (:dapp props)))))
-  (h/test "on-press event"
-    (let [mock-fn (h/mock-fn)]
-      (h/render [dapp/view (assoc props :on-press-icon mock-fn)])
-      (h/fire-event :press (h/get-by-test-id "dapp-component-icon"))
-      (h/was-called mock-fn))))

src/quo2/components/list_items/dapp/style.cljs

@@ -1,47 +0,0 @@
-(ns quo2.components.list-items.dapp.style
-  (:require [quo2.foundations.colors :as colors]))
-
-(defn get-background-color
-  [{:keys [pressed? state blur? customization-color theme]}]
-  (cond
-    (and pressed? (= theme :dark) blur?)          colors/white-opa-5
-
-    pressed?                                      (colors/theme-colors
-                                                   (colors/custom-color customization-color 50 5)
-                                                   (colors/custom-color customization-color 60 5)
-                                                   theme)
-
-    (and (= state :active) (= theme :dark) blur?) colors/white-opa-10
-
-    (= state :active)                             (colors/theme-colors
-                                                   (colors/custom-color customization-color 50 10)
-                                                   (colors/custom-color customization-color 60 10)
-                                                   theme)
-
-    :else                                         :transparent))
-
-(defn container
-  [props]
-  {:flex               1
-   :padding-horizontal 12
-   :padding-vertical   8
-   :border-radius      12
-   :background-color   (get-background-color props)
-   :flex-direction     :row
-   :justify-content    :space-between
-   :align-items        :center})
-
-(def container-info
-  {:flex-direction :row
-   :align-items    :center})
-
-(def user-info
-  {:margin-left 8})
-
-(defn style-text-name
-  [theme]
-  {:color (colors/theme-colors colors/neutral-100 colors/white theme)})
-
-(defn style-text-value
-  [theme]
-  {:color (colors/theme-colors colors/neutral-50 colors/white theme)})

src/quo2/components/list_items/dapp/view.cljs

@@ -1,47 +0,0 @@
-(ns quo2.components.list-items.dapp.view
-  (:require [quo2.components.icon :as icons]
-            [quo2.components.markdown.text :as text]
-            [quo2.foundations.colors :as colors]
-            [react-native.core :as rn]
-            [react-native.fast-image :as fast-image]
-            [quo2.components.list-items.dapp.style :as style]
-            [quo2.theme :as quo.theme]
-            [reagent.core :as reagent]))
-
-(defn- view-internal
-  []
-  (let [pressed? (reagent/atom false)]
-    (fn [{:keys [dapp action on-press on-press-icon theme] :as props}]
-      [rn/pressable
-       {:style        (style/container (assoc props :pressed? @pressed?))
-        :on-press     on-press
-        :on-press-in  #(reset! pressed? true)
-        :on-press-out #(reset! pressed? false)}
-       [rn/view {:style style/container-info}
-        [fast-image/fast-image
-         {:source (:avatar dapp)
-          :style  {:width 32 :height 32}}]
-        [rn/view {:style style/user-info}
-         [text/text
-          {:weight :semi-bold
-           :size   :paragraph-1
-           :style  (style/style-text-name theme)}
-          (:name dapp)]
-         [text/text
-          {:weight :regular
-           :size   :paragraph-2
-           :style  (style/style-text-value theme)}
-          (:value dapp)]]]
-       (when (= action :icon)
-         [rn/pressable
-          {:on-press on-press-icon
-           :testID   "dapp-component-icon"}
-          [icons/icon :i/options
-           {:color               (colors/theme-colors
-                                  colors/neutral-50
-                                  colors/neutral-40
-                                  theme)
-            :accessibility-label :icon}]])])))
-
-(def view
-  (quo.theme/with-theme view-internal))

src/quo2/components/share/share_qr_code/view.cljs

@@ -8,7 +8,8 @@
             [react-native.core :as rn]))
 
 (defn view
-  [{:keys [source link-title url-on-press url-on-long-press qr-url share-on-press]}]
+  [{:keys [source link-title
+           url-on-press url-on-long-press qr-url share-on-press]}]
   [blur/ios-view
    {:style     style/qr-code-container
     :blur-type :light}

src/quo2/core.cljs

@@ -62,7 +62,6 @@
     quo2.components.list-items.account-list-card.view
     quo2.components.list-items.channel
     quo2.components.list-items.community.view
-    quo2.components.list-items.dapp.view
     quo2.components.list-items.menu-item
     quo2.components.list-items.preview-list
     quo2.components.list-items.token-value.view
@@ -111,8 +110,8 @@
     quo2.components.tags.tags
     quo2.components.tags.token-tag
     quo2.components.text-combinations.title.view
-    quo2.components.wallet.account-card.view
     quo2.components.wallet.account-overview.view
+    quo2.components.wallet.account-card.view
     quo2.components.wallet.keypair.view
     quo2.components.wallet.network-amount.view
     quo2.components.wallet.network-bridge.view
@@ -236,7 +235,6 @@
 ;;;; List items
 (def account-list-card quo2.components.list-items.account-list-card.view/view)
 (def channel-list-item quo2.components.list-items.channel/list-item)
-(def dapp quo2.components.list-items.dapp.view/view)
 (def menu-item quo2.components.list-items.menu-item/menu-item)
 (def preview-list quo2.components.list-items.preview-list/preview-list)
 (def user-list quo2.components.list-items.user-list/user-list)

src/quo2/core_spec.cljs

@@ -36,7 +36,6 @@
     [quo2.components.links.url-preview-list.component-spec]
     [quo2.components.links.url-preview.component-spec]
     [quo2.components.list-items.community.component-spec]
-    [quo2.components.list-items.dapp.component-spec]
     [quo2.components.list-items.token-value.component-spec]
     [quo2.components.markdown.text-component-spec]
     [quo2.components.markdown.list.component-spec]
@@ -56,8 +55,8 @@
     [quo2.components.settings.category.component-spec]
     [quo2.components.share.share-qr-code.component-spec]
     [quo2.components.tags.status-tags-component-spec]
-    [quo2.components.wallet.account-card.component-spec]
     [quo2.components.wallet.account-overview.component-spec]
+    [quo2.components.wallet.account-card.component-spec]
     [quo2.components.wallet.keypair.component-spec]
     [quo2.components.wallet.network-amount.component-spec]
     [quo2.components.wallet.network-bridge.component-spec]

src/status_im2/common/resources.cljs

@@ -52,7 +52,6 @@
 (def mock-images
   {:diamond              (js/require "../resources/images/mock2/diamond.png")
    :coinbase             (js/require "../resources/images/mock2/coinbase.png")
-   :coin-gecko           (js/require "../resources/images/mock2/coin-gecko.png")
    :collectible          (js/require "../resources/images/mock2/collectible.png")
    :contact              (js/require "../resources/images/mock2/contact.png")
    :community-banner     (js/require "../resources/images/mock2/community-banner.png")

src/status_im2/contexts/chat/composer/constants.cljs

@@ -11,7 +11,8 @@
 
 (def ^:const composer-default-height (+ bar-container-height input-height actions-container-height))
 
-(def ^:const line-height (:line-height typography/paragraph-1))
+;(def ^:const line-height (:line-height typography/paragraph-1))
+(def ^:const line-height 20.5)
 
 (def ^:const multiline-minimized-height (+ input-height (if platform/ios? 18 line-height)))
 

src/status_im2/contexts/quo_preview/avatars/account_avatar.cljs

@@ -1,14 +1,20 @@
 (ns status-im2.contexts.quo-preview.avatars.account-avatar
-  (:require [quo2.core :as quo]
+  (:require [quo2.components.avatars.account-avatar.view :as account-avatar]
+            [quo2.foundations.colors :as colors]
+            [react-native.core :as rn]
             [reagent.core :as reagent]
             [status-im2.contexts.quo-preview.preview :as preview]))
 
 (def descriptor
-  [{:key     :type
+  [{:label   "Type"
+    :key     :type
     :type    :select
-    :options [{:key :default}
-              {:key :watch-only}]}
-   {:key     :size
+    :options [{:key   :default
+               :value "default"}
+              {:key   :watch-only
+               :value "watch only"}]}
+   {:label   "Size"
+    :key     :size
     :type    :select
     :options [{:key   16
                :value "16"}
@@ -29,12 +35,29 @@
     :type  :text}
    (preview/customization-color-option)])
 
-(defn view
+(defn cool-preview
   []
   (let [state (reagent/atom {:customization-color :purple
                              :size                80
                              :emoji               "🍑"
                              :type                :default})]
     (fn []
-      [preview/preview-container {:state state :descriptor descriptor}
-       [quo/account-avatar @state]])))
+      [rn/view
+       {:style {:margin-bottom 50
+                :padding       16}}
+       [preview/customizer state descriptor]
+       [rn/view
+        {:style {:padding-vertical 60
+                 :align-items      :center}}
+        [account-avatar/view @state]]])))
+
+(defn preview-account-avatar
+  []
+  [rn/view
+   {:style {:flex             1
+            :background-color (colors/theme-colors colors/white colors/neutral-95)}}
+   [rn/flat-list
+    {:flex                         1
+     :keyboard-should-persist-taps :always
+     :header                       [cool-preview]
+     :key-fn                       str}]])

src/status_im2/contexts/quo_preview/avatars/channel_avatar.cljs

@@ -1,26 +1,34 @@
 (ns status-im2.contexts.quo-preview.avatars.channel-avatar
   (: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]))
 
 (def descriptor
-  [{:key     :size
+  [{:label   "Size:"
+    :key     :size
     :type    :select
     :options [{:key :size/l :value "Large"}
-              {:key :default}]}
-   {:key  :emoji
-    :type :text}
-   {:key  :full-name
-    :type :text}
+              {:key :default :value "Default"}]}
+   {:label "Emoji:"
+    :key   :emoji
+    :type  :text}
+   {:label "Full name:"
+    :key   :full-name
+    :type  :text}
    (preview/customization-color-option)
-   {:key     :locked-state
+   {:label   "Locked state:"
+    :key     :locked-state
     :type    :select
-    :options [{:key :not-set}
-              {:key :unlocked}
-              {:key :locked}]}])
+    :options [{:key   :not-set
+               :value "Not set"}
+              {:key   :unlocked
+               :value "Unlocked"}
+              {:key   :locked
+               :value "Locked"}]}])
 
-(defn view
+(defn cool-preview
   []
   (let [state (reagent/atom {:size                :size/l
                              :locked-state        :not-set
@@ -34,8 +42,26 @@
                                   :unlocked false
                                   :locked   true
                                   nil)]
-        [preview/preview-container {:state state :descriptor descriptor}
-         [quo/channel-avatar
-          (assoc @state
-                 :locked?             locked?
-                 :customization-color customization-color)]]))))
+        [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 60
+                    :flex-direction   :row
+                    :justify-content  :center}}
+           [quo/channel-avatar
+            (assoc @state
+                   :locked?             locked?
+                   :customization-color customization-color)]]]]))))
+
+(defn preview-channel-avatar
+  []
+  [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}]])

src/status_im2/contexts/quo_preview/avatars/group_avatar.cljs

@@ -1,11 +1,14 @@
 (ns status-im2.contexts.quo-preview.avatars.group-avatar
-  (:require [quo2.core :as quo]
+  (:require [quo2.core :as quo2]
+            [quo2.foundations.colors :as colors]
+            [react-native.core :as rn]
             [reagent.core :as reagent]
             [status-im2.common.resources :as resources]
             [status-im2.contexts.quo-preview.preview :as preview]))
 
 (def descriptor
-  [{:key     :size
+  [{:label   "Size"
+    :key     :size
     :type    :select
     :options [{:key   :size/s-20
                :value "20"}
@@ -17,21 +20,40 @@
                :value "48"}
               {:key   :size/s-80
                :value "80"}]}
-   {:label "Avatar:"
+   {:label "Avatar"
     :key   :picture?
     :type  :boolean}
    (preview/customization-color-option)])
 
 (def avatar (resources/get-mock-image :photo1))
 
-(defn view
+(defn cool-preview
   []
-  (let [state (reagent/atom {:customization-color :blue
+  (let [state (reagent/atom {:theme               :light
+                             :customization-color :blue
                              :size                :size/s-20
                              :picture?            false})]
     (fn []
-      [preview/preview-container {:state state :descriptor descriptor}
-       [quo/group-avatar
-        (cond-> @state
-          (:picture? @state)
-          (assoc :picture avatar))]])))
+      [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 60
+                  :flex-direction   :row
+                  :justify-content  :center}}
+         (let [{:keys [picture?]} @state
+               params             (if picture? (assoc @state :picture avatar) @state)]
+           [quo2/group-avatar params])]]])))
+
+(defn preview-group-avatar
+  []
+  [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}]])

src/status_im2/contexts/quo_preview/avatars/icon_avatar.cljs

@@ -1,27 +1,59 @@
 (ns status-im2.contexts.quo-preview.avatars.icon-avatar
-  (:require [quo2.components.avatars.icon-avatar :as quo]
+  (:require [quo2.components.avatars.icon-avatar :as quo2]
+            [quo2.foundations.colors :as colors]
+            [react-native.core :as rn]
             [reagent.core :as reagent]
             [status-im2.contexts.quo-preview.preview :as preview]))
 
 (def descriptor
-  [{:key     :size
+  [{:label   "Size"
+    :key     :size
     :type    :select
-    :options [{:key :small}
-              {:key :medium}
-              {:key :big}]}
-   {:key     :icon
+    :options [{:key   :small
+               :value "Small"}
+              {:key   :medium
+               :value "Medium"}
+              {:key   :big
+               :value "Big"}]}
+   {:label   "Icon"
+    :key     :icon
     :type    :select
-    :options [{:key   :i/placeholder20
+    :options [{:key   :main-icons/placeholder20
                :value "Placeholder"}
-              {:key :i/wallet}
-              {:key :i/play}]}
-   (preview/customization-color-option {:key :color})])
+              {:key   :main-icons/wallet
+               :value "Wallet"}
+              {:key   :main-icons/play
+               :value "Play"}]}
+   {:label   "Color"
+    :key     :color
+    :type    :select
+    :options (map
+              (fn [c]
+                {:key   c
+                 :value c})
+              (keys colors/customization))}])
 
-(defn view
+(defn cool-preview
   []
   (let [state (reagent/atom {:size  :big
-                             :icon  :i/placeholder20
+                             :icon  :main-icons/placeholder20
                              :color :primary})]
     (fn []
-      [preview/preview-container {:state state :descriptor descriptor}
-       [quo/icon-avatar @state]])))
+      [rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!}
+       [rn/view {:padding-bottom 150}
+        [preview/customizer state descriptor]
+        [rn/view
+         {:padding-vertical 60
+          :align-items      :center}
+         [quo2/icon-avatar @state]]]])))
+
+(defn preview-icon-avatar
+  []
+  [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}]])

src/status_im2/contexts/quo_preview/avatars/user_avatar.cljs

@@ -1,29 +1,48 @@
 (ns status-im2.contexts.quo-preview.avatars.user-avatar
-  (:require [quo2.components.avatars.user-avatar.view :as quo]
+  (:require [quo2.components.avatars.user-avatar.view :as quo2]
+            [quo2.foundations.colors :as colors]
+            [react-native.core :as rn]
             [reagent.core :as reagent]
             [status-im2.common.resources :as resources]
             [status-im2.contexts.quo-preview.preview :as preview]))
 
 (def descriptor
-  [{:key     :size
+  [{:label   "Size:"
+    :key     :size
     :type    :select
-    :options [{:key :big}
-              {:key :medium}
-              {:key :small}
-              {:key :xs}
-              {:key :xxs}
-              {:key :xxxs}]}
-   (preview/customization-color-option)
-   {:key  :online?
-    :type :boolean}
-   {:key  :status-indicator?
-    :type :boolean}
+    :options [{:key   :big
+               :value "Big"}
+              {:key   :medium
+               :value "Medium"}
+              {:key   :small
+               :value "Small"}
+              {:key   :xs
+               :value "x Small"}
+              {:key   :xxs
+               :value "xx Small"}
+              {:key   :xxxs
+               :value "xxx Small"}]}
+   {:label   "Customization color:"
+    :key     :customization-color
+    :type    :select
+    :options (map (fn [[color-kw _]]
+                    {:key   color-kw
+                     :value (name color-kw)})
+                  colors/customization)}
+   {:label "Online status"
+    :key   :online?
+    :type  :boolean}
+   {:label "Status Indicator"
+    :key   :status-indicator?
+    :type  :boolean}
    {:label "Identicon Ring (applies only when there's no profile picture)"
     :key   :ring?
     :type  :boolean}
-   {:key  :full-name
-    :type :text}
-   {:key     :profile-picture
+   {:label "Full name separated by space"
+    :key   :full-name
+    :type  :text}
+   {:label   "Profile Picture"
+    :key     :profile-picture
     :type    :select
     :options [{:value "None"
                :key   nil}
@@ -32,7 +51,7 @@
               {:value "pedro.eth"
                :key   (resources/get-mock-image :user-picture-male4)}]}])
 
-(defn view
+(defn cool-preview
   []
   (let [state (reagent/atom {:full-name           "A Y"
                              :status-indicator?   true
@@ -40,5 +59,23 @@
                              :size                :medium
                              :customization-color :blue})]
     (fn []
-      [preview/preview-container {:state state :descriptor descriptor}
-       [quo/user-avatar @state]])))
+      [rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!}
+       [rn/view {:padding-bottom 150}
+        [rn/view {:flex 1}
+         [preview/customizer state descriptor]]
+        [rn/view
+         {:padding-vertical 60
+          :flex-direction   :row
+          :justify-content  :center}
+         [quo2/user-avatar @state]]]])))
+
+(defn preview-user-avatar
+  []
+  [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}]])

src/status_im2/contexts/quo_preview/avatars/wallet_user_avatar.cljs

@@ -1,5 +1,7 @@
 (ns status-im2.contexts.quo-preview.avatars.wallet-user-avatar
-  (:require [quo2.components.avatars.wallet-user-avatar :as quo]
+  (:require [quo2.components.avatars.wallet-user-avatar :as quo2]
+            [quo2.foundations.colors :as colors]
+            [react-native.core :as rn]
             [reagent.core :as reagent]
             [status-im2.contexts.quo-preview.preview :as preview]))
 
@@ -10,21 +12,46 @@
    {:label "Last name"
     :key   :l-name
     :type  :text}
-   {:key     :size
+   {:label   "Size"
+    :key     :size
     :type    :select
-    :options [{:key :small}
-              {:key :medium}
-              {:key :large}
+    :options [{:key   :small
+               :value "Small"}
+              {:key   :medium
+               :value "Medium"}
+              {:key   :large
+               :value "Large"}
               {:key   :x-large
                :value "X Large"}]}
-   (preview/customization-color-option {:key :color})])
+   {:label   "Color"
+    :key     :color
+    :type    :select
+    :options (map
+              (fn [c]
+                {:key   c
+                 :value c})
+              (keys colors/customization))}])
 
-(defn view
+(defn cool-preview
   []
   (let [state (reagent/atom {:first-name "empty"
                              :last-name  "name"
                              :size       :x-large
                              :color      :indigo})]
     (fn []
-      [preview/preview-container {:state state :descriptor descriptor}
-       [quo/wallet-user-avatar @state]])))
+      [rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!}
+       [rn/view {:padding-bottom 150}
+        [preview/customizer state descriptor]
+        [rn/view {:padding-vertical 60}
+         [quo2/wallet-user-avatar @state]]]])))
+
+(defn preview-wallet-user-avatar
+  []
+  [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}]])

src/status_im2/contexts/quo_preview/banners/banner.cljs

@@ -1,22 +1,46 @@
 (ns status-im2.contexts.quo-preview.banners.banner
-  (:require [quo2.core :as quo]
+  (:require [quo2.core :as quo2]
+            [quo2.foundations.colors :as colors]
+            [react-native.core :as rn]
             [reagent.core :as reagent]
             [status-im2.contexts.quo-preview.preview :as preview]))
 
 (def descriptor
-  [{:key  :latest-pin-text
-    :type :text}
-   {:key  :pins-count
-    :type :text}
-   {:key  :hide-pin?
-    :type :boolean}])
+  [{:label "message"
+    :key   :latest-pin-text
+    :type  :text}
+   {:label "number of messages"
+    :key   :pins-count
+    :type  :text}
+   {:label "hide pin icon?"
+    :key   :hide-pin?
+    :type  :boolean}
+  ])
 
-(defn view
+(defn cool-preview
   []
-  (let [state (reagent/atom {:hide-pin? false
-                             :pins-count 2
-                             :latest-pin-text
-                             "Be respectful of fellow community members, even if they"})]
+  (let [state (reagent/atom
+               {:hide-pin?       false
+                :pins-count      2
+                :latest-pin-text "Be respectful of fellow community members, even if they"})]
     (fn []
-      [preview/preview-container {:state state :descriptor descriptor}
-       [quo/banner @state]])))
+      [rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!}
+       [rn/view {:padding-bottom 150}
+        [rn/view {:flex 1}
+         [preview/customizer state descriptor]]
+        [rn/view
+         {:padding-vertical 60
+          :flex-direction   :row
+          :justify-content  :center}
+         [quo2/banner @state]]]])))
+
+(defn preview-banner
+  []
+  [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}]])

src/status_im2/contexts/quo_preview/bottom_sheet/bottom_sheet.cljs

@@ -0,0 +1,64 @@
+(ns status-im2.contexts.quo-preview.bottom-sheet.bottom-sheet
+  (:require [quo2.core :as quo]
+            [quo2.foundations.colors :as colors]
+            [re-frame.core :as re-frame]
+            [react-native.core :as rn]
+            [reagent.core :as reagent]
+            [status-im2.contexts.quo-preview.preview :as preview]))
+
+(def descriptor
+  [{:label "Show handle:"
+    :key   :show-handle?
+    :type  :boolean}
+   {:label "Backdrop dismiss:"
+    :key   :backdrop-dismiss?
+    :type  :boolean}
+   {:label "Expendable:"
+    :key   :expandable?
+    :type  :boolean}
+   {:label "Disable drag:"
+    :key   :disable-drag?
+    :type  :boolean}])
+
+(defn bottom-sheet-content
+  []
+  [rn/view
+   {:style {:justify-content :center
+            :align-items     :center}}
+   [quo/button {:on-press #(do (re-frame/dispatch [:hide-bottom-sheet]))} "Close bottom sheet"]
+
+   [quo/text {:style {:padding-top 20}} "Hello world!"]])
+
+(defn cool-preview
+  []
+  (let [state                (reagent/atom {:show-handle?      true
+                                            :backdrop-dismiss? true
+                                            :expandable?       true
+                                            :disable-drag?     false})
+        on-bottom-sheet-open (fn []
+                               (re-frame/dispatch [:show-bottom-sheet
+                                                   (merge
+                                                    {:content bottom-sheet-content}
+                                                    @state)]))]
+    (fn []
+      [rn/view
+       {:style {:margin-bottom 50
+                :padding       16}}
+       [preview/customizer state descriptor]
+       [:<>
+        [rn/view
+         {:style {:align-items :center
+                  :padding     16}}
+
+         [quo/button {:on-press on-bottom-sheet-open} "Open bottom sheet"]]]])))
+
+(defn preview-bottom-sheet
+  []
+  [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}]])

src/status_im2/contexts/quo_preview/buttons/button.cljs

@@ -1,22 +1,33 @@
 (ns status-im2.contexts.quo-preview.buttons.button
   (: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]
-            [status-im2.contexts.quo-preview.preview :as preview]))
+            [status-im2.contexts.quo-preview.preview :as preview]
+            [status-im2.common.resources :as resources]))
 
 (def descriptor
-  [{:key     :type
+  [{:label   "Type:"
+    :key     :type
     :type    :select
-    :options [{:key :primary}
-              {:key :positive}
-              {:key :grey}
-              {:key :dark-grey}
-              {:key :outline}
-              {:key :ghost}
-              {:key :danger}
-              {:key :black}]}
-   {:key     :size
+    :options [{:key   :primary
+               :value "Primary"}
+              {:key   :positive
+               :value "Positive"}
+              {:key   :grey
+               :value "Grey"}
+              {:key   :dark-grey
+               :value "Dark Grey"}
+              {:key   :outline
+               :value "Outline"}
+              {:key   :ghost
+               :value "Ghost"}
+              {:key   :danger
+               :value "Danger"}
+              {:key   :black
+               :value "Black"}]}
+   {:label   "Size:"
+    :key     :size
     :type    :select
     :options [{:key   56
                :value "56"}
@@ -26,25 +37,40 @@
                :value "32"}
               {:key   24
                :value "24"}]}
-   {:key     :background
+   {:label   "Background:"
+    :key     :background
     :type    :select
-    :options [{:key :blur}
-              {:key :photo}]}
-   {:key  :icon-only?
-    :type :boolean}
-   {:key  :icon-top
-    :type :boolean}
-   {:key  :icon-right
-    :type :boolean}
-   {:key  :icon-left
-    :type :boolean}
-   {:key  :disabled?
-    :type :boolean}
-   {:key  :label
-    :type :text}
-   (preview/customization-color-option)])
+    :options [{:key   :blur
+               :value "Blur"}
+              {:key   :photo
+               :value "Photo"}]}
+   {:label "Icon Only?:"
+    :key   :icon-only?
+    :type  :boolean}
+   {:label "show icon-top "
+    :key   :icon-top
+    :type  :boolean}
+   {:label "show icon-right"
+    :key   :icon-right
+    :type  :boolean}
+   {:label "show icon-left"
+    :key   :icon-left
+    :type  :boolean}
+   {:label "Disabled?:"
+    :key   :disabled?
+    :type  :boolean}
+   {:label "Label"
+    :key   :label
+    :type  :text}
+   {:label   "Customization color:"
+    :key     :customization-color
+    :type    :select
+    :options (map (fn [color]
+                    (let [k (get color :name)]
+                      {:key k :value k}))
+                  (quo/picker-colors))}])
 
-(defn view
+(defn cool-preview
   []
   (let [state      (reagent/atom {:label               "Press Me"
                                   :size                40
@@ -56,31 +82,46 @@
         icon-top   (reagent/cursor state [:icon-top])
         icon-only? (reagent/cursor state [:icon-only?])]
     (fn []
-      [preview/preview-container
-       {:state                     state
-        :descriptor                descriptor
-        :component-container-style {:align-items :center}}
-       (when (= :photo (:background @state))
-         [rn/image
-          {:source (resources/get-mock-image :community-cover)
-           :style  {:position :absolute
-                    :top      0
-                    :left     0
-                    :right    0
-                    :bottom   0}}])
-       [quo/button
-        (merge (dissoc @state
-                :theme
-                :customization-color
-                :icon-left
-                :icon-right)
-               {:background (:background @state)
-                :on-press   #(println "Hello world!")}
-               (when (= :primary (:type @state)) {:customization-color (:customization-color @state)})
-               (when @icon-top
-                 {:icon-top :i/placeholder})
-               (when @icon-left
-                 {:icon-left :i/placeholder})
-               (when @icon-right
-                 {:icon-right :i/placeholder}))
-        (if @icon-only? :i/placeholder @label)]])))
+      [rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!}
+       [rn/view {:padding-bottom 150}
+        [rn/view {:flex 1}
+         [preview/customizer state descriptor]]
+        [rn/view
+         {:padding-vertical 60
+          :flex-direction   :row
+          :justify-content  :center}
+         (when (= :photo (:background @state))
+           [rn/image
+            {:source (resources/get-mock-image :community-cover)
+             :style  {:position :absolute
+                      :top      0
+                      :left     0
+                      :right    0
+                      :bottom   0}}])
+         [quo/button
+          (merge (dissoc @state
+                  :theme
+                  :customization-color
+                  :icon-left
+                  :icon-right)
+                 {:background (:background @state)
+                  :on-press   #(println "Hello world!")}
+                 (when (= :primary (:type @state)) {:customization-color (:customization-color @state)})
+                 (when @icon-top
+                   {:icon-top :i/placeholder})
+                 (when @icon-left
+                   {:icon-left :i/placeholder})
+                 (when @icon-right
+                   {:icon-right :i/placeholder}))
+          (if @icon-only? :i/placeholder @label)]]]])))
+
+(defn preview-button
+  []
+  [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}]])

src/status_im2/contexts/quo_preview/buttons/composer_button.cljs

@@ -1,24 +1,49 @@
 (ns status-im2.contexts.quo-preview.buttons.composer-button
   (:require [quo2.core :as quo]
+            [quo2.foundations.colors :as colors]
+            [quo2.theme :as quo2.theme]
+            [react-native.core :as rn]
             [reagent.core :as reagent]
-            [status-im2.contexts.quo-preview.preview :as preview]))
+            [status-im2.contexts.quo-preview.preview :as preview]
+            [status-im2.common.resources :as resources]))
 
 (def descriptor
-  [{:key  :blur?
-    :type :boolean}
-   {:key  :disabled?
-    :type :boolean}])
+  [{:label "Blur?:"
+    :key   :blur?
+    :type  :boolean}
+   {:label "Disabled?:"
+    :key   :disabled?
+    :type  :boolean}])
 
-(defn view
+(defn cool-preview
   []
   (let [state (reagent/atom {:icon          :i/placeholder
-                             :blur?         false
                              :on-press      #(js/alert "pressed")
                              :on-long-press #(js/alert "long pressed")})]
     (fn []
-      [preview/preview-container
-       {:state                 state
-        :descriptor            descriptor
-        :blur?                 (:blur? @state)
-        :show-blur-background? true}
-       [quo/composer-button @state]])))
+      [rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!}
+       [rn/view {:flex 1 :padding-bottom 20}
+        [rn/view {:height 200}
+         [preview/customizer state descriptor]]
+        [rn/view
+         {:flex            1
+          :align-items     :center
+          :justify-content :center}
+         (when (:blur? @state)
+           [rn/image
+            {:source (if (= :light (quo2.theme/get-theme))
+                       (resources/get-mock-image :community-cover)
+                       (resources/get-mock-image :dark-blur-bg))
+             :style  {:position :absolute
+                      :top      200
+                      :left     0
+                      :right    0
+                      :bottom   0}}])
+         [quo/composer-button @state]]]])))
+
+(defn preview-composer-button
+  []
+  [rn/view
+   {:background-color (colors/theme-colors colors/white colors/neutral-95)
+    :flex             1}
+   [cool-preview]])

src/status_im2/contexts/quo_preview/buttons/dynamic_button.cljs

@@ -1,31 +1,55 @@
 (ns status-im2.contexts.quo-preview.buttons.dynamic-button
   (: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]
-            [utils.i18n :as i18n]))
+            [utils.i18n :as i18n]
+            [status-im2.contexts.quo-preview.preview :as preview]))
 
 (def descriptor
-  [{:key     :type
+  [{:label   "Type:"
+    :key     :type
     :type    :select
-    :options [{:key :jump-to}
-              {:key :mention}
-              {:key :notification-down}
-              {:key :notification-up}
-              {:key :search}
-              {:key :search-with-label}
-              {:key :scroll-to-bottom}]}
-   {:key  :count
-    :type :text}])
+    :options [{:key   :jump-to
+               :value "Jump To"}
+              {:key   :mention
+               :value "Mention"}
+              {:key   :notification-down
+               :value "Notification Down"}
+              {:key   :notification-up
+               :value "Notification Up"}
+              {:key   :search
+               :value "Search"}
+              {:key   :search-with-label
+               :value "Search With Label"}
+              {:key   :scroll-to-bottom
+               :value "Bottom"}]}
+   {:label "Count"
+    :key   :count
+    :type  :text}])
 
-(defn view
+(defn cool-preview
   []
   (let [state (reagent/atom {:count  "5"
                              :type   :jump-to
                              :labels {:jump-to           (i18n/label :t/jump-to)
                                       :search-with-label (i18n/label :t/back)}})]
     (fn []
-      [preview/preview-container
-       {:state                     state
-        :descriptor                descriptor
-        :component-container-style {:align-items :center}}
-       [quo/dynamic-button @state]])))
+      [rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!}
+       [rn/view {:padding-bottom 150}
+        [preview/customizer state descriptor]
+        [rn/view
+         {:padding-vertical 60
+          :align-items      :center}
+         [quo/dynamic-button @state]]]])))
+
+(defn preview-dynamic-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}]])

src/status_im2/contexts/quo_preview/buttons/predictive_keyboard.cljs

@@ -1,34 +1,59 @@
 (ns status-im2.contexts.quo-preview.buttons.predictive-keyboard
   (:require [quo2.core :as quo]
             [quo2.foundations.colors :as colors]
+            [react-native.blur :as blur]
+            [react-native.core :as rn]
             [reagent.core :as reagent]
             [status-im2.contexts.quo-preview.preview :as preview]))
 
 (def descriptor
-  [{:key     :type
+  [{:label   "Type"
+    :key     :type
     :type    :select
-    :options [{:key :error}
-              {:key :empty}
-              {:key :info}
-              {:key :words}]}
-   {:key  :text
-    :type :text}
-   {:key  :blur?
-    :type :boolean}])
+    :options [{:key :error :value "Error"}
+              {:key :empty :value "Empty"}
+              {:key :info :value "Info"}
+              {:key :words :value "Words"}]}
+   {:label "Text"
+    :key   :text
+    :type  :text}
+   {:label "Blur"
+    :key   :blur?
+    :type  :boolean}])
 
-(defn view
+(defn cool-preview
   []
-  (let [state (reagent/atom {:type :info
-                             :text "Enter 12, 18 or 24 words separated by a space"})
+  (let [state (reagent/atom {:type :info :text "Enter 12, 18 or 24 words separated by a space"})
         blur? (reagent/cursor state [:blur?])]
     (fn []
-      [preview/preview-container
-       {:state                state
-        :descriptor           descriptor
-        :blur?                @blur?
-        :blur-container-style {:background-color colors/neutral-80-opa-70}
-        :blur-view-props      {:overlay-color :transparent}}
-       [quo/predictive-keyboard
-        (merge @state
-               {:words    ["label" "label" "labor" "ladder" "lady" "lake"]
-                :on-press #(js/alert (str "Pressed: " %))})]])))
+      [rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!}
+       [rn/view {:padding-bottom 150}
+        [preview/customizer state descriptor]
+        [rn/view
+         (when @blur?
+           [blur/view
+            {:style         {:position         :absolute
+                             :left             0
+                             :right            0
+                             :top              0
+                             :bottom           0
+                             :background-color colors/neutral-80-opa-70}
+             :overlay-color :transparent}])
+         [rn/view {:padding-vertical 60 :align-items :center}
+          [quo/predictive-keyboard
+           (merge @state
+                  {:words    ["label" "label" "labor" "ladder" "lady" "lake"]
+                   :on-press #(js/alert (str "Pressed: " %))})]]]]])))
+
+(defn preview-predictive-keyboard
+  []
+  [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}]])

src/status_im2/contexts/quo_preview/buttons/slide_button.cljs

@@ -1,18 +1,30 @@
 (ns status-im2.contexts.quo-preview.buttons.slide-button
   (: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]))
 
 (def descriptor
-  [{:key     :size
+  [{:label   "Size:"
+    :key     :size
     :type    :select
-    :options [{:key :large}
-              {:key :small}]}
-   {:key  :disabled?
-    :type :boolean}
-   (preview/customization-color-option {:key :color})])
+    :options [{:key   :large
+               :value "Large"}
+              {:key   :small
+               :value "Small"}]}
+   {:label "Disabled:"
+    :key   :disabled?
+    :type  :boolean}
+   {:label   "Custom Color"
+    :key     :color
+    :type    :select
+    :options (map (fn [color]
+                    (let [k (get color :name)]
+                      {:key k :value k}))
+                  (quo/picker-colors))}])
 
-(defn view
+(defn cool-preview
   []
   (let [state     (reagent/atom {:disabled? false
                                  :color     :blue
@@ -22,20 +34,34 @@
         size      (reagent/cursor state [:size])
         complete? (reagent/atom false)]
     (fn []
-      [preview/preview-container
-       {:state                     state
-        :descriptor                descriptor
-        :component-container-style {:align-items :center}}
-       (if (not @complete?)
-         [quo/slide-button
-          {:track-text          "We gotta slide"
-           :track-icon          :face-id
-           :customization-color @color
-           :size                @size
-           :disabled?           @disabled?
-           :on-complete         (fn []
-                                  (js/setTimeout (fn [] (reset! complete? true))
-                                                 1000)
-                                  (js/alert "I don't wanna slide anymore"))}]
-         [quo/button {:on-press (fn [] (reset! complete? false))}
-          "Try again"])])))
+      [rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!}
+       [rn/view {:padding-bottom 150}
+        [preview/customizer state descriptor]
+        [rn/view
+         {:padding-vertical   60
+          :padding-horizontal 40
+          :align-items        :center}
+         (if (not @complete?)
+           [quo/slide-button
+            {:track-text          "We gotta slide"
+             :track-icon          :face-id
+             :customization-color @color
+             :size                @size
+             :disabled?           @disabled?
+             :on-complete         (fn []
+                                    (js/setTimeout (fn [] (reset! complete? true))
+                                                   1000)
+                                    (js/alert "I don't wanna slide anymore"))}]
+           [quo/button {:on-press (fn [] (reset! complete? false))}
+            "Try again"])]]])))
+
+(defn preview-slide-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}]])

src/status_im2/contexts/quo_preview/buttons/wallet_button.cljs

@@ -1,19 +1,35 @@
 (ns status-im2.contexts.quo-preview.buttons.wallet-button
-  (:require [quo2.core :as quo]
-            [reagent.core :as reagent]
-            [status-im2.contexts.quo-preview.preview :as preview]))
+  (: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]))
 
 (def descriptor
-  [{:key :disabled? :type :boolean}])
+  [{:label "Disabled?:"
+    :key   :disabled?
+    :type  :boolean}])
 
-(defn view
+(defn cool-preview
   []
   (let [state (reagent/atom {:icon          :i/placeholder
                              :on-press      #(js/alert "pressed")
                              :on-long-press #(js/alert "long pressed")})]
     (fn []
-      [preview/preview-container
-       {:state                     state
-        :descriptor                descriptor
-        :component-container-style {:align-items :center}}
-       [quo/wallet-button @state]])))
+      [rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!}
+       [rn/view {:flex 1 :padding-bottom 20}
+        [rn/view {:height 200}
+         [preview/customizer state descriptor]]
+        [rn/view
+         {:flex            1
+          :align-items     :center
+          :justify-content :center}
+         [quo/wallet-button @state]]]])))
+
+(defn preview
+  []
+  [rn/view
+   {:background-color (colors/theme-colors colors/white colors/neutral-95)
+    :flex             1}
+   [cool-preview]])

src/status_im2/contexts/quo_preview/buttons/wallet_ctas.cljs

@@ -1,12 +1,30 @@
 (ns status-im2.contexts.quo-preview.buttons.wallet-ctas
-  (:require [quo2.core :as quo]
-            [status-im2.contexts.quo-preview.preview :as preview]))
+  (:require
+    [quo2.core :as quo]
+    [react-native.core :as rn]
+    [reagent.core :as reagent]))
 
-(defn view
+(defn cool-preview
   []
-  [preview/preview-container {}
-   [quo/wallet-ctas
-    {:buy-action     #(js/alert "Buy button pressed")
-     :send-action    #(js/alert "Send button pressed")
-     :receive-action #(js/alert "Receive button pressed")
-     :bridge-action  #(js/alert "Bridge button pressed")}]])
+  (let [state (reagent/atom {:buy-action     #(js/alert "Buy button pressed")
+                             :send-action    #(js/alert "Send button pressed")
+                             :receive-action #(js/alert "Receive button pressed")
+                             :bridge-action  #(js/alert "Bridge button pressed")})]
+    (fn []
+      [rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!}
+       [rn/view {:style {:padding-bottom 150}}
+        [rn/view
+         {:style {:padding-vertical 60
+                  :flex-direction   :row
+                  :justify-content  :center}}
+         [quo/wallet-ctas @state]]]])))
+
+(defn preview
+  []
+  [rn/view
+   {:style {:flex 1}}
+   [rn/flat-list
+    {:flex                         1
+     :keyboard-should-persist-taps :always
+     :header                       [cool-preview]
+     :key-fn                       str}]])

src/status_im2/contexts/quo_preview/calendar/calendar.cljs

@@ -1,26 +1,42 @@
 (ns status-im2.contexts.quo-preview.calendar.calendar
-  (:require [quo2.core :as quo]
+  (:require [status-im2.contexts.quo-preview.preview :as preview]
+            [react-native.core :as rn]
+            [utils.datetime :as dt]
+            [quo2.foundations.colors :as colors]
             [reagent.core :as reagent]
-            [status-im2.contexts.quo-preview.preview :as preview]
-            [utils.datetime :as datetime]))
+            [quo2.core :as quo]))
 
 (def descriptor
-  [{:key  :start-date
-    :type :text}
-   {:key  :end-date
-    :type :text}])
+  [{:label "Start Date"
+    :key   :start-date
+    :type  :text}
+   {:label "End Date"
+    :key   :end-date
+    :type  :text}])
 
-(defn view
+(defn cool-preview
   []
   (let [state (reagent/atom {:start-date nil :end-date nil})
         range (reagent/atom {:start-date nil :end-date nil})]
-    (fn []
-      [preview/preview-container {:state state :descriptor descriptor}
-       [quo/calendar
-        {:start-date (:start-date @range)
-         :end-date   (:end-date @range)
-         :on-change  (fn [new-range]
-                       (reset! state
-                         {:start-date (datetime/format-date (:start-date new-range))
-                          :end-date   (datetime/format-date (:end-date new-range))})
-                       (reset! range new-range))}]])))
+    (fn
+      []
+      [rn/touchable-without-feedback
+       {:on-press rn/dismiss-keyboard!}
+       [rn/view {:style {:flex 1}}
+        [preview/customizer state descriptor]
+        [rn/view {:style {:padding 19 :flex-grow 2}}
+         [quo/calendar
+          {:start-date (:start-date @range)
+           :end-date   (:end-date @range)
+           :on-change  (fn [new-range]
+                         (reset! state
+                           {:start-date (dt/format-date (:start-date new-range))
+                            :end-date   (dt/format-date (:end-date new-range))})
+                         (reset! range new-range))}]]]])))
+
+(defn preview-calendar
+  []
+  [rn/view
+   {:style {:background-color (colors/theme-colors colors/white colors/neutral-95)
+            :flex             1}}
+   [cool-preview]])

src/status_im2/contexts/quo_preview/calendar/calendar_day.cljs

@@ -1,21 +1,45 @@
 (ns status-im2.contexts.quo-preview.calendar.calendar-day
-  (:require [quo2.core :as quo]
+  (:require [status-im2.contexts.quo-preview.preview :as preview]
+            [react-native.core :as rn]
+            [quo2.foundations.colors :as colors]
             [reagent.core :as reagent]
-            [status-im2.contexts.quo-preview.preview :as preview]))
+            [quo2.core :as quo]))
 
 (def descriptor
-  [(preview/customization-color-option)
-   {:key     :state
+  [{:label   "State:"
+    :key     :state
     :type    :select
-    :options [{:key :default}
-              {:key :selected}
-              {:key :disabled}
-              {:key :today}]}])
+    :options [{:key   :default
+               :value "Default"}
+              {:key   :selected
+               :value "Selected"}
+              {:key   :disabled
+               :value "Disabled"}
+              {:key   :today
+               :value "Today"}]}])
 
-(defn view
+(defn cool-preview
   []
-  (let [state (reagent/atom {:state               :default
-                             :customization-color :blue})]
-    (fn []
-      [preview/preview-container {:state state :descriptor descriptor}
-       [quo/calendar-day @state 12]])))
+  (let [state (reagent/atom
+               {:state :default})]
+    (fn
+      []
+      [rn/touchable-without-feedback
+       {:on-press rn/dismiss-keyboard!}
+       [rn/view
+        [preview/customizer state descriptor]
+        [rn/view
+         {:padding-vertical 60
+          :align-items      :center}
+         [quo/calendar-day (assoc @state :customization-color :blue) 12]]]])))
+
+(defn preview-calendar-day
+  []
+  [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}]])

src/status_im2/contexts/quo_preview/calendar/calendar_year.cljs

@@ -1,16 +1,39 @@
 (ns status-im2.contexts.quo-preview.calendar.calendar-year
-  (:require [quo2.core :as quo]
+  (:require [status-im2.contexts.quo-preview.preview :as preview]
+            [react-native.core :as rn]
+            [quo2.foundations.colors :as colors]
             [reagent.core :as reagent]
-            [status-im2.contexts.quo-preview.preview :as preview]))
+            [quo2.core :as quo]))
 
 (def descriptor
-  [{:key :selected? :type :boolean}
-   {:key :disabled? :type :boolean}])
+  [{:label "Selected?"
+    :key   :selected?
+    :type  :boolean}
+   {:label "Disabled?"
+    :key   :disabled?
+    :type  :boolean}])
 
-(defn view
+(defn cool-preview
   []
-  (let [state (reagent/atom {:selected? false
-                             :disabled? false})]
-    (fn []
-      [preview/preview-container {:state state :descriptor descriptor}
-       [quo/calendar-year @state "2023"]])))
+  (let [state (reagent/atom {:selected? false :disabled? false})]
+    (fn
+      []
+      [rn/touchable-without-feedback
+       {:on-press rn/dismiss-keyboard!}
+       [rn/view
+        [preview/customizer state descriptor]
+        [rn/view
+         {:padding-vertical 60
+          :align-items      :center}
+         [quo/calendar-year @state "2023"]]]])))
+
+(defn preview-calendar-year
+  []
+  [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}]])

src/status_im2/contexts/quo_preview/code/snippet.cljs

@@ -1,5 +1,7 @@
 (ns status-im2.contexts.quo-preview.code.snippet
-  (:require [quo2.core :as quo]
+  (:require [quo2.components.code.snippet :as snippet]
+            [quo2.foundations.colors :as colors]
+            [react-native.core :as rn]
             [reagent.core :as reagent]
             [status-im2.contexts.quo-preview.preview :as preview]))
 
@@ -67,21 +69,25 @@
              :text     go-example}})
 
 (def descriptor
-  [{:key     :language
+  [{:label   "Language:"
+    :key     :language
     :type    :select
-    :options [{:key :clojure}
-              {:key :go}]}
-   {:key     :max-lines
+    :options [{:key   :clojure
+               :value :clojure}
+              {:key   :go
+               :value :go}]}
+   {:label   "Max lines:"
+    :key     :max-lines
     :type    :select
     :options (map (fn [n]
                     {:key   n
                      :value (str n " lines")})
                   (range 0 41 5))}
-   {:label "Syntax highlight?"
+   {:label "Syntax highlight:"
     :key   :syntax
     :type  :boolean}])
 
-(defn view
+(defn cool-preview
   []
   (let [state (reagent/atom {:language  :clojure
                              :max-lines 40
@@ -93,9 +99,25 @@
                         (js/parseInt max-lines)
                         (when-not (js/Number.isNaN max-lines)
                           max-lines))]
-        [preview/preview-container {:state state :descriptor descriptor}
-         [quo/snippet
-          {:language      language
-           :max-lines     max-lines
-           :on-copy-press #(js/alert %)}
-          text]]))))
+        [rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!}
+         [rn/view {:style {:padding-bottom 150}}
+          [preview/customizer state descriptor]
+          [rn/view
+           {:style {:padding-vertical   60
+                    :padding-horizontal 16}}
+           [snippet/snippet
+            {:language      language
+             :max-lines     max-lines
+             :on-copy-press #(js/alert %)}
+            text]]]]))))
+
+(defn preview-code-snippet
+  []
+  [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}]])

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]))
+  (:require [react-native.core :as rn]
+            [quo2.components.community.channel-actions :as channel-actions]))
 
-(defn view
+(defn preview-channel-actions
   []
   [rn/view {:flex 1}
    [rn/scroll-view {:style {:flex 1 :padding-horizontal 20}}
-    [quo/channel-actions
+    [channel-actions/channel-actions
      {:actions [{:big?          true
                  :label         "Pinned Messages"
                  :color         :blue
                  :icon          :i/pin
                  :counter-value 0}]}]
     [rn/view {:height 50}]
-    [quo/channel-actions
+    [channel-actions/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
+    [channel-actions/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
+    [channel-actions/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}]}]]])

src/status_im2/contexts/quo_preview/community/community_card_view.cljs

@@ -1,10 +1,12 @@
 (ns status-im2.contexts.quo-preview.community.community-card-view
   (:require [quo.design-system.colors :as quo.colors]
-            [quo2.core :as quo]
+            [quo2.components.community.community-card-view :as community-card-view]
+            [quo2.foundations.colors :as colors]
+            [react-native.core :as rn]
             [reagent.core :as reagent]
+            [utils.i18n :as i18n]
             [status-im2.common.resources :as resources]
-            [status-im2.contexts.quo-preview.preview :as preview]
-            [utils.i18n :as i18n]))
+            [status-im2.contexts.quo-preview.preview :as preview]))
 
 (def community-data
   {:id "id"
@@ -26,22 +28,48 @@
            :emoji     (resources/get-image :podcasts)}]})
 
 (def descriptor
-  [{:key     :status
+  [{:label   "Status:"
+    :key     :status
     :type    :select
-    :options [{:key :gated}
-              {:key :open}]}
-   {:key  :locked?
-    :type :boolean}
-   {:key  :loading?
-    :type :boolean}])
+    :options [{:key   :gated
+               :value "Gated"}
+              {:key   :open
+               :value "Open"}]}
+   {:label "Locked?"
+    :key   :locked?
+    :type  :boolean}
+   {:label "Loading?"
+    :key   :loading?
+    :type  :boolean}])
 
-(defn view
+(defn cool-preview
   []
   (let [state (reagent/atom {:status   :gated
                              :locked?  true
                              :loading? false})]
     (fn []
-      [preview/preview-container {:state state :descriptor descriptor}
-       [quo/community-card-view-item
-        {:community (merge @state community-data)
-         :loading?  (:loading? @state)}]])))
+      [rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!}
+       [rn/view {:padding-bottom 150}
+        [rn/view
+         {:flex    1
+          :padding 16}
+         [preview/customizer state descriptor]]
+        [rn/view
+         {:padding-vertical 60
+          :justify-content  :center}
+         [community-card-view/view
+          {:community (merge @state community-data)
+           :loading?  (:loading? @state)}]]]])))
+
+(defn preview-community-card
+  []
+  [rn/view
+   {:background-color (colors/theme-colors colors/neutral-5
+                                           colors/neutral-95)
+    :flex             1}
+   [rn/flat-list
+    {:flex                         1
+     :keyboard-should-persist-taps :always
+     :header                       [cool-preview]
+     :key-fn                       str}]])
+

src/status_im2/contexts/quo_preview/community/community_membership_list_view.cljs

@@ -1,37 +1,70 @@
 (ns status-im2.contexts.quo-preview.community.community-membership-list-view
-  (:require [quo2.core :as quo]
+  (:require [quo.previews.preview :as preview]
+            [quo.react-native :as rn]
+            [quo2.components.community.community-list-view :as community-list-view]
+            [quo2.foundations.colors :as colors]
             [reagent.core :as reagent]
-            [status-im2.contexts.quo-preview.community.data :as data]
-            [status-im2.contexts.quo-preview.preview :as preview]))
+            [status-im2.contexts.quo-preview.community.data :as data]))
 
 (def descriptor
-  [{:key     :notifications
+  [{:label   "Notifications:"
+    :key     :notifications
     :type    :select
-    :options [{:key :muted}
-              {:key :unread-mentions-count}
-              {:key :unread-messages-count}]}
-   {:key     :status
+    :options [{:key   :muted
+               :value "Muted"}
+              {:key   :unread-mentions-count
+               :value "Mention counts"}
+              {:key   :unread-messages-count
+               :value "Unread messages"}]}
+   {:label   "Status:"
+    :key     :status
     :type    :select
-    :options [{:key :gated}
-              {:key :open}]}
-   {:key  :locked?
-    :type :boolean}])
+    :options [{:key   :gated
+               :value "Gated"}
+              {:key   :open
+               :value "Open"}]}
+   {:label "Locked:"
+    :key   :locked?
+    :type  :boolean}])
 
-(defn view
+(defn cool-preview
   []
-  (let [state (reagent/atom {:locked?       true
-                             :notifications :muted
-                             :status        :gated})]
+  (let [notifications (reagent/atom (:notifications nil))
+        state         (reagent/atom {:locked?       true
+                                     :notifications nil
+                                     :status        (if notifications
+                                                      :gated
+                                                      :open)})]
     (fn []
-      [preview/preview-container {:state state :descriptor descriptor}
-       [quo/communities-membership-list-item {}
-        false
-        (cond-> (merge @state data/community)
-          (= :muted (:notifications @state))
-          (assoc :muted? true)
+      [rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!}
+       [rn/view {:padding-bottom 150}
+        [rn/view
+         {:flex    1
+          :padding 16}
+         [preview/customizer state descriptor]]
+        [rn/view
+         {:padding-vertical 60
+          :justify-content  :center}
+         [community-list-view/communities-membership-list-item {}
+          false
+          (cond-> (merge @state data/community)
+            (= :muted (:notifications @state))
+            (assoc :muted? true)
 
-          (= :unread-mentions-count (:notifications @state))
-          (assoc :unread-mentions-count 5)
+            (= :unread-mentions-count (:notifications @state))
+            (assoc :unread-mentions-count 5)
 
-          (= :unread-messages-count (:notifications @state))
-          (assoc :unread-messages? true))]])))
+            (= :unread-messages-count (:notifications @state))
+            (assoc :unread-messages? true))]]]])))
+
+(defn preview-community-list-view
+  []
+  [rn/view
+   {:background-color (colors/theme-colors colors/neutral-5
+                                           colors/neutral-95)
+    :flex             1}
+   [rn/flat-list
+    {:flex                         1
+     :keyboard-should-persist-taps :always
+     :header                       [cool-preview]
+     :key-fn                       str}]])

src/status_im2/contexts/quo_preview/community/discover_card.cljs

@@ -1,17 +1,42 @@
 (ns status-im2.contexts.quo-preview.community.discover-card
-  (:require [quo2.core :as quo]
+  (:require [quo.previews.preview :as preview]
+            [quo.react-native :as rn]
+            [quo2.components.community.banner.view :as discover-card]
+            [quo2.foundations.colors :as colors]
             [reagent.core :as reagent]
-            [status-im2.contexts.quo-preview.preview :as preview]))
+            [utils.i18n :as i18n]))
 
 (def descriptor
-  [{:key :title :type :text}
-   {:key :description :type :text}])
+  [{:label "Joined:"
+    :key   :joined?
+    :type  :boolean}])
 
-(defn view
+(defn cool-preview
   []
-  (let [state (reagent/atom {:title       "Discover"
-                             :description "Your favourite communities"
-                             :joined?     false})]
+  (let [state (reagent/atom {:joined? :false})]
     (fn []
-      [preview/preview-container {:state state :descriptor descriptor}
-       [quo/discover-card @state]])))
+      [rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!}
+       [rn/view {:padding-bottom 150}
+        [rn/view
+         {:flex    1
+          :padding 16}
+         [preview/customizer state descriptor]]
+        [rn/view
+         {:padding-vertical 60
+          :justify-content  :center}
+         [discover-card/view
+          {:joined?     (:joined? @state)
+           :title       (i18n/label :t/discover)
+           :description (i18n/label :t/favorite-communities)}]]]])))
+
+(defn preview-discoverd-card
+  []
+  [rn/view
+   {:background-color (colors/theme-colors colors/neutral-5
+                                           colors/neutral-95)
+    :flex             1}
+   [rn/flat-list
+    {:flex                         1
+     :keyboard-should-persist-taps :always
+     :header                       [cool-preview]
+     :key-fn                       str}]])

src/status_im2/contexts/quo_preview/community/token_gating.cljs

@@ -1,21 +1,27 @@
 (ns status-im2.contexts.quo-preview.community.token-gating
-  (:require [quo2.core :as quo]
-            [quo2.foundations.resources :as resources]
-            [reagent.core :as reagent]
-            [status-im2.contexts.quo-preview.preview :as preview]))
+  (:require
+    [quo2.foundations.resources :as resources]
+    [reagent.core :as reagent]
+    [react-native.core :as rn]
+    [status-im2.contexts.quo-preview.preview :as preview]
+    [quo2.core :as quo]))
 
 (def descriptor
-  [{:label "Tokens sufficient?"
+  [{:label "Tokens sufficient"
     :key   :sufficient?
     :type  :boolean}
-   {:key  :many-tokens?
-    :type :boolean}
-   {:key  :loading?
-    :type :boolean}
-   {:key  :condition?
-    :type :boolean}
-   {:key  :padding?
-    :type :boolean}])
+   {:label "Many tokens ?"
+    :key   :many-tokens?
+    :type  :boolean}
+   {:label "Loading ?"
+    :key   :loading?
+    :type  :boolean}
+   {:label "Сondition ?"
+    :key   :condition?
+    :type  :boolean}
+   {:label "Padding ?"
+    :key   :padding?
+    :type  :boolean}])
 
 (defn join-gate-options-base
   [sufficient? many-tokens? loading?]
@@ -69,12 +75,17 @@
                                 loading?)])
      :padding? padding?}))
 
-(defn view
+(def state
+  (reagent/atom {:sufficient?  false
+                 :many-tokens? false
+                 :condition?   false
+                 :padding?     false}))
+
+(defn preview-token-gating
   []
-  (let [state (reagent/atom {:sufficient?  false
-                             :many-tokens? false
-                             :condition?   false
-                             :padding?     false})]
-    (fn []
-      [preview/preview-container {:state state :descriptor descriptor}
-       [quo/token-requirement-list (get-mocked-props @state)]])))
+  (let [preview-props (get-mocked-props @state)]
+    [rn/view {:flex 1}
+     [rn/scroll-view {:style {:flex 1}}
+      [preview/customizer state descriptor]]
+     [rn/view {:padding-horizontal 20 :padding-vertical 20}
+      [quo/token-requirement-list preview-props]]]))

src/status_im2/contexts/quo_preview/counter/counter.cljs

@@ -1,23 +1,52 @@
 (ns status-im2.contexts.quo-preview.counter.counter
   (: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]))
 
 (def descriptor
-  [{:key     :type
+  [{:label   "Type:"
+    :key     :type
     :type    :select
-    :options [{:key :default}
-              {:key :secondary}
-              {:key :grey}
-              {:key :outline}]}
-   {:key  :value
-    :type :text}
-   (preview/customization-color-option)])
+    :options [{:key   :default
+               :value "Default"}
+              {:key   :secondary
+               :value "Secondary"}
+              {:key   :grey
+               :value "Grey"}
+              {:key   :outline
+               :value "Outline"}]}
+   {:label "Value"
+    :key   :value
+    :type  :text}
+   {:label   "Customization color:"
+    :key     :customization-color
+    :type    :select
+    :options (map (fn [color]
+                    (let [k (get color :name)]
+                      {:key k :value k}))
+                  (quo/picker-colors))}])
 
-(defn view
+(defn cool-preview
   []
-  (let [state (reagent/atom {:value "5"
-                             :type  :default})]
+  (let [state (reagent/atom {:value 5 :type :default})]
     (fn []
-      [preview/preview-container {:state state :descriptor descriptor}
-       [quo/counter @state (:value @state)]])))
+      [rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!}
+       [rn/view {:padding-bottom 150}
+        [preview/customizer state descriptor]
+        [rn/view
+         {:padding-vertical 60
+          :align-items      :center}
+         [quo/counter @state (:value @state)]]]])))
+
+(defn preview-counter
+  []
+  [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}]])

src/status_im2/contexts/quo_preview/counter/step.cljs

@@ -1,28 +1,46 @@
 (ns status-im2.contexts.quo-preview.counter.step
-  (:require [quo2.core :as quo]
+  (:require [quo2.core :as quo2]
+            [quo2.foundations.colors :as colors]
+            [react-native.core :as rn]
             [reagent.core :as reagent]
             [status-im2.contexts.quo-preview.preview :as preview]))
 
 (def descriptor
-  [{:key     :type
+  [{:label   "Type:"
+    :key     :type
     :type    :select
-    :options [{:key :neutral}
-              {:key :active}
-              {:key :complete}]}
-   {:key  :in-blur-view?
-    :type :boolean}
-   {:key  :value
-    :type :text}])
+    :options [{:key   :neutral
+               :value "Neutral (default)"}
+              {:key   :active
+               :value "Active"}
+              {:key   :complete
+               :value "Complete"}]}
+   {:label "In blur view?"
+    :key   :in-blur-view?
+    :type  :boolean}
+   {:label "Value"
+    :key   :value
+    :type  :text}])
 
-(defn view
+(defn cool-preview
   []
-  (let [state (reagent/atom {:value         "5"
-                             :type          :neutral
-                             :in-blur-view? false})]
+  (let [state (reagent/atom {:value 5 :type :neutral :in-blur-view? false})]
     (fn []
-      [preview/preview-container
-       {:state                 state
-        :descriptor            descriptor
-        :blur?                 (:in-blur-view? @state)
-        :show-blur-background? (:in-blur-view? @state)}
-       [quo/step @state (:value @state)]])))
+      [rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!}
+       [rn/view {:padding-bottom 150}
+        [preview/customizer state descriptor]
+        [rn/view
+         {:padding-vertical 60
+          :align-items      :center}
+         [quo2/step @state (:value @state)]]]])))
+
+(defn preview-step
+  []
+  [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}]])

src/status_im2/contexts/quo_preview/dividers/date.cljs

@@ -1,14 +1,33 @@
 (ns status-im2.contexts.quo-preview.dividers.date
   (: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]))
 
 (def descriptor
-  [{:key :label :type :text}])
-
-(defn view
+  [{:label "Value"
+    :key   :label
+    :type  :text}])
+(defn cool-preview
   []
   (let [state (reagent/atom {:label "Today"})]
     (fn []
-      [preview/preview-container {:state state :descriptor descriptor}
-       [quo/divider-date (@state :label)]])))
+      [rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!}
+       [rn/view {:padding-bottom 150}
+        [preview/customizer state descriptor]
+        [rn/view {:padding-vertical 60}
+         [quo/divider-date (@state :label)]]]])))
+
+(defn preview-divider-date
+  []
+  [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}]])

src/status_im2/contexts/quo_preview/dividers/new_messages.cljs

@@ -1,30 +1,62 @@
 (ns status-im2.contexts.quo-preview.dividers.new-messages
-  (:require [quo2.core :as quo]
+  (:require [quo2.components.dividers.new-messages :as new-messages]
+            [quo2.foundations.colors :as colors]
+            [react-native.core :as rn]
             [reagent.core :as reagent]
+            [utils.i18n :as i18n]
             [status-im2.contexts.quo-preview.preview :as preview]))
 
 (def descriptor
-  [{:key  :label
-    :type :text}
-   {:key     :color
+  [{:label "Label"
+    :key   :label
+    :type  :text}
+   {:label   "Color"
+    :key     :color
     :type    :select
-    :options [{:key :primary}
-              {:key :purple}
-              {:key :indigo}
-              {:key :turquoise}
-              {:key :blue}
-              {:key :green}
-              {:key :yellow}
-              {:key :orange}
-              {:key :red}
-              {:key :pink}
-              {:key :brown}
-              {:key :beige}]}])
-
-(defn view
+    :options [{:key   :primary
+               :value "Primary"}
+              {:key   :purple
+               :value "Purple"}
+              {:key   :indigo
+               :value "Indigo"}
+              {:key   :turquoise
+               :value "Turquoise"}
+              {:key   :blue
+               :value "Blue"}
+              {:key   :green
+               :value "Green"}
+              {:key   :yellow
+               :value "yellow"}
+              {:key   :orange
+               :value "Orange"}
+              {:key   :red
+               :value "Red"}
+              {:key   :pink
+               :value "Pink"}
+              {:key   :brown
+               :value "Brown"}
+              {:key   :beige
+               :value "Beige"}]}])
+(defn cool-preview
   []
-  (let [state (reagent/atom {:label "New messages"
+  (let [state (reagent/atom {:label (i18n/label :new-messages-header)
                              :color :primary})]
     (fn []
-      [preview/preview-container {:state state :descriptor descriptor}
-       [quo/new-messages @state]])))
+      [rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!}
+       [rn/view {:padding-bottom 150}
+        [preview/customizer state descriptor]
+        [rn/view {:padding-vertical 60}
+         [new-messages/new-messages @state]]]])))
+
+(defn preview-new-messages
+  []
+  [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}]])

src/status_im2/contexts/quo_preview/dividers/strength_divider.cljs

@@ -1,28 +1,55 @@
 (ns status-im2.contexts.quo-preview.dividers.strength-divider
   (: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]))
 
 (def descriptor
-  [{:key     :type
+  [{:label   "Type"
+    :key     :type
     :type    :select
-    :options [{:key :very-weak}
-              {:key :weak}
-              {:key :okay}
-              {:key :strong}
-              {:key :very-strong}
-              {:key :alert}
-              {:key :info}]}
-   {:label "Text (only works for info/alert)"
+    :options [{:key   :very-weak
+               :value "Very weak"}
+              {:key   :weak
+               :value "Weak"}
+              {:key   :okay
+               :value "Okay"}
+              {:key   :strong
+               :value "Strong"}
+              {:key   :very-strong
+               :value "Very strong"}
+              {:key   :alert
+               :value "Alert"}
+              {:key   :info
+               :value "Info"}]}
+   {:label "Text(only works for info/alert)"
     :key   :text
     :type  :text}])
 
-(defn view
+(defn cool-preview
   []
   (let [state (reagent/atom {:text "Common password, shouldn’t be used"
-                             :type :alert})]
+                             :type :alert})
+        text  (reagent/cursor state [:text])
+        type  (reagent/cursor state [:type])]
     (fn []
-      [preview/preview-container {:state state :descriptor descriptor}
-       [quo/strength-divider
-        {:type (:type @state)}
-        (:text @state)]])))
+      [rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!}
+       [rn/view {:padding-bottom 150}
+        [preview/customizer state descriptor]
+        [rn/view {:padding-vertical 60 :background-color colors/neutral-95}
+         [quo/strength-divider {:type @type} @text]]]])))
+
+(defn preview-strength-divider
+  []
+  [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}]])
+

src/status_im2/contexts/quo_preview/drawers/action_drawers.cljs

@@ -1,21 +1,26 @@
 (ns status-im2.contexts.quo-preview.drawers.action-drawers
   (: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]
-            [utils.re-frame :as rf]))
+            [utils.re-frame :as rf]
+            [status-im2.contexts.quo-preview.preview :as preview]))
 
 (def descriptor
-  [{:key  :muted?
-    :type :boolean}
-   {:key  :mark-as-read-disabled?
-    :type :boolean}
-   {:key  :show-red-options?
-    :type :boolean}
-   {:key     :theme
+  [{:label "Muted?"
+    :key   :muted?
+    :type  :boolean}
+   {:label "Mark as read disabled?"
+    :key   :mark-as-read-disabled?
+    :type  :boolean}
+   {:label "Show red options?"
+    :key   :show-red-options?
+    :type  :boolean}
+   {:label   "Drawer theme"
+    :key     :theme
     :type    :select
-    :options [{:key :dark}
-              {:key :light}
+    :options [{:key :dark :value "Dark"}
+              {:key :light :value "Light"}
               {:key nil :value "System"}]}])
 
 (def options-with-consequences
@@ -25,7 +30,7 @@
     :add-divider? true
     :on-press     #(js/alert "clear history")}])
 
-(defn action-sheet
+(defn render-action-sheet
   [state]
   [quo/action-drawer
    (cond->
@@ -53,17 +58,31 @@
      (:show-red-options? @state)
      (conj options-with-consequences))])
 
-(defn view
+(defn cool-preview
   []
   (let [state (reagent/atom {:muted?            true
                              :show-red-options? true})]
     (fn []
-      [preview/preview-container {:state state :descriptor descriptor}
-       [quo/button
-        {:container-style {:margin-horizontal 40}
-         :on-press        #(rf/dispatch [:show-bottom-sheet
-                                         {:content (fn [] [action-sheet state])
-                                          :theme   (:theme @state)}])}
-        "See in bottom sheet"]
-       [rn/view {:padding-vertical 60}
-        [action-sheet state]]])))
+      [rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!}
+       [rn/view {:padding-bottom 400}
+        [preview/customizer state descriptor]
+        [quo/button
+         {:container-style {:margin-horizontal 40}
+          :on-press        #(rf/dispatch [:show-bottom-sheet
+                                          {:content (fn [] [render-action-sheet state])
+                                           :theme   (:theme @state)}])}
+         "See in bottom sheet"]
+        [rn/view {:padding-vertical 60}
+         [render-action-sheet state]]]])))
+
+(defn preview-action-drawers
+  []
+  [rn/view
+   {:background-color (colors/theme-colors colors/white colors/neutral-95)
+    :flex             1}
+   [rn/flat-list
+    {:flex                         1
+     :nestedScrollEnabled          true
+     :keyboard-should-persist-taps :always
+     :header                       [cool-preview]
+     :key-fn                       (fn [_ index] (str "actions-drawers-" index))}]])

src/status_im2/contexts/quo_preview/drawers/documentation_drawers.cljs

@@ -7,23 +7,27 @@
             [status-im2.contexts.quo-preview.preview :as preview]))
 
 (def descriptor
-  [{:key  :title
-    :type :text}
-   {:key  :show-button?
-    :type :boolean}
-   {:key  :button-label
-    :type :text}
-   {:key  :shell?
-    :type :boolean}])
+  [{:label "Title"
+    :key   :title
+    :type  :text}
+   {:label "Show button"
+    :key   :show-button?
+    :type  :boolean}
+   {:label "Button label"
+    :key   :button-label
+    :type  :text}
+   {:label "Shell"
+    :key   :shell?
+    :type  :boolean}])
 
 (defn documentation-content
-  [theme]
-  [quo/text {:style {:color (colors/theme-colors colors/neutral-100 colors/white theme)}}
+  [override-theme]
+  [quo/text {:style {:color (colors/theme-colors colors/neutral-100 colors/white override-theme)}}
    "Group chats are conversations of more than two people. To invite someone to a group chat, you need to have them on your Status contact list."])
 
 (defn documentation-content-full
-  [theme]
-  (let [text-color (colors/theme-colors colors/neutral-100 colors/white theme)
+  [override-theme]
+  (let [text-color (colors/theme-colors colors/neutral-100 colors/white override-theme)
         text-style {:color text-color :margin-bottom 10}]
     [rn/view
      [quo/text {:style text-style}
@@ -71,7 +75,7 @@
      [quo/text {:style text-style}
       "Group chats are always end-to-end encrypted with secure cryptographic keys. Only the group chat members will have access to the messages in it. Status doesn't have the keys and can't access any messages by design."]]))
 
-(defn documenation-drawer
+(defn render-documenation-drawer
   [title show-button? button-label expanded? shell?]
   [quo/documentation-drawers
    {:title           title
@@ -84,26 +88,45 @@
      [documentation-content-full (when shell? :dark)]
      [documentation-content (when shell? :dark)])])
 
-(defn view
+(defn cool-preview
   []
-  (let [state        (reagent/atom {:title        "Create a group chat"
-                                    :button-label "Read more"})
-        title        (reagent/cursor state [:title])
-        show-button? (reagent/cursor state [:show-button?])
-        button-label (reagent/cursor state [:button-label])
-        shell?       (reagent/cursor state [:shell?])
-        expanded?    (reagent/atom false)]
+  (let
+    [state
+     (reagent/atom
+      {:title        "Create a group chat"
+       :button-label "Read more"})
+     title (reagent/cursor state [:title])
+     show-button? (reagent/cursor state [:show-button?])
+     button-label (reagent/cursor state [:button-label])
+     shell? (reagent/cursor state [:shell?])
+     expanded? (reagent/atom false)]
     (fn []
-      [preview/preview-container {:state state :descriptor descriptor}
-       [quo/button
-        {:container-style {:margin-horizontal 40
-                           :margin-bottom     20}
-         :on-press        #(rf/dispatch [:show-bottom-sheet
-                                         {:content     (constantly [documenation-drawer @title
-                                                                    @show-button?
-                                                                    @button-label expanded? @shell?])
-                                          :expandable? @show-button?
-                                          :shell?      @shell?
-                                          :expanded?   @expanded?}])}
-        "Open drawer"]
-       [documenation-drawer @title @show-button? @button-label expanded?]])))
+      [rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!}
+       [rn/view {:padding-bottom 150}
+        [preview/customizer state descriptor]
+        [rn/view {:padding-vertical 60}
+         [quo/button
+          {:container-style {:margin-horizontal 40
+                             :margin-bottom     20}
+           :on-press        #(rf/dispatch [:show-bottom-sheet
+                                           {:content     (constantly [render-documenation-drawer @title
+                                                                      @show-button?
+                                                                      @button-label expanded? @shell?])
+                                            :expandable? @show-button?
+                                            :shell?      @shell?
+                                            :expanded?   @expanded?}])}
+          "Open drawer"]
+         [render-documenation-drawer @title @show-button? @button-label expanded?]]]])))
+
+(defn preview-documenation-drawers
+  []
+  [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}]])

src/status_im2/contexts/quo_preview/drawers/drawer_buttons.cljs

@@ -1,16 +1,20 @@
 (ns status-im2.contexts.quo-preview.drawers.drawer-buttons
   (: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]))
 
 (def descriptor
-  [{:key  :top-heading
-    :type :text}
-   {:key  :top-sub-heading
-    :type :text}
-   {:key  :bottom-heading
-    :type :text}])
+  [{:label "Top Heading"
+    :key   :top-heading
+    :type  :text}
+   {:label "Top Sub heading"
+    :key   :top-sub-heading
+    :type  :text}
+   {:label "Bottom heading"
+    :key   :bottom-heading
+    :type  :text}])
 
 (defn text-with-link
   []
@@ -31,20 +35,40 @@
      :weight   :semi-bold}
     "Terms of Use"]])
 
-(defn view
-  []
-  (let [state (reagent/atom {:top-heading     "Sign in"
-                             :top-sub-heading "You already use Status"
-                             :bottom-heading  "I'm new to Status"})]
-    (fn []
-      [preview/preview-container
-       {:state                     state
-        :descriptor                descriptor
-        :component-container-style {:margin-top 40}}
-       [quo/drawer-buttons
-        {:top-card    {:on-press #(js/alert "top card clicked")
+(defn render-drawer-buttons
+  [state]
+  [rn/view
+   {:height           300
+    :background-color (colors/theme-colors colors/white colors/neutral-95)}
+   [quo/drawer-buttons
+    {:container-style {:margin-left  40
+                       :margin-right 24}
+     :top-card        {:on-press #(js/alert "top card clicked")
                        :heading  (:top-heading @state)}
-         :bottom-card {:on-press #(js/alert "bottom card clicked")
+     :bottom-card     {:on-press #(js/alert "bottom card clicked")
                        :heading  (:bottom-heading @state)}}
-        (:top-sub-heading @state)
-        [text-with-link]]])))
+    (:top-sub-heading @state) [text-with-link]]])
+
+(defn cool-preview
+  []
+  (let [state (reagent/atom {:top-heading     "Sign in "
+                             :top-sub-heading "You already use Status"
+                             :bottom-heading  "I’m new to Status"})]
+    (fn []
+      [rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!}
+       [rn/view {:padding-bottom 400}
+        [preview/customizer state descriptor]
+        [rn/view {:padding-vertical 60}
+         [render-drawer-buttons state]]]])))
+
+(defn preview-drawer-buttons
+  []
+  [rn/view
+   {:background-color (colors/theme-colors colors/white colors/neutral-95)
+    :flex             1}
+   [rn/flat-list
+    {:flex                         1
+     :nestedScrollEnabled          true
+     :keyboard-should-persist-taps :always
+     :header                       [cool-preview]
+     :key-fn                       :id}]])

src/status_im2/contexts/quo_preview/drawers/permission_drawers.cljs

@@ -5,8 +5,6 @@
             [react-native.core :as rn]
             [status-im2.common.resources :as resources]))
 
-(def token-icon (resources/get-mock-image :status-logo))
-
 (defn example-1
   []
   [:<>
@@ -15,12 +13,14 @@
     {:size             24
      :locked?          false
      :tokens           [{:id    1
-                         :group [{:id 1 :token-icon token-icon}
-                                 {:id 2 :token-icon token-icon}
-                                 {:id 3 :token-icon token-icon}
-                                 {:id 4 :token-icon token-icon}
-                                 {:id 5 :token-icon token-icon}]}]
-     :background-color (colors/theme-colors colors/neutral-10 colors/neutral-80)}]
+                         :group [{:id 1 :token-icon (resources/get-mock-image :status-logo)}
+                                 {:id 2 :token-icon (resources/get-mock-image :status-logo)}
+                                 {:id 3 :token-icon (resources/get-mock-image :status-logo)}
+                                 {:id 4 :token-icon (resources/get-mock-image :status-logo)}
+                                 {:id 5 :token-icon (resources/get-mock-image :status-logo)}]}]
+     :background-color (colors/theme-colors
+                        colors/neutral-10
+                        colors/neutral-80)}]
    [quo/text
     {:style {:margin-left  4
              :margin-right 4}} "Or"]
@@ -28,12 +28,14 @@
     {:size             24
      :locked?          false
      :tokens           [{:id    1
-                         :group [{:id 1 :token-icon token-icon}
-                                 {:id 2 :token-icon token-icon}
-                                 {:id 3 :token-icon token-icon}
-                                 {:id 4 :token-icon token-icon}
-                                 {:id 5 :token-icon token-icon}]}]
-     :background-color (colors/theme-colors colors/neutral-10 colors/neutral-80)}]
+                         :group [{:id 1 :token-icon (resources/get-mock-image :status-logo)}
+                                 {:id 2 :token-icon (resources/get-mock-image :status-logo)}
+                                 {:id 3 :token-icon (resources/get-mock-image :status-logo)}
+                                 {:id 4 :token-icon (resources/get-mock-image :status-logo)}
+                                 {:id 5 :token-icon (resources/get-mock-image :status-logo)}]}]
+     :background-color (colors/theme-colors
+                        colors/neutral-10
+                        colors/neutral-80)}]
    [quo/text {:style {:margin-left 4}} "To post"]])
 
 (defn example-2
@@ -51,7 +53,7 @@
    [quo/icon :i/communities {:color (colors/theme-colors colors/neutral-100 colors/white)}]
    [quo/text {:style {:margin-right 4}} "Join community to post"]])
 
-(defn view
+(defn cool-preview
   []
   (fn []
     [:<>
@@ -61,3 +63,15 @@
       [quo/permission-context [example-2] #(js/alert "drawer pressed")]]
      [rn/view {:margin-top 60}
       [quo/permission-context [example-3] #(js/alert "drawer pressed")]]]))
+
+(defn preview-permission-drawers
+  []
+  [rn/view
+   {:style {:background-color (colors/theme-colors colors/neutral-20 colors/neutral-100)}
+    :flex  1}
+   [rn/flat-list
+    {:flex                         1
+     :nested-scroll-enabled        true
+     :keyboard-should-persist-taps :always
+     :header                       [cool-preview]
+     :key-fn                       hash}]])

src/status_im2/contexts/quo_preview/dropdowns/dropdown.cljs

@@ -1,20 +1,32 @@
 (ns status-im2.contexts.quo-preview.dropdowns.dropdown
-  (:require [quo2.core :as quo]
+  (:require [quo2.foundations.colors :as colors]
+            [react-native.core :as rn]
             [reagent.core :as reagent]
-            [status-im2.contexts.quo-preview.preview :as preview]))
+            [status-im2.contexts.quo-preview.preview :as preview]
+            [quo2.core :as quo]))
 
 (def descriptor
-  [{:key     :type
+  [{:label   "Type:"
+    :key     :type
     :type    :select
-    :options [{:key :primary}
-              {:key :secondary}
-              {:key :grey}
-              {:key :dark-grey}
-              {:key :outline}
-              {:key :ghost}
-              {:key :danger}
-              {:key :positive}]}
-   {:key     :size
+    :options [{:key   :primary
+               :value "Primary"}
+              {:key   :secondary
+               :value "Secondary"}
+              {:key   :grey
+               :value "Grey"}
+              {:key   :dark-grey
+               :value "Dark Grey"}
+              {:key   :outline
+               :value "Outline"}
+              {:key   :ghost
+               :value "Ghost"}
+              {:key   :danger
+               :value "Danger"}
+              {:key   :positive
+               :value "Positive"}]}
+   {:label   "Size:"
+    :key     :size
     :type    :select
     :options [{:key   56
                :value "56"}
@@ -24,17 +36,20 @@
                :value "32"}
               {:key   24
                :value "24"}]}
-   {:key  :icon
-    :type :boolean}
+   {:label "Icon:"
+    :key   :icon
+    :type  :boolean}
    {:label "Before icon:"
     :key   :before
     :type  :boolean}
-   {:key  :disabled
-    :type :boolean}
-   {:key  :label
-    :type :text}])
+   {:label "Disabled:"
+    :key   :disabled
+    :type  :boolean}
+   {:label "Label"
+    :key   :label
+    :type  :text}])
 
-(defn view
+(defn cool-preview
   []
   (let [state  (reagent/atom {:label "Press Me"
                               :size  40})
@@ -42,16 +57,32 @@
         before (reagent/cursor state [:before])
         icon   (reagent/cursor state [:icon])]
     (fn []
-      [preview/preview-container
-       {:state                     state
-        :descriptor                descriptor
-        :component-container-style {:align-items :center}}
-       [quo/dropdown
-        (merge (dissoc @state
-                :theme
-                :before
-                :after)
-               {:on-press #(println "Hello world!")}
-               (when @before
-                 {:before :i/placeholder}))
-        (if @icon :i/placeholder @label)]])))
+      [rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!}
+       [rn/view {:padding-bottom 150}
+        [preview/customizer state descriptor]
+        [rn/view
+         {:padding-vertical 60
+          :flex-direction   :row
+          :justify-content  :center}
+         [quo/dropdown
+          (merge (dissoc @state
+                  :theme
+                  :before
+                  :after)
+                 {:on-press #(println "Hello world!")}
+                 (when @before
+                   {:before :i/placeholder}))
+          (if @icon :i/placeholder @label)]]]])))
+
+(defn preview-dropdown
+  []
+  [rn/view
+   {:background-color (colors/theme-colors colors/white colors/neutral-90)
+    :flex             1}
+   [rn/flat-list
+    {:flex                         1
+     :flex-grow                    1
+     :nestedScrollEnabled          true
+     :keyboard-should-persist-taps :always
+     :header                       [cool-preview]
+     :key-fn                       str}]])

src/status_im2/contexts/quo_preview/dropdowns/network_dropdown.cljs

@@ -8,27 +8,35 @@
 (def descriptor
   [{:key     :state
     :type    :select
-    :options [{:key :default}
-              {:key :disabled}]}
+    :options [{:key   :default
+               :value "Default"}
+              {:key   :disabled
+               :value "Disabled"}]}
    {:key     :blur?
     :type    :select
-    :options [{:key true}
-              {:key false}]}
+    :options [{:key   true
+               :value "True"}
+              {:key   false
+               :value "False"}]}
    {:key     :amount
     :type    :select
-    :options [{:key 1}
-              {:key 2}
-              {:key 3}]}])
+    :options [{:key   1
+               :value 1}
+              {:key   2
+               :value 2}
+              {:key   3
+               :value 3}]}])
 
 (def ^:private networks-list
   [{:source (quo.resources/get-network :ethereum)}
    {:source (quo.resources/get-network :optimism)}
    {:source (quo.resources/get-network :arbitrum)}])
 
-(defn view
+(defn preview-dropdown
   []
   (let [component-state (reagent/atom {:state :default :blur? false :amount 3})]
     (fn []
+
       [preview/preview-container
        {:state                 component-state
         :descriptor            descriptor

src/status_im2/contexts/quo_preview/empty_state/empty_state.cljs

@@ -1,28 +1,40 @@
 (ns status-im2.contexts.quo-preview.empty-state.empty-state
   (: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]
-            [status-im2.contexts.quo-preview.preview :as preview]))
+            [status-im2.contexts.quo-preview.preview :as preview]
+            [status-im2.common.resources :as resources]))
 
 (def descriptor
-  [{:key  :title
-    :type :text}
-   {:key  :description
-    :type :text}
-   {:key     :image
+  [{:label "Title:"
+    :key   :title
+    :type  :text}
+   {:label "Description:"
+    :key   :description
+    :type  :text}
+   {:label   "Image:"
+    :key     :image
     :type    :select
-    :options [{:key :no-contacts-light}
-              {:key :no-contacts-dark}
-              {:key :no-messages-light}
-              {:key :no-messages-dark}]}
-   {:key  :upper-button-text
-    :type :text}
-   {:key  :lower-button-text
-    :type :text}
-   {:key  :blur?
-    :type :boolean}])
+    :options [{:key   :no-contacts-light
+               :value "No contacts light"}
+              {:key   :no-contacts-dark
+               :value "No contacts dark"}
+              {:key   :no-messages-light
+               :value "No messages light"}
+              {:key   :no-messages-dark
+               :value "No messages dark"}]}
+   {:label "Upper button text"
+    :key   :upper-button-text
+    :type  :text}
+   {:label "Lower button text"
+    :key   :lower-button-text
+    :type  :text}
+   {:label "Blur:"
+    :key   :blur?
+    :type  :boolean}])
 
-(defn view
+(defn cool-preview
   []
   (let [state (reagent/atom {:image             :no-messages-light
                              :title             "A big friendly title"
@@ -31,18 +43,42 @@
                              :upper-button-text "Send community link"
                              :lower-button-text "Invite friends to Status"})]
     (fn []
-      [preview/preview-container
-       {:state                 state
-        :descriptor            descriptor
-        :blur?                 (:blur? @state)
-        :blur-height           300
-        :show-blur-background? true}
-       [quo/empty-state
-        (-> @state
-            (assoc :upper-button
-                   {:text     (:upper-button-text @state)
-                    :on-press #(js/alert "Upper button")})
-            (assoc :lower-button
-                   {:text     (:lower-button-text @state)
-                    :on-press #(js/alert "Lower button")})
-            (update :image resources/get-image))]])))
+      [rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!}
+       [rn/view {:padding-bottom 150}
+        [preview/customizer state descriptor]
+        [rn/view
+         {:style {:margin-vertical  24
+                  :background-color (when (:blur? @state) colors/neutral-95)}}
+         [preview/blur-view
+          {:style                 {:width       "100%"
+                                   :align-items :center
+                                   :top         (if (:blur? @state) 32 16)
+                                   :position    (if (:blur? @state)
+                                                  :absolute
+                                                  :relative)}
+           :height                300
+           :show-blur-background? (:blur? @state)
+           :blur-view-props       (when (:blur? @state)
+                                    {:overlay-color colors/neutral-80-opa-80})}
+
+          [rn/view {:style {:flex 1 :width "100%"}}
+           [quo/empty-state
+            (-> @state
+                (assoc :upper-button
+                       {:text     (:upper-button-text @state)
+                        :on-press #(js/alert "Upper button")})
+                (assoc :lower-button
+                       {:text     (:lower-button-text @state)
+                        :on-press #(js/alert "Lower button")})
+                (update :image resources/get-image))]]]]]])))
+
+(defn preview-empty-state
+  []
+  [rn/view
+   {:style {:flex             1
+            :background-color (colors/theme-colors colors/white colors/neutral-95)}}
+   [rn/flat-list
+    {:style                        {:flex 1}
+     :keyboard-should-persist-taps :always
+     :header                       [cool-preview]
+     :key-fn                       str}]])

src/status_im2/contexts/quo_preview/foundations/shadows.cljs

@@ -24,36 +24,50 @@
                    (when shadow? shadow-style))}]])
 
 (def descriptor
-  [{:key  :shadow?
-    :type :boolean}])
+  [{:label "Shadows enabled?"
+    :key   :shadow?
+    :type  :boolean}])
 
-(defn view
+(defn cool-preview
   []
   (let [state   (reagent/atom {:shadow? true})
         shadow? (reagent/cursor state [:shadow?])]
     (fn []
-      [preview/preview-container {:state state :descriptor descriptor}
-       [quo/text
-        {:style {:margin-left  :auto
-                 :margin-right :auto
-                 :align-items  :center}}
-        "Normal Scales"]
-       [demo-box @shadow? "Shadow 1" (shadows/get 1)]
-       [demo-box @shadow? "Shadow 2" (shadows/get 2)]
-       [demo-box @shadow? "Shadow 3" (shadows/get 3)]
-       [demo-box @shadow? "Shadow 4" (shadows/get 4)]
-       [quo/text
-        {:style {:margin-left  :auto
-                 :margin-right :auto
-                 :align-items  :center}}
-        "Inverted Scales"]
-       [demo-box @shadow? "Shadow 1" (shadows/get 1 (quo.theme/get-theme) :inverted)]
-       [demo-box @shadow? "Shadow 2" (shadows/get 2 (quo.theme/get-theme) :inverted)]
-       [demo-box @shadow? "Shadow 3" (shadows/get 3 (quo.theme/get-theme) :inverted)]
-       [demo-box @shadow? "Shadow 4" (shadows/get 4 (quo.theme/get-theme) :inverted)]
-       [quo/text
-        {:style {:margin-left  :auto
-                 :margin-right :auto
-                 :align-items  :center}}
-        "Inverted Scales"]
-       [demo-box @shadow? "Inner Shadow" shadows/inner-shadow]])))
+      [rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!}
+       [rn/view {:style {:padding-bottom 150}}
+        [preview/customizer state descriptor]
+        [quo/text
+         {:style {:margin-left  :auto
+                  :margin-right :auto
+                  :align-items  :center}}
+         "Normal Scales"]
+        [demo-box @shadow? "Shadow 1" (shadows/get 1)]
+        [demo-box @shadow? "Shadow 2" (shadows/get 2)]
+        [demo-box @shadow? "Shadow 3" (shadows/get 3)]
+        [demo-box @shadow? "Shadow 4" (shadows/get 4)]
+        [quo/text
+         {:style {:margin-left  :auto
+                  :margin-right :auto
+                  :align-items  :center}}
+         "Inverted Scales"]
+        [demo-box @shadow? "Shadow 1" (shadows/get 1 (quo.theme/get-theme) :inverted)]
+        [demo-box @shadow? "Shadow 2" (shadows/get 2 (quo.theme/get-theme) :inverted)]
+        [demo-box @shadow? "Shadow 3" (shadows/get 3 (quo.theme/get-theme) :inverted)]
+        [demo-box @shadow? "Shadow 4" (shadows/get 4 (quo.theme/get-theme) :inverted)]
+        [quo/text
+         {:style {:margin-left  :auto
+                  :margin-right :auto
+                  :align-items  :center}}
+         "Inverted Scales"]
+        [demo-box @shadow? "Inner Shadow" shadows/inner-shadow]]])))
+
+(defn preview-shadows
+  []
+  [rn/view
+   {:background-color (colors/theme-colors colors/neutral-30 colors/neutral-95)
+    :flex             1}
+   [rn/flat-list
+    {:flex                         1
+     :keyboard-should-persist-taps :always
+     :header                       [cool-preview]
+     :key-fn                       str}]])

src/status_im2/contexts/quo_preview/gradient/gradient_cover.cljs

@@ -1,5 +1,6 @@
 (ns status-im2.contexts.quo-preview.gradient.gradient-cover
   (:require [quo2.core :as quo]
+            [quo2.foundations.colors :as colors]
             [quo2.theme :as quo.theme]
             [react-native.blur :as blur]
             [react-native.core :as rn]
@@ -42,7 +43,7 @@
     :key   :blur?
     :type  :boolean}])
 
-(defn view
+(defn cool-preview
   []
   (let [state               (reagent/atom {:customization-color :blue :blur? false})
         blur?               (reagent/cursor state [:blur?])
@@ -53,7 +54,8 @@
                         (when @blur?
                           (quo.theme/set-theme :dark)))
                       [@blur?])
-       [preview/preview-container {:state state :descriptor descriptor}
+       [:<>
+        [preview/customizer state descriptor]
         [rn/view
          {:style {:height        332
                   :margin-top    24
@@ -73,6 +75,13 @@
                        :padding-vertical 40}
            :blur-type :dark}
           [quo/gradient-cover @state]]]
+        [rn/view
+         {:style {:padding-vertical   20
+                  :padding-horizontal 16}}
+         [quo/color-picker
+          {:blur?     @blur?
+           :selected  @customization-color
+           :on-change #(reset! customization-color %)}]]
         [quo/button
          {:container-style {:margin-horizontal 40}
           :on-press        #(rf/dispatch [:show-bottom-sheet
@@ -80,3 +89,16 @@
                                            :gradient-cover?     true
                                            :customization-color @customization-color}])}
          "See in bottom sheet"]])]))
+
+(defn preview-gradient-cover
+  []
+  [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}]])

src/status_im2/contexts/quo_preview/graph/wallet_graph.cljs

@@ -1,5 +1,7 @@
 (ns status-im2.contexts.quo-preview.graph.wallet-graph
   (: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]))
 
@@ -18,17 +20,26 @@
         (recur (dec n) new-prices new-price volatility)))))
 
 (def descriptor
-  [{:key     :state
+  [{:label   "State:"
+    :key     :state
     :type    :select
-    :options [{:key :positive}
-              {:key :negative}]}
-   {:key     :time-frame
+    :options [{:key   :positive
+               :value "Positive"}
+              {:key   :negative
+               :value "Negative"}]}
+   {:label   "Time frame:"
+    :key     :time-frame
     :type    :select
-    :options [{:key :empty}
-              {:key :1-week}
-              {:key :1-month}
-              {:key :3-months}
-              {:key :1-year}
+    :options [{:key   :empty
+               :value "Empty"}
+              {:key   :1-week
+               :value "1 Week"}
+              {:key   :1-month
+               :value "1 Month"}
+              {:key   :3-months
+               :value "3 Months"}
+              {:key   :1-year
+               :value "1 Year"}
               {:key   :all-time
                :value "All time (500 years data)"}]}])
 
@@ -50,16 +61,31 @@
                       0.005)]
     (generate-crypto-token-prices data-points volatility)))
 
-(defn view
+(defn cool-preview
   []
   (let [state (reagent/atom {:state      :positive
                              :time-frame :1-week})]
     (fn []
-      [preview/preview-container
-       {:state                     state
-        :descriptor                descriptor
-        :component-container-style {:padding-horizontal 0 :margin-top 200}}
-       [quo/wallet-graph
-        {:data       (generate-data (:time-frame @state))
-         :state      (:state @state)
-         :time-frame (:time-frame @state)}]])))
+      [rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!}
+       [rn/view {:padding-bottom 150}
+        [preview/customizer state descriptor]
+        [rn/view {:margin-top 300}
+         [quo/wallet-graph
+          {:data       (generate-data (:time-frame @state))
+           :state      (:state @state)
+           :time-frame (:time-frame @state)}]]]])))
+
+(defn preview-wallet-graph
+  []
+  [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
+     :scroll-enabled               false}]])

src/status_im2/contexts/quo_preview/info/info_message.cljs

@@ -1,27 +1,53 @@
 (ns status-im2.contexts.quo-preview.info.info-message
-  (:require [quo2.components.info.info-message :as quo]
+  (:require [quo2.components.info.info-message :as quo2]
+            [quo2.foundations.colors :as colors]
+            [react-native.core :as rn]
             [reagent.core :as reagent]
             [status-im2.contexts.quo-preview.preview :as preview]))
 
 (def descriptor
-  [{:key     :type
+  [{:label   "Type:"
+    :key     :type
     :type    :select
-    :options [{:key :default}
-              {:key :success}
-              {:key :error}]}
-   {:key     :size
+    :options [{:key   :default
+               :value "Default"}
+              {:key   :success
+               :value "Success"}
+              {:key   :error
+               :value "Error"}]}
+   {:label   "Size:"
+    :key     :size
     :type    :select
-    :options [{:key :default}
-              {:key :tiny}]}
-   {:key  :message
-    :type :text}])
+    :options [{:key   :default
+               :value "Default"}
+              {:key   :tiny
+               :value "Tiny"}]}
+   {:label "Message"
+    :key   :message
+    :type  :text}])
 
-(defn view
+(defn cool-preview
   []
   (let [state (reagent/atom {:type    :default
                              :size    :default
                              :icon    :i/placeholder
                              :message "This is a message"})]
     (fn []
-      [preview/preview-container {:state state :descriptor descriptor}
-       [quo/info-message @state (:message @state)]])))
+      [rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!}
+       [rn/view {:padding-bottom 150}
+        [preview/customizer state descriptor]
+        [rn/view
+         {:padding-vertical 60
+          :align-items      :center}
+         [quo2/info-message @state (:message @state)]]]])))
+
+(defn preview-info-message
+  []
+  [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}]])

src/status_im2/contexts/quo_preview/info/information_box.cljs

@@ -1,28 +1,38 @@
 (ns status-im2.contexts.quo-preview.info.information-box
   (: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]))
 
 (def descriptor
-  [{:key     :type
+  [{:label   "Type:"
+    :key     :type
     :type    :select
-    :options [{:key :default}
-              {:key :informative}
-              {:key :error}]}
-   {:key  :closable?
-    :type :boolean}
-   {:key  :message
-    :type :text}
-   {:key  :button-label
-    :type :text}])
+    :options [{:key   :default
+               :value "Default"}
+              {:key   :informative
+               :value "Informative"}
+              {:key   :error
+               :value "Error"}]}
+   {:label "Closable?"
+    :key   :closable?
+    :type  :boolean}
+   {:label "Message"
+    :key   :message
+    :type  :text}
+   {:label "Button Label"
+    :key   :button-label
+    :type  :text}])
 
-(defn view
+(defn cool-preview
   []
-  (let [state     (reagent/atom {:type         :default
-                                 :closable?    true
-                                 :message      (str "If you registered a stateofus.eth name "
-                                                    "you might be eligible to connect $ENS")
-                                 :button-label "Button"})
+  (let [state     (reagent/atom
+                   {:type         :default
+                    :closable?    true
+                    :message      (str "If you registered a stateofus.eth name "
+                                       "you might be eligible to connect $ENS")
+                    :button-label "Button"})
         closable? (reagent/cursor state [:closable?])
         closed?   (reagent/cursor state [:closed?])
         on-close  (fn []
@@ -30,10 +40,26 @@
                     (js/setTimeout (fn [] (reset! closed? false))
                                    2000))]
     (fn []
-      [preview/preview-container {:state state :descriptor descriptor}
-       [quo/information-box
-        (merge {:icon     :i/info
-                :style    {:width 335}
-                :on-close (when @closable? on-close)}
-               @state)
-        (:message @state)]])))
+      [rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!}
+       [rn/view
+        [preview/customizer state descriptor]
+        [rn/view
+         {:style {:padding-vertical 20
+                  :align-items      :center}}
+         [quo/information-box
+          (merge {:icon     :i/info
+                  :style    {:width 335}
+                  :on-close (when @closable? on-close)}
+                 @state)
+          (:message @state)]]]])))
+
+(defn preview-information-box
+  []
+  [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}]])

src/status_im2/contexts/quo_preview/inputs/input.cljs

@@ -1,33 +1,48 @@
 (ns status-im2.contexts.quo-preview.inputs.input
   (:require [clojure.string :as string]
             [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]))
 
 (def descriptor
-  [{:key     :type
+  [{:label   "Type:"
+    :key     :type
     :type    :select
-    :options [{:key :text}
-              {:key :password}]}
-   {:key  :blur?
-    :type :boolean}
-   {:key  :error?
-    :type :boolean}
-   {:key  :icon-name
-    :type :boolean}
-   {:key  :disabled?
-    :type :boolean}
-   {:key  :clearable?
-    :type :boolean}
-   {:key  :small?
-    :type :boolean}
-   {:key  :multiline
-    :type :boolean}
-   {:key  :button
-    :type :boolean}
-   {:key  :label
-    :type :text}
-   {:key     :char-limit
+    :options [{:key   :text
+               :value "Text"}
+              {:key   :password
+               :value "Password"}]}
+   {:label "Blur:"
+    :key   :blur?
+    :type  :boolean}
+   {:label "Error:"
+    :key   :error?
+    :type  :boolean}
+   {:label "Icon:"
+    :key   :icon-name
+    :type  :boolean}
+   {:label "Disabled:"
+    :key   :disabled?
+    :type  :boolean}
+   {:label "Clearable:"
+    :key   :clearable?
+    :type  :boolean}
+   {:label "Small:"
+    :key   :small?
+    :type  :boolean}
+   {:label "Multiline:"
+    :key   :multiline
+    :type  :boolean}
+   {:label "Button:"
+    :key   :button
+    :type  :boolean}
+   {:label "Label:"
+    :key   :label
+    :type  :text}
+   {:label   "Char limit:"
+    :key     :char-limit
     :type    :select
     :options [{:key   10
                :value "10"}
@@ -35,13 +50,14 @@
                :value "50"}
               {:key   100
                :value "100"}]}
-   {:key  :value
-    :type :text}])
+   {:label "Value:"
+    :key   :value
+    :type  :text}])
 
-(defn view
+(defn cool-preview
   []
   (let [state (reagent/atom {:type                :text
-                             :blur?               false
+                             :blur                false
                              :placeholder         "Type something"
                              :error               false
                              :icon-name           false
@@ -50,23 +66,36 @@
                              :on-char-limit-reach #(js/alert
                                                     (str "Char limit reached: " %))})]
     (fn []
-      (let [blank-label? (string/blank? (:label @state))]
-        [preview/preview-container
-         {:state                 state
-          :descriptor            descriptor
-          :blur?                 (:blur? @state)
-          :show-blur-background? true}
-         [quo/input
-          (cond-> (assoc @state
-                         :on-clear?      #(swap! state assoc :value "")
-                         :on-change-text #(swap! state assoc :value %))
-            (:button @state)
-            (assoc :button
-                   {:on-press #(js/alert "Button pressed!")
-                    :text     "My button"})
+      (let [blank-label? (string/blank? (:label @state))
+            icon?        (boolean (:icon-name @state))
+            button-props {:on-press #(js/alert "Button pressed!")
+                          :text     "My button"}]
+        [rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!}
+         [rn/view {:style {:padding-bottom 150}}
+          [rn/view {:style {:flex 1}}
+           [preview/customizer state descriptor]]
+          [preview/blur-view
+           {:style                 {:flex            1
+                                    :align-items     :center
+                                    :margin-vertical 20}
+            :show-blur-background? (:blur? @state)}
+           [rn/view {:style {:width 300}}
+            [quo/input
+             (cond-> @state
+               :always          (assoc
+                                 :on-clear?      #(swap! state assoc :value "")
+                                 :on-change-text #(swap! state assoc :value %))
+               (:button @state) (assoc :button button-props)
+               blank-label?     (dissoc :label)
+               icon?            (assoc :icon-name :i/placeholder))]]]]]))))
 
-            blank-label?
-            (dissoc :label)
-
-            (:icon-name @state)
-            (assoc :icon-name :i/placeholder))]]))))
+(defn preview-input
+  []
+  [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}]])

src/status_im2/contexts/quo_preview/inputs/locked_input.cljs

@@ -1,24 +1,42 @@
 (ns status-im2.contexts.quo-preview.inputs.locked-input
-  (:require [quo2.core :as quo]
+  (:require [quo2.foundations.colors :as colors]
+            [react-native.core :as rn]
+            [quo2.core :as quo]
             [reagent.core :as reagent]
             [status-im2.contexts.quo-preview.preview :as preview]))
 
 (def descriptor
-  [{:key :icon :type :boolean}
-   {:key :label :type :text}
-   {:key :value :type :text}])
+  [{:label "show icon"
+    :key   :icon
+    :type  :boolean}
+   {:label "label"
+    :key   :label
+    :type  :text}
+   {:label "Value"
+    :key   :value
+    :type  :text}])
 
-(defn view
+(defn preview-locked-input
   []
   (let [state (reagent/atom {:value "$1,648.34"
                              :label "Network fee"})]
     (fn []
       (let [{:keys [label value icon]} @state]
-        [preview/preview-container {:state state :descriptor descriptor}
-         [quo/locked-input
-          {:icon            (when icon :i/gas)
-           :label           label
-           :container-style {:margin-right      20
-                             :margin-horizontal 20
-                             :flex              1}}
-          value]]))))
+        [rn/view
+         {:background-color (colors/theme-colors colors/white colors/neutral-90)
+          :flex             1
+          :flex-direction   :column
+          :padding-top      20
+          :padding-left     20}
+         [rn/view {:style {:height 200}}
+          [preview/customizer state descriptor]]
+         [rn/view
+          {:style {:margin-top     11
+                   :flex-direction :row}}
+          [quo/locked-input
+           {:icon            (when icon :i/gas)
+            :label           label
+            :container-style {:margin-right      20
+                              :margin-horizontal 20
+                              :flex              1}}
+           value]]]))))

src/status_im2/contexts/quo_preview/inputs/profile_input.cljs

@@ -1,42 +1,67 @@
 (ns status-im2.contexts.quo-preview.inputs.profile-input
-  (:require [quo2.core :as quo]
-            [quo2.foundations.colors :as colors]
-            [react-native.blur :as blur]
+  (:require [quo2.foundations.colors :as colors]
+            [react-native.core :as rn]
             [reagent.core :as reagent]
+            [quo2.core :as quo]
+            [react-native.blur :as blur]
             [status-im2.common.resources :as resources]
             [status-im2.contexts.quo-preview.preview :as preview]))
 
 (def descriptor
-  [{:key  :disabled?
-    :type :boolean}
-   {:key  :image-selected?
-    :type :boolean}
-   (preview/customization-color-option {:key :color})])
+  [{:label "disabled?"
+    :key   :disabled?
+    :type  :boolean}
+   {:label "image selected?"
+    :key   :image-selected?
+    :type  :boolean}
+   {:label   "Custom Color"
+    :key     :color
+    :type    :select
+    :options (map (fn [color]
+                    (let [k (get color :name)]
+                      {:key k :value k}))
+                  (quo/picker-colors))}])
 
-(defn view
+(defn cool-preview
   []
   (let [state          (reagent/atom {:color           :blue
                                       :image-selected? false
                                       :disabled?       false})
         max-length     24
+
         value          (reagent/atom "")
         on-change-text #(reset! value %)]
     (fn []
-      [preview/preview-container {:state state :descriptor descriptor}
-       [blur/view
-        {:background-color  colors/neutral-80-opa-80
-         :flex-direction    :row
-         :margin-horizontal 20
-         :justify-content   :center}
-        [quo/profile-input
-         {:default-value       ""
-          :on-change-text      on-change-text
-          :customization-color (:color @state)
-          :placeholder         "Your Name"
-          :on-press            #(js/alert "show image selector")
-          :image-picker-props  {:profile-picture (when (:image-selected? @state)
-                                                   (resources/get-mock-image :user-picture-male5))
-                                :full-name       @value}
-          :title-input-props   {:disabled?      (:disabled? @state)
-                                :max-length     max-length
-                                :on-change-text on-change-text}}]]])))
+      [rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!}
+       [rn/view {:padding-bottom 150}
+        [rn/view {:flex 1}]
+        [preview/customizer state descriptor]
+        [blur/view
+         {:background-color  colors/neutral-80-opa-80
+          :flex-direction    :row
+          :margin-horizontal 20
+          :justify-content   :center}
+         [quo/profile-input
+          {:default-value       ""
+           :on-change-text      on-change-text
+           :customization-color (:color @state)
+           :placeholder         "Your Name"
+           :on-press            #(js/alert "show image selector")
+           :image-picker-props  {:profile-picture (when (:image-selected? @state)
+                                                    (resources/get-mock-image :user-picture-male5))
+                                 :full-name       @value}
+           :title-input-props   {:disabled?      (:disabled? @state)
+                                 :max-length     max-length
+                                 :on-change-text on-change-text}}]]]])))
+
+(defn preview-profile-input
+  []
+  [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}]])

src/status_im2/contexts/quo_preview/inputs/recovery_phrase_input.cljs

@@ -1,48 +1,76 @@
 (ns status-im2.contexts.quo-preview.inputs.recovery-phrase-input
   (: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]))
 
 (def descriptor
-  [{:key  :text
-    :type :text}
-   {:key  :placeholder
-    :type :text}
-   {:key  :blur?
-    :type :boolean}
-   {:key  :mark-errors?
-    :type :boolean}
-   (preview/customization-color-option)
-   {:key     :word-limit
+  [{:label "Text"
+    :key   :text
+    :type  :text}
+   {:label "Placeholder"
+    :key   :placeholder
+    :type  :text}
+   {:label "Blur"
+    :key   :blur?
+    :type  :boolean}
+   {:label "Mark errors"
+    :key   :mark-errors?
+    :type  :boolean}
+   {:label   "Customization color"
+    :key     :customization-color
+    :type    :select
+    :options (map (fn [[color _]]
+                    {:key color :value (name color)})
+                  colors/customization)}
+   {:label   "Word limit"
+    :key     :word-limit
     :type    :select
     :options [{:key nil :value "No limit"}
               {:key 5 :value "5 words"}
               {:key 10 :value "10 words"}
               {:key 20 :value "20 words"}]}])
 
-(defn view
+(defn cool-preview
   []
   (let [state (reagent/atom {:text                ""
                              :placeholder         "Type or paste your recovery phrase"
                              :customization-color :blue
                              :word-limit          20
-                             :blur?               false
                              :mark-errors?        true})]
     (fn []
-      [preview/preview-container
-       {:state                 state
-        :descriptor            descriptor
-        :blur?                 (:blur? @state)
-        :show-blur-background? true}
-       [quo/text {:size :paragraph-2}
-        "(Any word with at least 6 chars is marked as error)"]
-       [rn/view {:style {:height 150}}
-        [quo/recovery-phrase-input
-         {:mark-errors?        (:mark-errors? @state)
-          :error-pred          #(> (count %) 5)
-          :on-change-text      #(swap! state assoc :text %)
-          :placeholder         (:placeholder @state)
-          :customization-color (:customization-color @state)
-          :word-limit          (:word-limit @state)}
-         (:text @state)]]])))
+      [rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!}
+       [rn/view {:style {:padding-bottom 150}}
+        [rn/view {:style {:flex 1}}
+         [preview/customizer state descriptor]
+         [quo/text {:size :paragraph-2}
+          "(Any word with at least 6 chars is marked as error)"]]
+        [preview/blur-view
+         {:style                 {:align-items     :center
+                                  :margin-vertical 20
+                                  :width           "100%"}
+          :height                200
+          :show-blur-background? (:blur? @state)}
+         [rn/view
+          {:style {:height 150
+                   :width  "100%"}}
+          [quo/recovery-phrase-input
+           {:mark-errors?        (:mark-errors? @state)
+            :error-pred          #(> (count %) 5)
+            :on-change-text      #(swap! state assoc :text %)
+            :placeholder         (:placeholder @state)
+            :customization-color (:customization-color @state)
+            :word-limit          (:word-limit @state)}
+           (:text @state)]]]]])))
+
+(defn preview-recovery-phrase-input
+  []
+  [rn/view
+   {:style {:background-color (colors/theme-colors colors/white colors/neutral-95)
+            :flex             1}}
+   [rn/flat-list
+    {:style                     {:flex 1}
+     :keyboardShouldPersistTaps :always
+     :header                    [cool-preview]
+     :key-fn                    str}]])

src/status_im2/contexts/quo_preview/inputs/search_input.cljs

@@ -1,17 +1,23 @@
 (ns status-im2.contexts.quo-preview.inputs.search-input
   (: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]
             [status-im2.contexts.quo-preview.preview :as preview]))
 
 (def descriptor
-  [{:key  :value
-    :type :text}
-   {:key  :blur?
-    :type :boolean}
-   {:key  :disabled?
-    :type :boolean}
-   {:key     :number-tags
+  [{:label "Value"
+    :key   :value
+    :type  :text}
+   {:label "Blur"
+    :key   :blur?
+    :type  :boolean}
+   {:label "Disabled"
+    :key   :disabled?
+    :type  :boolean}
+   {:label   "Number of Tags"
+    :key     :number-tags
     :type    :select
     :options (map (fn [n]
                     {:key n :value (str n)})
@@ -29,24 +35,40 @@
     (resources/get-mock-image :user-picture-female2)
     "Freya Odinson"]])
 
-(defn view
+(defn cool-preview
   []
   (let [state          (reagent/atom {:blur?       false
                                       :disabled?   false
                                       :number-tags 0
                                       :placeholder "Search..."
-                                      :value       ""})
+                                      :value       ""
+                                      :on-clear    #(js/alert "Clear pressed")})
         on-change-text (fn [new-text]
                          (swap! state assoc :value new-text))]
     (fn []
       (let [tags (take (:number-tags @state) (example-tags (:blur? @state)))]
-        [preview/preview-container
-         {:state                 state
-          :descriptor            descriptor
-          :blur?                 (:blur? @state)
-          :show-blur-background? true}
-         [quo/search-input
-          (assoc @state
-                 :on-clear       #(swap! state assoc :value "")
-                 :tags           tags
-                 :on-change-text on-change-text)]]))))
+        [rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!}
+         [rn/view {:style {:padding-bottom 150}}
+          [rn/view {:style {:flex 1}}
+           [preview/customizer state descriptor]]
+          [preview/blur-view
+           {:style                 {:align-items     :center
+                                    :margin-vertical 20
+                                    :width           "100%"}
+            :show-blur-background? (:blur? @state)}
+           [rn/view {:style {:width "100%"}}
+            [quo/search-input
+             (assoc @state
+                    :tags           tags
+                    :on-change-text on-change-text)]]]]]))))
+
+(defn preview-search-input
+  []
+  [rn/view
+   {:style {:background-color (colors/theme-colors colors/white colors/neutral-95)
+            :flex             1}}
+   [rn/flat-list
+    {:style                     {:flex 1}
+     :keyboardShouldPersistTaps :always
+     :header                    [cool-preview]
+     :key-fn                    str}]])

src/status_im2/contexts/quo_preview/inputs/title_input.cljs

@@ -1,30 +1,57 @@
 (ns status-im2.contexts.quo-preview.inputs.title-input
-  (:require [quo2.core :as quo]
+  (:require [quo2.foundations.colors :as colors]
+            [react-native.core :as rn]
             [reagent.core :as reagent]
+            [quo2.core :as quo]
             [status-im2.contexts.quo-preview.preview :as preview]))
 
 (def descriptor
-  [{:key  :disabled?
-    :type :boolean}
-   {:key  :placeholder
-    :type :text}
-   {:key  :max-length
-    :type :number}
-   {:key  :blur?
-    :type :boolean}
-   (preview/customization-color-option)])
+  [{:label "disabled?"
+    :key   :disabled?
+    :type  :boolean}
+   {:label "blur?"
+    :key   :blur?
+    :type  :boolean}
+   {:label   "Cursor Color"
+    :key     :color
+    :type    :select
+    :options (map (fn [{:keys [name]}] {:key name :value name}) (quo/picker-colors))}])
 
-(defn view
+(defn cool-preview
   []
-  (let [state (reagent/atom {:color       nil
-                             :placeholder "Type something here"
-                             :max-length  24
-                             :blur?       false
-                             :disabled?   false})]
+  (let [state          (reagent/atom {:color     nil
+                                      :blur?     false
+                                      :disabled? false})
+        max-length     24
+        on-change-text (fn [_v]
+                         (println (str "cool-preview -> on-change-text called " _v)))]
     (fn []
-      [preview/preview-container
-       {:state                 state
-        :descriptor            descriptor
-        :blur?                 (:blur? @state)
-        :show-blur-background? true}
-       [quo/title-input (assoc @state :default-value "")]])))
+      [rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!}
+       [rn/view {:padding-bottom 150}
+        [rn/view {:flex 1}]
+        [preview/customizer state descriptor]
+
+        [preview/blur-view
+         {:show-blur-background? (:blur? @state)
+          :style                 {:flex-direction  :row
+                                  :justify-content :center}}
+         [quo/title-input
+          {:max-length          max-length
+           :default-value       ""
+           :on-change-text      on-change-text
+           :disabled?           (:disabled? @state)
+           :customization-color (:color @state)
+           :blur?               (:blur? @state)
+           :placeholder         "type something here"}]]]])))
+
+(defn preview-title-input
+  []
+  [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}]])

src/status_im2/contexts/quo_preview/keycard/keycard.cljs

@@ -1,17 +1,37 @@
 (ns status-im2.contexts.quo-preview.keycard.keycard
-  (:require [quo2.core :as quo]
+  (:require [status-im2.contexts.quo-preview.preview :as preview]
+            [react-native.core :as rn]
+            [quo2.foundations.colors :as colors]
             [reagent.core :as reagent]
-            [status-im2.contexts.quo-preview.preview :as preview]))
+            [quo2.core :as quo]))
 
 (def descriptor
-  [{:key :holder-name :type :text}
-   {:key :locked? :type :boolean}])
+  [{:label "Holder"
+    :key   :holder-name
+    :type  :text}
+   {:label "Locked?"
+    :key   :locked?
+    :type  :boolean}])
 
-(defn view
+(defn cool-preview
   []
-  (let [state (reagent/atom {:holder-name ""
+  (let [state (reagent/atom {:holder-name nil
                              :locked?     true})]
     (fn
       []
-      [preview/preview-container {:state state :descriptor descriptor}
-       [quo/keycard @state]])))
+      [rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!}
+       [rn/view [preview/customizer state descriptor]
+        [quo/keycard
+         {:holder-name? (:holder-name @state)
+          :locked?      (:locked? @state)}]]])))
+
+(defn preview-keycard
+  []
+  [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}]])

src/status_im2/contexts/quo_preview/list_items/account_list_card.cljs

@@ -1,19 +1,27 @@
 (ns status-im2.contexts.quo-preview.list-items.account-list-card
-  (:require [quo2.core :as quo]
-            [reagent.core :as reagent]
-            [status-im2.contexts.quo-preview.preview :as preview]))
+  (:require
+    [quo2.core :as quo]
+    [react-native.core :as rn]
+    [reagent.core :as reagent]
+    [status-im2.contexts.quo-preview.preview :as preview]))
 
 (def descriptor
-  [{:key     :state
+  [{:label   "State:"
+    :key     :state
     :type    :select
-    :options [{:key :default}
-              {:key :pressed}]}
-   {:key     :action
+    :options [{:key   :default
+               :value "Default"}
+              {:key   :pressed
+               :value "Pressed"}]}
+   {:label   "Action:"
+    :key     :action
     :type    :select
-    :options [{:key :none}
-              {:key :icon}]}])
+    :options [{:key   :none
+               :value "None"}
+              {:key   :icon
+               :value "Icon"}]}])
 
-(defn view
+(defn preview
   []
   (let [state (reagent/atom {:account-props {:customization-color :purple
                                              :size                32
@@ -26,5 +34,9 @@
                              :action        :none
                              :on-press      (fn [] (js/alert "Button pressed"))})]
     (fn []
-      [preview/preview-container {:state state :descriptor descriptor}
-       [quo/account-list-card @state]])))
+      [rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!}
+       [rn/view
+        {:style {:flex               1
+                 :padding-horizontal 20}}
+        [rn/view {:style {:min-height 150}} [preview/customizer state descriptor]]
+        [quo/account-list-card @state]]])))

src/status_im2/contexts/quo_preview/list_items/channel.cljs

@@ -1,20 +1,28 @@
 (ns status-im2.contexts.quo-preview.list-items.channel
-  (:require [quo2.core :as quo]
+  (:require [quo2.components.list-items.channel :as quo2-channel]
+            [quo2.foundations.colors :as colors]
+            [react-native.core :as rn]
             [reagent.core :as reagent]
             [status-im2.contexts.quo-preview.preview :as preview]))
 
 (def descriptor
-  [{:key  :muted?
-    :type :boolean}
-   {:key  :name
-    :type :text}
-   {:key  :mentions-count
-    :type :text}
-   {:key  :unread-messages?
-    :type :boolean}
-   {:key  :emoji
-    :type :text}
-   {:key     :locked?
+  [{:label "Muted?:"
+    :key   :muted?
+    :type  :boolean}
+   {:label "Name"
+    :key   :name
+    :type  :text}
+   {:label "Number of mentions"
+    :key   :mentions-count
+    :type  :text}
+   {:label "Unread Messages:"
+    :key   :unread-messages?
+    :type  :boolean}
+   {:label "Avatar emoji"
+    :key   :emoji
+    :type  :text}
+   {:label   "is Locked?"
+    :key     :locked?
     :type    :select
     :options [{:key   nil
                :value "None"}
@@ -22,9 +30,11 @@
                :value "Unlocked"}
               {:key   true
                :value "Locked"}]}
-   {:key  :is-active-channel?
-    :type :boolean}
-   {:key     :channel-color
+   {:label "Is Pressed Channel:"
+    :key   :is-active-channel?
+    :type  :boolean}
+   {:label   "Channel color"
+    :key     :channel-color
     :type    :select
     :options [{:key   "#00FFFF"
                :value "Blue"}
@@ -33,7 +43,7 @@
               {:key   "#FFFF00"
                :value "Yellow"}]}])
 
-(defn view
+(defn cool-preview
   []
   (let [state (reagent/atom {:is-active-channel? false
                              :muted?             false
@@ -44,5 +54,27 @@
                              :name               "channel"
                              :locked?            true})]
     (fn []
-      [preview/preview-container {:state state :descriptor descriptor}
-       [quo/channel-list-item @state]])))
+      [rn/view
+       {:margin-bottom  50
+        :padding-bottom 16
+        :padding-right  8
+        :padding-left   8
+
+        :padding-top    16}
+       [preview/customizer state descriptor]
+       [rn/view
+        {:padding-vertical 60
+         :align-items      :center}
+        [quo2-channel/list-item @state]]])))
+
+(defn preview-channel
+  []
+  [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}]]])

src/status_im2/contexts/quo_preview/list_items/dapp.cljs

@@ -1,40 +0,0 @@
-(ns status-im2.contexts.quo-preview.list-items.dapp
-  (:require [quo2.core :as quo]
-            [react-native.core :as rn]
-            [reagent.core :as reagent]
-            [status-im2.common.resources :as resources]
-            [status-im2.contexts.quo-preview.preview :as preview]))
-
-(def descriptor
-  [{:key     :state
-    :type    :select
-    :options [{:key   :default
-               :value "Default"}
-              {:key   :active
-               :value "Active"}]}
-   {:key     :action
-    :type    :select
-    :options [{:key   :none
-               :value "None"}
-              {:key   :icon
-               :value "Icon"}]}
-   {:key  :blur?
-    :type :boolean}])
-
-(defn preview
-  []
-  (let [state (reagent/atom {:dapp                {:avatar (resources/get-mock-image :coin-gecko)
-                                                   :name   "Coingecko"
-                                                   :value  "coingecko.com"}
-                             :state               :default
-                             :action              :icon
-                             :blur?               false
-                             :customization-color :blue
-                             :on-press-icon       (fn [] (js/alert "Button pressed"))})]
-    (fn []
-      [preview/preview-container {:state state :descriptor descriptor}
-       [rn/view
-        {:padding-vertical 60
-         :flex-direction   :row
-         :justify-content  :center}
-        [quo/dapp @state]]])))

src/status_im2/contexts/quo_preview/list_items/preview_lists.cljs

@@ -1,12 +1,16 @@
 (ns status-im2.contexts.quo-preview.list-items.preview-lists
-  (:require [quo2.core :as quo]
+  (:require [quo2.components.list-items.preview-list :as quo2]
+            [quo2.foundations.colors :as colors]
             [quo2.foundations.resources :as quo.resources]
+            [react-native.core :as rn]
             [reagent.core :as reagent]
+            [utils.i18n :as i18n]
             [status-im2.common.resources :as resources]
             [status-im2.contexts.quo-preview.preview :as preview]))
 
 (def descriptor
-  [{:key     :size
+  [{:label   "Size:"
+    :key     :size
     :type    :select
     :options [{:key   32
                :value "32"}
@@ -14,15 +18,21 @@
                :value "24"}
               {:key   16
                :value "16"}]}
-   {:key     :type
+   {:label   "Type:"
+    :key     :type
     :type    :select
-    :options [{:key :user}
-              {:key :photo}
-              {:key :network}]}
-   {:key     :list-size
+    :options [{:key   :user
+               :value "User"}
+              {:key   :photo
+               :value "Photo"}
+              {:key   :network
+               :value "Network"}]}
+   {:label   "List Size"
+    :key     :list-size
     :default 10
     :type    :text}])
 
+;; Mocked list items
 (def user-list
   [{:full-name "ABC DEF"}
    {:full-name "GHI JKL"}
@@ -42,17 +52,33 @@
    {:source (quo.resources/get-network :optimism)}
    {:source (quo.resources/get-network :arbitrum)}])
 
-(defn view
+(defn cool-preview
   []
   (let [state (reagent/atom {:type               :user
                              :size               32
                              :list-size          10
-                             :more-than-99-label "99+"})
+                             :more-than-99-label (i18n/label :counter-99-plus)})
         type  (reagent/cursor state [:type])]
     (fn []
-      [preview/preview-container {:state state :descriptor descriptor}
-       [quo/preview-list @state
-        (case @type
-          :user    user-list
-          :photo   photos-list
-          :network networks-list)]])))
+      [rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!}
+       [rn/view {:padding-bottom 150}
+        [preview/customizer state descriptor]
+        [rn/view
+         {:padding-vertical 60
+          :align-items      :center}
+         [quo2/preview-list @state
+          (case @type
+            :user    user-list
+            :photo   photos-list
+            :network networks-list)]]]])))
+
+(defn preview-preview-lists
+  []
+  [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}]])

src/status_im2/contexts/quo_preview/main.cljs

@@ -62,7 +62,6 @@
     [status-im2.contexts.quo-preview.links.link-preview :as link-preview]
     [status-im2.contexts.quo-preview.list-items.account-list-card :as account-list-card]
     [status-im2.contexts.quo-preview.list-items.channel :as channel]
-    [status-im2.contexts.quo-preview.list-items.dapp :as dapp]
     [status-im2.contexts.quo-preview.list-items.preview-lists :as preview-lists]
     [status-im2.contexts.quo-preview.list-items.user-list :as user-list]
     [status-im2.contexts.quo-preview.list-items.community-list :as community-list]
@@ -112,8 +111,8 @@
     [status-im2.contexts.quo-preview.loaders.skeleton :as skeleton]
     [status-im2.contexts.quo-preview.community.channel-actions :as channel-actions]
     [status-im2.contexts.quo-preview.gradient.gradient-cover :as gradient-cover]
-    [status-im2.contexts.quo-preview.wallet.account-card :as account-card]
     [status-im2.contexts.quo-preview.wallet.account-overview :as account-overview]
+    [status-im2.contexts.quo-preview.wallet.account-card :as account-card]
     [status-im2.contexts.quo-preview.wallet.keypair :as keypair]
     [status-im2.contexts.quo-preview.wallet.network-amount :as network-amount]
     [status-im2.contexts.quo-preview.wallet.network-bridge :as network-bridge]
@@ -126,107 +125,107 @@
 
 (def screens-categories
   {:foundations       [{:name      :shadows
-                        :component shadows/view}]
+                        :component shadows/preview-shadows}]
    :animated-list     [{:name      :animated-header-list
                         :component animated-header-list/mock-screen}]
    :avatar            [{:name      :group-avatar
-                        :component group-avatar/view}
+                        :component group-avatar/preview-group-avatar}
                        {:name      :icon-avatar
-                        :component icon-avatar/view}
+                        :component icon-avatar/preview-icon-avatar}
                        {:name      :user-avatar
-                        :component user-avatar/view}
+                        :component user-avatar/preview-user-avatar}
                        {:name      :wallet-user-avatar
-                        :component wallet-user-avatar/view}
+                        :component wallet-user-avatar/preview-wallet-user-avatar}
                        {:name      :channel-avatar
-                        :component channel-avatar/view}
+                        :component channel-avatar/preview-channel-avatar}
                        {:name      :account-avatar
-                        :component account-avatar/view}]
+                        :component account-avatar/preview-account-avatar}]
    :banner            [{:name      :banner
-                        :component banner/view}]
+                        :component banner/preview-banner}]
    :buttons           [{:name      :button
-                        :component button/view}
+                        :component button/preview-button}
                        {:name      :composer-button
-                        :component composer-button/view}
+                        :component composer-button/preview-composer-button}
                        {:name      :dynamic-button
-                        :component dynamic-button/view}
+                        :component dynamic-button/preview-dynamic-button}
                        {:name      :slide-button
-                        :component slide-button/view}
+                        :component slide-button/preview-slide-button}
                        {:name      :predictive-keyboard
-                        :component predictive-keyboard/view}
+                        :component predictive-keyboard/preview-predictive-keyboard}
                        {:name      :wallet-button
-                        :component wallet-button/view}
+                        :component wallet-button/preview}
                        {:name      :wallet-ctas
-                        :component wallet-ctas/view}]
+                        :component wallet-ctas/preview}]
    :browser           [{:name      :browser-input
                         :component browser-input/preview-browser-input}]
    :calendar          [{:name      :calendar
-                        :component calendar/view}
+                        :component calendar/preview-calendar}
                        {:name      :calendar-day
-                        :component calendar-day/view}
+                        :component calendar-day/preview-calendar-day}
                        {:name      :calendar-year
-                        :component calendar-year/view}]
+                        :component calendar-year/preview-calendar-year}]
    :code              [{:name      :snippet
-                        :component code-snippet/view}]
+                        :component code-snippet/preview-code-snippet}]
    :colors            [{:name      :color-picker
                         :component color-picker/view}]
    :community         [{:name      :community-card-view
-                        :component community-card/view}
+                        :component community-card/preview-community-card}
                        {:name      :community-membership-list-view
-                        :component community-membership-list-view/view}
+                        :component community-membership-list-view/preview-community-list-view}
                        {:name      :discover-card
-                        :component discover-card/view}
+                        :component discover-card/preview-discoverd-card}
                        {:name      :token-gating
                         :options   {:insets {:bottom? true}}
-                        :component token-gating/view}
+                        :component token-gating/preview-token-gating}
                        {:name      :channel-actions
                         :options   {:insets {:bottom? true}}
-                        :component channel-actions/view}]
+                        :component channel-actions/preview-channel-actions}]
    :counter           [{:name      :counter
-                        :component counter/view}
+                        :component counter/preview-counter}
                        {:name      :step
-                        :component step/view}]
+                        :component step/preview-step}]
    :dividers          [{:name      :divider-label
                         :component divider-label/view}
                        {:name      :new-messages
-                        :component new-messages/view}
+                        :component new-messages/preview-new-messages}
                        {:name      :divider-date
-                        :component divider-date/view}
+                        :component divider-date/preview-divider-date}
                        {:name      :strength-divider
-                        :component strength-divider/view}]
+                        :component strength-divider/preview-strength-divider}]
    :drawers           [{:name      :action-drawers
-                        :component action-drawers/view}
+                        :component action-drawers/preview-action-drawers}
                        {:name      :documentation-drawer
-                        :component documenation-drawers/view}
+                        :component documenation-drawers/preview-documenation-drawers}
                        {:name      :drawer-buttons
-                        :component drawer-buttons/view}
+                        :component drawer-buttons/preview-drawer-buttons}
                        {:name      :permission-drawers
-                        :component permission-drawers/view}]
+                        :component permission-drawers/preview-permission-drawers}]
    :dropdowns         [{:name      :dropdown
-                        :component dropdown/view}
+                        :component dropdown/preview-dropdown}
                        {:name      :network-dropdown
-                        :component network-dropdown/view}]
+                        :component network-dropdown/preview-dropdown}]
    :empty-state       [{:name      :empty-state
-                        :component empty-state/view}]
+                        :component empty-state/preview-empty-state}]
    :gradient          [{:name      :gradient-cover
-                        :component gradient-cover/view}]
+                        :component gradient-cover/preview-gradient-cover}]
    :graph             [{:name      :wallet-graph
-                        :component wallet-graph/view}]
+                        :component wallet-graph/preview-wallet-graph}]
    :info              [{:name      :info-message
-                        :component info-message/view}
+                        :component info-message/preview-info-message}
                        {:name      :information-box
-                        :component information-box/view}]
+                        :component information-box/preview-information-box}]
    :inputs            [{:name      :input
-                        :component input/view}
+                        :component input/preview-input}
                        {:name      :locked-input
-                        :component locked-input/view}
+                        :component locked-input/preview-locked-input}
                        {:name      :profile-input
-                        :component profile-input/view}
+                        :component profile-input/preview-profile-input}
                        {:name      :recovery-phrase-input
-                        :component recovery-phrase-input/view}
+                        :component recovery-phrase-input/preview-recovery-phrase-input}
                        {:name      :search-input
-                        :component search-input/view}
+                        :component search-input/preview-search-input}
                        {:name      :title-input
-                        :component title-input/view}]
+                        :component title-input/preview-title-input}]
    :numbered-keyboard [{:name      :keyboard-key
                         :options   {:insets {:top? true}}
                         :component keyboard-key/preview-keyboard-key}
@@ -243,16 +242,14 @@
                         :options   {:insets {:top? true}}
                         :component link-preview/view}]
    :list-items        [{:name      :account-list-card
-                        :component account-list-card/view}
+                        :component account-list-card/preview}
                        {:name      :channel
-                        :component channel/view}
+                        :component channel/preview-channel}
                        {:name      :community-list
                         :options   {:insets {:top? true}}
                         :component community-list/view}
-                       {:name      :dapp
-                        :component dapp/preview}
                        {:name      :preview-lists
-                        :component preview-lists/view}
+                        :component preview-lists/preview-preview-lists}
                        {:name      :user-list
                         :component user-list/preview-user-list}
                        {:name      :token-value
@@ -363,7 +360,7 @@
                        {:name      :wallet-overview
                         :component wallet-overview/preview-wallet-overview}]
    :keycard           [{:name      :keycard-component
-                        :component keycard/view}]})
+                        :component keycard/preview-keycard}]})
 
 (defn- navigation-bar
   []

src/status_im2/contexts/quo_preview/preview.cljs

@@ -139,15 +139,15 @@
         "Close"]]]]]])
 
 (defn- customizer-select-button
-  [{:keys [open selected-option]}]
+  [{:keys [open selected-key]}]
   [rn/pressable
    {:style    (style/select-container)
     :on-press #(reset! open true)}
    [rn/text
     {:style           (style/field-select)
      :number-of-lines 1}
-    (if selected-option
-      (or (:value selected-option) (humanize (:key selected-option)))
+    (if selected-key
+      (humanize selected-key)
       "Select option")]
    [rn/view
     [quo/icon :i/chevron-right]]])
@@ -156,9 +156,9 @@
   []
   (let [open (reagent/atom nil)]
     (fn [{:keys [label state options] :as args}]
-      (let [label           (or label (key->text-label (:key args)))
-            field-value     (reagent/cursor state [(:key args)])
-            selected-option (find-selected-option @field-value options)]
+      (let [label        (or label (key->text-label (:key args)))
+            field-value  (reagent/cursor state [(:key args)])
+            selected-key (:key (find-selected-option @field-value options))]
         [rn/view {:style style/field-row}
          [label-view state label]
          [rn/view {:style style/field-column}
@@ -166,7 +166,7 @@
            {:open        open
             :options     options
             :field-value field-value}]
-          [customizer-select-button {:open open :selected-option selected-option}]]]))))
+          [customizer-select-button {:open open :selected-key selected-key}]]]))))
 
 (defn customizer
   [state descriptors]
@@ -189,7 +189,8 @@
   ([]
    (customization-color-option {}))
   ([opts]
-   (merge {:key     :customization-color
+   (merge {:label   "Custom color:"
+           :key     :customization-color
            :type    :select
            :options (->> colors/customization
                          keys
@@ -199,7 +200,7 @@
           opts)))
 
 (defn blur-view
-  [{:keys [show-blur-background? image height blur-view-props style]} & children]
+  [{:keys [show-blur-background? image height blur-view-props style]} children]
   [rn/view
    {:style {:flex             1
             :padding-vertical 16}}
@@ -220,39 +221,39 @@
                :blur-amount   10
                :overlay-color (colors/theme-colors colors/white-opa-70 colors/neutral-80-opa-80)}
               blur-view-props)]])
-   (into [rn/view
-          {:style (merge {:position           :absolute
-                          :top                32
-                          :padding-horizontal 16}
-                         style)}]
-         children)])
+   [rn/view
+    {:style (merge {:position           :absolute
+                    :top                32
+                    :padding-horizontal 16}
+                   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]
+   component]
   [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 style/customizer-container}
+     [customizer state descriptor]]
+    [rn/view
+     (merge {:style style/component-container}
+            component-container-style)
+     (if blur?
+       [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)}
+        component]
+       component)]]])