From e694cce83d81c6e4b8ae6170d1aa777e1d33e999 Mon Sep 17 00:00:00 2001
From: Eddasol <esole@equinor.com>
Date: Wed, 31 May 2023 12:51:31 +0200
Subject: [PATCH] Use chip instead of styling to create circle

---
 .../Pages/MissionPage/TaskOverview/TaskTable.tsx | 16 ++++++----------
 1 file changed, 6 insertions(+), 10 deletions(-)

diff --git a/frontend/src/components/Pages/MissionPage/TaskOverview/TaskTable.tsx b/frontend/src/components/Pages/MissionPage/TaskOverview/TaskTable.tsx
index 2ce02c98..9cfa08ad 100644
--- a/frontend/src/components/Pages/MissionPage/TaskOverview/TaskTable.tsx
+++ b/frontend/src/components/Pages/MissionPage/TaskOverview/TaskTable.tsx
@@ -1,4 +1,4 @@
-import { Table, Typography } from '@equinor/eds-core-react'
+import { Chip, Table, Typography } from '@equinor/eds-core-react'
 import { Mission } from 'models/Mission'
 import styled from 'styled-components'
 import { TaskStatusDisplay } from './TaskStatusDisplay'
@@ -12,12 +12,6 @@ const StyledTable = styled(Table)`
     font: equinor;
 `
 
-const Circle = styled.div`
-    border-radius: 50%;
-    text-align: center;
-    min-width: 1.2rem;
-`
-
 interface MissionProps {
     mission?: Mission
 }
@@ -57,9 +51,11 @@ function renderTasks(tasks: Task[]) {
         return (
             <Table.Row key={order} style={rowStyle}>
                 <Table.Cell>
-                    <Circle style={{ background: markerColors.fillColor, color: markerColors.textColor }}>
-                        {order}
-                    </Circle>
+                    <Chip style={{ background: markerColors.fillColor }}>
+                        <Typography variant="body_short_bold" style={{ color: markerColors.textColor }}>
+                            {order}
+                        </Typography>
+                    </Chip>
                 </Table.Cell>
                 <Table.Cell> {renderTagId(task)}</Table.Cell>
                 <Table.Cell> {renderDescription(task)}</Table.Cell>