viewer: use a different background to separate command buttons and breadcrumbs

3 files changed, 2 insertions, 1 deletions

diff --git a/viewer/src/assets/scss/theme.scss b/viewer/src/assets/scss/theme.scss
index d62a823..7972d48 100644
--- a/viewer/src/assets/scss/theme.scss
+++ b/viewer/src/assets/scss/theme.scss
@@ -52,6 +52,7 @@ $panel-top-bgcolor: $palette-800;
 $panel-top-txtcolor: $primary;
 $panel-left-bgcolor: $palette-800;
 $panel-left-txtcolor: $primary;
+$command-buttons-bgcolor: $palette-700;
 $content-bgcolor: $palette-900;
 $toolbar-color: $palette-300;  // FIXME: should be named "scrollbar"
 $loader-color: $palette-800;
diff --git a/viewer/src/components/LdBreadcrumb.vue b/viewer/src/components/LdBreadcrumb.vue
index 171e96a..ebefc50 100644
--- a/viewer/src/components/LdBreadcrumb.vue
+++ b/viewer/src/components/LdBreadcrumb.vue
@@ -45,7 +45,6 @@ export default class LdBreadcrumb extends Vue {
 @import "@/assets/scss/theme.scss";
 
 .ld-breadcrumb {
-  border-left: 1px solid $disabled-color;
   padding-left: 15px;
   display: flex;
   list-style: none;
diff --git a/viewer/src/components/LdCommand.vue b/viewer/src/components/LdCommand.vue
index 8c6ccfc..54b602c 100644
--- a/viewer/src/components/LdCommand.vue
+++ b/viewer/src/components/LdCommand.vue
@@ -60,6 +60,7 @@ export default class LdCommand extends Vue {
 @import "@/assets/scss/theme.scss";
 
 .command-btns {
+  background-color: $command-buttons-bgcolor;
   justify-content: space-around;
   vertical-align: middle;
   align-items: center;