diff --git a/src/quo/previews/preview.cljs b/src/quo/previews/preview.cljs index 1169878d5e..d449a118cc 100644 --- a/src/quo/previews/preview.cljs +++ b/src/quo/previews/preview.cljs @@ -146,7 +146,8 @@ [quo/text "↓"]]]]])))) (defn customizer [state descriptors] - [rn/view {:style {:flex 1}} + [rn/view {:style {:flex 1} + :padding-horizontal 16} (doall (for [{:keys [key type] :as desc} descriptors diff --git a/src/quo2/screens/avatars/channel_avatar.cljs b/src/quo2/screens/avatars/channel_avatar.cljs index f16272917b..d40b70eb10 100644 --- a/src/quo2/screens/avatars/channel_avatar.cljs +++ b/src/quo2/screens/avatars/channel_avatar.cljs @@ -28,14 +28,14 @@ :emoji "🍑" :emoji-background-color :gray})] (fn [] - [rn/view {:margin-bottom 50 - :padding 16} - [rn/view {:flex 1} - [preview/customizer state descriptor]] - [rn/view {:padding-vertical 60 - :flex-direction :row - :justify-content :center} - [quo2/channel-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/channel-avatar @state]]]]))) (defn preview-channel-avatar [] [rn/view {:background-color (colors/theme-colors colors/white @@ -44,4 +44,4 @@ [rn/flat-list {:flex 1 :keyboardShouldPersistTaps :always :header [cool-preview] - :key-fn str}]]) \ No newline at end of file + :key-fn str}]]) diff --git a/src/quo2/screens/avatars/group_avatar.cljs b/src/quo2/screens/avatars/group_avatar.cljs index ba139e22e1..f5fd1acf0b 100644 --- a/src/quo2/screens/avatars/group_avatar.cljs +++ b/src/quo2/screens/avatars/group_avatar.cljs @@ -29,14 +29,14 @@ :color :purple :size :small})] (fn [] - [rn/view {:margin-bottom 50 - :padding 16} - [rn/view {:flex 1} - [preview/customizer state descriptor]] - [rn/view {:padding-vertical 60 - :flex-direction :row - :justify-content :center} - [quo2/group-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/group-avatar @state]]]]))) (defn preview-group-avatar [] [rn/view {:background-color (colors/theme-colors colors/white diff --git a/src/quo2/screens/avatars/icon_avatar.cljs b/src/quo2/screens/avatars/icon_avatar.cljs index a0b4d31f33..6dd0ea69aa 100644 --- a/src/quo2/screens/avatars/icon_avatar.cljs +++ b/src/quo2/screens/avatars/icon_avatar.cljs @@ -37,12 +37,12 @@ :icon :main-icons/placeholder20 :color :primary})] (fn [] - [rn/view {:margin-bottom 50 - :padding 16} - [preview/customizer state descriptor] - [rn/view {:padding-vertical 60 - :align-items :center} - [quo2/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) diff --git a/src/quo2/screens/avatars/user_avatar.cljs b/src/quo2/screens/avatars/user_avatar.cljs index 6da85f62aa..411a9643bd 100644 --- a/src/quo2/screens/avatars/user_avatar.cljs +++ b/src/quo2/screens/avatars/user_avatar.cljs @@ -43,14 +43,14 @@ :size :medium :ring? true})] (fn [] - [rn/view {:margin-bottom 50 - :padding 16} - [rn/view {:flex 1} - [preview/customizer state descriptor]] - [rn/view {:padding-vertical 60 - :flex-direction :row - :justify-content :center} - [quo2/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) diff --git a/src/quo2/screens/avatars/wallet_user_avatar.cljs b/src/quo2/screens/avatars/wallet_user_avatar.cljs index bb395cc399..f623f7dc31 100644 --- a/src/quo2/screens/avatars/wallet_user_avatar.cljs +++ b/src/quo2/screens/avatars/wallet_user_avatar.cljs @@ -37,11 +37,11 @@ :size :x-large :color :indigo})] (fn [] - [rn/view {:margin-bottom 50 - :padding 16} - [preview/customizer state descriptor] - [rn/view {:padding-vertical 60} - [quo2/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) diff --git a/src/quo2/screens/buttons/button.cljs b/src/quo2/screens/buttons/button.cljs index 26eed9b989..be4d16ff06 100644 --- a/src/quo2/screens/buttons/button.cljs +++ b/src/quo2/screens/buttons/button.cljs @@ -59,23 +59,23 @@ above (reagent/cursor state [:above]) icon (reagent/cursor state [:icon])] (fn [] - [rn/view {:margin-bottom 50 - :padding 16} - [rn/view {:flex 1} - [preview/customizer state descriptor]] - [rn/view {:padding-vertical 60 - :flex-direction :row - :justify-content :center} - [quo2/button (merge (dissoc @state - :theme :before :after) - {:on-press #(println "Hello world!")} - (when @above - {:above :main-icons2/placeholder}) - (when @before - {:before :main-icons2/placeholder}) - (when @after - {:after :main-icons2/placeholder})) - (if @icon :main-icons2/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} + [quo2/button (merge (dissoc @state + :theme :before :after) + {:on-press #(println "Hello world!")} + (when @above + {:above :main-icons2/placeholder}) + (when @before + {:before :main-icons2/placeholder}) + (when @after + {:after :main-icons2/placeholder})) + (if @icon :main-icons2/placeholder @label)]]]]))) (defn preview-button [] [rn/view {:background-color (colors/theme-colors colors/white colors/neutral-90) diff --git a/src/quo2/screens/community/community_card_view.cljs b/src/quo2/screens/community/community_card_view.cljs index 95e19bade3..32c6e1fb38 100644 --- a/src/quo2/screens/community/community_card_view.cljs +++ b/src/quo2/screens/community/community_card_view.cljs @@ -36,15 +36,16 @@ (defn cool-preview [] (let [state (reagent/atom {:view-style :card-view})] (fn [] - [rn/view {:margin-bottom 50} - [rn/view {:flex 1 - :padding 16} - [preview/customizer state descriptor]] - [rn/view {:padding-vertical 60 - :justify-content :center} - (if (= :card-view (:view-style @state)) - [community-card-view/community-card-view-item community-data] - [community-list-view/communities-list-view-item community-data])]]))) + [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} + (if (= :card-view (:view-style @state)) + [community-card-view/community-card-view-item community-data] + [community-list-view/communities-list-view-item community-data])]]]))) (defn preview-community-card [] [rn/view {:background-color (colors/theme-colors colors/neutral-5 colors/neutral-95) diff --git a/src/quo2/screens/counter/counter.cljs b/src/quo2/screens/counter/counter.cljs index b9d8383d0d..c61e922196 100644 --- a/src/quo2/screens/counter/counter.cljs +++ b/src/quo2/screens/counter/counter.cljs @@ -24,12 +24,12 @@ (defn cool-preview [] (let [state (reagent/atom {:value 5 :type :default})] (fn [] - [rn/view {:margin-bottom 50 - :padding 16} - [preview/customizer state descriptor] - [rn/view {:padding-vertical 60 - :align-items :center} - [quo2/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} + [quo2/counter @state (:value @state)]]]]))) (defn preview-counter [] [rn/view {:background-color (colors/theme-colors colors/white colors/neutral-90) diff --git a/src/quo2/screens/dividers/divider_label.cljs b/src/quo2/screens/dividers/divider_label.cljs index ea250fd7ea..21aea0f652 100644 --- a/src/quo2/screens/dividers/divider_label.cljs +++ b/src/quo2/screens/dividers/divider_label.cljs @@ -32,11 +32,11 @@ :increase-padding-top? true :blur? false})] (fn [] - [rn/view {:margin-bottom 50 - :padding 16} - [preview/customizer state descriptor] - [rn/view {:padding-vertical 60} - [divider-label/divider-label @state]]]))) + [rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!} + [rn/view {:padding-bottom 150} + [preview/customizer state descriptor] + [rn/view {:padding-vertical 60} + [divider-label/divider-label @state]]]]))) (defn preview-divider-label [] [rn/view {:background-color (colors/theme-colors @@ -46,4 +46,4 @@ [rn/flat-list {:flex 1 :keyboardShouldPersistTaps :always :header [cool-preview] - :key-fn str}]]) \ No newline at end of file + :key-fn str}]]) diff --git a/src/quo2/screens/dividers/new_messages.cljs b/src/quo2/screens/dividers/new_messages.cljs index 2e74c0b94a..a2f388137f 100644 --- a/src/quo2/screens/dividers/new_messages.cljs +++ b/src/quo2/screens/dividers/new_messages.cljs @@ -39,11 +39,11 @@ (let [state (reagent/atom {:label "New messages" :color :primary})] (fn [] - [rn/view {:margin-bottom 50 - :padding 16} - [preview/customizer state descriptor] - [rn/view {:padding-vertical 60} - [new-messages/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 @@ -53,4 +53,4 @@ [rn/flat-list {:flex 1 :keyboardShouldPersistTaps :always :header [cool-preview] - :key-fn str}]]) \ No newline at end of file + :key-fn str}]]) diff --git a/src/quo2/screens/info/info_message.cljs b/src/quo2/screens/info/info_message.cljs index 8a548aee83..f244a05d7b 100644 --- a/src/quo2/screens/info/info_message.cljs +++ b/src/quo2/screens/info/info_message.cljs @@ -31,12 +31,12 @@ :icon :main-icons2/placeholder :message "This is a message"})] (fn [] - [rn/view {:margin-bottom 50 - :padding 16} - [preview/customizer state descriptor] - [rn/view {:padding-vertical 60 - :align-items :center} - [quo2/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) diff --git a/src/quo2/screens/info/information_box.cljs b/src/quo2/screens/info/information_box.cljs index 414a2ef112..3fc9e4e8ac 100644 --- a/src/quo2/screens/info/information_box.cljs +++ b/src/quo2/screens/info/information_box.cljs @@ -35,12 +35,12 @@ closed? (reagent/cursor state [:closed?]) on-close #(reset! closed? true)] (fn [] - [rn/view {:margin-bottom 50 - :padding 16} - [preview/customizer state descriptor] - [rn/view {:padding-vertical 60 - :align-items :center} - [quo2/information-box (merge @state {:on-close on-close}) (: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/information-box (merge @state {:on-close on-close}) (:message @state)]]]]))) (defn preview-information-box [] [rn/view {:background-color (colors/theme-colors colors/white colors/neutral-90) diff --git a/src/quo2/screens/info/lowest_price.cljs b/src/quo2/screens/info/lowest_price.cljs index 036cf08248..01a0e90d15 100644 --- a/src/quo2/screens/info/lowest_price.cljs +++ b/src/quo2/screens/info/lowest_price.cljs @@ -35,14 +35,14 @@ :bottom-value-bg-color colors/black :bottom-value-text-color colors/white})] (fn [] - [rn/view {:margin-bottom 50 - :padding 16} - [rn/view {:flex 1} - [preview/customizer state descriptor]] - [rn/view {:padding-vertical 60 - :flex-direction :row - :justify-content :center} - [quo2/lowest-price @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/lowest-price @state]]]]))) (defn preview-lowest-price [] [rn/view {:background-color (colors/theme-colors colors/white @@ -51,4 +51,4 @@ [rn/flat-list {:flex 1 :keyboardShouldPersistTaps :always :header [cool-preview] - :key-fn str}]]) \ No newline at end of file + :key-fn str}]]) diff --git a/src/quo2/screens/list_items/dropdown.cljs b/src/quo2/screens/list_items/dropdown.cljs index b9f9c7458f..d1632834c9 100644 --- a/src/quo2/screens/list_items/dropdown.cljs +++ b/src/quo2/screens/list_items/dropdown.cljs @@ -59,14 +59,14 @@ selected-item (reagent/cursor state [:default-item]) on-select #(reset! selected-item %)] (fn [] - [rn/view {:margin-bottom 50 - :padding 16} - [preview/customizer state descriptor] - [rn/view {:padding-vertical 60 - :align-items :center} - [text/text {:color :main} (str "Selected item: " @selected-item)] - [quo2/dropdown (merge @state {:on-select on-select - :items items})]]]))) + [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} + [text/text {:color :main} (str "Selected item: " @selected-item)] + [quo2/dropdown (merge @state {:on-select on-select + :items items})]]]]))) (defn preview-dropdown [] [rn/view {:background-color (colors/theme-colors colors/white colors/neutral-90) @@ -76,4 +76,4 @@ :nestedScrollEnabled true :keyboardShouldPersistTaps :always :header [cool-preview] - :key-fn str}]]) \ No newline at end of file + :key-fn str}]]) diff --git a/src/quo2/screens/list_items/preview_lists.cljs b/src/quo2/screens/list_items/preview_lists.cljs index 637b359005..4032167de4 100644 --- a/src/quo2/screens/list_items/preview_lists.cljs +++ b/src/quo2/screens/list_items/preview_lists.cljs @@ -48,15 +48,15 @@ :list-size 10}) type (reagent/cursor state [:type])] (fn [] - [rn/view {:margin-bottom 50 - :padding 16} - [preview/customizer state descriptor] - [rn/view {:padding-vertical 60 - :align-items :center} - [quo2/preview-list @state - (case @type - :user user-list - :photo photos-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)]]]]))) (defn preview-preview-lists [] [rn/view {:background-color (colors/theme-colors colors/white colors/neutral-90) diff --git a/src/quo2/screens/markdown/text.cljs b/src/quo2/screens/markdown/text.cljs index a30bd1a5f7..459e7025f3 100644 --- a/src/quo2/screens/markdown/text.cljs +++ b/src/quo2/screens/markdown/text.cljs @@ -33,12 +33,12 @@ (defn cool-preview [] (let [state (reagent/atom {})] (fn [] - [rn/view {:margin-bottom 50 - :padding 16} - [preview/customizer state descriptor] - [rn/view {:padding-vertical 60} - [quo2/text @state - "The quick brown fox jumped over the lazy dog."]]]))) + [rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!} + [rn/view {:padding-bottom 150} + [preview/customizer state descriptor] + [rn/view {:padding-vertical 60} + [quo2/text @state + "The quick brown fox jumped over the lazy dog."]]]]))) (defn preview-text [] [rn/view {:background-color (colors/theme-colors colors/white colors/neutral-90) diff --git a/src/quo2/screens/reactions/react.cljs b/src/quo2/screens/reactions/react.cljs index c73dd656e3..daa21ef978 100644 --- a/src/quo2/screens/reactions/react.cljs +++ b/src/quo2/screens/reactions/react.cljs @@ -28,13 +28,13 @@ (defn cool-preview [] (let [state (reagent/atom {:emoji :main-icons/love16})] (fn [] - [rn/view {:margin-bottom 50 - :padding 16} - [preview/customizer state descriptor] - [rn/view {:padding-vertical 60 - :align-items :center} - [quo2.reaction/reaction @state] - [quo2.reaction/open-reactions-menu @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.reaction/reaction @state] + [quo2.reaction/open-reactions-menu @state]]]]))) (defn preview-react [] [rn/view {:background-color (colors/theme-colors colors/white colors/neutral-90) diff --git a/src/quo2/screens/switcher/switcher_cards.cljs b/src/quo2/screens/switcher/switcher_cards.cljs index ffa17ad10e..3d3a836c4b 100644 --- a/src/quo2/screens/switcher/switcher_cards.cljs +++ b/src/quo2/screens/switcher/switcher_cards.cljs @@ -131,12 +131,12 @@ :content-type :text :last-message "This is fantastic! Ethereum"})] (fn [] - [rn/view {:margin-bottom 50 - :padding 16} - [preview/customizer state descriptor] - [rn/view {:padding-vertical 60 - :align-items :center} - [switcher-cards/card (:type @state) (get-mock-data @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} + [switcher-cards/card (:type @state) (get-mock-data @state)]]]]))) (defn preview-switcher-cards [] [rn/view {:background-color (colors/theme-colors colors/white colors/neutral-100) diff --git a/src/quo2/screens/tabs/account_selector.cljs b/src/quo2/screens/tabs/account_selector.cljs index ad78544a42..347d06abd7 100644 --- a/src/quo2/screens/tabs/account_selector.cljs +++ b/src/quo2/screens/tabs/account_selector.cljs @@ -53,12 +53,12 @@ :account-emoji "🍑" :label-text "Label"})] (fn [] - [rn/view {:margin-bottom 50 - :padding 16} - [preview/customizer state descriptor] - [rn/view {:padding-vertical 60 - :align-items :center} - [quo2/account-selector @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/account-selector @state]]]]))) (defn preview-this [] [rn/view {:background-color (colors/theme-colors colors/white colors/neutral-90) diff --git a/src/quo2/screens/tabs/segmented_tab.cljs b/src/quo2/screens/tabs/segmented_tab.cljs index 68960f9ce7..40af9e6b90 100644 --- a/src/quo2/screens/tabs/segmented_tab.cljs +++ b/src/quo2/screens/tabs/segmented_tab.cljs @@ -16,24 +16,24 @@ (defn cool-preview [] (let [state (reagent/atom {:size 32})] (fn [] - [rn/view {:margin-bottom 50 - :padding 16} - [rn/view {:flex 1} - [preview/customizer state descriptor]] - [rn/view {:padding-vertical 60} - [quo2/segmented-control (merge @state - {:default-active 1 - :data [{:id 1 :label "Tab 1"} - {:id 2 :label "Tab 2"} - {:id 3 :label "Tab 3"} - {:id 4 :label "Tab 4"}] - :on-change #(println "Active tab" %)})]] - [rn/view {:padding-vertical 60} - [quo2/segmented-control (merge @state - {:default-active 1 - :data [{:id 1 :label "Tab 1"} - {:id 2 :label "Tab 2"}] - :on-change #(println "Active tab" %)})]]]))) + [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} + [quo2/segmented-control (merge @state + {:default-active 1 + :data [{:id 1 :label "Tab 1"} + {:id 2 :label "Tab 2"} + {:id 3 :label "Tab 3"} + {:id 4 :label "Tab 4"}] + :on-change #(println "Active tab" %)})]] + [rn/view {:padding-vertical 60} + [quo2/segmented-control (merge @state + {:default-active 1 + :data [{:id 1 :label "Tab 1"} + {:id 2 :label "Tab 2"}] + :on-change #(println "Active tab" %)})]]]]))) (defn preview-segmented [] [rn/view {:background-color (colors/theme-colors colors/white colors/neutral-90) @@ -41,4 +41,4 @@ [rn/flat-list {:flex 1 :keyboardShouldPersistTaps :always :header [cool-preview] - :key-fn str}]]) \ No newline at end of file + :key-fn str}]]) diff --git a/src/quo2/screens/tabs/tabs.cljs b/src/quo2/screens/tabs/tabs.cljs index 3f15623f22..a5dbe4199a 100644 --- a/src/quo2/screens/tabs/tabs.cljs +++ b/src/quo2/screens/tabs/tabs.cljs @@ -16,20 +16,20 @@ (defn cool-preview [] (let [state (reagent/atom {:size 32})] (fn [] - [rn/view {:margin-bottom 50 - :padding 16} - [rn/view {:flex 1} - [preview/customizer state descriptor]] - [rn/view {:padding-vertical 60 - :flex-direction :row - :justify-content :center} - [quo2/tabs (merge @state - {:default-active 1 - :data [{:id 1 :label "Tab 1"} - {:id 2 :label "Tab 2"} - {:id 3 :label "Tab 3"} - {:id 4 :label "Tab 4"}] - :on-change #(println "Active tab" %)})]]]))) + [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/tabs (merge @state + {:default-active 1 + :data [{:id 1 :label "Tab 1"} + {:id 2 :label "Tab 2"} + {:id 3 :label "Tab 3"} + {:id 4 :label "Tab 4"}] + :on-change #(println "Active tab" %)})]]]]))) (defn preview-tabs [] [rn/view {:background-color (colors/theme-colors colors/white colors/neutral-90) @@ -37,4 +37,4 @@ [rn/flat-list {:flex 1 :keyboardShouldPersistTaps :always :header [cool-preview] - :key-fn str}]]) \ No newline at end of file + :key-fn str}]]) diff --git a/src/quo2/screens/tags/context_tags.cljs b/src/quo2/screens/tags/context_tags.cljs index 2fa80ff029..d3fd43fe35 100644 --- a/src/quo2/screens/tags/context_tags.cljs +++ b/src/quo2/screens/tags/context_tags.cljs @@ -58,20 +58,20 @@ :key :contact :type :select :options contacts-public-keys})))] - [rn/view {:margin-bottom 50 - :padding 16} - [rn/view {:flex 1} - [preview/customizer state descriptor]] - [rn/view {:padding-vertical 60 - :flex-direction :row - :justify-content :center} - (case (:type @state) - :group-avatar - [quo2/group-avatar-tag (:label @state) group-avatar-default-params] - :public-key - [quo2/public-key-tag {} example-pk] - :avatar - [quo2/user-avatar-tag {} current-username (:photo @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} + (case (:type @state) + :group-avatar + [quo2/group-avatar-tag (:label @state) group-avatar-default-params] + :public-key + [quo2/public-key-tag {} example-pk] + :avatar + [quo2/user-avatar-tag {} current-username (:photo @state)])]]])))) (defn preview-context-tags [] [rn/view {:background-color (colors/theme-colors colors/white diff --git a/src/quo2/screens/tags/filter_tags.cljs b/src/quo2/screens/tags/filter_tags.cljs index eea2a5c68f..d6283f812a 100644 --- a/src/quo2/screens/tags/filter_tags.cljs +++ b/src/quo2/screens/tags/filter_tags.cljs @@ -38,43 +38,43 @@ :labelled true :type :emoji})] (fn [] - [rn/view {:margin-bottom 50 - :padding 16 - :padding-vertical 60} - [rn/view {:flex 1} - [preview/customizer state descriptor]] - [rn/view {:flex 1 - :justify-content :center - :top 60} - (when (:blurred @state) - [rn/view {:flex 1} - [react/view {:flex-direction :row - :height 100} - [react/image {:source (resources/get-image :community-cover) - :style {:flex 1 - :height 100 - :border-radius 16}}]] - [react/view {:flex-direction :row - :height 100 - :position :absolute - :left 0 - :right 0} - [react/blur-view {:flex 1 - :style {:border-radius 16 - :height 100} - :blur-amount 40 - :overlay-color (colors/theme-colors - colors/white-opa-70 - colors/neutral-80-opa-80)}]]]) - [rn/scroll-view {:justify-content :center - :align-items :center - :position :absolute - :padding-horizontal 10} - [quo2.tags/tags (merge @state - {:default-active 1 - :data [{:id 1 :tag-label "Music" :resource (resources/get-image :music)} - {:id 2 :tag-label "Lifestyle" :resource (resources/get-image :lifestyle)} - {:id 3 :tag-label "Podcasts" :resource (resources/get-image :podcasts)}]})]]]]))) + [rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!} + [rn/view {:padding-bottom 150 + :padding-top 60} + [rn/view {:flex 1} + [preview/customizer state descriptor]] + [rn/view {:flex 1 + :justify-content :center + :top 60} + (when (:blurred @state) + [rn/view {:flex 1} + [react/view {:flex-direction :row + :height 100} + [react/image {:source (resources/get-image :community-cover) + :style {:flex 1 + :height 100 + :border-radius 16}}]] + [react/view {:flex-direction :row + :height 100 + :position :absolute + :left 0 + :right 0} + [react/blur-view {:flex 1 + :style {:border-radius 16 + :height 100} + :blur-amount 40 + :overlay-color (colors/theme-colors + colors/white-opa-70 + colors/neutral-80-opa-80)}]]]) + [rn/scroll-view {:justify-content :center + :align-items :center + :position :absolute + :padding-horizontal 10} + [quo2.tags/tags (merge @state + {:default-active 1 + :data [{:id 1 :tag-label "Music" :resource (resources/get-image :music)} + {:id 2 :tag-label "Lifestyle" :resource (resources/get-image :lifestyle)} + {:id 3 :tag-label "Podcasts" :resource (resources/get-image :podcasts)}]})]]]]]))) (defn preview-filter-tags [] [rn/view {:flex 1 :background-color (colors/theme-colors @@ -83,4 +83,4 @@ [rn/flat-list {:flex 1 :keyboardShouldPersistTaps :always :header [cool-preview] - :key-fn str}]]) \ No newline at end of file + :key-fn str}]]) diff --git a/src/quo2/screens/tags/permission_tag.cljs b/src/quo2/screens/tags/permission_tag.cljs index a76dea9867..972bdddaf1 100644 --- a/src/quo2/screens/tags/permission_tag.cljs +++ b/src/quo2/screens/tags/permission_tag.cljs @@ -140,22 +140,22 @@ (defn cool-preview [] (let [state (reagent/atom {:size 32})] (fn [] - [rn/view {:margin-bottom 50 - :padding 16} - [rn/view {:flex 1} - [preview/customizer state descriptor]] - [rn/view {:padding-vertical 60 - :justify-content :center} - (when @state - (for [{:keys [tokens]} community-tokens] - ^{:key tokens} - [rn/view {:margin-top 20 - :align-self :flex-end} - [permission-tag/tag (merge @state - {:tokens tokens - :background-color (colors/theme-colors - colors/neutral-10 - colors/neutral-80)})]]))]]))) + [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 + :justify-content :center} + (when @state + (for [{:keys [tokens]} community-tokens] + ^{:key tokens} + [rn/view {:margin-top 20 + :align-self :flex-end} + [permission-tag/tag (merge @state + {:tokens tokens + :background-color (colors/theme-colors + colors/neutral-10 + colors/neutral-80)})]]))]]]))) (defn preview-permission-tag [] [rn/view {:background-color (colors/theme-colors @@ -165,4 +165,4 @@ [rn/flat-list {:flex 1 :keyboardShouldPersistTaps :always :header [cool-preview] - :key-fn str}]]) \ No newline at end of file + :key-fn str}]]) diff --git a/src/quo2/screens/tags/status_tags.cljs b/src/quo2/screens/tags/status_tags.cljs index 5fd2ae54e3..95f2f3a622 100644 --- a/src/quo2/screens/tags/status_tags.cljs +++ b/src/quo2/screens/tags/status_tags.cljs @@ -33,14 +33,14 @@ (= :positive (:status @state)) (assoc :status {:label "Positive" :type :positive}) (= :negative (:status @state)) (assoc :status {:label "Negative" :type :negative}) (= :pending (:status @state)) (assoc :status {:label "Pending" :type :pending}))] - [rn/view {:margin-bottom 50 - :padding 16} - [rn/view {:flex 1} - [preview/customizer state descriptor]] - [rn/view {:padding-vertical 60 - :flex-direction :row - :justify-content :center} - [quo2/status-tag props]]])))) + [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/status-tag props]]]])))) (defn preview-status-tags [] [rn/view {:background-color (colors/theme-colors colors/white diff --git a/src/quo2/screens/tags/token_tag.cljs b/src/quo2/screens/tags/token_tag.cljs index 6fd21be154..a0de757246 100644 --- a/src/quo2/screens/tags/token_tag.cljs +++ b/src/quo2/screens/tags/token_tag.cljs @@ -53,12 +53,12 @@ (defn cool-preview [] (let [state (reagent/atom {:size :big :value 10 :token "ETH" :is-required true :is-purchasable false})] (fn [] - [rn/view {:margin-bottom 50 - :padding 16} - [preview/customizer state descriptor] - [rn/view {:padding-vertical 60 - :align-items :center} - [quo2/token-tag (merge @state {:token-img-src (if (= (get-in @state [:token]) "ETH") eth-token snt-token)})]]]))) + [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/token-tag (merge @state {:token-img-src (if (= (get-in @state [:token]) "ETH") eth-token snt-token)})]]]]))) (defn preview-token-tag [] [rn/view {:background-color (colors/theme-colors colors/white colors/neutral-90) @@ -66,4 +66,4 @@ [rn/flat-list {:flex 1 :keyboardShouldPersistTaps :always :header [cool-preview] - :key-fn str}]]) \ No newline at end of file + :key-fn str}]]) diff --git a/src/quo2/screens/wallet/token_overview.cljs b/src/quo2/screens/wallet/token_overview.cljs index 7ac7ae8d68..5fa071e8cb 100644 --- a/src/quo2/screens/wallet/token_overview.cljs +++ b/src/quo2/screens/wallet/token_overview.cljs @@ -36,15 +36,16 @@ (defn cool-preview [] (let [state (reagent/atom {:token "ETH" :account-balance "3.00" :price "1.00" :percentage-change "-3.0" :currency :usd})] (fn [] - [rn/view {:margin-bottom 50 :padding 16} - [preview/customizer state descriptor] - [rn/view {:border :black - :border-width 1 - :align-items :center} - [quo2/token-balance (assoc @state :token-img-src (if (= (:token @state) "ETH") eth-token snt-token))] - [rn/view {:padding-vertical 25 - :align-items :center}] - [quo2/token-price (assoc @state :token-img-src (if (= (:token @state) "ETH") eth-token snt-token))]]]))) + [rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!} + [rn/view {:padding-bottom 150} + [preview/customizer state descriptor] + [rn/view {:border :black + :border-width 1 + :align-items :center} + [quo2/token-balance (assoc @state :token-img-src (if (= (:token @state) "ETH") eth-token snt-token))] + [rn/view {:padding-vertical 25 + :align-items :center}] + [quo2/token-price (assoc @state :token-img-src (if (= (:token @state) "ETH") eth-token snt-token))]]]]))) (defn preview-token-overview [] [rn/view {:background-color (colors/theme-colors colors/white colors/neutral-90)