added dark mode

src/app/app.component.sass

@@ -5,19 +5,8 @@ html, body
   margin: 0
   height: 100%
 
-#imprint
-  background-color:  $cSecondaryBackground
-  grid-template: 15% 70% 15% / 15% 70% 15% 
-  display: grid
-  min-height: 100vh
-  max-height: 100vh
 
-#about
-  background-color:  $cSecondaryBackground
-  grid-template: 15% 70% 15% / 15% 70% 15% 
-  display: grid
-  min-height: 100vh
-  max-height: 100vh
+
 
 
 

src/app/app.module.ts

@@ -40,6 +40,9 @@ import {MatCardModule} from '@angular/material/card';
 import {MatButtonToggleModule} from '@angular/material/button-toggle';
 import {MatSelectModule} from '@angular/material/select';
 import {MatCheckboxModule} from '@angular/material/checkbox';
+import { OverlayModule} from '@angular/cdk/overlay';
+import {MatSlideToggleModule} from '@angular/material/slide-toggle';
+import {MatMenuModule} from '@angular/material/menu';
 
 import { FlexLayoutModule } from '@angular/flex-layout';
 import { MainNavigationComponent } from './components/main-navigation/main-navigation.component';
@@ -108,7 +111,10 @@ const appRoutes: Routes = [
     MatCardModule,
     MatButtonToggleModule,
     MatSelectModule,
-    MatCheckboxModule
+    MatCheckboxModule,
+    OverlayModule,
+    MatSlideToggleModule,
+    MatMenuModule
   ],
   providers: [],
   bootstrap: [AppComponent]

src/app/components/about/about.component.html

@@ -1,9 +1,18 @@
-<div id="about">
-  <div id="aboutcontainer">
-    <h1>What's Greenvironment?</h1>
-    <h2>Hello!</h2>
-    <p>We, the greenviroment team want to create a netwok for environmentalists who care for our nature and our planet as much as we do.</p>
-    <p>We believe, that together we can do amazing things to protect our environment and keep it clean and green.</p>
-    <a href="/register">You aren't part of greenvironment yet? - join us here</a>
-  </div>
-</div>
+<div id="text0" style="text-align: center;">
+  <h1>Greenvironment</h1>
+  <p>Keep it clean and green!</p>
+  <button mat-icon-button>
+    <mat-icon class="white-icon">keyboard_arrow_down</mat-icon>
+  </button>
+</div>
+<div id="text1" style="text-align: center;">
+  <h1>What's Greenvironment?</h1>
+  <p>We, the greenviroment team want to create a netwok for environmentalists who care for our nature and our planet as much as we do.</p>
+</div>
+<div id="text2" style="text-align: center;">
+  <p>We believe, that together we can do amazing things to protect our environment and keep it clean and green.</p>
+  <p>You aren't part of greenvironment yet? - join us now!</p>
+  <a mat-raised-button class="link-button" routerLink="/register" >Register</a>
+  <br>
+  <a mat-raised-button class="link-button" routerLink="/login">Login</a>
+</div>

src/app/components/about/about.component.sass

@@ -1,22 +1,30 @@
 @import '../../../styles/mixins.sass'
 @import '../../../styles/vars.sass'
+@import '~@angular/material/theming'
+@import '../../../styles/greenvironment-material-theme.scss'
 
-#about
-  background-color:  $cSecondaryBackground
-  grid-template: 15% 70% 15% / 15% 70% 15% 
-  display: grid
-  min-height: 90vh
-  max-height: 90vh
+#text0, #text2
+  padding: 2em
+  max-width: 100%
+  min-height: 50%
+  background-color: mat-color($primary)
+  p, h1, h2 
+    color: white
+
+#text1
+  padding: 2em
+  min-height: 50%
+  max-width: 100%
+  p, h1, h2 
     
-#aboutcontainer
-    @include gridPosition(2, 2,2,2)
-    background-color: $cPrimaryBackground
-    padding: 1em
-    overflow: auto
+.white-icon
+  color: white
+  transform: scale(3)
+
+p 
+  font-size: 2em
 
-input
-    margin: 0.25em
-#header
-    @include gridPosition(1, 2, 1, 2)
-a
-  color: $cHeadPrimaryBackground
+.link-button
+  width: 100%
+  max-width: 30em
+  margin-bottom: 1em

src/app/components/main-navigation/main-navigation.component.html

@@ -30,9 +30,9 @@
       </button>
       <span>Greenvironment</span>
         <!--The following menu items will be hidden on both SM and XS screen sizes -->
-       <nav mat-tab-nav-bar backgroundColor="primary" fxShow="true" fxHide.lt-md="true">
+      <nav mat-tab-nav-bar backgroundColor="primary" fxShow="true" fxHide.lt-md="true">
         <div *ngIf="loggedIn">
-        <a mat-tab-link
+        <a mat-tab-link class="link"
               *ngFor="let link of navLinksLoggedIn"
               [routerLink]="link.path"
               (click)="activeLink = link"
@@ -44,7 +44,7 @@
           <a mat-tab-link (click)="logout()" >log out</a>
           </div>
           <div *ngIf="!loggedIn">
-          <a mat-tab-link
+          <a mat-tab-link class="link"
           *ngFor="let link of navLinks"
           [routerLink]="link.path"
           (click)="activeLink = link"
@@ -54,7 +54,31 @@
           {{link.label}}
           </a>
         </div>
