Finalize re-work of toolbar

Author: znorman-harris

apps/notebook/components/src/app/components/animation-controls/animation-controls.component.html

@@ -2,48 +2,53 @@
   fxLayout="row"
   fxLayoutAlign="center center"
   class="renderer-toolbar"
-  style="max-width: 350px"
+  style="max-width: 350px; padding-top: 5px"
 >
-  <!-- icons and buttons -->
-  <div fxLayout="row" fxLayoutAlign="center center" style="padding-right: 15px">
-    <p style="padding-right: 10px">{{ multiplierText() }}</p>
-    <mat-icon
-      svgIcon="fast-rewind"
-      (click)="slowDown()"
-      class="icon-button"
-    ></mat-icon>
-    <mat-icon
-      *ngIf="isPaused"
-      svgIcon="play"
-      (click)="pauseOrPlay()"
-      class="icon-button"
-    ></mat-icon>
-    <mat-icon
-      *ngIf="!isPaused"
-      svgIcon="pause"
-      (click)="pauseOrPlay()"
-      class="icon-button"
-    ></mat-icon>
-    <mat-icon
-      svgIcon="fast-forward"
-      (click)="speedUp()"
-      class="icon-button"
-    ></mat-icon>
-  </div>
+  <div fxLayout="row" fxLayoutAlign="center center" class="toolbar">
+    <!-- icons and buttons -->
+    <div
+      fxLayout="row"
+      fxLayoutAlign="center center"
+      style="padding-left: 10px; padding-right: 15px"
+    >
+      <p style="padding-right: 10px">{{ multiplierText() }}</p>
+      <mat-icon
+        svgIcon="fast-rewind"
+        (click)="slowDown()"
+        class="icon-button"
+      ></mat-icon>
+      <mat-icon
+        *ngIf="isPaused"
+        svgIcon="play"
+        (click)="pauseOrPlay()"
+        class="icon-button"
+      ></mat-icon>
+      <mat-icon
+        *ngIf="!isPaused"
+        svgIcon="pause"
+        (click)="pauseOrPlay()"
+        class="icon-button"
+      ></mat-icon>
+      <mat-icon
+        svgIcon="fast-forward"
+        (click)="speedUp()"
+        class="icon-button"
+      ></mat-icon>
+    </div>
 
-  <div class="custom-slider">
-    <input
-      type="range"
-      [value]="frame"
-      min="0"
-      max="{{ nFrames - 1 }}"
-      (mousedown)="pause()"
-      (mouseup)="play()"
-      (input)="onInputChange($event)"
-    />
-  </div>
+    <div class="custom-slider" style="padding-right: 10px">
+      <input
+        type="range"
+        [value]="frame"
+        min="0"
+        max="{{ nFrames - 1 }}"
+        (mousedown)="pause()"
+        (mouseup)="play()"
+        (input)="onInputChange($event)"
+      />
+    </div>
 
-  <!-- <mat-slider
+    <!-- <mat-slider
     style="width: 50%"
     min="0"
     max="{{ nFrames - 1 }}"
@@ -57,4 +62,5 @@
       (input)="onInputChange($event)"
     />
   </mat-slider> -->
+  </div>
 </div>

apps/notebook/components/src/app/components/map/map.component.html

@@ -3,7 +3,11 @@
 <div class="map-container cell-item-full-height" style="position: relative">
   <canvas #MapCanvas></canvas>
 
-  <div class="map-controls" fxLayout="row" fxLayoutAlign="space-around center">
+  <div
+    class="map-controls toolbar"
+    fxLayout="row"
+    fxLayoutAlign="space-around center"
+  >
     <mat-icon
       (click)="resetView()"
       class="icon-button"

apps/notebook/components/src/app/styles/shared-styles.scss

@@ -35,7 +35,7 @@ $cell-height-limit: 500px;
 // override class for more compact icon buttons without "<button>"
 .icon-button {
   cursor: pointer;
-  color: var(--vscode-activityBar-foreground);
+  // color: var(--vscode-activityBar-foreground);
 }
 
 .renderer-toolbar {
@@ -77,18 +77,30 @@ $cell-height-limit: 500px;
   max-width: calc(100% - 50px);
 }
 
+.toolbar {
+  color: var(--vscode-activityBar-foreground);
+  background: var(--vscode-activityBar-background);
+  border-radius: 10px;
+  padding: 5px;
+}
+
 .map-controls {
   position: absolute;
   left: 5px;
   bottom: 5px;
-  padding: 5px;
-  background: var(--vscode-activityBar-background);
-  border-radius: 10px;
 }
 
 .custom-slider {
   input[type='range'] {
-    accent-color: var(--vscode-activityBarBadge-background) !important;
+    accent-color: var(--vscode-activityBar-foreground) !important;
+    outline: var(--vscode-activityBar-foreground) !important;
+  }
+
+  ::-webkit-slider-thumb {
+    -webkit-appearance: none; /* Override default look */
+    outline-style: solid !important;
+    outline-width: 1px !important;
+    outline: var(--vscode-activityBar-foreground) !important;
   }
 
   :focus {