fix #2119 - discover chat button formatting, hashtag color in status

src/status_im/components/status_view/view.cljs

@@ -4,11 +4,11 @@
             [clojure.string :as str]
             [status-im.components.react :refer [view text]]
             [status-im.utils.platform :refer [platform-specific]]
-            [status-im.components.styles :refer [color-blue color-black]]
+            [status-im.components.styles :refer [color-blue color-black color-blue4-faded]]
             [status-im.utils.utils :refer [hash-tag?]]))
 
 (defn tag-view [tag]
-  [text {:style {:color color-blue}
+  [text {:style {:color color-blue4-faded}
          :font :medium}
    (str tag " ")])
 

src/status_im/components/styles.cljs

@@ -7,6 +7,7 @@
 (def color-blue2 "#5b6dee")
 (def color-blue3 "#424fae")
 (def color-blue4 "#4360df")
+(def color-blue4-faded "rgba(67,96,222,0.87)")
 (def color-blue4-transparent "rgba(67, 96, 223, 0.10)")
 (def color-blue5 "#3c56c8")
 (def color-blue6 "#3745AF")

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

@@ -38,6 +38,14 @@
     (not (str/blank? photo-path)) photo-path
     :else (identicon/identicon whisper-id)))
 
+(defn chat-button [whisper-id]
+  [react/touchable-highlight {:on-press #(re-frame/dispatch [:start-chat whisper-id])}
+   [react/view styles/chat-button-container
+    [react/view styles/chat-button-inner
+      [vector-icons/icon :icons/chats {:color :active}]
+      [react/text {:style      styles/chat-button-text
+                   :uppercase? (:uppercase? styles/chat-button-text-case)} (i18n/label :t/chat)]]]])
+
 (defview discover-list-item [{:keys [message show-separator? current-account]}]
   (letsubs [{contact-name       :name
              contact-photo-path :photo-path} [:get-in [:contacts/contacts (:whisper-id message)]]]
@@ -56,16 +64,13 @@
           [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 20}]]
+            {: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?
-           [react/touchable-highlight {:on-press #(re-frame/dispatch [:start-chat whisper-id])}
+           (chat-button whisper-id))]
-            [react/view styles/popular-list-chat-action
-             [vector-icons/icon :icons/chats {:color "rgb(110, 0, 228)"}]
-             [react/text {:style styles/popular-list-chat-action-text} (i18n/label :t/chat)]]])]
         (when show-separator?
           [react/view styles/separator])]])))

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

@@ -132,14 +132,31 @@
                       :margin-bottom 4
                       :margin-right  2}})
 
-(def popular-list-chat-action
+(defstyle chat-button-container
-  {:background-color styles/color-light-blue7
+  {:justify-content  :center
-   :flex-direction   :row
+   :align-items      :center
-   :border-radius    5
+   :background-color styles/color-blue4-transparent
-   :padding          4})
+   :ios              {:border-radius 8}
+   :android          {:border-radius 4}})
 
-(def popular-list-chat-action-text
+(defstyle chat-button-inner
-  {:color styles/color-dark-blue-4})
+  {:flex-direction :row
+   :padding-top    7
+   :padding-left   7
+   :padding-right  8
+   :padding-bottom 5})
+
+;; NOTE(goranjovic): Another hacky use of defstyle to get
+;; platform specific styles in place where they belong
+(defstyle chat-button-text-case
+  {:ios     {:uppercase? false}
+   :android {:uppercase? true}})
+
+(defstyle chat-button-text
+  {:color   styles/color-blue4
+   :ios     {:font-size 15}
+   :android {:font-size   14
+             :font-weight :bold}})
 
 ;; discover_recent