-       </nav>
+      </nav>
+      <!--neuer shit jooooooooooooooooooooooooooooooooooooooooooooooooo--->
+      <div id="menu-button-box">
+      <button mat-icon-button [matMenuTriggerFor]="menu" id="menu-button">
+        <mat-icon>more_vert</mat-icon>
+      </button>
+      </div>
+      <mat-menu #menu="matMenu">
+        <button mat-menu-item>
+        <mat-slide-toggle
+          color="primary"
+          class="theme-button"
+          (click)="toggletheme()">
+          dark mode
+        </mat-slide-toggle>
+        </button>
+        <button mat-menu-item disabled>
+          <mat-icon>voicemail</mat-icon>
+          <span>Check voice mail</span>
+        </button>
+        <button mat-menu-item>
+          <mat-icon>notifications_off</mat-icon>
+          <span>Disable alerts</span>
+        </button>
+      </mat-menu>
     </mat-toolbar>
     <router-outlet></router-outlet>
   </mat-sidenav-content>

src/app/components/main-navigation/main-navigation.component.sass

@@ -26,6 +26,13 @@
   width: 100%
   margin-bottom: 0.5em 
 
+/deep/ .mat-tab-link
+  min-width: 5em!important
+
+#menu-button-box
+  text-align: right
+  width: 100%
+
 
 
 

src/app/components/main-navigation/main-navigation.component.ts

@@ -1,4 +1,4 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, HostBinding  } from '@angular/core';
 import { BreakpointObserver, Breakpoints } from '@angular/cdk/layout';
 import { Observable } from 'rxjs';
 import { map, shareReplay } from 'rxjs/operators';
@@ -9,6 +9,7 @@ import { Levellist } from 'src/app/models/levellist';
 import { Http } from '@angular/http';
 import { Router } from '@angular/router';
 import { User } from 'src/app/models/user';
+import { OverlayContainer} from '@angular/cdk/overlay';
 
 @Component({
   selector: 'app-main-navigation',
@@ -16,14 +17,16 @@ import { User } from 'src/app/models/user';
   styleUrls: ['./main-navigation.component.sass']
 })
 export class MainNavigationComponent implements OnInit {
-  loggedIn: boolean = false;
-  userId: number;
+  loggedIn: boolean = false
+  userId: number
   username: string
   user: User
   levellist: Levellist = new Levellist()
   level: string
   points: number
-  profileUrl: string;
+  profileUrl: string
+
+  lighttheme : boolean = true
 
 
   isHandset$: Observable<boolean> = this.breakpointObserver.observe(Breakpoints.Handset)
@@ -32,7 +35,7 @@ export class MainNavigationComponent implements OnInit {
       shareReplay()
     );
 
-  constructor(private data: DatasharingService,private selfservice: SelfService,private breakpointObserver: BreakpointObserver, private http: Http, private router: Router) {}
+  constructor(public overlayContainer: OverlayContainer, private data: DatasharingService,private selfservice: SelfService,private breakpointObserver: BreakpointObserver, private http: Http, private router: Router) {}
   ngOnInit() {
     this.data.currentUserInfo.subscribe(user => {
       this.user = user
@@ -57,7 +60,22 @@ export class MainNavigationComponent implements OnInit {
     { path: '/login', label: 'Login' },
     { path: '/register', label: 'Register' },
   ];
+  
+  public toggletheme(){
+    if(this.lighttheme){
+      this.onSetTheme("dark-theme");
+      this.lighttheme = false;
+    } else{
+      this.onSetTheme("light-theme");
+      this.lighttheme = true;
+    } 
+  }
 
+  @HostBinding('class') componentCssClass;
+  onSetTheme(theme) {
+    this.overlayContainer.getContainerElement().classList.add(theme);
+    this.componentCssClass = theme;
+  }
   logout() {
     let url = environment.graphQLUrl
  

src/styles/greenvironment-material-theme.scss

@@ -9,19 +9,32 @@
 // Define the palettes for your theme using the Material Design palettes available in palette.scss
 // (imported above). For each palette, you can optionally specify a default, lighter, and darker
 // hue. Available color palettes: https://material.io/design/color/
-$theme-primary: mat-palette($mat-green);
-$theme-accent:  mat-palette($mat-pink, A200, A100, A400);
+$primary: mat-palette($mat-green);
+$accent:  mat-palette($mat-pink, A200, A100, A400);
 
 // The warn palette is optional (defaults to red).
-$theme-warn:    mat-palette($mat-red);
+$warn:    mat-palette($mat-red);
 
 // Create the theme object (a Sass map containing all of the palettes).
-$my-theme: mat-light-theme($theme-primary, $theme-accent, $theme-warn);
+$light-theme: mat-light-theme($primary, $accent, $warn);
 
+$dark-primary: mat-palette($mat-green);
+$dark-accent:  mat-palette($mat-pink, A200, A100, A400);
 
+// The warn palette is optional (defaults to red).
+$dark-warn:    mat-palette($mat-red);
+
+// Create the theme object (a Sass map containing all of the palettes).
+$dark-theme: mat-dark-theme($dark-primary, $dark-accent, $dark-warn);
 
+.dark-theme {
+    @include angular-material-theme($dark-theme);
+}
 
+.light-theme {
+    @include angular-material-theme($light-theme)
+}
 // Include theme styles for core and each component used in your app.
 // Alternatively, you can import and @include the theme mixins for each component
 // that you are using.
-@include angular-material-theme($my-theme);
+@include angular-material-theme($light-theme);