swap route control buttons

public/css/app.css

@@ -305,21 +305,26 @@ button,
 #route-page fieldset {
   display: grid;
   padding: 0;
-  grid-template-columns: repeat(3, minmax(0, 1fr));
+  grid-template-columns: repeat(3, var(--icon-button-size));
-  gap: .5rem;
+  justify-content: end;
+  gap: .65rem;
   margin: 0 0 1rem;
 }
 
 #route-page fieldset button.ui-button {
   display: grid;
   place-items: center;
-  min-width: 0;
+  width: var(--icon-button-size);
-  min-height: 3.25rem;
+  height: var(--icon-button-size);
+  min-width: 44px;
+  min-height: 44px;
   box-sizing: border-box;
-  padding: .55rem;
+  padding: .75rem;
-  border: 1px solid transparent;
+  border: 1px solid #c8d3ca;
-  border-radius: .55rem;
+  border-radius: 1rem;
-  box-shadow: 0 .12rem .35rem rgba(0, 0, 0, .12);
+  background: var(--surface);
+  box-shadow: 0 .08rem .2rem rgba(0, 0, 0, .06);
+  transition: background-color 150ms ease, border-color 150ms ease;
   cursor: pointer;
   touch-action: manipulation;
 }
@@ -335,8 +340,8 @@ button,
 }
 
 #route-page fieldset button.ui-button img {
-  width: 2rem;
+  width: 1.5rem;
-  height: 2rem;
+  height: 1.5rem;
   pointer-events: none;
 }
 #route-page fieldset > legend,
@@ -351,19 +356,8 @@ button,
   border: 0;
 }
 
-#start-route {
+#route-page #start-route {
-  background: var(--primary);
+  background: #e7f1e9;
-  border-color: var(--primary-dark);
-}
-
-#pause-route {
-  background: #9a6500;
-  border-color: #704a00;
-}
-
-#stop-route {
-  background: #9b2c2c;
-  border-color: #701f1f;
 }
 #slideshow {
   overflow: hidden;
@@ -504,20 +498,24 @@ button,
   }
 
   .app-page > header .back-button.ui-button:hover,
-  .app-page > header .back-button.ui-button:focus,
+  .app-page > header .back-button.ui-button:focus {
-  #start-route:not(:disabled):hover,
-  #start-route:not(:disabled):focus {
     background: var(--primary-dark);
     color: #fff;
   }
+  #route-page #start-route:not(:disabled):hover {
+    background: #dceade;
+    border-color: var(--primary);
+  }
   #pause-route:not(:disabled):hover,
   #pause-route:not(:disabled):focus {
-    background: #704a00;
+    background: #fff8d6;
+    border-color: #9a6500;
   }
 
   #stop-route:not(:disabled):hover,
   #stop-route:not(:disabled):focus {
-    background: #701f1f;
+    background: #fff1ef;
+    border-color: #9b2c2c;
   }
 }
 

public/images/icons/pause.svg

@@ -1 +1,3 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" role="img" aria-hidden="true"><path fill="#fff" d="M12 8h9v32h-9zm15 0h9v32h-9z"/></svg>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" fill="none" stroke="#9a6500" stroke-width="6" stroke-linecap="round" aria-hidden="true">
+  <path d="M17 13v22m14-22v22"/>
+</svg>

public/images/icons/play.svg

@@ -1 +1,3 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" role="img" aria-hidden="true"><path fill="#fff" d="M14 8v32l26-16z"/></svg>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" fill="none" stroke="#315d3a" stroke-width="4" stroke-linejoin="round" aria-hidden="true">
+  <path d="M17 12 36 24 17 36Z"/>
+</svg>

public/images/icons/stop.svg

@@ -1 +1,3 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" role="img" aria-hidden="true"><path fill="#fff" d="M10 10h28v28H10z"/></svg>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" fill="none" stroke="#9b2c2c" stroke-width="4" aria-hidden="true">
+  <rect x="13" y="13" width="22" height="22" rx="4"/>
+</svg>