chore(suite): increase NotificationCard padding in accounts

trezor · Oct 31, 2022 · 91cc9ae · 91cc9ae
1 parent f3cdab5
commit 91cc9ae
Show file tree

Hide file tree

Showing 5 changed files with 32 additions and 21 deletions.
diff --git a/packages/suite/src/components/wallet/AccountAnnouncement/index.tsx b/packages/suite/src/components/wallet/AccountAnnouncement/index.tsx
@@ -16,7 +16,7 @@ const AnnouncementsWrapper = styled.div`
     margin-bottom: 16px;
 `;
 
-const Announcement = (props: Props) => {
+export const AccountAnnouncement = (props: Props) => {
     const { account } = props.selectedAccount;
     const notifications = [];
 
@@ -36,5 +36,3 @@ const Announcement = (props: Props) => {
     if (notifications.length === 0) return null;
     return <AnnouncementsWrapper>{notifications}</AnnouncementsWrapper>;
 };
-
-export default Announcement;
diff --git a/packages/suite/src/components/wallet/AccountException/index.tsx b/packages/suite/src/components/wallet/AccountException/index.tsx
@@ -46,7 +46,7 @@ const getExceptionPage = ({ account }: Props) => {
     }
 };
 
-const Exception = (props: Props) => {
+export const AccountException = (props: Props) => {
     const page = getExceptionPage(props);
     if (page) return <Wrapper>{page}</Wrapper>;
     return (
@@ -55,5 +55,3 @@ const Exception = (props: Props) => {
         </Wrapper>
     );
 };
-
-export default Exception;
diff --git a/packages/suite/src/components/wallet/AccountMode/index.tsx b/packages/suite/src/components/wallet/AccountMode/index.tsx
@@ -1,18 +1,26 @@
 import React from 'react';
+import styled from 'styled-components';
 import { SelectedAccountWatchOnlyMode } from '@suite-common/wallet-types';
 
 import AuthConfirmFailed from './AuthConfirmFailed';
 import BackendDisconnected from './BackendDisconnected';
 import DeviceUnavailable from './DeviceUnavailable';
 
-interface Props {
+const Container = styled.div`
+    margin-bottom: 10px;
+`;
+
+interface AccountModeProps {
     mode: SelectedAccountWatchOnlyMode[] | undefined;
 }
 
-const AccountMode = (props: Props) => {
-    if (!props.mode) return null;
+export const AccountMode = (props: AccountModeProps) => {
+    if (!props.mode) {
+        return null;
+    }
+
     return (
-        <>
+        <Container>
             {props.mode.map(m => {
                 switch (m) {
                     case 'auth-confirm-failed':
@@ -22,12 +30,9 @@ const AccountMode = (props: Props) => {
                     case 'device-unavailable':
                         return <DeviceUnavailable key={m} />;
                     default:
-                        // return <>{m} not implemented</>;
                         return null;
                 }
             })}
-        </>
+        </Container>
     );
 };
-
-export default AccountMode;
diff --git a/packages/suite/src/components/wallet/WalletLayout/index.tsx b/packages/suite/src/components/wallet/WalletLayout/index.tsx
@@ -1,11 +1,13 @@
 import React, { useState, useEffect } from 'react';
-import { Progress } from '@trezor/components';
 import styled from 'styled-components';
-import { AccountsMenu } from '@wallet-components';
-import Exception from '@wallet-components/AccountException';
-import AccountMode from '@wallet-components/AccountMode';
-import AccountAnnouncement from '@wallet-components/AccountAnnouncement';
-import { AccountTopPanel } from '@wallet-components/AccountTopPanel';
+import { Progress } from '@trezor/components';
+import {
+    AccountsMenu,
+    AccountMode,
+    AccountException,
+    AccountAnnouncement,
+    AccountTopPanel,
+} from '@wallet-components';
 import { MAX_WIDTH_WALLET_CONTENT } from '@suite-constants/layout';
 import { AppState, ExtendedMessageDescriptor } from '@suite-types';
 import { useTranslation, useLayout } from '@suite-hooks';
@@ -105,7 +107,7 @@ export const WalletLayout = ({
                 <AccountMode mode={account.mode} />
                 <AccountAnnouncement selectedAccount={account} />
                 <EmptyHeaderPlaceholder />
-                <Exception account={account} />
+                <AccountException account={account} />
             </Wrapper>
         );
     }

diff --git a/packages/suite/src/components/wallet/index.tsx b/packages/suite/src/components/wallet/index.tsx
@@ -36,6 +36,10 @@ import { Pagination } from './Pagination';
 import { TransactionTimestamp } from './TransactionTimestamp';
 import { withCoinmarket, withSelectedAccountLoaded } from './hocs';
 import type { WithCoinmarketProps, WithSelectedAccountLoadedProps } from './hocs';
+import { AccountMode } from './AccountMode';
+import { AccountException } from './AccountException';
+import { AccountAnnouncement } from './AccountAnnouncement';
+import { AccountTopPanel } from './AccountTopPanel';
 
 export {
     Title,
@@ -71,6 +75,10 @@ export {
     KYCError,
     Pagination,
     TransactionTimestamp,
+    AccountMode,
+    AccountException,
+    AccountAnnouncement,
+    AccountTopPanel,
 };
 
 export type { WithCoinmarketProps, WithSelectedAccountLoadedProps };