feat: link typography logo to dashboard

packages/web/src/components/AppBar/index.tsx

@@ -10,10 +10,12 @@ import MenuIcon from '@mui/icons-material/Menu';
 import MenuOpenIcon from '@mui/icons-material/MenuOpen';
 import AccountCircleIcon from '@mui/icons-material/AccountCircle';
 
+import * as URLS from 'config/urls';
 import AccountDropdownMenu from 'components/AccountDropdownMenu';
 import Container from 'components/Container';
 import HideOnScroll from 'components/HideOnScroll';
 import { FormattedMessage } from 'react-intl';
+import { Link } from './style';
 
 type AppBarProps = {
   drawerOpen: boolean;
@@ -63,14 +65,17 @@ export default function AppBar(props: AppBarProps): React.ReactElement {
               {drawerOpen && matchSmallScreens ? <MenuOpenIcon /> : <MenuIcon />}
             </IconButton>
 
-            <Typography
+            <div style={{ flexGrow: 1 }}>
-              variant="h6"
+              <Link to={URLS.DASHBOARD}>
-              noWrap
+                <Typography
-              component="div"
+                  variant="h6"
-              sx={{ flexGrow: 1 }}
+                  component="h1"
-            >
+                  noWrap
-              <FormattedMessage id="brandText" />
+                >
-            </Typography>
+                  <FormattedMessage id="brandText" />
+                </Typography>
+              </Link>
+            </div>
 
             <IconButton
               size="large"

packages/web/src/components/AppBar/style.ts

@@ -0,0 +1,8 @@
+import { styled } from '@mui/material/styles';
+import { Link as RouterLink } from 'react-router-dom';
+
+export const Link = styled(RouterLink)(() => ({
+  textDecoration: 'none',
+  color: 'inherit',
+  display: 'inline-flex',
+}));