Highlight Questionwall button, add usernumber to questions

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

@@ -15,8 +15,10 @@
     </h2>
     <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">Question Focus</span>
+    <button *ngIf="router.url.includes('comments') && deviceType === 'desktop'"
+            mat-raised-button class="question-focus-btn" routerLink="participant/room/{{shortId}}/comments/questionwall">
+      <mat-icon svgIcon="beamer"></mat-icon>
+      <span class="question-focus-btn-txt">Question Focus</span>
     </button>
     <span class="fill-remaining-space"
           *ngIf="router.url.includes('comments') && user.role === 3 && deviceType === 'desktop'"></span>

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

@@ -51,3 +51,14 @@ svg {
   -webkit-filter: invert(100%); /* safari 6.0 - 9.0 */
   filter: invert(100%);
 }
+
+.question-focus-btn{
+  background-color:var(--primary);
+  *{
+    color:var(--on-primary);
+  }
+}
+
+.question-focus-btn-txt{
+  padding-left:6px;
+}

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

@@ -27,8 +27,17 @@
       <ars-row class="questionwall-present-box-outer">
         <div class="questionwall-present-box-inner">
           <ng-container *ngIf="commentFocus">
-            <h2 class="questionwall-present-timestamp">{{commentFocus.timeAgo}}</h2>
-            <p class="questionwall-present">{{commentFocus.comment.body}}</p>
+            <ars-row class="questionwall-present-meta">
+              <ars-col>
+                <h2 class="questionwall-present-meta-user">#{{commentFocus.comment.userNumber}}</h2>
+              </ars-col>
+              <ars-col>
+                  <h2 class="questionwall-present-meta-timestamp">{{commentFocus.timeAgo}}</h2>
+              </ars-col>
+            </ars-row>
+            <ars-row>
+              <p class="questionwall-present">{{commentFocus.comment.body}}</p>
+            </ars-row>
           </ng-container>
           <ng-container *ngIf="!commentFocus">
             <p class="questionwall-present-introduction-title">{{'question-wall.intro-title' | translate}}</p>
@@ -48,6 +57,9 @@
             <ars-row ars-flex-box
                      (click)="focusComment(comment)"
                      style="box-sizing:border-box;padding:16px;cursor:pointer">
+              <ars-col>
+                <p class="questionwall-comment-user">#{{comment.comment.userNumber}}</p>
+              </ars-col>
               <ars-col>
                 <p class="questionwall-comment-timestamp">{{comment.timeAgo}}</p>
               </ars-col>

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

@@ -33,6 +33,11 @@
         color:var(--ars-paragraph-color);
         font-size:14px;
       }
+      &-user{
+        color:var(--ars-header-color);
+        font-size:14px;
+        padding-right:8px;
+      }
       &-body{
         hyphens:auto;
         word-break:break-word;
@@ -78,10 +83,21 @@
           flex-shrink:1;
         }
       }
-      &-timestamp{
-        font-size:18px;
-        padding:32px 32px 0 32px;
-        color:var(--ars-paragraph-color);
+      &-meta{
+        padding-top:16px;
+        &-user{
+          font-family:Roboto, 'sans-serif';
+          font-size:18px;
+          padding-left:32px;
+          padding-right:16px;
+          color:var(--ars-header-color);
+        }
+        &-timestamp{
+          font-family:Roboto, 'sans-serif';
+          font-size:18px;
+          font-weight:400;
+          color:var(--ars-paragraph-color);
+        }
       }
       &-introduction{
         &-title{