[WALL] Lubega / WALL-5114 / Replace svg icon in cashier demo overlay (#17542)

* fix: replace icon in cashier demo overlay

* fix: remove icon

* fix: reduce icons array

* fix: applied comments

* fix: applied comments

Author: lubega-deriv

packages/wallets/src/components/WalletGradientBackground/WalletGradientBackground.scss

@@ -29,6 +29,32 @@
         }
     }
 
+    &__icon-pattern {
+        display: grid;
+        grid-row-gap: 1.5rem;
+        grid-template-columns: repeat(25, 1fr);
+        position: absolute;
+        overflow: hidden;
+        inset: 0;
+
+        @include mobile {
+            grid-row-gap: 1rem;
+            grid-template-columns: repeat(20, 1fr);
+        }
+
+        @include tablet-screen {
+            --wallets-gradient-icon-gap: 0.5rem;
+            grid-row-gap: calc(-1 * var(--wallets-gradient-icon-gap));
+            grid-template-columns: repeat(20, 1fr);
+        }
+    }
+
+    &__icon {
+        opacity: 0.24;
+        mix-blend-mode: overlay;
+        transform: rotate(-31deg);
+    }
+
     &[class*='desktop-header'],
     &[class*='mobile-header'] {
         border-radius: unset;
@@ -936,22 +962,5 @@
                 }
             }
         }
-        &-desktop-header-light,
-        &-mobile-header-light,
-        &-mobile-card-light {
-            &:before {
-                content: '';
-                display: block;
-                position: absolute;
-                inset: 0;
-                width: 100%;
-                height: 100%;
-                background-image: url('../../public/images/wallet-demo-bg-light.svg');
-                background-repeat: repeat;
-                background-size: 7rem;
-                mix-blend-mode: overlay;
-                opacity: 0.24;
-            }
-        }
     }
 }

packages/wallets/src/components/WalletGradientBackground/WalletGradientBackground.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import classNames from 'classnames';
+import { PaymentMethodDerivDemoWhiteIcon } from '@deriv/quill-icons';
 import { THooks } from '../../types';
 import './WalletGradientBackground.scss';
 
@@ -34,13 +35,31 @@ const WalletGradientBackground: React.FC<TProps> = ({
         return `wallets-gradient--${gradientCurrencyClassName}-${device}-${type}-${theme}`;
     };
 
+    const IconWrapper = () => (
+        <div className='wallets-gradient__icon-pattern'>
+            {/* Array value represents the max number of visible icons for different screen sizes */}
+            {/* 4 rows of 25 icons for desktop, 3 rows of 20 icons for mobile/tablet */}
+            {[...Array(device === 'desktop' ? 100 : 60)].map((_, index) => (
+                <PaymentMethodDerivDemoWhiteIcon
+                    className='wallets-gradient__icon'
+                    data-testid='dt_wallet_gradient_icon'
+                    key={index}
+                    width={70}
+                />
+            ))}
+        </div>
+    );
+
     return (
         <div
             className={classNames(`wallets-gradient ${getClassName()}`, {
                 [`${bodyClassName}`]: !!bodyClassName,
             })}
             data-testid='dt_wallet_gradient_background'
         >
+            {isDemo && theme === 'light' && (type === 'header' || (device === 'mobile' && type === 'card')) && (
+                <IconWrapper />
+            )}
             {hasShine && !isDemo && <span className='wallets-gradient__shine' data-testid='dt_wallet_gradient_shine' />}
             <div className='wallets-gradient__content'>{children}</div>
         </div>

packages/wallets/src/components/WalletGradientBackground/__test__/WalletGradientBackground.spec.tsx

@@ -61,6 +61,20 @@ describe('WalletGradientBackground', () => {
         expect(screen.getByTestId('dt_wallet_gradient_background')).toHaveClass('custom-body-class');
     });
 
+    it('renders IconWrapper for desktop demo header with correct length', () => {
+        render(
+            <WalletGradientBackground {...defaultProps} device='desktop' isDemo={true} theme='light' type='header' />
+        );
+        expect(screen.getAllByTestId('dt_wallet_gradient_icon')).toHaveLength(100);
+    });
+
+    it('renders IconWrapper for mobile demo header with correct length', () => {
+        render(
+            <WalletGradientBackground {...defaultProps} device='mobile' isDemo={true} theme='light' type='header' />
+        );
+        expect(screen.getAllByTestId('dt_wallet_gradient_icon')).toHaveLength(60);
+    });
+
     it('renders children correctly', () => {
         render(<WalletGradientBackground {...defaultProps} />);
         expect(screen.getByText('Test Content')).toBeInTheDocument();

packages/wallets/src/features/cashier/components/WalletCashierHeader/WalletCashierHeader.tsx

@@ -74,7 +74,7 @@ const getVirtualAccountTabs = () => {
 const WalletCashierHeader: React.FC<TProps> = ({ hideWalletDetails }) => {
     const { data: activeWallet } = useActiveWalletAccount();
     const { data: balanceData, isLoading: isBalanceLoading } = useAllBalanceSubscription();
-    const { isDesktop, isMobile } = useDevice();
+    const { isDesktop } = useDevice();
     const activeTabRef = useRef<HTMLButtonElement>(null);
     const history = useHistory();
     const location = useLocation();
@@ -92,7 +92,7 @@ const WalletCashierHeader: React.FC<TProps> = ({ hideWalletDetails }) => {
     return (
         <WalletGradientBackground
             currency={activeWallet?.currency}
-            device={isMobile ? 'mobile' : 'desktop'}
+            device={isDesktop ? 'desktop' : 'mobile'}
             isDemo={isDemo}
             theme='light'
             type='header'