Merge branch '215-comment-view-is-over-the-timestamp-in-student-mobile-view' into 'master'

Resolve "comment view is over the timestamp in student mobile view" + 2 more fixes

Closes #215, #218, and #216

See merge request !192

src/app/components/shared/comment-list/comment-list.component.html

@@ -60,9 +60,7 @@
   </mat-menu>
 </div>
 
-<mat-card class="outer-card" *ngIf="showComments().length > 0">
-  <app-comment *ngFor="let current of showComments()" [comment]="current"></app-comment>
-</mat-card>
+<app-comment *ngFor="let current of showComments()" [comment]="current"></app-comment>
 
 <div *ngIf="comments.length < 1" fxLayout="row" fxLayoutAlign="center center" class="no-comments">
   <h4>{{ 'comment-page.no-comments' | translate }}</h4>

src/app/components/shared/comment-list/comment-list.component.scss

-.outer-card {
-  margin-bottom: 10px;
-  background-color: var(--primary);
-}
-
 app-comment {
   overflow: auto;
   overflow-wrap: break-word;
@@ -29,7 +24,7 @@ input {
 #search-container {
   border-radius: 5px;
   background-color: var(--primary-variant);
-  margin-bottom: 10px;
+  margin-bottom: 2%;
 }
 
 .search-icon {

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

@@ -3,22 +3,22 @@
   <div fxLayout="column">
     <div fxLayout="row">
       <span class="fill-remaining-space"></span>
-      <div class="date">
+      <div fxLayout="row" class="date">
         <div *ngIf="language === 'de'; else englishDate">
-          {{comment.timestamp | date: ' HH:mm:ss '}}Uhr,{{comment.timestamp | date: ' M.d.yy'}}
+          {{comment.timestamp | date: ' HH:mm '}}
         </div>
         <ng-template #englishDate>
-          {{comment.timestamp | date: 'h:mm:ss a, M/d/yy'}}
+          {{comment.timestamp | date: 'h:mm a'}}
         </ng-template>
       </div>
-      <button mat-icon-button *ngIf="comment.correct || !isStudent" [disabled]="isStudent" (click)="setCorrect(comment)">
+      <button mat-icon-button [disabled]="isStudent" (click)="setCorrect(comment)">
         <mat-icon [ngClass]="{true : 'correct-icon', false: 'not-marked'}[comment.correct]">check_circle</mat-icon>
       </button>
-      <button mat-icon-button *ngIf="comment.favorite || !isStudent" [disabled]="isStudent"
+      <button mat-icon-button [disabled]="isStudent"
               (click)="setFavorite(comment)">
-        <mat-icon [ngClass]="{true: 'favorite-icon', false: 'not-marked'}[comment.favorite]">favorite_border</mat-icon>
+        <mat-icon [ngClass]="{true: 'favorite-icon', false: 'not-marked'}[comment.favorite]">favorite</mat-icon>
       </button>
-      <button mat-icon-button *ngIf="comment.read || !isStudent" [disabled]="isStudent" (click)="setRead(comment)">
+      <button mat-icon-button [disabled]="isStudent" (click)="setRead(comment)">
         <mat-icon class="icon" [ngClass]="{'read-icon': comment.read, 'not-marked' : !comment.read}">visibility
         </mat-icon>
       </button>

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

 #comment-card {
-  margin-bottom: 20px;
+  margin-bottom: 3%;
   background-color: var(--surface);
   cursor: pointer;
-  padding-bottom: 10px;
-  padding-top: 10px;
-  padding-right: 5px;
+  padding: 1.5% 1.5% 3% 3%;
   transition: background-color 1s linear;
 }
 
@@ -29,7 +27,7 @@ mat-card-content > :first-child {
 }
 
 .not-marked {
-  color: var(--on-surface);
+  color: var(--background);
 }
 
 .correct-icon {
@@ -41,7 +39,7 @@ mat-card-content > :first-child {
 }
 
 .favorite-icon {
-  color: var(--yellow);
+  color: var(--red);
 }
 
 h2 {
@@ -57,8 +55,6 @@ h2 {
   font-size: 140%;
   max-height: 120px;
   overflow: auto;
-  padding-left: 2%;
-  padding-right: 2%;
   color: var(--on-surface)
 }
 
@@ -68,10 +64,9 @@ h2 {
 
 .date {
   padding-top: 10px;
-  margin-left: 2%;
-  opacity: 0.4;
+  opacity: 0.7;
   position: absolute;
-  color: var(--on-surface)
+  color: var(--on-surface);
 }
 
 .highlighted {
@@ -82,4 +77,3 @@ h2 {
 .highlighted * {
   color: var(--on-secondary)!important;
 }
-

src/theme/default-theme/defaultTheme.const.ts

@@ -15,10 +15,10 @@ export const arsnova = {
   '--on-background': '#000000',
   '--on-surface': '#000000',
 
-  '--green': '#81c784',
-  '--red': '#FF8A80',
-  '--yellow': '#FFD54F',
-  '--blue': '#3f51b5',
+  '--green': '#80bb26',
+  '--red': '#9c132d',
+  '--yellow': '#f5aa01',
+  '--blue': '#002878',
   '--purple': '#9c27b0',
   '--light-green': '#80ba24',
   '--grey': '#BDBDBD',