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

src/app/components/app-scaffold/app-scaffold.component.sass

@@ -1,63 +0,0 @@
-@import '../../../styles/mixins.sass'
-@import '../../../styles/vars.sass'
-
-button
-  border: 2px solid $cHeadPrimaryBackground
-  margin-top: 0.125em
-  padding: 0.125em
-  background-color: $cHeadPrimaryBackground
-  color: $cHeadFontColor
-  font-weight: bold
-  transition-duration: 0.25s
-
-button:hover
-  background-color: lighten($cHeadPrimaryBackground, 10%)
-  cursor: pointer
-
-button:active
-  background-color: darken($cHeadPrimaryBackground, 5%)
-  box-shadow: inset 0.25em 0.25em 0.1em rgba(0, 0, 0, 0.25)
-
-h1
-  @include gridPosition(1, 2, 1, 2)
-  line-height: 100%
-  margin-left: 0.5em
-  margin-top: 0.25em
-
-#tab-home
-  @include gridPosition(1, 2, 2, 3)
-
-#tab-profile
-  @include gridPosition(1, 2, 3, 4)
-
-#tab-about
-  @include gridPosition(1, 2, 4, 5)
-
-#tab-imprint
-  @include gridPosition(1, 2, 5, 6)
-
-#tab-login
-  @include gridPosition(1, 2, 6, 7)
-
-#dropdown
-  @include gridPosition(1, 2, 7, 8)
-  display: flex
-  align-items: center
-  margin-left: 2em
-  span
-    margin-left: 1em
-  #symbol
-    span:hover
-      background-color: lighten($cHeadPrimaryBackground, 10%)
-      cursor: pointer
-  #dropdown-content
-    position: absolute
-    background-color: $cHeadPrimaryBackground
-    min-width: 160px
-    margin-top: 7vh
-    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2)
-    padding: 12px 16px
-    z-index: 1
-
-#logoutbutton
-  @include gridPosition(1, 2, 8, 9)

src/app/components/chat/chat.component.sass

@@ -1,91 +0,0 @@
-@import '../../../styles/mixins.sass'
-@import '../../../styles/vars.sass'
-
-#chat
-  display: grid
-  grid-template: 7.5% 82.5% 10%/100%
-  width: 100%
-  height: 100%
-
-#header
-  @include gridPosition(1, 2, 1, 2)
-  background-color: $cBoxHeaderBackground
-  display: grid
-  grid-template: 100% /20% 80%
-
-  span
-    color: $cFontWhite
-  span.title
-    @include gridPosition(1, 2, 2, 3)
-    margin-top: 0.25em
-    margin-left: 0.25em
-    line-height: 100%
-    font-size: 2em
-
-  button
-    background-color: $cBoxHeaderBackground
-    border: none
-  
-  button:hover
-    background-color: lighten($cBoxHeaderBackground, 10%)
-    cursor: pointer
-
-  button:active
-    background-color: darken($cBoxHeaderBackground, 5%)
-  
-    #goback
-      @include gridPosition(1, 2, 1, 2)
-
-#chatheader
-  @include gridPosition(1, 2, 1, 2)
-  display: grid
-  grid-template: 100% /10% 90%
-  #goback
-    @include gridPosition(1, 2, 1, 2)
-  #name
-    @include gridPosition(1, 2, 2, 3)
-
-#messagecontainer
-  @include gridPosition(2, 3, 1, 2)
-  overflow: auto
-.chatmessage
-  width: 100%
-  #ownmessage
-    text-align: right
-    margin: 0.5em
-    span
-      background-color: $cMessageOwn
-      border: solid
-      border-color: $cMessageOwn
-      border-radius: 0.25em
-  #foreignmessage
-    text-align: left
-    margin: 0.5em
-    span
-      background-color: $cMessageForeign
-      border: solid
-      border-color: $cMessageForeign
-      border-radius: 0.25em
-
-
-#newmessage
-  @include gridPosition(3, 4, 1, 2)
-  margin: 0.5em
-  display: grid
-  grid-template: 100% /80% 20%
-  #input
-    @include gridPosition(1, 2, 1, 2)
-    border-radius: 0.25em
-    border: 1px solid $cFeedInputBorder
-    padding: 0.125em
-    resize: none
-  #send
-    @include gridPosition(1, 2, 2, 3)
-  button
-    background-color: $cFeedChooserBackground
-    color: $cFontWhite
-    border: none
-    border-radius: 0.5em
-  button:hover
-    background-color: lighten($cFeedChooserBackground, 10%)
-    cursor: pointer

src/app/components/chatlist/chatlist.component.sass

