From 0f434941c8139101fd9813610e9879f31ec33ccd Mon Sep 17 00:00:00 2001 From: "Mariana R. Santos" Date: Wed, 8 Nov 2023 13:49:00 +0100 Subject: [PATCH 1/3] Refactor styled dialog and autocomplete --- .../MissionOverview/MissionQueueCard.tsx | 8 ++------ .../MissionOverview/ScheduleMissionDialog.tsx | 14 ++------------ .../InspectionPage/ScheduleMissionDialogs.tsx | 15 +-------------- .../MissionDefinitionPage.tsx | 2 +- .../Pages/RobotPage/RobotArmMovement.tsx | 2 +- frontend/src/components/StyledComponents.tsx | 17 +++++++++++++++++ 6 files changed, 24 insertions(+), 34 deletions(-) create mode 100644 frontend/src/components/StyledComponents.tsx diff --git a/frontend/src/components/Pages/FrontPage/MissionOverview/MissionQueueCard.tsx b/frontend/src/components/Pages/FrontPage/MissionOverview/MissionQueueCard.tsx index 6f4c03c49..ce2fdf770 100644 --- a/frontend/src/components/Pages/FrontPage/MissionOverview/MissionQueueCard.tsx +++ b/frontend/src/components/Pages/FrontPage/MissionOverview/MissionQueueCard.tsx @@ -1,12 +1,13 @@ import { Button, Card, Dialog, Icon, Typography, DotProgress } from '@equinor/eds-core-react' import { config } from 'config' -import { tokens } from '@equinor/eds-tokens' import { Mission, placeholderMission } from 'models/Mission' import styled from 'styled-components' import { useNavigate } from 'react-router-dom' import { useState } from 'react' import { useLanguageContext } from 'components/Contexts/LanguageContext' import { Icons } from 'utils/icons' +import { StyledDialog } from 'components/StyledComponents' +import { tokens } from '@equinor/eds-tokens' interface MissionQueueCardProps { order: number @@ -49,11 +50,6 @@ const StyledButtonSection = styled.div` gap: 8px; ` -const StyledDialog = styled(Dialog)` - width: 320px; - padding: 10px; -` - const PaddingLeft = styled.div` padding-left: 20px; ` diff --git a/frontend/src/components/Pages/FrontPage/MissionOverview/ScheduleMissionDialog.tsx b/frontend/src/components/Pages/FrontPage/MissionOverview/ScheduleMissionDialog.tsx index 752d02782..2db9061e5 100644 --- a/frontend/src/components/Pages/FrontPage/MissionOverview/ScheduleMissionDialog.tsx +++ b/frontend/src/components/Pages/FrontPage/MissionOverview/ScheduleMissionDialog.tsx @@ -16,6 +16,7 @@ import { useInstallationContext } from 'components/Contexts/InstallationContext' import { CreateMissionButton } from './CreateMissionButton' import { Robot } from 'models/Robot' import { EchoMissionDefinition } from 'models/MissionDefinition' +import { StyledAutoComplete, StyledDialog } from 'components/StyledComponents' interface IProps { robotOptions: Array @@ -34,13 +35,7 @@ const StyledMissionDialog = styled.div` display: flex; justify-content: space-between; ` -const StyledAutoComplete = styled(Card)` - display: flex; - justify-content: center; - padding: 8px; - gap: 25px; - box-shadow: none; -` + const StyledMissionSection = styled.div` display: flex; margin-left: auto; @@ -54,11 +49,6 @@ const StyledLoading = styled.div` padding-top: 3rem; gap: 1rem; ` -const StyledDialog = styled(Dialog)` - display: flex; - padding: 1rem; - width: 320px; -` export const ScheduleMissionDialog = (props: IProps): JSX.Element => { const { TranslateText } = useLanguageContext() diff --git a/frontend/src/components/Pages/InspectionPage/ScheduleMissionDialogs.tsx b/frontend/src/components/Pages/InspectionPage/ScheduleMissionDialogs.tsx index 975a746c8..de5c25606 100644 --- a/frontend/src/components/Pages/InspectionPage/ScheduleMissionDialogs.tsx +++ b/frontend/src/components/Pages/InspectionPage/ScheduleMissionDialogs.tsx @@ -8,6 +8,7 @@ import { CondensedMissionDefinition } from 'models/MissionDefinition' import { BackendAPICaller } from 'api/ApiCaller' import { Icons } from 'utils/icons' import { useRobotContext } from 'components/Contexts/RobotContext' +import { StyledAutoComplete, StyledDialog } from 'components/StyledComponents' interface IProps { missions: CondensedMissionDefinition[] @@ -26,26 +27,12 @@ const StyledMissionDialog = styled.div` display: flex; justify-content: space-between; ` -const StyledAutoComplete = styled.div` - display: flex; - flex-direction: column; - justify-content: center; - padding: 8px; - gap: 25px; -` const StyledMissionSection = styled.div` display: flex; margin-left: auto; margin-right: 0; gap: 10px; ` -const StyledDialog = styled(Dialog)` - display: flex; - flex-direction: column; - padding: 1rem; - width: 420px; -` - const StyledDialogContent = styled.div` display: flex; flex-direction: column; diff --git a/frontend/src/components/Pages/MissionDefinitionPage/MissionDefinitionPage.tsx b/frontend/src/components/Pages/MissionDefinitionPage/MissionDefinitionPage.tsx index 16bf72e3d..4c0e08184 100644 --- a/frontend/src/components/Pages/MissionDefinitionPage/MissionDefinitionPage.tsx +++ b/frontend/src/components/Pages/MissionDefinitionPage/MissionDefinitionPage.tsx @@ -4,7 +4,6 @@ import styled from 'styled-components' import { MissionDefinitionHeader } from './MissionDefinitionHeader/MissionDefinitionHeader' import { BackButton } from '../../../utils/BackButton' import { BackendAPICaller } from 'api/ApiCaller' -import { tokens } from '@equinor/eds-tokens' import { Header } from 'components/Header/Header' import { CondensedMissionDefinition, SourceType } from 'models/MissionDefinition' import { Button, Typography, Card, Dialog, TextField, Icon } from '@equinor/eds-core-react' @@ -13,6 +12,7 @@ import { MissionDefinitionUpdateForm } from 'models/MissionDefinitionUpdateForm' import { config } from 'config' import { SignalREventLabels, useSignalRContext } from 'components/Contexts/SignalRContext' import { Icons } from 'utils/icons' +import { tokens } from '@equinor/eds-tokens' const StyledFormCard = styled(Card)` display: flex; diff --git a/frontend/src/components/Pages/RobotPage/RobotArmMovement.tsx b/frontend/src/components/Pages/RobotPage/RobotArmMovement.tsx index 02c7fdcf6..7cb736909 100644 --- a/frontend/src/components/Pages/RobotPage/RobotArmMovement.tsx +++ b/frontend/src/components/Pages/RobotPage/RobotArmMovement.tsx @@ -3,8 +3,8 @@ import { useState, useEffect, useRef } from 'react' import { BackendAPICaller } from 'api/ApiCaller' import { Robot } from 'models/Robot' import { useLanguageContext } from 'components/Contexts/LanguageContext' -import { tokens } from '@equinor/eds-tokens' import styled from 'styled-components' +import { tokens } from '@equinor/eds-tokens' interface RobotProps { robot: Robot diff --git a/frontend/src/components/StyledComponents.tsx b/frontend/src/components/StyledComponents.tsx new file mode 100644 index 000000000..60d017637 --- /dev/null +++ b/frontend/src/components/StyledComponents.tsx @@ -0,0 +1,17 @@ +import { Dialog } from '@equinor/eds-core-react' +import styled from 'styled-components' + +export const StyledDialog = styled(Dialog)` + width: 420px; + padding: 10px; + display: flex; + flex-direction: column; +` +export const StyledAutoComplete = styled.div` + display: flex; + flex-direction: column; + justify-content: center; + padding: 8px; + gap: 25px; + box-shadow: none; +` \ No newline at end of file From f1d7507502c266091f36df9e3d4416208e8da707 Mon Sep 17 00:00:00 2001 From: "Mariana R. Santos" Date: Wed, 8 Nov 2023 16:46:47 +0100 Subject: [PATCH 2/3] Refactor stop mission dialogs --- frontend/src/App.tsx | 46 +++--- .../MissionOverview/MissionControlButtons.tsx | 124 +++++++++------- .../MissionOverview/MissionQueueCard.tsx | 89 +++++++----- .../MissionOverview/OngoingMissionCard.tsx | 8 +- .../MissionOverview/ScheduleMissionDialog.tsx | 21 +-- .../FrontPage/MissionOverview/StopDialogs.tsx | 133 +++++++----------- .../MissionDefinitionHeader.tsx | 22 +-- .../MissionDefinitionPage.tsx | 117 ++++----------- .../MissionDefinitionStyledComponents.tsx | 94 +++++++++++++ .../MapPosition/MissionMapView.tsx | 2 +- .../VideoStream/VideoStreamCards.tsx | 2 +- frontend/src/components/StyledComponents.tsx | 2 +- 12 files changed, 335 insertions(+), 325 deletions(-) create mode 100644 frontend/src/components/Pages/MissionDefinitionPage/MissionDefinitionStyledComponents.tsx diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx index 3825dcb31..11f5355ab 100644 --- a/frontend/src/App.tsx +++ b/frontend/src/App.tsx @@ -8,31 +8,25 @@ import { MissionsProvider } from 'components/Contexts/MissionListsContext' import { SafeZoneProvider } from 'components/Contexts/SafeZoneContext' import { AlertProvider } from 'components/Contexts/AlertContext' -function App() { - return ( - - - - - - <> - -
- -
- - - - - - - - - - - - - ) -} +const App = () => ( + + + + + +
+ +
+ + + + + + + + + + +) export default App diff --git a/frontend/src/components/Pages/FrontPage/MissionOverview/MissionControlButtons.tsx b/frontend/src/components/Pages/FrontPage/MissionOverview/MissionControlButtons.tsx index 6ef39d35f..1ee003cf3 100644 --- a/frontend/src/components/Pages/FrontPage/MissionOverview/MissionControlButtons.tsx +++ b/frontend/src/components/Pages/FrontPage/MissionOverview/MissionControlButtons.tsx @@ -15,7 +15,7 @@ interface MissionProps { const ButtonStyle = styled.div` display: grid; grid-template-columns: 45px 45px; - align-items: end; + margin-end: 20px; ` const ButtonText = styled.div` @@ -25,58 +25,76 @@ const ButtonText = styled.div` ` export function MissionControlButtons({ mission }: MissionProps) { + const { missionControlState } = useMissionControlContext() + + return ( + <> + {missionControlState.isWaitingForResponse ? ( + + ) : ( + <> + {mission.status === MissionStatus.Ongoing && } + {mission.status === MissionStatus.Paused && } + + )} + + ) +} + +function OngoingMissionButton({ mission }: MissionProps) { + const { TranslateText } = useLanguageContext() + const { updateMissionState } = useMissionControlContext() + + return ( + <> + + + + {TranslateText('Stop')} + + + + {TranslateText('Pause')} + + + + ) +} + +function PausedMissionButton({ mission }: MissionProps) { const { TranslateText } = useLanguageContext() - const { missionControlState, updateMissionState } = useMissionControlContext() + const { updateMissionState } = useMissionControlContext() - const renderControlIcon = (missionStatus: MissionStatus) => { - if (missionControlState.isWaitingForResponse) { - return - } else if (missionStatus === MissionStatus.Ongoing) { - return ( - - - - {TranslateText('Stop')} - - - - {TranslateText('Pause')} - - - ) - } else if (missionStatus === MissionStatus.Paused) { - return ( - - - - {TranslateText('Stop')} - - - - {TranslateText('Start')} - - - ) - } - return <> - } - return <>{renderControlIcon(mission.status)} + return ( + <> + + + + {TranslateText('Stop')} + + + + {TranslateText('Start')} + + + + ) } diff --git a/frontend/src/components/Pages/FrontPage/MissionOverview/MissionQueueCard.tsx b/frontend/src/components/Pages/FrontPage/MissionOverview/MissionQueueCard.tsx index ce2fdf770..a89314060 100644 --- a/frontend/src/components/Pages/FrontPage/MissionOverview/MissionQueueCard.tsx +++ b/frontend/src/components/Pages/FrontPage/MissionOverview/MissionQueueCard.tsx @@ -19,6 +19,13 @@ interface MissionDisplayProps { mission: Mission } +interface RemoveMissionDialogProps { + confirmDeleteDialogOpen: boolean + mission: Mission + setConfirmDeleteDialogOpen: React.Dispatch> + onDeleteMission: (mission: Mission) => void +} + const StyledMissionCard = styled(Card)` width: 880px; display: flex; @@ -106,44 +113,60 @@ export function MissionQueueCard({ order, mission, onDeleteMission }: MissionQue > - - - {TranslateText('Remove mission')} - - - - - {TranslateText('Please confirm that you want to remove the mission from the queue:')} - - {mission.name} - - - - - - - + ) } +function RemoveMissionDialog({ + confirmDeleteDialogOpen, + mission, + setConfirmDeleteDialogOpen, + onDeleteMission, +}: RemoveMissionDialogProps) { + const { TranslateText } = useLanguageContext() + + return ( + + + {TranslateText('Remove mission')} + + + + + {TranslateText('Please confirm that you want to remove the mission from the queue:')} + + {mission.name} + + + + + + + + ) +} + function MissionDurationDisplay({ mission }: MissionDisplayProps) { const { TranslateText } = useLanguageContext() const translateEstimatedDuration = TranslateText('Estimated duration') diff --git a/frontend/src/components/Pages/FrontPage/MissionOverview/OngoingMissionCard.tsx b/frontend/src/components/Pages/FrontPage/MissionOverview/OngoingMissionCard.tsx index a83b75245..a7f4e92a5 100644 --- a/frontend/src/components/Pages/FrontPage/MissionOverview/OngoingMissionCard.tsx +++ b/frontend/src/components/Pages/FrontPage/MissionOverview/OngoingMissionCard.tsx @@ -16,12 +16,14 @@ interface MissionProps { } const StyledMissionCard = styled(Card)` - width: 372px; - padding: 12px; + width: 400px; + height: 140px; + padding: 10px; + justify-content: space-between; ` const StyledTitle = styled(Card)` width: 70%; - height: 80%; + height: 50px; justify-content: center; padding-left: 12px; :hover { diff --git a/frontend/src/components/Pages/FrontPage/MissionOverview/ScheduleMissionDialog.tsx b/frontend/src/components/Pages/FrontPage/MissionOverview/ScheduleMissionDialog.tsx index 2db9061e5..584435a07 100644 --- a/frontend/src/components/Pages/FrontPage/MissionOverview/ScheduleMissionDialog.tsx +++ b/frontend/src/components/Pages/FrontPage/MissionOverview/ScheduleMissionDialog.tsx @@ -1,13 +1,4 @@ -import { - Autocomplete, - Button, - Card, - Dialog, - Typography, - Popover, - Icon, - CircularProgress, -} from '@equinor/eds-core-react' +import { Autocomplete, Button, Dialog, Typography, Popover, Icon, CircularProgress } from '@equinor/eds-core-react' import styled from 'styled-components' import { useLanguageContext } from 'components/Contexts/LanguageContext' import { Icons } from 'utils/icons' @@ -138,8 +129,7 @@ export const ScheduleMissionDialog = (props: IProps): JSX.Element => { }} variant="outlined" > - {' '} - {TranslateText('Cancel')}{' '} + {TranslateText('Cancel')} @@ -160,8 +150,7 @@ export const ScheduleMissionDialog = (props: IProps): JSX.Element => { }} variant="outlined" > - {' '} - {TranslateText('Cancel')}{' '} + {TranslateText('Cancel')} @@ -201,8 +190,7 @@ export const ScheduleMissionDialog = (props: IProps): JSX.Element => { }} variant="outlined" > - {' '} - {TranslateText('Cancel')}{' '} + {TranslateText('Cancel')} diff --git a/frontend/src/components/Pages/FrontPage/MissionOverview/StopDialogs.tsx b/frontend/src/components/Pages/FrontPage/MissionOverview/StopDialogs.tsx index 466029b33..13d900ee1 100644 --- a/frontend/src/components/Pages/FrontPage/MissionOverview/StopDialogs.tsx +++ b/frontend/src/components/Pages/FrontPage/MissionOverview/StopDialogs.tsx @@ -141,91 +141,64 @@ export const StopRobotDialog = (): JSX.Element => { return ( <> - {!safeZoneStatus && ( - <> - - - - - - - {TranslateText('Send robots to safe zone') + '?'} - - - - - - {TranslateText('Send robots to safe zone long text')} - - - {TranslateText('Send robots to safe confirmation text')} - - - - - - - - - - - - )} - {safeZoneStatus && ( - <> - - + + + + + {TranslateText('Send robots to safe zone') + '?'} + + + + + + {!safeZoneStatus + ? TranslateText('Send robots to safe zone long text') + : TranslateText('Dismiss robots from safe zone') + '?'} + + + {!safeZoneStatus + ? TranslateText('Send robots to safe confirmation text') + : TranslateText('Dismiss robots from safe zone long text')} + + + + + + - - - - - - {TranslateText('Dismiss robots from safe zone') + '?'} - - - - - - - {TranslateText('Dismiss robots from safe zone long text')} - - - - - - - - - - - - )} + {!safeZoneStatus ? ( + + ) : ( + + )} + + + ) } diff --git a/frontend/src/components/Pages/MissionDefinitionPage/MissionDefinitionHeader/MissionDefinitionHeader.tsx b/frontend/src/components/Pages/MissionDefinitionPage/MissionDefinitionHeader/MissionDefinitionHeader.tsx index 58d6c1d28..bb28f7c5b 100644 --- a/frontend/src/components/Pages/MissionDefinitionPage/MissionDefinitionHeader/MissionDefinitionHeader.tsx +++ b/frontend/src/components/Pages/MissionDefinitionPage/MissionDefinitionHeader/MissionDefinitionHeader.tsx @@ -1,28 +1,16 @@ import { Typography } from '@equinor/eds-core-react' -import styled from 'styled-components' import { CondensedMissionDefinition } from 'models/MissionDefinition' - -const HeaderSection = styled.div` - display: flex; - flex-direction: column; - gap: 0.4rem; -` -const TitleSection = styled.div` - display: flex; - align-items: center; - gap: 10px; -` - +import { StyledDict } from '../MissionDefinitionStyledComponents' interface MissionDefinitionHeaderProps { missionDefinition: CondensedMissionDefinition } export function MissionDefinitionHeader({ missionDefinition }: MissionDefinitionHeaderProps) { return ( - - + + {missionDefinition.name} - - + + ) } diff --git a/frontend/src/components/Pages/MissionDefinitionPage/MissionDefinitionPage.tsx b/frontend/src/components/Pages/MissionDefinitionPage/MissionDefinitionPage.tsx index 4c0e08184..a7467d6aa 100644 --- a/frontend/src/components/Pages/MissionDefinitionPage/MissionDefinitionPage.tsx +++ b/frontend/src/components/Pages/MissionDefinitionPage/MissionDefinitionPage.tsx @@ -1,102 +1,33 @@ import { ChangeEvent, useEffect, useState } from 'react' import { useNavigate, useParams } from 'react-router-dom' -import styled from 'styled-components' import { MissionDefinitionHeader } from './MissionDefinitionHeader/MissionDefinitionHeader' import { BackButton } from '../../../utils/BackButton' import { BackendAPICaller } from 'api/ApiCaller' import { Header } from 'components/Header/Header' import { CondensedMissionDefinition, SourceType } from 'models/MissionDefinition' -import { Button, Typography, Card, Dialog, TextField, Icon } from '@equinor/eds-core-react' +import { Button, Typography, TextField, Icon } from '@equinor/eds-core-react' import { useLanguageContext } from 'components/Contexts/LanguageContext' import { MissionDefinitionUpdateForm } from 'models/MissionDefinitionUpdateForm' import { config } from 'config' import { SignalREventLabels, useSignalRContext } from 'components/Contexts/SignalRContext' import { Icons } from 'utils/icons' import { tokens } from '@equinor/eds-tokens' - -const StyledFormCard = styled(Card)` - display: flex; - justify-content: center; - padding: 8px; - gap: 25px; -` -const StyledButtonSection = styled.div` - display: flex; - margin-left: auto; - margin-right: 0; - gap: 10px; -` -const StyledFormContainer = styled.div` - display: grid; - grid-template-columns: [c1] 1fr [c2] 1fr [c3] 1fr; - grid-template-rows: [r1] auto [r1] auto [r1] auto; - align: left; - align-items: flex-start; - align-content: flex-start; - max-width: 1200px; - min-width: 600px; - gap: 10px 20px; -` -const StyledFormItem = styled.div` - width: 100%; - height: auto; - padding: 5px; - word-break: break-word; - hyphens: auto; - min-height: 60px; -` -const StyledDialog = styled(Dialog)` - display: flex; - justify-content: space-between; - padding: 1rem; - width: 620px; -` -const StyledMissionDefinitionPage = styled.div` - display: flex; - flex-wrap: wrap; - justify-content: start; - flex-direction: column; - gap: 1rem; - margin: 2rem; -` -const StyledButton = styled(Button)` - width: 260px; -` -const StyledInspectionFrequencyDiv = styled.div` - > * { - padding: 10px; - } -` -const StyledTitleComponent = styled.div` - display: flex; - align-items: center; - height: 37px; -` -const StyledEditButton = styled(Button)` - padding-left: 5px; - padding-top: 0px; - margin-top: 0px; -` -const StyledCard = styled(Card)` - display: flex; - padding: 8px; - height: 110px; -` +import { StyledDict } from './MissionDefinitionStyledComponents' function MetadataItem({ title, content, onEdit }: { title: string; content: any; onEdit?: () => void }) { return ( - - - + + + {title} {onEdit && ( - + - + )} - + {content} - - + + ) } @@ -140,7 +71,7 @@ function MissionDefinitionPageBody({ missionDefinition, updateMissionDefinition return ( <> - + - - + navigate(`${config.FRONTEND_BASE_ROUTE}/mission/${missionDefinition.lastSuccessfulRun!.id}`) @@ -181,7 +112,7 @@ function MissionDefinitionPageBody({ missionDefinition, updateMissionDefinition > {TranslateText('View last run') + (missionDefinition.lastSuccessfulRun ? '' : ': ' + TranslateText('Not yet performed'))} - + {isEditDialogOpen && ( + - + ) case 'comment': return ( @@ -301,11 +232,11 @@ function MissionDefinitionEditDialog({ } return ( - - + + {TranslateText('Edit') + ' ' + TranslateText(fieldName)} {getFormItem()} - + - - - + + + ) } @@ -350,14 +281,14 @@ export function MissionDefinitionPage() { <>
{selectedMissionDefinition !== undefined && ( - + - + )} ) diff --git a/frontend/src/components/Pages/MissionDefinitionPage/MissionDefinitionStyledComponents.tsx b/frontend/src/components/Pages/MissionDefinitionPage/MissionDefinitionStyledComponents.tsx new file mode 100644 index 000000000..1ae8201da --- /dev/null +++ b/frontend/src/components/Pages/MissionDefinitionPage/MissionDefinitionStyledComponents.tsx @@ -0,0 +1,94 @@ +import { Button, Card, Dialog } from '@equinor/eds-core-react' +import styled from 'styled-components' + +export const StyledDict = { + FormCard: styled(Card)` + display: flex; + justify-content: center; + padding: 8px; + gap: 25px; + `, + + ButtonSection: styled.div` + display: flex; + margin-left: auto; + margin-right: 0; + gap: 10px; + `, + + FormContainer: styled.div` + display: grid; + grid-template-columns: [c1] 1fr [c2] 1fr [c3] 1fr; + grid-template-rows: [r1] auto [r1] auto [r1] auto; + align: left; + align-items: flex-start; + align-content: flex-start; + max-width: 1200px; + min-width: 600px; + gap: 10px 20px; + `, + + FormItem: styled.div` + width: 100%; + height: auto; + padding: 5px; + word-break: break-word; + hyphens: auto; + min-height: 60px; + `, + + Dialog: styled(Dialog)` + display: flex; + justify-content: space-between; + padding: 1rem; + width: 620px; + `, + + MissionDefinitionPage: styled.div` + display: flex; + flex-wrap: wrap; + justify-content: start; + flex-direction: column; + gap: 1rem; + margin: 2rem; + `, + + Button: styled(Button)` + width: 260px; + `, + + InspectionFrequencyDiv: styled.div` + > * { + padding: 10px; + } + `, + + TitleComponent: styled.div` + display: flex; + align-items: center; + height: 37px; + `, + + EditButton: styled(Button)` + padding-left: 5px; + padding-top: 0px; + margin-top: 0px; + `, + + Card: styled(Card)` + display: flex; + padding: 8px; + height: 110px; + `, + HeaderSection: styled.div` + display: flex; + flex-direction: column; + gap: 0.4rem; + `, + + TitleSection: styled.div` + display: flex; + align-items: center; + gap: 10px; + `, +} diff --git a/frontend/src/components/Pages/MissionPage/MapPosition/MissionMapView.tsx b/frontend/src/components/Pages/MissionPage/MapPosition/MissionMapView.tsx index 840b73e86..c7344222d 100644 --- a/frontend/src/components/Pages/MissionPage/MapPosition/MissionMapView.tsx +++ b/frontend/src/components/Pages/MissionPage/MapPosition/MissionMapView.tsx @@ -121,7 +121,7 @@ export function MissionMapView({ mission }: MissionProps) { }, [updateMap, mapContext]) return ( - + diff --git a/frontend/src/components/Pages/MissionPage/VideoStream/VideoStreamCards.tsx b/frontend/src/components/Pages/MissionPage/VideoStream/VideoStreamCards.tsx index e41ebfeb5..077f98c16 100644 --- a/frontend/src/components/Pages/MissionPage/VideoStream/VideoStreamCards.tsx +++ b/frontend/src/components/Pages/MissionPage/VideoStream/VideoStreamCards.tsx @@ -86,7 +86,7 @@ export function VideoStreamCard({ videoStream, toggleFullScreenMode, setFullScre } return ( - +
{getVideoPlayer()}
{videoStream.name} diff --git a/frontend/src/components/StyledComponents.tsx b/frontend/src/components/StyledComponents.tsx index 60d017637..664cd3dda 100644 --- a/frontend/src/components/StyledComponents.tsx +++ b/frontend/src/components/StyledComponents.tsx @@ -14,4 +14,4 @@ export const StyledAutoComplete = styled.div` padding: 8px; gap: 25px; box-shadow: none; -` \ No newline at end of file +` From a770f08d385435687bcf493c2c5da6320833ab9c Mon Sep 17 00:00:00 2001 From: "Mariana R. Santos" Date: Fri, 10 Nov 2023 11:15:32 +0100 Subject: [PATCH 3/3] Improve code quality --- .../Pages/FrontPage/MissionOverview/MissionQueueCard.tsx | 2 +- .../FrontPage/MissionOverview/ScheduleMissionDialog.tsx | 2 +- .../Pages/InspectionPage/ScheduleMissionDialogs.tsx | 2 +- .../MissionDefinitionPage/MissionDefinitionPage.tsx | 6 ++---- .../MissionDefinitionStyledComponents.tsx | 9 ++------- .../src/components/Pages/RobotPage/RobotArmMovement.tsx | 2 +- .../src/components/{ => Styles}/StyledComponents.tsx | 0 7 files changed, 8 insertions(+), 15 deletions(-) rename frontend/src/components/{ => Styles}/StyledComponents.tsx (100%) diff --git a/frontend/src/components/Pages/FrontPage/MissionOverview/MissionQueueCard.tsx b/frontend/src/components/Pages/FrontPage/MissionOverview/MissionQueueCard.tsx index a89314060..93e05d399 100644 --- a/frontend/src/components/Pages/FrontPage/MissionOverview/MissionQueueCard.tsx +++ b/frontend/src/components/Pages/FrontPage/MissionOverview/MissionQueueCard.tsx @@ -6,7 +6,7 @@ import { useNavigate } from 'react-router-dom' import { useState } from 'react' import { useLanguageContext } from 'components/Contexts/LanguageContext' import { Icons } from 'utils/icons' -import { StyledDialog } from 'components/StyledComponents' +import { StyledDialog } from 'components/Styles/StyledComponents' import { tokens } from '@equinor/eds-tokens' interface MissionQueueCardProps { diff --git a/frontend/src/components/Pages/FrontPage/MissionOverview/ScheduleMissionDialog.tsx b/frontend/src/components/Pages/FrontPage/MissionOverview/ScheduleMissionDialog.tsx index 584435a07..1d713b7c7 100644 --- a/frontend/src/components/Pages/FrontPage/MissionOverview/ScheduleMissionDialog.tsx +++ b/frontend/src/components/Pages/FrontPage/MissionOverview/ScheduleMissionDialog.tsx @@ -7,7 +7,7 @@ import { useInstallationContext } from 'components/Contexts/InstallationContext' import { CreateMissionButton } from './CreateMissionButton' import { Robot } from 'models/Robot' import { EchoMissionDefinition } from 'models/MissionDefinition' -import { StyledAutoComplete, StyledDialog } from 'components/StyledComponents' +import { StyledAutoComplete, StyledDialog } from 'components/Styles/StyledComponents' interface IProps { robotOptions: Array diff --git a/frontend/src/components/Pages/InspectionPage/ScheduleMissionDialogs.tsx b/frontend/src/components/Pages/InspectionPage/ScheduleMissionDialogs.tsx index de5c25606..4c84be349 100644 --- a/frontend/src/components/Pages/InspectionPage/ScheduleMissionDialogs.tsx +++ b/frontend/src/components/Pages/InspectionPage/ScheduleMissionDialogs.tsx @@ -8,7 +8,7 @@ import { CondensedMissionDefinition } from 'models/MissionDefinition' import { BackendAPICaller } from 'api/ApiCaller' import { Icons } from 'utils/icons' import { useRobotContext } from 'components/Contexts/RobotContext' -import { StyledAutoComplete, StyledDialog } from 'components/StyledComponents' +import { StyledAutoComplete, StyledDialog } from 'components/Styles/StyledComponents' interface IProps { missions: CondensedMissionDefinition[] diff --git a/frontend/src/components/Pages/MissionDefinitionPage/MissionDefinitionPage.tsx b/frontend/src/components/Pages/MissionDefinitionPage/MissionDefinitionPage.tsx index a7467d6aa..6e0f6c86a 100644 --- a/frontend/src/components/Pages/MissionDefinitionPage/MissionDefinitionPage.tsx +++ b/frontend/src/components/Pages/MissionDefinitionPage/MissionDefinitionPage.tsx @@ -238,12 +238,10 @@ function MissionDefinitionEditDialog({ {getFormItem()} diff --git a/frontend/src/components/Pages/MissionDefinitionPage/MissionDefinitionStyledComponents.tsx b/frontend/src/components/Pages/MissionDefinitionPage/MissionDefinitionStyledComponents.tsx index 1ae8201da..e555b2c77 100644 --- a/frontend/src/components/Pages/MissionDefinitionPage/MissionDefinitionStyledComponents.tsx +++ b/frontend/src/components/Pages/MissionDefinitionPage/MissionDefinitionStyledComponents.tsx @@ -12,7 +12,6 @@ export const StyledDict = { ButtonSection: styled.div` display: flex; margin-left: auto; - margin-right: 0; gap: 10px; `, @@ -58,21 +57,17 @@ export const StyledDict = { `, InspectionFrequencyDiv: styled.div` - > * { - padding: 10px; - } + padding: 10px; `, TitleComponent: styled.div` display: flex; align-items: center; - height: 37px; + height: 36px; `, EditButton: styled(Button)` padding-left: 5px; - padding-top: 0px; - margin-top: 0px; `, Card: styled(Card)` diff --git a/frontend/src/components/Pages/RobotPage/RobotArmMovement.tsx b/frontend/src/components/Pages/RobotPage/RobotArmMovement.tsx index 7cb736909..02c7fdcf6 100644 --- a/frontend/src/components/Pages/RobotPage/RobotArmMovement.tsx +++ b/frontend/src/components/Pages/RobotPage/RobotArmMovement.tsx @@ -3,8 +3,8 @@ import { useState, useEffect, useRef } from 'react' import { BackendAPICaller } from 'api/ApiCaller' import { Robot } from 'models/Robot' import { useLanguageContext } from 'components/Contexts/LanguageContext' -import styled from 'styled-components' import { tokens } from '@equinor/eds-tokens' +import styled from 'styled-components' interface RobotProps { robot: Robot diff --git a/frontend/src/components/StyledComponents.tsx b/frontend/src/components/Styles/StyledComponents.tsx similarity index 100% rename from frontend/src/components/StyledComponents.tsx rename to frontend/src/components/Styles/StyledComponents.tsx