Merge branch 'max_dev' of Software_Engineering_I/greenvironment-frontend into master

src/app/app.module.ts

@@ -45,6 +45,8 @@ 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 {MatBadgeModule} from '@angular/material/badge';
+import {MatProgressSpinnerModule} from '@angular/material/progress-spinner';
 
 import { FlexLayoutModule } from '@angular/flex-layout';
 import { MainNavigationComponent } from './components/main-navigation/main-navigation.component';
@@ -122,7 +124,9 @@ const appRoutes: Routes = [
     MatMenuModule,
     MatRippleModule,
     MatTableModule,
-    MatSortModule
+    MatSortModule,
+    MatBadgeModule,
+    MatProgressSpinnerModule
   ],
   providers: [],
   bootstrap: [AppComponent]

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

@@ -1,8 +1,3 @@
-<!--<div id="postinput">
-  <textarea #content id='input' placeholder="Post something ..." rows='3' wrap="soft"></textarea>
-  <button id="attach" type='submit'><span><i class="fa fa-paperclip fa-2x" aria-hidden="true"></i></span></button>
-  <button id="submit" type='submit' (click)=createPost(content)><span><i class="fa fa-send-o fa-2x" aria-hidden="true"></i></span></button>
-</div>-->
 <div id="home">
 <mat-card >      
   <mat-card-content>
@@ -36,10 +31,6 @@
   </mat-button-toggle-group>
 </div>
 <div id="complete-feed">
-  <!--<div id='feedchooser'>
-    <button id="new" (click)="showNew()">New</button>
-    <button id='mostliked' (click)="showMostLiked()">Most Liked</button>
-  </div>-->
   <div id="feedlist">
     <div *ngIf = "viewNew">
       <feed-postlist (voteEvent)="refresh($event)" [childPostList]="parentSelectedPostList"></feed-postlist>
@@ -47,6 +38,7 @@
     <div *ngIf = "viewMostLiked">
       <feed-postlist (voteEvent)="refresh($event)" [childPostList]="parentSelectedPostList"></feed-postlist>
     </div>
+    <mat-spinner *ngIf="loading" style="margin:0 auto; margin-top: 5em;" diameter="50"></mat-spinner>
   </div>
 </div>
 </div>

src/app/components/feed/feed.component.ts

