Tweak UI for contact request notifications (#19337)

* fix: ensure contact-request notifications are displayed as notifications

* fix: provide context-theme for notification sub-components

* fix: adjust font weight for notification text

* fix: adjust alignment of user-avatar inside a notification with a header and body

* tidy: rename override-theme to theme inside notifications

* fix: update notifications component to use `user` prop instead of `avatar`

* tweak: adapt notification to avatar to vertically center when only displaying header or title

* fix: use title font-size for contact-request-accepted notification

* fix: allow for custom avatar component prop in quo notification component

* fix: ensure we use the correct font-weight for contact-request-accepted notification

* tidy: fix formatting

src/quo/components/notifications/notification/style.cljs

@@ -26,14 +26,20 @@
     :padding-vertical   8
     :padding-horizontal 12}))
 
-(def right-side-container {:flex 1})
+(def right-side-container
+  {:flex            1
+   :justify-content :center})
 
 (defn title
-  [override-theme]
-  {:color (colors/theme-colors colors/white colors/neutral-100 override-theme)})
+  [theme]
+  {:color (colors/theme-colors colors/white colors/neutral-100 theme)})
 
 (defn text
-  [override-theme]
-  {:color (colors/theme-colors colors/white colors/neutral-100 override-theme)})
+  [theme]
+  {:color (colors/theme-colors colors/white colors/neutral-100 theme)})
 
-(def avatar-container {:margin-right 8 :margin-top 4})
+(defn avatar-container
+  [{:keys [multiline?]}]
+  {:margin-right 8
+   :align-self   (when-not multiline? :center)
+   :margin-top   (if multiline? 4 0)})

src/quo/components/notifications/notification/view.cljs

@@ -1,7 +1,9 @@
 (ns quo.components.notifications.notification.view
   (:require
+    [quo.components.avatars.user-avatar.view :as user-avatar]
     [quo.components.markdown.text :as text]
     [quo.components.notifications.notification.style :as style]
+    [quo.theme]
     [react-native.blur :as blur]
     [react-native.core :as rn]))
 
@@ -15,33 +17,33 @@
   [into [rn/view {:accessibility-label :notification-body}] children])
 
 (defn avatar-container
-  [& children]
+  [{:keys [multiline?]} & children]
   [into
    [rn/view
-    {:style               style/avatar-container
+    {:style               (style/avatar-container {:multiline? multiline?})
      :accessibility-label :notification-avatar}]
    children])
 
 (defn title
-  ([text weight] (title text weight nil))
-  ([text weight override-theme]
+  ([{:keys [text weight theme multiline?]}]
    [text/text
     {:size                :paragraph-1
-     :weight              (or weight :semi-bold)
-     :style               (style/title override-theme)
+     :weight              (or weight (if multiline? :semi-bold :medium))
+     :style               (style/title theme)
      :accessibility-label :notification-title}
     text]))
 
 (defn message
-  [text override-theme]
+  [text theme]
   [text/text
    {:size                :paragraph-2
-    :style               (style/text override-theme)
+    :weight              :medium
+    :style               (style/text theme)
     :accessibility-label :notification-content}
    text])
 
 (defn- notification-container
-  [{:keys [avatar header body container-style override-theme]}]
+  [{:keys [avatar header body container-style theme]}]
   [rn/view
    {:style (merge style/box-container container-style)}
    [blur/view
@@ -51,7 +53,7 @@
      :blur-type     :transparent
      :overlay-color :transparent}]
    [rn/view
-    {:style (style/content-container override-theme)}
+    {:style (style/content-container theme)}
     avatar
     [rn/view
      {:style style/right-side-container}
@@ -59,17 +61,27 @@
      body]]])
 
 (defn notification
-  [{title-text :title :keys [avatar header title-weight text body container-style override-theme]}]
-  (let [header (or header
-                   (when title-text
-                     [title title-text title-weight override-theme]))
-        header (when header [header-container header])
-        body   (or body (when text [message text override-theme]))
-        body   (when body [body-container body])
-        avatar (when avatar [avatar-container avatar])]
-    [notification-container
-     {:avatar          avatar
-      :header          header
-      :body            body
-      :container-style container-style
-      :override-theme  override-theme}]))
+  [{title-text :title :keys [avatar user header title-weight text body container-style theme]}]
+  (let [theme       (or theme (quo.theme/get-theme))
+        body        (or body (when text [message text theme]))
+        header      (or header
+                        (when title-text
+                          [title
+                           {:text       title-text
+                            :weight     title-weight
+                            :theme      theme
+                            :multiline? (some? body)}]))
+        header      (when header [header-container header])
+        body        (when body [body-container body])
+        user-avatar (or avatar (when user (user-avatar/user-avatar user)))
+        avatar      (when user-avatar
+                      [avatar-container
+                       {:multiline? (and header body)}
+                       user-avatar])]
+    [quo.theme/provider {:theme theme}
+     [notification-container
+      {:avatar          avatar
+       :header          header
+       :body            body
+       :container-style container-style
+       :theme           theme}]]))

