Changes the primary palette for dark theme

- Added a custom palette (`#c31c23`)
- Set the new primary palette for dark theme

Changes some styles depending on theme

- Removed hard-coded colors
- Set color depending on theme

Prettified

client/src/app/shared/components/projection-dialog/projection-dialog.component.html

@@ -8,7 +8,9 @@
         <mat-checkbox [checked]="isProjectorSelected(projector)" (change)="toggleProjector(projector)">
             {{ projector.name | translate }}
         </mat-checkbox>
-        <span *ngIf="isProjectedOn(projector)" class="right"> <mat-icon>videocam</mat-icon> </span>
+        <span *ngIf="isProjectedOn(projector)" class="right">
+            <mat-icon matTooltip="{{ 'Is already projected' | translate }}" matTooltipPosition="above">videocam</mat-icon>
+        </span>
     </div>
 
     <mat-divider></mat-divider>

client/src/app/shared/components/projector-button/projector-button.component.scss

@@ -1,18 +1,18 @@
-.projector-inactive {
-    background-color: white !important;
+@import '~@angular/material/theming';
 
-    mat-icon {
-        color: grey !important;
+@mixin os-projector-button-style($theme) {
+    $primary: map-get($theme, primary);
+    $accent: map-get($theme, accent);
+    $warn: map-get($theme, warn);
+    $contrast: map-get($primary, contrast);
+
+    .mat-mini-fab.projector-inactive {
+        color: mat-color($contrast, A200) !important;
+        background-color: mat-color($contrast, 500) !important;
+    }
+
+    .mat-menu-item.projector-active,
+    .projector-active > .mat-icon {
+        color: mat-color($primary) !important;
     }
 }
-
-/** TODO: Take this from the accent color. Make the hovering visible */
-
-.projector-active {
-    background-color: #03a9f4;
-    color: white !important;
-}
-
-button.mat-menu-item.projector-active:hover {
-    background-color: #03a9f4;
-}

client/src/app/site/config/components/config-field/config-field.component.html

@@ -44,7 +44,7 @@
             <div class="config-form-group" *ngIf="isExcludedType(configItem.inputType)">
                 <div *ngIf="configItem.inputType === 'boolean'">
                     <mat-checkbox formControlName="value">{{ configItem.label | translate }}</mat-checkbox>
-                    <div class="hint" *ngIf="configItem.helpText && !error">{{ configItem.helpText | translate }}</div>
+                    <mat-hint class="hint" *ngIf="configItem.helpText && !error">{{ configItem.helpText | translate }}</mat-hint>
                     <div class="error" *ngIf="error">{{ error }}</div>
                 </div>
 
@@ -52,7 +52,7 @@
                 <div *ngIf="configItem.inputType === 'text'">
                     <mat-form-field>
                         <textarea rows="10" matInput placeholder="{{ configItem.label | translate }}" [value]="translatedValue"></textarea>
-                        <div class="hint" *ngIf="configItem.helpText && !error">{{ configItem.helpText | translate }}</div>
+                        <mat-hint class="hint" *ngIf="configItem.helpText && !error">{{ configItem.helpText | translate }}</mat-hint>
                     </mat-form-field>
                 </div>
 

client/src/app/site/config/components/config-field/config-field.component.scss

@@ -13,18 +13,6 @@ input[type='color'] {
     margin-bottom: 15px;
 }
 
-/* Custom hint and error classes for the checkbox. Same values as .mat-hint and -mat-error */
-.hint,
-.error {
-    font-size: 75%;
-}
-.hint {
-    color: rgba(0, 0, 0, 0.54);
-}
-.error {
-    color: #f44336;
-}
-
 .config-field-wrapper {
     width: 100%;
     display: flex;

client/src/app/site/users/components/group-list/group-list.component.scss

@@ -22,7 +22,6 @@ table {
 .hint-text {
     padding-top: 30px;
     padding-left: 25px;
-    background-color: #ffffff; // put in theme later
 }
 
 .new-group-form {

client/src/assets/styles/global-components-style.scss

@@ -27,8 +27,22 @@
         color: mat-color($primary);
     }
 
+    .projected .mat-icon {
+        color: mat-color($primary);
+    }
+
     //custom table header for search button, filtering and more. Used in ListViews
     .custom-table-header {
         background: mat-color($background, background);
     }
+
+    /* Custom hint and error classes. Same values as .mat-hint and -mat-error */
+    .hint,
+    .error {
+        font-size: 75%;
+        display: block;
+    }
+    .error {
+        color: mat-color($warn);
+    }
 }

client/src/assets/styles/openslides-dark-theme.scss

@@ -1,6 +1,42 @@
-$openslides-primary: mat-palette($mat-light-blue, 500, 100, 700);
-$openslides-accent: mat-palette($mat-orange, 700, 300, 900);
-$openslides-warn: mat-palette($mat-red, 600, 500, 700);
+// Defines the primary palette using the dark theme
+$openslides-primary-red: (
+    50 : #f8e4e5,
+    100 : #edbbbd,
+    200 : #e18e91,
+    300 : #d56065,
+    400 : #cc3e44,
+    500 : #c31c23,
+    600 : #bd191f,
+    700 : #b5141a,
+    800 : #ae1115,
+    900 : #a1090c,
+    A100 : #ffcece,
+    A200 : #ff9b9b,
+    A400 : #ff6869,
+    A700 : #ff4e50,
+    contrast: (
+        50 : #000000,
+        100 : #000000,
+        200 : #000000,
+        300 : #000000,
+        400 : #ffffff,
+        500 : #ffffff,
+        600 : #ffffff,
+        700 : #ffffff,
+        800 : #ffffff,
+        900 : #ffffff,
+        A100: #404040,
+        A200 : #303030,
+        A400 : #262626,
+        A700 : #1a1a1a
+    )
+);
+
+// TODO: /projectors/detail/*
+
+$openslides-primary: mat-palette($openslides-primary-red, 500, 300, 900);
+$openslides-accent: mat-palette($openslides-primary-red, 500, 300, 900);
+$openslides-warn: mat-palette($mat-orange, 700, 300, 900);
 
 $openslides-dark-theme: mat-dark-theme(
     $openslides-primary,

client/src/styles.scss

@@ -10,6 +10,7 @@
 /** Import the component-related stylesheets here */
 @import './app/site/site.component.scss-theme.scss';
 @import './assets/styles/global-components-style.scss';
+@import './app/shared/components/projector-button/projector-button.component.scss';
 
 /** fonts */
 @import './assets/styles/fonts.scss';
@@ -19,6 +20,7 @@
 @mixin openslides-components-theme($theme) {
     @include os-site-theme($theme);
     @include os-components-style($theme);
+    @include os-projector-button-style($theme);
     /** More components are added here */
 }
 
@@ -505,10 +507,6 @@ button.mat-menu-item.selected {
     color: rgba(0, 0, 0, 0.87) !important;
 }
 
-.projected {
-    background-color: lightblue;
-}
-
 /* TODO: move to site.component.scss-theme.scss (does not work currently) */
 
 /* make the .user-menu expansion panel look like the nav-toolbar above */