feat: update styling for textarea and add new modal size (#654)

Author: jake-bassett

projects/components/src/modal/modal-container.component.scss

@@ -26,6 +26,11 @@
     width: 640px;
   }
 
+  &.modal-size-large-tall {
+    height: 800px;
+    width: 640px;
+  }
+
   &.modal-size-medium-wide {
     height: 600px;
     width: 840px;

projects/components/src/modal/modal.ts

@@ -14,6 +14,7 @@ export const enum ModalSize {
   Small = 'small',
   Medium = 'medium',
   Large = 'large',
+  LargeTall = 'large-tall',
   MediumWide = 'medium-wide'
 }
 

projects/components/src/textarea/textarea.component.scss

@@ -0,0 +1,66 @@
+@import 'mixins';
+
+:host {
+  ::ng-deep {
+    &.mat-form-field {
+      display: block;
+      height: 100%;
+      width: 100%;
+    }
+
+    &.mat-focused {
+      .mat-form-field-label {
+        color: $gray-5;
+      }
+    }
+
+    .mat-form-field-underline {
+      display: none;
+    }
+
+    .mat-form-field-infix {
+      height: inherit;
+      width: inherit;
+      border: unset;
+      padding: 0 0 0 8px;
+    }
+
+    .mat-form-field-flex {
+      height: inherit;
+      width: inherit;
+    }
+
+    .mat-form-field-wrapper {
+      height: inherit;
+      width: inherit;
+      padding-bottom: 0;
+
+      .mat-form-field-label {
+        padding: 0 0 0 8px;
+        line-height: initial;
+        color: $gray-5;
+      }
+    }
+
+    .mat-input-element {
+      height: inherit;
+      width: inherit;
+      margin: 0;
+
+      &:after {
+        width: unset;
+        margin: 4px;
+      }
+    }
+
+    .textarea.mat-input-element {
+      padding: 0;
+      margin-top: 8px;
+    }
+  }
+}
+
+.textarea {
+  height: 100%;
+  width: 100%;
+}

projects/components/src/textarea/textarea.component.ts

@@ -6,8 +6,9 @@ import { LoggerService } from '@hypertrace/common';
   styleUrls: ['./textarea.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: `
-    <mat-form-field class="full-page">
+    <mat-form-field class="fill-container" floatLabel="never">
       <textarea
+        class="textarea"
         matInput
         [disabled]="this.disabled"
         [placeholder]="this.placeholder"