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})
+ {: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
+ :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,18 +2,20 @@
  (: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
  "Opts:
- 
+
  :image - collection image
  :theme - keyword -> :light/:dark"
  [{:keys [image size on-load-end on-error] :or {size :size-24}}]
  (let [theme (quo.theme/use-theme)]
- [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)}]))
+ [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 size)}]]))

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

@@ -67,27 +67,26 @@
 
 (defn toast
  "Options:
- 
+
  :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)
- context-theme (or theme context-theme)
- icon-name (case type
- :positive (if (= theme :light)
- :i/correct
- :i/correct-dark)
- :negative (if (= theme :light)
- :i/incorrect
- :i/incorrect-dark)
- :neutral icon)]
- [quo.theme/provider context-theme
+ (let [theme (quo.theme/use-theme)
+ icon-name (case type
+ :positive (if (= theme :light)
+ :i/correct
+ :i/correct-dark)
+ :negative (if (= theme :light)
+ :i/incorrect
+ :i/incorrect-dark)
+ :neutral icon)]
+ [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,16 +3,19 @@
  [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)
  :padding-horizontal (when (= size :default) 12)
  :border-radius 16
  :border-width (when (and card? (not= size :small)) 1)
  :background-color (if blur?
- colors/white-opa-5
- (colors/theme-colors colors/white colors/neutral-95 theme))
+ (if actionable? :transparent colors/white-opa-5)
+ (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]
@@ -36,7 +35,6 @@
  [:lightbox/save-image-to-gallery
  uri
  #(rf/dispatch [:toasts/upsert
- {:id :random-id
- :type :positive
- :container-style {:bottom (when platform/android? 20)}
- :text (i18n/label :t/photo-saved)}])]))}]]]))
+ {:id :random-id
+ :type :positive
+ :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]
@@ -28,10 +27,9 @@
  [:lightbox/save-image-to-gallery
  uri
  #(rf/dispatch [:toasts/upsert
- {:id :random-id
- :type :positive
- :container-style {:bottom (when platform/android? 20)}
- :text (i18n/label :t/photo-saved)}])]))}]
+ {:id :random-id
+ :type :positive
+ :text (i18n/label :t/photo-saved)}])]))}]
  [{:icon :i/share
  :accessibility-label :share-collectible
  :label (i18n/label :t/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