Added a header to index.tsx (#91)

* Added a dashboard to index.tsx

* for PR 91

* PR 91, also did format and lint

pages/index.tsx

@@ -1,6 +1,7 @@
 import dynamic from 'next/dynamic';
 import { CircularProgress } from '@mui/material';
 import DashboardContainer from '@/views/DashboardContainer';
+import Header from '@/views/components/Header/Header';
 import styles from './style.module.css';
 
 const MapsContainer = dynamic(() => import('@/views/MapsContainer'), {
@@ -23,11 +24,14 @@ const MapsContainer = dynamic(() => import('@/views/MapsContainer'), {
 
 export default function Home() {
   return (
-    <div className={styles.maincontainer}>
-      <MapsContainer />
-      <div className={styles.dashboardcontainer}>
-        <DashboardContainer/>
+    <>
+      <Header />
+      <div className={styles.maincontainer}>
+        <MapsContainer />
+        <div className={styles.dashboardcontainer}>
+          <DashboardContainer />
+        </div>
       </div>
-    </div>
+    </>
   );
 }

pages/style.module.css

@@ -1,13 +1,12 @@
 .maincontainer {
-    display: grid;
-    grid-template-columns: 1fr 1fr;
-    margin-top: 0;
-    height: 50vh;
-    position: absolute;
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  margin-top: 0;
+  height: 50vh;
+  position: absolute;
 }
 
 .dashboardcontainer {
-    overflow-y: scroll;
-    height: 100vh;
-    padding-left: 10px;
+  overflow-y: scroll;
+  padding-left: 10px;
 }

views/components/Header/Header.tsx

@@ -0,0 +1,13 @@
+import React from 'react';
+import styles from './header.module.css';
+
+function Header() {
+  return (
+    <header className={styles.header}>
+      <img src='SailbotLogo.png' alt='Logo' className={styles.logo} />
+      <h1 className={styles.title}>UBC SAILBOT</h1>
+    </header>
+  );
+}
+
+export default Header;

views/components/Header/header.module.css

@@ -0,0 +1,22 @@
+.header {
+  padding: 5px;
+  margin: -10px;
+  margin-bottom: 10px;
+  display: flex;
+  align-items: center;
+  background: linear-gradient(to right, #26619c, #3498db);
+}
+
+.title {
+  font-family: Verdana, Geneva, sans-serif;
+  font-weight: 20px;
+  color: white;
+  margin-left: 20px;
+  font-size: 30px;
+  letter-spacing: 2px;
+}
+
+.logo {
+  width: 30px;
+  margin-left: 50px;
+}

views/components/LineChart/UPlotLineChart.tsx

@@ -52,7 +52,10 @@ export default class UPlotLineChartComponent extends React.Component<
 
   componentDidMount() {
     // Set the chart's width dynamically; the height is set manually above within 'options' in state.
-    this.setState((state) => ({...state, options: {...state.options, width: (this.getWindowSize().width / 2) - 40}}));
+    this.setState((state) => ({
+      ...state,
+      options: { ...state.options, width: this.getWindowSize().width / 2 - 40 },
+    }));
 
     window.addEventListener('resize', this.setChartSize);
   }
@@ -67,18 +70,21 @@ export default class UPlotLineChartComponent extends React.Component<
    * @param e the event called whenever a user resizes their window.
    */
   setChartSize = (e: any) => {
-      this.state.chart.setSize({width: (this.getWindowSize().width / 2) - 40, height: this.state.options.height});
-  }
+    this.state.chart.setSize({
+      width: this.getWindowSize().width / 2 - 40,
+      height: this.state.options.height,
+    });
+  };
 
   /**
    * @returns the current window size (width, height) of the user's device.
    */
   getWindowSize = () => {
     return {
-            width: window.innerWidth,
-            height: window.innerHeight
+      width: window.innerWidth,
+      height: window.innerHeight,
     };
-  }
+  };
 
   /**
    * Sets the chart reference in the component's state.

views/components/LineChart/UPlotMultiLineChart.tsx

@@ -67,7 +67,10 @@ export default class UPlotMultiLineChartComponent extends React.Component<
 
   componentDidMount() {
     // Set the chart's width dynamically; the height is set manually above within 'options' in state.
-    this.setState((state) => ({...state, options: {...state.options, width: (this.getWindowSize().width / 2) - 40}}));
+    this.setState((state) => ({
+      ...state,
+      options: { ...state.options, width: this.getWindowSize().width / 2 - 40 },
+    }));
 
     window.addEventListener('resize', this.setChartSize);
   }
@@ -82,18 +85,21 @@ export default class UPlotMultiLineChartComponent extends React.Component<
    * @param e the event called whenever a user resizes their window.
    */
   setChartSize = (e: any) => {
-      this.state.chart.setSize({width: (this.getWindowSize().width / 2) - 40, height: this.state.options.height});
-  }
+    this.state.chart.setSize({
+      width: this.getWindowSize().width / 2 - 40,
+      height: this.state.options.height,
+    });
+  };
 
   /**
    * @returns the current window size (width, height) of the user's device.
    */
   getWindowSize = () => {
     return {
-            width: window.innerWidth,
-            height: window.innerHeight
+      width: window.innerWidth,
+      height: window.innerHeight,
     };
-  }
+  };
 
   /**
    * Sets the chart reference in the component's state.

views/components/Maps/Maps.tsx

@@ -180,7 +180,7 @@ export default class Maps extends React.Component<IMapsProps, IMapsState> {
         center={convertToLatLng(this.props.gpsLocation)}
         zoom={13}
         scrollWheelZoom={true}
-        style={{ height: '100vh', width: '100wh'}}
+        style={{ height: 'calc(100vh - 115px)', width: '100wh' }}
         ref={this.setMapRef}
       >
         <TileLayer