Improve process styling when there are no stages

FuturePortal · Mar 25, 2022 · 58d6e41 · 58d6e41
1 parent eadb7a8
commit 58d6e41
Show file tree

Hide file tree

Showing 2 changed files with 3 additions and 4 deletions.
diff --git a/frontend/App/Statuses/Status/Process/Process.style.tsx b/frontend/App/Statuses/Status/Process/Process.style.tsx
@@ -15,6 +15,7 @@ export const ProcessContainer = styled.div<ProcessContainerProps>`
 
 export const Stages = styled.div`
     display: flex;
+    margin-top: 0.5rem;
 `;
 
 type StageProps = {
@@ -83,6 +84,4 @@ export const StageContainer = styled.div`
     }
 `;
 
-export const Details = styled.div`
-    margin-bottom: 0.5rem;
-`;
+export const Details = styled.div``;
diff --git a/frontend/App/Statuses/Status/Process/Process.tsx b/frontend/App/Statuses/Status/Process/Process.tsx
@@ -35,7 +35,7 @@ const Process = ({ process }: Props): ReactElement => {
             <Details>
                 <Icon icon="notes" /> {process.title}
             </Details>
-            {process.stages && (
+            {process.stages && process.stages.length > 0 && (
                 <Stages>
                     {process.stages.map((stage) => (
                         <StageContainer key={stage.id}>