[fix] make unread message badge touchable

Unread message badge is not touchable which reduces the surface area
that can be used to go back from a chat when user has unread messages

This gives user the impression that he needs to tap many times to go
back and that the UI lags because a smaller area is touchable when
users have unread messages

Signed-off-by: Eric Dvorsak <eric@dvorsak.fr>

src/status_im/ui/components/chat_icon/screen.cljs

@@ -149,7 +149,7 @@
 
 (defn dapp-icon-browser [contact size]
   [contact-icon-view contact
-   {:container              {:width size :height size}
+   {:container              {:width size :height size :top 3 :margin-left 2}
     :online-view-wrapper    styles/online-view-wrapper
     :online-view            styles/online-view
     :online-dot-left        styles/online-dot-left

src/status_im/ui/components/toolbar/styles.cljs

@@ -59,9 +59,9 @@
   {:width  24
    :height 24})
 
-(def nav-item-button
-  {:padding-vertical   16
-   :padding-horizontal 13})
+(defn nav-item-button [unread-messages?]
+  {:margin-left  13
+   :margin-right (if unread-messages? -5 13)})
 
 (defstyle item
   {:ios     {:padding-horizontal 12
@@ -88,6 +88,4 @@
 (def ios-content-item {:position :absolute :right 40 :left 40})
 
 (def counter-container
-  {:position :absolute
-   :top      19
-   :right    0})
+  {:top 3})

src/status_im/ui/components/toolbar/view.cljs

@@ -24,17 +24,18 @@
     item]])
 
 (defn nav-button
-  [{:keys [icon icon-opts] :as props}]
-  [nav-item (merge {:style styles/nav-item-button} props)
+  [{:keys [icon icon-opts unread-messages?] :as props}]
+  [nav-item (merge {:style (styles/nav-item-button unread-messages?)} props)
    [vector-icons/icon icon icon-opts]])
 
 (defview nav-button-with-count [props]
   (letsubs [unread-messages-number [:get-chats-unread-messages-number]]
-    [react/view
-     [nav-button props]
-     (when (pos? unread-messages-number)
-       [react/view styles/counter-container
-        [components.common/counter unread-messages-number]])]))
+    (let [unread-messages? (pos? unread-messages-number)]
+      [react/view {:flex-direction :row}
+       [nav-button (assoc props :unread-messages? unread-messages?)]
+       (when unread-messages?
+         [nav-item (merge {:style styles/counter-container} props)
+          [components.common/counter unread-messages-number]])])))
 
 (defn nav-text
   ([text] (nav-text nil text))

src/status_im/ui/screens/browser/views.cljs

@@ -82,15 +82,14 @@
                   {:keys [can-go-back? can-go-forward?]} [:get :browser/options]
                   extra-js [:web-view-extra-js]
                   rpc-url [:get :rpc-url]
-                  unread-messages-number [:get-chats-unread-messages-number]
                   network-id [:get-network-id]]
     [react/keyboard-avoiding-view styles/browser
      [status-bar/status-bar]
      [toolbar.view/toolbar {}
       (toolbar.view/nav-back-count)
       (if dapp?
-        [toolbar-content-dapp contact unread-messages-number]
-        [toolbar-content browser unread-messages-number])]
+        [toolbar-content-dapp contact]
+        [toolbar-content browser])]
      (if url
        [components.webview-bridge/webview-bridge
         {:ref                                   #(reset! webview %)