review

src/components/TopBar/AboutDialog.js

@@ -38,7 +38,7 @@ import {
 } from '@mui/icons-material';
 import { FormattedMessage } from 'react-intl';
 import PropTypes from 'prop-types';
-import LogoTextOnly from './LogoTextOnly';
+import { LogoText } from './GridLogo';
 
 const moduleTypeSort = {
     app: 1,
@@ -186,7 +186,7 @@ const AboutDialog = ({
                             justifyContent: 'center',
                         }}
                     >
-                        <LogoTextOnly
+                        <LogoText
                             appName="Suite"
                             appColor={theme.palette.grey['500']}
                         />
@@ -380,7 +380,7 @@ const Module = ({ type, name, version, license }) => {
             <Stack
                 direction="row"
                 justifyContent="flex-start"
-                alignItems="flex-start"
+                alignItems="baseline"
                 spacing={1}
             >
                 {ModuleTypesIcons[type] || ModuleTypesIcons['other']}

src/components/TopBar/LogoWithText.js → src/components/TopBar/GridLogo.js

@@ -6,11 +6,10 @@
  */
 
 import React from 'react';
-import { Box } from '@mui/material';
+import { Box, Typography } from '@mui/material';
 import { BrokenImage } from '@mui/icons-material';
 import { mergeSx } from '../../utils/styles';
 import PropTypes from 'prop-types';
-import LogoTextOnly from './LogoTextOnly';
 
 const styles = {
     logo: {
@@ -27,7 +26,7 @@ const styles = {
     },
 };
 
-const LogoWithText = ({ appLogo, appName, appColor, onClick }) => {
+const GridLogo = ({ appLogo, appName, appColor, onClick }) => {
     return (
         <>
             <Box
@@ -36,7 +35,7 @@ const LogoWithText = ({ appLogo, appName, appColor, onClick }) => {
             >
                 {appLogo || <BrokenImage />}
             </Box>
-            <LogoTextOnly
+            <LogoText
                 appName={appName}
                 appColor={appColor}
                 onClick={onClick}
@@ -46,11 +45,31 @@ const LogoWithText = ({ appLogo, appName, appColor, onClick }) => {
     );
 };
 
-export default LogoWithText;
+export default GridLogo;
 
-LogoWithText.propTypes = {
+GridLogo.propTypes = {
     appLogo: PropTypes.element,
     appName: PropTypes.string.isRequired,
     appColor: PropTypes.string.isRequired,
     onClick: PropTypes.func,
 };
+
+export const LogoText = ({ appName, appColor, style, onClick }) => {
+    return (
+        <Typography
+            variant="h4"
+            sx={mergeSx(style, onClick && styles.clickable)}
+            onClick={onClick}
+        >
+            <span style={{ fontWeight: 'bold' }}>Grid</span>
+            <span style={{ color: appColor }}>{appName}</span>
+        </Typography>
+    );
+};
+
+LogoText.propTypes = {
+    appName: PropTypes.string.isRequired,
+    appColor: PropTypes.string.isRequired,
+    style: PropTypes.oneOfType([PropTypes.object, PropTypes.func]),
+    onClick: PropTypes.func,
+};

src/components/TopBar/TopBar.js

@@ -47,7 +47,7 @@ import PropTypes from 'prop-types';
 import FullScreen, { fullScreenSupported } from 'react-request-fullscreen';
 
 import ElementSearchDialog from '../ElementSearchDialog';
-import LogoWithText from './LogoWithText';
+import GridLogo from './GridLogo';
 import AboutDialog from './AboutDialog';
 
 const styles = {
@@ -286,7 +286,7 @@ const TopBar = ({
 
     const logo_clickable = useMemo(
         () => (
-            <LogoWithText
+            <GridLogo
                 onClick={onLogoClick}
                 appLogo={appLogo}
                 appName={appName}

src/components/TopBar/index.js

@@ -5,5 +5,5 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/.
  */
 export { default } from './TopBar';
-export { default as LogoWithText } from './LogoWithText';
+export * from './GridLogo';
 export { default as AboutDialog } from './AboutDialog';