TASK-30 Header

src/app.tsx

@@ -3,11 +3,13 @@ import React from "react";
 import SchedulePage from "./components/schedule-page/schedule-page.component";
 import WorkersPage from "./components/workers-page/workers-page.component";
 import { CustomGlobalHotKeys } from "./components/common-components/tools/globalhotkeys.component";
+import Header from "./components/common-components/header/header";
 
 function App(): JSX.Element {
   return (
     <React.Fragment>
       <CustomGlobalHotKeys />
+      <Header />
       <Switch>
         <Route path="/" component={SchedulePage} exact />
         <Route path="/workers" component={WorkersPage} />

src/assets/styles/styles-all.scss

@@ -23,4 +23,5 @@
 @import "styles/custom/tables";
 @import "styles/custom/toolbar";
 @import "styles/custom/add-worker-modal";
+@import "styles/custom/header";
 @import "styles/custom/month-switch";

src/assets/styles/styles/custom/_header.scss

@@ -0,0 +1,18 @@
+#header {
+  display: flex;
+  flex-direction: row;
+  width: 100%;
+  height: 52px;
+  background-color: $primary-header-color;
+  padding: 0 20px 0 20px;
+  align-items: center;
+  justify-content: left;
+
+  #AssignmentIndIcon {
+    color: $header-text-color;
+  }
+
+  .filler {
+    flex-grow: 1;
+  }
+}

src/assets/styles/styles/custom/_month-switch.scss

@@ -4,7 +4,7 @@
   font-size: 16px;
   letter-spacing: 1px;
   * {
-    color: $primary-text-color;
+    color: $header-text-color;
   }
   span {
     margin: 5px;

src/assets/styles/styles/custom/_variables.scss

@@ -8,6 +8,10 @@ $enable-transitions: true !default;
 $enable-grid-classes: true !default;
 $enable-print-styles: true !default;
 
+// Header
+$primary-header-color: #1d3557 !default;
+$header-text-color: #ffffff !default;
+
 // Color system
 
 $primary: #1d3557 !default;

src/components/common-components/header/header.tsx

@@ -0,0 +1,15 @@
+import React from "react";
+import { MonthSwitchComponent } from "../month-switch/month-switch.component";
+import AssignmentIndIcon from "@material-ui/icons/AssignmentInd";
+
+export default function Header(): JSX.Element {
+  return (
+    <>
+      <div id={"header"}>
+        <AssignmentIndIcon id={"AssignmentIndIcon"} />
+        <MonthSwitchComponent />
+        <div className={"filler"} />
+      </div>
+    </>
+  );
+}

src/components/common-components/month-switch/month-switch.component.tsx

@@ -9,7 +9,7 @@ import { StringHelper } from "../../../helpers/string.helper";
 interface MonthSwitchOpions {
   key?: string;
 }
-export function MonthSwitchComponent(options: MonthSwitchOpions) {
+export function MonthSwitchComponent(options: MonthSwitchOpions): JSX.Element {
   const arrowSize = "small";
   /* eslint-disable @typescript-eslint/camelcase */
   const { month_number, year } = useSelector(