diff --git a/src/app/components/creator/room-creator-page/room-creator-page.component.html b/src/app/components/creator/room-creator-page/room-creator-page.component.html
index f46e714048e1fb4b2b385811306011ae725ba342..c3ff1df1518dd7c4adc281923c1f8320f5ebc215 100644
--- a/src/app/components/creator/room-creator-page/room-creator-page.component.html
+++ b/src/app/components/creator/room-creator-page/room-creator-page.component.html
@@ -20,15 +20,10 @@
</button>
</div>
<mat-divider></mat-divider>
- <mat-card-content id="description" fxLayoutAlign="center">
- <mat-expansion-panel *ngIf="!(room.description == '')" class="mat-elevation-z0">
- <mat-expansion-panel-header>
- <h4>{{ 'room-page.description' | translate }}</h4>
- </mat-expansion-panel-header>
- <p>
- {{ room.description }}
- </p>
- </mat-expansion-panel>
+ <mat-card-content fxLayoutAlign="center">
+ <h4>
+ {{ room.description }}
+ </h4>
</mat-card-content>
<mat-grid-list cols="2" rowHeight="2:1">
<mat-grid-tile>
@@ -36,6 +31,7 @@
routerLink="/creator/room/{{ room.shortId }}/comments">
<mat-icon>question_answer</mat-icon>
<h3 *ngIf="deviceType === 'desktop'">{{ 'room-page.comments' | translate}}</h3>
+ <h4 *ngIf="deviceType === 'mobile'">{{ 'room-page.comments' | translate}}</h4>
</button>
</mat-grid-tile>
<mat-grid-tile>
@@ -43,6 +39,7 @@
<mat-icon class="smallerIcon">thumbs_up_down
</mat-icon>
<h3 *ngIf="deviceType === 'desktop'">{{ 'room-page.live-feedback' | translate}}</h3>
+ <h4 *ngIf="deviceType === 'mobile'">{{ 'room-page.live-feedback' | translate}}</h4>
</button>
</mat-grid-tile>
</mat-grid-list>
@@ -62,8 +59,9 @@
</button>
</mat-grid-tile>
</mat-grid-list>
--->
+
<app-content-groups *ngIf="room && room.contentGroups" [contentGroups]="room.contentGroups"></app-content-groups>
+-->
</mat-card>
<div *ngIf="!isLoading && !room">Error: room could not be found!</div>
</div>
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 2d187d3c70693718c81087c631f2bda411b3c150..8f940964eae7bc442a28c86cfc6262373962da86 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,6 +2,7 @@
mat-card {
width: 800px;
+ min-height: 350px;
background-color: var(--surface)!important;
}
@@ -25,7 +26,7 @@ button {
.mat-icon-button {
width: 75%;
height: 75%;
- margin-bottom: 20px;
+ margin-bottom: 10%;
color: var(--primary)!important;
}
@@ -55,11 +56,6 @@ mat-tooltip-component {
position: relative;
}
-p {
- font-size: medium;
- color: var(--on-surface)!important;
-}
-
h2 {
font-size: large;
color: var(--on-surface)!important;
@@ -89,7 +85,7 @@ mat-card-subtitle {
}
mat-grid-tile {
- height: 20px;
+ height: 100px!important;
}
mat-expansion-panel {
diff --git a/src/app/components/participant/room-participant-page/room-participant-page.component.html b/src/app/components/participant/room-participant-page/room-participant-page.component.html
index 99b6c45c7329c7ff12e9429f54684193870624ac..6eda7702240087ba96ce13846d4e98d1ede7f121 100644
--- a/src/app/components/participant/room-participant-page/room-participant-page.component.html
+++ b/src/app/components/participant/room-participant-page/room-participant-page.component.html
@@ -12,14 +12,6 @@
</mat-card-header>
<mat-divider></mat-divider>
<mat-card-content fxLayoutAlign="center">
- <!-- <mat-expansion-panel *ngIf="!(room.description == '')" class="mat-elevation-z0">
- <mat-expansion-panel-header>
- <h4>{{ 'room-page.description' | translate }}</h4>
- </mat-expansion-panel-header>
- <p>
- {{ room.description }}
- </p>
- </mat-expansion-panel> -->
<h4>{{room.description}}</h4>
</mat-card-content>
<mat-grid-list cols="2" rowHeight="2:1">
@@ -27,12 +19,14 @@
<button mat-icon-button routerLink="/participant/room/{{ room.shortId }}/comments">
<mat-icon>question_answer</mat-icon>
<h3 *ngIf="deviceType === 'desktop'">{{ 'room-page.create-comment' | translate}}</h3>
+ <h4 *ngIf="deviceType === 'mobile'">{{ 'room-page.create-comment' | translate}}</h4>
</button>
</mat-grid-tile>
<mat-grid-tile>
<button mat-icon-button routerLink="/participant/room/{{ room.shortId }}/feedback-barometer">
<mat-icon>thumbs_up_down</mat-icon>
<h3 *ngIf="deviceType === 'desktop'">{{ 'room-page.give-feedback' | translate}}</h3>
+ <h4 *ngIf="deviceType === 'mobile'">{{ 'room-page.give-feedback' | translate}}</h4>
</button>
</mat-grid-tile>
<!-- <mat-grid-tile>
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 6dd4c78b6816a846dd78fa61fc325ed39ca6fc10..18d253c2a01004ef61b85963ba5f37354530d8f0 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,6 +3,7 @@
mat-card {
width: 100%;
max-width: 800px;
+ min-height: 300px;
background-color: var(--surface)!important;
}
@@ -12,8 +13,8 @@ mat-card-content>:first-child {
.mat-icon-button {
width: 100%;
- height: 100%;
- margin-bottom: 10px;
+ height: 75%;
+ margin-bottom: 10%;
color: var(--primary)!important;
}
@@ -40,14 +41,14 @@ h2 {
h3 {
font-size: larger;
- color: var(--on-surface);
+ color: var(--on-surface)!important;
margin-top: 15px;
margin-bottom: 10px;
}
h4 {
- font-size: medium;
- color: var(--on-surface);
+ font-size: 15px;
+ color: var(--on-surface)!important;
}
mat-card-header {
@@ -70,11 +71,11 @@ mat-expansion-panel {
}
mat-grid-list {
- margin-bottom: 20px !important;
+ margin-bottom: 10px !important;
}
mat-grid-tile {
- height: 20px;
+ height: 100px!important;
}
mat-tooltip-component {
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 a7e29e8980fda098fecb6d5154c75b003dd24fc9..a374456f1140c764f68344312815450264e76541 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(--secondary);
+ background-color: var(--primary);
box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2);
overflow: hidden;
position: relative;
@@ -11,7 +11,7 @@
margin-top: 10px;
max-height: 50px;
padding: 5px;
- color: var(--on-secondary);
+ color: var(--on-primary);
&:hover {
cursor: pointer;
diff --git a/src/app/components/shared/room-list/room-list.component.html b/src/app/components/shared/room-list/room-list.component.html
index ca95f9072427af76bf56ffa38df665f32a91697c..ba9f14fadb2f3392c9b9313755dfe28583be72e2 100644
--- a/src/app/components/shared/room-list/room-list.component.html
+++ b/src/app/components/shared/room-list/room-list.component.html
@@ -13,7 +13,7 @@
</mat-expansion-panel>
<mat-expansion-panel *ngFor="let room of rooms" class="matPanel">
<mat-expansion-panel-header class="matPanelListHeader">
- <button mat-mini-fab routerLink="/{{ baseUrl }}/room/{{ room.shortId }}" (click)="setCurrentRoom(room.shortId)">
+ <button mat-flat-button routerLink="/{{ baseUrl }}/room/{{ room.shortId }}" (click)="setCurrentRoom(room.shortId)">
<mat-icon>input</mat-icon>
</button>
<mat-panel-title class="panelTitle">
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 66f62efcb56028758a847c00e63126aaecc4a9bf..a1526bc771692132ce84bff680ad4f485d4c79c4 100644
--- a/src/app/components/shared/room-list/room-list.component.scss
+++ b/src/app/components/shared/room-list/room-list.component.scss
@@ -1,6 +1,7 @@
button {
margin-right: 10px;
- color: var(--primary);
+ background-color: var(--secondary);
+ color: var(--on-secondary);
}
.mat-expansion-panel-header-description {
@@ -10,19 +11,19 @@ button {
.matPanel {
- background-color: var(--grey);
+ background-color: var(--primary-variant);
margin-bottom: 5px;
- color: black!important;
+ color: var(--on-surface)!important;
}
#matPanelHeader {
- background-color: var(--grey-light);
+ background-color: var(--primary-variant);
margin-bottom: 5px;
- color: white;
+ color: var(--on-surface);
}
.matPanelListHeader {
- background-color: var(--grey) !important;
+ background-color: var(--primary-variant) !important;
}
mat-panel-title {
@@ -33,12 +34,12 @@ mat-panel-title {
.headerTitle {
width: 8%;
- color: var(--on-background)!important;
+ color: var(--on-surface)!important;
}
.panelTitle {
width: 8%;
- color: black!important;
+ color: var(--on-surface)!important;
}
diff --git a/src/theme/dark-theme/darkTheme.const.ts b/src/theme/dark-theme/darkTheme.const.ts
index ed12749df331c78141b5c6808475e181f29a2848..dca8535d27dcefba290e00ce47346c06797431f0 100644
--- a/src/theme/dark-theme/darkTheme.const.ts
+++ b/src/theme/dark-theme/darkTheme.const.ts
@@ -1,7 +1,7 @@
export const dark = {
'--primary' : '#bb86fc',
- '--primary-variant': '#3700b3',
+ '--primary-variant': '#616161',
'--secondary': '#03dac6',
'--secondary-variant': '#6f74dd',