Update styling

googlemaps · Jul 12, 2024 · 2aee895 · 2aee895
1 parent f6743bb
commit 2aee895
Show file tree

Hide file tree

Showing 4 changed files with 20 additions and 8 deletions.
diff --git a/application/frontend/src/app/core/containers/scenario-kpis/scenario-kpis.component.html b/application/frontend/src/app/core/containers/scenario-kpis/scenario-kpis.component.html
@@ -15,7 +15,7 @@
       {{ kpis.shipmentKpis.demands[1].selected | number }} {{ kpis.shipmentKpis.demands[1].type }}
     </div>
     <div class="metric-box-value" *ngIf="kpis.shipmentKpis.demands?.length > 2">
-      <a (click)="showAllKpis()">View more</a>
+      <a (click)="showAllKpis()">View more...</a>
     </div>
   </div>
   <div class="metric-box">
@@ -29,7 +29,7 @@
       {{ kpis.vehicleKpis.capacities[1].type }}
     </div>
     <div class="metric-box-value" *ngIf="kpis.vehicleKpis.capacities?.length > 2">
-      <a (click)="showAllKpis()">View more</a>
+      <a (click)="showAllKpis()">View more...</a>
     </div>
   </div>
   <div class="metric-box">

diff --git a/...ontend/src/app/shared/components/load-demands-metrics/load-demands-metrics.component.html b/...ontend/src/app/shared/components/load-demands-metrics/load-demands-metrics.component.html
@@ -1,6 +1,6 @@
 <div class="title" mat-dialog-title>
   <div class="m-0 mr-6">Total Scenario Load Demands</div>
-  <button mat-icon-button type="button" title="Cancel" matDialogClose="">
+  <button mat-icon-button type="button" title="Cancel" class="close-button" matDialogClose="">
     <mat-icon svgIcon="clear"></mat-icon>
   </button>
 </div>

diff --git a/...ontend/src/app/shared/components/load-demands-metrics/load-demands-metrics.component.scss b/...ontend/src/app/shared/components/load-demands-metrics/load-demands-metrics.component.scss
@@ -4,11 +4,22 @@
   text-align: left;
 }
 
+table {
+  border-spacing: 20px 0;
+  margin-left: -20px;
+  margin-right: -20px;
+}
+
+.close-button {
+  margin-top: -1rem;
+  margin-right: -1rem;
+}
+
 .title {
   display: flex;
   justify-content: space-between;
   align-items: center;
-  font-size: 18px;
+  font-size: 16px;
   line-height: 24px;
   font-weight: 400;
   letter-spacing: 0.15px;
@@ -17,10 +28,11 @@
 
 .kpi-title {
   font-weight: 400;
-  font-size: 16px;
+  font-size: 12px;
   line-height: 24px;
 
   padding-right: 35px;
+  margin-right: 20px;
 
   &:last-child {
     padding-right: 0;

diff --git a/application/frontend/src/styles/main.scss b/application/frontend/src/styles/main.scss
@@ -960,7 +960,7 @@ app-post-solve-map-legend .legend-panel mat-checkbox label .mat-checkbox-label {
   background-color: #f3f8ff;
   border-radius: 5px;
   padding: 5px 20px;
-  text-align: center;
+  text-align: left;
   flex: 1;
   border: 1px solid #d5dee5;
   box-shadow: 0 1px 5px rgba(0, 0, 0, 0.1);
@@ -980,13 +980,13 @@ app-post-solve-map-legend .legend-panel mat-checkbox label .mat-checkbox-label {
 .metric-box-title {
   color: #5f6368;
   font-weight: 300;
-  font-size: 14px;
+  font-size: 12px;
 }
 
 .metric-box-value {
   color: $blue;
   font-weight: 500;
-  font-size: 16px;
+  font-size: 14px;
   line-height: 24px;
 }