From 952e974a03978708367646e3146d1945ea42f35c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Lukas=20Mau=C3=9F?= <lukas.mauss@mni.thm.de>
Date: Wed, 22 May 2019 23:13:58 +0200
Subject: [PATCH] Several color fixes
---
.../home/home-page/home-page.component.scss | 6 +--
.../new-landing/new-landing.component.scss | 4 +-
.../shared/comment/comment.component.html | 52 +++++++++++--------
.../shared/comment/comment.component.scss | 12 ++---
.../content-groups.component.scss | 6 ++-
.../shared/header/header.component.html | 14 ++---
.../shared/header/header.component.scss | 7 ++-
.../list-statistic.component.html | 32 ++++++------
.../list-statistic.component.scss | 27 ++--------
.../shared/room-join/room-join.component.html | 4 +-
.../shared/room-join/room-join.component.scss | 3 ++
.../shared/room-list/room-list.component.scss | 2 +-
src/theme/dark-Theme/darkTheme.const.ts | 16 +++---
src/theme/default-Theme/defaultTheme.const.ts | 12 +++--
14 files changed, 99 insertions(+), 98 deletions(-)
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 e2f731593..8f6f54c55 100644
--- a/src/app/components/home/home-page/home-page.component.scss
+++ b/src/app/components/home/home-page/home-page.component.scss
@@ -1,5 +1,3 @@
-@import '../../../../styles';
-
.outer {
width: 90%;
max-width: 500px;
@@ -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 fd55c4f74..848b1e6b8 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/shared/comment/comment.component.html b/src/app/components/shared/comment/comment.component.html
index a36915c6d..78a035810 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 6d32fbc82..fcd961e08 100644
--- a/src/app/components/shared/comment/comment.component.scss
+++ b/src/app/components/shared/comment/comment.component.scss
@@ -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,23 +59,19 @@ 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 {
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 a32a4f894..edc89098a 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(--surface);
+ 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 3630af2b2..111deec40 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 b1e7f6dd4..3daed6217 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/list-statistic/list-statistic.component.html b/src/app/components/shared/list-statistic/list-statistic.component.html
index e8a0282b2..db1011636 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 d65aa95d4..355b5e21b 100644
--- a/src/app/components/shared/list-statistic/list-statistic.component.scss
+++ b/src/app/components/shared/list-statistic/list-statistic.component.scss
@@ -38,37 +38,20 @@ mat-toolbar {
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/room-join/room-join.component.html b/src/app/components/shared/room-join/room-join.component.html
index 689e58c05..744fc3ed0 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 46d23a71f..9cca6ecb8 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 476d30188..28561c7fb 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/theme/dark-Theme/darkTheme.const.ts b/src/theme/dark-Theme/darkTheme.const.ts
index c985b83b8..797bdf77e 100644
--- a/src/theme/dark-Theme/darkTheme.const.ts
+++ b/src/theme/dark-Theme/darkTheme.const.ts
@@ -1,22 +1,24 @@
export const dark = {
- '--primary' : '#37474F',
+ '--primary' : '#009688',
'--primary-variant': '#455a64',
- '--secondary': '#FFE0B2',
+ '--secondary': '#FFCC80',
'--secondary-variant': '#bdbdbd',
- '--background': '#616161',
- '--surface': '#757575',
+ '--background': '#424242',
+ '--surface': '#212121',
- '--on-primary': '#37474f',
- '--on-secondary': '#FFFFFF',
+ '--on-primary': '#212121',
+ '--on-secondary': '#212121',
+ '--on-background': '#FFFFFF',
+ '--on-surface': '#FFFFFF',
'--green': '#AED581',
'--red': '#FF8A80',
'--yellow': '#FFD54F',
'--blue': '#1E88E5',
- '--grey': '#E0E0E0',
+ '--grey': '#BDBDBD',
'--grey-light': '#9E9E9E',
'--dialog': '#78909c',
diff --git a/src/theme/default-Theme/defaultTheme.const.ts b/src/theme/default-Theme/defaultTheme.const.ts
index b02005874..8d837240f 100644
--- a/src/theme/default-Theme/defaultTheme.const.ts
+++ b/src/theme/default-Theme/defaultTheme.const.ts
@@ -3,14 +3,16 @@ export const defaultTheme = {
'--primary' : '#4DB6AC',
'--primary-variant': '#80cbc4',
- '--secondary': '#FFE0B2',
+ '--secondary': '#FFCC80',
'--secondary-variant': '#fff8e1',
- '--background': '#B2DFDB',
- '--surface': '#BBDEFB',
+ '--background': '#b2dfdb',
+ '--surface': '#0288d1',
- '--on-primary': '#37474f',
- '--on-secondary': '#FFFFFF',
+ '--on-primary': '#212121',
+ '--on-secondary': '#212121',
+ '--on-background': '#212121',
+ '--on-surface': '#212121',
'--green': '#AED581',
'--red': '#FF8A80',
--
GitLab