[RHOAIENG-6322] Use constants for colors on images in AI Flows

opendatahub-io · Apr 30, 2024 · b206a7a · b206a7a
1 parent 84ac502
commit b206a7a
Show file tree

Hide file tree

Showing 8 changed files with 66 additions and 31 deletions.
diff --git a/frontend/src/images/UI_icon-Red_Hat-Branch-Color.svg b/frontend/src/images/UI_icon-Red_Hat-Branch-Color.svg
diff --git a/frontend/src/images/UI_icon-Red_Hat-Chart-Color.svg b/frontend/src/images/UI_icon-Red_Hat-Chart-Color.svg
diff --git a/frontend/src/images/UI_icon-Red_Hat-Folder-Color.svg b/frontend/src/images/UI_icon-Red_Hat-Folder-Color.svg
diff --git a/frontend/src/pages/home/aiFlows/AIFlowCard.tsx b/frontend/src/pages/home/aiFlows/AIFlowCard.tsx
@@ -5,17 +5,15 @@ import { SectionType } from '~/concepts/design/utils';
 
 type AIFlowCardProps = {
   title: string;
-  imgSrc: string;
-  imgAlt: string;
+  image: React.ReactNode;
   sectionType: SectionType;
   selected: boolean;
   onSelect: () => void;
 } & CardProps;
 
 const AIFlowCard: React.FC<AIFlowCardProps> = ({
   title,
-  imgSrc,
-  imgAlt,
+  image,
   sectionType,
   selected,
   onSelect,
@@ -38,9 +36,7 @@ const AIFlowCard: React.FC<AIFlowCardProps> = ({
   >
     <CardBody>
       <Stack hasGutter>
-        <Bullseye>
-          <img style={{ height: 32 }} src={imgSrc} alt={imgAlt} />
-        </Bullseye>
+        <Bullseye>{image}</Bullseye>
         <Bullseye>
           <TextContent>
             <Text component="p" style={{ textAlign: 'center' }}>

diff --git a/frontend/src/pages/home/aiFlows/flowImages/BranchImage.tsx b/frontend/src/pages/home/aiFlows/flowImages/BranchImage.tsx
@@ -0,0 +1,12 @@
+import * as React from 'react';
+
+const BranchImage: React.FC<React.SVGProps<SVGSVGElement>> = ({ ...props }) => (
+  <svg viewBox="0 0 26 34" fill="none" {...props}>
+    <path
+      d="M26 9C26 6.79 24.21 5 22 5C19.79 5 18 6.79 18 9C18 10.86 19.28 12.41 21 12.86V14.02C21 15.67 19.66 17.01 18.01 17.02C18.01 17.02 18.01 17.02 18 17.02H8C6.87 17.02 5.84 17.41 5 18.04V7.86C6.72 7.41 8 5.86 8 4C8 1.79 6.21 0 4 0C1.79 0 0 1.79 0 4C0 5.86 1.28 7.41 3 7.86V26.14C1.28 26.59 0 28.14 0 30C0 32.21 1.79 34 4 34C6.21 34 8 32.21 8 30C8 28.14 6.72 26.59 5 26.14V22.01C5 20.36 6.34 19.02 7.99 19.01C7.99 19.01 7.99 19.01 8 19.01H18C20.76 19.01 23 16.77 23 14.01V12.85C24.72 12.4 26 10.85 26 8.99V9ZM2 4C2 2.9 2.9 2 4 2C5.1 2 6 2.9 6 4C6 5.1 5.1 6 4 6C2.9 6 2 5.1 2 4ZM6 30C6 31.1 5.1 32 4 32C2.9 32 2 31.1 2 30C2 28.9 2.9 28 4 28C5.1 28 6 28.9 6 30ZM22 11C20.9 11 20 10.1 20 9C20 7.9 20.9 7 22 7C23.1 7 24 7.9 24 9C24 10.1 23.1 11 22 11Z"
+      fill="currentColor"
+    />
+  </svg>
+);
+
+export default BranchImage;
diff --git a/frontend/src/pages/home/aiFlows/flowImages/ChartImage.tsx b/frontend/src/pages/home/aiFlows/flowImages/ChartImage.tsx
@@ -0,0 +1,20 @@
+import * as React from 'react';
+
+const ChartImage: React.FC<React.SVGProps<SVGSVGElement>> = ({ ...props }) => (
+  <svg viewBox="0 0 33 32" fill="none" {...props}>
+    <path
+      d="M1.33332 24.0003C1.59332 24.0003 1.84332 23.9003 2.04332 23.7103L9.33332 16.4203L15.6233 22.7103C16.0133 23.1003 16.6433 23.1003 17.0333 22.7103L32.0333 7.71031C32.4233 7.32031 32.4233 6.69031 32.0333 6.30031C31.6433 5.91031 31.0133 5.91031 30.6233 6.30031L16.3333 20.5903L10.0433 14.3003C9.65332 13.9103 9.02332 13.9103 8.63332 14.3003L0.63332 22.3003C0.24332 22.6903 0.24332 23.3203 0.63332 23.7103C0.83332 23.9103 1.08332 24.0003 1.34332 24.0003H1.33332Z"
+      fill="currentColor"
+    />
+    <path
+      d="M31.3334 30H2.33337V28C2.33337 27.45 1.88337 27 1.33337 27C0.783374 27 0.333374 27.45 0.333374 28V31C0.333374 31.55 0.783374 32 1.33337 32H31.3334C31.8834 32 32.3334 31.55 32.3334 31C32.3334 30.45 31.8834 30 31.3334 30Z"
+      fill="currentColor"
+    />
+    <path
+      d="M1.33337 17C1.88337 17 2.33337 16.55 2.33337 16V1C2.33337 0.45 1.88337 0 1.33337 0C0.783374 0 0.333374 0.45 0.333374 1V16C0.333374 16.55 0.783374 17 1.33337 17Z"
+      fill="currentColor"
+    />
+  </svg>
+);
+
+export default ChartImage;
diff --git a/frontend/src/pages/home/aiFlows/flowImages/ProjectImage.tsx b/frontend/src/pages/home/aiFlows/flowImages/ProjectImage.tsx
@@ -0,0 +1,12 @@
+import * as React from 'react';
+
+const ProjectImage: React.FC<React.SVGProps<SVGSVGElement>> = ({ ...props }) => (
+  <svg viewBox="0 0 33 26" fill="none" {...props}>
+    <path
+      d="M31.6667 4H29.3267L28.6467 0.79C28.5467 0.33 28.1367 0 27.6667 0H17.6667C17.1967 0 16.7867 0.33 16.6867 0.79L16.0067 4H6.66667C6.11667 4 5.66667 4.45 5.66667 5V20C5.66667 20.55 6.11667 21 6.66667 21C7.21667 21 7.66667 20.55 7.66667 20V6H16.8167C17.2867 6 17.6967 5.67 17.7967 5.21L18.4767 2H26.8567L27.5367 5.21C27.6367 5.67 28.0467 6 28.5167 6H30.6667V24H2.66667V5C2.66667 4.45 2.21667 4 1.66667 4C1.11667 4 0.666672 4.45 0.666672 5V25C0.666672 25.55 1.11667 26 1.66667 26H31.6667C32.2167 26 32.6667 25.55 32.6667 25V5C32.6667 4.45 32.2167 4 31.6667 4Z"
+      fill="currentColor"
+    />
+  </svg>
+);
+
+export default ProjectImage;
diff --git a/frontend/src/pages/home/aiFlows/useAIFlows.tsx b/frontend/src/pages/home/aiFlows/useAIFlows.tsx
@@ -1,12 +1,12 @@
 import * as React from 'react';
 import { PageSection, Stack, Text, TextContent } from '@patternfly/react-core';
-import projectIcon from '~/images/UI_icon-Red_Hat-Folder-Color.svg';
-import pipelineIcon from '~/images/UI_icon-Red_Hat-Branch-Color.svg';
-import chartIcon from '~/images/UI_icon-Red_Hat-Chart-Color.svg';
-import { SectionType } from '~/concepts/design/utils';
+import { SectionType, sectionTypeBorderColor } from '~/concepts/design/utils';
 import useIsAreaAvailable from '~/concepts/areas/useIsAreaAvailable';
 import { SupportedArea } from '~/concepts/areas';
 import EvenlySpacedGallery from '~/components/EvenlySpacedGallery';
+import ProjectImage from './flowImages/ProjectImage';
+import BranchImage from './flowImages/BranchImage';
+import ChartImage from './flowImages/ChartImage';
 import ProjectsGallery from './ProjectsGallery';
 import CreateAndTrainGallery from './CreateAndTrainGallery';
 import DeployAndMonitorGallery from './DeployAndMonitorGallery';
@@ -27,8 +27,11 @@ export const useAIFlows = (): React.ReactNode => {
           key="projects"
           data-testid="ai-flow-projects-card"
           title="Organize your work with projects"
-          imgSrc={projectIcon}
-          imgAlt="organizing your work"
+          image={
+            <ProjectImage
+              style={{ color: sectionTypeBorderColor(SectionType.organize), width: 42, height: 42 }}
+            />
+          }
           sectionType={SectionType.organize}
           selected={selected === 'organize'}
           onSelect={() => setSelected((prev) => (prev === 'organize' ? undefined : 'organize'))}
@@ -41,8 +44,11 @@ export const useAIFlows = (): React.ReactNode => {
           key="train"
           data-testid="ai-flow-train-card"
           title="Create and train models"
-          imgSrc={pipelineIcon}
-          imgAlt="train your models"
+          image={
+            <BranchImage
+              style={{ color: sectionTypeBorderColor(SectionType.training), width: 42, height: 42 }}
+            />
+          }
           sectionType={SectionType.training}
           selected={selected === 'train'}
           onSelect={() => setSelected((prev) => (prev === 'train' ? undefined : 'train'))}
@@ -55,8 +61,11 @@ export const useAIFlows = (): React.ReactNode => {
           key="models"
           data-testid="ai-flow-models-card"
           title="Deploy and monitor models"
-          imgSrc={chartIcon}
-          imgAlt="deploy models"
+          image={
+            <ChartImage
+              style={{ color: sectionTypeBorderColor(SectionType.serving), width: 42, height: 42 }}
+            />
+          }
           sectionType={SectionType.serving}
           selected={selected === 'serving'}
           onSelect={() => setSelected((prev) => (prev === 'serving' ? undefined : 'serving'))}