src/status_im/contexts/preview/quo/notifications/notification.cljs

@@ -30,12 +30,11 @@
   []
   [notification-button
    "Notification: with title(header)"
-   {:avatar       [quo/user-avatar
-                   {:full-name           "A Y"
-                    :status-indicator?   true
-                    :online?             true
-                    :size                :small
-                    :customization-color :blue}]
+   {:user         {:full-name           "A Y"
+                   :status-indicator?   true
+                   :online?             true
+                   :size                :small
+                   :customization-color :blue}
     :title        "Alisher Yakupov accepted your contact request"
     :duration     4000
     :title-weight :medium
@@ -45,12 +44,11 @@
   []
   [notification-button
    "with title and body"
-   {:avatar   [quo/user-avatar
-               {:full-name           "A Y"
-                :status-indicator?   true
-                :online?             true
-                :size                :small
-                :customization-color :blue}]
+   {:user     {:full-name           "A Y"
+               :status-indicator?   true
+               :online?             true
+               :size                :small
+               :customization-color :blue}
     :title    "Default to semibold title"
     :text     "The quick brown fox jumped over the lazy dog and ate a potatoe."
     :duration 4000
@@ -60,12 +58,11 @@
   []
   [notification-button
    "with anything as header & body"
-   {:avatar   [quo/user-avatar
-               {:full-name           "A Y"
-                :status-indicator?   true
-                :online?             true
-                :size                :small
-                :customization-color :blue}]
+   {:user     {:full-name           "A Y"
+               :status-indicator?   true
+               :online?             true
+               :size                :small
+               :customization-color :blue}
     :header   [rn/view
                [quo/info-message
                 {:type :success

src/status_im/contexts/shell/activity_center/events.cljs

@@ -2,7 +2,6 @@
   (:require
     [legacy.status-im.data-store.activities :as activities]
     [legacy.status-im.data-store.chats :as data-store.chats]
-    [quo.foundations.colors :as colors]
     [re-frame.core :as re-frame]
     [status-im.common.json-rpc.events :as json-rpc]
     [status-im.common.toasts.events :as toasts]
@@ -544,9 +543,9 @@
                        (not accepted)
                        (not dismissed))
                   (toasts/upsert cofx
-                                 {:user            user-avatar
+                                 {:type            :notification
+                                  :user            user-avatar
                                   :user-public-key author
-                                  :icon-color      colors/primary-50-opa-40
                                   :title           (i18n/label :t/contact-request-sent-toast
                                                                {:name name})
                                   :text            (get-in message [:content :text])})
@@ -556,10 +555,10 @@
                        accepted
                        (not dismissed))
                   (toasts/upsert cofx
-                                 {:user            user-avatar
+                                 {:type            :notification
+                                  :user            user-avatar
                                   ;; user public key who accepted the request
                                   :user-public-key chat-id
-                                  :icon-color      colors/success-50-opa-40
                                   :title           (i18n/label :t/contact-request-accepted-toast
                                                                {:name (or name (:alias message))})})
                   :else