Discover: main screen pixel perfect progression

- Fix icon size and remove badge numbers
- Preview: tighten up margins
- Hide horizontal scrollbar
- Padding for public chats

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)
-     [list/flat-list {:data                    (vals dapps)
+                      :render-fn                         render-dapp
-                      :render-fn               render-dapp
+                      :horizontal                        true
-                      :horizontal              true
+                      :separator?                        false
-                      :content-container-style styles/all-dapps-flat-list}]
+                      :shows-horizontal-scroll-indicator false
+                      :content-container-style           styles/dapp-preview-flat-list}]
      [react/text (i18n/label :t/none)])])
 
 (defview main []

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
+  {:margin          10
-   :width  100
+   :width           100
-   :height 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
+(def dapp-preview-flat-list
-  {:border-radius    4
+  {:justify-content  :center
-   :padding-top      4
+   :flex-direction   :row
-   :padding-left     4
+   :flex-wrap        :wrap
-   :margin-top       2
+   :margin-left      8
-   :margin-bottom    4
+   :margin-vertical  0
-   :margin-right     2
+   :background-color styles/color-white})
-   :background-color styles/color-white
-   :size             10})
 
 ;; 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)