From aed5710da72dd3e13e84cc28d894c9607f629be1 Mon Sep 17 00:00:00 2001
From: ogdbd3h5qze42igcv8wcrqk3 <ogdbd3h5qze42igcv8wcrqk3@systemli.org>
Date: Sat, 18 Mar 2023 16:06:59 +0100
Subject: [PATCH] [frontend] Migrate to material 15 using mdc-migration

---
 .../src/app/auth/login/login.component.html   |  2 +-
 .../src/app/auth/login/login.component.scss   |  2 +-
 .../src/app/auth/login/login.component.ts     |  2 +-
 .../password-reset.component.html             |  2 +-
 .../password-reset.component.scss             |  2 +-
 .../password-reset.component.ts               |  2 +-
 .../set-password/set-password.component.html  |  2 +-
 .../set-password/set-password.component.scss  |  2 +-
 .../set-password/set-password.component.ts    |  2 +-
 .../app/auth/register/register.component.html |  2 +-
 .../app/auth/register/register.component.scss |  2 +-
 .../app/auth/register/register.component.ts   |  2 +-
 .../src/app/core/auth/error.interceptor.ts    |  2 +-
 .../account-settings.component.html           |  4 ++--
 .../account-settings.component.ts             |  2 +-
 .../app/dashboard/board/board.component.scss  |  2 +-
 .../badwords/badwords.component.html          |  2 +-
 .../badwords/badwords.component.scss          |  2 +-
 .../badwords/badwords.component.ts            |  2 +-
 .../hoodsettings/hoodsettings.component.html  |  6 ++---
 .../trigger/trigger.component.html            |  2 +-
 .../trigger/trigger.component.scss            |  2 +-
 .../hoodsettings/trigger/trigger.component.ts |  2 +-
 .../board/settings/settings.component.html    |  4 ++--
 .../board/settings/settings.component.ts      |  4 ++--
 .../app/dashboard/hoods/hoods.component.ts    |  2 +-
 .../new-hood-dialog.component.ts              |  4 ++--
 .../email-bot-card.component.html             |  2 +-
 .../email-bot-card.component.ts               |  4 ++--
 .../email-confirmation.component.ts           |  4 ++--
 .../email-dialog/email-dialog.component.ts    |  4 ++--
 .../email-settings.component.html             |  2 +-
 .../email-settings.component.ts               |  4 ++--
 .../email-unsubscribe.component.html          |  2 +-
 .../email-unsubscribe.component.ts            |  2 +-
 .../platforms-info-page.component.ts          |  2 +-
 .../telegram-bot-card.component.html          |  2 +-
 .../telegram-bot-card.component.ts            |  2 +-
 .../telegram-dialog.component.ts              |  4 ++--
 .../telegram-settings.component.html          |  2 +-
 .../telegram-settings.component.ts            |  4 ++--
 .../twitter-bot-card.component.html           |  2 +-
 .../twitter-bot-card.component.ts             |  2 +-
 .../twitter-settings.component.html           |  2 +-
 .../twitter-settings.component.ts             |  4 ++--
 .../app/shared/material/material.module.ts    | 22 +++++++++----------
 .../yes-no-dialog/yes-no-dialog.component.ts  |  2 +-
 kibicara-frontend/src/sass/styles.scss        |  1 +
 48 files changed, 71 insertions(+), 70 deletions(-)

diff --git a/kibicara-frontend/src/app/auth/login/login.component.html b/kibicara-frontend/src/app/auth/login/login.component.html
index b2df9f9..5b1fce2 100644
--- a/kibicara-frontend/src/app/auth/login/login.component.html
+++ b/kibicara-frontend/src/app/auth/login/login.component.html
@@ -1,5 +1,5 @@
 <div class="container">
-  <mat-card class="login-form">
+  <mat-card appearance="outlined" class="login-form">
     <mat-card-header>
       <h2>Log in as hood admin!</h2>
     </mat-card-header>
diff --git a/kibicara-frontend/src/app/auth/login/login.component.scss b/kibicara-frontend/src/app/auth/login/login.component.scss
index 92e6e3f..1f89905 100644
--- a/kibicara-frontend/src/app/auth/login/login.component.scss
+++ b/kibicara-frontend/src/app/auth/login/login.component.scss
@@ -7,7 +7,7 @@
   margin-top: 3%;
 }
 
