Fix inconsistencies on the frontend

equinor · Nov 1, 2023 · 9228717 · 9228717
1 parent daf28cd
commit 9228717
Show file tree

Hide file tree

Showing 7 changed files with 53 additions and 35 deletions.
diff --git a/frontend/src/components/Pages/FrontPage/MissionOverview/MissionQueueCard.tsx b/frontend/src/components/Pages/FrontPage/MissionOverview/MissionQueueCard.tsx
@@ -34,13 +34,23 @@ const HorizontalNonButtonContent = styled.div`
     padding-left: 10px;
 `
 
-const StyledConfirmDialog = styled.div`
-    padding: 8px;
+const StyledDialogContent = styled.div`
+    display: flex;
+    flex-direction: column;
+    gap: 20px;
 `
 
 const StyledButtonSection = styled.div`
-    display: grid;
-    grid-template-columns: auto auto;
+    display: flex;
+    flex-direction: row;
+    justify-content: end;
+    padding: 8px;
+    gap: 8px;
+`
+
+const StyledDialog = styled(Dialog)`
+    width: 320px;
+    padding: 10px;
 `
 
 const PaddingLeft = styled.div`
@@ -99,35 +109,39 @@ export function MissionQueueCard({ order, mission, onDeleteMission }: MissionQue
                 >
                     <Icon name={Icons.Remove} size={24} title="more action" />
                 </Button>
-                <Dialog open={confirmDeleteDialogOpen} isDismissable>
-                    <StyledConfirmDialog>
-                        <Typography variant="h5">
-                            {TranslateText('Please confirm that you want to remove the mission from the queue:')}
-                        </Typography>
-                        <Typography bold>{mission.name}</Typography>
-                        <StyledButtonSection>
-                            <Button
-                                onClick={() => {
-                                    setConfirmDeleteDialogOpen(false)
-                                }}
-                                variant="outlined"
-                                color="secondary"
-                            >
-                                {' '}
-                                {TranslateText('Cancel')}{' '}
-                            </Button>
-                            <Button
-                                onClick={() => {
-                                    onDeleteMission(mission)
-                                    setConfirmDeleteDialogOpen(false)
-                                }}
-                            >
-                                {' '}
-                                {TranslateText('Remove mission')}
-                            </Button>
-                        </StyledButtonSection>
-                    </StyledConfirmDialog>
-                </Dialog>
+                <StyledDialog open={confirmDeleteDialogOpen} isDismissable>
+                    <Dialog.Header>
+                        <Typography variant="h3">{TranslateText('Remove mission')}</Typography>
+                    </Dialog.Header>
+                    <Dialog.Content>
+                        <StyledDialogContent>
+                            <Typography variant="body_long">
+                                {TranslateText('Please confirm that you want to remove the mission from the queue:')}
+                            </Typography>
+                            <Typography bold>{mission.name}</Typography>
+                        </StyledDialogContent>
+                    </Dialog.Content>
+                    <StyledButtonSection>
+                        <Button
+                            onClick={() => {
+                                setConfirmDeleteDialogOpen(false)
+                            }}
+                            variant="outlined"
+                        >
+                            {' '}
+                            {TranslateText('Cancel')}{' '}
+                        </Button>
+                        <Button
+                            onClick={() => {
+                                onDeleteMission(mission)
+                                setConfirmDeleteDialogOpen(false)
+                            }}
+                        >
+                            {' '}
+                            {TranslateText('Remove mission')}
+                        </Button>
+                    </StyledButtonSection>
+                </StyledDialog>
             </HorizontalContent>
         </StyledMissionCard>
     )

diff --git a/frontend/src/components/Pages/FrontPage/MissionOverview/OngoingMissionCard.tsx b/frontend/src/components/Pages/FrontPage/MissionOverview/OngoingMissionCard.tsx
@@ -22,10 +22,11 @@ const StyledMissionCard = styled(Card)`
 const StyledTitle = styled(Card)`
     width: 70%;
     height: 80%;
-    padding: 5px;
+    padding: 10px;
     :hover {
         background-color: #deedee;
     }
+    box-shadow: none;
 `
 const HorizontalContent = styled.div`
     display: grid;

diff --git a/frontend/src/components/Pages/FrontPage/MissionOverview/ScheduleMissionDialog.tsx b/frontend/src/components/Pages/FrontPage/MissionOverview/ScheduleMissionDialog.tsx
@@ -39,6 +39,7 @@ const StyledAutoComplete = styled(Card)`
     justify-content: center;
     padding: 8px;
     gap: 25px;
+    box-shadow: none;
 `
 const StyledMissionSection = styled.div`
     display: flex;

diff --git a/frontend/src/components/Pages/FrontPage/RobotCards/PressureStatusView.tsx b/frontend/src/components/Pages/FrontPage/RobotCards/PressureStatusView.tsx
@@ -8,6 +8,7 @@ import { RobotStatus } from 'models/Robot'
 const PressureAlignment = styled.div`
     display: flex;
     align-items: center;
+    gap: 7px;
 `
 
 const StyledTopography = styled(Typography)<{ $fontSize?: 24 | 16 | 18 | 32 | 40 | 48 }>`

diff --git a/frontend/src/components/Pages/FrontPage/RobotCards/RobotImage.tsx b/frontend/src/components/Pages/FrontPage/RobotCards/RobotImage.tsx
@@ -1,5 +1,5 @@
 import { RobotType } from 'models/RobotModel'
-import taurobInspector from 'mediaAssets/taurob_inspector.jpg'
+import taurobInspector from 'mediaAssets/taurob_inspector_no_background.png'
 import anymalX from 'mediaAssets/anymal_x.png'
 import anymalD from 'mediaAssets/anymal_d.png'
 import exRobotics from 'mediaAssets/ExRobotics.webp'

diff --git a/frontend/src/components/Pages/FrontPage/RobotCards/RobotStatusCard.tsx b/frontend/src/components/Pages/FrontPage/RobotCards/RobotStatusCard.tsx
@@ -42,6 +42,7 @@ const VerticalContent = styled.div<{ $alignItems?: string }>`
     flex-direction: column;
     align-items: ${(props) => props.$alignItems};
     justify-content: flex-end;
+    gap: 4px;
 `
 
 function cardContent({ robot }: RobotProps) {

diff --git a/frontend/src/mediaAssets/taurob_inspector_no_background.png b/frontend/src/mediaAssets/taurob_inspector_no_background.png