[NO CHANGELOG] (AddFunds) fix: add theme color support for bg image t…

…exture inside AddFunds (#2325)
immutable · Oct 17, 2024 · 2a44fa9 · 2a44fa9
1 parent 5d92d1d
commit 2a44fa9
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 3 deletions.
diff --git a/packages/checkout/widgets-lib/src/widgets/add-funds/AddFundsWidget.tsx b/packages/checkout/widgets-lib/src/widgets/add-funds/AddFundsWidget.tsx
@@ -4,7 +4,7 @@ import {
 import { useTranslation } from 'react-i18next';
 import { AddFundsWidgetParams, IMTBLWidgetEvents } from '@imtbl/checkout-sdk';
 
-import { Stack, CloudImage } from '@biom3/react';
+import { Stack, CloudImage, useTheme } from '@biom3/react';
 import { Environment } from '@imtbl/config';
 import { sendAddFundsCloseEvent } from './AddFundsWidgetEvents';
 import { EventTargetContext } from '../../context/event-target-context/EventTargetContext';
@@ -58,7 +58,7 @@ export default function AddFundsWidget({
   config,
 }: AddFundsWidgetInputs) {
   const fetchingBalances = useRef(false);
-
+  const { base: { colorMode } } = useTheme();
   const [viewState, viewDispatch] = useReducer(viewReducer, {
     ...initialViewState,
     view: { type: AddFundsWidgetViews.ADD_FUNDS },
@@ -187,7 +187,7 @@ export default function AddFundsWidget({
               <img
                 src={getRemoteImage(
                   config.environment,
-                  '/add-funds-bg-texture.webp',
+                  `/add-funds-bg-texture-${colorMode}.webp`,
                 )}
                 alt="blurry bg texture"
               />

diff --git a/packages/checkout/widgets-lib/src/widgets/add-funds/views/AddFunds.tsx b/packages/checkout/widgets-lib/src/widgets/add-funds/views/AddFunds.tsx
@@ -629,6 +629,8 @@ export function AddFunds({
             p: 'base.spacing.x3',
             pb: 'base.spacing.x10',
             bg: 'base.color.neutral.800',
+            bradtl: 'base.borderRadius.x8',
+            bradtr: 'base.borderRadius.x8',
           }}
           gap="base.spacing.x6"
         >