fix(wallet)_: wallet card flexible width (#21746)

This commit 
 - adds container-style prop to the wallet card component 
 - makes the Buy and Receive CTAs (cards) width flexible as we display two cards, and it needs to fill the screen width.

NOTE: The component's fixed width is 161, but in certain phones, it's small and does not fill the screen's whole width.

Signed-off-by: Mohamed Javid <19339952+smohamedjavid@users.noreply.github.com>

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])

src/quo/components/cards/wallet_card/style.cljs

@@ -3,13 +3,14 @@
             [quo.foundations.shadows :as shadows]))
 
 (defn root-container
-  [theme]
+  [theme container-style]
-  (assoc (shadows/get 2 theme)
+  (merge (shadows/get 2 theme)
-         :border-radius      16
+         {:border-radius      16
-         :padding-vertical   10
+          :padding-vertical   10
-         :padding-horizontal 12
+          :padding-horizontal 12
-         :width              161
+          :width              161
-         :background-color   (colors/theme-colors colors/white colors/neutral-90 theme)))
+          :background-color   (colors/theme-colors colors/white colors/neutral-90 theme)}
+         container-style))
 
 (def top-container
   {:flex-direction  :row

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
+    [rn/view {:style (style/root-container theme container-style)}
-     {:on-press            on-press
+     [rn/pressable
-      :accessibility-label :wallet-card}
+      {:on-press            on-press
-     [rn/view {:style (style/root-container theme)}
+       :accessibility-label :wallet-card}
       [rn/view {:style style/top-container}
        [fast-image/fast-image
         {:style               style/image

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})

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)
+         {:image           (resources/get-image :buy)
-          :title    (i18n/label :t/ways-to-buy)
+          :title           (i18n/label :t/ways-to-buy)
-          :subtitle (i18n/label :t/via-card-or-bank)
+          :subtitle        (i18n/label :t/via-card-or-bank)
-          :on-press buy-assets}]
+          :container-style (assoc style/cta-card :margin-right 12)
+          :on-press        buy-assets}]
         [quo/wallet-card
-         {:image    (resources/get-image :receive)
+         {:image           (resources/get-image :receive)
-          :title    (i18n/label :t/receive)
+          :title           (i18n/label :t/receive)
-          :subtitle (i18n/label :t/deposit-to-your-wallet)
+          :subtitle        (i18n/label :t/deposit-to-your-wallet)
-          :on-press receive-assets}]])
+          :container-style style/cta-card
+          :on-press        receive-assets}]])
      (if tokens-loading?
        [quo/skeleton-list
         {:content       :assets