fix: feature pipeline status dark mode

frontend/web/components/release-pipelines/FeaturePipelineStatus.tsx

@@ -2,6 +2,7 @@ import {
   useGetReleasePipelineQuery,
   useGetReleasePipelinesQuery,
 } from 'common/services/useReleasePipelines'
+import { useGetEnvironmentsQuery } from 'common/services/useEnvironment'
 import AccordionCard from 'components/base/accordion/AccordionCard'
 import { useMemo } from 'react'
 
@@ -39,7 +40,7 @@ const FeaturePipelineStatus = ({
 
   const { data: releasePipeline } = useGetReleasePipelineQuery(
     {
-      pipelineId: matchingReleasePipeline?.id ?? NaN,
+      pipelineId: matchingReleasePipeline?.id ?? 0,
       projectId: Number(projectId),
     },
     {
@@ -50,6 +51,16 @@ const FeaturePipelineStatus = ({
   const stages = releasePipeline?.stages
   const totalStages = (stages?.length ?? 0) + 1
 
+  const { data: environments } = useGetEnvironmentsQuery(
+    { projectId: Number(projectId) },
+    { skip: !projectId || !stages?.length },
+  )
+  const envNameById = useMemo(() => {
+    const map = new Map<number, string>()
+    environments?.results?.forEach((env) => map.set(env.id, env.name))
+    return map
+  }, [environments])
+
   const stageHasFeature = useMemo(
     () =>
       stages?.find((stage) => {
@@ -74,7 +85,7 @@ const FeaturePipelineStatus = ({
             key={stage.id}
             stageOrder={stage.order}
             stageName={stage.name}
-            stageEnvironment={stage.environment}
+            envName={envNameById.get(stage.environment)}
             stageActions={stage.actions}
             stageTrigger={stage.trigger}
             totalStages={totalStages}

frontend/web/components/release-pipelines/StageStatus.tsx

@@ -1,6 +1,4 @@
-import ProjectStore from 'common/stores/project-store'
 import {
-  Environment,
   Features,
   StageAction,
   StageTrigger,
@@ -18,44 +16,36 @@ interface StageStatusProps {
   totalStages: number
   stageActions?: StageAction[]
   stageTrigger?: StageTrigger
-  stageEnvironment?: number
+  envName?: string
   featureInStage?: Features[number]
   isCompleted?: boolean
 }
 
 const StageStatus = ({
+  envName,
   featureInStage,
   isCompleted,
   stageActions,
-  stageEnvironment,
   stageName,
   stageOrder,
   stageTrigger,
   totalStages,
 }: StageStatusProps) => {
   const isFeatureInStage = !!featureInStage
   const showLine = totalStages > 1
-  const lastStage = stageOrder === totalStages - 1
+  const isLastStage = stageOrder === totalStages - 1
   const showLeftLine = showLine && stageOrder > 0
-  const showRightLine = showLine && stageOrder !== totalStages - 1
+  const showRightLine = showLine && !isLastStage
 
   const isWaiting =
     stageTrigger?.trigger_type === StageTriggerType.WAIT_FOR && isFeatureInStage
-  const isLastStage = stageOrder === totalStages - 1
-
-  const stageStyle = {
-    marginRight: lastStage ? '0px' : '24px',
-  }
-
-  const env = ProjectStore.getEnvironmentById(
-    stageEnvironment,
-  ) as unknown as Environment
-  const envName = env?.name
 
   return (
     <div
-      className='flex align-items-center gap-2 position-relative flex-1'
-      style={stageStyle}
+      className={classNames(
+        'flex align-items-center gap-2 position-relative flex-1',
+        isLastStage ? 'me-0' : 'me-4',
+      )}
     >
       {showLeftLine && (
         <div
@@ -81,15 +71,10 @@ const StageStatus = ({
             })}
           >
             {isWaiting ? (
-              <Icon name='timer' width={18} height={18} fill='#6837FC' />
+              <Icon name='timer' width={18} height={18} />
             ) : undefined}
             {isCompleted ? (
-              <Icon
-                name='checkmark-circle'
-                width={18}
-                height={18}
-                fill='#53af41'
-              />
+              <Icon name='checkmark-circle' width={18} height={18} />
             ) : undefined}
           </div>
         }
@@ -108,7 +93,7 @@ const StageStatus = ({
       <span>
         <b>{stageName}</b>
       </span>
-      {envName && <p className='text-muted'>{envName}</p>}
+      {envName && <span className='text-muted'>{envName}</span>}
     </div>
   )
 }

frontend/web/styles/components/_feature-pipeline-status.scss

@@ -1,7 +1,7 @@
   .circle-container {
-      background-color: white;
+      background-color: var(--color-surface-default);
       border: 4px solid;
-      border-color: #AAA;
+      border-color: var(--color-border-default);
       border-radius: 50%;
       height: 40px;
       width: 40px;
@@ -13,11 +13,13 @@
       justify-content: center;
 
       &.in-stage {
-        border-color: #6837fc;
+        border-color: var(--color-border-action);
+        color: var(--color-icon-action);
       }
 
       &.completed {
-        border-color: #53af41;
+        border-color: var(--color-border-success);
+        color: var(--color-icon-success);
       }
 
   }
@@ -27,7 +29,7 @@
   }
 
   .line-left {
-    background-color: #AAA;
+    background-color: var(--color-border-default);
     border: unset;
     height: 3px;
     left: 0%;
@@ -36,11 +38,11 @@
     z-index: 1;
 
     &.completed {
-      background-color: #53af41;
+      background-color: var(--color-border-success);
     }
   }
   .line-right {
-    background-color: #AAA;
+    background-color: var(--color-border-default);
     border: unset;
     height: 3px;
     left: 50%;
@@ -49,6 +51,6 @@
     z-index: 1;
 
     &.completed {
-      background-color: #53af41;
+      background-color: var(--color-border-success);
     }
-  }
+  }