status icons fixed for all type of status.

Author: talhainvenxion

src/constants/icons.ts

@@ -6,6 +6,7 @@ export enum iconColors {
   primary = 'primary',
   red = 'red',
   orange = 'orange',
+  mustard = 'mustard',
 }
 
 export enum iconSizes {

src/ui/_globalStyles.scss

@@ -18,6 +18,7 @@ $redColor: var(--red);
 $orangeColor: var(--orange);
 $darkerOrangeColor: var(--darkOrange);
 $ButterflyBlue:  var(--butterflyBlue);
+$mustardColor: var(--mustard);
 
 $imageFallbackBackgroundColor: var(--lightestGrey);
 

src/ui/components/circles/index.module.scss

@@ -57,3 +57,6 @@
 .orange {
   background-color: $orangeColor;
 }
+.mustard {
+  background-color: $mustardColor;
+}

src/ui/components/circles/index.tsx

@@ -13,7 +13,8 @@ type Colors =
   | 'green'
   | 'grey'
   | 'lightestGrey'
-  | 'orange';
+  | 'orange'
+  | 'mustard';
 
 export const ColoredCircle: React.FC<{ color: Colors; size: Sizes }> = ({
   children,

src/ui/components/icons/assets/Cached.svg

@@ -39,6 +39,8 @@ import { ReactComponent as StackComponent } from './assets/StackComponent.svg';
 import { ReactComponent as FunnelFill } from './assets/FunnelFill.svg';
 import { ReactComponent as Delete } from './assets/Delete.svg';
 import { ReactComponent as SimplePlus } from './assets/SimplePlus.svg';
+import { ReactComponent as Inprogress } from './assets/InProgress.svg';
+import { ReactComponent as Cached } from './assets/Cached.svg';
 
 import styles from './index.module.scss';
 import { joinClassNames } from '../../../utils/styles';
@@ -111,6 +113,8 @@ const icons = {
   table: createIcon({ Component: Table }),
   check: createIcon({ Component: Check, useStroke: true }),
   close: createIcon({ Component: Close, useStroke: true }),
+  cached: createIcon({ Component: Cached, useStroke: true }),
+  inProgress: createIcon({ Component: Inprogress, useStroke: true }),
   chevronLeft: createIcon({ Component: ChevronLeft }),
   chevronRight: createIcon({
     Component: ChevronLeft,

src/ui/components/icons/assets/InProgress.svg

@@ -16,4 +16,5 @@
   --red: #FF5C93;
   --blue: #22BBDD;
   --butterflyBlue:  #3699FF;
+  --mustard:#E8A562;
 }

src/ui/components/icons/index.tsx

@@ -11,8 +11,8 @@ import {
 import { useService } from './useService';
 
 export const Status: React.FC<{ pipeline: TPipeline }> = ({ pipeline }) => {
-  const { lastThreeRuns } = useService({ pipeline });
-  // const lastThreeRuns: any[] = ['failed', 'completed', 'running', 'cached'];
+  // const { lastThreeRuns } = useService({ pipeline });
+  const lastThreeRuns: any[] = ['failed', 'completed', 'running', 'cached'];
   return (
     <FlexBox alignItems="center">
       {lastThreeRuns.map((status: any, index: number) => (
@@ -30,7 +30,10 @@ export const Status: React.FC<{ pipeline: TPipeline }> = ({ pipeline }) => {
             <If condition={status === runStatus.RUNNING}>
               {() => (
                 <ColoredCircle color="secondary" size="xs">
-                  {/* <icons color={iconColors.orange} size={iconSizes.xs} /> */}
+                  <icons.inProgress
+                    color={iconColors.white}
+                    size={iconSizes.xs}
+                  />
                 </ColoredCircle>
               )}
             </If>
@@ -43,8 +46,8 @@ export const Status: React.FC<{ pipeline: TPipeline }> = ({ pipeline }) => {
             </If>
             <If condition={status === runStatus.CACHED}>
               {() => (
-                <ColoredCircle color="primary" size="xs">
-                  {/* <icons.close color={iconColors.white} size={iconSizes.xs} /> */}
+                <ColoredCircle color="mustard" size="xs">
+                  <icons.cached color={iconColors.white} size={iconSizes.xs} />
                 </ColoredCircle>
               )}
             </If>