From c3f7f78d34975939305a506287aafea37c8cf2d0 Mon Sep 17 00:00:00 2001 From: Gheorghe Pinzaru Date: Thu, 2 Jan 2020 14:15:04 +0300 Subject: [PATCH] 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 Signed-off-by: Andrey Shovkoplyas --- src/status_im/ui/components/badge.cljs | 9 ++++++--- src/status_im/ui/components/tabbar/styles.cljs | 8 ++++++-- 2 files changed, 12 insertions(+), 5 deletions(-) diff --git a/src/status_im/ui/components/badge.cljs b/src/status_im/ui/components/badge.cljs index 6f848add44..c45c9e1f75 100644 --- a/src/status_im/ui/components/badge.cljs +++ b/src/status_im/ui/components/badge.cljs @@ -9,9 +9,12 @@ {:height 18 :border-radius 9 :min-width 18 :padding-horizontal 6} {:height 22 :border-radius 11 :min-width 22 :padding-horizontal 8}) {:background-color colors/blue - :justify-content :center - :align-items :center}) - [react/text {:style {:typography :caption :color colors/white}} label]]) + :justify-content :center + :align-items :center}) + [react/text {:style {:typography :caption + :font-weight "500" + :color colors/white}} + label]]) (defn message-counter [value & [small?]] [badge diff --git a/src/status_im/ui/components/tabbar/styles.cljs b/src/status_im/ui/components/tabbar/styles.cljs index e37fca6778..402cd109e6 100644 --- a/src/status_im/ui/components/tabbar/styles.cljs +++ b/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