Use chip instead of styling to create circle

equinor · Jun 1, 2023 · e694cce · e694cce
1 parent cd75273
commit e694cce
Showing 1 changed file with 6 additions and 10 deletions.
diff --git 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>