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 = () => {