Fix button overflow

equinor · Jan 18, 2024 · 7bcbdd2 · 7bcbdd2
1 parent 3dc5658
commit 7bcbdd2
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 3 deletions.
diff --git a/frontend/src/components/Displays/MissionButtons/CreateEchoMissionButton.tsx b/frontend/src/components/Displays/MissionButtons/CreateEchoMissionButton.tsx
@@ -4,12 +4,15 @@ import { Icons } from 'utils/icons'
 import { useRef } from 'react'
 import { useInstallationContext } from 'components/Contexts/InstallationContext'
 import styled from 'styled-components'
+import { tokens } from '@equinor/eds-tokens'
 
 const StyledButton = styled(Button)`
     display: flex;
     align-items: center;
     gap: 8px;
     border-radius: 4px;
+    height: auto;
+    min-height: ${tokens.shape.button.minHeight};
 `
 
 export const CreateEchoMissionButton = (): JSX.Element => {

diff --git a/frontend/src/components/Pages/InspectionPage/InspectionOverview.tsx b/frontend/src/components/Pages/InspectionPage/InspectionOverview.tsx
@@ -15,6 +15,7 @@ import { AlertType, useAlertContext } from 'components/Contexts/AlertContext'
 import { EchoMissionDefinition } from 'models/MissionDefinition'
 import { FailedRequestAlertContent } from 'components/Alerts/FailedRequestAlert'
 import { Icons } from 'utils/icons'
+import { tokens } from '@equinor/eds-tokens'
 
 const StyledContent = styled.div`
     display: flex;
@@ -34,6 +35,11 @@ const StyledView = styled.div`
     align-items: flex-start;
 `
 
+const StyledButton = styled(Button)`
+    height: auto;
+    min-height: ${tokens.shape.button.minHeight};
+`
+
 export const InspectionOverviewSection = () => {
     const { TranslateText } = useLanguageContext()
     const { installationCode } = useInstallationContext()
@@ -89,14 +95,14 @@ export const InspectionOverviewSection = () => {
     }
 
     const AddPredefinedMissionsButton = () => (
-        <Button
+        <StyledButton
             onClick={onClickScheduleMission}
             disabled={enabledRobots.length === 0 || installationCode === ''}
             ref={anchorRef}
         >
             <Icon name={Icons.Add} size={16} />
             {TranslateText('Add predefined Echo mission')}
-        </Button>
+        </StyledButton>
     )
 
     return (

diff --git a/frontend/src/components/Pages/InspectionPage/ScheduleMissionDialogs.tsx b/frontend/src/components/Pages/InspectionPage/ScheduleMissionDialogs.tsx
@@ -13,6 +13,7 @@ import { useMissionsContext } from 'components/Contexts/MissionRunsContext'
 import { FailedRequestAlertContent } from 'components/Alerts/FailedRequestAlert'
 import { AlertType, useAlertContext } from 'components/Contexts/AlertContext'
 import { ScheduleMissionWithLocalizationVerificationDialog } from 'components/Displays/LocalizationVerification/ScheduleMissionWithLocalizationVerification'
+import { tokens } from '@equinor/eds-tokens'
 
 interface IProps {
     missions: CondensedMissionDefinition[]
@@ -52,7 +53,7 @@ const StyledDangerContent = styled.div`
 const StyledButton = styled(Button)`
     display: inline-block;
     height: auto;
-    min-height: 35px;
+    min-height: ${tokens.shape.button.minHeight};
 `
 
 export const ScheduleMissionDialog = (props: IProps): JSX.Element => {