Remove previous frontpage and clean up dependencies

frontend/src/App.tsx

@@ -1,4 +1,3 @@
-import './app.css'
 import { AuthenticatedTemplate, UnauthenticatedTemplate } from '@azure/msal-react'
 import { SignInPage } from './components/SignInPage/SignInPage'
 import { FlotillaSite } from 'components/FrontPage/FlotillaSite'

frontend/src/components/FrontPage/FlotillaSite.tsx

@@ -3,7 +3,6 @@ import { fetchAccessToken } from 'authConfig'
 import { createContext, useEffect, useState } from 'react'
 import { BrowserRouter, Route, Routes } from 'react-router-dom'
 import { FrontPage } from './FrontPage'
-import { TestPage } from './TestPage'
 
 export const AccessTokenContext = createContext('')
 
@@ -24,7 +23,6 @@ export function FlotillaSite() {
                         <BrowserRouter>
                             <Routes>
                                 <Route path="/" element={<FrontPage />} />
-                                <Route path="test" element={<TestPage />} />
                             </Routes>
                         </BrowserRouter>
                     </AccessTokenContext.Provider>

frontend/src/components/FrontPage/FrontPage.tsx

@@ -1,30 +1,33 @@
-import { Typography, Button } from '@equinor/eds-core-react'
-import { RobotOverview } from 'components/RobotOverview'
-import { ProfileContent } from 'components/SignInPage/ProfileContent'
-import { defaultRobots } from 'models/robot'
+import { Button } from '@equinor/eds-core-react'
+import { MissionView } from 'components/MissionOverview/MissionView'
+import { RobotStatusSection } from 'components/RobotCards/RobotStatusSection'
+import { useApi } from 'components/SignInPage/ApiCaller'
+import styled from 'styled-components'
 
-const robots = [defaultRobots['taurob'], defaultRobots['exRobotics'], defaultRobots['turtle']]
+const StyledFrontPage = styled.div`
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+    gap: 1rem;
+`
 
 export function FrontPage() {
+    const apiCaller = useApi()
+    var backendRobots
     return (
-        <>
-            <ProfileContent />
-            <div className="test-button">
-                <Button href="test">To Test Page</Button>
+        <StyledFrontPage>
+            <MissionView />
+            <RobotStatusSection />
+            <div>
+                <Button
+                    variant="contained"
+                    onClick={() => {
+                        backendRobots = apiCaller.getRobots()
+                        console.log(backendRobots)
+                    }}
+                >
+                    Test Backend
+                </Button>
             </div>
-            <div className="header">
-                <Typography color="primary" variant="h1" bold>
-                    Flotilla
-                </Typography>
-            </div>
-            <div className="robot-overview">
-                <RobotOverview robots={robots}></RobotOverview>
-            </div>
-            <div className="mission-overview">
-                <Typography variant="h2" style={{ marginTop: '20px' }}>
-                    Mission Overview
-                </Typography>
-            </div>
-        </>
+        </StyledFrontPage>
     )
 }

frontend/src/components/MissionOverview/MissionCard.tsx

@@ -1,4 +1,4 @@
-import { Card, Typography } from '@equinor/eds-core-react'
+import { Card } from '@equinor/eds-core-react'
 import { tokens } from '@equinor/eds-tokens'
 import { ScheduledMission } from 'models/scheduledMission'
 interface ScheduledMissionProps {

frontend/src/components/MissionOverview/MissionView.tsx

@@ -1,4 +1,4 @@
-import { Button, Card, Typography } from '@equinor/eds-core-react'
+import { Button, Typography } from '@equinor/eds-core-react'
 import styled from 'styled-components'
 import { MissionCard } from './MissionCard'
 import { useApi } from 'components/SignInPage/ApiCaller'

frontend/src/components/RobotCards/RobotStatusSection.tsx

@@ -1,6 +1,5 @@
 import { Typography } from '@equinor/eds-core-react'
-import { useApi } from 'components/SignInPage/ApiCaller'
-import { defaultRobots, Robot } from 'models/robot'
+import { defaultRobots } from 'models/robot'
 import styled from 'styled-components'
 import { RobotStatusCard } from './RobotStatusCard'
 const robots = [defaultRobots['taurob'], defaultRobots['exRobotics'], defaultRobots['turtle']]
@@ -17,8 +16,6 @@ const RobotView = styled.div`
 `
 
 export function RobotStatusSection() {
-    const apiCaller = useApi()
-    // var backendRobots = apiCaller.getRobots()
     var defaultRobots = robots.map(function (robot, index) {
         return <RobotStatusCard key={index} robot={robot} />
     })