diff --git a/src/app/components/creator/_dialogs/comment-export/comment-export.component.scss b/src/app/components/creator/_dialogs/comment-export/comment-export.component.scss
index abe40e414eb4880fc99fe8157869a450bb5b089d..d242af83aa7e540bf7b9a4c4a8d96911bd22c8f8 100644
--- a/src/app/components/creator/_dialogs/comment-export/comment-export.component.scss
+++ b/src/app/components/creator/_dialogs/comment-export/comment-export.component.scss
@@ -4,7 +4,7 @@ button {
h3 {
font-size: large;
- color: var(--text-2);
+ color: var(--text-1);
}
h4 {
diff --git a/src/app/components/creator/content-choice-creator/content-choice-creator.component.scss b/src/app/components/creator/content-choice-creator/content-choice-creator.component.scss
index 3d1670d1e84db9ddaee4cdd9f4a0d8ae5ccda756..075e8c1803e4fda825d752629d141216840d5917 100644
--- a/src/app/components/creator/content-choice-creator/content-choice-creator.component.scss
+++ b/src/app/components/creator/content-choice-creator/content-choice-creator.component.scss
@@ -3,7 +3,7 @@ form > button {
}
mat-header-cell {
- background-color: var(--background-2);
+ background-color: var(--surface);
}
mat-row {
@@ -11,7 +11,7 @@ mat-row {
}
.mat-checkbox {
- color: var(--text-3) !important;
+ color: var(--text-1) !important;
}
.addIcon {
diff --git a/src/app/components/creator/content-likert-creator/content-likert-creator.component.scss b/src/app/components/creator/content-likert-creator/content-likert-creator.component.scss
index ccd1c0a31b7626c17023705cfc44d7a7252d025a..61c83cf9a7dcb9f05e26748ee573a817780f1d63 100644
--- a/src/app/components/creator/content-likert-creator/content-likert-creator.component.scss
+++ b/src/app/components/creator/content-likert-creator/content-likert-creator.component.scss
@@ -3,7 +3,7 @@ form > button {
}
mat-header-cell {
- background-color: var(--background-2);
+ background-color: var(--surface);
}
mat-cell {
diff --git a/src/app/components/creator/content-list/content-list.component.scss b/src/app/components/creator/content-list/content-list.component.scss
index a452212da4e80ea1c573a680500910a7666e978b..62c7c77e99343bd65f50eab26542b3d53f6b0b65 100644
--- a/src/app/components/creator/content-list/content-list.component.scss
+++ b/src/app/components/creator/content-list/content-list.component.scss
@@ -1,7 +1,7 @@
mat-card {
width: 800px;
max-width: 90%;
- background-color: var(--card)!important;
+ background-color: var(--secondary-variant)!important;
}
mat-card-content > :first-child {
@@ -9,7 +9,7 @@ mat-card-content > :first-child {
}
mat-expansion-panel {
- background-color: var(--background-2);
+ background-color: var(--surface);
margin-bottom: 5px;
}
@@ -21,14 +21,14 @@ mat-panel-title {
}
mat-expansion-panel-header {
- background-color: var(--background-2) !important;
+ background-color: var(--surface) !important;
padding-left: 3%;
padding-right: 3%;
word-break: break-all;
}
.matPanel {
- background-color: var(--background-2);
+ background-color: var(--surface);
margin-bottom: 5px;
color: black!important;
}
diff --git a/src/app/components/creator/content-presentation/content-presentation.component.scss b/src/app/components/creator/content-presentation/content-presentation.component.scss
index 902425126609477610d0dedb98d7da6cac7e1671..10afc3bd5a639d0ffd3e71967b0217cfdc18b314 100644
--- a/src/app/components/creator/content-presentation/content-presentation.component.scss
+++ b/src/app/components/creator/content-presentation/content-presentation.component.scss
@@ -11,12 +11,12 @@ mat-card {
width: 800px;
max-width: 90%;
margin-top: 20px;
- background-color: var(--card);
+ background-color: var(--secondary-variant);
}
h3 {
font-size: 150%;
- color: var(--text-3);
+ color: var(--text-1);
}
h4 {
diff --git a/src/app/components/creator/room-creator-page/room-creator-page.component.scss b/src/app/components/creator/room-creator-page/room-creator-page.component.scss
index c506cd16b80a223ca4fb96ee1335b106a7d2be4b..72b29e68b8a3f3b4f5850346e5a49eb37007474c 100644
--- a/src/app/components/creator/room-creator-page/room-creator-page.component.scss
+++ b/src/app/components/creator/room-creator-page/room-creator-page.component.scss
@@ -2,7 +2,7 @@
mat-card {
width: 800px;
- background-color: var(--card)!important;
+ background-color: var(--secondary-variant)!important;
}
mat-card-content > :first-child {
@@ -57,7 +57,7 @@ mat-tooltip-component {
p {
font-size: medium;
- color: var(--text-2)!important;
+ color: var(--text-1)!important;
}
h2 {
@@ -67,7 +67,7 @@ h2 {
h3 {
font-size: larger;
- color: var(--text-3)!important;
+ color: var(--text-1)!important;
}
h4 {
@@ -93,6 +93,6 @@ mat-grid-tile {
}
mat-expansion-panel {
- background-color: var(--card)!important;
+ background-color: var(--secondary-variant)!important;
min-width: 200px;
}
diff --git a/src/app/components/home/home-page/home-page.component.scss b/src/app/components/home/home-page/home-page.component.scss
index 0ec3f5d386b4621115912f4c65c3dc99a2e930cd..8f6f54c55a0b45bc3ffd4eb32570118ae1e1bd2d 100644
--- a/src/app/components/home/home-page/home-page.component.scss
+++ b/src/app/components/home/home-page/home-page.component.scss
@@ -1,9 +1,7 @@
-@import '../../../../styles';
-
.outer {
width: 90%;
max-width: 500px;
- background-color: var(--background-2);
+ background-color: var(--surface);
}
.main-heading-primary {
@@ -12,7 +10,7 @@
font-weight: bold;
text-align: center;
letter-spacing: 10px;
- color: mat-color($arsnova-primary,500);
+ color: var(--primary);
animation: moveInLeft 2s ease-out;
padding-top: 10px;
}
@@ -23,7 +21,7 @@
font-size: 60%;
text-align: center;
letter-spacing: 10px;
- color: mat-color($arsnova-accent,500);
+ color: var(--secondary-variant);
animation: moveInRight 1s ease-out;
}
diff --git a/src/app/components/home/new-landing/new-landing.component.scss b/src/app/components/home/new-landing/new-landing.component.scss
index fd55c4f7441d4854591dbbe94cf32b898dd920f9..848b1e6b8c742db7af908ff2ff88f8eb5057506b 100644
--- a/src/app/components/home/new-landing/new-landing.component.scss
+++ b/src/app/components/home/new-landing/new-landing.component.scss
@@ -4,11 +4,13 @@
border-radius: 32px;
margin-bottom: 5%;
font-size: large;
- background-color: var(--primary);
+ background-color: var(--secondary);
+ color: var(--on-secondary);
}
.add {
transform: scale(1.4);
padding-right: 5px;
padding-left: 5px;
+ color: var(--on-secondary);
}
diff --git a/src/app/components/participant/room-participant-page/room-participant-page.component.scss b/src/app/components/participant/room-participant-page/room-participant-page.component.scss
index ed7e5887a128cfc053a10a8b1cc48159d0e4958d..01c97c9a27c5cf9d426fac2d9c9766529afcaf25 100644
--- a/src/app/components/participant/room-participant-page/room-participant-page.component.scss
+++ b/src/app/components/participant/room-participant-page/room-participant-page.component.scss
@@ -3,7 +3,7 @@
mat-card {
width: 100%;
max-width: 800px;
- background-color: var(--card)!important;
+ background-color: var(--secondary-variant)!important;
}
mat-card-content>:first-child {
@@ -35,7 +35,7 @@ button {
p {
font-size: medium;
- color: var(--text-2)!important;
+ color: var(--text-1)!important;
}
h2 {
@@ -45,7 +45,7 @@ h2 {
h3 {
font-size: larger;
- color: var(--text-3)!important;
+ color: var(--text-1)!important;
margin-top: 10px;
margin-bottom: 10px;
}
@@ -69,7 +69,7 @@ mat-card-subtitle {
}
mat-expansion-panel {
- background-color: var(--card)!important;
+ background-color: var(--secondary-variant)!important;
min-width: 200px;
}
diff --git a/src/app/components/shared/comment-list/comment-list.component.scss b/src/app/components/shared/comment-list/comment-list.component.scss
index 60184789ed3a2fbca5bdbca7d70866b979d9947e..3b05a842c9d3f73239168909ba5984345bcea37c 100644
--- a/src/app/components/shared/comment-list/comment-list.component.scss
+++ b/src/app/components/shared/comment-list/comment-list.component.scss
@@ -17,7 +17,7 @@ input {
box-sizing: border-box;
padding: 0 10px 0 5px;
width: 100%;
- background-color: var(--light);
+ background-color: var(--primary-variant);
border: none;
outline: none;
min-height: 60px;
@@ -27,7 +27,7 @@ input {
#search-container {
border-radius: 5px;
- background-color: var(--light);
+ background-color: var(--primary-variant);
margin-bottom: 10px;
}
diff --git a/src/app/components/shared/comment/comment.component.html b/src/app/components/shared/comment/comment.component.html
index a36915c6d4f59739a30f0f40a91dc75a28eea95c..78a035810f80b2bc74be269604bdb65e2bb38c5d 100644
--- a/src/app/components/shared/comment/comment.component.html
+++ b/src/app/components/shared/comment/comment.component.html
@@ -1,9 +1,9 @@
<mat-card id="comment-card" [ngClass]="{'highlighted': comment.highlighted,
'': !comment.highlighted}" [@slide]>
- <div fxLayout="column">
- <div fxLayout="row">
- <span class="fill-remaining-space"></span>
- <div id="date">
+ <div fxLayout="column">
+ <div fxLayout="row">
+ <span class="fill-remaining-space"></span>
+ <div class="date">
<div *ngIf="language === 'de'; else englishDate">
{{comment.timestamp | date: ' HH:mm:ss '}}Uhr,{{comment.timestamp | date: ' M.d.yy'}}
</div>
@@ -11,29 +11,35 @@
{{comment.timestamp | date: 'h:mm:ss a, M/d/yy'}}
</ng-template>
</div>
- <button mat-icon-button *ngIf="comment.correct || !isStudent" [disabled]="isStudent" (click)="setCorrect(comment)" [matTooltip]="comment.correct ? 'Unmark as correct' : 'Mark as correct'">
+ <button mat-icon-button *ngIf="comment.correct || !isStudent" [disabled]="isStudent" (click)="setCorrect(comment)"
+ [matTooltip]="comment.correct ? 'Unmark as correct' : 'Mark as correct'">
<mat-icon [ngClass]="{true : 'correct-icon', false: 'not-marked'}[comment.correct]">check_circle</mat-icon>
</button>
- <button mat-icon-button *ngIf="comment.favorite || !isStudent" [disabled]="isStudent" (click)="setFavorite(comment)" [matTooltip]="comment.favorite ? 'Mark as not favorite' : 'Mark as favorite'">
+ <button mat-icon-button *ngIf="comment.favorite || !isStudent" [disabled]="isStudent"
+ (click)="setFavorite(comment)"
+ [matTooltip]="comment.favorite ? 'Mark as not favorite' : 'Mark as favorite'">
<mat-icon [ngClass]="{true: 'favorite-icon', false: 'not-marked'}[comment.favorite]">favorite_border</mat-icon>
- </button>
- <button mat-icon-button [disabled]="isStudent" (click)="setRead(comment)" [matTooltip]="comment.read ? 'Mark as unread' : 'Mark as read'">
+ </button>
+ <button mat-icon-button [disabled]="isStudent" (click)="setRead(comment)"
+ [matTooltip]="comment.read ? 'Mark as unread' : 'Mark as read'">
<mat-icon class="icon" [ngClass]="{'read-icon': comment.read,
- 'not-marked' : !comment.read}">visibility</mat-icon>
+ 'not-marked' : !comment.read}">visibility
+ </mat-icon>
+ </button>
+ </div>
+ <div fxLayout="row">
+ <div class="body" (click)="openPresentDialog(comment)">{{comment.body}}</div>
+ <span class="fill-remaining-space" (click)="openPresentDialog(comment)"></span>
+ <div fxLayout="column" (tap)="startAnimation('rubberBand')" [@rubberBand]="animationState"
+ (@rubberBand.done)="resetAnimationState()">
+ <button mat-icon-button [disabled]="!isStudent" (click)="voteUp(comment)">
+ <mat-icon class="voting-icon" [ngClass]="{'upVoted' : hasVoted === 1}">keyboard_arrow_up</mat-icon>
+ </button>
+ <h2>{{comment.score}}</h2>
+ <button mat-icon-button [disabled]="!isStudent" (click)="voteDown(comment)">
+ <mat-icon class="voting-icon" [ngClass]="{'downVoted' : hasVoted === -1}">keyboard_arrow_down</mat-icon>
</button>
- </div>
- <div fxLayout="row">
- <div class="body" (click)="openPresentDialog(comment)">{{comment.body}}</div>
- <span class="fill-remaining-space" (click)="openPresentDialog(comment)"></span>
- <div fxLayout="column" (tap)="startAnimation('rubberBand')" [@rubberBand]="animationState" (@rubberBand.done)="resetAnimationState()">
- <button mat-icon-button [disabled]="!isStudent" (click)="voteUp(comment)" >
- <mat-icon class="voting-icon" [ngClass]="{'upVoted' : hasVoted === 1}">keyboard_arrow_up</mat-icon>
- </button>
- <h2>{{comment.score}}</h2>
- <button mat-icon-button [disabled]="!isStudent" (click)="voteDown(comment)">
- <mat-icon class="voting-icon" [ngClass]="{'downVoted' : hasVoted === -1}">keyboard_arrow_down</mat-icon>
- </button>
- </div>
</div>
</div>
- </mat-card>
+ </div>
+</mat-card>
diff --git a/src/app/components/shared/comment/comment.component.scss b/src/app/components/shared/comment/comment.component.scss
index cda2a043d60b9cf796ad8546d1240c75e4cf31af..9e2cb8116f1c9d6cea2e7d86c9da83a9eeef4767 100644
--- a/src/app/components/shared/comment/comment.component.scss
+++ b/src/app/components/shared/comment/comment.component.scss
@@ -1,6 +1,6 @@
#comment-card {
margin-bottom: 20px;
- background-color: var(--background-2);
+ background-color: var(--surface);
cursor: pointer;
padding-bottom: 10px;
padding-top: 10px;
@@ -17,6 +17,7 @@ mat-card-content > :first-child {
height: 35px;
font-size: 35px;
line-height: 100% !important;
+ color: var(--on-surface)
}
.upVoted {
@@ -46,6 +47,7 @@ mat-card-content > :first-child {
h2 {
text-align: center;
margin: 0;
+ color: var(--on-surface)
}
.body {
@@ -57,27 +59,27 @@ h2 {
overflow: auto;
padding-left: 2%;
padding-right: 2%;
+ color: var(--on-surface)
}
.mat-icon {
transform: scale(1.2);
}
-#date {
+.date {
padding-top: 10px;
margin-left: 2%;
opacity: 0.4;
position: absolute;
-}
-
-.date {
- position: fixed;
- bottom: 0;
- left: 0;
+ color: var(--on-surface)
}
.highlighted {
- background-color: var(--highlighted)!important;
+ background-color: var(--secondary)!important;
transition: background-color 1s linear;
}
+.highlighted * {
+ color: var(--on-secondary)!important;
+}
+
diff --git a/src/app/components/shared/content-groups/content-groups.component.scss b/src/app/components/shared/content-groups/content-groups.component.scss
index 3feaad67d10d8986ec94a22d00ea52802abbd351..edc89098a51358fe47f46a7530a732a542b9fa3f 100644
--- a/src/app/components/shared/content-groups/content-groups.component.scss
+++ b/src/app/components/shared/content-groups/content-groups.component.scss
@@ -1,7 +1,7 @@
@import '../../../../theme/default-Theme/_variables.scss';
#contentGroup {
- background-color: var(--background-2);
+ background-color: var(--primary);
box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2);
overflow: hidden;
position: relative;
@@ -11,10 +11,12 @@
margin-top: 10px;
max-height: 50px;
padding: 5px;
+ color: var(--on-primary);
&:hover {
cursor: pointer;
- background-color: var(--primary);
+ background-color: var(--surface);
+ color: var(--on-surface);
transform: translateZ(20px);
transform: translateY(-5px);
transform: scaleY(1.1);
diff --git a/src/app/components/shared/header/header.component.html b/src/app/components/shared/header/header.component.html
index 3630af2b2935c661916fc3e413dd6e54eac4c785..111deec408ba6a8f451a3db7ba0872c527bcc708 100644
--- a/src/app/components/shared/header/header.component.html
+++ b/src/app/components/shared/header/header.component.html
@@ -1,7 +1,7 @@
<mat-toolbar>
<mat-toolbar-row>
<button *ngIf="router.url !== '/home'" (click)="goBack()" mat-icon-button>
- <mat-icon aria-label="Go back">keyboard_arrow_left</mat-icon>
+ <mat-icon class="header-icons" aria-label="Go back">keyboard_arrow_left</mat-icon>
</button>
<span class="fill-remaining-space"></span>
<span *ngIf="router.url !== '/home'" class="app-title" (click)="goToHomepage()">ARSnova</span>
@@ -13,7 +13,7 @@
</mat-menu>
<button mat-icon-button [matMenuTriggerFor]="themeMenu">
- <mat-icon>palette</mat-icon>
+ <mat-icon class="header-icons">palette</mat-icon>
</button>
<mat-menu #langMenu="matMenu" [overlapTrigger]="false">
@@ -22,10 +22,10 @@
</mat-menu>
<button mat-icon-button [matMenuTriggerFor]="langMenu">
- <mat-icon>language</mat-icon>
+ <mat-icon class="header-icons">language</mat-icon>
</button>
- <mat-menu #appMenu="matMenu" [overlapTrigger]="false">
+ <mat-menu #loginMenu="matMenu" [overlapTrigger]="false">
<button mat-menu-item *ngIf="user && user.role === 1" routerLink="/creator">
<mat-icon color="primary">style</mat-icon>
<span>{{'header.my-sessions' | translate}}</span>
@@ -52,10 +52,10 @@
</mat-menu>
<button mat-icon-button *ngIf="!user" [matMenuTriggerFor]="userMenu">
- <mat-icon>account_box</mat-icon>
+ <mat-icon class="header-icons">account_box</mat-icon>
</button>
- <button mat-icon-button *ngIf="user" [matMenuTriggerFor]="appMenu">
- <mat-icon>account_box</mat-icon>
+ <button mat-icon-button *ngIf="user" [matMenuTriggerFor]="loginMenu">
+ <mat-icon class="header-icons">account_box</mat-icon>
</button>
</mat-toolbar-row>
</mat-toolbar>
diff --git a/src/app/components/shared/header/header.component.scss b/src/app/components/shared/header/header.component.scss
index b1e7f6dd49fe4fc4dad6b91ec68414a23837343c..3daed62173d7c31f65307d1ef5b83e2c19429fc5 100644
--- a/src/app/components/shared/header/header.component.scss
+++ b/src/app/components/shared/header/header.component.scss
@@ -1,8 +1,13 @@
.app-title {
cursor: pointer;
margin: 0 auto;
+ color: var(--on-surface);
}
mat-toolbar {
- background-color: var(--primary);
+ background-color: var(--surface);
+}
+
+.header-icons {
+ color: var(--on-surface);
}
diff --git a/src/app/components/shared/header/header.component.ts b/src/app/components/shared/header/header.component.ts
index af51e148a7973d11febe35b944d733dc985ff716..6c0490fb1efdcf9eee8045c7214f178dcecfed71 100644
--- a/src/app/components/shared/header/header.component.ts
+++ b/src/app/components/shared/header/header.component.ts
@@ -18,7 +18,7 @@ import { ThemeService } from '../../../../theme/theme.service';
})
export class HeaderComponent implements OnInit {
user: User;
- themeClass = localStorage.getItem('classNameOfTheme');
+ themeClass = localStorage.getItem('theme');
constructor(public location: Location,
private authenticationService: AuthenticationService,
@@ -67,11 +67,10 @@ export class HeaderComponent implements OnInit {
changeTheme(theme) {
this.themeClass = theme;
- localStorage.setItem('classNameOfTheme', theme);
if (theme === '') {
- this.themeService.setActiveThem('arsnovaTheme');
+ this.themeService.activate('arsnovaTheme');
} else {
- this.themeService.setActiveThem(theme);
+ this.themeService.activate(theme);
}
}
diff --git a/src/app/components/shared/list-statistic/list-statistic.component.html b/src/app/components/shared/list-statistic/list-statistic.component.html
index e8a0282b2f08807e8c6bc98f57d7c9423146fe44..db10116369f9275046f4553bafd98c297da3ce29 100644
--- a/src/app/components/shared/list-statistic/list-statistic.component.html
+++ b/src/app/components/shared/list-statistic/list-statistic.component.html
@@ -11,37 +11,37 @@
<ng-container matColumnDef="content">
<mat-header-cell *matHeaderCellDef> {{'statistic.content' | translate}} </mat-header-cell>
<mat-cell *matCellDef="let cp" [ngClass]="{
- 'positiveC' : cp.percent >= status.good,
- 'okayC' : cp.percent >= status.okay && cp.percent < status.good,
- 'negativeC' : cp.percent < status.okay,
- 'emptyCC' : cp.percent < status.zero }" (click)="goToStats(cp.contentId)">{{cp.content.subject}}</mat-cell>
+ 'positive' : cp.percent >= status.good,
+ 'okay' : cp.percent >= status.okay && cp.percent < status.good,
+ 'negative' : cp.percent < status.okay,
+ 'empty' : cp.percent < status.zero }" (click)="goToStats(cp.contentId)">{{cp.content.subject}}</mat-cell>
</ng-container>
<ng-container matColumnDef="percentage">
<mat-header-cell *matHeaderCellDef> {{'statistic.percentage' | translate }} </mat-header-cell>
<mat-cell *matCellDef="let cp" [ngClass]="{
- 'positiveC' : cp.percent >= status.good,
- 'okayC' : cp.percent >= status.okay && cp.percent < status.good,
- 'negativeC' : cp.percent < status.okay,
- 'emptyC' : cp.percent < status.zero }" (click)="goToStats(cp.contentId)">{{cp.percent.toFixed() + ' %'}}</mat-cell>
+ 'positive' : cp.percent >= status.good,
+ 'okay' : cp.percent >= status.okay && cp.percent < status.good,
+ 'negative' : cp.percent < status.okay,
+ 'empty' : cp.percent < status.zero }" (click)="goToStats(cp.contentId)">{{cp.percent.toFixed() + ' %'}}</mat-cell>
</ng-container>
<ng-container matColumnDef="counts">
<mat-header-cell *matHeaderCellDef> {{'statistic.answers' | translate}} </mat-header-cell>
<mat-cell *matCellDef="let cp" [ngClass]="{
- 'positiveC' : cp.percent >= status.good,
- 'okayC' : cp.percent >= status.okay && cp.percent < status.good,
- 'negativeC' : cp.percent < status.okay,
- 'emptyC' : cp.percent < status.zero }" (click)="goToStats(cp.contentId)">{{cp.counts}}</mat-cell>
+ 'positive' : cp.percent >= status.good,
+ 'okay' : cp.percent >= status.okay && cp.percent < status.good,
+ 'negative' : cp.percent < status.okay,
+ 'empty' : cp.percent < status.zero }" (click)="goToStats(cp.contentId)">{{cp.counts}}</mat-cell>
</ng-container>
<ng-container matColumnDef="abstentions">
<mat-header-cell *matHeaderCellDef> {{'statistic.abstentions' | translate}} </mat-header-cell>
<mat-cell *matCellDef="let cp" [ngClass]="{
- 'positiveC' : cp.percent >= status.good,
- 'okayC' : cp.percent >= status.okay && cp.percent < status.good,
- 'negativeC' : cp.percent < status.okay,
- 'emptyC' : cp.percent < status.zero }" (click)="goToStats(cp.contentId)">{{cp.abstentions}}</mat-cell>
+ 'positive' : cp.percent >= status.good,
+ 'okay' : cp.percent >= status.okay && cp.percent < status.good,
+ 'negative' : cp.percent < status.okay,
+ 'empty' : cp.percent < status.zero }" (click)="goToStats(cp.contentId)">{{cp.abstentions}}</mat-cell>
</ng-container>
<mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
diff --git a/src/app/components/shared/list-statistic/list-statistic.component.scss b/src/app/components/shared/list-statistic/list-statistic.component.scss
index 9b037ced37ed9539b22f932fb55619a40a4010c6..355b5e21b1c7c11d96d6f6eff3af86ae4bf0fd2d 100644
--- a/src/app/components/shared/list-statistic/list-statistic.component.scss
+++ b/src/app/components/shared/list-statistic/list-statistic.component.scss
@@ -35,40 +35,23 @@ mat-cell {
mat-toolbar {
height: 20px;
- background-color: var(--card)!important;
+ background-color: var(--secondary-variant)!important;
}
-.positiveC {
+.positive {
background-color: var(--green);
}
-.negativeC {
+.negative {
background-color: var(--red);
}
-.okayC {
- background-color: var(--red);
-}
-
-.positiveP {
- background-color: var(--green)!important;
-}
-
-.negativeP {
- background-color: var(--red)!important;
+.okay {
+ background-color: var(--yellow);
}
-.okayP {
- background-color: var(--yellow)!important;
-}
-
-.emptyC {
+.empty {
color: var(--grey)!important;
background: var(--grey);
pointer-events: none;
}
-
-.emptyCC {
- background: var(--grey) ;
- pointer-events: none;
-}
diff --git a/src/app/components/shared/login/login.component.ts b/src/app/components/shared/login/login.component.ts
index 9bda7d3ea12443308ec89a4d841200805ffda5b5..bd1d3126aae699186995bf5d099836853f3efd67 100644
--- a/src/app/components/shared/login/login.component.ts
+++ b/src/app/components/shared/login/login.component.ts
@@ -106,8 +106,10 @@ 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.setActiveThem('dark');
+ 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.html b/src/app/components/shared/room-join/room-join.component.html
index 689e58c05c489f4fc27abe14d06e52be305faf3f..744fc3ed02f84f9902ee13ba92eb39edf73eae90 100644
--- a/src/app/components/shared/room-join/room-join.component.html
+++ b/src/app/components/shared/room-join/room-join.component.html
@@ -10,10 +10,10 @@
<mat-error *ngIf="roomFormControl.hasError('required')">{{ 'home-page.please-enter' | translate}}</mat-error>
<mat-error *ngIf="roomFormControl.hasError('pattern')">{{ 'home-page.only-numbers' | translate}}</mat-error>
</mat-form-field>
- <button mat-fab color="accent" type="submit">
+ <button mat-fab type="submit">
<mat-icon>input</mat-icon>
</button>
</div>
</form>
-<button mat-button class="demo" color="primary" (click)="joinDemo()">Demo Session</button>
+<button mat-button class="demo" (click)="joinDemo()">Demo Session</button>
</div>
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 46d23a71f87e0cae221cdbf9ba0a2353b0ca09fe..9cca6ecb8b05320d145beac416ad163d06322586 100644
--- a/src/app/components/shared/room-join/room-join.component.scss
+++ b/src/app/components/shared/room-join/room-join.component.scss
@@ -8,6 +8,7 @@ form {
.demo {
margin-bottom: 20px;
+ color: var(--on-surface);
}
mat-error {
@@ -17,6 +18,8 @@ mat-error {
.mat-fab {
width: 65px;
height: 65px;
+ background-color: var(--secondary);
+ color: var(--on-secondary);
}
input[type="number"]::-webkit-outer-spin-button, input[type="number"]::-webkit-inner-spin-button {
diff --git a/src/app/components/shared/room-list/room-list.component.scss b/src/app/components/shared/room-list/room-list.component.scss
index 476d30188f17d8d945c76b08b24ffcd4fbe87360..28561c7fb718760b3355d1f8b7d2aefb49108bd9 100644
--- a/src/app/components/shared/room-list/room-list.component.scss
+++ b/src/app/components/shared/room-list/room-list.component.scss
@@ -33,7 +33,7 @@ mat-panel-title {
.headerTitle {
width: 8%;
- color: var(--primary)!important;
+ color: var(--on-secondary)!important;
}
.panelTitle {
diff --git a/src/app/components/shared/statistic/statistic.component.scss b/src/app/components/shared/statistic/statistic.component.scss
index b3d28b34419822d0923029c4b87479996438430e..3353bb77e850c3ec82afaace36722749fbc43037 100644
--- a/src/app/components/shared/statistic/statistic.component.scss
+++ b/src/app/components/shared/statistic/statistic.component.scss
@@ -1,12 +1,12 @@
mat-card {
width: 800px;
max-width: 90%;
- background-color: var(--card)!important;
+ background-color: var(--secondary-variant)!important;
}
mat-toolbar {
height: 15px;
- background-color: var(--card)!important;
+ background-color: var(--secondary-variant)!important;
}
.mat-icon-button {
diff --git a/src/app/components/shared/statistics-page/statistics-page.component.scss b/src/app/components/shared/statistics-page/statistics-page.component.scss
index 632a4b0da76dfbe912a359a0936d0af532abe3e2..389817472746480db8a8a7e9050c42fc4eef7802 100644
--- a/src/app/components/shared/statistics-page/statistics-page.component.scss
+++ b/src/app/components/shared/statistics-page/statistics-page.component.scss
@@ -2,7 +2,7 @@ mat-card {
width: 800px;
max-width: 90%;
min-height: 300px;
- background-color: var(--card)!important;
+ background-color: var(--secondary-variant)!important;
}
h2 {
diff --git a/src/assets/i18n/creator/de.json b/src/assets/i18n/creator/de.json
index b7b2e148045147617ebaa3f1f2d3c1e187a035f4..ff04dd4b82978107fdae01b211f8ed3093322bec 100644
--- a/src/assets/i18n/creator/de.json
+++ b/src/assets/i18n/creator/de.json
@@ -1,6 +1,6 @@
{
"home-page": {
- "create-session": "Session erstellen",
+ "create-session": "Neue Session",
"no-empty-name": "Bitte geben Sie einen Namen ein.",
"created-1": "Session '",
"created-2": "' erfolgreich erstellt."
diff --git a/src/assets/i18n/creator/en.json b/src/assets/i18n/creator/en.json
index d57a4786d68a8852f60d7a10f054c0fd6ecda4fb..50e6bcb68a12a99817f02328b99dc06f17de919c 100644
--- a/src/assets/i18n/creator/en.json
+++ b/src/assets/i18n/creator/en.json
@@ -1,6 +1,6 @@
{
"home-page": {
- "create-session": "Create session",
+ "create-session": "New Session",
"no-empty-name": "Please enter a name.",
"created-1": "Session '",
"created-2": "' successfully created."
diff --git a/src/assets/i18n/home/de.json b/src/assets/i18n/home/de.json
index 9638bf1b60bd44a6c957e04ca235b6c809cf8b28..77797047cf667d4655472e78df40d9f1d0dfff02 100644
--- a/src/assets/i18n/home/de.json
+++ b/src/assets/i18n/home/de.json
@@ -25,7 +25,7 @@
"no-room-found": "Es wurde keine Session mit dieser ID gefunden",
"please-enter": "Bitte geben Sie eine Session-ID ein",
"exactly-8": "Eine Session-ID hat genau 8 Ziffern",
- "create-session": "Session erstellen",
+ "create-session": "Neue Session",
"no-empty-name": "Bitte geben Sie einen Namen ein",
"created-1": "Session '",
"created-2": "' erfolgreich erstellt",
diff --git a/src/assets/i18n/home/en.json b/src/assets/i18n/home/en.json
index 490d70df728be33625961ac47bf500751a9087e2..ceee59c0408c06ff3c47fa81830d74ea4ab47fd7 100644
--- a/src/assets/i18n/home/en.json
+++ b/src/assets/i18n/home/en.json
@@ -25,7 +25,7 @@
"no-room-found": "No session was found with this ID",
"please-enter": "Please enter a session-ID",
"exactly-8": "A session-ID has exactly 8 digits",
- "create-session": "Create session",
+ "create-session": "New Session",
"no-empty-name": "Please enter a name.",
"created-1": "Session '",
"created-2": "' successfully created",
diff --git a/src/theme/dark-Theme/darkTheme.const.ts b/src/theme/dark-Theme/darkTheme.const.ts
index 2e7e842972959f27af2a474333fd4e8b6338ed5a..68b61d0d4856aecb872ec8fd0f747fbc0e5d3574 100644
--- a/src/theme/dark-Theme/darkTheme.const.ts
+++ b/src/theme/dark-Theme/darkTheme.const.ts
@@ -1,24 +1,24 @@
export const dark = {
- '--primary' : '#37474F',
- '--light': '#455a64',
+ '--primary' : '#009688',
+ '--primary-variant': '#455a64',
- '--accent': '#FFE0B2',
+ '--secondary': '#FFCC80',
+ '--secondary-variant': '#bdbdbd',
- '--background': '#616161',
- '--background-2': '#757575',
- '--card': '#bdbdbd',
+ '--background': '#424242',
+ '--surface': '#212121',
+ '--dialog': '#78909c',
+
+ '--on-primary': '#212121',
+ '--on-secondary': '#212121',
+ '--on-background': '#FFFFFF',
+ '--on-surface': '#FFFFFF',
'--green': '#AED581',
'--red': '#FF8A80',
'--yellow': '#FFD54F',
'--blue': '#1E88E5',
- '--grey': '#E0E0E0',
- '--grey-light': '#9E9E9E',
-
- '--text-1': '#37474f',
- '--text-2': '#004d40',
- '--text-3': '#78909c',
- '--dialog': '#78909c',
- '--highlighted' : '#005F63'
+ '--grey': '#BDBDBD',
+ '--grey-light': '#9E9E9E'
};
diff --git a/src/theme/default-Theme/defaultTheme.const.ts b/src/theme/default-Theme/defaultTheme.const.ts
index 8628823c5105dfc1b00133c0e97eb1cb1bec146f..30c85dab711a3c15c51b222c81183bbf3c92a93f 100644
--- a/src/theme/default-Theme/defaultTheme.const.ts
+++ b/src/theme/default-Theme/defaultTheme.const.ts
@@ -1,24 +1,24 @@
export const defaultTheme = {
'--primary' : '#4DB6AC',
- '--light': '#80cbc4',
+ '--primary-variant': '#80cbc4',
- '--accent': '#FFE0B2',
+ '--secondary': '#FFCC80',
+ '--secondary-variant': '#fff8e1',
- '--background': '#B2DFDB',
- '--background-2': '#BBDEFB',
- '--card': '#fff8e1',
+ '--background': '#b2dfdb',
+ '--surface': '#0288d1',
+ '--dialog': '#B2DFDB',
+
+ '--on-primary': '#212121',
+ '--on-secondary': '#212121',
+ '--on-background': '#212121',
+ '--on-surface': '#212121',
'--green': '#AED581',
'--red': '#FF8A80',
'--yellow': '#FFD54F',
'--blue': '#1E88E5',
'--grey': '#BDBDBD',
- '--grey-light': '#EEEEEE',
-
- '--text-1': '#37474f', // could be used for all texts !!!!!!!!!!1
- '--text-2': '#004d40', // could be used for all texts !!!!!!11111
- '--text-3': '#37474f', // could be used for all texts !!!!!!!!!1
- '--dialog': '#B2DFDB',
- '--highlighted' : '#FFE082'
+ '--grey-light': '#EEEEEE'
};
diff --git a/src/theme/theme.directive.ts b/src/theme/theme.directive.ts
index 41a493da22e7284bc882e9fc6285ac0c9b217db4..4202d0503f24cec72957090d239ef4f7856b9404 100644
--- a/src/theme/theme.directive.ts
+++ b/src/theme/theme.directive.ts
@@ -21,7 +21,7 @@ export class ThemeDirective implements OnInit, OnDestroy {
ngOnInit() {
this.updateTheme(this.themeName);
- this.themService.getActiveTheme()
+ this.themService.getTheme()
.subscribe(themeName => {
this.themeName = themeName;
this.updateTheme(this.themeName);
diff --git a/src/theme/theme.service.ts b/src/theme/theme.service.ts
index 9c56dfb379aacc5f0df11e7ea62560038d9838e3..cb045b6ea6a404e8589504496ffd6b1b0b242755 100644
--- a/src/theme/theme.service.ts
+++ b/src/theme/theme.service.ts
@@ -5,16 +5,17 @@ import { BehaviorSubject } from 'rxjs';
providedIn: 'root'
})
export class ThemeService {
- themeName = localStorage.getItem('classNameOfTheme');
+ themeName = localStorage.getItem('theme');
private activeThem = new BehaviorSubject(this.themeName);
constructor() { }
- public getActiveTheme() {
+ public getTheme() {
return this.activeThem.asObservable();
}
- public setActiveThem(name) {
+ public activate(name) {
this.activeThem.next(name);
+ localStorage.setItem('theme', name);
}
}