george / WALL-1985 / fix style issues (PA withdarwal, fiat withdrawals)

packages/appstore/src/components/elements/text/__tests__/balance-text.spec.tsx

@@ -0,0 +1,101 @@
+import React from 'react';
+import BalanceText from '../balance-text';
+import { render, screen } from '@testing-library/react';
+import { StoreProvider, mockStore } from '@deriv/stores';
+
+const createWrapper = (mock: ReturnType<typeof mockStore>) => {
+    const wrapper = ({ children }: { children: JSX.Element }) => <StoreProvider store={mock}>{children}</StoreProvider>;
+
+    return wrapper;
+};
+
+describe('BalanceText', () => {
+    it('should render the component', () => {
+        const mock = mockStore({});
+
+        const { container } = render(<BalanceText balance={1000} currency='USD' size='m' underline_style='none' />, {
+            wrapper: createWrapper(mock),
+        });
+        expect(container).toBeInTheDocument();
+    });
+
+    it('should render the correct balance and currency', () => {
+        const mock = mockStore({});
+
+        const { container } = render(<BalanceText balance={1000} currency='USD' size='m' underline_style='none' />, {
+            wrapper: createWrapper(mock),
+        });
+        expect(container).toBeInTheDocument();
+        expect(screen.getByText('1,000.00')).toBeInTheDocument();
+        expect(screen.getByText('USD')).toBeInTheDocument();
+    });
+
+    it('should render the correct div class for dotted underline_style', () => {
+        const mock = mockStore({});
+
+        const { container } = render(<BalanceText balance={1000} currency='USD' size='m' underline_style='dotted' />, {
+            wrapper: createWrapper(mock),
+        });
+        expect(container).toBeInTheDocument();
+        expect(screen.getByTestId('dt_balance_text_container')).toHaveClass('balance-text--dotted');
+    });
+
+    it('should have classname ending with demo if user has selected_account_type demo and has an active real account ', () => {
+        const mock = mockStore({
+            traders_hub: {
+                selected_account_type: 'demo',
+            },
+            client: {
+                has_active_real_account: true,
+            },
+        });
+
+        const { container } = render(<BalanceText balance={1000} currency='USD' size='m' underline_style='none' />, {
+            wrapper: createWrapper(mock),
+        });
+        expect(container).toBeInTheDocument();
+        expect(screen.getByText('1,000.00')).toHaveClass('balance-text__text--demo');
+    });
+
+    it('should have classname ending with real if user has selected_account_type demo and has an active real account ', () => {
+        const mock = mockStore({
+            traders_hub: {
+                selected_account_type: 'real',
+            },
+            client: {
+                has_active_real_account: true,
+            },
+        });
+
+        const { container } = render(<BalanceText balance={1000} currency='USD' size='m' underline_style='none' />, {
+            wrapper: createWrapper(mock),
+        });
+        expect(container).toBeInTheDocument();
+        expect(screen.getByText('1,000.00')).toHaveClass('balance-text__text--real');
+    });
+
+    it('should not have classname if selected_account_type is empty ', () => {
+        const mock = mockStore({
+            traders_hub: {
+                selected_account_type: '',
+            },
+        });
+
+        const { container } = render(<BalanceText balance={1000} currency='USD' size='m' underline_style='none' />, {
+            wrapper: createWrapper(mock),
+        });
+        expect(container).toBeInTheDocument();
+        expect(screen.getByText('1,000.00')).not.toHaveClass('balance-text__text--real');
+        expect(screen.getByText('1,000.00')).not.toHaveClass('balance-text__text--demo');
+    });
+
+    it('should have classname as container if underline_style is none', () => {
+        const mock = mockStore({});
+
+        const { container } = render(<BalanceText balance={1000} currency='USD' size='m' underline_style='none' />, {
+            wrapper: createWrapper(mock),
+        });
+        expect(container).toBeInTheDocument();
+        expect(screen.getByTestId('dt_balance_text_container')).toHaveClass('balance-text__container');
+    });
+});

packages/appstore/src/components/elements/text/balance-text.tsx

@@ -32,6 +32,7 @@ const BalanceText = observer(({ balance, currency, size = 'm', underline_style =
     return (
         <div
             className={classNames('balance-text__container', { 'balance-text--dotted': underline_style === 'dotted' })}
+            data-testid='dt_balance_text_container'
         >
             <Text weight='bold' size={size} className={getTextClassName()}>
                 {formatMoney(currency, balance, true)}

packages/appstore/src/components/modals/wallet-modal/wallet-modal-header.tsx

@@ -83,6 +83,7 @@ const WalletModalHeader = ({
                         size={is_mobile ? 'xsm' : 'm'}
                         weight='bold'
                         className={getStylesByClassName(`${header_class_name}__title-balance`)}
+                        data-testid='dt_wallet_balance'
                     >
                         {formatMoney(currency || '', balance, true)} {display_currency_code}
                     </Text>

packages/cashier/src/components/email-verification-empty-state/email-verification-empty-state.scss

@@ -0,0 +1,11 @@
+.email-verification-empty-state {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: 4.6rem;
+
+    @include mobile {
+        gap: 2.4rem;
+    }
+}

packages/cashier/src/components/email-verification-empty-state/email-verification-empty-state.tsx

@@ -3,6 +3,7 @@ import { EmptyState } from '@deriv/components';
 import { useVerifyEmail } from '@deriv/hooks';
 import { localize } from '@deriv/translations';
 import EmailVerificationResendEmptyState from './email-verification-resend-empty-state';
+import './email-verification-empty-state.scss';
 
 type TEmailVerificationEmptyStateProps = {
     type: Parameters<typeof useVerifyEmail>[0];
@@ -18,7 +19,7 @@ const EmailVerificationEmptyState = ({ type }: TEmailVerificationEmptyStateProps
     };
 
     return (
-        <React.Fragment>
+        <div className='email-verification-empty-state'>
             <EmptyState
                 icon='IcWithdrawRequestVerificationSent'
                 title={localize("We've sent you an email.")}
@@ -32,7 +33,7 @@ const EmailVerificationEmptyState = ({ type }: TEmailVerificationEmptyStateProps
                     resend={() => verify.send()}
                 />
             )}
-        </React.Fragment>
+        </div>
     );
 };
 

packages/cashier/src/pages/payment-agent/payment-agent-list/payment-agent-list.scss

@@ -7,6 +7,9 @@
         padding: 0;
         margin: 0;
     }
+    .email-verification-empty-state {
+        margin-top: 2.4rem;
+    }
     &__instructions {
         @include mobile {
             display: grid;

packages/components/src/components/empty-state/empty-state.scss

@@ -1,7 +1,6 @@
 .empty-state {
     width: 100%;
     display: flex;
-    flex: 1;
     flex-direction: column;
     align-items: center;
     gap: 2.4rem;