-.mat-card:not([class*="mat-elevation-z"]) {
+.mat-mdc-card:not([class*="mat-elevation-z"]) {
   box-shadow: none;
 }
 
diff --git a/kibicara-frontend/src/app/auth/login/login.component.ts b/kibicara-frontend/src/app/auth/login/login.component.ts
index e370cec..cfe80b3 100644
--- a/kibicara-frontend/src/app/auth/login/login.component.ts
+++ b/kibicara-frontend/src/app/auth/login/login.component.ts
@@ -3,7 +3,7 @@ import { LoginService } from '../../core/auth/login.service';
 import { Router, ActivatedRoute } from '@angular/router';
 import { Validators, UntypedFormGroup, UntypedFormBuilder } from '@angular/forms';
 import { first } from 'rxjs/operators';
-import { MatLegacySnackBar as MatSnackBar } from '@angular/material/legacy-snack-bar';
+import { MatSnackBar } from '@angular/material/snack-bar';
 
 @Component({
   selector: 'app-login',
diff --git a/kibicara-frontend/src/app/auth/password-reset/password-reset.component.html b/kibicara-frontend/src/app/auth/password-reset/password-reset.component.html
index 8219c66..55b791e 100644
--- a/kibicara-frontend/src/app/auth/password-reset/password-reset.component.html
+++ b/kibicara-frontend/src/app/auth/password-reset/password-reset.component.html
@@ -1,5 +1,5 @@
 <div class="container">
-  <mat-card class="login-form">
+  <mat-card appearance="outlined" class="login-form">
     <mat-card-header>
       <h2>Reset password</h2>
     </mat-card-header>
diff --git a/kibicara-frontend/src/app/auth/password-reset/password-reset.component.scss b/kibicara-frontend/src/app/auth/password-reset/password-reset.component.scss
index 3ddd41e..d8a989b 100644
--- a/kibicara-frontend/src/app/auth/password-reset/password-reset.component.scss
+++ b/kibicara-frontend/src/app/auth/password-reset/password-reset.component.scss
@@ -6,7 +6,7 @@
   margin-top: 3%;
 }
 
-.mat-card:not([class*="mat-elevation-z"]) {
+.mat-mdc-card:not([class*="mat-elevation-z"]) {
   box-shadow: none;
 }
 
diff --git a/kibicara-frontend/src/app/auth/password-reset/password-reset.component.ts b/kibicara-frontend/src/app/auth/password-reset/password-reset.component.ts
index e942cad..b0d46c9 100644
--- a/kibicara-frontend/src/app/auth/password-reset/password-reset.component.ts
+++ b/kibicara-frontend/src/app/auth/password-reset/password-reset.component.ts
@@ -1,6 +1,6 @@
 import { Component, OnInit } from '@angular/core';
 import { UntypedFormBuilder, UntypedFormGroup, Validators } from '@angular/forms';
-import { MatLegacySnackBar as MatSnackBar } from '@angular/material/legacy-snack-bar';
+import { MatSnackBar } from '@angular/material/snack-bar';
 import { ActivatedRoute, Router } from '@angular/router';
 import { first } from 'rxjs/operators';
 import { AdminService } from 'src/app/core/api/api/admin.service';
diff --git a/kibicara-frontend/src/app/auth/password-reset/set-password/set-password.component.html b/kibicara-frontend/src/app/auth/password-reset/set-password/set-password.component.html
index 89f82d3..8e6cc04 100644
--- a/kibicara-frontend/src/app/auth/password-reset/set-password/set-password.component.html
+++ b/kibicara-frontend/src/app/auth/password-reset/set-password/set-password.component.html
@@ -1,5 +1,5 @@
 <div class="container">
-  <mat-card class="login-form">
+  <mat-card appearance="outlined" class="login-form">
     <mat-card-header>
       <h2>Enter your new password</h2>
     </mat-card-header>
diff --git a/kibicara-frontend/src/app/auth/password-reset/set-password/set-password.component.scss b/kibicara-frontend/src/app/auth/password-reset/set-password/set-password.component.scss
index e6225a9..2e48088 100644
--- a/kibicara-frontend/src/app/auth/password-reset/set-password/set-password.component.scss
+++ b/kibicara-frontend/src/app/auth/password-reset/set-password/set-password.component.scss
@@ -6,7 +6,7 @@
   margin-top: 3%;
 }
 
-.mat-card:not([class*="mat-elevation-z"]) {
+.mat-mdc-card:not([class*="mat-elevation-z"]) {
   box-shadow: none;
 }
 
diff --git a/kibicara-frontend/src/app/auth/password-reset/set-password/set-password.component.ts b/kibicara-frontend/src/app/auth/password-reset/set-password/set-password.component.ts
index 0da3f63..61bc57c 100644
--- a/kibicara-frontend/src/app/auth/password-reset/set-password/set-password.component.ts
+++ b/kibicara-frontend/src/app/auth/password-reset/set-password/set-password.component.ts
@@ -1,6 +1,6 @@
 import { Component, OnInit } from '@angular/core';
 import { UntypedFormBuilder, UntypedFormGroup, Validators } from '@angular/forms';
-import { MatLegacySnackBar as MatSnackBar } from '@angular/material/legacy-snack-bar';
+import { MatSnackBar } from '@angular/material/snack-bar';
 import { ActivatedRoute, Router } from '@angular/router';
 import { first } from 'rxjs/operators';
 import { AdminService } from 'src/app/core/api/api/admin.service';
diff --git a/kibicara-frontend/src/app/auth/register/register.component.html b/kibicara-frontend/src/app/auth/register/register.component.html
index e8bdf62..fd0c3c6 100644
--- a/kibicara-frontend/src/app/auth/register/register.component.html
+++ b/kibicara-frontend/src/app/auth/register/register.component.html
@@ -1,6 +1,6 @@
 <div class="container">
   <div class="banner"></div>
-  <mat-card class="register-form">
+  <mat-card appearance="outlined" class="register-form">
     <mat-card-header>
       <h2>Register as a hood admin!</h2>
     </mat-card-header>
diff --git a/kibicara-frontend/src/app/auth/register/register.component.scss b/kibicara-frontend/src/app/auth/register/register.component.scss
index 186a9b4..0ee8a1d 100644
--- a/kibicara-frontend/src/app/auth/register/register.component.scss
+++ b/kibicara-frontend/src/app/auth/register/register.component.scss
@@ -7,7 +7,7 @@
   margin-top: 3%;
 }
 
-.mat-card:not([class*="mat-elevation-z"]) {
+.mat-mdc-card:not([class*="mat-elevation-z"]) {
   box-shadow: none;
 }
 
diff --git a/kibicara-frontend/src/app/auth/register/register.component.ts b/kibicara-frontend/src/app/auth/register/register.component.ts
index b4584cc..dda0dd0 100644
--- a/kibicara-frontend/src/app/auth/register/register.component.ts
+++ b/kibicara-frontend/src/app/auth/register/register.component.ts
@@ -4,7 +4,7 @@ import { Validators, UntypedFormBuilder, UntypedFormGroup } from '@angular/forms
 import { first } from 'rxjs/operators';
 import { Router, ActivatedRoute } from '@angular/router';
 import { LoginService } from 'src/app/core/auth/login.service';
-import { MatLegacySnackBar as MatSnackBar } from '@angular/material/legacy-snack-bar';
+import { MatSnackBar } from '@angular/material/snack-bar';
 
 @Component({
   selector: 'app-register',
diff --git a/kibicara-frontend/src/app/core/auth/error.interceptor.ts b/kibicara-frontend/src/app/core/auth/error.interceptor.ts
index 306068f..eaf1315 100644
--- a/kibicara-frontend/src/app/core/auth/error.interceptor.ts
+++ b/kibicara-frontend/src/app/core/auth/error.interceptor.ts
@@ -10,7 +10,7 @@ import { Observable, throwError } from 'rxjs';
 import { LoginService } from './login.service';
 import { catchError } from 'rxjs/operators';
 import { Router } from '@angular/router';
-import { MatLegacySnackBar as MatSnackBar } from '@angular/material/legacy-snack-bar';
+import { MatSnackBar } from '@angular/material/snack-bar';
 import { OverlayComponent } from 'src/app/shared/overlay/overlay.component';
 
 @Injectable()
diff --git a/kibicara-frontend/src/app/dashboard/account-settings/account-settings.component.html b/kibicara-frontend/src/app/dashboard/account-settings/account-settings.component.html
index 74fd8dd..e90d73a 100644
--- a/kibicara-frontend/src/app/dashboard/account-settings/account-settings.component.html
+++ b/kibicara-frontend/src/app/dashboard/account-settings/account-settings.component.html
@@ -1,7 +1,7 @@
 <app-heading-one [title]="title"></app-heading-one>
 
 <div class="container">
-  <mat-card>
+  <mat-card appearance="outlined">
     <form [formGroup]="form" class="form">
       <mat-form-field appearance="fill">
         <mat-label for="email">E-Mail</mat-label>
@@ -47,7 +47,7 @@
     </form>
   </mat-card>
 
-  <mat-card>
+  <mat-card appearance="outlined">
     <div class="delete">
       <mat-card-title>Danger zone</mat-card-title>
       <mat-divider></mat-divider>
diff --git a/kibicara-frontend/src/app/dashboard/account-settings/account-settings.component.ts b/kibicara-frontend/src/app/dashboard/account-settings/account-settings.component.ts
index 18f4811..39aee38 100644
--- a/kibicara-frontend/src/app/dashboard/account-settings/account-settings.component.ts
+++ b/kibicara-frontend/src/app/dashboard/account-settings/account-settings.component.ts
@@ -1,6 +1,6 @@
 import { Component, OnInit } from '@angular/core';
 import { UntypedFormBuilder, UntypedFormGroup, Validators } from '@angular/forms';
-import { MatLegacyDialog as MatDialog } from '@angular/material/legacy-dialog';
+import { MatDialog } from '@angular/material/dialog';
 import { Router } from '@angular/router';
 import { AdminService } from 'src/app/core/api/api/admin.service';
 import { YesNoDialogComponent } from 'src/app/shared/yes-no-dialog/yes-no-dialog.component';
diff --git a/kibicara-frontend/src/app/dashboard/board/board.component.scss b/kibicara-frontend/src/app/dashboard/board/board.component.scss
index 48a0ae3..48c8e38 100644
--- a/kibicara-frontend/src/app/dashboard/board/board.component.scss
+++ b/kibicara-frontend/src/app/dashboard/board/board.component.scss
@@ -1,4 +1,4 @@
-.mat-card {
+.mat-mdc-card {
   box-shadow: none;
 }
 
diff --git a/kibicara-frontend/src/app/dashboard/board/hoodsettings/badwords/badwords.component.html b/kibicara-frontend/src/app/dashboard/board/hoodsettings/badwords/badwords.component.html
index 5976e0f..7cb6349 100644
--- a/kibicara-frontend/src/app/dashboard/board/hoodsettings/badwords/badwords.component.html
+++ b/kibicara-frontend/src/app/dashboard/board/hoodsettings/badwords/badwords.component.html
@@ -1,4 +1,4 @@
-<mat-card>
+<mat-card appearance="outlined">
   <mat-card-title>Badwords</mat-card-title>
   <mat-card-content>
     <form class="input" [formGroup]="regexForm" (ngSubmit)="onSubmit()">
diff --git a/kibicara-frontend/src/app/dashboard/board/hoodsettings/badwords/badwords.component.scss b/kibicara-frontend/src/app/dashboard/board/hoodsettings/badwords/badwords.component.scss
index 4788fef..9d0d445 100644
--- a/kibicara-frontend/src/app/dashboard/board/hoodsettings/badwords/badwords.component.scss
+++ b/kibicara-frontend/src/app/dashboard/board/hoodsettings/badwords/badwords.component.scss
@@ -11,7 +11,7 @@
   margin: 10px;
 }
 
-.mat-form-field {
+.mat-mdc-form-field {
   width: 100%;
 }
 
diff --git a/kibicara-frontend/src/app/dashboard/board/hoodsettings/badwords/badwords.component.ts b/kibicara-frontend/src/app/dashboard/board/hoodsettings/badwords/badwords.component.ts
index e83284c..5814b7c 100644
--- a/kibicara-frontend/src/app/dashboard/board/hoodsettings/badwords/badwords.component.ts
+++ b/kibicara-frontend/src/app/dashboard/board/hoodsettings/badwords/badwords.component.ts
@@ -3,7 +3,7 @@ import { BadwordsService, BodyBadWord } from 'src/app/core/api';
 import { Observable } from 'rxjs';
 import { UntypedFormGroup, Validators, UntypedFormBuilder } from '@angular/forms';
 import { first } from 'rxjs/operators';
-import { MatLegacySnackBar as MatSnackBar } from '@angular/material/legacy-snack-bar';
+import { MatSnackBar } from '@angular/material/snack-bar';
 
 @Component({
   selector: 'app-badwords',
diff --git a/kibicara-frontend/src/app/dashboard/board/hoodsettings/hoodsettings.component.html b/kibicara-frontend/src/app/dashboard/board/hoodsettings/hoodsettings.component.html
index 45d4a8d..da99f31 100644
--- a/kibicara-frontend/src/app/dashboard/board/hoodsettings/hoodsettings.component.html
+++ b/kibicara-frontend/src/app/dashboard/board/hoodsettings/hoodsettings.component.html
@@ -36,21 +36,21 @@
           <strong>not be distributed</strong>. For example:
         </p>
         <div class="example-container">
-          <mat-card>
+          <mat-card appearance="outlined">
             <mat-card-title>xyz is an asshat!</mat-card-title>
             <mat-card-subtitle
               >This message will
               <strong>not be distributed</strong>.</mat-card-subtitle
             >
           </mat-card>
-          <mat-card>
+          <mat-card appearance="outlined">
             <mat-card-title>xyz is an verybigAsshat!</mat-card-title>
             <mat-card-subtitle
               >This message will
               <strong>not be distributed</strong>.</mat-card-subtitle
             >
           </mat-card>
-          <mat-card>
+          <mat-card appearance="outlined">
             <mat-card-title>xyz is nice!</mat-card-title>
             <mat-card-subtitle
               >This message will be distributed.</mat-card-subtitle
diff --git a/kibicara-frontend/src/app/dashboard/board/hoodsettings/trigger/trigger.component.html b/kibicara-frontend/src/app/dashboard/board/hoodsettings/trigger/trigger.component.html
index 40cef00..043cac2 100644
--- a/kibicara-frontend/src/app/dashboard/board/hoodsettings/trigger/trigger.component.html
+++ b/kibicara-frontend/src/app/dashboard/board/hoodsettings/trigger/trigger.component.html
@@ -1,4 +1,4 @@
-<mat-card>
+<mat-card appearance="outlined">
   <mat-card-title>Triggers</mat-card-title>
   <mat-card-content>
     <form class="input" [formGroup]="regexForm" (ngSubmit)="onSubmit()">
diff --git a/kibicara-frontend/src/app/dashboard/board/hoodsettings/trigger/trigger.component.scss b/kibicara-frontend/src/app/dashboard/board/hoodsettings/trigger/trigger.component.scss
index 4788fef..9d0d445 100644
--- a/kibicara-frontend/src/app/dashboard/board/hoodsettings/trigger/trigger.component.scss
+++ b/kibicara-frontend/src/app/dashboard/board/hoodsettings/trigger/trigger.component.scss
@@ -11,7 +11,7 @@
   margin: 10px;
 }
 
-.mat-form-field {
+.mat-mdc-form-field {
   width: 100%;
 }
 
diff --git a/kibicara-frontend/src/app/dashboard/board/hoodsettings/trigger/trigger.component.ts b/kibicara-frontend/src/app/dashboard/board/hoodsettings/trigger/trigger.component.ts
index 304d16e..25f092b 100644
--- a/kibicara-frontend/src/app/dashboard/board/hoodsettings/trigger/trigger.component.ts
+++ b/kibicara-frontend/src/app/dashboard/board/hoodsettings/trigger/trigger.component.ts
@@ -4,7 +4,7 @@ import { Observable } from 'rxjs';
 import { ResourceLoader } from '@angular/compiler';
 import { UntypedFormBuilder, UntypedFormGroup, Validators } from '@angular/forms';
 import { first } from 'rxjs/operators';
-import { MatLegacySnackBar as MatSnackBar } from '@angular/material/legacy-snack-bar';
+import { MatSnackBar } from '@angular/material/snack-bar';
 
 @Component({
   selector: 'app-trigger',
diff --git a/kibicara-frontend/src/app/dashboard/board/settings/settings.component.html b/kibicara-frontend/src/app/dashboard/board/settings/settings.component.html
index 58babe8..12053c7 100644
--- a/kibicara-frontend/src/app/dashboard/board/settings/settings.component.html
+++ b/kibicara-frontend/src/app/dashboard/board/settings/settings.component.html
@@ -1,5 +1,5 @@
 <div class="container">
-  <mat-card>
+  <mat-card appearance="outlined">
     <form [formGroup]="form" class="form">
       <mat-form-field>
         <mat-label>Update hood name</mat-label>
@@ -11,7 +11,7 @@
     </form>
   </mat-card>
 
-  <mat-card>
+  <mat-card appearance="outlined">
     <div class="delete">
       <mat-card-title>Danger zone</mat-card-title>
       <mat-divider></mat-divider>
diff --git a/kibicara-frontend/src/app/dashboard/board/settings/settings.component.ts b/kibicara-frontend/src/app/dashboard/board/settings/settings.component.ts
index 7fd7eda..bd10367 100644
--- a/kibicara-frontend/src/app/dashboard/board/settings/settings.component.ts
+++ b/kibicara-frontend/src/app/dashboard/board/settings/settings.component.ts
@@ -1,11 +1,11 @@
 import { Component, OnInit, Input } from '@angular/core';
 import { HoodsService } from 'src/app/core/api';
-import { MatLegacyDialog as MatDialog } from '@angular/material/legacy-dialog';
+import { MatDialog } from '@angular/material/dialog';
 import { YesNoDialogComponent } from 'src/app/shared/yes-no-dialog/yes-no-dialog.component';
 import { Router } from '@angular/router';
 import { UntypedFormGroup, UntypedFormBuilder, Validators } from '@angular/forms';
 import { first } from 'rxjs/operators';
-import { MatLegacySnackBar as MatSnackBar } from '@angular/material/legacy-snack-bar';
+import { MatSnackBar } from '@angular/material/snack-bar';
 
 @Component({
   selector: 'app-settings',
diff --git a/kibicara-frontend/src/app/dashboard/hoods/hoods.component.ts b/kibicara-frontend/src/app/dashboard/hoods/hoods.component.ts
index b4182f5..8bd94fc 100644
--- a/kibicara-frontend/src/app/dashboard/hoods/hoods.component.ts
+++ b/kibicara-frontend/src/app/dashboard/hoods/hoods.component.ts
@@ -2,7 +2,7 @@ import { Component, OnInit } from '@angular/core';
 import { AdminService, BodyHood } from 'src/app/core/api';
 import { map } from 'rxjs/operators';
 import { Observer } from 'rxjs';
-import { MatLegacyDialog as MatDialog } from '@angular/material/legacy-dialog';
+import { MatDialog } from '@angular/material/dialog';
 import { NewHoodDialogComponent } from './new-hood-dialog/new-hood-dialog.component';
 import { Router } from '@angular/router';
 
diff --git a/kibicara-frontend/src/app/dashboard/hoods/new-hood-dialog/new-hood-dialog.component.ts b/kibicara-frontend/src/app/dashboard/hoods/new-hood-dialog/new-hood-dialog.component.ts
index 94f6dc4..da0e29a 100644
--- a/kibicara-frontend/src/app/dashboard/hoods/new-hood-dialog/new-hood-dialog.component.ts
+++ b/kibicara-frontend/src/app/dashboard/hoods/new-hood-dialog/new-hood-dialog.component.ts
@@ -1,9 +1,9 @@
 import { Component, OnInit, Inject } from '@angular/core';
-import { MatLegacyDialogRef as MatDialogRef, MAT_LEGACY_DIALOG_DATA as MAT_DIALOG_DATA } from '@angular/material/legacy-dialog';
+import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
 import { HoodsService } from 'src/app/core/api';
 import { first } from 'rxjs/operators';
 import { UntypedFormBuilder, UntypedFormGroup, Validators } from '@angular/forms';
-import { MatLegacySnackBar as MatSnackBar } from '@angular/material/legacy-snack-bar';
+import { MatSnackBar } from '@angular/material/snack-bar';
 
 @Component({
   selector: 'app-new-hood-dialog',
diff --git a/kibicara-frontend/src/app/platforms/email/email-bot-card/email-bot-card.component.html b/kibicara-frontend/src/app/platforms/email/email-bot-card/email-bot-card.component.html
index 6603bf7..3a01e30 100644
--- a/kibicara-frontend/src/app/platforms/email/email-bot-card/email-bot-card.component.html
+++ b/kibicara-frontend/src/app/platforms/email/email-bot-card/email-bot-card.component.html
@@ -1,6 +1,6 @@
 <div *ngIf="emails$ | loading | async as emails">
   <ng-template [ngIf]="emails.value">
-    <mat-card>
+    <mat-card appearance="outlined">
       <mat-card-header>
         <div mat-card-avatar class="email"></div>
         <mat-card-title class="platform-title">
diff --git a/kibicara-frontend/src/app/platforms/email/email-bot-card/email-bot-card.component.ts b/kibicara-frontend/src/app/platforms/email/email-bot-card/email-bot-card.component.ts
index 6c79d06..ae28a0a 100644
--- a/kibicara-frontend/src/app/platforms/email/email-bot-card/email-bot-card.component.ts
+++ b/kibicara-frontend/src/app/platforms/email/email-bot-card/email-bot-card.component.ts
@@ -3,9 +3,9 @@ import { EmailService } from 'src/app/core/api';
 import { environment } from 'src/environments/environment';
 import { UntypedFormGroup, UntypedFormBuilder, Validators } from '@angular/forms';
 import { EmailBotInfoDialogComponent } from './email-bot-info-dialog/email-bot-info-dialog.component';
-import { MatLegacyDialog as MatDialog } from '@angular/material/legacy-dialog';
+import { MatDialog } from '@angular/material/dialog';
 import { first } from 'rxjs/operators';
-import { MatLegacySnackBar as MatSnackBar } from '@angular/material/legacy-snack-bar';
+import { MatSnackBar } from '@angular/material/snack-bar';
 
 @Component({
   selector: 'app-email-bot-card',
diff --git a/kibicara-frontend/src/app/platforms/email/email-confirmation/email-confirmation.component.ts b/kibicara-frontend/src/app/platforms/email/email-confirmation/email-confirmation.component.ts
index 98ca907..1c4d27a 100644
--- a/kibicara-frontend/src/app/platforms/email/email-confirmation/email-confirmation.component.ts
+++ b/kibicara-frontend/src/app/platforms/email/email-confirmation/email-confirmation.component.ts
@@ -1,8 +1,8 @@
 import { Component, OnInit } from '@angular/core';
 import { ActivatedRoute, Router } from '@angular/router';
 import { EmailService } from 'src/app/core/api';
-import { MatLegacyDialog as MatDialog } from '@angular/material/legacy-dialog';
-import { MatLegacySnackBar as MatSnackBar } from '@angular/material/legacy-snack-bar';
+import { MatDialog } from '@angular/material/dialog';
+import { MatSnackBar } from '@angular/material/snack-bar';
 
 @Component({
   selector: 'app-email-confirmation',
diff --git a/kibicara-frontend/src/app/platforms/email/email-settings/email-dialog/email-dialog.component.ts b/kibicara-frontend/src/app/platforms/email/email-settings/email-dialog/email-dialog.component.ts
index ce88773..a674af3 100644
--- a/kibicara-frontend/src/app/platforms/email/email-settings/email-dialog/email-dialog.component.ts
+++ b/kibicara-frontend/src/app/platforms/email/email-settings/email-dialog/email-dialog.component.ts
@@ -1,9 +1,9 @@
 import { Component, OnInit, Input, Inject } from '@angular/core';
-import { MatLegacyDialogRef as MatDialogRef, MAT_LEGACY_DIALOG_DATA as MAT_DIALOG_DATA } from '@angular/material/legacy-dialog';
+import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
 import { Validators, UntypedFormBuilder } from '@angular/forms';
 import { EmailService } from 'src/app/core/api';
 import { first } from 'rxjs/operators';
-import { MatLegacySnackBar as MatSnackBar } from '@angular/material/legacy-snack-bar';
+import { MatSnackBar } from '@angular/material/snack-bar';
 
 @Component({
   selector: 'app-email-dialog',
diff --git a/kibicara-frontend/src/app/platforms/email/email-settings/email-settings.component.html b/kibicara-frontend/src/app/platforms/email/email-settings/email-settings.component.html
index 1e40f87..be89a1b 100644
--- a/kibicara-frontend/src/app/platforms/email/email-settings/email-settings.component.html
+++ b/kibicara-frontend/src/app/platforms/email/email-settings/email-settings.component.html
@@ -1,4 +1,4 @@
-<mat-card>
+<mat-card appearance="outlined">
   <mat-card-header>
     <div mat-card-avatar class="email"></div>
     <mat-card-title class="platform-title">
diff --git a/kibicara-frontend/src/app/platforms/email/email-settings/email-settings.component.ts b/kibicara-frontend/src/app/platforms/email/email-settings/email-settings.component.ts
index 6913e7d..58cafd2 100644
--- a/kibicara-frontend/src/app/platforms/email/email-settings/email-settings.component.ts
+++ b/kibicara-frontend/src/app/platforms/email/email-settings/email-settings.component.ts
@@ -1,11 +1,11 @@
 import { Component, OnInit, Input } from '@angular/core';
 import { Observable } from 'rxjs/internal/Observable';
 import { EmailService, HoodsService } from 'src/app/core/api';
-import { MatLegacyDialog as MatDialog } from '@angular/material/legacy-dialog';
+import { MatDialog } from '@angular/material/dialog';
 import { EmailDialogComponent } from './email-dialog/email-dialog.component';
 import { EmailInfoDialogComponent } from './email-info-dialog/email-info-dialog.component';
 import { BotStatus } from '../../../core/model/status';
-import { MatLegacySnackBar as MatSnackBar } from '@angular/material/legacy-snack-bar';
+import { MatSnackBar } from '@angular/material/snack-bar';
 import { environment } from 'src/environments/environment';
 
 @Component({
diff --git a/kibicara-frontend/src/app/platforms/email/email-unsubscribe/email-unsubscribe.component.html b/kibicara-frontend/src/app/platforms/email/email-unsubscribe/email-unsubscribe.component.html
index 5365e6c..8ef9185 100644
--- a/kibicara-frontend/src/app/platforms/email/email-unsubscribe/email-unsubscribe.component.html
+++ b/kibicara-frontend/src/app/platforms/email/email-unsubscribe/email-unsubscribe.component.html
@@ -1,3 +1,3 @@
-<mat-card class="card">
+<mat-card appearance="outlined" class="card">
   <p>{{ status }}</p>
 </mat-card>
diff --git a/kibicara-frontend/src/app/platforms/email/email-unsubscribe/email-unsubscribe.component.ts b/kibicara-frontend/src/app/platforms/email/email-unsubscribe/email-unsubscribe.component.ts
index a0d67d7..5328b48 100644
--- a/kibicara-frontend/src/app/platforms/email/email-unsubscribe/email-unsubscribe.component.ts
+++ b/kibicara-frontend/src/app/platforms/email/email-unsubscribe/email-unsubscribe.component.ts
@@ -1,7 +1,7 @@
 import { Component, OnInit } from '@angular/core';
 import { ActivatedRoute, Router } from '@angular/router';
 import { EmailService } from 'src/app/core/api';
-import { MatLegacySnackBar as MatSnackBar } from '@angular/material/legacy-snack-bar';
+import { MatSnackBar } from '@angular/material/snack-bar';
 
 @Component({
   selector: 'app-email-unsubscribe',
diff --git a/kibicara-frontend/src/app/platforms/platforms-info-page/platforms-info-page.component.ts b/kibicara-frontend/src/app/platforms/platforms-info-page/platforms-info-page.component.ts
index e73cc65..22d772b 100644
--- a/kibicara-frontend/src/app/platforms/platforms-info-page/platforms-info-page.component.ts
+++ b/kibicara-frontend/src/app/platforms/platforms-info-page/platforms-info-page.component.ts
@@ -1,5 +1,5 @@
 import { Component, OnInit, Input } from '@angular/core';
-import { MatLegacyDialog as MatDialog } from '@angular/material/legacy-dialog';
+import { MatDialog } from '@angular/material/dialog';
 
 @Component({
   selector: 'app-platforms-info-page',
diff --git a/kibicara-frontend/src/app/platforms/telegram/telegram-bot-card/telegram-bot-card.component.html b/kibicara-frontend/src/app/platforms/telegram/telegram-bot-card/telegram-bot-card.component.html
index 3d2f99a..8055549 100644
--- a/kibicara-frontend/src/app/platforms/telegram/telegram-bot-card/telegram-bot-card.component.html
+++ b/kibicara-frontend/src/app/platforms/telegram/telegram-bot-card/telegram-bot-card.component.html
@@ -1,6 +1,6 @@
 <div *ngIf="telegrams$ | loading | async as telegrams">
   <ng-template [ngIf]="telegrams.value">
-    <mat-card>
+    <mat-card appearance="outlined">
       <mat-card-header>
         <div mat-card-avatar class="telegram"></div>
         <mat-card-title class="platform-title">
diff --git a/kibicara-frontend/src/app/platforms/telegram/telegram-bot-card/telegram-bot-card.component.ts b/kibicara-frontend/src/app/platforms/telegram/telegram-bot-card/telegram-bot-card.component.ts
index 73caecc..4e4718e 100644
--- a/kibicara-frontend/src/app/platforms/telegram/telegram-bot-card/telegram-bot-card.component.ts
+++ b/kibicara-frontend/src/app/platforms/telegram/telegram-bot-card/telegram-bot-card.component.ts
@@ -1,7 +1,7 @@
 import { Component, OnInit, Input } from '@angular/core';
 import { TelegramService } from 'src/app/core/api';
 import { TelegramBotInfoDialogComponent } from './telegram-bot-info-dialog/telegram-bot-info-dialog.component';
-import { MatLegacyDialog as MatDialog } from '@angular/material/legacy-dialog';
+import { MatDialog } from '@angular/material/dialog';
 
 @Component({
   selector: 'app-telegram-bot-card',
diff --git a/kibicara-frontend/src/app/platforms/telegram/telegram-settings/telegram-dialog/telegram-dialog.component.ts b/kibicara-frontend/src/app/platforms/telegram/telegram-settings/telegram-dialog/telegram-dialog.component.ts
index 420f85b..7fd2a33 100644
--- a/kibicara-frontend/src/app/platforms/telegram/telegram-settings/telegram-dialog/telegram-dialog.component.ts
+++ b/kibicara-frontend/src/app/platforms/telegram/telegram-settings/telegram-dialog/telegram-dialog.component.ts
@@ -1,8 +1,8 @@
 import { Component, OnInit, Inject } from '@angular/core';
 import { Validators, UntypedFormBuilder, UntypedFormGroup } from '@angular/forms';
-import { MatLegacyDialogRef as MatDialogRef, MAT_LEGACY_DIALOG_DATA as MAT_DIALOG_DATA } from '@angular/material/legacy-dialog';
+import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
 import { TelegramService, BodyTelegram } from 'src/app/core/api';
-import { MatLegacySnackBar as MatSnackBar } from '@angular/material/legacy-snack-bar';
+import { MatSnackBar } from '@angular/material/snack-bar';
 import { first } from 'rxjs/operators';
 
 @Component({
diff --git a/kibicara-frontend/src/app/platforms/telegram/telegram-settings/telegram-settings.component.html b/kibicara-frontend/src/app/platforms/telegram/telegram-settings/telegram-settings.component.html
index 4178b60..f5c694d 100644
--- a/kibicara-frontend/src/app/platforms/telegram/telegram-settings/telegram-settings.component.html
+++ b/kibicara-frontend/src/app/platforms/telegram/telegram-settings/telegram-settings.component.html
@@ -1,4 +1,4 @@
-<mat-card>
+<mat-card appearance="outlined">
   <mat-card-header>
     <div mat-card-avatar class="telegram"></div>
     <mat-card-title class="platform-title">
diff --git a/kibicara-frontend/src/app/platforms/telegram/telegram-settings/telegram-settings.component.ts b/kibicara-frontend/src/app/platforms/telegram/telegram-settings/telegram-settings.component.ts
index 11c0960..e28f38e 100644
--- a/kibicara-frontend/src/app/platforms/telegram/telegram-settings/telegram-settings.component.ts
+++ b/kibicara-frontend/src/app/platforms/telegram/telegram-settings/telegram-settings.component.ts
@@ -2,10 +2,10 @@ import { Component, OnInit, Input } from '@angular/core';
 import { TelegramService } from 'src/app/core/api';
 import { Observable } from 'rxjs';
 import { TelegramInfoDialogComponent } from './telegram-info-dialog/telegram-info-dialog.component';
-import { MatLegacyDialog as MatDialog } from '@angular/material/legacy-dialog';
+import { MatDialog } from '@angular/material/dialog';
 import { TelegramDialogComponent } from './telegram-dialog/telegram-dialog.component';
 import { YesNoDialogComponent } from 'src/app/shared/yes-no-dialog/yes-no-dialog.component';
-import { MatLegacySnackBar as MatSnackBar } from '@angular/material/legacy-snack-bar';
+import { MatSnackBar } from '@angular/material/snack-bar';
 
 @Component({
   selector: 'app-telegram-settings',
diff --git a/kibicara-frontend/src/app/platforms/twitter/twitter-bot-card/twitter-bot-card.component.html b/kibicara-frontend/src/app/platforms/twitter/twitter-bot-card/twitter-bot-card.component.html
index 7bb8a63..a668aad 100644
--- a/kibicara-frontend/src/app/platforms/twitter/twitter-bot-card/twitter-bot-card.component.html
+++ b/kibicara-frontend/src/app/platforms/twitter/twitter-bot-card/twitter-bot-card.component.html
@@ -1,6 +1,6 @@
 <div *ngIf="twitters$ | loading | async as twitters">
   <ng-template [ngIf]="twitters.value">
-    <mat-card>
+    <mat-card appearance="outlined">
       <mat-card-header>
         <div mat-card-avatar class="twitter"></div>
         <mat-card-title class="platform-title">
diff --git a/kibicara-frontend/src/app/platforms/twitter/twitter-bot-card/twitter-bot-card.component.ts b/kibicara-frontend/src/app/platforms/twitter/twitter-bot-card/twitter-bot-card.component.ts
index dbd4ebd..ffd2673 100644
--- a/kibicara-frontend/src/app/platforms/twitter/twitter-bot-card/twitter-bot-card.component.ts
+++ b/kibicara-frontend/src/app/platforms/twitter/twitter-bot-card/twitter-bot-card.component.ts
@@ -1,7 +1,7 @@
 import { Component, OnInit, Input } from '@angular/core';
 import { TwitterService } from 'src/app/core/api';
 import { TwitterBotInfoDialogComponent } from './twitter-bot-info-dialog/twitter-bot-info-dialog.component';
-import { MatLegacyDialog as MatDialog } from '@angular/material/legacy-dialog';
+import { MatDialog } from '@angular/material/dialog';
 
 @Component({
   selector: 'app-twitter-bot-card',
diff --git a/kibicara-frontend/src/app/platforms/twitter/twitter-settings/twitter-settings.component.html b/kibicara-frontend/src/app/platforms/twitter/twitter-settings/twitter-settings.component.html
index c4dac31..c0519b6 100644
--- a/kibicara-frontend/src/app/platforms/twitter/twitter-settings/twitter-settings.component.html
+++ b/kibicara-frontend/src/app/platforms/twitter/twitter-settings/twitter-settings.component.html
@@ -1,4 +1,4 @@
-<mat-card>
+<mat-card appearance="outlined">
   <mat-card-header>
     <div mat-card-avatar class="twitter"></div>
     <mat-card-title class="platform-title">
diff --git a/kibicara-frontend/src/app/platforms/twitter/twitter-settings/twitter-settings.component.ts b/kibicara-frontend/src/app/platforms/twitter/twitter-settings/twitter-settings.component.ts
index 06b5b21..76eedf7 100644
--- a/kibicara-frontend/src/app/platforms/twitter/twitter-settings/twitter-settings.component.ts
+++ b/kibicara-frontend/src/app/platforms/twitter/twitter-settings/twitter-settings.component.ts
@@ -2,8 +2,8 @@ import { Component, OnInit, Input } from '@angular/core';
 import { Observable } from 'rxjs';
 import { TwitterService } from 'src/app/core/api';
 import { TwitterInfoDialogComponent } from './twitter-info-dialog/twitter-info-dialog.component';
-import { MatLegacyDialog as MatDialog } from '@angular/material/legacy-dialog';
-import { MatLegacySnackBar as MatSnackBar } from '@angular/material/legacy-snack-bar';
+import { MatDialog } from '@angular/material/dialog';
+import { MatSnackBar } from '@angular/material/snack-bar';
 
 @Component({
   selector: 'app-twitter-settings',
diff --git a/kibicara-frontend/src/app/shared/material/material.module.ts b/kibicara-frontend/src/app/shared/material/material.module.ts
index 9295e06..ce9e57d 100644
--- a/kibicara-frontend/src/app/shared/material/material.module.ts
+++ b/kibicara-frontend/src/app/shared/material/material.module.ts
@@ -1,18 +1,18 @@
 import { NgModule } from '@angular/core';
 import { MatToolbarModule } from '@angular/material/toolbar';
-import { MatLegacyButtonModule as MatButtonModule } from '@angular/material/legacy-button';
+import { MatButtonModule } from '@angular/material/button';
 import { MatIconModule } from '@angular/material/icon';
-import { MatLegacyMenuModule as MatMenuModule } from '@angular/material/legacy-menu';
-import { MatLegacyTabsModule as MatTabsModule } from '@angular/material/legacy-tabs';
-import { MatLegacyCardModule as MatCardModule } from '@angular/material/legacy-card';
+import { MatMenuModule } from '@angular/material/menu';
+import { MatTabsModule } from '@angular/material/tabs';
+import { MatCardModule } from '@angular/material/card';
 import { MatExpansionModule } from '@angular/material/expansion';
-import { MatLegacyListModule as MatListModule } from '@angular/material/legacy-list';
-import { MatLegacyInputModule as MatInputModule } from '@angular/material/legacy-input';
-import { MatLegacyDialogModule as MatDialogModule } from '@angular/material/legacy-dialog';
-import { MatLegacySnackBarModule as MatSnackBarModule } from '@angular/material/legacy-snack-bar';
-import { MatLegacySlideToggleModule as MatSlideToggleModule } from '@angular/material/legacy-slide-toggle';
-import { MatLegacyTooltipModule as MatTooltipModule } from '@angular/material/legacy-tooltip';
-import { MatLegacyProgressSpinnerModule as MatProgressSpinnerModule } from '@angular/material/legacy-progress-spinner';
+import { MatListModule } from '@angular/material/list';
+import { MatInputModule } from '@angular/material/input';
+import { MatDialogModule } from '@angular/material/dialog';
+import { MatSnackBarModule } from '@angular/material/snack-bar';
+import { MatSlideToggleModule } from '@angular/material/slide-toggle';
+import { MatTooltipModule } from '@angular/material/tooltip';
+import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
 
 @NgModule({
   declarations: [],
diff --git a/kibicara-frontend/src/app/shared/yes-no-dialog/yes-no-dialog.component.ts b/kibicara-frontend/src/app/shared/yes-no-dialog/yes-no-dialog.component.ts
index 05db6f5..18e9513 100644
--- a/kibicara-frontend/src/app/shared/yes-no-dialog/yes-no-dialog.component.ts
+++ b/kibicara-frontend/src/app/shared/yes-no-dialog/yes-no-dialog.component.ts
@@ -1,5 +1,5 @@
 import { Component, OnInit, Inject } from '@angular/core';
-import { MAT_LEGACY_DIALOG_DATA as MAT_DIALOG_DATA } from '@angular/material/legacy-dialog';
+import { MAT_DIALOG_DATA } from '@angular/material/dialog';
 
 @Component({
   selector: 'app-yes-no-dialog',
diff --git a/kibicara-frontend/src/sass/styles.scss b/kibicara-frontend/src/sass/styles.scss
index 72949d4..e185fff 100644
--- a/kibicara-frontend/src/sass/styles.scss
+++ b/kibicara-frontend/src/sass/styles.scss
@@ -11,6 +11,7 @@ body {
   font-family: Roboto, "Helvetica Neue", sans-serif;
 }
 
+/* TODO(mdc-migration): The following rule targets internal classes of tabs that may no longer apply for the MDC version. */
 .mat-tab-body-content {
   overflow: hidden !important;
 }