Change position of badge as per design spec

Move tabbar notification badge position to left and bottom. closes #9436

Update badge font weight as per spec

All badges in the specification are Medium (500) weight

Signed-off-by: Gheorghe Pinzaru <feross95@gmail.com>
Signed-off-by: Andrey Shovkoplyas <motor4ik@gmail.com>

src/status_im/ui/components/badge.cljs

@@ -11,7 +11,10 @@
                {:background-color colors/blue
                 :justify-content  :center
                 :align-items      :center})
-   [react/text {:style {:typography :caption :color colors/white}} label]])
+   [react/text {:style {:typography  :caption
+                        :font-weight "500"
+                        :color       colors/white}}
+    label]])
 
 (defn message-counter [value & [small?]]
   [badge

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

@@ -46,9 +46,13 @@
    :top      0
    :position :absolute})
 
+;; NOTE: Extra padding to allow badge width to be up to 42 (in case of 99+)
+;; 42 Max allowed width, 24 icon width as per spec, 16 left pos as per spec.
+(def ^:private message-counter-left (+ (/ (- 42 24) 2) 16))
+
 (def message-counter
-  {:right    -10
-   :top      0
+  {:left     message-counter-left
+   :bottom   6
    :position :absolute})
 
 (def touchable-container