color refactor and copy change

ChainSafe · Oct 18, 2023 · 158538c · 158538c
1 parent a6b95b0
commit 158538c
Show file tree

Hide file tree

Showing 6 changed files with 35 additions and 54 deletions.
diff --git a/...ages/ui/src/components/ConnectOrWatch.tsx → ...i/src/components/ConnectCreateOrWatch.tsx b/...ages/ui/src/components/ConnectOrWatch.tsx → ...i/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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
 }