Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix: Collectible screen design issues #19721

Merged
merged 5 commits into from
May 13, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
19 changes: 13 additions & 6 deletions src/quo/components/avatars/collection_avatar/style.cljs
Original file line number Diff line number Diff line change
Expand Up @@ -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)})
16 changes: 9 additions & 7 deletions src/quo/components/avatars/collection_avatar/view.cljs
Original file line number Diff line number Diff line change
Expand Up @@ -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)}]]))
28 changes: 14 additions & 14 deletions src/quo/components/notifications/toast/view.cljs
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -96,3 +95,4 @@
:undo-on-press undo-on-press}]
action)
:container-style container-style}]]))

9 changes: 6 additions & 3 deletions src/quo/components/settings/data_item/style.cljs
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
7 changes: 6 additions & 1 deletion src/quo/components/settings/data_item/view.cljs
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -16,4 +16,4 @@

(def ^:const default-dimension 1000)

(def ^:const margin 8)
(def ^:const margin 16)
3 changes: 2 additions & 1 deletion src/status_im/common/scroll_page/view.cljs
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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]
Expand Down Expand Up @@ -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)}])]))}]]]))
8 changes: 3 additions & 5 deletions src/status_im/contexts/wallet/collectible/options/view.cljs
Original file line number Diff line number Diff line change
@@ -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]
Expand All @@ -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)}
OmarBasem marked this conversation as resolved.
Show resolved Hide resolved
: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)
Expand Down
3 changes: 2 additions & 1 deletion src/status_im/contexts/wallet/collectible/view.cljs
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down