diff --git a/src/quo/components/cards/wallet_card/schema.cljs b/src/quo/components/cards/wallet_card/schema.cljs index f10caf6aff..a4088d1516 100644 --- a/src/quo/components/cards/wallet_card/schema.cljs +++ b/src/quo/components/cards/wallet_card/schema.cljs @@ -10,5 +10,6 @@ [:subtitle :string] [:dismissible? {:optional true} :boolean] [:on-press {:optional true} fn?] - [:on-press-close {:optional true} fn?]]]] + [:on-press-close {:optional true} fn?] + [:container-style {:optional true} :map]]]] :any]) diff --git a/src/quo/components/cards/wallet_card/style.cljs b/src/quo/components/cards/wallet_card/style.cljs index 84c7931963..faaa1b43e8 100644 --- a/src/quo/components/cards/wallet_card/style.cljs +++ b/src/quo/components/cards/wallet_card/style.cljs @@ -3,13 +3,14 @@ [quo.foundations.shadows :as shadows])) (defn root-container - [theme] - (assoc (shadows/get 2 theme) - :border-radius 16 - :padding-vertical 10 - :padding-horizontal 12 - :width 161 - :background-color (colors/theme-colors colors/white colors/neutral-90 theme))) + [theme container-style] + (merge (shadows/get 2 theme) + {:border-radius 16 + :padding-vertical 10 + :padding-horizontal 12 + :width 161 + :background-color (colors/theme-colors colors/white colors/neutral-90 theme)} + container-style)) (def top-container {:flex-direction :row diff --git a/src/quo/components/cards/wallet_card/view.cljs b/src/quo/components/cards/wallet_card/view.cljs index 7e1b61d88b..df52029ffc 100644 --- a/src/quo/components/cards/wallet_card/view.cljs +++ b/src/quo/components/cards/wallet_card/view.cljs @@ -9,12 +9,12 @@ [schema.core :as schema])) (defn- view-internal - [{:keys [image title subtitle dismissible? on-press on-press-close]}] + [{:keys [image title subtitle dismissible? on-press on-press-close container-style]}] (let [theme (quo.theme/use-theme)] - [rn/pressable - {:on-press on-press - :accessibility-label :wallet-card} - [rn/view {:style (style/root-container theme)} + [rn/view {:style (style/root-container theme container-style)} + [rn/pressable + {:on-press on-press + :accessibility-label :wallet-card} [rn/view {:style style/top-container} [fast-image/fast-image {:style style/image diff --git a/src/status_im/contexts/wallet/home/tabs/assets/style.cljs b/src/status_im/contexts/wallet/home/tabs/assets/style.cljs index 0faa687ba8..7b6736af13 100644 --- a/src/status_im/contexts/wallet/home/tabs/assets/style.cljs +++ b/src/status_im/contexts/wallet/home/tabs/assets/style.cljs @@ -7,6 +7,8 @@ (def buy-and-receive-cta-container {:flex-direction :row - :justify-content :space-between :padding-horizontal 20 :padding-vertical 8}) + +(def cta-card + {:flex 1}) diff --git a/src/status_im/contexts/wallet/home/tabs/assets/view.cljs b/src/status_im/contexts/wallet/home/tabs/assets/view.cljs index 2442a3c9c0..ec040a7df6 100644 --- a/src/status_im/contexts/wallet/home/tabs/assets/view.cljs +++ b/src/status_im/contexts/wallet/home/tabs/assets/view.cljs @@ -26,15 +26,17 @@ [rn/view {:style style/buy-and-receive-cta-container} [quo/wallet-card - {:image (resources/get-image :buy) - :title (i18n/label :t/ways-to-buy) - :subtitle (i18n/label :t/via-card-or-bank) - :on-press buy-assets}] + {:image (resources/get-image :buy) + :title (i18n/label :t/ways-to-buy) + :subtitle (i18n/label :t/via-card-or-bank) + :container-style (assoc style/cta-card :margin-right 12) + :on-press buy-assets}] [quo/wallet-card - {:image (resources/get-image :receive) - :title (i18n/label :t/receive) - :subtitle (i18n/label :t/deposit-to-your-wallet) - :on-press receive-assets}]]) + {:image (resources/get-image :receive) + :title (i18n/label :t/receive) + :subtitle (i18n/label :t/deposit-to-your-wallet) + :container-style style/cta-card + :on-press receive-assets}]]) (if tokens-loading? [quo/skeleton-list {:content :assets