upgrade and migrate

src/styles.scss

@@ -1,5 +1,5 @@
 // Custom Theming for Angular Material
-@use '@angular/material'as mat;
+@use '@angular/material' as mat;
 // For more information: https://material.angular.io/guide/theming
 // Plus imports for other components in your app.
 
@@ -15,15 +15,15 @@
 // (imported above). For each palette, you can optionally specify a default, lighter, and darker
 // hue. Available color palettes: https://material.io/design/color/
 $light-theme: mat.define-light-theme((color: (primary: $light-primary,
-      accent: $light-accent,
-      warn: $light-warn,
-    )));
+        accent: $light-accent,
+        warn: $light-warn,
+      )));
 
 // Define an alternate dark theme.
 $dark-theme: mat.define-dark-theme((color: (primary: $dark-primary,
-      accent: $light-accent,
-      warn: $light-warn,
-    )));
+        accent: $light-accent,
+        warn: $light-warn,
+      )));
 
 
 
@@ -83,6 +83,14 @@ body {
   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !important;
 }
 
+a {
+  text-decoration: none;
+}
+
+button {
+  font-size: inherit;
+}
+
 app-root,
 app-main {
   height: 100%;
@@ -107,6 +115,12 @@ app-main {
 mat-card {
   max-width: 400px;
   margin: 2em auto;
+
+  mat-card-actions {
+    &>* {
+      margin-right: 15px;
+    }
+  }
 }
 
 mat-form-field {
@@ -156,6 +170,31 @@ qr-code canvas {
   max-width: 400px !important;
 }
 
+.flex {
+  display: flex;
+
+  &.wrap {
+    flex-wrap: wrap;
+  }
+
+  &.column {
+    flex-direction: column;
+  }
+
+  &.justify-center {
+    justify-content: center;
+  }
+
+  &.justify-between {
+    justify-content: space-between;
+  }
+
+  &.align-center {
+    align-items: center;
+  }
+
+}
+
 .spacer {
   flex: 1 1 auto;
 }
@@ -182,33 +221,33 @@ mat-sidenav-container {
   margin-left: auto;
   margin-bottom: 15px;
 
-  @media screen and (min-width: 576px) {
+  @media (min-width: 576px) {
     width: 540px;
   }
 
-  @media screen and (min-width: 768px) {
+  @media (min-width: 768px) {
     width: 580px;
   }
 
-  @media screen and (min-width: 992px) {
+  @media (min-width: 992px) {
     width: 820px;
   }
 
-  @media screen and (min-width: 1200px) {
+  @media (min-width: 1200px) {
     width: 1000px;
   }
 }
 
 .text-center {
-  text-align: center;
+  text-align: center !important;
 }
 
 .text-justify {
-  text-align: justify;
+  text-align: justify !important;
 }
 
 .text-right {
-  text-align: right;
+  text-align: right !important;
 }
 
 .text-warning {
@@ -217,7 +256,7 @@ mat-sidenav-container {
 
 .align-right {
   display: flex;
-  padding: 21px 0;
+  padding: 21px !important;
   justify-content: flex-end;
 }
 
@@ -322,11 +361,16 @@ table {
   }
 }
 
-.help-button {
-  float: right;
+mat-card-footer,
+footer {
   position: relative;
-  top: -40px;
-  right: 15px;
+
+  .help-button {
+    float: right;
+    position: absolute;
+    top: -40px;
+    right: 15px;
+  }
 }
 
 mat-card.success {
@@ -369,4 +413,4 @@ mat-card.success {
     }
 
   }
-}
+}