refactor: replace svg as customIcon component

react/src/components/BAIStartBasicCard.tsx

@@ -35,7 +35,7 @@ const BAIStartBasicCard: React.FC<BAIStartBasicCardProps> = ({
           Button: {
             defaultBorderColor: 'none',
             defaultColor: secondary ? '#E8FAF6' : '#FFF6E8',
-            defaultBg: secondary ? '#00BD9B' : token.colorPrimary,
+            defaultBg: secondary ? '#00BD9B' : token.colorPrimaryBg,
             defaultHoverColor: secondary ? '#00BD9B' : token.colorPrimary,
             defaultHoverBorderColor: secondary ? '#00BD9B' : token.colorPrimary,
           },

react/src/components/MainLayout/WebUISider.tsx

@@ -78,7 +78,7 @@ const WebUISider: React.FC<WebUISiderProps> = (props) => {
     {
       label: 'Start', // t('webui.menu.Summary'),
       icon: <PlayCircleOutlined style={{ color: token.colorPrimaryBg }} />,
-      key: 'summary', // 'summary',
+      key: 'start', // 'summary',
     },
     {
       label: 'Dashboard',

react/src/components/icons/BatchSessionIcon.tsx

@@ -0,0 +1,12 @@
+import { ReactComponent as logo } from './BatchSession.svg';
+import Icon from '@ant-design/icons';
+import { CustomIconComponentProps } from '@ant-design/icons/lib/components/Icon';
+
+interface BatchSessionIconProps
+  extends Omit<CustomIconComponentProps, 'width' | 'height' | 'fill'> {}
+
+const BatchSessionIcon: React.FC<BatchSessionIconProps> = (props) => {
+  return <Icon component={logo} {...props} />;
+};
+
+export default BatchSessionIcon;

react/src/components/icons/ExampleStart.tsx

@@ -0,0 +1,12 @@
+import { ReactComponent as logo } from './ExampleStart.svg';
+import Icon from '@ant-design/icons';
+import { CustomIconComponentProps } from '@ant-design/icons/lib/components/Icon';
+
+interface ExampleStartIconProps
+  extends Omit<CustomIconComponentProps, 'width' | 'height' | 'fill'> {}
+
+const ExampleStartIcon: React.FC<ExampleStartIconProps> = (props) => {
+  return <Icon component={logo} {...props} />;
+};
+
+export default ExampleStartIcon;

react/src/components/icons/InteractiveSession.tsx

@@ -0,0 +1,14 @@
+import { ReactComponent as logo } from './InteractiveSession.svg';
+import Icon from '@ant-design/icons';
+import { CustomIconComponentProps } from '@ant-design/icons/lib/components/Icon';
+
+interface InteractiveSessionIconProps
+  extends Omit<CustomIconComponentProps, 'width' | 'height' | 'fill'> {}
+
+const InteractiveSessionIcon: React.FC<InteractiveSessionIconProps> = (
+  props,
+) => {
+  return <Icon component={logo} {...props} />;
+};
+
+export default InteractiveSessionIcon;

react/src/components/icons/ModelServiceIcon.tsx

@@ -0,0 +1,12 @@
+import { ReactComponent as logo } from './ModelService.svg';
+import Icon from '@ant-design/icons';
+import { CustomIconComponentProps } from '@ant-design/icons/lib/components/Icon';
+
+interface ModelServiceIconProps
+  extends Omit<CustomIconComponentProps, 'width' | 'height' | 'fill'> {}
+
+const ModelServiceIcon: React.FC<ModelServiceIconProps> = (props) => {
+  return <Icon component={logo} {...props} />;
+};
+
+export default ModelServiceIcon;

react/src/components/icons/URLStartIcon.tsx

@@ -0,0 +1,12 @@
+import { ReactComponent as logo } from './URLStart.svg';
+import Icon from '@ant-design/icons';
+import { CustomIconComponentProps } from '@ant-design/icons/lib/components/Icon';
+
+interface URLStartIconProps
+  extends Omit<CustomIconComponentProps, 'width' | 'height' | 'fill'> {}
+
+const URLStartIcon: React.FC<URLStartIconProps> = (props) => {
+  return <Icon component={logo} {...props} />;
+};
+
+export default URLStartIcon;

react/src/pages/StartPage.tsx

@@ -1,5 +1,10 @@
 import BAIStartBasicCard from '../components/BAIStartBasicCard';
 import Flex from '../components/Flex';
+import BatchSessionIcon from '../components/icons/BatchSessionIcon';
+import ExampleStartIcon from '../components/icons/ExampleStart';
+import InteractiveSessionIcon from '../components/icons/InteractiveSession';
+import ModelServiceIcon from '../components/icons/ModelServiceIcon';
+import URLStartIcon from '../components/icons/URLStartIcon';
 import { useWebUINavigate } from '../hooks';
 import { FolderAddOutlined } from '@ant-design/icons';
 import React from 'react';
@@ -30,12 +35,7 @@ const StartPage: React.FC<StartPageProps> = (props) => {
           }}
         />
         <BAIStartBasicCard
-          icon={
-            <img
-              src="/resources/icons/interactiveSession.svg"
-              alt="interactive session"
-            />
-          }
+          icon={<InteractiveSessionIcon />}
           title={
             <div>
               Start an
@@ -52,9 +52,7 @@ const StartPage: React.FC<StartPageProps> = (props) => {
           }}
         />
         <BAIStartBasicCard
-          icon={
-            <img src="/resources/icons/batchSession.svg" alt="batch session" />
-          }
+          icon={<BatchSessionIcon />}
           title={
             <div>
               Start a<br />
@@ -75,9 +73,7 @@ const StartPage: React.FC<StartPageProps> = (props) => {
       <Flex gap={16} wrap="wrap">
         <BAIStartBasicCard
           secondary
-          icon={
-            <img src="/resources/icons/modelService.svg" alt="model service" />
-          }
+          icon={<ModelServiceIcon />}
           title={
             <div>
               Start a
@@ -94,9 +90,7 @@ const StartPage: React.FC<StartPageProps> = (props) => {
         />
         <BAIStartBasicCard
           secondary
-          icon={
-            <img src="/resources/icons/exampleStart.svg" alt="example start" />
-          }
+          icon={<ExampleStartIcon />}
           title={
             <div>
               Start
@@ -111,7 +105,14 @@ const StartPage: React.FC<StartPageProps> = (props) => {
         />
         <BAIStartBasicCard
           secondary
-          icon={<img src="/resources/icons/URLStart.svg" alt="URL start" />}
+          icon={
+            // FIXME: workaround for displaying proper icon
+            <img
+              src="react/src/components/icons/URLStart.svg"
+              alt="URL start"
+            ></img>
+            // <URLStartIcon />
+          }
           title={
             <div>
               Start
@@ -125,6 +126,16 @@ const StartPage: React.FC<StartPageProps> = (props) => {
           }}
         />
       </Flex>
+      {/* <BAIStartSimpleCard
+        icon={<SessionsIcon />}
+        title={'Create a Session'}
+        footerButtonProps={{
+          onClick: () => {
+            webuiNavigate('/session/start');
+          },
+          children: 'Start Session',
+        }}
+      /> */}
     </Flex>
   );
 };

resources/theme.json

@@ -5,6 +5,7 @@
       "fontFamily": "'Ubuntu', Roboto, sans-serif",
       "colorPrimary": "#FF7A00",
       "colorLink": "#FF7A00",
+      "colorPrimaryText": "#E8FAF6",
       "colorPrimaryBg": "#FF7A00",
       "colorFillContent": "#FF9D00",
       "colorInfoHover": "#FFE3B7",