added material text added material design to imprint and profile page

src/app/app.module.ts

@@ -27,6 +27,7 @@ import { ImprintComponent } from './components/imprint/imprint.component';
 import { AboutComponent } from './components/about/about.component';
 import { ChatcontactsComponent } from './components/chatmanager/chatcontacts/chatcontacts.component';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import {MatTableModule} from '@angular/material/table';
 
 import { MatSliderModule } from '@angular/material/slider';
 import { MatFormFieldModule  } from '@angular/material/form-field';
@@ -43,12 +44,14 @@ 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 {MatRippleModule} from '@angular/material/core';
 
 import { FlexLayoutModule } from '@angular/flex-layout';
 import { MainNavigationComponent } from './components/main-navigation/main-navigation.component';
 import { LayoutModule } from '@angular/cdk/layout';
 import { MatButtonModule } from '@angular/material/button';
 import { MatListModule } from '@angular/material/list';
+import {MatSortModule} from '@angular/material/sort';
 
 
 const config: SocketIoConfig = { url: 'http://localhost:4444', options: {} };
@@ -114,7 +117,10 @@ const appRoutes: Routes = [
     MatCheckboxModule,
     OverlayModule,
     MatSlideToggleModule,
-    MatMenuModule
+    MatMenuModule,
+    MatRippleModule,
+    MatTableModule,
+    MatSortModule
   ],
   providers: [],
   bootstrap: [AppComponent]

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

@@ -1,17 +1,18 @@
 <div id="text0" style="text-align: center;">
   <h1>Greenvironment</h1>
-  <p>Keep it clean and green!</p>
+  <br> <br> <br> <br> <br>
+  <h1 class="mat-display-3">Keep it clean and green!</h1>
   <button mat-icon-button>
-    <mat-icon class="white-icon">keyboard_arrow_down</mat-icon>
+    <mat-icon class="big-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>
+  <p class="mat-display-1">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>
+  <p class="mat-display-1">We believe, that together we can do amazing things to protect our environment and keep it clean and green.</p>
+  <p class="mat-display-1">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>

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

@@ -8,21 +8,15 @@
   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 
     
-.white-icon
-  color: white
-  transform: scale(3)
-
-p 
-  font-size: 2em
+.big-icon
+  //color: white
+  transform: scale(2)
 
 .link-button
   width: 100%

src/app/components/feed/feed.component.html

@@ -19,7 +19,7 @@
     <mat-label>What did you do?</mat-label>
     <mat-select [(ngModel)]="selectedValue" name="action">
       <mat-option>nothing ;)</mat-option>
-      <mat-option *ngFor="let action of actionlist.actions" [value]="action.points">
+      <mat-option *ngFor="let action of actionlist.Actions" [value]="action.points">
         {{action.name}}
       </mat-option>
     </mat-select>

src/app/components/imprint/imprint.component.html

@@ -1,8 +1,6 @@
+<mat-toolbar color="primary">Imprint</mat-toolbar>
 <div id="imprint">
-  <div id="imprintcontainer">
-    <h1>Imprint</h1>
-    <p>The greenvironment network is being developed by the greenvironment team</p>
-    <h2>Contact</h2>
-    <p>Email: nick.derkoenig@greenvironment.net</p>
-  </div>
+  <p>The greenvironment network is being developed by the greenvironment team</p>
+  <h2>Contact</h2>
+  <p>Email: nick.derkoenig@greenvironment.net</p>
 </div>

src/app/components/imprint/imprint.component.sass

@@ -1,19 +1,15 @@
 @import '../../../styles/mixins.sass'
 @import '../../../styles/vars.sass'
 
+
 #imprint
-  background-color:  $cSecondaryBackground
-  grid-template: 15% 70% 15% / 15% 70% 15% 
-  display: grid
-  height: 90vh
-    
-#imprintcontainer
-    @include gridPosition(2, 2,2,2)
-    background-color: $cPrimaryBackground
-    padding: 1em
-    overflow: auto
+  padding: 2em
+  max-width: 35em
+  margin: 0 auto
+
+h1.mat-display-1
+    margin: 0
+
     
-input
-    margin: 0.25em
-#header
-    @include gridPosition(1, 2, 1, 2)
+
+

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

@@ -1,4 +1,5 @@
-<mat-sidenav-container class="sidenav-container">
+<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" rel="stylesheet">
+<mat-sidenav-container class="sidenav-container" class="mat-typography">
   <mat-sidenav #drawer class="sidenav" 
       fxShow="true" fxHide.gt-sm="true"
       fixedInViewport="false"
@@ -19,7 +20,7 @@
     </mat-nav-list>
   </mat-sidenav>
   <mat-sidenav-content>
-    <mat-toolbar color="primary">
+    <mat-toolbar color="primary" class="mat-elevation-z4">
       <button
         type="button"
         aria-label="Toggle sidenav"

src/app/components/profile/profile.component.html

