diff --git a/frontend/src/components/Alerts/BlockedRobotAlert.tsx b/frontend/src/components/Alerts/BlockedRobotAlert.tsx
index 115bf8129..e5ca472d4 100644
--- a/frontend/src/components/Alerts/BlockedRobotAlert.tsx
+++ b/frontend/src/components/Alerts/BlockedRobotAlert.tsx
@@ -1,8 +1,9 @@
-import { Button, Icon, Typography } from '@equinor/eds-core-react'
+import { Icon, Typography } from '@equinor/eds-core-react'
import styled from 'styled-components'
import { useLanguageContext } from 'components/Contexts/LanguageContext'
import { Icons } from 'utils/icons'
import { tokens } from '@equinor/eds-tokens'
+import { TextAlignedButton } from 'components/Styles/StyledComponents'
const StyledDiv = styled.div`
align-items: center;
@@ -31,13 +32,13 @@ export const BlockedRobotAlertContent = ({ robotNames }: AlertProps) => {
{TranslateText('Robot is blocked')}
-
+
)
diff --git a/frontend/src/components/Alerts/FailedMissionAlert.tsx b/frontend/src/components/Alerts/FailedMissionAlert.tsx
index 0993547e6..a36d7fde9 100644
--- a/frontend/src/components/Alerts/FailedMissionAlert.tsx
+++ b/frontend/src/components/Alerts/FailedMissionAlert.tsx
@@ -1,16 +1,16 @@
-import { Button } from '@equinor/eds-core-react'
import { config } from 'config'
import { Mission, MissionStatus } from 'models/Mission'
import styled from 'styled-components'
import { MissionStatusDisplay } from 'components/Displays/MissionDisplays/MissionStatusDisplay'
import { useNavigate } from 'react-router-dom'
import { useLanguageContext } from 'components/Contexts/LanguageContext'
+import { TextAlignedButton } from 'components/Styles/StyledComponents'
const Indent = styled.div`
padding: 0px 0px 0px 5px;
`
-const StyledButton = styled(Button)`
+const StyledButton = styled(TextAlignedButton)`
:hover {
background-color: #ff9797;
}
diff --git a/frontend/src/components/Alerts/FailedSafeZoneAlertContent.tsx b/frontend/src/components/Alerts/FailedSafeZoneAlertContent.tsx
index 04cc18836..8cd3fa801 100644
--- a/frontend/src/components/Alerts/FailedSafeZoneAlertContent.tsx
+++ b/frontend/src/components/Alerts/FailedSafeZoneAlertContent.tsx
@@ -1,8 +1,9 @@
-import { Button, Icon, Typography } from '@equinor/eds-core-react'
+import { Icon, Typography } from '@equinor/eds-core-react'
import styled from 'styled-components'
import { useLanguageContext } from 'components/Contexts/LanguageContext'
import { Icons } from 'utils/icons'
import { tokens } from '@equinor/eds-tokens'
+import { TextAlignedButton } from 'components/Styles/StyledComponents'
const StyledDiv = styled.div`
align-items: center;
@@ -27,9 +28,9 @@ export const FailedSafeZoneAlertContent = ({ message }: { message: string }) =>
{TranslateText('Safe zone failure')}
-
+
)
diff --git a/frontend/src/components/Displays/MissionButtons/CreateEchoMissionButton.tsx b/frontend/src/components/Displays/MissionButtons/CreateEchoMissionButton.tsx
index 9b7cdee44..ff577c58e 100644
--- a/frontend/src/components/Displays/MissionButtons/CreateEchoMissionButton.tsx
+++ b/frontend/src/components/Displays/MissionButtons/CreateEchoMissionButton.tsx
@@ -11,6 +11,7 @@ const StyledCreateMissionButton = styled(StyledButton)`
align-items: center;
gap: 8px;
border-radius: 4px;
+ text-align: left;
`
export const CreateEchoMissionButton = (): JSX.Element => {
diff --git a/frontend/src/components/Displays/MissionDisplays/MissionStatusDisplay.tsx b/frontend/src/components/Displays/MissionDisplays/MissionStatusDisplay.tsx
index 9803ebec9..9c595639e 100644
--- a/frontend/src/components/Displays/MissionDisplays/MissionStatusDisplay.tsx
+++ b/frontend/src/components/Displays/MissionDisplays/MissionStatusDisplay.tsx
@@ -17,8 +17,8 @@ const StyledStatusDisplay = styled.div`
const StyledStatusIcon = styled.div`
display: flex;
- gap: 4px;
- align-items: flex-end;
+ gap: 6px;
+ align-items: center;
`
const MissionStatusIcon = ({ status }: StatusProps) => {
diff --git a/frontend/src/components/Pages/InspectionPage/InspectionOverview.tsx b/frontend/src/components/Pages/InspectionPage/InspectionOverview.tsx
index c2c812ea6..b161a0788 100644
--- a/frontend/src/components/Pages/InspectionPage/InspectionOverview.tsx
+++ b/frontend/src/components/Pages/InspectionPage/InspectionOverview.tsx
@@ -40,6 +40,10 @@ const StyledView = styled.div`
align-items: flex-start;
`
+const AlignedTextButton = styled(StyledButton)`
+ text-align: left;
+`
+
export const InspectionOverviewSection = () => {
const { TranslateText } = useLanguageContext()
const { installationCode } = useInstallationContext()
@@ -89,10 +93,10 @@ export const InspectionOverviewSection = () => {
const AddPredefinedMissionsButton = () => (
-
+
{TranslateText('Add predefined Echo mission')}
-
+
)
diff --git a/frontend/src/components/Pages/MissionHistoryPage/HistoricMissionCard.tsx b/frontend/src/components/Pages/MissionHistoryPage/HistoricMissionCard.tsx
index 2bddc6a10..a9c4dd55f 100644
--- a/frontend/src/components/Pages/MissionHistoryPage/HistoricMissionCard.tsx
+++ b/frontend/src/components/Pages/MissionHistoryPage/HistoricMissionCard.tsx
@@ -1,4 +1,4 @@
-import { Button, Table, Typography } from '@equinor/eds-core-react'
+import { Table, Typography } from '@equinor/eds-core-react'
import { config } from 'config'
import { Mission } from 'models/Mission'
import { MissionStatusDisplay } from 'components/Displays/MissionDisplays/MissionStatusDisplay'
@@ -6,6 +6,7 @@ import { MissionRestartButton } from 'components/Displays/MissionButtons/Mission
import { TaskStatus } from 'models/Task'
import { useNavigate } from 'react-router-dom'
import { format } from 'date-fns'
+import { TextAlignedButton } from 'components/Styles/StyledComponents'
interface IndexedMissionProps {
index: number
@@ -45,9 +46,9 @@ export const HistoricMissionCard = ({ index, mission }: IndexedMissionProps) =>
-
+
{mission.area?.areaName}
diff --git a/frontend/src/components/Pages/MissionHistoryPage/MissionHistoryView.tsx b/frontend/src/components/Pages/MissionHistoryPage/MissionHistoryView.tsx
index f25b237d9..b99fd8e4a 100644
--- a/frontend/src/components/Pages/MissionHistoryPage/MissionHistoryView.tsx
+++ b/frontend/src/components/Pages/MissionHistoryPage/MissionHistoryView.tsx
@@ -13,8 +13,8 @@ import { InspectionType } from 'models/Inspection'
import { tokens } from '@equinor/eds-tokens'
const TableWithHeader = styled.div`
- display: flex;
- flex-direction: column;
+ display: grid;
+ grid-columns: auto;
gap: 1rem;
`
const StyledLoading = styled.div`
@@ -37,6 +37,10 @@ const ActiveFilterList = styled.div`
min-height: 24px;
`
+const StyledTable = styled.div`
+ display: grid;
+`
+
const flatten = (filters: IFilterState) => {
const allFilters = []
for (const [filterName, filterValue] of Object.entries(filters)) {
@@ -173,29 +177,34 @@ export const MissionHistoryView = ({ refreshInterval }: RefreshProps) => {
)}
{filterError && }
-
-
-
- {TranslateText('Status')}
- {TranslateText('Name')}
- {TranslateText('Area')}
- {TranslateText('Robot')}
- {TranslateText('Completion Time')}
- {TranslateText('Rerun mission')}
-
-
- {isLoading && (
+
+
+ {isLoading && (
+
+
+
+
+
+ )}
-
-
-
+ {paginationDetails &&
+ paginationDetails.TotalPages > 1 &&
+ !isResettingPage &&
+ PaginationComponent()}
- )}
- {!isLoading && {missionsDisplay}}
-
- {paginationDetails && paginationDetails.TotalPages > 1 && !isResettingPage && PaginationComponent()}
-
-
+
+
+ {TranslateText('Status')}
+ {TranslateText('Name')}
+ {TranslateText('Area')}
+ {TranslateText('Robot')}
+ {TranslateText('Completion Time')}
+ {TranslateText('Rerun mission')}
+
+
+ {!isLoading && {missionsDisplay}}
+
+
)
}
diff --git a/frontend/src/components/Pages/RobotPage/RobotArmMovement.tsx b/frontend/src/components/Pages/RobotPage/RobotArmMovement.tsx
index 302a3513c..f7b167910 100644
--- a/frontend/src/components/Pages/RobotPage/RobotArmMovement.tsx
+++ b/frontend/src/components/Pages/RobotPage/RobotArmMovement.tsx
@@ -22,6 +22,10 @@ const LimitWidthStyle = styled.div`
max-width: calc(80vw);
`
+const StyledTextButton = styled(StyledButton)`
+ text-align: left;
+`
+
export const MoveRobotArm = ({ robot, armPosition, isRobotAvailable }: RobotProps) => {
const { TranslateText } = useLanguageContext()
const [feedback, setFeedback] = useState('')
@@ -80,9 +84,13 @@ export const MoveRobotArm = ({ robot, armPosition, isRobotAvailable }: RobotProp
-
+
{TranslateText('Set robot arm to ') + '"' + TranslateText(armPosition) + '"'}
-
+
{feedback}
diff --git a/frontend/src/components/Styles/StyledComponents.tsx b/frontend/src/components/Styles/StyledComponents.tsx
index 73fcd0272..ce3e690b2 100644
--- a/frontend/src/components/Styles/StyledComponents.tsx
+++ b/frontend/src/components/Styles/StyledComponents.tsx
@@ -22,3 +22,8 @@ export const StyledButton = styled(Button)`
height: auto;
min-height: ${tokens.shape.button.minHeight};
`
+
+export const TextAlignedButton = styled(Button)`
+ text-align: left;
+ height: auto;
+`
diff --git a/frontend/src/utils/BackButton.tsx b/frontend/src/utils/BackButton.tsx
index 37a166793..2512aca1e 100644
--- a/frontend/src/utils/BackButton.tsx
+++ b/frontend/src/utils/BackButton.tsx
@@ -6,7 +6,6 @@ import { Icons } from 'utils/icons'
const StyledButton = styled(Button)`
width: 100px;
- align-items: baseline;
`
export const BackButton = () => {