From 743e3d1ac99ae3f2fb266d9bdc4a696e77d28665 Mon Sep 17 00:00:00 2001
From: Tristan Chuine <tristan.chuine_externe@rte-france.com>
Date: Fri, 8 Dec 2023 14:36:04 +0100
Subject: [PATCH] review

---
 src/components/TopBar/AboutDialog.js          |  6 +--
 .../TopBar/{LogoWithText.js => GridLogo.js}   | 31 ++++++++++++---
 src/components/TopBar/LogoTextOnly.js         | 39 -------------------
 src/components/TopBar/TopBar.js               |  4 +-
 src/components/TopBar/index.js                |  2 +-
 5 files changed, 31 insertions(+), 51 deletions(-)
 rename src/components/TopBar/{LogoWithText.js => GridLogo.js} (60%)
 delete mode 100644 src/components/TopBar/LogoTextOnly.js

diff --git a/src/components/TopBar/AboutDialog.js b/src/components/TopBar/AboutDialog.js
index aa6ac414..9700733b 100644
--- a/src/components/TopBar/AboutDialog.js
+++ b/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']}
diff --git a/src/components/TopBar/LogoWithText.js b/src/components/TopBar/GridLogo.js
similarity index 60%
rename from src/components/TopBar/LogoWithText.js
rename to src/components/TopBar/GridLogo.js
index 3e692def..ed3b543b 100644
--- a/src/components/TopBar/LogoWithText.js
+++ b/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,
+};
diff --git a/src/components/TopBar/LogoTextOnly.js b/src/components/TopBar/LogoTextOnly.js
deleted file mode 100644
index 41324000..00000000
--- a/src/components/TopBar/LogoTextOnly.js
+++ /dev/null
@@ -1,39 +0,0 @@
-/**
- * Copyright (c) 2023, RTE (http://www.rte-france.com)
- * This Source Code Form is subject to the terms of the Mozilla Public
- * License, v. 2.0. If a copy of the MPL was not distributed with this
- * file, You can obtain one at http://mozilla.org/MPL/2.0/.
- */
-
-import React from 'react';
-import { Typography } from '@mui/material';
-import { mergeSx } from '../../utils/styles';
-import PropTypes from 'prop-types';
-
-const styles = {
-    clickable: {
-        cursor: 'pointer',
-    },
-};
-
-const LogoTextOnly = ({ 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>
-    );
-};
-
-export default LogoTextOnly;
-
-LogoTextOnly.propTypes = {
-    appName: PropTypes.string.isRequired,
-    appColor: PropTypes.string.isRequired,
-    style: PropTypes.oneOfType([PropTypes.object, PropTypes.func]),
-    onClick: PropTypes.func,
-};
diff --git a/src/components/TopBar/TopBar.js b/src/components/TopBar/TopBar.js
index 28316df4..97560d94 100644
--- a/src/components/TopBar/TopBar.js
+++ b/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}
diff --git a/src/components/TopBar/index.js b/src/components/TopBar/index.js
index 3e4357cd..5c31ffda 100644
--- a/src/components/TopBar/index.js
+++ b/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';