Change button to clickable text

equinor · Apr 4, 2024 · 2a376c4 · 2a376c4
1 parent 6f3c64d
commit 2a376c4
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 6 deletions.
diff --git a/frontend/src/components/Pages/MissionHistoryPage/HistoricMissionCard.tsx b/frontend/src/components/Pages/MissionHistoryPage/HistoricMissionCard.tsx
@@ -8,7 +8,6 @@ import {
 import { MissionRestartButton } from 'components/Displays/MissionButtons/MissionRestartButton'
 import { TaskStatus } from 'models/Task'
 import { useNavigate } from 'react-router-dom'
-import { TextAlignedButton } from 'components/Styles/StyledComponents'
 import { formatDateTime } from 'utils/StringFormatting'
 
 enum InspectionTableColumns {
@@ -62,9 +61,12 @@ export const HistoricMissionCard = ({ index, mission }: IndexedMissionProps) =>
                 <MissionStatusDisplay status={mission.status} />
             </Table.Cell>
             <Table.Cell id={InspectionTableColumns.Name}>
-                <TextAlignedButton variant="ghost" onClick={routeChange}>
+                <Typography
+                    link
+                    onClick={() => navigate(`${config.FRONTEND_BASE_ROUTE}/mission/${mission.id}`)}
+                >
                     {mission.name}
-                </TextAlignedButton>
+                </Typography>
             </Table.Cell>
             <Table.Cell id={InspectionTableColumns.Area}>
                 <Typography>{mission.area?.areaName}</Typography>

diff --git a/frontend/src/utils/InfoText.tsx b/frontend/src/utils/InfoText.tsx
@@ -1,13 +1,19 @@
 import { Typography, Icon } from '@equinor/eds-core-react'
 import { useLanguageContext } from 'components/Contexts/LanguageContext'
 import { Icons } from 'utils/icons'
+import styled from 'styled-components'
+
+const StyledDiv = styled.div`
+    display: flex;
+    align-items: center;
+`
 
 export const SmallScreenInfoText = () => {
     const { TranslateText } = useLanguageContext()
     return (
-        <div id="SmallScreenInfoText">
-            <Icon name={Icons.Info} size={24}></Icon>
+        <StyledDiv id="SmallScreenInfoText">
+            <Icon name={Icons.Info}> </Icon>
             <Typography>{TranslateText('Small screen info text')}</Typography>
-        </div>
+        </StyledDiv>
     )
 }