feat(wallet) Move help centre link from account modal to main contain…

…er (#18739) Moved help centre link from account modal to main container
brave · Jun 6, 2023 · fb58942 · fb58942
1 parent 3d575a8
commit fb58942
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 25 deletions.
diff --git a/components/brave_wallet_ui/page/screens/swap/components/swap/account-modal/account-modal.tsx b/components/brave_wallet_ui/page/screens/swap/components/swap/account-modal/account-modal.tsx
@@ -32,7 +32,6 @@ import { RefreshBlockchainStateParams } from '../../../constants/types'
 
 // Components
 import { AccountListItemButton } from './account-list-item-button'
-import { AccountModalButton } from './account-modal-button'
 
 // Styled Components
 import { ModalBox, Title } from './account-modal.style'
@@ -81,14 +80,6 @@ export const AccountModal = (props: Props) => {
     ]
   )
 
-  const onClickHelpCenter = React.useCallback(() => {
-    window.open(
-      'https://support.brave.com/hc/en-us/articles/8155407080845-Brave-Swaps-FAQ',
-      '_blank',
-      'noopener'
-    )
-  }, [])
-
   return (
     <ModalBox>
       {/*
@@ -166,11 +157,6 @@ export const AccountModal = (props: Props) => {
           icon={PortfolioIcon}
           onClick={onClickViewPortfolio}
         /> */}
-        <AccountModalButton
-          text={getLocale('braveSwapHelpCenter')}
-          iconName='info-outline'
-          onClick={onClickHelpCenter}
-        />
       </Column>
     </ModalBox>
   )

diff --git a/.../brave_wallet_ui/page/screens/swap/components/swap/swap-container/swap-container.style.ts b/.../brave_wallet_ui/page/screens/swap/components/swap/swap-container/swap-container.style.ts
@@ -115,7 +115,13 @@ export const Container = styled(StyledDiv)`
   }
 `
 
-export const PrivacyButton = styled(StyledButton)`
+export const Row = styled.div`
+  display: flex;
+  flex-direction: row;
+  gap: 5px;
+`
+
+export const ActionButton = styled(StyledButton)`
   font-family: 'Poppins';
   font-style: normal;
   font-weight: 500;

diff --git a/...nents/brave_wallet_ui/page/screens/swap/components/swap/swap-container/swap-container.tsx b/...nents/brave_wallet_ui/page/screens/swap/components/swap/swap-container/swap-container.tsx
@@ -24,8 +24,9 @@ import { Header } from '../header/header'
 import {
   Background,
   Container,
-  PrivacyButton,
-  Wrapper
+  ActionButton,
+  Wrapper,
+  Row
 } from './swap-container.style'
 
 interface Props {
@@ -49,6 +50,15 @@ export const SwapContainer = (props: Props) => {
   // Refs
   const ref = React.createRef<HTMLInputElement>()
 
+  // Methods
+  const onClickHelpCenter = React.useCallback(() => {
+    window.open(
+      'https://support.brave.com/hc/en-us/categories/360001059151-Brave-Wallet',
+      '_blank',
+      'noopener'
+    )
+  }, [])
+
   // Effects
   React.useEffect(() => {
     // Keeps track of the Swap Containers Height to update
@@ -65,15 +75,16 @@ export const SwapContainer = (props: Props) => {
 
   return (
     <Wrapper>
-      <Header
-        refreshBlockchainState={refreshBlockchainState}
-      />
+      <Header refreshBlockchainState={refreshBlockchainState} />
       <Container ref={ref}>{children}</Container>
-      <PrivacyButton
-        onClick={showPrivacyModal}
-      >
-        {getLocale('braveSwapPrivacyPolicy')}
-      </PrivacyButton>
+      <Row>
+        <ActionButton onClick={showPrivacyModal}>
+          {getLocale('braveSwapPrivacyPolicy')}
+        </ActionButton>
+        <ActionButton onClick={onClickHelpCenter}>
+          {getLocale('braveSwapHelpCenter')}
+        </ActionButton>
+      </Row>
       <Background
         height={backgroundHeight}
         network={selectedNetwork?.chainId ?? ''}