From 158538cd31adcf8096bce920e1838801ca7362ba Mon Sep 17 00:00:00 2001
From: Thibaut Sardan <github@thib.top>
Date: Wed, 18 Oct 2023 20:46:05 +0100
Subject: [PATCH] color refactor and copy change

---
 ...ctOrWatch.tsx => ConnectCreateOrWatch.tsx} | 35 ++++++++++++---
 .../ui/src/components/Drawer/DrawerMenu.tsx   |  2 +-
 packages/ui/src/components/Header/Header.tsx  |  1 +
 packages/ui/src/hooks/useDisplayError.tsx     |  4 +-
 packages/ui/src/pages/Home/Home.tsx           | 45 +------------------
 packages/ui/src/pages/Overview/index.tsx      |  2 +-
 6 files changed, 35 insertions(+), 54 deletions(-)
 rename packages/ui/src/components/{ConnectOrWatch.tsx => ConnectCreateOrWatch.tsx} (53%)

diff --git a/packages/ui/src/components/ConnectOrWatch.tsx b/packages/ui/src/components/ConnectCreateOrWatch.tsx
similarity index 53%
rename from packages/ui/src/components/ConnectOrWatch.tsx
rename to packages/ui/src/components/ConnectCreateOrWatch.tsx
index 90605a8d..81c4d8a7 100644
--- a/packages/ui/src/components/ConnectOrWatch.tsx
+++ b/packages/ui/src/components/ConnectCreateOrWatch.tsx
@@ -9,26 +9,47 @@ export const ConnectOrWatch = () => {
   const navigate = useNavigate()
 
   return (
-    <ConnectButtonWrapperStyled>
-      <div>No multisig found for your accounts or watched accounts.</div>
+    <WrapperStyled>
+      {isAllowedToConnectToExtension ? (
+        <div>No multisig found for your accounts or watched accounts.</div>
+      ) : (
+        <>
+          <h1>Multix is an interface to easily manage complex multisigs.</h1>
+          <div>Connect a wallet to interact with Multix or watch an address.</div>
+        </>
+      )}
       <ButtonWrapperStyled>
         {isAllowedToConnectToExtension ? (
-          <Button onClick={() => navigate('/create')}>Create one</Button>
+          <Button
+            variant="primary"
+            onClick={() => navigate('/create')}
+          >
+            Create one
+          </Button>
         ) : (
-          <Button onClick={allowConnectionToExtension}>Connect Wallet</Button>
+          <Button
+            variant="primary"
+            onClick={allowConnectionToExtension}
+          >
+            Connect Wallet
+          </Button>
         )}
         or
-        <Button onClick={() => navigate(`/settings${WATCH_ACCOUNT_ANCHOR}`)}>Watch one</Button>
+        <Button onClick={() => navigate(`/settings${WATCH_ACCOUNT_ANCHOR}`)}>Watch account</Button>
       </ButtonWrapperStyled>
-    </ConnectButtonWrapperStyled>
+    </WrapperStyled>
   )
 }
 
-const ConnectButtonWrapperStyled = styled('div')`
+const WrapperStyled = styled('div')`
   display: flex;
   justify-content: center;
   align-items: center;
   flex-direction: column;
+
+  h1 {
+    text-align: center;
+  }
 `
 
 const ButtonWrapperStyled = styled('div')`
