prettier

Signed-off-by: Abdelsalem <[email protected]>

Author: AbdelHedhili

src/components/topBar/MessageBanner.tsx

@@ -7,8 +7,8 @@
 import { ReactNode, useState, useEffect } from 'react';
 import { Box, type SxProps, type Theme } from '@mui/material';
 import { Close as CloseIcon, WarningAmber as WarningAmberIcon, Campaign as CampaignIcon } from '@mui/icons-material';
-import { mergeSx } from "../../utils";
-import { AnnouncementProps } from "./TopBar";
+import { UUID } from 'crypto';
+import { mergeSx } from '../../utils';
 
 const styles = {
     banner: (theme) => ({
@@ -66,6 +66,13 @@ export interface MessageBannerProps {
     announcementInfos?: AnnouncementProps;
 }
 
+export type AnnouncementProps = {
+    announcementId: UUID;
+    message: string;
+    duration: number;
+    severity: string;
+};
+
 function MessageBanner({ children, announcementInfos }: MessageBannerProps) {
     const [visible, setVisible] = useState(true);
 
@@ -84,24 +91,26 @@ function MessageBanner({ children, announcementInfos }: MessageBannerProps) {
         }
     }, [announcementInfos]);
 
-    return (visible && (
-        <Box sx={mergeSx(styles.banner, isInfo ? styles.infoBg : styles.warningBg)}>
-            {isInfo && (
-                <Box sx={mergeSx(styles.icon, styles.infoIcon)}>
-                    <CampaignIcon/>
-                </Box>
-            )}
-            {!isInfo && (
-                <Box sx={mergeSx(styles.icon, styles.warningIcon)}>
-                    <WarningAmberIcon/>
+    return (
+        visible && (
+            <Box sx={mergeSx(styles.banner, isInfo ? styles.infoBg : styles.warningBg)}>
+                {isInfo && (
+                    <Box sx={mergeSx(styles.icon, styles.infoIcon)}>
+                        <CampaignIcon />
+                    </Box>
+                )}
+                {!isInfo && (
+                    <Box sx={mergeSx(styles.icon, styles.warningIcon)}>
+                        <WarningAmberIcon />
+                    </Box>
+                )}
+                <Box sx={styles.message}>{children}</Box>
+                <Box sx={styles.button} onClick={() => setVisible(false)}>
+                    <CloseIcon />
                 </Box>
-            )}
-            <Box sx={styles.message}>{children}</Box>
-            <Box sx={styles.button} onClick={() => setVisible(false)}>
-                <CloseIcon/>
             </Box>
-        </Box>
-    ));
+        )
+    );
 }
 
 export default MessageBanner;

src/components/topBar/TopBar.tsx

@@ -28,7 +28,7 @@ import {
     ToggleButtonGroup,
     Toolbar,
     Typography,
-    Tooltip
+    Tooltip,
 } from '@mui/material';
 import {
     Apps as AppsIcon,
@@ -58,8 +58,7 @@ import {
     LANG_SYSTEM,
     LIGHT_THEME,
 } from '../../utils/constants/browserConstants';
-import MessageBanner from './MessageBanner';
-import { UUID } from 'crypto';
+import MessageBanner, { AnnouncementProps } from './MessageBanner';
 
 const styles = {
     grow: {
@@ -169,13 +168,6 @@ function abbreviationFromUserName(name: string) {
     return tab[0] + tab[tab.length - 1];
 }
 
-export type AnnouncementProps = {
-    announcementId: UUID;
-    message: string;
-    duration: number;
-    severity: string;
-}
-
 export type TopBarProps = Omit<GridLogoProps, 'onClick'> &
     Omit<LogoutProps, 'disabled'> &
     Omit<AboutDialogProps, 'open' | 'onClose'> & {
@@ -311,10 +303,7 @@ export function TopBar({
             )}
             {user && announcementInfos && (
                 <MessageBanner announcementInfos={announcementInfos}>
-                    <Tooltip
-                        title={announcementInfos.message}
-                        placement="bottom"
-                    >
+                    <Tooltip title={announcementInfos.message} placement="bottom">
                         <span>{announcementInfos.message}</span>
                     </Tooltip>
                 </MessageBanner>