@@ -1,71 +0,0 @@
-@import '../../../styles/mixins.sass'
-@import '../../../styles/vars.sass'
-
-#chatlist
-    display: grid
-    grid-template: 7.5% 92.5%/100%
-    width: 100%
-    height: 100%
-
-#header
-  @include gridPosition(1, 2, 1, 2)
-  background-color: $cBoxHeaderBackground
-  display: grid
-  grid-template: 100% /80% 20%
-
-  span
-    color: $cFontWhite
-  span.title
-    @include gridPosition(1, 2, 1, 2)
-    margin-top: 0.25em
-    margin-left: 0.25em
-    line-height: 100%
-    font-size: 2em
-
-  button
-    background-color: $cBoxHeaderBackground
-    border: none
-  
-  button:hover
-    background-color: lighten($cBoxHeaderBackground, 10%)
-    cursor: pointer
-
-  button:active
-    background-color: darken($cBoxHeaderBackground, 5%)
-  
-    #newchat
-      @include gridPosition(1, 2, 2, 3)
-
-#chats
-  overflow: auto
-  @include gridPosition(2, 3, 1, 2)
-
-  div:hover
-    background-color: darken($cPrimaryBackground, 10%)
-    cursor: pointer
-  .chatitem
-    background-color: $cPrimaryBackground
-    height: 3em
-    margin: 0.2em
-    padding: 0.25em
-    border-radius: 0.25em
-    display: grid
-    grid-template: 100% / 20% 60% 20%
-    .picture
-      @include gridPosition(1, 2, 1, 2)
-      border: solid
-    .name, .date
-      margin-top: auto
-      margin-bottom: auto
-    .name
-      @include gridPosition(1, 2, 2, 3)
-      font-weight: bold
-      text-align: left
-      padding-left: 0.5em
-      span
-        font-size: 125%
-    .date
-      @include gridPosition(1, 2, 3, 4)
-      color: $cInactiveText
-      text-align: right
-      padding-right: 0.5em

src/app/components/feed/feed.component.sass

@@ -1,6 +1,6 @@
 @import '../../../styles/mixins.sass'
 @import '../../../styles/vars.sass'
-@import 'src/styles/greenvironment-material-theme.scss';
+
 
 .primary-color
     color: $primary-color

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

@@ -1,7 +1,5 @@
 import { Component, OnInit, HostBinding  } from '@angular/core';
 import { BreakpointObserver, Breakpoints } from '@angular/cdk/layout';
-import { Observable } from 'rxjs';
-import { map, shareReplay } from 'rxjs/operators';
 import { DatasharingService } from '../../services/datasharing.service';
 import { RequestService } from '../../services/request/request.service';
 import { SettingsService } from '../../services/settings/settings.service';
@@ -42,11 +40,6 @@ export class MainNavigationComponent implements OnInit {
   lighttheme = true;
   overlay;
 
-  isHandset$: Observable<boolean> = this.breakpointObserver.observe(Breakpoints.Handset)
-    .pipe(
-      map(result => result.matches),
-      shareReplay()
-    );
   navLinksLoggedIn = [
     { path: '', label: 'Home' },
     { path: this.profileUrl, label: 'Profile' },

src/app/services/datasharing.service.ts

@@ -25,6 +25,12 @@ export class DatasharingService {
     this.changeUserInfo(user);
   }
 
+  setDarkMode(active: boolean) {
+    const user: User = this.userInfoSource.getValue();
+    user.darkmode = active;
+    this.changeUserInfo(user);
+  }
+
   changeChatIDs(pChatIDs: number[]) {
     this.chatIDsSource.next(pChatIDs);
   }

src/app/services/settings/settings.service.ts

@@ -2,6 +2,7 @@ import {Injectable} from '@angular/core';
 import {Http} from '@angular/http';
 import { User } from 'src/app/models/user';
 import { environment } from 'src/environments/environment';
+import {DatasharingService} from '../datasharing.service';
 
 @Injectable({
   providedIn: 'root'
@@ -9,10 +10,11 @@ import { environment } from 'src/environments/environment';
 export class SettingsService {
 
   users:  Array<User>;
-  constructor(private http: Http) {
+  constructor(private http: Http, private data: DatasharingService) {
   }
 
   setDarkModeActive(active: boolean) {
+    this.data.setDarkMode(active);
     const url = environment.graphQLUrl;
     const headers = new Headers();
     headers.set('Content-Type', 'application/json');

src/styles/vars.sass

@@ -1,27 +1,6 @@
-$cPrimaryBackground: #fff
+@import '~@angular/material/theming'
-$cSecondaryBackground: #ddd
-$cInactiveText: #555
-$cPrimarySurface: #fff
 
-//Headerbar
+$primary: mat-palette($mat-light-green);
-$cHeadPrimaryBackground: #0d6b14
+$primary-color: mat-color($primary);
-$cHeadFontColor: #adffc1ee
-
-//Home -- Feed
-$cFeedPrimaryFontColor: #243dca
-$cFeedSecondaryFontColor: #243dca
-$cFeedInputBorder: #396d51
-$cFeedItemBackground: #b0ecb0fb
-$cFeedChooserBackground: #259145
-$cFeedBackground: #36ce64
-$cFeedUpVote: #2cb149
-$cFeedDownVote: #ff5f5f
-
-//Home -- Chat, Friends, Groups
-$cFontWhite: #fff//#adffc1ee //this is also the background color lol
-$cBoxHeaderBackground: #259145
-$cBoxBodyBackground: #fff//#3deb71
-$cMessageOwn: #cfe4c9
-$cMessageForeign: #baca5d