diff --git a/src/app/components/shared/header/header.component.html b/src/app/components/shared/header/header.component.html index fa0aa95d281debe2340ef6e77b142c8cd9571427..a9a2ef54729da2b39c3695f3266d54363ccae1cb 100644 --- a/src/app/components/shared/header/header.component.html +++ b/src/app/components/shared/header/header.component.html @@ -17,7 +17,7 @@ *ngIf="router.url.includes('comments') && deviceType === 'desktop'"></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> + <mat-icon>person</mat-icon> <span class="question-focus-btn-txt">{{'header.question-wall' | translate}}</span> </button> <span class="fill-remaining-space" diff --git a/src/app/components/shared/questionwall/question-wall/question-wall.component.html b/src/app/components/shared/questionwall/question-wall/question-wall.component.html index f4ad2b3c8254596e66e359d36f2565223c7e3167..21a2ebfd4ef0f53c837348c6764e12bb65862e86 100644 --- a/src/app/components/shared/questionwall/question-wall/question-wall.component.html +++ b/src/app/components/shared/questionwall/question-wall/question-wall.component.html @@ -28,12 +28,9 @@ <div class="questionwall-present-box-inner"> <ng-container *ngIf="commentFocus"> <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> + <i class="questionwall-icon questionwall-present-meta-icon">person</i> + <h2 class="questionwall-present-meta-user">{{commentFocus.comment.userNumber}}</h2> + <h2 class="questionwall-present-meta-timestamp">{{commentFocus.timeAgo}}</h2> </ars-row> <ars-row> <p class="questionwall-present">{{commentFocus.comment.body}}</p> @@ -57,10 +54,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> + <ars-col class="questionwall-comment-meta"> + <i class="questionwall-icon">person</i> + <p class="questionwall-comment-user">{{comment.comment.userNumber}}</p> <p class="questionwall-comment-timestamp">{{comment.timeAgo}}</p> </ars-col> <ars-fill></ars-fill> diff --git a/src/app/components/shared/questionwall/question-wall/question-wall.component.scss b/src/app/components/shared/questionwall/question-wall/question-wall.component.scss index 57493392f2e1d56ce639623d8cc40e0ab18f17bc..646ce06b12d0da419a874b4777ef4e9ae5df18ba 100644 --- a/src/app/components/shared/questionwall/question-wall/question-wall.component.scss +++ b/src/app/components/shared/questionwall/question-wall/question-wall.component.scss @@ -6,6 +6,16 @@ } .questionwall{ + &-icon{ + font-family:'Material Icons', serif; + font-weight:normal; + font-style:normal; + font-size:18px; + line-height:18px; + padding:0; + margin:0; + color:var(--ars-header-color); + } &-header{ background-color:var(--ars-foreground-color); border-bottom:solid 1px var(--ars-border-color); @@ -21,6 +31,11 @@ } } &-comment{ + &-meta{ + display:flex; + justify-content:start; + flex-direction:row; + } &-border{ &-on{ box-shadow:inset 0px 0px 0px 1px var(--ars-button-color-light); @@ -32,11 +47,13 @@ &-timestamp{ color:var(--ars-paragraph-color); font-size:14px; + line-height:18px; } &-user{ color:var(--ars-header-color); font-size:14px; padding-right:8px; + line-height:18px; } &-body{ hyphens:auto; @@ -85,10 +102,20 @@ } &-meta{ padding-top:16px; + display:flex; + justify-content:start; + flex-direction:row; + :first-child{ + padding-left:32px; + } + &-icon{ + font-size:20px; + line-height:20px; + } &-user{ font-family:Roboto, 'sans-serif'; font-size:18px; - padding-left:32px; + padding-left:4px; padding-right:16px; color:var(--ars-header-color); }