Give token columns alternating background colors

src/app/components/creator/_dialogs/bonus-token/bonus-token.component.html

 <div mat-dialog-content xmlns="http://www.w3.org/1999/html">
-  <!--token for bonuspoints-->
   <h2 class="oldtypo-h2">{{'room-page.bonus-token-header' | translate }}</h2>
-  <!--no bonuspoints-->
   <h3 class="oldtypo-h3">{{room.name}} - {{room.shortId.slice(0, 4)}} {{room.shortId.slice(4, 8)}}</h3>
   <mat-divider></mat-divider>
   <div *ngIf="bonusTokens.length >= 1">
-    <div fxLayout="row" *ngFor="let bonusToken of bonusTokens; index as i">
+    <div fxLayout="row" *ngFor="let bonusToken of bonusTokens; index as i" class="token">
       <p tabindex="0">
         {{bonusToken.token}}
       </p>

src/app/components/creator/_dialogs/bonus-token/bonus-token.component.scss

@@ -4,7 +4,6 @@ p {
 }
 
 .mat-icon-button {
-  margin-top: 5px;
   color: var(--red);
 }
 
@@ -14,3 +13,10 @@ p {
   background-color: var(--red);
   color: var(--on-secondary);
 }
+
+.token {
+  padding-left: 3%;
+  &:nth-child(even) {
+    background-color: var(--alt-dialog);
+  }
+}

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

@@ -10,6 +10,7 @@ export const dark = {
   '--surface': '#212121',
   '--dialog': '#37474f',
   '--cancel': '#26343c',
+  '--alt-dialog': '#455a64',
 
   '--on-primary': '#000000',
   '--on-secondary': '#000000',

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

@@ -9,6 +9,7 @@ export const highcontrast = {
   '--background': '#141414',
   '--surface': '#1e1e1e',
   '--dialog': '#37474f',
+  '--alt-dialog': '#455a64',
 
   '--on-primary': '#141414',
   '--on-secondary': '#141414',

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

@@ -10,6 +10,7 @@ export const arsnova = {
   '--surface': '#FFFFFF',
   '--dialog': '#FFFFFF',
   '--cancel': '#263238',
+  '--alt-dialog': '#eeeeee',
 
   '--on-primary': '#ffffff',
   '--on-secondary': '#FFFFFF',

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

@@ -9,6 +9,7 @@ export const purple = {
   '--background': 'beige',
   '--surface': 'white',
   '--dialog': 'white',
+  '--alt-dialog': '#eeeeee',
 
   '--on-primary': 'white',
   '--on-secondary': 'white',