style: 💄 fix style issues

heorhi-deriv · Sep 27, 2023 · fc42a26 · fc42a26
1 parent f4b0c4d
commit fc42a26
Show file tree

Hide file tree

Showing 6 changed files with 23 additions and 6 deletions.
diff --git a/packages/appstore/src/components/modals/wallet-modal/wallet-modal-header.tsx b/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>

diff --git a/...cashier/src/components/email-verification-empty-state/email-verification-empty-state.scss b/...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;
+    }
+}
diff --git a/.../cashier/src/components/email-verification-empty-state/email-verification-empty-state.tsx b/.../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>
     );
 };
 

diff --git a/packages/cashier/src/pages/payment-agent/payment-agent-list/payment-agent-list.scss b/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: 4rem;
+    }
     &__instructions {
         @include mobile {
             display: grid;

diff --git a/packages/components/src/components/empty-state/empty-state.scss b/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;

diff --git a/packages/components/src/components/empty-state/empty-state.tsx b/packages/components/src/components/empty-state/empty-state.tsx
@@ -1,4 +1,5 @@
 import React from 'react';
+import { isMobile } from '@deriv/shared';
 import Button from '../button';
 import Icon from '../icon';
 import Text from '../text';
@@ -21,18 +22,19 @@ const EmptyState: React.FC<TProps> = ({ icon, title, description, action }) => (
     <div className='empty-state'>
         {icon && <Icon icon={icon} size={128} />}
         {title && (
-            <Text weight='bold' align='center' data-testid='dt_empty_state_title'>
+            <Text size={isMobile() ? 'xs' : 's'} weight='bold' align='center' data-testid='dt_empty_state_title'>
                 {title}
             </Text>
         )}
         {description && (
-            <Text align='center' data-testid='dt_empty_state_description'>
+            <Text size={isMobile() ? 'xxs' : 's'} align='center' data-testid='dt_empty_state_description'>
                 {description}
             </Text>
         )}
         {action && (
             <Button
-                large
+                large={!isMobile()}
+                medium={isMobile()}
                 has_effect
                 text={action.label}
                 onClick={action.onClick}