feat: replace icon with Litmus logo in navigation and breadcrumb components

Author: adi-ray

chaoscenter/web/src/components/LitmusBreadCrumbs/LitmusBreadCrumbs.tsx

@@ -1,6 +1,7 @@
 import { Breadcrumbs, BreadcrumbsProps } from '@harnessio/uicore';
 import React from 'react';
 import { useAppStore } from '@context';
+import litmusLogo from '@images/litmus-icon-color.svg';
 
 interface LitmusBreadCrumbsProps extends BreadcrumbsProps {
   baseUrl?: string;
@@ -13,14 +14,12 @@ export default function LitmusBreadCrumbs({ baseUrl, ...rest }: LitmusBreadCrumb
     {
       label: projectName || 'My Project',
       url: '/',
-      iconProps: { name: 'chaos-litmuschaos' as any } // cast to 'any' to avoid TS type issue
+      icon: <img src={litmusLogo} alt="Litmus" style={{ width: '16px', height: '16px', marginRight: '8px' }} />
     },
     ...(rest.links || [])
   ];
 
-  const validLinks = combinedLinks.filter(
-    link => link && typeof link.label === 'string' && link.label.trim() !== ''
-  );
+  const validLinks = combinedLinks.filter(link => link && typeof link.label === 'string' && link.label.trim() !== '');
 
   return <Breadcrumbs {...rest} links={validLinks} />;
 }

chaoscenter/web/src/components/MainNav/MainNav.tsx

@@ -2,11 +2,11 @@ import React from 'react';
 import cx from 'classnames';
 import { NavLink as Link } from 'react-router-dom';
 import { Text, Layout, Avatar } from '@harnessio/uicore';
-import { Icon } from '@harnessio/icons';
 import { Color, FontVariation } from '@harnessio/design-system';
 import { useStrings } from '@strings';
 import { useAppStore } from '@context';
 import { useRouteWithBaseUrl } from '@hooks';
+import litmusLogo from '@images/litmus-icon-color.svg';
 import css from './MainNav.module.scss';
 
 export const LitmusNavItem = (): React.ReactElement => {
@@ -22,7 +22,7 @@ export const LitmusNavItem = (): React.ReactElement => {
         to={projectScopedPaths.toDashboard}
       >
         <Layout.Vertical flex={{ align: 'center-center' }} spacing="small" padding="medium">
-          <Icon name="chaos-litmuschaos" size={30} />
+          <img src={litmusLogo} alt="Litmus" style={{ width: '30px', height: '30px' }} />
           <Text
             font={{ weight: 'semi-bold', align: 'center' }}
             padding={{ bottom: 'xsmall' }}

chaoscenter/web/src/components/SideNav/SideNav.tsx

@@ -11,6 +11,7 @@ import ProjectSelectorController from '@controllers/ProjectSelector';
 import NavExpandable from '@components/NavExpandable';
 import { getUserDetails } from '@utils';
 import { PermissionGroup } from '@models';
+import litmusLogo from '@images/litmus-icon-color.svg';
 import css from './SideNav.module.scss';
 
 interface SidebarLinkProps extends NavLinkProps {
@@ -126,7 +127,7 @@ export default function SideNav(): ReactElement {
       <Container className={css.bottomContainer} data-isroutepresent={isPathPresent('settings')}>
         {!isPathPresent('settings') && (
           <div className={css.iconContainer}>
-            <Icon className={css.icon} name={'chaos-litmuschaos'} size={200} />
+            <img src={litmusLogo} alt="Litmus" style={{ width: '200px', height: 'auto', maxHeight: '200px' }} />
           </div>
         )}
         <div className={css.titleContainer}>

chaoscenter/web/src/images/litmus-icon-color.svg

@@ -1,6 +1,5 @@
 import React from 'react';
 import { Formik, Button, Text, Container, Layout } from '@harnessio/uicore';
-import { Icon } from '@harnessio/icons';
 import { Color } from '@harnessio/design-system';
 import { Form } from 'formik';
 import * as Yup from 'yup';
@@ -10,6 +9,7 @@ import { useStrings } from '@strings';
 import type { ErrorModel, LoginMutationProps, LoginResponse, GetCapabilitiesOkResponse } from '@api/auth';
 import PasswordInput from '@components/PasswordInput';
 import UserNameInput from '@components/UserNameInput';
+import litmusLogo from '@images/litmus-icon-color.svg';
 
 interface LoginForm {
   username: string;
@@ -27,7 +27,7 @@ export const LoginPageView = ({ handleLogin, loading, capabilities }: LoginPageV
 
   return (
     <AuthLayout>
-      <Icon name="chaos-litmuschaos" size={60} margin={{ bottom: 'medium' }} />
+      <img src={litmusLogo} alt="Litmus Logo" style={{ width: '60px', height: '60px', marginBottom: '1rem' }} />
       <Text font={{ size: 'large', weight: 'bold' }} color={Color.BLACK}>
         {getString('welcomeToLitmus')}
       </Text>