Adds border color for unmarked questions(grey) and answered questions(primary)...

Adds border color for unmarked questions(grey) and answered questions(primary) and their respective priorities

src/app/components/home/home-page/home-page.component.html

@@ -31,7 +31,8 @@
       </mat-card-content>
     </mat-card>
   </div>
-
+  
+  <!--
   <h2>
     <span class="feedback">
       <a class="info"
@@ -42,6 +43,7 @@
       </a>
     </span>
   </h2>
+  -->
 
   <button id="live_announcer-button"
           tabIndex="-1"

src/app/components/home/home-page/home-page.component.scss

 .outer {
   width: 80%;
   max-width: 300px;
-  background-color: var(--surface);
+  background-color: var(--background);
+  box-shadow: none;
 }
 
 .main-heading-primary {

src/app/components/home/new-landing/new-landing.component.scss

@@ -4,8 +4,8 @@
   border-radius: 5px;
   margin: 10% 0 2% 0;
   font-size: large;
-  background-color: var(--surface);
-  color: var(--on-surface);
+  background-color: var(--background);
+  color: var(--on-background);
 }
 
 .add {

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

 <mat-card id="comment-card" class="border"
           [ngClass]="{'highlighted': comment.highlighted, '': !comment.highlighted,
           'moderator': moderator,
+          'border-notMarked': user !== undefined && comment.correct === 0 && comment.bookmark === false && comment.favorite === false && !comment.answer && comment.creatorId !== user.id,
+          'border-ownQuestion': user !== undefined && comment.creatorId === user.id && comment.correct === 0 && comment.bookmark === false && comment.favorite === false && !comment.answer,
           'border-correct': comment.correct === 1,
-          'border-wrong': comment.correct === 2
+          'border-wrong': comment.correct === 2, 
+          'border-answer': comment.answer && comment.bookmark === false && comment.favorite === false,
+          'border-bookmark': comment.bookmark === true, 
+          'border-favorite': comment.favorite === true
           }"
           [@slide]="slideAnimationState"
           (@slide.done)="changeSlideState()">

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

@@ -52,7 +52,7 @@ mat-card-content > :first-child {
 }
 
 .bookmark-icon {
-  color: var(--red);
+  color: var(--magenta);
 }
 
 .wrong-icon {
@@ -139,6 +139,21 @@ mat-card-content > :first-child {
   &-wrong{
     @include card-box-shadow(var(--red));
   }
+  &-bookmark{
+    @include card-box-shadow(var(--magenta));
+  }
+  &-favorite{
+    @include card-box-shadow(var(--yellow));
+  }
+  &-notMarked{
+    @include card-box-shadow(var(--grey));
+  }
+  &-answer{
+    @include card-box-shadow(var(--primary));
+  }
+  &-ownQuestion{
+    @include card-box-shadow(var(--purple));
+  }
   &-bonus{
     @include card-box-shadow(var(--yellow));
   }

src/theme/blue-theme/blueTheme.const.ts

@@ -23,8 +23,9 @@ export const blue = {
   '--yellow': '#FFD54F',
   '--blue': '#3f51b5',
   '--purple': '#9c27b0',
+  '--magenta': '#ea0a8e',
   '--light-green': '#80ba24',
-  '--grey': '#BDBDBD',
+  '--grey': 'slategrey',
   '--grey-light': '#EEEEEE',
   '--black': '#212121',
   '--moderator': 'darkred'

src/theme/dark-theme/darkTheme.const.ts

@@ -26,8 +26,9 @@ export const dark = {
   '--yellow': 'yellow',
   '--blue': '#3f51b5',
   '--purple': '#9c27b0',
+  '--magenta': '#ea0a8e',
   '--light-green': '#80ba24',
-  '--grey': '#BDBDBD',
+  '--grey': 'slategrey',
   '--grey-light': '#9E9E9E',
   '--black': 'black',
   '--moderator': 'maroon'

src/theme/high-contrast-theme/highContrastTheme.const.ts

@@ -26,6 +26,7 @@ export const highcontrast = {
   '--yellow': '#e9d533',
   '--blue': '#3833e9',
   '--purple': '#e933e2',
+  '--magenta': '#ea0a8e',
   '--light-green': '#33e98d',
   '--grey': '#7e7e7e',
   '--grey-light': '#9c9c9c',

src/theme/light-theme/light-theme.ts

@@ -26,8 +26,9 @@ export const arsnova = {
   '--yellow': 'red',
   '--blue': '#002878',
   '--purple': '#9c27b0',
+  '--magenta': '#ea0a8e',
   '--light-green': 'lightgreen',
-  '--grey': '#BDBDBD',
+  '--grey': 'slategrey',
   '--grey-light': '#EEEEEE',
   '--black': '#000000',
   '--moderator': 'lightsalmon'

src/theme/purple-theme/purpleTheme.const.ts

@@ -26,8 +26,9 @@ export const purple = {
   '--yellow': 'red',
   '--blue': 'blue',
   '--purple': 'purple',
+  '--magenta': '#ea0a8e',
   '--light-green': 'lightgreen',
-  '--grey': 'grey',
+  '--grey': 'slategrey',
   '--grey-light': 'lightgrey',
   '--black': 'black',
   '--moderator': 'lightsalmon'