diff --git a/src/status_im/ui/screens/discover/all_dapps/views.cljs b/src/status_im/ui/screens/discover/all_dapps/views.cljs index 17f007de1b..c009af2124 100644 --- a/src/status_im/ui/screens/discover/all_dapps/views.cljs +++ b/src/status_im/ui/screens/discover/all_dapps/views.cljs @@ -20,15 +20,12 @@ [react/view styles/dapps-list-item-second-row [react/view styles/dapps-list-item-name-container [react/view styles/dapps-list-item-avatar-container - [react/view (chat-icon/contact-icon-contacts-tab dapp)]] + [react/view [chat-icon/contact-icon-view dapp {:size 80}]]] [react/text {:style styles/dapps-list-item-name :font :medium :number-of-lines 1} name]]]]]) -;; TODO(oskarth): Carousel task, possibly different subcomponent -(def dapp-item render-dapp) - ;; TODO(oskarth): Move this to top level discover ns (defn preview [dapps] [react/view styles/dapp-preview-container @@ -38,11 +35,12 @@ :t/all #(re-frame/dispatch [:navigate-to :discover-all-dapps])] (if (seq dapps) - ;; TODO(oskarth): Too wide margins bug - [list/flat-list {:data (vals dapps) - :render-fn render-dapp - :horizontal true - :content-container-style styles/all-dapps-flat-list}] + [list/flat-list {:data (vals dapps) + :render-fn render-dapp + :horizontal true + :separator? false + :shows-horizontal-scroll-indicator false + :content-container-style styles/dapp-preview-flat-list}] [react/text (i18n/label :t/none)])]) (defview main [] diff --git a/src/status_im/ui/screens/discover/styles.cljs b/src/status_im/ui/screens/discover/styles.cljs index 3faa203f65..2e001bc0de 100644 --- a/src/status_im/ui/screens/discover/styles.cljs +++ b/src/status_im/ui/screens/discover/styles.cljs @@ -165,9 +165,11 @@ :background-color styles/color-white}) (def all-dapps-flat-list-item - {:margin 10 - :width 100 - :height 100}) + {:margin 10 + :width 100 + :height 140 + :justify-content :center + :align-items :center}) (def dapps-list-item-second-row {:flex 1 @@ -200,15 +202,13 @@ :margin-top 16 :margin-bottom 4}) -(def dapp-preview-content - {:border-radius 4 - :padding-top 4 - :padding-left 4 - :margin-top 2 - :margin-bottom 4 - :margin-right 2 - :background-color styles/color-white - :size 10}) +(def dapp-preview-flat-list + {:justify-content :center + :flex-direction :row + :flex-wrap :wrap + :margin-left 8 + :margin-vertical 0 + :background-color styles/color-white}) ;; Discover tag @@ -287,7 +287,7 @@ (def public-chats-item-container {:flex-direction :row - :padding 3}) + :padding 16}) (def public-chats-icon-width-ratio 0.15)