Recent statuses pixel perfect must haves (+ popular bonus)

- fix bug where toolbar wasn't ready with zero statuses
- fix toolbar center and margin to top
- fix grey background missing
- fix top status text margin from the top of the card
- fix separation lines between statuses edge to edge
- margin with chat icon to bottom 12

Also apply same to popular hashtags for consistency

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

@@ -75,3 +75,35 @@
            (chat-button whisper-id))]
         (when show-separator?
           [react/view styles/separator])]])))
+
+;; NOTE(oskarth): Should possibly be merged with discover-list-item-full, but
+;; there are too many differences between preview item (main screen) and full
+;; screen, so safer to modify custom styles here without risking regressions.
+(defview discover-list-item-full [{:keys [message show-separator? current-account]}]
+  (letsubs [{contact-name       :name
+             contact-photo-path :photo-path} [:get-in [:contacts/contacts (:whisper-id message)]]]
+    (let [{:keys [name photo-path whisper-id message-id status]} message
+          {account-photo-path :photo-path
+           account-address    :public-key
+           account-name       :name}                             current-account
+          me?                                                    (= account-address whisper-id)]
+      [react/view
+       [react/view styles/discover-list-item-full ;; XXX: Custom style here
+        [view/status-view {:id     message-id
+                           :style  styles/discover-item-status-text
+                           :status status}]
+        [react/view styles/discover-list-item-second-row
+         [react/view styles/discover-list-item-name-container
+          [react/view styles/discover-list-item-avatar-container
+           [chat-icon/chat-icon
+            (display-image me? account-photo-path contact-photo-path photo-path whisper-id)
+            {:size 24}]]
+          [react/text {:style           styles/discover-list-item-name
+                       :font            :medium
+                       :number-of-lines 1}
+           (display-name me? account-name contact-name name whisper-id)]]
+
+         (when-not me?
+           (chat-button whisper-id))]]
+       (when show-separator?
+         [react/view styles/separator])])))

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

@@ -28,7 +28,7 @@
   (letsubs [current-account [:get-current-account]
             popular-tags    [:get-popular-tags 10]
             {:keys [discoveries]} [:get-popular-discoveries 10]] ;uses the tags passed via :discover-search-tags state
-    [react/view styles/discover-container
+    [react/view styles/all-recent-container
      [toolbar/toolbar2 {}
       toolbar/default-nav-back
       [toolbar/content-title (i18n/label :t/popular-tags)]]
@@ -39,6 +39,7 @@
         (let [discoveries (map-indexed vector discoveries)]
           (for [[i {:keys [message-id] :as message}] discoveries]
             ^{:key (str "message-hashtag-" message-id)}
-            [components/discover-list-item {:message         message
+            [components/discover-list-item-full
-                                            :show-separator? (not= (inc i) (count discoveries))
+             {:message         message
-                                            :current-account current-account}]))]]]]))
+              :show-separator? (not= (inc i) (count discoveries))
+              :current-account current-account}]))]]]]))

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

@@ -3,23 +3,25 @@
   (:require [status-im.components.react :as react]
             [status-im.ui.screens.discover.components.views :as components]
             [status-im.ui.screens.discover.styles :as styles]
-            [status-im.components.toolbar-new.view :as toolbar]))
+            [status-im.components.toolbar-new.view :as toolbar]
+            [status-im.i18n :as i18n]))
 
 (defview discover-all-recent []
   (letsubs [discoveries     [:get-recent-discoveries]
             tabs-hidden?    [:tabs-hidden?]
             current-account [:get-current-account]]
-    (when (seq discoveries)
+    [react/view styles/all-recent-container
-      [react/view styles/discover-container
+     [toolbar/toolbar2 {}
-       [toolbar/toolbar2 {}
+      toolbar/default-nav-back
-        toolbar/default-nav-back
+      [toolbar/content-title (i18n/label :t/recent)]]
-        [react/view {} [react/text {} "All recent"]]]
+     (when (seq discoveries)
        [react/scroll-view (styles/list-container tabs-hidden?)
         [react/view styles/status-list-outer
          [react/view styles/status-list-inner
           (let [discoveries (map-indexed vector discoveries)]
             (for [[i {:keys [message-id] :as message}] discoveries]
               ^{:key (str "message-recent-" message-id)}
-              [components/discover-list-item {:message         message
+               [components/discover-list-item-full
-                                              :show-separator? (not= (inc i) (count discoveries))
+                {:message         message
-                                              :current-account current-account}]))]]]])))
+                 :show-separator? (not= (inc i) (count discoveries))
+                 :current-account current-account}]))]]])]))

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

@@ -58,21 +58,28 @@
    :color       styles/color-black
    :font-size   14})
 
+;; TODO(oskarth): These rules should be pulled out into more custom styles, not
+;; generic enough for discover-list-item
 (def discover-list-item
   {:flex-direction :column
    :padding-bottom 16
    :margin-right   10
    :top            1})
 
+(def discover-list-item-full
+  {:flex-direction    :column
+   :margin-top        16
+   :margin-horizontal 16
+   :margin-bottom     12})
+
+;; TODO(oskarth): Style too specific for full view, refactor
 (def discover-list-item-second-row
   {:flex            1
    :flex-direction  :row
    :align-items     :center
    :justify-content :space-between
-   :margin-bottom   5
    :padding-top     25})
 
-
 (defstyle discover-list-item-avatar-container
   {:flex-direction :column})
 
@@ -114,7 +121,7 @@
 
 (def separator
   {:background-color styles/color-gray11
-   :height           2
+   :height           4
    :margin-top       2
    :margin-bottom    2})
 
@@ -166,7 +173,7 @@
 
 (def status-list-inner
   {:background-color :white
-   :padding-left     16})
+   :margin-top       4})
 
 ;; All dapps
 
@@ -432,3 +439,8 @@
 (def empty-section-body-text
   {:margin-top 2
    :font-size  14})
+
+;; TODO(oskarth): Copy of existing style, generalize - discover-container overloaded
+(def all-recent-container all-dapps-container)
+(def all-popular-container all-dapps-container)
+