From fa902d65053bf98a5f8a9042711f9624a8b57a6e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Lukas=20Mau=C3=9F?= <lukas.mauss@mni.thm.de>
Date: Mon, 27 May 2019 14:33:11 +0200
Subject: [PATCH] Adjust default theme to thm corporate design, several fixes
---
.../room-edit/room-edit.component.html | 2 +-
.../room-edit/room-edit.component.scss | 8 ++++++++
.../shared/header/header.component.html | 6 +++---
.../shared/header/header.component.scss | 6 +++++-
.../components/shared/login/login.component.ts | 5 -----
.../shared/room-join/room-join.component.scss | 4 ++++
src/theme/blue-theme/blueTheme.const.ts | 6 +++---
src/theme/dark-theme/darkTheme.const.ts | 4 ++--
src/theme/default-theme/defaultTheme.const.ts | 18 +++++++++---------
src/theme/purple-theme/purpleTheme.const.ts | 4 ++--
10 files changed, 37 insertions(+), 26 deletions(-)
diff --git a/src/app/components/creator/_dialogs/room-edit/room-edit.component.html b/src/app/components/creator/_dialogs/room-edit/room-edit.component.html
index 3dddc875d..e9c62ea9a 100644
--- a/src/app/components/creator/_dialogs/room-edit/room-edit.component.html
+++ b/src/app/components/creator/_dialogs/room-edit/room-edit.component.html
@@ -25,7 +25,7 @@
<h3>{{commentThreshold | number}}</h3>
</div>
<mat-slider id="commentSlider" min="-50" max="50" step="1" value="0"
- color="accent" [(ngModel)]="commentThreshold" (input)="onSliderChange($event)"></mat-slider>
+ [(ngModel)]="commentThreshold" (input)="onSliderChange($event)"></mat-slider>
</div>
<div fxLayout="row" fxLayoutAlign="center" fxLayoutGap="10px">
<button mat-raised-button class="abort" (click)="dialogRef.close('abort')">
diff --git a/src/app/components/creator/_dialogs/room-edit/room-edit.component.scss b/src/app/components/creator/_dialogs/room-edit/room-edit.component.scss
index b389ce2e9..b1e48ba2d 100644
--- a/src/app/components/creator/_dialogs/room-edit/room-edit.component.scss
+++ b/src/app/components/creator/_dialogs/room-edit/room-edit.component.scss
@@ -18,6 +18,10 @@ h2 {
color: var(--on-surface);
}
+h3 {
+ color: var(--on-surface);
+}
+
mat-divider {
margin-bottom: 10px;
color: var(--on-surface) !important;
@@ -33,3 +37,7 @@ mat-divider {
color: var(--on-primary);
}
+mat-form-field {
+ color: var(--on-surface);
+}
+
diff --git a/src/app/components/shared/header/header.component.html b/src/app/components/shared/header/header.component.html
index 1aa4a4900..07c51d408 100644
--- a/src/app/components/shared/header/header.component.html
+++ b/src/app/components/shared/header/header.component.html
@@ -1,4 +1,4 @@
-<mat-toolbar class="mat-elevation-z6">
+<mat-toolbar class="mat-elevation-z4">
<mat-toolbar-row>
<button *ngIf="router.url !== '/home'" (click)="goBack()" mat-icon-button>
<mat-icon class="header-icons" aria-label="Go back">keyboard_arrow_left</mat-icon>
@@ -53,11 +53,11 @@
<mat-menu #loginMenu="matMenu" [overlapTrigger]="false">
<button mat-menu-item *ngIf="user && user.role === 1" routerLink="/creator">
- <mat-icon color="primary">style</mat-icon>
+ <mat-icon class="sessions">style</mat-icon>
<span>{{'header.my-sessions' | translate}}</span>
</button>
<button mat-menu-item *ngIf="user && user.role === 0" routerLink="/participant">
- <mat-icon color="primary">turned_in</mat-icon>
+ <mat-icon class="sessions">turned_in</mat-icon>
<span>{{'header.visited-sessions' | translate}}</span>
</button>
<button mat-menu-item (click)="logout()">
diff --git a/src/app/components/shared/header/header.component.scss b/src/app/components/shared/header/header.component.scss
index bd5d97f80..7fa26bcca 100644
--- a/src/app/components/shared/header/header.component.scss
+++ b/src/app/components/shared/header/header.component.scss
@@ -26,7 +26,7 @@ mat-toolbar {
}
.default {
- color: var(--teal);
+ color: var(--light-green);
}
.color-button {
@@ -55,3 +55,7 @@ mat-toolbar {
right: 15px;
color: white;
}
+
+.sessions {
+ color: var(--primary);
+}
diff --git a/src/app/components/shared/login/login.component.ts b/src/app/components/shared/login/login.component.ts
index 3170fa3be..8496eaa0f 100644
--- a/src/app/components/shared/login/login.component.ts
+++ b/src/app/components/shared/login/login.component.ts
@@ -9,7 +9,6 @@ import { TranslateService } from '@ngx-translate/core';
import { UserActivationComponent } from '../../home/_dialogs/user-activation/user-activation.component';
import { PasswordResetComponent } from '../../home/_dialogs/password-reset/password-reset.component';
import { RegisterComponent } from '../../home/_dialogs/register/register.component';
-import { ThemeService } from '../../../../theme/theme.service';
export class LoginErrorStateMatcher implements ErrorStateMatcher {
isErrorState(control: FormControl | null, form: FormGroupDirective | NgForm | null): boolean {
@@ -40,7 +39,6 @@ export class LoginComponent implements OnInit, OnChanges {
public router: Router,
private translationService: TranslateService,
public notificationService: NotificationService,
- private themeService: ThemeService,
public dialog: MatDialog,
@Inject(MAT_DIALOG_DATA) public data: any) {
}
@@ -105,10 +103,7 @@ export class LoginComponent implements OnInit, OnChanges {
this.dialog.closeAll();
if (this.isStandard) {
if (this.role === UserRole.CREATOR) {
- const theme = 'dark';
this.router.navigate(['creator']);
- this.themeService.activate(theme);
- localStorage.setItem('theme', theme);
} else {
this.router.navigate(['participant']);
}
diff --git a/src/app/components/shared/room-join/room-join.component.scss b/src/app/components/shared/room-join/room-join.component.scss
index 45dba96f1..f7409a5c1 100644
--- a/src/app/components/shared/room-join/room-join.component.scss
+++ b/src/app/components/shared/room-join/room-join.component.scss
@@ -26,3 +26,7 @@ mat-error {
input[type="number"]::-webkit-outer-spin-button, input[type="number"]::-webkit-inner-spin-button {
-webkit-appearance: none;
}
+
+mat-hint {
+ color: var(--on-surface) !important;
+}
diff --git a/src/theme/blue-theme/blueTheme.const.ts b/src/theme/blue-theme/blueTheme.const.ts
index ed8104d90..36e771589 100644
--- a/src/theme/blue-theme/blueTheme.const.ts
+++ b/src/theme/blue-theme/blueTheme.const.ts
@@ -1,12 +1,12 @@
export const blue = {
'--primary' : '#3f51b5',
- '--primary-variant': '#757de8',
+ '--primary-variant': '#5c6bc0',
'--secondary': '#ffca28',
'--secondary-variant': '#fff350',
- '--background': '#f5f5f5',
+ '--background': '#eeeeee',
'--surface': '#bdbdbd',
'--dialog': '#c2c2c2',
@@ -20,7 +20,7 @@ export const blue = {
'--yellow': '#FFD54F',
'--blue': '#3f51b5',
'--purple': '#9c27b0',
- '--teal': '#4DB6AC',
+ '--light-green': '#80ba24',
'--grey': '#BDBDBD',
'--grey-light': '#EEEEEE',
'--black': '#212121'
diff --git a/src/theme/dark-theme/darkTheme.const.ts b/src/theme/dark-theme/darkTheme.const.ts
index 6fa819ab9..b25e5738b 100644
--- a/src/theme/dark-theme/darkTheme.const.ts
+++ b/src/theme/dark-theme/darkTheme.const.ts
@@ -8,7 +8,7 @@ export const dark = {
'--background': '#424242',
'--surface': '#212121',
- '--dialog': '#78909c',
+ '--dialog': '#757575',
'--on-primary': '#FFFFFF',
'--on-secondary': '#000000',
@@ -20,7 +20,7 @@ export const dark = {
'--yellow': '#FFD54F',
'--blue': '#3f51b5',
'--purple': '#9c27b0',
- '--teal': '#4DB6AC',
+ '--mint': '#80ba24',
'--grey': '#BDBDBD',
'--grey-light': '#9E9E9E',
'--black': '#212121'
diff --git a/src/theme/default-theme/defaultTheme.const.ts b/src/theme/default-theme/defaultTheme.const.ts
index 0ad7a77cf..365c782c2 100644
--- a/src/theme/default-theme/defaultTheme.const.ts
+++ b/src/theme/default-theme/defaultTheme.const.ts
@@ -1,17 +1,17 @@
export const arsnova = {
- '--primary' : '#4DB6AC',
- '--primary-variant': '#80cbc4',
+ '--primary' : '#80ba24',
+ '--primary-variant': '#dfeec8',
- '--secondary': '#FFCC80',
- '--secondary-variant': '#fff8e1',
+ '--secondary': '#4a5c66',
+ '--secondary-variant': '#4a5d66',
- '--background': '#b2dfdb',
- '--surface': '#0288d1',
- '--dialog': '#B2DFDB',
+ '--background': '#fafafa',
+ '--surface': '#e0e0e0',
+ '--dialog': '#f2f4f5',
'--on-primary': '#000000',
- '--on-secondary': '#000000',
+ '--on-secondary': '#ffffff',
'--on-background': '#000000',
'--on-surface': '#000000',
@@ -20,7 +20,7 @@ export const arsnova = {
'--yellow': '#FFD54F',
'--blue': '#3f51b5',
'--purple': '#9c27b0',
- '--teal': '#4DB6AC',
+ '--light-green': '#80ba24',
'--grey': '#BDBDBD',
'--grey-light': '#EEEEEE',
'--black': '#212121'
diff --git a/src/theme/purple-theme/purpleTheme.const.ts b/src/theme/purple-theme/purpleTheme.const.ts
index 56f74641b..3d892b1cd 100644
--- a/src/theme/purple-theme/purpleTheme.const.ts
+++ b/src/theme/purple-theme/purpleTheme.const.ts
@@ -6,7 +6,7 @@ export const purple = {
'--secondary': '#ffca28',
'--secondary-variant': '#fffd61',
- '--background': '#f5f5f5',
+ '--background': '#eeeeee',
'--surface': '#bdbdbd',
'--dialog': '#c2c2c2',
@@ -20,7 +20,7 @@ export const purple = {
'--yellow': '#FFD54F',
'--blue': '#3f51b5',
'--purple': '#9c27b0',
- '--teal': '#4DB6AC',
+ '--light-green': '#80ba24',
'--grey': '#BDBDBD',
'--grey-light': '#EEEEEE',
'--black': '#212121'
--
GitLab