diff --git a/packages/ui/src/components/Drawer/DrawerMenu.tsx b/packages/ui/src/components/Drawer/DrawerMenu.tsx
index 99038a6c..3d491c00 100644
--- a/packages/ui/src/components/Drawer/DrawerMenu.tsx
+++ b/packages/ui/src/components/Drawer/DrawerMenu.tsx
@@ -32,7 +32,7 @@ function DrawerMenu({ handleDrawerClose }: DrawerMenuProps) {
         {!isAllowedToConnectToExtension && (
           <ListItemStyled disablePadding>
             <ButtonStyled
-              variant="secondary"
+              variant="primary"
               onClick={allowConnectionToExtension}
             >
               Connect
diff --git a/packages/ui/src/components/Header/Header.tsx b/packages/ui/src/components/Header/Header.tsx
index 96520193..8820cdf5 100644
--- a/packages/ui/src/components/Header/Header.tsx
+++ b/packages/ui/src/components/Header/Header.tsx
@@ -55,6 +55,7 @@ const Header = ({ handleDrawerOpen }: Props) => {
                 data-cy="button-menu-connect"
                 onClick={allowConnectionToExtension}
                 disabled={isAccountLoading}
+                variant="primary"
               >
                 Connect
               </ConnectButtonStyled>
diff --git a/packages/ui/src/hooks/useDisplayError.tsx b/packages/ui/src/hooks/useDisplayError.tsx
index b98753ec..9320624a 100644
--- a/packages/ui/src/hooks/useDisplayError.tsx
+++ b/packages/ui/src/hooks/useDisplayError.tsx
@@ -18,7 +18,7 @@ export const useDisplayError = () => {
   if (isExtensionError && watchedAddresses.length === 0 && !isAccountLoading) {
     return (
       <CenterStyled>
-        <h3 data-cy="text-no-account-found">
+        <div data-cy="text-no-account-found">
           No account found. Please connect at least one in a wallet extension. More info at{' '}
           <Linkstyled
             href="https://wiki.polkadot.network/docs/wallets-and-extensions"
@@ -31,7 +31,7 @@ export const useDisplayError = () => {
               size={20}
             />
           </Linkstyled>
-        </h3>
+        </div>
       </CenterStyled>
     )
   }
diff --git a/packages/ui/src/pages/Home/Home.tsx b/packages/ui/src/pages/Home/Home.tsx
index 41fe7871..b4d179be 100644
--- a/packages/ui/src/pages/Home/Home.tsx
+++ b/packages/ui/src/pages/Home/Home.tsx
@@ -1,19 +1,14 @@
 import { PropsWithChildren, useCallback, useEffect, useState } from 'react'
 import { Box, Grid } from '@mui/material'
 import { useMultiProxy } from '../../contexts/MultiProxyContext'
-import { useNavigate, useSearchParams } from 'react-router-dom'
-import { Button } from '../../components/library'
+import { useSearchParams } from 'react-router-dom'
 import SuccessCreation from '../../components/SuccessCreation'
 import NewMulisigAlert from '../../components/NewMulisigAlert'
 import { styled } from '@mui/material/styles'
-import { Center } from '../../components/layout/Center'
-import { useAccounts } from '../../contexts/AccountsContext'
-import { useWatchedAddresses } from '../../contexts/WatchedAddressesContext'
 import HeaderView from './HeaderView'
 import MultisigView from './MultisigView'
 import TransactionList from '../../components/Transactions/TransactionList'
-import { ConnectOrWatch } from '../../components/ConnectOrWatch'
-import { WATCH_ACCOUNT_ANCHOR } from '../Settings/Settings'
+import { ConnectOrWatch } from '../../components/ConnectCreateOrWatch'
 import { useDisplayLoader } from '../../hooks/useDisplayLoader'
 import { useDisplayError } from '../../hooks/useDisplayError'
 // import CurrentReferendumBanner from '../../components/CurrentReferendumBanner'
@@ -23,14 +18,11 @@ interface HomeProps {
 }
 
 const Home = ({ className }: HomeProps) => {
-  const navigate = useNavigate()
   const [searchParams, setSearchParams] = useSearchParams({
     creationInProgress: 'false'
   })
   const { multiProxyList } = useMultiProxy()
   const [showNewMultisigAlert, setShowNewMultisigAlert] = useState(false)
-  const { isAllowedToConnectToExtension, allowConnectionToExtension } = useAccounts()
-  const { watchedAddresses } = useWatchedAddresses()
   const DisplayError = useDisplayError()
   const DisplayLoader = useDisplayLoader()
 
@@ -56,25 +48,6 @@ const Home = ({ className }: HomeProps) => {
     return DisplayError
   }
 
-  if (!isAllowedToConnectToExtension && watchedAddresses.length === 0) {
-    return (
-      <CenterStyled>
-        <h1>Multix is an interface to easily manage complex multisigs.</h1>
-        <p>Connect an extension to interact with Multix or watch an address.</p>
-        <ConnectButtonWrapperStyled>
-          <Button onClick={allowConnectionToExtension}>Connect Wallet</Button>
-          or
-          <Button
-            onClick={() => navigate(`/settings${WATCH_ACCOUNT_ANCHOR}`)}
-            data-cy="button-watch-address"
-          >
-            Watch an address
-          </Button>
-        </ConnectButtonWrapperStyled>
-      </CenterStyled>
-    )
-  }
-
   if (multiProxyList.length === 0) {
     return (
       <MessageWrapper>
@@ -151,18 +124,4 @@ const TransactionsWrapperStyled = styled('div')`
   }
 `
 
-const ConnectButtonWrapperStyled = styled('div')`
-  display: flex;
-  justify-content: center;
-  align-items: center;
-
-  & > button {
-    margin: 0 1rem;
-  }
-`
-
-const CenterStyled = styled(Center)`
-  text-align: center;
-`
-
 export default Home
diff --git a/packages/ui/src/pages/Overview/index.tsx b/packages/ui/src/pages/Overview/index.tsx
index aa529275..3183891a 100644
--- a/packages/ui/src/pages/Overview/index.tsx
+++ b/packages/ui/src/pages/Overview/index.tsx
@@ -8,7 +8,7 @@ import MultisigCompactDisplay from '../../components/MultisigCompactDisplay'
 import 'reactflow/dist/style.css'
 import OverviewHeaderView from './OverviewHeaderView'
 import { renderMultisigHeading } from '../multisigHelpers'
-import { ConnectOrWatch } from '../../components/ConnectOrWatch'
+import { ConnectOrWatch } from '../../components/ConnectCreateOrWatch'
 interface Props {
   className?: string
 }