Top bar UI (design review) (#16820)

* Top bar UI (design review)

* Lint fix

* Show `Online`/`Offline` label only for non-group chats

* Fixed formatting

src/status_im2/contexts/chat/messages/navigation/style.cljs

@@ -80,7 +80,7 @@
 (def header-content-container
   {:flex-direction :row
    :align-items    :center
-   :margin-left    8
+   :margin-left    12
    :margin-right   8
    :margin-top     -4
    :height         40})
@@ -95,6 +95,6 @@
   []
   {:color (colors/theme-colors colors/black colors/white)})
 
-(defn header-online
+(defn header-status
   []
   {:color (colors/theme-colors colors/neutral-80-opa-50 colors/white-opa-50)})

src/status_im2/contexts/chat/messages/navigation/view.cljs

@@ -93,13 +93,14 @@
             :number-of-lines 1
             :style           (style/header-display-name)}
            display-name]]
-         (when online?
+         (when-not group-chat
            [quo/text
             {:number-of-lines 1
-             :weight          :regular
+             :weight          :medium
              :size            :paragraph-2
-             :style           (style/header-online)}
-            (i18n/label :t/online)])]]]
+             :style           (style/header-status)}
+            (i18n/label
+             (if online? :t/online :t/offline))])]]]
       [rn/touchable-opacity
        {:active-opacity      1
         :style               (style/button-container {:margin-right 20})