Merge pull request #1136 from saurabhraghuvanshii/lint

lint the  file

Author: leecalcote

CONTRIBUTING.md

@@ -148,4 +148,5 @@ This repository and site are available as open source under the terms of the [Ap
 <p>The <a href="https://layer5.io/community">Layer5 community</a> represents the largest collection of service mesh projects and their maintainers in the world.</p>
 
 **Open Source First**
+
 <p>At Layer5, we champion developer-defined infrastructure, giving engineers the power to reshape application delivery. We empower operators in reimagining how they manage modern infrastructure: collaboratively.</p>

src/custom/Modal/index.tsx

@@ -5,7 +5,6 @@ import { ContainedButton, OutlinedButton, TextButton } from '../../base/Button/B
 import { iconLarge } from '../../constants/iconsSizes';
 import { CloseIcon, FullScreenIcon } from '../../icons';
 import FullScreenExitIcon from '../../icons/Fullscreen/FullScreenExitIcon';
-import { darkModalGradient, lightModalGradient } from '../../theme/colors/colors';
 import { CustomTooltip } from '../CustomTooltip';
 import { HelperTextPopover } from '../HelperTextPopover';
 
@@ -132,10 +131,7 @@ export const ModalBody = styled(Paper)(({ theme }) => ({
 const StyledFooter = styled('div', {
   shouldForwardProp: (prop) => prop !== 'variant'
 })<ModalFooterProps>(({ theme, variant, hasHelpText }) => ({
-  background:
-    variant === 'filled'
-      ? (theme.palette.surface.tint)
-      : 'transparent',
+  background: variant === 'filled' ? theme.palette.surface.tint : 'transparent',
   display: 'flex',
   alignItems: 'center',
   justifyContent: hasHelpText ? 'space-between' : 'end',
@@ -175,7 +171,7 @@ export const Modal: React.FC<ModalProps> = ({
       {...props}
     >
       {title && (
-        <ModalStyledHeader className='modal-header' data-testid="modal-header">
+        <ModalStyledHeader className="modal-header" data-testid="modal-header">
           {headerIcon && <Box data-testid="modal-header-icon">{headerIcon}</Box>}
           <Typography component={'div'} variant="h6" data-testid="modal-title">
             {title}
@@ -199,7 +195,11 @@ export const Modal: React.FC<ModalProps> = ({
                 )}
               </CustomTooltip>
             )}
-            <CloseBtn onClick={closeModal} className='modal-close-btn' data-testid="modal-close-btn">
+            <CloseBtn
+              onClick={closeModal}
+              className="modal-close-btn"
+              data-testid="modal-close-btn"
+            >
               <CloseIcon {...iconLarge} fill="#fff"></CloseIcon>
             </CloseBtn>
           </div>
@@ -214,7 +214,7 @@ export const Modal: React.FC<ModalProps> = ({
 
 export const ModalFooter: React.FC<ModalFooterProps> = ({ helpText, children, variant }) => {
   return (
-    <StyledFooter className='modal-footer' variant={variant} hasHelpText={!!helpText}>
+    <StyledFooter className="modal-footer" variant={variant} hasHelpText={!!helpText}>
       {helpText && (
         // <CustomTooltip title={helpText} variant="standard" placement="top">
         //   <IconButton>

src/theme/ThemeProvider.tsx

@@ -1,7 +1,7 @@
 import { EmotionCache } from '@emotion/react';
-import { CssBaseline,  PaletteMode, Theme, ThemeProvider } from '@mui/material';
+import { CssBaseline, PaletteMode, Theme, ThemeProvider } from '@mui/material';
 import React from 'react';
-import { createCustomTheme,PrimitivePalette } from './theme';
+import { createCustomTheme, PrimitivePalette } from './theme';
 
 interface SistentProviderContextType {
   emotionCache?: EmotionCache;
@@ -23,7 +23,7 @@ function SistentThemeProvider({
   customTheme
 }: SistentThemeProviderProps): JSX.Element {
   const theme = React.useMemo<Theme>(
-    () => createCustomTheme(initialMode, customTheme ),
+    () => createCustomTheme(initialMode, customTheme),
     [initialMode, customTheme]
   );
   return (

src/theme/index.tsx

@@ -9,14 +9,18 @@ import {
   useMediaQuery,
   useTheme
 } from '@mui/material';
-export { darkModePalette, lightModePalette } from './palette';
-export { typography } from './typography';
-export {type PrimitivePalette,SistentDefaultPrimitivePaletteDark,SistentDefaultPrimitivePaletteLight} from "./theme";
 export * from './colors';
+export { darkModePalette, lightModePalette } from './palette';
+export {
+  SistentDefaultPrimitivePaletteDark,
+  SistentDefaultPrimitivePaletteLight,
+  type PrimitivePalette
+} from './theme';
 export {
   default as SistentThemeProvider,
   SistentThemeProviderWithoutBaseLine
 } from './ThemeProvider';
+export { typography } from './typography';
 
 export { ThemeProvider, alpha, createTheme, keyframes, lighten, styled, useMediaQuery, useTheme };
 export type { Theme };

src/theme/palette.ts

@@ -170,70 +170,68 @@ declare module '@mui/material/styles' {
       };
     };
   }
-     
-     // surface tokens need to have enough contrast 
-    // with text and interactive elements
- type    SurfaceTokens = {
-
-       /** main page background, content containers (pure bg color) */
-      primary: string;
-      
-      /** secondary surfaces (slightly darker bg) */
-      secondary: string;
-      
-      /** tertiary surfaces (even darker bg) */
-      tertiary: string;
-      
-      /** floating elements with depth (bg + shadow) */
-      elevated: string;
-      
-      /** modal backdrops (semi-transparent bg) */
-      overlay: string;
-
-      /** highlight surfaces (eg. modal headers , tabs, ) */
-      tint: string;
-      
-      /** high contrast alternative (fg as bg) */
-      inverse: string;
-    }
 
- type InteractiveTokens  =  {
-        /** default interactive elements (primary color) */
-        primary: string;
-    
-        /** hover state for interactive elements (primary hover tint) */
-        hover: string;
-    
-        /** disabled state for interactive elements (primary disabled tint) */
-        disabled?: string;
-    
-        /** pressed state for interactive elements (primary pressed tint) */
-        pressed: string;
-    
-        /** secondary interactive elements (secondary color) */
-        secondary: string;
-    
-        /** tertiary interactive elements (tertiary color) */
-        tertiary: string;
-    };
+  // surface tokens need to have enough contrast
+  // with text and interactive elements
+  type SurfaceTokens = {
+    /** main page background, content containers (pure bg color) */
+    primary: string;
 
-type  NavigationTokens =  {
-        /** main navigation bar background */
-        primary: string;
-    
-        /** secondary navigation bar background */
-        secondary: string;
+    /** secondary surfaces (slightly darker bg) */
+    secondary: string;
 
-        /** active navigation item background */
-        active: string;
+    /** tertiary surfaces (even darker bg) */
+    tertiary: string;
 
-        /** hover state for navigation items */ 
-        hover: string;
-    };
+    /** floating elements with depth (bg + shadow) */
+    elevated: string;
+
+    /** modal backdrops (semi-transparent bg) */
+    overlay: string;
+
+    /** highlight surfaces (eg. modal headers , tabs, ) */
+    tint: string;
+
+    /** high contrast alternative (fg as bg) */
+    inverse: string;
+  };
+
+  type InteractiveTokens = {
+    /** default interactive elements (primary color) */
+    primary: string;
+
+    /** hover state for interactive elements (primary hover tint) */
+    hover: string;
+
+    /** disabled state for interactive elements (primary disabled tint) */
+    disabled?: string;
+
+    /** pressed state for interactive elements (primary pressed tint) */
+    pressed: string;
+
+    /** secondary interactive elements (secondary color) */
+    secondary: string;
+
+    /** tertiary interactive elements (tertiary color) */
+    tertiary: string;
+  };
+
+  type NavigationTokens = {
+    /** main navigation bar background */
+    primary: string;
+
+    /** secondary navigation bar background */
+    secondary: string;
+
+    /** active navigation item background */
+    active: string;
+
+    /** hover state for navigation items */
+    hover: string;
+  };
 
   // Defines the options available for the palette.
   interface PaletteOptions {
-
     surface: SurfaceTokens;
     interactive: InteractiveTokens;
     navigation: NavigationTokens;
@@ -266,37 +264,34 @@ type  NavigationTokens =  {
   }
 }
 
-export type ThemePalette = PaletteOptions 
-
-
+export type ThemePalette = PaletteOptions;
 
 export const lightModePalette: PaletteOptions = {
+  surface: {
+    primary: Colors.charcoal[100],
+    secondary: Colors.charcoal[90],
+    tertiary: Colors.charcoal[80],
+    elevated: Colors.WHITE,
+    overlay: alpha(Colors.charcoal[90], 0.8),
+    inverse: Colors.charcoal[10],
+    tint: `linear-gradient(90deg, ${Colors.TEAL_BLUE} 0%, ${Colors.DARK_TEAL} 100%)`
+  },
 
-    surface: {
-        primary: Colors.charcoal[100],
-        secondary: Colors.charcoal[90],
-        tertiary: Colors.charcoal[80],
-        elevated: Colors.WHITE,
-        overlay: alpha(Colors.charcoal[90], 0.8),
-        inverse: Colors.charcoal[10],
-        tint: `linear-gradient(90deg, ${Colors.TEAL_BLUE} 0%, ${Colors.DARK_TEAL} 100%)`
-    } ,
-
-    interactive: {
-        primary: Colors.KEPPEL,
-        hover: Colors.keppel[50],
-        disabled: Colors.charcoal[90],
-        pressed: Colors.keppel[60],
-        secondary: Colors.keppel[40],
-        tertiary: Colors.keppel[70]
-    },
+  interactive: {
+    primary: Colors.KEPPEL,
+    hover: Colors.keppel[50],
+    disabled: Colors.charcoal[90],
+    pressed: Colors.keppel[60],
+    secondary: Colors.keppel[40],
+    tertiary: Colors.keppel[70]
+  },
 
-    navigation: {
-        primary: "#252e31",
-        secondary: "#294957",
-        active: Colors.KEPPEL,
-        hover: Colors.keppel[50]
-    },
+  navigation: {
+    primary: '#252e31',
+    secondary: '#294957',
+    active: Colors.KEPPEL,
+    hover: Colors.keppel[50]
+  },
 
   primary: {
     main: Colors.KEPPEL
@@ -425,31 +420,30 @@ export const lightModePalette: PaletteOptions = {
 };
 
 export const darkModePalette: PaletteOptions = {
+  surface: {
+    primary: Colors.charcoal[10],
+    secondary: Colors.charcoal[20],
+    tertiary: Colors.charcoal[30],
+    elevated: Colors.charcoal[40],
+    overlay: alpha(Colors.charcoal[20], 0.8),
+    inverse: Colors.WHITE,
+    tint: `linear-gradient(90deg, ${Colors.charcoal[30]} 0%, ${Colors.accentGrey[30]} 100%)`
+  },
+  interactive: {
+    primary: Colors.KEPPEL,
+    hover: Colors.keppel[50],
+    disabled: Colors.charcoal[30],
+    pressed: Colors.keppel[60],
+    secondary: Colors.keppel[20],
+    tertiary: Colors.keppel[10]
+  },
 
-    surface: {
-        primary: Colors.charcoal[10],
-        secondary: Colors.charcoal[20],
-        tertiary: Colors.charcoal[30],
-        elevated: Colors.charcoal[40],
-        overlay: alpha(Colors.charcoal[20], 0.8),
-        inverse: Colors.WHITE,
-        tint: `linear-gradient(90deg, ${Colors.charcoal[30]} 0%, ${Colors.accentGrey[30]} 100%)`,
-    },
-    interactive: {
-        primary: Colors.KEPPEL,
-        hover: Colors.keppel[50],
-        disabled: Colors.charcoal[30],
-        pressed: Colors.keppel[60],
-        secondary: Colors.keppel[20],
-        tertiary: Colors.keppel[10]
-    },
-
-    navigation: {
-        primary: Colors.charcoal[10],
-        secondary: Colors.charcoal[20],
-        active: Colors.KEPPEL,
-        hover: Colors.keppel[50]
-    },
+  navigation: {
+    primary: Colors.charcoal[10],
+    secondary: Colors.charcoal[20],
+    active: Colors.KEPPEL,
+    hover: Colors.keppel[50]
+  },
 
   primary: {
     main: Colors.KEPPEL