@@ -1,7 +1,6 @@
-
+<mat-toolbar color="primary">Profile</mat-toolbar>
 <div id="profile">
-    <div id="profilecontainer" *ngIf="profileNotFound == false">
-        <h1>Profile</h1>
+    <div id="profilecontainer" [hidden]="profileNotFound">
         <table style="width:100%">
             <tr>
                 <td>name: </td>
@@ -39,7 +38,26 @@
                  You can get a different amount of points
                 for differnet actions you can see in the list below:
             </p>
-            <table style="width:100%">
+            <table mat-table [dataSource]="dataSource" matSort class="mat-elevation-z8">
+                <!--- Note that these columns can be defined in any order.
+                        The actual rendered columns are set as a property on the row definition" -->
+                
+                <!-- Position Column -->
+                <ng-container matColumnDef="points">
+                    <th mat-header-cell *matHeaderCellDef mat-sort-header> points </th>
+                    <td mat-cell *matCellDef="let action"> {{action.points}} </td>
+                </ng-container>
+
+                <!-- Name Column -->
+                <ng-container matColumnDef="name">
+                    <th mat-header-cell *matHeaderCellDef mat-sort-header> action </th>
+                    <td mat-cell *matCellDef="let action"> {{action.name}} </td>
+                </ng-container>
+
+                <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+                <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
+            </table>
+            <!--<table style="width:100%">
                 <tr>
                     <th>points </th>
                     <th>action</th>
@@ -48,7 +66,7 @@
                     <td>{{action.points}}</td>
                     <td>{{action.name}}</td>
                 </tr>
-            </table>
+            </table>-->
         </div>
     <div id="profilecontainer" *ngIf="profileNotFound">
             <h1>Profile not found :(</h1>

src/app/components/profile/profile.component.sass

@@ -1,20 +1,14 @@
 @import '../../../styles/mixins.sass'
 @import '../../../styles/vars.sass'
 
-#profile
-  background-color:  $cSecondaryBackground
-  grid-template: 3% 94% 3% / 10% 80% 10% 
-  display: grid
-  min-height: 90vh
-  max-height: 90vh
-  
+#profile 
+  padding: 2em
+  max-width: 1200px
+  margin: 0 auto
 
-#profilecontainer
-  @include gridPosition(2, 2,2,2)
-  //grid-template: 15% 15% 15% 15% 15% 15% / 100%
-  background-color: $cPrimaryBackground
-  padding: 1em
-  overflow: auto
-
-th
-  text-align: left
+.mat-table
+  width: 100%
+  max-width: 690px
+  margin: 0 auto
+.mat-header-cell
+  padding-right: 0.5em

src/app/components/profile/profile.component.ts

@@ -1,27 +1,34 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, ViewChild} from '@angular/core';
 import {Router} from '@angular/router';
 import {Http, URLSearchParams, Headers} from '@angular/http';
 import { User } from 'src/app/models/user';
 import { Actionlist } from 'src/app/models/actionlist';
 import { Levellist } from 'src/app/models/levellist';
 import { environment } from 'src/environments/environment';
+import {MatSort} from '@angular/material/sort';
+import {MatTableDataSource} from '@angular/material/table';
 
 @Component({
   selector: 'app-profile',
   templateUrl: './profile.component.html',
   styleUrls: ['./profile.component.sass']
 })
+
 export class ProfileComponent implements OnInit {
   actionlist: Actionlist = new Actionlist();
+  
   levellist: Levellist = new Levellist();
   user: User = new User()
   id : string
   rankname: string;
   profileNotFound : boolean = false;
+  displayedColumns = ['points', 'name'];
+  dataSource = new MatTableDataSource(this.actionlist.Actions);
   constructor(private router: Router,private http: Http) { }
   
-
+  @ViewChild(MatSort, {static: true}) sort: MatSort;
   ngOnInit() {
+    this.dataSource.sort = this.sort;
     this.id = this.router.url.substr(this.router.url.lastIndexOf("/") + 1);
     //let url = './graphql'
     let url = environment.graphQLUrl

src/app/components/social/friends/friends.component.html

@@ -12,7 +12,8 @@
     </div>-->
     <mat-card class="friend-card" *ngFor="let friend of friends" 
     [class.selected]="friend === selectedFriend" (click)="showFriendProfile(friend)"
-    tabindex="0">
+    tabindex="0"
+    matRipple>
       <mat-card-header>
         <div mat-card-avatar class="profile-picture"></div>
         <mat-card-title>{{friend.name}}</mat-card-title>

src/app/models/actionlist.ts

@@ -1,5 +1,13 @@
+
+export interface Action {
+  id: number
+  name: string;
+  points: number;
+}
+
 export class Actionlist{
-    actions: { id: number, name: string, points: number}[] = [
+
+     Actions: Action[] = [
       { id: 0, name: "collect a lot of trash",points: 25},
       { id: 1, name: "collect a bit of trash",points: 10 },
       { id: 2, name: "do trash seperation", points: 5 },