Change style for delete certificate dialog

Author: sofyakurilova

modules/ui/src/app/components/simple-dialog/simple-dialog.component.html

@@ -18,7 +18,7 @@
   {{ data.content }}
 </p>
 
-<mat-dialog-actions align="end" class="delete-form-actions">
+<mat-dialog-actions align="end" class="simple-dialog-actions">
   <button
     cdkFocusInitial
     aria-label="Cancel"

modules/ui/src/app/components/simple-dialog/simple-dialog.component.scss

@@ -14,6 +14,7 @@
  * limitations under the License.
  */
 @use 'colors';
+@use 'variables';
 @use 'mixins';
 
 ::ng-deep :root {
@@ -22,26 +23,31 @@
 
 :host {
   @include mixins.dialog;
-  padding: 24px 16px 8px 24px;
+  padding: 24px;
   gap: 10px;
 }
 
 .simple-dialog-title {
-  color: colors.$grey-900;
   font-size: 18px;
   line-height: 24px;
   padding: 0;
+  text-align: center;
+  color: colors.$on-surface;
+  font-family: variables.$font-primary;
 }
 
 .simple-dialog-content {
-  font-family: Roboto, sans-serif;
+  font-family: variables.$font-text;
   font-size: 14px;
   line-height: 20px;
   letter-spacing: 0.2px;
-  color: colors.$grey-800;
+  color: colors.$on-surface-variant;
 }
 
 .simple-dialog-actions {
   padding: 0;
   min-height: 30px;
+  button {
+    font-family: variables.$font-text;
+  }
 }

modules/ui/src/app/pages/certificates/certificates.component.ts

@@ -72,7 +72,7 @@ export class CertificatesComponent implements OnDestroy {
       autoFocus: true,
       hasBackdrop: true,
       disableClose: true,
-      panelClass: 'simple-dialog',
+      panelClass: ['simple-dialog', 'delete-certificate'],
     });
 
     dialogRef

modules/ui/src/app/pages/certificates/components/certificates-table/certificates-table.component.scss

@@ -31,6 +31,10 @@
   );
 }
 
+::ng-deep .delete-certificate app-simple-dialog {
+  width: 329px;
+}
+
 .table-cell-actions {
   text-align: right;
 }