status-im
/
status-react
mirror of https://github.com/status-im/status-react.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

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>
This commit is contained in:
Gheorghe Pinzaru 2020-01-02 14:15:04 +03:00 committed by Andrey Shovkoplyas
parent 43c6d7d6c7
commit c3f7f78d34
No known key found for this signature in database
GPG Key ID: EAAB7C8622D860A4
2 changed files with 12 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
src/status_im/ui/components/badge.cljs
View File

@ -9,9 +9,12 @@
{:height 18 :border-radius 9 :min-width 18 :padding-horizontal 6} {:height 18 :border-radius 9 :min-width 18 :padding-horizontal 6}
{:height 22 :border-radius 11 :min-width 22 :padding-horizontal 8}) {:height 22 :border-radius 11 :min-width 22 :padding-horizontal 8})
{:background-color colors/blue {:background-color colors/blue
:justify-content :center :justify-content :center
:align-items :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?]] (defn message-counter [value & [small?]]
[badge [badge

8
src/status_im/ui/components/tabbar/styles.cljs
View File

@ -46,9 +46,13 @@
:top 0 :top 0
:position :absolute}) :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 (def message-counter
{:right -10 {:left message-counter-left
:top 0 :bottom 6
:position :absolute}) :position :absolute})
(def touchable-container (def touchable-container