Skip to content

Commit

Permalink
fix: Collectible screen design issues (#19721)
Browse files Browse the repository at this point in the history
fix: Collectible screen design issues (#19721)
  • Loading branch information
OmarBasem authored May 13, 2024
1 parent f50ca46 commit 12515a4
Show file tree
Hide file tree
Showing 10 changed files with 59 additions and 44 deletions.
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)}
: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

0 comments on commit 12515a4

Please sign in to comment.