updated theming to be more consistent with other crucible apps

angular.json

@@ -28,7 +28,8 @@
             ],
             "styles": [
               "src/styles/styles.scss",
-              "./node_modules/bootstrap/scss/bootstrap-utilities.scss"
+              "./node_modules/bootstrap/scss/bootstrap-utilities.scss",
+              "src/assets/vmware-wmks/css/wmks-all.css"
             ],
             "stylePreprocessorOptions": {
               "includePaths": [

src/app/components/shared/send-text-dialog/send-text-dialog.component.html

@@ -16,6 +16,7 @@
       </button>
       <h3>{{ title }}</h3>
     </div>
+
     <mat-menu #advancedTextMenu="matMenu">
       <button
         type="button"
@@ -27,7 +28,7 @@ <h3>{{ title }}</h3>
         <span
           [matTooltip]="
             'Delay between sending each line. 
-               Go slower if paste errors are occurring'
+                 Go slower if paste errors are occurring'
           "
           matTooltipPosition="above"
         >
@@ -49,14 +50,16 @@ <h3>{{ title }}</h3>
         }
       </mat-menu>
     </mat-menu>
-    <textarea
-      matInput
-      class="text-area"
-      matInput
-      tabIndex="1"
-      name="textToSend"
-      [(ngModel)]="textToSend"
-    ></textarea>
+    <mat-form-field>
+      <textarea
+        matInput
+        class="text-area"
+        tabIndex="1"
+        name="textToSend"
+        [(ngModel)]="textToSend"
+      ></textarea>
+    </mat-form-field>
+
     <mat-dialog-actions class="w-100 pb-3 justify-content-evenly">
       <button mat-stroked-button (click)="close()" tabIndex="2">Cancel</button>
       <button mat-stroked-button (click)="send()" tabindex="3">Send</button>

src/app/components/shared/send-text-dialog/send-text-dialog.component.scss

@@ -21,3 +21,7 @@
   box-sizing: border-box;
   resize: both;
 }
+
+::ng-deep .mat-mdc-form-field-infix {
+  width: auto !important;
+}

src/app/components/shared/send-text-dialog/send-text-dialog.component.ts

@@ -9,7 +9,7 @@ import {
   MatDialogActions,
 } from '@angular/material/dialog';
 import { ComnSettingsService } from '@cmusei/crucible-common';
-import { MatInput } from '@angular/material/input';
+import { MatFormField, MatInput } from '@angular/material/input';
 import { MatTooltip } from '@angular/material/tooltip';
 import { MatIcon } from '@angular/material/icon';
 import { MatMenuTrigger, MatMenu, MatMenuItem } from '@angular/material/menu';
@@ -33,6 +33,7 @@ import { FormsModule } from '@angular/forms';
     MatInput,
     MatDialogActions,
     MatButton,
+    MatFormField,
   ],
 })
 export class SendTextDialogComponent {

src/styles/_theme.scss

@@ -5,9 +5,53 @@
 // (imported above). For each palette, you can optionally specify a default, lighter, and darker
 // hue. Available color palettes: https://material.io/design/color/
 
+@use 'sass:map';
+@use '@angular/material' as mat;
+
+$custom-typography: mat.define-typography-config(
+  $font-family: '"Open Sans", sans-serif',
+);
+@include mat.all-component-typographies($custom-typography);
+
+$dark-primary-text: rgba(black, 0.87);
+$light-primary-text: white;
+
+$cmu-palette: (
+  50: #ff3838,
+  100: #ebb3b3,
+  200: #e00,
+  300: #d00,
+  400: #c00,
+  500: #b00,
+  600: #a00,
+  700: #900,
+  800: #800,
+  900: #700,
+  A100: #a60,
+  A200: #067,
+  A400: #247,
+  A700: #085,
+  contrast: (
+    50: $dark-primary-text,
+    100: $dark-primary-text,
+    200: $dark-primary-text,
+    300: $dark-primary-text,
+    400: $dark-primary-text,
+    500: $light-primary-text,
+    600: $light-primary-text,
+    700: $light-primary-text,
+    800: $light-primary-text,
+    900: $light-primary-text,
+    A100: $dark-primary-text,
+    A200: $light-primary-text,
+    A400: $light-primary-text,
+    A700: $light-primary-text,
+  ),
+);
+
 // Light theme
-$light-primary: mat.define-palette(mat.$red-palette);
-$light-accent: mat.define-palette(mat.$blue-palette, A200, A100, A400);
+$light-primary: mat.define-palette($cmu-palette);
+$light-accent: mat.define-palette($cmu-palette, A400, A200, A700);
 
 // The warn palette is optional (defaults to red).
 $light-warn: mat.define-palette(mat.$red-palette);
@@ -24,11 +68,19 @@ $light-theme: mat.define-light-theme(
   )
 );
 
-// Dark theme
-$dark-primary: mat.define-palette(mat.$red-palette);
-$dark-accent: mat.define-palette(mat.$blue-palette, A200, A100, A400);
+$light-theme-overrides: (
+  'color': (
+    'background': (
+      'background': #f1f1f2,
+    ),
+  ),
+);
 
-// The warn palette is optional (defaults to red).
+$light-theme: map.deep-merge($light-theme, $light-theme-overrides);
+
+// Dark theme
+$dark-primary: mat.define-palette($cmu-palette);
+$dark-accent: mat.define-palette($cmu-palette, A400, A200, A700);
 $dark-warn: mat.define-palette(mat.$red-palette);
 
 // Create the theme object. A theme consists of configurations for individual
@@ -43,6 +95,9 @@ $dark-theme: mat.define-dark-theme(
   )
 );
 
+$dark-theme-overrides: ();
+$dark-theme: map.deep-merge($dark-theme, $dark-theme-overrides);
+
 @include mat.all-component-themes($light-theme);
 
 .dark-theme {

src/styles/styles.scss

@@ -53,5 +53,4 @@ body {
 }
 body {
   margin: 0;
-  font-family: Roboto, 'Helvetica Neue', sans-serif;
 }