use mixins for breakpoints, add logout to nav

Author: qvalentin

src/components/basicElements/Header.tsx

@@ -5,6 +5,7 @@ import logo from "../../assets/images/logos/logo.png";
 import { Nav, Navbar, NavbarBrand, NavDropdown } from "react-bootstrap";
 import { SystemState } from "../../background/redux/actions/sytemState";
 import { connect, ConnectedProps } from "react-redux";
+import {logout} from "../../background/api/auth";
 
 export interface navBarElement_Interface {
   name: string;
@@ -98,6 +99,13 @@ function Header(props: PropsFromRedux): ReactElement {
                   >
                     Profile
                   </NavDropdown.Item>
+                  <NavDropdown.Item
+                    onClick={(event: any) => {
+                      logout()
+                    }}
+                  >
+                    Logout
+                  </NavDropdown.Item>
                 </NavDropdown>
               </Nav>
             )}

src/style/helpers.scss

@@ -21,15 +21,16 @@ root {
   background-color: $body-bg;
   border-radius: 15px;
 
-  @media (min-width: 992px) {
+  @include media-breakpoint-up(lg) {
     width: 50%;
     left: 25%;
   }
 
-  @media (min-width: 1150px) {
+  @include media-breakpoint-up(xl) {
     width: 40%;
     left: 30%;
   }
+
   @media (max-height: 659px) {
     margin-top: 15px;
   }
@@ -41,4 +42,4 @@ root {
 
 .login-input {
   max-width: 450px;
-}
+}