Style close buttons

googlemaps · Feb 5, 2024 · b8782b1 · b8782b1
1 parent 67dfa1b
commit b8782b1
Show file tree

Hide file tree

Showing 6 changed files with 42 additions and 23 deletions.
diff --git a/application/frontend/src/app/core/containers/csv-help-dialog/csv-help-dialog.component.html b/application/frontend/src/app/core/containers/csv-help-dialog/csv-help-dialog.component.html
@@ -1,10 +1,13 @@
-<h3 class="d-flex justify-content-between align-items-center">
-  <div class="strong">
-    What data can I upload via CSV?
-  </div>
-  <button mat-icon-button type="button" title="Cancel" (click)="cancel()">
+<h3 class="d-flex flex-column">
+  <button
+    mat-icon-button
+    class="small-close-button"
+    type="button"
+    title="Cancel"
+    (click)="cancel()">
     <mat-icon svgIcon="clear"></mat-icon>
   </button>
+  <div class="strong">What data can I upload via CSV?</div>
 </h3>
 <p>
   If you have data for vehicles, shipments, or vehicle operators in individual .csv files, you can

diff --git a/application/frontend/src/app/core/containers/csv-help-dialog/csv-help-dialog.component.ts b/application/frontend/src/app/core/containers/csv-help-dialog/csv-help-dialog.component.ts
@@ -17,9 +17,7 @@ import { MatDialogRef } from '@angular/material/dialog';
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class CsvHelpDialogComponent {
-  constructor(
-    private dialogRef: MatDialogRef<CsvHelpDialogComponent>
-  ) {}
+  constructor(private dialogRef: MatDialogRef<CsvHelpDialogComponent>) {}
 
   cancel(): void {
     this.dialogRef.close();

diff --git a/...ore/containers/scenario-solution-help-dialog/scenario-solution-help-dialog.component.html b/...ore/containers/scenario-solution-help-dialog/scenario-solution-help-dialog.component.html
@@ -1,10 +1,13 @@
-<h3 class="d-flex justify-content-between align-items-center">
-  <div class="strong">
-    What's the difference between a scenario and a solution?
-  </div>
-  <button mat-icon-button type="button" title="Cancel" (click)="cancel()">
+<h3 class="d-flex flex-column">
+  <button
+    mat-icon-button
+    class="small-close-button"
+    type="button"
+    title="Cancel"
+    (click)="cancel()">
     <mat-icon svgIcon="clear"></mat-icon>
   </button>
+  <div class="strong">What's the difference between a scenario and a solution?</div>
 </h3>
 <p>
   A scenario is a vehicle routing problem (VRP) request that Fleet Routing can solve. It consists of

diff --git a/.../core/containers/scenario-solution-help-dialog/scenario-solution-help-dialog.component.ts b/.../core/containers/scenario-solution-help-dialog/scenario-solution-help-dialog.component.ts
@@ -17,10 +17,7 @@ import { MatDialogRef } from '@angular/material/dialog';
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class ScenarioSolutionHelpDialogComponent {
-
-  constructor(
-    private dialogRef: MatDialogRef<ScenarioSolutionHelpDialogComponent>
-  ) {}
+  constructor(private dialogRef: MatDialogRef<ScenarioSolutionHelpDialogComponent>) {}
 
   cancel(): void {
     this.dialogRef.close();

diff --git a/application/frontend/src/app/core/containers/upload-dialog/upload-dialog.component.html b/application/frontend/src/app/core/containers/upload-dialog/upload-dialog.component.html
@@ -1,11 +1,14 @@
 <form [formGroup]="form" autocomplete="off" novalidate (ngSubmit)="solve()">
-  <h1 mat-dialog-title class="d-flex justify-content-between align-items-center">
-    <span>
-      Upload a scenario or solution
-    </span>
-    <button mat-icon-button type="button" title="Cancel" (click)="cancel()">
+  <h1 mat-dialog-title class="d-flex flex-column">
+    <button
+      mat-icon-button
+      class="small-close-button"
+      type="button"
+      title="Cancel"
+      (click)="cancel()">
       <mat-icon svgIcon="clear"></mat-icon>
     </button>
+    <span> Upload a scenario or solution </span>
   </h1>
   <div mat-dialog-content>
     <mat-divider class="mb-4"></mat-divider>
@@ -75,7 +78,6 @@ <h4 class="strong d-flex mb-2">
         <button
           type="button"
           mat-raised-button
-          cdkFocusInitial
           color="primary"
           (click)="selectFile()"
           [disabled]="validatingUpload">

diff --git a/application/frontend/src/styles/main.scss b/application/frontend/src/styles/main.scss
@@ -890,3 +890,19 @@ app-bulk-edit-unset {
 .blue-svg-icon mat-icon svg path {
   fill: $blue;
 }
+
+.small-close-button {
+  margin-left: auto !important;
+  width: 24px !important;
+  height: 24px !important;
+  line-height: 24px !important;
+
+  margin-right: -0.5rem !important;
+  margin-top: -0.5rem !important;
+
+  .mat-button-wrapper .mat-icon {
+    width: 20px !important;
+    height: 20px !important;
+    line-height: 20px !important;
+  }
+}