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 bad88dd8cb1cfca2b0060be4dda91360688e3d51..145fad25c0608b9feb327f242af116708d50bcfd 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 e69de29bb2d1d6434b8b29ae775ad8c2e48c5391..8999f948bb80aeaa546cf53558a873139f7d547d 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 1d90657e7a255d33db528e0e88576ae02754e6ba..3bb018132f1b6b2d9ee67dba2b7821acc0a664a1 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 3f9eb37ee4d2b7d61c2a7cbfd6064820db3da36e..a2d7e1cb4e0b7582007eb1e626fce52caeea3513 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 2f83825bf09067c296926f2cd08a52e858c1d80d..18cf540eface7488d3691a1eaba0602561c04ed3 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 051ec35e599f1025c913dbac28d5e56a8aabd1e9..2d7f711c0422ddf26b0e13c4e8e32ec8827725ae 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 0047e966a4654204184c48c75cd3611bdf3fc440..0ee0ee498a08d002e8cc60c1b438d2c744744bd5 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; +}