Increase number on 'unread' messages indicator to +99

Signed-off-by: yenda <eric@status.im>

src/status_im/ui/components/badge.cljs

@@ -1,6 +1,7 @@
 (ns status-im.ui.components.badge
   (:require [status-im.ui.components.react :as react]
-            [status-im.ui.components.colors :as colors]))
+            [status-im.ui.components.colors :as colors]
+            [status-im.i18n :as i18n]))
 
 (defn badge [label & [small?]]
   [react/view (merge
@@ -10,4 +11,11 @@
                {:background-color colors/blue
                 :justify-content :center
                 :align-items :center})
-   [react/text {:style {:typography :caption :color colors/white}} label]])
+   [react/text {:style {:typography :caption :color colors/white}} label]])
+
+(defn message-counter [value & [small?]]
+  [badge
+   (if (> value 99)
+     (i18n/label :t/counter-99-plus)
+     value)
+   small?])

src/status_im/ui/components/tabbar/core.cljs

@@ -7,6 +7,7 @@
    [status-im.utils.platform :as platform]
    [status-im.ui.components.icons.vector-icons :as vector-icons]
    [status-im.ui.components.common.common :as components.common]
+   [status-im.ui.components.badge :as badge]
    [status-im.i18n :as i18n]
    [re-frame.core :as re-frame]))
 
@@ -67,8 +68,10 @@
        {:style tabs.styles/icon-container}
        [vector-icons/icon icon (tabs.styles/icon active?)]
        (when (pos? (if count @count 0))
-         [react/view tabs.styles/counter
+         [react/view {:style (if (= nav-stack :chat-stack)
-          [components.common/counter @count]])]
+                               tabs.styles/message-counter
+                               tabs.styles/counter)}
+          [badge/message-counter @count true]])]
       (when-not platform/desktop?
         [react/view {:style tabs.styles/tab-title-container}
          [react/text {:style (tabs.styles/new-tab-title active?)}

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

@@ -46,6 +46,11 @@
    :top      0
    :position :absolute})
 
+(def message-counter
+  {:right    -10
+   :top      0
+   :position :absolute})
+
 (def touchable-container
   {:flex   1
    :height tabs-height})

src/status_im/ui/screens/home/views/inner_item.cljs

@@ -8,6 +8,7 @@
             [status-im.ui.components.chat-icon.screen :as chat-icon.screen]
             [status-im.ui.components.common.common :as components.common]
             [status-im.ui.components.list-item.views :as list-item]
+            [status-im.ui.components.badge :as badge]
             [status-im.ui.components.react :as react]
             [status-im.ui.screens.home.styles :as styles]
             [status-im.utils.contenthash :as contenthash]
@@ -64,9 +65,7 @@
 (defview unviewed-indicator [chat-id]
   (letsubs [unviewed-messages-count [:chats/unviewed-messages-count chat-id]]
     (when (pos? unviewed-messages-count)
-      [components.common/counter {:size                22
+      [badge/message-counter unviewed-messages-count])))
-                                  :accessibility-label :unread-messages-count-text}
-       unviewed-messages-count])))
 
 (defn home-list-item [[_ home-item]]
   (let [{:keys

translations/en.json

@@ -172,6 +172,7 @@
 	"copy-transaction-hash": "Copy transaction ID",
 	"cost-fee": "Cost/Fee",
 	"counter-9-plus": "9+",
+	"counter-99-plus": "99+",
 	"create": "Create",
 	"create-a-pin": "Create a 6-digit passcode",
 	"create-group-chat": "Create group chat",