Toast notification design fixes (#18468)

* Toast notification design fixes

* Code style fix

* Smaller fix

* Style fix

* Fixes

* Style fixes

* Fixes

* Fixes

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

@@ -24,9 +24,7 @@
   {:background-color (colors/theme-colors colors/neutral-80-opa-70 colors/white-opa-70 theme)
    :flex-direction   :row
    :justify-content  :space-between
-   :padding-vertical 8
+   :padding          8
-   :padding-left     10
-   :padding-right    8
    :border-radius    12})
 
 (defn title
@@ -47,8 +45,13 @@
                                                      theme))
    :container-style {:width 20 :height 20}})
 
-(def left-side-container {:padding 2})
+(def left-side-container
-(def right-side-container {:padding 4 :flex 1})
+  {:padding     2
+   :padding-top 3})
+
+(def right-side-container
+  {:padding 4
+   :flex    1})
 
 (defn action-container
   [theme]

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

@@ -45,7 +45,6 @@
      :blur-radius   10
      :blur-type     :transparent
      :overlay-color :transparent}]
-
    [rn/view {:style (style/content-container theme)}
     [rn/view {:style style/left-side-container}
      left]
@@ -77,16 +76,19 @@
     :or   {type :neutral icon :i/placeholder}}]
   (let [context-theme (or theme (quo.theme/get-theme))
         icon-name     (case type
-                        :positive :i/correct
+                        :positive (if (= theme :light)
-                        :negative :i/incorrect
+                                    :i/correct
+                                    :i/correct-dark)
+                        :negative (if (= theme :light)
+                                    :i/incorrect
+                                    :i/incorrect-dark)
                         :neutral  icon)]
     [quo.theme/provider {:theme context-theme}
      [toast-container
       {:left            (cond user
                               [user-avatar/user-avatar user]
                               icon-name
-                              [icon/icon icon-name (style/icon type context-theme)]
+                              [icon/icon icon-name (style/icon type context-theme)])
-                        )
        :title           title
        :text            text
        :right           (if undo-duration

src/status_im/common/toasts/style.cljs

@@ -1,9 +1,11 @@
-(ns status-im.common.toasts.style)
+(ns status-im.common.toasts.style
+  (:require [react-native.safe-area :as safe-area]))
 
-(def outmost-transparent-container
+(defn outmost-transparent-container
+  []
   {:elevation       2
    :pointer-events  :box-none
-   :padding-top     52
+   :padding-top     (+ (safe-area/get-top) 6)
    :flex-direction  :column
    :justify-content :center
    :align-items     :center})

src/status_im/common/toasts/view.cljs

@@ -60,5 +60,5 @@
   []
   (->> (rf/sub [:toasts])
        :ordered
-       (into [rn/view {:style style/outmost-transparent-container}]
+       (into [rn/view {:style (style/outmost-transparent-container)}]
              (map #(with-meta [:f> f-container %] {:key %})))))

src/status_im/contexts/chat/messenger/composer/actions/view.cljs

@@ -153,19 +153,19 @@
                                                   50)}]))
        :max-duration-ms                    constants/audio-max-duration-ms}]]))
 
-(defn images-limit-toast
+(defn photo-limit-toast
   []
   (rf/dispatch [:toasts/upsert
                 {:id   :random-id
                  :type :negative
-                 :container-style {:top (when platform/ios? 20)}
+                 :text (i18n/label :t/hit-photos-limit
-                 :text            (i18n/label :t/only-6-images)}]))
+                                   {:max-photos constants/max-album-photos})}]))
 
 
 (defn go-to-camera
   [images-count]
   (device-permissions/camera #(if (>= images-count constants/max-album-photos)
-                                (images-limit-toast)
+                                (photo-limit-toast)
                                 (rf/dispatch [:navigate-to :camera-screen]))))
 
 (defn camera-button

src/status_im/contexts/chat/messenger/photo_selector/style.cljs

@@ -75,3 +75,6 @@
   {:position :absolute
    :top      8
    :right    8})
+
+(def photo-limit-toast-container
+  {:top (if platform/ios? 6 16)})

src/status_im/contexts/chat/messenger/photo_selector/view.cljs

@@ -4,7 +4,6 @@
     [react-native.core :as rn]
     [react-native.gesture :as gesture]
     [react-native.linear-gradient :as linear-gradient]
-    [react-native.platform :as platform]
     [react-native.reanimated :as reanimated]
     [react-native.safe-area :as safe-area]
     [reagent.core :as reagent]
@@ -17,13 +16,14 @@
 
 (def min-scroll-to-blur 5)
 
-(defn show-toast
+(defn show-photo-limit-toast
   []
   (rf/dispatch [:toasts/upsert
                 {:id              :random-id
                  :type            :negative
-                 :container-style {:top (when platform/ios? 20)}
+                 :container-style style/photo-limit-toast-container
-                 :text            (i18n/label :t/only-6-images)}]))
+                 :text            (i18n/label :t/hit-photos-limit
+                                              {:max-photos constants/max-album-photos})}]))
 
 (defn on-press-confirm-selection
   [selected close]
@@ -74,7 +74,7 @@
                              (if item-selected?
                                (swap! selected remove-selected item)
                                (if (>= (count @selected) constants/max-album-photos)
-                                 (show-toast)
+                                 (show-photo-limit-toast)
                                  (swap! selected conj item))))
       :accessibility-label (str "image-" index)}
      [rn/image

translations/en.json

@@ -2119,7 +2119,7 @@
     "my-albums": "My albums",
     "images": "images",
     "album-images-count": "{{album-images-count}} photos",
-    "only-6-images": "You can only add 6 images to your message",
+    "hit-photos-limit": "You can only add {{max-photos}} photos to your message",
     "delivered": "Delivered",
     "mark-all-notifications-as-read": "Mark all notifications as read",
     "notifications-marked-as-read": "{{count}} notifications marked as read",