@@ -11,6 +11,7 @@ import { User } from 'src/app/models/user';
   styleUrls: ['./feed.component.sass']
 })
 export class FeedComponent implements OnInit {
+  loading = true;
   checked: boolean; // if the "I protected the environment."-box is checked
   empty: boolean;
  // points value of the green action
@@ -38,6 +39,7 @@ export class FeedComponent implements OnInit {
       if (this.loggedIn) {
         this.userId = user.userID;
         this.feedService.getAllPostsRawByUserId(this.userId).subscribe(response => {
+          this.loading = false;
           this.feedNew = this.feedService.renderAllPosts(response.json());
           this.parentSelectedPostList = this.feedNew;
           this.feedMostLiked = this.feedNew;
@@ -45,6 +47,7 @@ export class FeedComponent implements OnInit {
         });
       } else {
         this.feedService.getAllPostsRaw().subscribe(response => {
+          this.loading = false;
           this.feedNew = this.feedService.renderAllPosts(response.json());
           this.parentSelectedPostList = this.feedNew;
           this.feedMostLiked = this.feedNew;

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

@@ -57,21 +57,23 @@
       </nav>
       <div id="menu-button-box">
         <button mat-icon-button [matMenuTriggerFor]="requestMenu" [disabled]="!loggedIn" id="menu-button">
-          <mat-icon >notifications</mat-icon>
+          <mat-icon [matBadge]="user.receivedRequests.length" [matBadgeHidden]="!(user.receivedRequests.length > 0)" matBadgeColor="accent">notifications</mat-icon>
         </button>
         <button mat-icon-button [matMenuTriggerFor]="menu" id="menu-button">
           <mat-icon>more_vert</mat-icon>
         </button>
       </div>
       <mat-menu #requestMenu="matMenu">
-        <button mat-menu-item (click)="$event.stopPropagation();">
+        <span mat-menu-item disableRipple="true" disabled="true">friend requests:</span>
-          <button mat-icon-button>
+        <button mat-menu-item *ngFor = "let request of user.receivedRequests" [class.selected]="request === selectedRequest" (click)="$event.stopPropagation();" disableRipple="true">
+          <button mat-icon-button (click)=acceptRequest(request.senderUserID) (click)="$event.stopPropagation();">
             <mat-icon>check</mat-icon>
           </button>
-          <button mat-icon-button>
+          <button mat-icon-button (click)=denyRequest(request.senderUserID) (click)="$event.stopPropagation();">
             <mat-icon>close</mat-icon>
           </button>
-          <span>request</span>
+          <span>{{request.senderUsername}}</span>
+          <span>&nbsp; @{{request.senderHandle}}</span>
         </button> 
       </mat-menu>
       <mat-menu #menu="matMenu">

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

@@ -26,7 +26,6 @@
   .mat-tab-link
     height: 56px
 
-
 #link-box
   padding: 0.5em
 

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

@@ -4,6 +4,7 @@ import { Observable } from 'rxjs';
 import { map, shareReplay } from 'rxjs/operators';
 import { DatasharingService } from '../../services/datasharing.service';
 import { SelfService } from '../../services/selfservice/self.service';
+import { RequestService } from '../../services/request/request.service';
 import { environment } from 'src/environments/environment';
 import { Levellist } from 'src/app/models/levellist';
 import { Http } from '@angular/http';
@@ -22,6 +23,7 @@ export class MainNavigationComponent implements OnInit {
     public overlayContainer: OverlayContainer,
     private data: DatasharingService,
     private selfservice: SelfService,
+    private requestservice: RequestService,
     private breakpointObserver: BreakpointObserver,
     private http: Http, private router: Router
   ) {
@@ -102,11 +104,9 @@ export class MainNavigationComponent implements OnInit {
 
     const headers = new Headers();
     headers.set('Content-Type', 'application/json');
-
     const body = {query: `mutation {
         logout
       }`};
-
     this.http.post(url, body).subscribe(response => {
         console.log(response.text()); });
     this.loggedIn = false;
@@ -115,4 +115,34 @@ export class MainNavigationComponent implements OnInit {
     this.data.changeUserInfo(user);
     this.router.navigate(['login']);
   }
+
+  acceptRequest(id: number) {
+    for (let i = 0; i < this.user.receivedRequests.length; i++) {
+      if (this.user.receivedRequests[i].senderUserID === id) {
+        this.user.receivedRequests.splice(i, 1);
+        return;
+      }
+    }
+    const headers = new Headers();
+    headers.set('Content-Type', 'application/json');
+    this.http.post(environment.graphQLUrl, this.requestservice.buildJsonAcceptRequest(id))
+      .subscribe(response => {
+        console.log(response);
+      });
+  }
+
+  denyRequest(id: number) {
+    for (let i = 0; i < this.user.receivedRequests.length; i++) {
+      if (this.user.receivedRequests[i].senderUserID === id) {
+        this.user.receivedRequests.splice(i, 1);
+        return;
+      }
+    }
+    const headers = new Headers();
+    headers.set('Content-Type', 'application/json');
+    this.http.post(environment.graphQLUrl, this.requestservice.buildJsonDenyRequest(id))
+      .subscribe(response => {
+        console.log(response);
+      });
+  }
 }

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

@@ -55,7 +55,6 @@ export class ProfileComponent implements OnInit {
       this.user.points = response.data.getUser.points;
       this.user.level = response.data.getUser.level;
       this.rankname = this.levellist.getLevelName(this.user.level);
-      this.user.friendIDs = response.data.getUser.friends;
     } else {
       this.profileNotFound = true;
     }

src/app/components/search/search.component.html

@@ -32,9 +32,11 @@
             <mat-card-title class="pointer" (click)="showUserProfile(user)">{{user.username}}</mat-card-title>
             <mat-card-subtitle class="pointer" (click)="showUserProfile(user)">{{user.handle}}</mat-card-subtitle>
             <div class="icon-box">
-              <button mat-icon-button class="request-button" (click)="sendFriendRequest(user)"><mat-icon>person_add</mat-icon></button>
+              <button mat-icon-button class="request-button" (click)="sendFriendRequest(user)" [disabled]="!user.allowedToSendRequest"><mat-icon>person_add</mat-icon></button>
             </div>
           </mat-card-header>
         </mat-card>
+        <mat-spinner *ngIf="loading" style="margin:0 auto; margin-top: 5em;" diameter="50"></mat-spinner>
+        
     </div>
 </div>

src/app/components/search/search.component.ts

@@ -5,6 +5,7 @@ import {Headers, Http} from '@angular/http';
 import { User } from 'src/app/models/user';
 import {environment} from 'src/environments/environment';
 import { Router } from '@angular/router';
+import { DatasharingService } from '../../services/datasharing.service';
 
 @Component({
   selector: 'home-search',
@@ -12,16 +13,22 @@ import { Router } from '@angular/router';
   styleUrls: ['./search.component.sass']
 })
 export class SearchComponent implements OnInit {
+  loading = false;
   searchValue = ' ';
   category = 'user';
+  user: User;
   foundUsers: Array<User>;
 
   constructor(
     private searchService: SearchService,
     private requestService: RequestService,
     private http: Http,
-    private router: Router) { }
+    private router: Router,
+    private data: DatasharingService) { }
   ngOnInit() {
+    this.data.currentUserInfo.subscribe(user => {
+      this.user = user;
+    });
   }
 
   changeCategory(value: string) {
@@ -34,6 +41,7 @@ export class SearchComponent implements OnInit {
     this.searchValue = searchWord;
     if (searchWord) { // if not null or empty
       if (this.category === 'user') {
+        this.loading = true;
         this.findUser(searchWord);
       } else if (this.category === 'groupe') {
         // this.findUserByHandle(searchWord);
@@ -47,9 +55,28 @@ export class SearchComponent implements OnInit {
     headers.set('Content-Type', 'application/json');
     this.http.post(environment.graphQLUrl, this.searchService.buildJsonUser(name))
       .subscribe(response => {
-        console.log('response received');
-        console.log(response);
         this.foundUsers = this.searchService.renderUsers(response.json());
+        for (const foundUser of this.foundUsers) {
+          if (!this.user.loggedIn) {foundUser.allowedToSendRequest = false; } else {
+            for (const receiverID of this.user.sentRequestUserIDs) {
+              if (foundUser.userID === receiverID ||
+                foundUser.userID === this.user.userID) {
+                foundUser.allowedToSendRequest = false;
+              }
+            }
+            for (const friend of this.user.friends) {
+              if (foundUser.userID === friend.id) {
+                foundUser.allowedToSendRequest = false;
+              }
+            }
+            for (const sender of this.user.receivedRequests) {
+              if (foundUser.userID === sender.senderUserID) {
+                foundUser.allowedToSendRequest = false;
+              }
+            }
+          }
+        }
+        this.loading = false;
       });
   }
 
@@ -58,12 +85,11 @@ export class SearchComponent implements OnInit {
   }
 
   public sendFriendRequest(user: User) {
+    user.allowedToSendRequest = false;
     const headers = new Headers();
     headers.set('Content-Type', 'application/json');
     this.http.post(environment.graphQLUrl, this.requestService.buildJsonRequest(user.userID, 'FRIENDREQUEST'))
       .subscribe(response => {
-        console.log('response received');
-        console.log(response);
       });
   }
 }

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

@@ -1,8 +1,3 @@
-<!--<div id="header">
-  <span class="title">Friends</span>
-  <button id="new" type="submit"><span><i class="fa fa-plus fa-3x" aria-hidden="true"></i></span></button>
-  <button id="invitations" type="submit"><span><i class="fa fa-envelope-o fa-3x" aria-hidden="true"></i></span></button>
-</div>-->
 <mat-toolbar>
   <span>Friends</span>
   <div id="button-box">
@@ -10,12 +5,7 @@
   </div>
 </mat-toolbar>
 <div id="friendlist">
-    <!--<div class="frienditem" *ngFor="let friend of friends"
+    <mat-card class="friend-card" *ngFor="let friend of user.friends" 
-    [class.selected]="friend === selectedFriend" (click)="showFriendProfile(friend)"> 
-      <div class="picture">Pic</div>
-      <div class="name"><span>{{friend.name}}</span></div>
-    </div>-->
-    <mat-card class="friend-card" *ngFor="let friend of friends" 
     [class.selected]="friend === selectedFriend" (click)="showFriendProfile(friend)"
     tabindex="0"
     matRipple>

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

@@ -4,6 +4,7 @@ import { Http } from '@angular/http';
 import { FriendInfo } from 'src/app/models/friendinfo';
 import { Router } from '@angular/router';
 import { environment } from 'src/environments/environment';
+import { User } from 'src/app/models/user';
 
 @Component({
   selector: 'social-friends',
@@ -11,44 +12,12 @@ import { environment } from 'src/environments/environment';
   styleUrls: ['./friends.component.sass']
 })
 export class FriendsComponent implements OnInit {
-
+  user: User;
-  friendIDs: number[] = [29, 27, 30, 31];
-  friends = new Array<FriendInfo>(); // = ["Friend 1", "Friend 2", "Friend 3", "Friend 4", "Friend 5", "Friend 6"]
-
   constructor(private data: DatasharingService, private http: Http, private router: Router) { }
 
   ngOnInit() {
-    // this.data.currentUserInfo.subscribe(user => {
+    this.data.currentUserInfo.subscribe(user => {
-    //  this.friendIDs = user.friendIDs})
+    this.user = user; });
-    this.getFriendsNames();
-  }
-
-  getFriendsNames() {
-    for (const id of this.friendIDs) {
-      const url = environment.graphQLUrl;
-      const headers = new Headers();
-      headers.set('Content-Type', 'application/json');
-
-      this.http.post(url, this.buildJson(id))
-        .subscribe(response => {this.readOutFriendsNames(id, response.json()); });
-      }
-  }
-
-  readOutFriendsNames(pId: number, pResponse: any) {
-    this.friends.push(new FriendInfo(pId, pResponse.data.getUser.name, pResponse.data.getUser.level ));
-  }
-
-  buildJson(pId: number): any {
-    const body =  {query: `query($userId: ID) {
-      getUser(userId:$userId) {
-        name
-        level
-      }
-    }`, variables: {
-        userId: pId
-      }};
-
-    return body;
   }
 
   public showFriendProfile(pFriend: FriendInfo) {

src/app/models/friendRequest.ts

@@ -0,0 +1,8 @@
+import { User } from 'src/app/models/user';
+
+export class FriendRequest {
+    id: number;
+    senderUserID: number;
+    senderHandle: string;
+    senderUsername: string;
+  }

src/app/models/user.ts

@@ -1,5 +1,8 @@
+import { FriendRequest } from 'src/app/models/friendRequest';
+import { FriendInfo } from 'src/app/models/friendinfo';
+
 export class User {
-  loggedIn: boolean;
+  loggedIn = false;
   userID: number;
   username: string;
   handle: string;
@@ -8,9 +11,11 @@ export class User {
   level: number;
   profilePicture: string;
 
-  friendIDs: number[];
+  friends: FriendInfo[] = new Array();
   groupIDs: number[];
   chatIDs: number[];
-
+  receivedRequests: FriendRequest[] = new Array();
-  requestIDs: number[];
+  sentRequestUserIDs: number[] = new Array(); // IDs of users that already received requests of the logged in user
+  allowedToSendRequest = true; /* if a user already received a request this should
+  be false to avoid multiple invitations*/
 }

src/app/services/datasharing.service.ts

@@ -15,6 +15,7 @@ export class DatasharingService {
   constructor() { }
 
   changeUserInfo(pUserInfo: User) {
+    console.log('DatasharingService: user info updated');
     this.userInfoSource.next(pUserInfo);
   }
 

src/app/services/login/login.service.ts

@@ -1,10 +1,12 @@
 import {Injectable} from '@angular/core';
-import {Headers, Http} from '@angular/http';
+import {Headers, Http, Request} from '@angular/http';
 import {Login} from '../../models/login';
 import {User} from 'src/app/models/user';
 import {DatasharingService} from '../datasharing.service';
 import {Router} from '@angular/router';
 import {environment} from 'src/environments/environment';
+import { FriendRequest } from 'src/app/models/friendRequest';
+import { FriendInfo } from 'src/app/models/friendinfo';
 
 @Injectable({
   providedIn: 'root'
@@ -35,6 +37,7 @@ export class LoginService {
 
   public updateUserInfo(response: any) {
     const user: User = new User();
+    let friendRequest: FriendRequest = new FriendRequest();
     user.loggedIn = true;
     user.userID = response.data.login.id;
     user.username = response.data.login.name;
@@ -42,13 +45,24 @@ export class LoginService {
     user.email = response.data.login.email;
     user.points = response.data.login.points;
     user.level = response.data.login.level;
-    user.friendIDs = response.data.login.friends;
+    for (const friend of response.data.login.friends) {
+      user.friends.push(new FriendInfo(friend.id, friend.name, friend.level));
+    }
     user.groupIDs = response.data.login.groups;
     user.chatIDs = response.data.login.chats;
-    user.requestIDs = response.data.login.requests;
+    for (const request of response.data.login.sentRequests) {
-
+      user.sentRequestUserIDs.push(request.receiver.id);
+    }
+    for (const request of response.data.login.receivedRequests) {
+      friendRequest = new FriendRequest();
+      friendRequest.id = request.id;
+      friendRequest.senderUserID = request.sender.id;
+      friendRequest.senderUsername = request.sender.name;
+      friendRequest.senderHandle = request.sender.handle;
+      user.receivedRequests.push(friendRequest);
+    }
+    console.log(user.friends);
     this.data.changeUserInfo(user);
-
   }
 
   public buildJson(login: Login): any {
@@ -61,8 +75,12 @@ export class LoginService {
           handle,
           points,
           level,
+          receivedRequests{id, sender{name, handle, id}},
+          sentRequests{receiver{id}},
           friends {
-           id
+           id,
+           name,
+           level
           },
           groups {
             id

src/app/services/register/register.service.ts

@@ -5,6 +5,8 @@ import {Router} from '@angular/router';
 import { DatasharingService } from '../datasharing.service';
 import { User } from 'src/app/models/user';
 import { environment } from 'src/environments/environment';
+import { FriendRequest } from 'src/app/models/friendRequest';
+import { FriendInfo } from 'src/app/models/friendinfo';
 
 @Injectable({
   providedIn: 'root'
@@ -38,6 +40,7 @@ export class RegisterService {
 
   public updateUserInfo(response: any) {
     const user: User = new User();
+    let friendRequest: FriendRequest = new FriendRequest();
     user.loggedIn = true;
     user.userID = response.data.register.id;
     user.username = response.data.register.name;
@@ -45,11 +48,22 @@ export class RegisterService {
     user.email = response.data.register.email;
     user.points = response.data.register.points;
     user.level = response.data.register.level;
-    user.friendIDs = response.data.register.friends;
+    for (const friend of response.data.login.friends) {
+      user.friends.push(new FriendInfo(friend.id, friend.name, friend.level));
+    }
     user.groupIDs = response.data.register.groups;
     user.chatIDs = response.data.register.chats;
-    user.requestIDs = response.data.register.requests;
+    for (const request of response.data.register.sentRequests) {
-
+      user.sentRequestUserIDs.push(request.receiver.id);
+    }
+    for (const request of response.data.login.receivedRequests) {
+      friendRequest = new FriendRequest();
+      friendRequest.id = request.id;
+      friendRequest.senderUserID = request.sender.id;
+      friendRequest.senderUsername = request.sender.name;
+      friendRequest.senderHandle = request.sender.handle;
+      user.receivedRequests.push(friendRequest);
+    }
     this.data.changeUserInfo(user);
 
   }
@@ -62,7 +76,13 @@ export class RegisterService {
         handle,
         points,
         level,
-        friends{id},
+        receivedRequests{id, sender{name, handle, id}},
+        sentRequests{receiver{id}}
+        friends {
+          id,
+          name,
+          level
+         },
         groups{id},
         chats{id}
        }

src/app/services/request/request.service.ts

@@ -27,4 +27,29 @@ export class RequestService {
     };
     return body;
   }
+
+  public buildJsonAcceptRequest(id_: number): any {
+    const body = {
+      query: `mutation($id: ID!) {
+        acceptRequest(sender: $id, type: FRIENDREQUEST)
+      }`
+      , variables: {
+        id: id_
+      }
+    };
+    return body;
+  }
+
+  public buildJsonDenyRequest(id_: number): any {
+    const body = {
+      query: `mutation($id: ID!) {
+        denyRequest(sender: $id, type: FRIENDREQUEST)
+      }`
+      , variables: {
+        id: id_
+      }
+    };
+    return body;
+  }
+
 }

src/app/services/search/search.service.ts

@@ -24,7 +24,7 @@ export class SearchService {
         pUser.handle = user.handle;
         pUser.points = user.points;
         pUser.level = user.level;
-        pUser.friendIDs = user.friends;
+        pUser.friends = user.friends;
         users.push(pUser);
       }
       return users;

src/app/services/selfservice/self.service.ts

@@ -6,6 +6,8 @@ import { DatasharingService } from '../datasharing.service';
 import { userInfo } from 'os';
 import {Router} from '@angular/router';
 import { environment } from 'src/environments/environment';
+import { FriendRequest } from 'src/app/models/friendRequest';
+import { FriendInfo } from 'src/app/models/friendinfo';
 
 @Injectable({
   providedIn: 'root'
@@ -43,6 +45,7 @@ export class SelfService {
 
   public updateUserInfo(response: any) {
     const user: User = new User();
+    let friendRequest: FriendRequest = new FriendRequest();
     user.loggedIn = true;
     user.userID = response.data.getSelf.id;
     user.username = response.data.getSelf.name;
@@ -50,17 +53,48 @@ export class SelfService {
     user.email = response.data.getSelf.email;
     user.points = response.data.getSelf.points;
     user.level = response.data.getSelf.level;
-    user.friendIDs = response.data.getSelf.friends;
+    for (const friend of response.data.login.friends) {
+      user.friends.push(new FriendInfo(friend.id, friend.name, friend.level));
+    }
     user.groupIDs = response.data.getSelf.groups;
     user.chatIDs = response.data.getSelf.chats;
-    user.requestIDs = response.data.getSelf.requests;
+    for (const request of response.data.getSelf.sentRequests) {
-
+      user.sentRequestUserIDs.push(request.receiver.id);
+    }
+    for (const request of response.data.login.receivedRequests) {
+      friendRequest = new FriendRequest();
+      friendRequest.id = request.id;
+      friendRequest.senderUserID = request.sender.id;
+      friendRequest.senderUsername = request.sender.name;
+      friendRequest.senderHandle = request.sender.handle;
+      user.receivedRequests.push(friendRequest);
+    }
     this.data.changeUserInfo(user);
   }
 
   public buildJson(): any {
     const body =  {query: `{
-      getSelf{id, name,email, handle, points, level, friends{id}, groups{id},chats{id}}
+      getSelf{
+        id,
+        name,
+        email,
+        handle,
+        points,
+        level,
+        receivedRequests{id, sender{name, handle, id}},
+        sentRequests{receiver{id}},
+        friends {
+         id,
+         name,
+         level
+        },
+        groups {
+          id
+        },
+        chats{
+          id
+        }
+      }
     }`, variables: {
       }};
     return body;

src/styles/greenvironment-material-theme.scss

@@ -9,8 +9,8 @@
 // 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/
-$primary: mat-palette($mat-green);
+$primary: mat-palette($mat-light-green);
-$accent:  mat-palette($mat-pink, A200, A100, A400);
+$accent:  mat-palette($mat-brown, A200, A100, A400);
 $background-color: map_get($mat-grey, 50);
 // The warn palette is optional (defaults to red).
 $warn:    mat-palette($mat-red);
@@ -27,8 +27,8 @@ $light-theme: map_merge($light-theme, (background: $background));
 
 
 
-$dark-primary: mat-palette($mat-green);
+$dark-primary: mat-palette($mat-light-green);
-$dark-accent:  mat-palette($mat-pink, A200, A100, A400);
+$dark-accent:  mat-palette($mat-brown, A200, A100, A400);
 
 // The warn palette is optional (defaults to red).
 $dark-warn:    mat-palette($mat-red);