chore: add transparent outline to notification in top-nav component (#17171)

src/quo2/components/counter/counter/style.cljs

@@ -12,8 +12,7 @@
 
 (defn container
   [{:keys [type label container-style customization-color theme value max-value]}]
-  (let [label-length (count label)
+  (let [width (case (count label)
-        width        (case label-length
                 1 16
                 2 20
                 28)]
@@ -22,8 +21,6 @@
               :justify-content :center
               :border-radius   6
               :width           width
-              :margin-vertical   2
-              :margin-horizontal (if (= label-length 1) 2 0)
               :height          16}
              container-style)
       (= type :outline)

src/quo2/components/list_items/channel/style.cljs

@@ -44,3 +44,7 @@
   {:margin-horizontal 12
    :color             (get-label-color notification theme)
    :flex              1})
+
+(defn counter
+  [mentions]
+  {:margin-horizontal (if (= (count (str mentions)) 1) 2 0)})

src/quo2/components/list_items/channel/view.cljs

@@ -51,7 +51,9 @@
          (condp = notification
            :mute         [quo2.icons/icon :i/muted
                           {:color (style/mute-notification-icon-color theme)}]
-           :mention      [counter/view {:customization-color customization-color}
+           :mention      [counter/view
+                          {:customization-color customization-color
+                           :container-style     (style/counter mentions-count)}
                           mentions-count]
            :notification [quo2.icons/icon :i/notification
                           {:color               (style/mute-notification-icon-color theme)

src/quo2/components/navigation/top_nav/view.cljs

@@ -4,9 +4,34 @@
             [quo2.components.avatars.user-avatar.view :as user-avatar]
             [quo2.components.counter.counter.view :as counter]
             [quo2.components.navigation.top-nav.style :as style]
+            [react-native.hole-view :as hole-view]
             [quo2.theme :as quo.theme]
             [quo2.components.common.notification-dot.view :as notification-dot]))
 
+(def notification-dot-hole
+  [{:x            37
+    :y            -2
+    :width        9
+    :height       9
+    :borderRadius 4}])
+
+(defn unread-counter-hole
+  [notification-count]
+  (let [x     (case (count (str notification-count))
+                (1 2) 33
+                29)
+        width (case (count (str notification-count))
+                1 16
+                2 20
+                28)]
+    (if (pos? (js/Number notification-count))
+      [{:x            x
+        :y            -5
+        :width        width
+        :height       16
+        :borderRadius 6}]
+      [])))
+
 (defn- get-button-common-props
   [{:keys [jump-to? theme blur?]}]
   {:icon-only?      true
@@ -47,7 +72,7 @@
                                :notification-count  notification-count
                                :max-value           max-unread-notifications
                                :customization-color customization-color}]
-    nil))
+    [:<>]))
 
 (defn- left-section
   [{:keys [avatar-props on-press customization-color]}]
@@ -65,6 +90,8 @@
   [{:keys [theme
            jump-to?
            blur?
+           notification
+           notification-count
            activity-center-on-press
            scan-on-press
            qr-code-on-press
@@ -95,12 +122,18 @@
               :on-press            qr-code-on-press})
       :i/qr-code]
      [rn/view
+      [hole-view/hole-view
+       {:key   (hash (str notification notification-count))
+        :holes (case notification
+                 (:seen :notification)    notification-dot-hole
+                 (:mention :mention-seen) (unread-counter-hole notification-count)
+                 [])}
        [button/button
         (merge button-common-props
                {:accessibility-label :open-activity-center-button
                 :on-press            activity-center-on-press})
         :i/activity-center]]
-     [notification-highlight props]]))
+      [notification-highlight props]]]))
 
 (defn view-internal
   [{:keys [avatar-on-press avatar-props customization-color container-style] :as props}]

src/status_im2/contexts/quo_preview/navigation/top_nav.cljs

@@ -10,12 +10,9 @@
 (def descriptor
   [{:key     :notification
     :type    :select
-    :options [{:key   :mention
+    :options [{:key :mention}
-               :value "Mention"}
+              {:key :notification}
-              {:key   :notification
+              {:key :seen}]}
-               :value "Notification"}
-              {:key   :seen
-               :value "Seen"}]}
    {:key  :blur?
     :type :boolean}
    {:key  :jump-to?