Create general style for all pages

equinor · Aug 16, 2024 · 4e4addf · 4e4addf
1 parent bf631e3
commit 4e4addf
Show file tree

Hide file tree

Showing 7 changed files with 17 additions and 48 deletions.
diff --git a/frontend/src/components/Header/NavigationMenu.tsx b/frontend/src/components/Header/NavigationMenu.tsx
@@ -49,7 +49,7 @@ export const NavigationMenu = () => {
                 aria-controls="menu"
                 onClick={() => (isOpen ? closeMenu() : openMenu())}
             >
-                <Icon name={Icons.Menu}></Icon>
+                <Icon name={Icons.Menu} />
                 {TranslateText('Menu')}
             </StyledButton>
             <Menu open={isOpen} id="menu" aria-labelledby="menu" onClose={closeMenu} anchorEl={anchorEl}>

diff --git a/frontend/src/components/Pages/FrontPage/FrontPage.tsx b/frontend/src/components/Pages/FrontPage/FrontPage.tsx
@@ -5,15 +5,12 @@ import { Header } from 'components/Header/Header'
 import styled from 'styled-components'
 import { InspectionOverviewSection } from 'components/Pages/InspectionPage/InspectionOverview'
 import { StopRobotDialog } from './MissionOverview/StopDialogs'
-import { tokens } from '@equinor/eds-tokens'
+import { StyledPage } from 'components/Styles/StyledComponents'
 
-const StyledFrontPage = styled.div`
+const StyledFrontPage = styled(StyledPage)`
     display: grid;
     grid-template-columns: repeat(auto-fill, minmax(100%, 1fr));
     gap: 3rem;
-    padding: 15px 15px;
-    background-color: ${tokens.colors.ui.background__light.hex};
-    min-height: calc(100vh - 65px);
 `
 
 const HorizontalContent = styled.div`

diff --git a/frontend/src/components/Pages/FrontPage/MissionControlPage.tsx b/frontend/src/components/Pages/FrontPage/MissionControlPage.tsx
@@ -3,16 +3,7 @@ import { OngoingMissionView } from 'components/Pages/FrontPage/MissionOverview/O
 import { Header } from 'components/Header/Header'
 import styled from 'styled-components'
 import { StopRobotDialog } from './MissionOverview/StopDialogs'
-import { tokens } from '@equinor/eds-tokens'
-
-const StyledFrontPage = styled.div`
-    display: flex;
-    flex-direction: column;
-    gap: 1rem;
-    padding: 15px 15px;
-    background-color: ${tokens.colors.ui.background__light.hex};
-    min-height: calc(100vh - 65px);
-`
+import { StyledPage } from 'components/Styles/StyledComponents'
 
 const HorizontalContent = styled.div`
     display: flex;
@@ -32,15 +23,15 @@ export const MissionControlPage = () => {
     return (
         <>
             <Header page={'missionControlPage'} />
-            <StyledFrontPage>
+            <StyledPage>
                 <StopRobotDialog />
                 <HorizontalContent>
                     <MissionsContent>
                         <OngoingMissionView />
                         <MissionQueueView />
                     </MissionsContent>
                 </HorizontalContent>
-            </StyledFrontPage>
+            </StyledPage>
         </>
     )
 }
diff --git a/frontend/src/components/Pages/InspectionPage/InspectionPage.tsx b/frontend/src/components/Pages/InspectionPage/InspectionPage.tsx
@@ -1,24 +1,14 @@
 import { Header } from 'components/Header/Header'
-import styled from 'styled-components'
 import { InspectionOverviewSection } from 'components/Pages/InspectionPage/InspectionOverview'
-import { tokens } from '@equinor/eds-tokens'
-
-const StyledFrontPage = styled.div`
-    display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(100%, 1fr));
-    gap: 3rem;
-    padding: 15px 15px;
-    background-color: ${tokens.colors.ui.background__light.hex};
-    min-height: calc(100vh - 65px);
-`
+import { StyledPage } from 'components/Styles/StyledComponents'
 
 export const InspectionPage = () => {
     return (
         <>
             <Header page={'inspectionPage'} />
-            <StyledFrontPage>
+            <StyledPage>
                 <InspectionOverviewSection />
-            </StyledFrontPage>
+            </StyledPage>
         </>
     )
 }
diff --git a/frontend/src/components/Pages/MissionHistoryPage/MissionHistoryPage.tsx b/frontend/src/components/Pages/MissionHistoryPage/MissionHistoryPage.tsx
@@ -2,26 +2,20 @@ import { MissionHistoryView } from './MissionHistoryView'
 import { BackButton } from 'utils/BackButton'
 import { Header } from 'components/Header/Header'
 import { StyledPage } from 'components/Styles/StyledComponents'
-import { styled } from 'styled-components'
-import { tokens } from '@equinor/eds-tokens'
 
 export type RefreshProps = {
     refreshInterval: number
 }
-
-const StyledMissionHistoryPage = styled(StyledPage)`
-    background-color: ${tokens.colors.ui.background__light.hex};
-`
 export const MissionHistoryPage = () => {
     const refreshInterval = 1000
 
     return (
         <>
             <Header page={'history'} />
-            <StyledMissionHistoryPage>
+            <StyledPage>
                 <BackButton />
                 <MissionHistoryView refreshInterval={refreshInterval} />
-            </StyledMissionHistoryPage>
+            </StyledPage>
         </>
     )
 }
diff --git a/frontend/src/components/Pages/RobotPage/RobotsPage.tsx b/frontend/src/components/Pages/RobotPage/RobotsPage.tsx
@@ -1,24 +1,21 @@
 import { RobotStatusSection } from 'components/Pages/FrontPage/RobotCards/RobotStatusSection'
 import { Header } from 'components/Header/Header'
 import styled from 'styled-components'
-import { tokens } from '@equinor/eds-tokens'
+import { StyledPage } from 'components/Styles/StyledComponents'
 
-const StyledFrontPage = styled.div`
+const StyledRobotsPage = styled(StyledPage)`
     display: grid;
     grid-template-columns: repeat(auto-fill, minmax(100%, 1fr));
     gap: 3rem;
-    padding: 15px 15px;
-    background-color: ${tokens.colors.ui.background__light.hex};
-    min-height: calc(100vh - 65px);
 `
 
 export const RobotsPage = () => {
     return (
         <>
             <Header page={'robotsPage'} />
-            <StyledFrontPage>
+            <StyledRobotsPage>
                 <RobotStatusSection />
-            </StyledFrontPage>
+            </StyledRobotsPage>
         </>
     )
 }
diff --git a/frontend/src/components/Styles/StyledComponents.tsx b/frontend/src/components/Styles/StyledComponents.tsx
@@ -28,13 +28,13 @@ export const TextAlignedButton = styled(Button)`
 `
 export const StyledPage = styled.div`
     display: flex;
-    flex-wrap: wrap;
     justify-content: start;
     flex-direction: column;
     gap: 1rem;
-    padding: 2rem;
+    padding: 15px 15px;
     @media (max-width: 600px) {
         padding: 0.7rem;
     }
     min-height: calc(100vh - 65px);
+    background-color: ${tokens.colors.ui.background__light.hex};
 `