Update welcome page entry points

application/frontend/src/app/core/containers/app/app.component.ts

@@ -57,6 +57,7 @@ export class AppComponent {
       'dropoff',
       'edit',
       'help',
+      'input',
       'map',
       'maps',
       'more_vert',

application/frontend/src/app/welcome/containers/welcome-page/welcome-page.component.css

@@ -90,4 +90,16 @@ section:last-child {
   display: flex;
   justify-content: center;
   align-items: center;
-}
+}
+
+.main-entry-points {
+  display: flex;
+  align-items: flex-start;
+  gap: 1rem;
+  border-radius: var(--none, 0rem);
+}
+
+.entry-point-button {
+  border: 1px solid #4285f480;
+  background: #fff;
+}

application/frontend/src/app/welcome/containers/welcome-page/welcome-page.component.html

@@ -4,26 +4,43 @@
 </section>
 <section class="intro page-content">
   <p>
-    Fleetrouting App is an open source web application intended to showcase the functionality of GMP Route Optimization API (formerly Cloud Fleet Routing / CFR), and help  developers better evaluate and onboard to the product. It also serves as a sample UI implementation that demonstrates how a dispatcher planning app integrates with the Route Optimization API.
+    Fleetrouting App is an open source web application intended to showcase the functionality of GMP
+    Route Optimization API (formerly Cloud Fleet Routing / CFR), and help developers better evaluate
+    and onboard to the product. It also serves as a sample UI implementation that demonstrates how a
+    dispatcher planning app integrates with the Route Optimization API.
   </p>
   <p>
-    GMP Route Optimization API solves Vehicle Routing Problems (VRPs) for developers from across different industries such as Logistics, On Demand Deliveries, Field Services and more.
+    GMP Route Optimization API solves Vehicle Routing Problems (VRPs) for developers from across
+    different industries such as Logistics, On Demand Deliveries, Field Services and more.
   </p>
   <p>
-    <a href="https://cloud.google.com/optimization/docs/introduction/get_started" target="_blank">Learn more</a>
+    <a href="https://cloud.google.com/optimization/docs/introduction/get_started" target="_blank"
+      >Learn more</a
+    >
   </p>
 </section>
 <section class="entry-points d-flex page-content">
-  <p class="mat-body-strong mb-0">Select one of the options below to start</p>
-  <div class="d-flex">
-    <button type="button" mat-flat-button color="primary" (click)="upload()">
-      Upload existing scenario or solution
+  <p class="mat-body-strong mb-0">Select one of the options below to start.</p>
+  <div class="d-flex main-entry-points">
+    <button
+      type="button"
+      mat-stroked-button
+      color="primary"
+      class="entry-point-button"
+      (click)="upload()">
+      <mat-icon fontIcon="input"></mat-icon>
+      <span class="ml-3">Load...</span>
     </button>
+    <div class="col"></div>
     <div class="col">
-    </div>
-    <div class="col">
-      <button type="button" mat-stroked-button color="primary" (click)="newScenario()">
-        Build a new scenario
+      <button
+        type="button"
+        mat-stroked-button
+        color="primary"
+        class="entry-point-button"
+        (click)="newScenario()">
+        <mat-icon fontIcon="add"></mat-icon>
+        <span class="ml-2">Create new</span>
       </button>
     </div>
   </div>
@@ -41,11 +58,9 @@
   <p>
     <a (click)="onHelp()"> App help docs </a>
   </p>
-  <p>
-    For questions, reach out at [email protected].
-  </p>
+  <p>For questions, reach out at [email protected].</p>
   <p>
     By using this demo app you agree to the terms and conditions of the following license:
     <a href="https://cloud.google.com/maps-platform/terms" target="_blank">Google Maps Platform</a>
   </p>
-</section>
+</section>