From de7b87b77989ff707ec752ae0034d5afc135b4d0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Lukas=20Mau=C3=9F?= <lukas.mauss@mni.thm.de>
Date: Fri, 21 Jun 2019 13:14:29 +0200
Subject: [PATCH] Adjust colors in several content-creation components
---
.../answer-edit/answer-edit.component.html | 4 +-
.../answer-edit/answer-edit.component.scss | 13 ++++++
.../content-choice-creator.component.html | 4 +-
.../content-choice-creator.component.scss | 45 ++++++++++++++++++-
.../content-create-page.component.scss | 5 ++-
.../content-likert-creator.component.scss | 2 +
.../content-yes-no-creator.component.scss | 19 ++++++++
7 files changed, 86 insertions(+), 6 deletions(-)
diff --git a/src/app/components/creator/_dialogs/answer-edit/answer-edit.component.html b/src/app/components/creator/_dialogs/answer-edit/answer-edit.component.html
index bad88dd8c..145fad25c 100644
--- a/src/app/components/creator/_dialogs/answer-edit/answer-edit.component.html
+++ b/src/app/components/creator/_dialogs/answer-edit/answer-edit.component.html
@@ -8,10 +8,10 @@
placeholder="{{ 'content.points' | translate }}" name="points">
</mat-form-field>
<div fxLayout="row" fxLayoutAlign="center" fxLayoutGap="10px">
- <button (click)="dialogRef.close()" mat-button color="primary">
+ <button (click)="dialogRef.close()" mat-button>
{{ 'room-page.abort' | translate }}
</button>
- <button (click)="dialogRef.close('edit')" mat-raised-button color="primary">
+ <button (click)="dialogRef.close('edit')" mat-raised-button>
{{ 'room-page.update' | translate }}
</button>
</div>
diff --git a/src/app/components/creator/_dialogs/answer-edit/answer-edit.component.scss b/src/app/components/creator/_dialogs/answer-edit/answer-edit.component.scss
index e69de29bb..8999f948b 100644
--- a/src/app/components/creator/_dialogs/answer-edit/answer-edit.component.scss
+++ b/src/app/components/creator/_dialogs/answer-edit/answer-edit.component.scss
@@ -0,0 +1,13 @@
+.mat-raised-button {
+ background-color: var(--primary);
+ color: var(--on-primary);
+}
+
+.mat-button {
+ background-color: var(--secondary);
+ color: var(--on-secondary);
+}
+
+input {
+ color: var(--on-surface);
+}
diff --git a/src/app/components/creator/content-choice-creator/content-choice-creator.component.html b/src/app/components/creator/content-choice-creator/content-choice-creator.component.html
index 1d90657e7..3bb018132 100644
--- a/src/app/components/creator/content-choice-creator/content-choice-creator.component.html
+++ b/src/app/components/creator/content-choice-creator/content-choice-creator.component.html
@@ -23,12 +23,12 @@
<ng-container matColumnDef="actions">
<mat-header-cell *matHeaderCellDef>{{ 'content.actions' | translate }}</mat-header-cell>
<mat-cell *matCellDef="let answer">
- <button mat-icon-button
+ <button mat-icon-button class="edit"
(click)="openAnswerModificationDialog($event, answer.answerOption.label, answer.answerOption.points, answer.correct)"
matTooltip="{{ 'content.edit-answer' | translate }}">
<mat-icon>edit</mat-icon>
</button>
- <button mat-icon-button (click)="deleteAnswer($event, answer.answerOption.label)"
+ <button mat-icon-button class="delete" (click)="deleteAnswer($event, answer.answerOption.label)"
matTooltip="{{ 'content.delete-answer' | translate }}">
<mat-icon>delete</mat-icon>
</button>
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 3f9eb37ee..a2d7e1cb4 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
@@ -7,7 +7,7 @@ mat-header-cell {
}
mat-row {
- background-color: var(--primary);
+ background-color: var(--surface);
}
.mat-checkbox {
@@ -47,3 +47,46 @@ mat-form-field {
background-color: var(--secondary);
color: var(--on-secondary);
}
+
+mat-radio-button {
+ color: var(--on-surface);
+}
+
+.mat-header-cell {
+ color: var(--on-surface);
+}
+
+input {
+ color: var(--on-surface);
+}
+
+::ng-deep .mat-checkbox-checked.mat-accent .mat-checkbox-background, .mat-checkbox-indeterminate.mat-accent .mat-checkbox-background {
+ background-color: var(--secondary);
+}
+
+::ng-deep .mat-checkbox-frame {
+ border-color: var(--on-surface);
+}
+
+.edit {
+ color: var(--secondary);
+}
+
+.delete {
+ color: var(--red);
+}
+
+::ng-deep .mat-radio-outer-circle {
+ .mat-radio-checked & {
+ border-color: var(--secondary)!important;
+ }
+ border-color: var(--on-surface);
+}
+
+::ng-deep .mat-radio-inner-circle {
+ background-color: var(--secondary)!important;
+}
+
+::ng-deep .mat-radio-ripple .mat-ripple-element {
+ background-color: var(--secondary)!important;
+}
diff --git a/src/app/components/creator/content-create-page/content-create-page.component.scss b/src/app/components/creator/content-create-page/content-create-page.component.scss
index 2f83825bf..18cf540ef 100644
--- a/src/app/components/creator/content-create-page/content-create-page.component.scss
+++ b/src/app/components/creator/content-create-page/content-create-page.component.scss
@@ -12,6 +12,9 @@ mat-tab-group {
}
::ng-deep .mat-tab-label-active {
- color: var(--secondary);
+ color: var(--on-surface);
}
+::ng-deep .mat-ink-bar {
+ background-color: var(--primary) !important;
+}
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 051ec35e5..2d7f711c0 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
@@ -4,10 +4,12 @@ form > button {
mat-header-cell {
background-color: var(--surface);
+ color: var(--on-surface);
}
mat-cell {
background-color: var(--primary);
+ color: var(--on-surface);
}
.submit {
diff --git a/src/app/components/creator/content-yes-no-creator/content-yes-no-creator.component.scss b/src/app/components/creator/content-yes-no-creator/content-yes-no-creator.component.scss
index 0047e966a..0ee0ee498 100644
--- a/src/app/components/creator/content-yes-no-creator/content-yes-no-creator.component.scss
+++ b/src/app/components/creator/content-yes-no-creator/content-yes-no-creator.component.scss
@@ -11,3 +11,22 @@ form > button {
.mat-raised-button {
min-width: 120px;
}
+
+mat-radio-button {
+ color: var(--on-surface);
+}
+
+::ng-deep .mat-radio-outer-circle {
+ .mat-radio-checked & {
+ border-color: var(--secondary)!important;
+ }
+ border-color: var(--on-surface);
+}
+
+::ng-deep .mat-radio-inner-circle {
+ background-color: var(--secondary)!important;
+}
+
+::ng-deep .mat-radio-ripple .mat-ripple-element {
+ background-color: var(--secondary)!important;
+}
--
GitLab