feat: use dynamic custom logo

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

@@ -1,20 +1,20 @@
-import * as React from 'react';
+import AccountCircleIcon from '@mui/icons-material/AccountCircle';
-import type { ContainerProps } from '@mui/material/Container';
-import { useTheme } from '@mui/material/styles';
-import useMediaQuery from '@mui/material/useMediaQuery';
-import MuiAppBar from '@mui/material/AppBar';
-import Toolbar from '@mui/material/Toolbar';
-import IconButton from '@mui/material/IconButton';
-import Typography from '@mui/material/Typography';
 import MenuIcon from '@mui/icons-material/Menu';
 import MenuOpenIcon from '@mui/icons-material/MenuOpen';
-import AccountCircleIcon from '@mui/icons-material/AccountCircle';
+import MuiAppBar from '@mui/material/AppBar';
+import type { ContainerProps } from '@mui/material/Container';
+import IconButton from '@mui/material/IconButton';
+import Toolbar from '@mui/material/Toolbar';
+import { useTheme } from '@mui/material/styles';
+import useMediaQuery from '@mui/material/useMediaQuery';
+import * as React from 'react';
 
-import * as URLS from 'config/urls';
 import AccountDropdownMenu from 'components/AccountDropdownMenu';
-import TrialStatusBadge from 'components/TrialStatusBadge/index.ee';
 import Container from 'components/Container';
-import { FormattedMessage } from 'react-intl';
+import Logo from 'components/Logo/index';
+import TrialStatusBadge from 'components/TrialStatusBadge/index.ee';
+import * as URLS from 'config/urls';
+
 import { Link } from './style';
 
 type AppBarProps = {
@@ -60,11 +60,9 @@ export default function AppBar(props: AppBarProps): React.ReactElement {
             {drawerOpen && matchSmallScreens ? <MenuOpenIcon /> : <MenuIcon />}
           </IconButton>
 
-          <div style={{ flexGrow: 1 }}>
+          <div style={{ flexGrow: 1, display: 'flex' }}>
             <Link to={URLS.DASHBOARD}>
-              <Typography variant="h6" component="h1" noWrap>
+              <Logo />
-                <FormattedMessage id="brandText" />
-              </Typography>
             </Link>
           </div>
 

packages/web/src/components/CustomLogo/index.ee.tsx

@@ -0,0 +1,15 @@
+import useConfig from 'hooks/useConfig';
+
+const CustomLogo = () => {
+  const { config, loading } = useConfig(['logo.svgData']);
+
+  if (loading || !config?.['logo.svgData']) return null;
+
+  const logoSvgData = config['logo.svgData'] as string;
+
+  return (
+    <img src={`data:image/svg+xml;utf8,${encodeURIComponent(logoSvgData)}`} />
+  );
+};
+
+export default CustomLogo;

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

@@ -0,0 +1,23 @@
+import Typography from '@mui/material/Typography';
+import * as React from 'react';
+import { FormattedMessage } from 'react-intl';
+
+import CustomLogo from 'components/CustomLogo/index.ee';
+import useConfig from 'hooks/useConfig';
+
+const Logo = () => {
+  const { config, loading } = useConfig(['logo.svgData']);
+
+  const logoSvgData = config?.['logo.svgData'] as string;
+  if (loading && !logoSvgData) return (<React.Fragment />);
+
+  if (logoSvgData) return <CustomLogo />;
+
+  return (
+    <Typography variant="h6" component="h1" noWrap>
+      <FormattedMessage id="brandText" />
+    </Typography>
+  );
+};
+
+export default Logo;

packages/web/src/components/Logo/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',
+}));

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

@@ -3,10 +3,9 @@ import * as React from 'react';
 import Toolbar from '@mui/material/Toolbar';
 import AppBar from '@mui/material/AppBar';
 import Box from '@mui/material/Box';
-import Typography from '@mui/material/Typography';
 
+import Logo from 'components/Logo';
 import Container from 'components/Container';
-import { FormattedMessage } from 'react-intl';
 
 type LayoutProps = {
   children: React.ReactNode;
@@ -18,14 +17,7 @@ export default function Layout({ children }: LayoutProps): React.ReactElement {
       <AppBar>
         <Container maxWidth="lg" disableGutters>
           <Toolbar>
-            <Typography
+            <Logo />
-              variant="h6"
-              noWrap
-              component="div"
-              sx={{ flexGrow: 1 }}
-            >
-              <FormattedMessage id="brandText" />
-            </Typography>
           </Toolbar>
         </Container>
       </AppBar>