fix: Collectible screen design issues (#19721)

fix: Collectible screen design issues (#19721)

src/quo/components/avatars/collection_avatar/style.cljs

@@ -9,10 +9,17 @@
     :size-20 20
     nil))
 
-(defn collection-avatar
+(defn collection-avatar-container
   [theme size]
   {:width           (get-dimensions size)
    :height          (get-dimensions size)
    :border-width    1
    :border-color    (colors/theme-colors colors/neutral-80-opa-10 colors/white-opa-10 theme)
-   :border-radius 6})
+   :border-radius   6
+   :justify-content :center
+   :align-items     :center})
+
+(defn collection-avatar
+  [size]
+  {:width  (get-dimensions size)
+   :height (get-dimensions size)})

src/quo/components/avatars/collection_avatar/view.cljs

@@ -2,6 +2,7 @@
   (:require
     [quo.components.avatars.collection-avatar.style :as style]
     [quo.theme :as quo.theme]
+    [react-native.core :as rn]
     [react-native.fast-image :as fast-image]))
 
 (defn view
@@ -11,9 +12,10 @@
     :theme - keyword -> :light/:dark"
   [{:keys [image size on-load-end on-error] :or {size :size-24}}]
   (let [theme (quo.theme/use-theme)]
+    [rn/view {:style (style/collection-avatar-container theme size)}
      [fast-image/fast-image
       {:accessibility-label :collection-avatar
        :source              image
        :on-load-end         on-load-end
        :on-error            on-error
-      :style               (style/collection-avatar theme size)}]))
+       :style               (style/collection-avatar size)}]]))

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

@@ -70,10 +70,9 @@
 
    :type => :neutral/:negative/:positive
    "
-  [{:keys [type icon title text action undo-duration undo-on-press container-style theme user]
+  [{:keys [type icon title text action undo-duration undo-on-press container-style user]
     :or   {type :neutral icon :i/placeholder}}]
-  (let [context-theme (quo.theme/use-theme)
+  (let [theme     (quo.theme/use-theme)
-        context-theme (or theme context-theme)
         icon-name (case type
                     :positive (if (= theme :light)
                                 :i/correct
@@ -82,12 +81,12 @@
                                 :i/incorrect
                                 :i/incorrect-dark)
                     :neutral  icon)]
-    [quo.theme/provider context-theme
+    [quo.theme/provider 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 theme)])
        :title           title
        :text            text
        :right           (if undo-duration
@@ -96,3 +95,4 @@
                             :undo-on-press undo-on-press}]
                           action)
        :container-style container-style}]]))
+

src/quo/components/settings/data_item/style.cljs

@@ -3,7 +3,7 @@
     [quo.foundations.colors :as colors]))
 
 (defn container
-  [size card? blur? theme]
+  [{:keys [size card? blur? actionable? theme]}]
   {:flex-direction     :row
    :justify-content    :space-between
    :padding-vertical   (when (= size :default) 8)
@@ -11,8 +11,11 @@
    :border-radius      16
    :border-width       (when (and card? (not= size :small)) 1)
    :background-color   (if blur?
-                         colors/white-opa-5
+                         (if actionable? :transparent colors/white-opa-5)
-                         (colors/theme-colors colors/white colors/neutral-95 theme))
+                         (colors/theme-colors
+                          (if actionable? colors/white colors/neutral-2_5)
+                          (if actionable? colors/neutral-95 colors/neutral-90)
+                          theme))
    :border-color       (if blur?
                          colors/white-opa-10
                          (colors/theme-colors colors/neutral-10

src/quo/components/settings/data_item/view.cljs

@@ -125,7 +125,12 @@
        {:accessibility-label :data-item
         :disabled            (not icon-right?)
         :on-press            on-press
-        :style               (merge (style/container size card? blur? theme) container-style)}
+        :style               (merge (style/container {:size        size
+                                                      :card?       card?
+                                                      :blur?       blur?
+                                                      :actionable? on-press
+                                                      :theme       theme})
+                                    container-style)}
        [left-side props]
        (when (and (= :default status) (not= :small size))
          [right-side

src/status_im/common/lightbox/zoomable_image/constants.cljs

@@ -16,4 +16,4 @@
 
 (def ^:const default-dimension 1000)
 
-(def ^:const margin 8)
+(def ^:const margin 16)

src/status_im/common/scroll_page/view.cljs

@@ -64,7 +64,8 @@
         [quo/page-nav
          (cond-> {:margin-top     (safe-area/get-top)
                   :type           :no-title
-                  :background     (if (= 1 (reanimated/get-shared-value opacity-animation))
+                  :background     (if (or (:blur? page-nav-props)
+                                          (= 1 (reanimated/get-shared-value opacity-animation)))
                                     :blur
                                     :photo)
                   :right-side     page-nav-right-section-buttons

src/status_im/contexts/chat/messenger/messages/content/lightbox/view.cljs

@@ -2,7 +2,6 @@
   (:require
     [oops.core :as oops]
     [quo.core :as quo]
-    [react-native.platform :as platform]
     [reagent.core :as reagent]
     [status-im.common.lightbox.constants :as constants]
     [status-im.contexts.chat.messenger.messages.content.lightbox.style :as style]
@@ -38,5 +37,4 @@
                                  #(rf/dispatch [:toasts/upsert
                                                 {:id   :random-id
                                                  :type :positive
-                                                 :container-style {:bottom (when platform/android? 20)}
                                                  :text (i18n/label :t/photo-saved)}])]))}]]]))

src/status_im/contexts/wallet/collectible/options/view.cljs

@@ -1,7 +1,6 @@
 (ns status-im.contexts.wallet.collectible.options.view
   (:require
     [quo.core :as quo]
-    [react-native.platform :as platform]
     [status-im.contexts.wallet.common.utils.external-links :as external-links]
     [utils.i18n :as i18n]
     [utils.re-frame :as rf]
@@ -30,7 +29,6 @@
                                  #(rf/dispatch [:toasts/upsert
                                                 {:id   :random-id
                                                  :type :positive
-                                                 :container-style {:bottom (when platform/android? 20)}
                                                  :text (i18n/label :t/photo-saved)}])]))}]
       [{:icon                :i/share
         :accessibility-label :share-collectible

src/status_im/contexts/wallet/collectible/view.cljs

@@ -106,7 +106,8 @@
                                                                           {:name  collectible-name
                                                                            :image preview-uri}])
                                                          :theme   theme}])}]
-                           :picture     preview-uri}}
+                           :picture     preview-uri
+                           :blur?       true}}
          [rn/view {:style style/container}
           [quo/expanded-collectible
            {:image-src       preview-uri