Align buttons' text to the left

equinor · Feb 8, 2024 · df2aa13 · df2aa13
1 parent 116ae51
commit df2aa13
Show file tree

Hide file tree

Showing 11 changed files with 70 additions and 41 deletions.
diff --git 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) => {
                 <Typography>{TranslateText('Robot is blocked')}</Typography>
             </StyledAlertTitle>
             <Indent>
-                <Button as={Typography} variant="ghost" color="secondary">
+                <TextAlignedButton variant="ghost" color="secondary">
                     {robotNames.length === 1 &&
                         `${TranslateText('The robot')} ${robotNames[0]} ${TranslateText(
                             'is blocked and cannot perform tasks'
                         )}.`}
                     {robotNames.length > 1 && TranslateText('Several robots are blocked and cannot perform tasks.')}
-                </Button>
+                </TextAlignedButton>
             </Indent>
         </StyledDiv>
     )

diff --git 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
@@ -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 }) =>
                 <Typography>{TranslateText('Safe zone failure')}</Typography>
             </StyledAlertTitle>
             <Indent>
-                <Button as={Typography} variant="ghost" color="secondary">
+                <TextAlignedButton variant="ghost" color="secondary">
                     {TranslateText(message)}
-                </Button>
+                </TextAlignedButton>
             </Indent>
         </StyledDiv>
     )

diff --git 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
@@ -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
@@ -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 = () => (
         <Tooltip placement="top" title={isScheduleButtonDisabled ? TranslateText('No robot available') : ''}>
-            <StyledButton onClick={onClickScheduleMission} disabled={isScheduleButtonDisabled} ref={anchorRef}>
+            <AlignedTextButton onClick={onClickScheduleMission} disabled={isScheduleButtonDisabled} ref={anchorRef}>
                 <Icon name={Icons.Add} size={16} />
                 {TranslateText('Add predefined Echo mission')}
-            </StyledButton>
+            </AlignedTextButton>
         </Tooltip>
     )
 

diff --git a/frontend/src/components/Pages/MissionHistoryPage/HistoricMissionCard.tsx b/frontend/src/components/Pages/MissionHistoryPage/HistoricMissionCard.tsx
@@ -1,11 +1,12 @@
-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'
 import { MissionRestartButton } from 'components/Displays/MissionButtons/MissionRestartButton'
 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) =>
                 <MissionStatusDisplay status={mission.status} />
             </Table.Cell>
             <Table.Cell>
-                <Button as={Typography} variant="ghost" onClick={routeChange}>
+                <TextAlignedButton variant="ghost" onClick={routeChange}>
                     {mission.name}
-                </Button>
+                </TextAlignedButton>
             </Table.Cell>
             <Table.Cell>
                 <Typography>{mission.area?.areaName}</Typography>

diff --git 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) => {
                 </ActiveFilterList>
             )}
             {filterError && <FilterErrorDialog />}
-            <Table>
-                <Table.Head sticky>
-                    <Table.Row>
-                        <Table.Cell>{TranslateText('Status')}</Table.Cell>
-                        <Table.Cell>{TranslateText('Name')}</Table.Cell>
-                        <Table.Cell>{TranslateText('Area')}</Table.Cell>
-                        <Table.Cell>{TranslateText('Robot')}</Table.Cell>
-                        <Table.Cell>{TranslateText('Completion Time')}</Table.Cell>
-                        <Table.Cell>{TranslateText('Rerun mission')}</Table.Cell>
-                    </Table.Row>
-                </Table.Head>
-                {isLoading && (
+            <StyledTable>
+                <Table>
+                    {isLoading && (
+                        <Table.Caption captionSide={'bottom'}>
+                            <StyledLoading>
+                                <CircularProgress />
+                            </StyledLoading>
+                        </Table.Caption>
+                    )}
                     <Table.Caption captionSide={'bottom'}>
-                        <StyledLoading>
-                            <CircularProgress />
-                        </StyledLoading>
+                        {paginationDetails &&
+                            paginationDetails.TotalPages > 1 &&
+                            !isResettingPage &&
+                            PaginationComponent()}
                     </Table.Caption>
-                )}
-                {!isLoading && <Table.Body>{missionsDisplay}</Table.Body>}
-                <Table.Caption captionSide={'bottom'}>
-                    {paginationDetails && paginationDetails.TotalPages > 1 && !isResettingPage && PaginationComponent()}
-                </Table.Caption>
-            </Table>
+                    <Table.Head sticky>
+                        <Table.Row>
+                            <Table.Cell>{TranslateText('Status')}</Table.Cell>
+                            <Table.Cell>{TranslateText('Name')}</Table.Cell>
+                            <Table.Cell>{TranslateText('Area')}</Table.Cell>
+                            <Table.Cell>{TranslateText('Robot')}</Table.Cell>
+                            <Table.Cell>{TranslateText('Completion Time')}</Table.Cell>
+                            <Table.Cell>{TranslateText('Rerun mission')}</Table.Cell>
+                        </Table.Row>
+                    </Table.Head>
+                    {!isLoading && <Table.Body>{missionsDisplay}</Table.Body>}
+                </Table>
+            </StyledTable>
         </TableWithHeader>
     )
 }
diff --git 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
                     </LimitWidthStyle>
                 </Popover.Content>
             </Popover>
-            <StyledButton style={moveArmButtonStyle()} onClick={!usable ? openPopover : onClickMoveArm} ref={anchorRef}>
+            <StyledTextButton
+                style={moveArmButtonStyle()}
+                onClick={!usable ? openPopover : onClickMoveArm}
+                ref={anchorRef}
+            >
                 {TranslateText('Set robot arm to ') + '"' + TranslateText(armPosition) + '"'}
-            </StyledButton>
+            </StyledTextButton>
             <StyledDialog open={feedback !== ''}>
                 {feedback}
                 <StyledCloseButton>

diff --git 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
@@ -6,7 +6,6 @@ import { Icons } from 'utils/icons'
 
 const StyledButton = styled(Button)`
     width: 100px;
-    align-items: baseline;
 `
 
 export const BackButton = () => {