small style changes, presentation button only for desktop, fix authorization bug

projects/ars/src/lib/style/style.const.ts

@@ -2,6 +2,7 @@ export const light = {
   'ars-header-color': '#212121',
   'ars-paragraph-color': '#3f3f3f',
   'ars-button-color': '#000000',
+  'ars-button-color-light': '#727272',
   'ars-background-color': '#fcfcfc',
   'ars-foreground-color': '#FFFFFF',
   'ars-border-color': '#DDDDDD'
@@ -11,6 +12,7 @@ export const dark = {
   'ars-header-color': '#FAFAFA',
   'ars-paragraph-color': '#BDBDBD',
   'ars-button-color': '#FFFFFF',
+  'ars-button-color-light': '#909090',
   'ars-background-color': '#212121',
   'ars-foreground-color': '#292929',
   'ars-border-color': '#2E2E2E'

src/app/components/shared/header/header.component.html

@@ -13,9 +13,10 @@
         fxLayoutAlign="center center">
       {{cTime}}
     </h2>
-    <span class="fill-remaining-space"></span>
-    <button *ngIf="router.url.includes('comments')" mat-button routerLink="participant/room/{{shortId}}/comments/questionwall">
-      <span>Presentation</span>
+    <span class="fill-remaining-space"
+          *ngIf="router.url.includes('comments') && deviceType === 'desktop'"></span>
+    <button *ngIf="router.url.includes('comments') && deviceType === 'desktop'" mat-button routerLink="participant/room/{{shortId}}/comments/questionwall">
+      <span class="oldtypo-h3">Presentation</span>
     </button>
     <span class="fill-remaining-space"
           *ngIf="router.url.includes('comments') && user.role === 3 && deviceType === 'desktop'"></span>

src/app/components/shared/questionwall/QuestionWallComment.ts

@@ -14,7 +14,6 @@ export class QuestionWallComment {
   }
 
   public update() {
-    console.log('update');
   }
 
   public updateTimeAgo() {

src/app/components/shared/questionwall/question-wall/question-wall.component.html

@@ -10,8 +10,10 @@
   <ars-fill ars-flex-box>
     <ars-fill style="overflow:hidden;">
       <ars-row [overflow]="'auto'">
-        <p class="questionwall-present" *ngIf="commentFocus">{{commentFocus.comment.body}}</p>
-        <p class="questionwall-present" *ngIf="!commentFocus">Questionwall. Click on a comment.</p>
+        <ng-container *ngIf="commentFocus">
+          <p class="questionwall-present-timestamp">{{commentFocus.timeAgo}}</p>
+          <p class="questionwall-present">{{commentFocus.comment.body}}</p>
+        </ng-container>
       </ars-row>
     </ars-fill>
     <ars-col [width]="450" [overflow]="'auto'" class="questionwall-list" #colComponent>
@@ -38,7 +40,7 @@
             </ars-row>
             <ars-row [height]="50">
               <ars-style-btn-material style="width:100%;height:100%;" ars-flex-box>
-                <ars-col ars-btn-wrp [xp]="16" [extra]="true">
+                <ars-col ars-btn-wrp [xp]="16" [extra]="true" class="questionwall-comment-btn">
                   <button ars-btn (click)="likeComment(comment)"><i>thumb_up</i><p>{{comment.comment.score}}</p></button>
                   <button ars-btn (click)="dislikeComment(comment)"><i>thumb_down</i></button>
                 </ars-col>

src/app/components/shared/questionwall/question-wall/question-wall.component.scss

@@ -23,18 +23,30 @@
     &-comment{
       &-border{
         &-on{
-          box-shadow:inset 0px 0px 0px 1px var(--ars-paragraph-color);
+          box-shadow:inset 0px 0px 0px 1px var(--ars-button-color-light);
         }
         &-off{
-          box-shadow:inset 0px 0px 0px 0px var(--ars-paragraph-color);
+          box-shadow:inset 0px 0px 0px 0px var(--ars-button-color-light);
         }
       }
       &-timestamp{
         color:var(--ars-paragraph-color);
+        font-size:14px;
       }
       &-body{
         hyphens:auto;
-        color:var(--ars-paragraph-color);
+        word-break:break-word;
+        color:var(--ars-header-color);
+        line-height:22px;
+        white-space:normal;
+      }
+      &-btn{
+        >button>*{
+          color:var(--ars-button-color-light);
+        }
+        >button:hover>*{
+          color:var(--ars-button-color);
+        }
       }
       &-notification{
         font-size:12px;
@@ -51,8 +63,14 @@
     }
     &-present{
       font-size:45px;
-      padding:32px;
+      padding:16px 32px 0 32px;
       color:var(--ars-header-color);
+      word-break:break-word;
+      &-timestamp{
+        font-size:18px;
+        padding:32px 32px 0 32px;
+        color:var(--ars-paragraph-color);
+      }
     }
     &-screen{
       background-color:var(--ars-background-color);

src/app/components/shared/questionwall/question-wall/question-wall.component.ts

@@ -49,7 +49,7 @@ export class QuestionWallComponent implements OnInit, AfterViewInit, OnDestroy {
   }
 
   ngOnInit(): void {
-    // StyleDebug.border('c');
+    StyleDebug.border('c');
     this.commentService.getAckComments(this.roomId).subscribe(e => {
       e.sort((a, b) => new Date(a.timestamp).getTime() - new Date(b.timestamp).getTime());
       e.forEach(c => this.comments.push(new QuestionWallComment(c, true)));

src/app/components/shared/shared-routing.module.ts

@@ -8,8 +8,8 @@ const routes: Routes = [
   {
     path: 'room/:shortId/comments/questionwall',
     component: QuestionWallComponent,
-    canActivate: [AuthenticationGuard],
-    data: { roles: [UserRole.CREATOR,
+    data: { roles: [
+        UserRole.CREATOR,
         UserRole.EDITING_MODERATOR,
         UserRole.EXECUTIVE_MODERATOR,
         UserRole.PARTICIPANT] }