From d474a946abc982a9f9979a6cfd0f1469574cd642 Mon Sep 17 00:00:00 2001 From: Max Date: Mon, 6 Jan 2020 12:33:07 +0100 Subject: [PATCH] fixed darkmode color bug --- .../app-scaffold/app-scaffold.component.sass | 63 ------------- src/app/components/chat/chat.component.sass | 91 ------------------- .../chatlist/chatlist.component.sass | 71 --------------- src/app/components/feed/feed.component.sass | 2 +- src/styles/vars.sass | 27 +----- 5 files changed, 4 insertions(+), 250 deletions(-) diff --git a/src/app/components/app-scaffold/app-scaffold.component.sass b/src/app/components/app-scaffold/app-scaffold.component.sass index f7f8dd0..e69de29 100644 --- a/src/app/components/app-scaffold/app-scaffold.component.sass +++ b/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) \ No newline at end of file diff --git a/src/app/components/chat/chat.component.sass b/src/app/components/chat/chat.component.sass index 5ae8d7e..e69de29 100644 --- a/src/app/components/chat/chat.component.sass +++ b/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 \ No newline at end of file diff --git a/src/app/components/chatlist/chatlist.component.sass b/src/app/components/chatlist/chatlist.component.sass index 1fb59d4..e69de29 100644 --- a/src/app/components/chatlist/chatlist.component.sass +++ b/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 \ No newline at end of file diff --git a/src/app/components/feed/feed.component.sass b/src/app/components/feed/feed.component.sass index 6ab61bd..2780ae2 100644 --- a/src/app/components/feed/feed.component.sass +++ b/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 diff --git a/src/styles/vars.sass b/src/styles/vars.sass index 2341683..0670e0a 100644 --- a/src/styles/vars.sass +++ b/src/styles/vars.sass @@ -1,27 +1,6 @@ -$cPrimaryBackground: #fff -$cSecondaryBackground: #ddd -$cInactiveText: #555 -$cPrimarySurface: #fff +@import '~@angular/material/theming' -//Headerbar -$cHeadPrimaryBackground: #0d6b14 -$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 +$primary: mat-palette($mat-light-green); +$primary-color: mat-color($primary);