diff --git a/src/app/components/creator/_dialogs/bonus-token/bonus-token.component.html b/src/app/components/creator/_dialogs/bonus-token/bonus-token.component.html index 3bf0b8605c1b6c3fc196045eae5b6140756cf9cc..2885e815a821e7bfb574b190cfe655e5a1844105 100644 --- a/src/app/components/creator/_dialogs/bonus-token/bonus-token.component.html +++ b/src/app/components/creator/_dialogs/bonus-token/bonus-token.component.html @@ -1,11 +1,9 @@ <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> diff --git a/src/app/components/creator/_dialogs/bonus-token/bonus-token.component.scss b/src/app/components/creator/_dialogs/bonus-token/bonus-token.component.scss index 2018f95ee99b896f78c2c60bd8b7199dbdc4e3c3..1e2091da9fbea9af040b3cf645c85469f9efa7f8 100644 --- a/src/app/components/creator/_dialogs/bonus-token/bonus-token.component.scss +++ b/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); + } +} diff --git a/src/theme/dark-theme/darkTheme.const.ts b/src/theme/dark-theme/darkTheme.const.ts index 130616013da37340b0cb4c6db3f2e0cfe85f782f..a31c9635cb1776927528ef1f691e6e7a7be79558 100644 --- a/src/theme/dark-theme/darkTheme.const.ts +++ b/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', diff --git a/src/theme/high-contrast-theme/highContrastTheme.const.ts b/src/theme/high-contrast-theme/highContrastTheme.const.ts index 6725550d1e82525982fac4c8d6b259d51581db34..25307d294195f3b04ec7decb4832a42531d97103 100644 --- a/src/theme/high-contrast-theme/highContrastTheme.const.ts +++ b/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', diff --git a/src/theme/light-theme/light-theme.ts b/src/theme/light-theme/light-theme.ts index 147d6b82a7b15eb5af82f3e3b5491f5071fc5985..e6879ae1fb4fd35c4fb0a87b735ec99e8ffe4aac 100644 --- a/src/theme/light-theme/light-theme.ts +++ b/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', diff --git a/src/theme/purple-theme/purpleTheme.const.ts b/src/theme/purple-theme/purpleTheme.const.ts index 2c0ce318ab38606ce62bcea2dfdd67c101a42d94..287320618f6395be6075ad42e5da3374b8b51a02 100644 --- a/src/theme/purple-theme/purpleTheme.const.ts +++ b/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',