error borders fix & description label

Author: Mutugiii

src/app/resources/resources-add.component.html

@@ -22,8 +22,8 @@
           <input matInput   formControlName="year">
         </mat-form-field>
         <div class="full-width markdown-field">
-          <label class="header-label markdown-label" i18n>Description</label>
-          <planet-markdown-textbox class="full-width" required="true" [formControl]="resourceForm.controls.description"></planet-markdown-textbox>
+          <label for="resource-description" class="header-label markdown-label" i18n>Description</label>
+          <planet-markdown-textbox id="resource-description" class="full-width" required="true" [formControl]="resourceForm.controls.description"></planet-markdown-textbox>
           <p class="mat-caption warn-text-color markdown-error" *ngIf="resourceForm.controls.description.touched && resourceForm.controls.description.invalid">
             <planet-form-error-messages [control]="resourceForm.controls.description"></planet-form-error-messages>
           </p>

src/app/resources/resources-add.scss

@@ -4,7 +4,7 @@
   .view-container {
     display: grid;
     grid-template-rows: auto 42px;
-    > * {
+    > :first-child {
       overflow-y: auto;
     }
   }

src/app/shared/forms/planet-markdown-textbox.component.ts

@@ -29,6 +29,12 @@ export class PlanetMarkdownTextboxComponent implements ControlValueAccessor, DoC
 
   @HostBinding() id = `planet-markdown-textbox-${PlanetMarkdownTextboxComponent.nextId++}`;
   @HostBinding('attr.aria-describedby') describedBy = '';
+  @HostBinding('class.is-invalid') get isInvalid() {
+    return this.errorState;
+  }
+  @HostBinding('class.is-focused') get isFocused() {
+    return this.focused;
+  }
   @ViewChild('editor') editor;
   @Input() _value: ValueWithImages | string;
   get value(): ValueWithImages | string {

src/app/shared/forms/planet-markdown-textbox.scss

@@ -1,30 +1,29 @@
 @use '../../variables' as v;
 
-@mixin editor-border-color($color) {
-  border-top-color: $color;
-  border-left-color: $color;
-  border-right-color: $color;
-  border-bottom-color: $color;
+@mixin editor-border($color) {
+  .EasyMDEContainer .editor-toolbar {
+    border-color: $color;
+    border-bottom: 1px solid $color;
+  }
+  .EasyMDEContainer .CodeMirror {
+    border-color: $color;
+  }
 }
 
-.mat-form-field-invalid planet-markdown-textbox {
-  .editor-toolbar, .CodeMirror {
-    @include editor-border-color(v.$warn);
-  }
+planet-markdown-textbox.is-invalid {
+  @include editor-border(v.$warn);
 }
 
-.mat-focused.ng-valid planet-markdown-textbox, .mat-focused.ng-untouched planet-markdown-textbox {
-  .editor-toolbar, .CodeMirror {
-    @include editor-border-color(v.$primary);
-  }
+planet-markdown-textbox.is-focused:not(.is-invalid) {
+  @include editor-border(v.$primary);
 }
 
 planet-markdown-textbox {
   .CodeMirror, .CodeMirror-scroll {
     height: inherit;
-    min-height: 15vh !important;
+    min-height: 15vh;
     max-height: 15vh;
-    padding-bottom: 30px !important;
+    padding-bottom: 30px;
   }
 
   .CodeMirror.CodeMirror-fullscreen {