Refactor app title and logo to header

src/App.tsx

@@ -9,11 +9,13 @@ import OnboardingSuccess from "./pages/OnboardingSuccess";
 import SignPageLayout from "./layout/SignPageLayout";
 import UserVerification from "./pages/UserVerification";
 import TermsAndConditions from "./pages/TermsAndConditions";
+import Header from "./components/Header";
 import { WalletConnectProvider } from "./context/WalletConnectContext";
 
 function App() {
   return (
     <Router>
+      <Header />
       <WalletConnectProvider>
         <Routes>
           <Route path="/" element={<TermsAndConditions />} />

src/components/Header.tsx

@@ -0,0 +1,32 @@
+import React from 'react';
+import { AppBar, Toolbar, Avatar, Box, IconButton } from '@mui/material';
+import { Link, useLocation } from 'react-router-dom';
+
+const Header: React.FC = () => {
+  const location = useLocation()
+
+  return (
+    <AppBar position="static" color="inherit">
+      <Toolbar>
+        <Link to={location.pathname === "/" ? "/" : "/connect-wallet"} style={{ color: "inherit", textDecoration: "none" }}>
+          <Box sx={{ display: "flex", alignItems: "center" }}>
+            <Avatar
+              alt="Laconic logo"
+              src="https://avatars.githubusercontent.com/u/92608123"
+            />
+            <IconButton
+              edge="start"
+              color="inherit"
+              aria-label="menu"
+              sx={{ ml: 2, mr: 2 }}
+            >
+              Testnet Onboarding
+            </IconButton>
+          </Box>
+        </Link>
+      </Toolbar>
+    </AppBar>
+  );
+};
+
+export default Header;

src/layout/SignPageLayout.tsx

@@ -1,14 +1,12 @@
 import React from "react";
-import { Outlet, useNavigate, Link } from "react-router-dom";
+import { Outlet, useNavigate } from "react-router-dom";
 
 import {
   Toolbar,
-  IconButton,
   Avatar,
   Button,
   Typography,
-  Container,
-  Box,
+  Container
 } from "@mui/material";
 
 import { useWalletConnectContext } from "../context/WalletConnectContext";
@@ -25,22 +23,6 @@ const SignPageLayout = () => {
   return (
     <>
       <Toolbar variant="dense">
-        <Link to="/" style={{ color: "inherit", textDecoration: "none" }}>
-          <Box sx={{ display: "flex", alignItems: "center" }}>
-            <Avatar
-              alt="Laconic logo"
-              src="https://avatars.githubusercontent.com/u/92608123"
-            />
-            <IconButton
-              edge="start"
-              color="inherit"
-              aria-label="menu"
-              sx={{ ml: 2, mr: 2 }}
-            >
-              Testnet Onboarding
-            </IconButton>
-          </Box>
-        </Link>
 
         <Button
           variant="outlined"

src/pages/ConnectWallet.tsx

@@ -1,7 +1,7 @@
 import React, { useEffect } from "react";
 import { useNavigate } from "react-router-dom";
 
-import { Typography, Button, Box, Container, Avatar } from "@mui/material";
+import { Button, Box, Container } from "@mui/material";
 
 import { useWalletConnectContext } from "../context/WalletConnectContext";
 
@@ -30,28 +30,12 @@ const ConnectWallet = () => {
         justifyContent="center"
         padding={5}
       >
-        <Box display="flex" alignItems="center">
-          <Avatar
-            alt="Laconic logo"
-            src="https://avatars.githubusercontent.com/u/92608123"
-          />
-          <Typography
-            variant="h4"
-            component="h6"
-            style={{ marginLeft: "10px" }}
-          >
-            Testnet Onboarding
-          </Typography>
-        </Box>
-        <Typography variant="h6" component="h6" style={{ marginTop: "30px" }}>
-          Connect wallet
-        </Typography>
         <Button
           variant="contained"
           onClick={handler}
           style={{ marginTop: "20px" }}
         >
-          Connect
+          Connect Wallet
         </Button>
       </Box>
     </Container>