Introduce global phone width

Author: marianards

frontend/src/components/Alerts/AlertsBanner.tsx

@@ -3,6 +3,7 @@ import { tokens } from '@equinor/eds-tokens'
 import { ReactNode, useState } from 'react'
 import styled from 'styled-components'
 import { Icons } from 'utils/icons'
+import { phone_width } from 'utils/constants'
 
 const StyledCard = styled.div`
     display: flex;
@@ -14,7 +15,7 @@ const StyledCard = styled.div`
     align-items: center;
     overflow: hidden;
 
-    @media (max-width: 600px) {
+    @media (max-width: ${phone_width}) {
         padding: 6px 8px 2px 10px;
     }
 `

frontend/src/components/Header/Header.tsx

@@ -11,11 +11,12 @@ import { NavigationMenu } from 'components/NavigationMenu/NavigationMenu'
 import { findNavigationPage } from 'components/Pages/AssetSelectionPage/AssetSelectionPage'
 import { AlertIcon } from 'components/Header/AlertIcon'
 import { useNavigate } from 'react-router-dom'
+import { phone_width } from 'utils/constants'
 
 const StyledTopBar = styled(TopBar)`
     align-items: center;
     box-shadow: none;
-    @media (max-width: 600px) {
+    @media (max-width: ${phone_width}) {
         grid-column-gap: 12px;
     }
     height: fit-content;
@@ -50,7 +51,7 @@ const StyledTopBarHeader = styled.div`
 `
 const StyledNavigationMenu = styled.div`
     display: none;
-    @media (max-width: 600px) {
+    @media (max-width: ${phone_width}) {
         display: block;
     }
 `

frontend/src/components/NavigationMenu/NavigationMenu.tsx

@@ -29,7 +29,7 @@ export const NavigationMenu = () => {
             ? [
                   { path: 'mission-control', label: 'Mission Control' },
                   { path: 'history', label: 'Mission History' },
-                  { path: 'area-overview', label: 'Area Overview' },
+                  { path: 'inspection-overview', label: 'Area Overview' },
                   { path: 'predefined-missions', label: 'Predefined Missions' },
                   { path: 'auto-schedule', label: 'Auto Scheduling' },
                   { path: 'robots', label: 'Robots' },

frontend/src/components/Pages/AssetSelectionPage/AssetSelectionPage.tsx

@@ -16,6 +16,7 @@ import { FailedRequestAlertContent, FailedRequestAlertListContent } from 'compon
 import { AlertCategory } from 'components/Alerts/AlertsBanner'
 import assetImage from 'mediaAssets/assetPage.jpg'
 import { useNavigate } from 'react-router-dom'
+import { phone_width } from '../../../utils/constants'
 
 const Centered = styled.div`
     display: flex;
@@ -39,7 +40,7 @@ const StyledImage = styled.img`
     object-fit: cover;
     height: 500px;
 
-    @media (max-width: 500px) {
+    @media (max-width: ${phone_width}) {
         height: 400px;
     }
 `

frontend/src/components/Pages/FrontPage/AutoScheduleSection/AutoScheduleSection.tsx

@@ -12,14 +12,15 @@ import { MissionDefinitionEditDialogContent } from 'components/Pages/MissionDefi
 import { MissionDefinition } from 'models/MissionDefinition'
 import { AutoScheduleMissionTableRow } from './AutoScheduleMissionTableRow'
 import { CalendarPro } from './AutoScheduleCalendar'
+import { phone_width } from 'utils/constants'
 
 const StyledSection = styled.div`
     display: flex;
     flex-direction: column;
     max-width: 960px;
     gap: 1rem;
 
-    @media (min-width: 600px) {
+    @media (min-width: ${phone_width}) ) {
         min-width: 90vw;
     }
 `
@@ -36,20 +37,20 @@ const StyledContent = styled.div`
     flex-direction: column;
     gap: 30px;
     align-items: end;
-    @media (max-width: 600px) {
+    @media (max-width: ${phone_width}) {
         align-items: start;
     }
     max-width: 95%;
 `
 
 const StyledDesktopView = styled.div`
-    @media (max-width: 600px) {
+    @media (max-width: ${phone_width}) {
         display: none;
     }
 `
 
 const StyledPhoneView = styled.div`
-    @media (min-width: 600px) {
+    @media (min-width: ${phone_width}) ) {
         display: none;
     }
 `

frontend/src/components/Pages/FrontPage/FrontPage.tsx

@@ -17,6 +17,7 @@ import { useMissionsContext } from 'components/Contexts/MissionRunsContext'
 import { useNavigate } from 'react-router-dom'
 import { config } from 'config'
 import { useInstallationContext } from 'components/Contexts/InstallationContext'
+import { phone_width } from 'utils/constants'
 
 const StyledFrontPage = styled.div`
     display: flex;
@@ -26,7 +27,7 @@ const StyledFrontPage = styled.div`
     background-color: ${tokens.colors.ui.background__light.hex};
     min-height: calc(100vh - 65px);
 
-    @media (max-width: 600px) {
+    @media (max-width: ${phone_width}) {
         display: none;
     }
 `
@@ -81,7 +82,7 @@ const OngoingMissionsInfo = ({ goToOngoingTab }: { goToOngoingTab: () => void })
 
 export enum TabNames {
     MissionControl = 'mission-control',
-    InspectionPlan = 'inspection-plan',
+    InspectionPlan = 'inspection-overview',
     PredefinedMissions = 'predefined-missions',
     MissionHistory = 'mission-history',
     AutoScheduling = 'auto-scheduling',

frontend/src/components/Pages/FrontPage/MissionOverview/ScheduleMissionDialog/SelectMissionsToScheduleDialog.tsx

@@ -11,6 +11,7 @@ import { useMissionsContext } from 'components/Contexts/MissionRunsContext'
 import { AlertType, useAlertContext } from 'components/Contexts/AlertContext'
 import { FailedRequestAlertContent, FailedRequestAlertListContent } from 'components/Alerts/FailedRequestAlert'
 import { AlertCategory } from 'components/Alerts/AlertsBanner'
+import { phone_width } from 'utils/constants'
 
 const StyledMissionDialog = styled.div`
     display: flex;
@@ -34,7 +35,7 @@ const StyledDialog = styled(Dialog)`
     padding: 1rem;
     width: 580px;
 
-    @media (max-width: 600px) {
+    @media (max-width: ${phone_width}) {
         width: 80vw;
     }
 `

frontend/src/components/Pages/InfoPage.tsx

@@ -5,6 +5,7 @@ import { Header } from 'components/Header/Header'
 import { StyledPage } from 'components/Styles/StyledComponents'
 import styled from 'styled-components'
 import infoPageImage from 'mediaAssets/taurob-about-us.png'
+import { phone_width } from 'utils/constants'
 
 const StyledInfoPAge = styled(StyledPage)`
     width: 100%;
@@ -29,7 +30,7 @@ const StyledAboutSection = styled.div`
 const StyledTypography = styled(Typography)`
     text-align: center;
     width: 600px;
-    @media (max-width: 600px) {
+    @media (max-width: ${phone_width}) {
         width: 350px;
     }
 `
@@ -39,7 +40,7 @@ const StyledImage = styled.img`
     max-width: 45%;
     padding-left: 20px;
 
-    @media (max-width: 600px) {
+    @media (max-width: ${phone_width}) {
         max-width: 100vw;
         padding: 0px;
     }
@@ -54,7 +55,7 @@ const StyledInfoSection = styled.div`
     align-items: top;
     gap: 20px;
 
-    @media (max-width: 500px) {
+    @media (max-width: ${phone_width}) {
         flex-direction: column;
         gap: 2rem;
         padding-top: 20px;
@@ -68,7 +69,7 @@ const StyledInfo = styled.div`
     gap: 2rem;
     padding-top: 50px;
 
-    @media (max-width: 500px) {
+    @media (max-width: ${phone_width}) {
         width: 90%;
         padding-left: 15px;
     }

frontend/src/components/Pages/InspectionPage/InspectionOverview.tsx

@@ -16,12 +16,13 @@ import { StyledButton } from 'components/Styles/StyledComponents'
 import { useMissionDefinitionsContext } from 'components/Contexts/MissionDefinitionsContext'
 import { AlertCategory } from 'components/Alerts/AlertsBanner'
 import { Placeholder } from './InspectionUtilities'
+import { phone_width } from 'utils/constants'
 
 const StyledContent = styled.div`
     display: flex;
     flex-direction: column;
     align-items: end;
-    @media (max-width: 600px) {
+    @media (max-width: ${phone_width}) {
         align-items: start;
     }
 `

frontend/src/components/Pages/InspectionPage/InspectionTable.tsx

@@ -16,6 +16,7 @@ import { useMissionsContext } from 'components/Contexts/MissionRunsContext'
 import { useRobotContext } from 'components/Contexts/RobotContext'
 import { FrontPageSectionId } from 'models/FrontPageSectionId'
 import { SmallScreenInfoText } from 'utils/InfoText'
+import { phone_width } from 'utils/constants'
 
 const StyledIcon = styled(Icon)`
     display: flex;
@@ -26,7 +27,7 @@ const StyledIcon = styled(Icon)`
 const StyledTable = styled.div`
     display: grid;
     overflow-x: auto;
-    @media (max-width: 700px) {
+    @media (max-width: ${phone_width}) {
         width: calc(100vw - 30px);
     }
     max-width: fit-content;
@@ -56,7 +57,7 @@ const HideColumnsOnSmallScreen = styled.div`
     #SmallScreenInfoText {
         display: none;
     }
-    @media (max-width: 500px) {
+    @media (max-width: ${phone_width}) {
         #${InspectionTableColumns.Description} {
             display: none;
         }