Discover: App dapps grid styling and tweaks

- Use flat-list and 3 column layout for grid
- Get rid of platform ns dependency
- Minor refactor: "wrap" -> :wrap, backgroundColor -> background-color

src/status_im/ui/screens/discover/all_dapps/views.cljs

@@ -3,30 +3,27 @@
   (:require [cljs.pprint :as pprint]
             [re-frame.core :as re-frame]
             [status-im.components.react :as react]
+            [status-im.components.list.views :as list]
             [status-im.components.chat-icon.screen :as chat-icon]
             [status-im.components.carousel.carousel :as carousel]
             [status-im.ui.screens.discover.components.views :as discover-components]
             [status-im.ui.screens.discover.styles :as styles]
-            [status-im.utils.platform :as platform]
             [status-im.i18n :as i18n]
             [status-im.components.toolbar-new.view :as toolbar]))
 
-(defn dapp-item [dapp]
+(defn render-dapp [{:keys [name photo-path dapp?] :as dapp}]
-  (let [{:keys [name photo-path dapp?]} dapp
+    [react/view {:style styles/all-dapps-flat-list-item}
-        ;; TODO(oskarth): Refactor this to be in discover styles, just uppercase
-        item-style (get-in platform/platform-specific [:component-styles :discover :item])]
-    [react/view
-     [react/view styles/dapps-list-item
       [react/view styles/dapps-list-item-second-row
-      [react/view styles/dapps-list-item-name-container
+       [react/view styles/dapps-list-item-name-container
-       [react/view (merge styles/dapps-list-item-avatar-container
+        [react/view styles/dapps-list-item-avatar-container
-                          (:icon item-style))
+         [react/view (chat-icon/contact-icon-contacts-tab dapp)]]
-        ;; TODO(oskarth): Get rid of badge on icon
+        [react/text {:style           styles/dapps-list-item-name
-        [react/view (chat-icon/contact-icon-contacts-tab dapp)]]
+                     :font            :medium
-       [react/text {:style           styles/dapps-list-item-name
+                     :number-of-lines 1}
-                    :font            :medium
+         name]]]])
-                    :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]
@@ -50,15 +47,12 @@
   (letsubs [all-dapps    [:get-all-dapps]
             tabs-hidden? [:tabs-hidden?]]
     (when (seq all-dapps)
-      [react/view styles/discover-container
+      [react/view styles/all-dapps-container
        [toolbar/toolbar2 {}
         toolbar/default-nav-back
-        ;; TODO(oskarth): Lowercase for some reason
+        ;; TODO(oskarth): Lowercase and wrong style for some reason
-        [react/view [react/text {} :t/dapps]]]
+        [react/view [react/text :t/dapps]]]
-       [react/scroll-view (styles/list-container tabs-hidden?)
+       [list/flat-list {:data                    (vals all-dapps)
-        [react/view styles/all-dapps-container
+                        :render-fn               render-dapp
-         [react/view styles/all-dapps-list
+                        :num-columns             3
-          (for [[_ dapp] all-dapps]
+                        :content-container-style styles/all-dapps-flat-list}]])))
-            ^{:key (str (:name dapp))}
-            [dapp-item dapp])]]]])))
-

src/status_im/ui/screens/discover/styles.cljs

@@ -131,26 +131,19 @@
 
 (def all-dapps-container
   {:flex             1
-   :flex-direction   :row
-   :flex-grow        1
    :background-color toolbar-background2})
 
-(def all-dapps-list
+(def all-dapps-flat-list
-  {:background-color styles/color-white
+  {:justify-content  :center
-   :flex             1
+   :flex-direction   :row
-   :flex-wrap        "wrap"
+   :flex-wrap        :wrap
-   :padding          4
+   :margin-top       8
-   :margin           4
+   :background-color styles/color-white})
-   :flex-direction   :row})
 
-(def dapps-list-item
+(def all-dapps-flat-list-item
-  {:flex-direction   :column
+  {:margin 10
-   ;; TODO(oskarth): Not straight columns and rows
+   :width  100
-   ;; :border-radius 4
+   :height 100})
-   ;; :border-width  4
-   ;; :border-color  "red"
-   :margin           4
-   :padding          4})
 
 (def dapps-list-item-second-row
   {:flex    1
@@ -173,7 +166,10 @@
   {:flex-direction :column
    :padding        4
    :margin         4
-   :align-items    :center})
+   :align-items    :center
+   :ios            {:padding-top     0
+                    :bottom          -4
+                    :justify-content :flex-end}})
 
 (def dapp-preview-container
   {:background-color styles/color-white
@@ -225,8 +221,8 @@
    :height 17})
 
 (def discover-container
-  {:flex            1
+  {:flex             1
-   :backgroundColor styles/color-white})
+   :background-color styles/color-white})
 
 (def list-container
   {:flex 1})