Updated to use modern colours and BEM naming convention

src/app/common/components/error/error.component.ts

 import { Component, Input } from '@angular/core';
 
 @Component({
- selector: 'minds-error-box',
- inputs: ['errorString'],
+ selector: 'm-error-box',
  template: `
- <div
- class="mdl-card mdl-color--red-500 mdl-color-text--blue-grey-50 mdl-shadow--2dp"
- style="min-height:0;"
- *ngIf="errorString"
- >
- <div class="mdl-card__supporting-text mdl-color-text--blue-grey-50">
- {{ errorString }}
+ <div class="m-errorBox__container" *ngIf="message">
+ <div class="m-errorBox__text">
+ {{ message }}
  </div>
  </div>
  `,
 })
-export class ErrorBox {
- @Input() errorString = '';
+export class ErrorBoxComponent {
+ @Input() message: string;
 }

src/app/modules/modals/modals.module.ts

@@ -15,7 +15,7 @@ import { ConfirmPasswordModalComponent } from './confirm-password/modal.componen
 import { SignupModal } from './signup/signup';
 import { TOSUpdatedModal } from './tos-updated/tos.component';
 import { TextInputAutocompleteModule } from '../../common/components/autocomplete';
-import { ErrorBox } from '../../common/components/error/error.component';
+import { ErrorBoxComponent } from '../../common/components/error/error.component';
 
 @NgModule({
  imports: [
@@ -36,7 +36,7 @@ import { ErrorBox } from '../../common/components/error/error.component';
  SignupModal,
  ConfirmPasswordModalComponent,
  TOSUpdatedModal,
- ErrorBox,
+ ErrorBoxComponent,
  ],
  entryComponents: [ConfirmPasswordModalComponent],
  exports: [

src/app/modules/modals/remind-composer/remind-composer.ts

@@ -39,7 +39,7 @@ import { TopbarHashtagsService } from '../../hashtags/service/topbar.service';
  [selectChoice]="selectChoice"
  ></m-post-autocomplete-item-renderer>
  </ng-template>
- <minds-error-box [errorString]="errorString"></minds-error-box>
+ <m-error-box [message]="errorString"></m-error-box>
  <m-text-input--autocomplete-container>
  <textarea
  name="message"