Update empty state (#14916)

Fixes #14899

Updates the empty states according to latest design in Figma.

Author: ilmotta

src/status_im2/contexts/activity_center/style.cljs

@@ -47,4 +47,14 @@
    :padding-vertical 12})
 
 (def empty-title
-  {:padding-bottom 2})
+  {:padding-bottom 2
+   :color          colors/white})
+
+(def empty-subtitle
+  {:color colors/white})
+
+(def empty-rectangle-placeholder
+  {:width            120
+   :height           120
+   :background-color colors/danger-50
+   :margin-bottom    20})

src/status_im2/contexts/activity_center/view.cljs

@@ -29,17 +29,24 @@
 
 (defn empty-tab
   []
-  [rn/view
-   {:style               style/empty-container
-    :accessibility-label :empty-notifications}
-   [quo/icon :i/placeholder]
-   [quo/text
-    {:size   :paragraph-1
-     :style  style/empty-title
-     :weight :semi-bold}
-    (i18n/label :t/empty-notifications-title)]
-   [quo/text {:size :paragraph-2}
-    (i18n/label :t/empty-notifications-subtitle)]])
+  (let [filter-status (rf/sub [:activity-center/filter-status])]
+    [rn/view
+     {:style               style/empty-container
+      :accessibility-label :empty-notifications}
+     [rn/view {:style style/empty-rectangle-placeholder}]
+     [quo/text
+      {:size   :paragraph-1
+       :style  style/empty-title
+       :weight :semi-bold}
+      (i18n/label (if (= :unread filter-status)
+                    :t/empty-notifications-title-unread
+                    :t/empty-notifications-title-read))]
+     [quo/text
+      {:size  :paragraph-2
+       :style style/empty-subtitle}
+      (i18n/label (if (= :unread filter-status)
+                    :t/empty-notifications-subtitle-unread
+                    :t/empty-notifications-subtitle-read))]]))
 
 (defn tabs
   []

translations/en.json

@@ -1909,8 +1909,10 @@
     "bold": "Bold",
     "italic": "Italic",
     "strikethrough": "Strikethrough",
-    "empty-notifications-title": "No notifications",
-    "empty-notifications-subtitle": "Your notifications will be here",
+    "empty-notifications-title-unread": "You're up to date",
+    "empty-notifications-subtitle-unread": "Unread notifications will be here",
+    "empty-notifications-title-read": "No notifications",
+    "empty-notifications-subtitle-read": "Your notifications will be here",
     "add-text": "Add text",
     "send": "Send",
     "unmute-group": "Unmute group",