From 12515a49046938f688a75e89316e0d4149933dc5 Mon Sep 17 00:00:00 2001 From: Omar Basem Date: Mon, 13 May 2024 12:40:31 +0400 Subject: [PATCH] fix: Collectible screen design issues (#19721) fix: Collectible screen design issues (#19721) --- .../avatars/collection_avatar/style.cljs | 19 +++++++++---- .../avatars/collection_avatar/view.cljs | 16 ++++++----- .../components/notifications/toast/view.cljs | 28 +++++++++---------- .../components/settings/data_item/style.cljs | 9 ++++-- .../components/settings/data_item/view.cljs | 7 ++++- .../lightbox/zoomable_image/constants.cljs | 2 +- src/status_im/common/scroll_page/view.cljs | 3 +- .../messages/content/lightbox/view.cljs | 8 ++---- .../wallet/collectible/options/view.cljs | 8 ++---- .../contexts/wallet/collectible/view.cljs | 3 +- 10 files changed, 59 insertions(+), 44 deletions(-) diff --git a/src/quo/components/avatars/collection_avatar/style.cljs b/src/quo/components/avatars/collection_avatar/style.cljs index a7f26ccbe5..aebc90899c 100644 --- a/src/quo/components/avatars/collection_avatar/style.cljs +++ b/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)}) diff --git a/src/quo/components/avatars/collection_avatar/view.cljs b/src/quo/components/avatars/collection_avatar/view.cljs index 9d1fe45b9d..f5786ac04b 100644 --- a/src/quo/components/avatars/collection_avatar/view.cljs +++ b/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)}]])) diff --git a/src/quo/components/notifications/toast/view.cljs b/src/quo/components/notifications/toast/view.cljs index ecf8686ce7..a3e7e6be93 100644 --- a/src/quo/components/notifications/toast/view.cljs +++ b/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}]])) + diff --git a/src/quo/components/settings/data_item/style.cljs b/src/quo/components/settings/data_item/style.cljs index a9436f7895..008f7e0968 100644 --- a/src/quo/components/settings/data_item/style.cljs +++ b/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 - (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 diff --git a/src/quo/components/settings/data_item/view.cljs b/src/quo/components/settings/data_item/view.cljs index 2bd80f7b2f..1d9df58586 100644 --- a/src/quo/components/settings/data_item/view.cljs +++ b/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 diff --git a/src/status_im/common/lightbox/zoomable_image/constants.cljs b/src/status_im/common/lightbox/zoomable_image/constants.cljs index 3ae95e222e..d22d8d4131 100644 --- a/src/status_im/common/lightbox/zoomable_image/constants.cljs +++ b/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) diff --git a/src/status_im/common/scroll_page/view.cljs b/src/status_im/common/scroll_page/view.cljs index 865ccd9a97..6414122f39 100644 --- a/src/status_im/common/scroll_page/view.cljs +++ b/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 diff --git a/src/status_im/contexts/chat/messenger/messages/content/lightbox/view.cljs b/src/status_im/contexts/chat/messenger/messages/content/lightbox/view.cljs index c23f47023a..ef6c1f2401 100644 --- a/src/status_im/contexts/chat/messenger/messages/content/lightbox/view.cljs +++ b/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)}])]))}]]])) diff --git a/src/status_im/contexts/wallet/collectible/options/view.cljs b/src/status_im/contexts/wallet/collectible/options/view.cljs index 8e3cfca0a4..094d5a5e38 100644 --- a/src/status_im/contexts/wallet/collectible/options/view.cljs +++ b/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) diff --git a/src/status_im/contexts/wallet/collectible/view.cljs b/src/status_im/contexts/wallet/collectible/view.cljs index 294f441e1a..3dde3f6c52 100644 --- a/src/status_im/contexts/wallet/collectible/view.cljs +++ b/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