From 4890220984a0815ff5b853c864ca7cfa16f4db84 Mon Sep 17 00:00:00 2001
From: David Kaltschmidt <david.kaltschmidt@gmail.com>
Date: Fri, 5 Feb 2016 16:56:39 +0100
Subject: [PATCH 1/3] Highlight selected topology

---
 client/app/styles/main.less | 42 ++++++++++++++++++++++++-------------
 1 file changed, 28 insertions(+), 14 deletions(-)

diff --git a/client/app/styles/main.less b/client/app/styles/main.less
index 72840f73be..2197f29292 100644
--- a/client/app/styles/main.less
+++ b/client/app/styles/main.less
@@ -24,6 +24,8 @@
 @primary-color: @weave-charcoal-blue;
 @background-color: lighten(@primary-color, 66%);
 @background-secondary-color: lighten(@background-color, 8%);
+@background-tertiary-color: lighten(@background-color, 10%);
+@background-dark-secondary-color: darken(@background-color, 2%);
 @background-dark-color: @primary-color;
 @background-medium-color: lighten(@background-dark-color, 55%);
 @text-color: lighten(@primary-color, 10%);
@@ -50,8 +52,7 @@
 }
 
 .palable {
-  transition: opacity .2s ease-in-out;
-  transition: border-color .2s ease-in-out;
+  transition: all .2s ease-in-out;
 }
 
 .hideable {
@@ -164,26 +165,23 @@ h2 {
 .topologies {
   float: left;
   margin: 4px 64px;
+  display: flex;
 
   .topologies-item {
-    margin: 0px 16px;
-    float: left;
+    margin: 0px 12px;
 
     &-label {
-      color: @text-secondary-color;
-      font-size: 16px;
+      color: @text-color;
+      font-size: 13px;
       text-transform: uppercase;
     }
 
   }
 
   .topologies-sub {
-    margin-top: 4px;
-
     &-item {
       &-label {
-        color: @text-secondary-color;
-        font-size: 12px;
+        font-size: 11px;
         text-transform: uppercase;
       }
     }
@@ -191,15 +189,31 @@ h2 {
 
   .topologies-item-main,
   .topologies-sub-item {
+    .palable;
     cursor: pointer;
+    padding: 4px 8px;
+    opacity: 0.7;
+    border-radius: 4px;
+    border: 1px solid @background-dark-secondary-color;
+    opacity: 0.7;
+    margin-bottom: 4px;
 
     &-active, &:hover {
-      .topologies-sub-item-label,
-      .topologies-item-label {
-        color: @text-color;
-      }
+      background-color: @background-tertiary-color;
+
     }
 
+    &-active {
+      opacity: 0.85;
+    }
+
+    &:hover {
+      opacity: 1;
+    }
+  }
+
+  .topologies-sub-item {
+    padding: 2px 8px;
   }
 
 }

From c3878eb6491b702caed2f59cca220736b9231221 Mon Sep 17 00:00:00 2001
From: David Kaltschmidt <david.kaltschmidt@gmail.com>
Date: Mon, 8 Feb 2016 10:43:05 +0100
Subject: [PATCH 2/3] No borders for topology links

* added .btn-opacity to control opacity for buttons on hover/selected
  state

* increased contrast in topology link labels

* removed dark background from status to not confuse with topo links
---
 client/app/styles/main.less | 56 +++++++++++++++++++++----------------
 1 file changed, 32 insertions(+), 24 deletions(-)

diff --git a/client/app/styles/main.less b/client/app/styles/main.less
index 2197f29292..78ba880f51 100644
--- a/client/app/styles/main.less
+++ b/client/app/styles/main.less
@@ -23,17 +23,17 @@
 
 @primary-color: @weave-charcoal-blue;
 @background-color: lighten(@primary-color, 66%);
-@background-secondary-color: lighten(@background-color, 8%);
-@background-tertiary-color: lighten(@background-color, 10%);
-@background-dark-secondary-color: darken(@background-color, 2%);
+@background-lighter-color: lighten(@background-color, 8%);
+@background-darker-color: darken(@background-color, 8%);
+@background-darker-secondary-color: darken(@background-color, 4%);
 @background-dark-color: @primary-color;
 @background-medium-color: lighten(@background-dark-color, 55%);
 @text-color: lighten(@primary-color, 10%);
-@text-secondary-color: lighten(@primary-color, 33%);
+@text-secondary-color: lighten(@primary-color, 27%);
 @text-tertiary-color: lighten(@primary-color, 50%);
 @border-light-color: lighten(@primary-color, 66%);
 @text-darker-color: @primary-color;
-@white: @background-secondary-color;
+@white: @background-lighter-color;
 
 @details-window-width: 420px;
 @details-window-padding-left: 36px;
@@ -75,6 +75,17 @@
   box-shadow: 0 10px 30px rgba(0, 0, 0, 0.19), 0 6px 10px rgba(0, 0, 0, 0.23);
 }
 
+.btn-opacity {
+  .palable;
+  opacity: 0.8;
+  &-selected {
+    opacity: 0.9;
+  }
+  &:hover {
+    opacity: 1;
+  }
+}
+
 * {
   box-sizing: border-box;
   -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
@@ -96,7 +107,7 @@ body {
 
 /* Space out content a bit */
 body {
-  background: linear-gradient(30deg, @background-color 0%, @background-secondary-color 100%);
+  background: linear-gradient(30deg, @background-color 0%, @background-lighter-color 100%);
   color: @text-color;
   line-height: 150%;
   font-family: @base-font;
@@ -136,6 +147,7 @@ h2 {
   width: 100%;
   height: 80px;
   z-index: 20;
+  display: flex;
 }
 
 .footer {
@@ -159,19 +171,16 @@ h2 {
   margin: -8px 0 0 64px;
   height: 64px;
   width: 250px;
-  float: left;
 }
 
 .topologies {
-  float: left;
-  margin: 4px 64px;
+  margin: 4px 0 0 128px;
   display: flex;
 
   .topologies-item {
-    margin: 0px 12px;
+    margin: 0px 8px;
 
     &-label {
-      color: @text-color;
       font-size: 13px;
       text-transform: uppercase;
     }
@@ -189,18 +198,19 @@ h2 {
 
   .topologies-item-main,
   .topologies-sub-item {
+    color: @text-secondary-color;
     .palable;
     cursor: pointer;
     padding: 4px 8px;
     opacity: 0.7;
     border-radius: 4px;
-    border: 1px solid @background-dark-secondary-color;
-    opacity: 0.7;
-    margin-bottom: 4px;
+    background-color: @background-lighter-color;
+    opacity: 0.8;
+    margin-bottom: 3px;
 
     &-active, &:hover {
-      background-color: @background-tertiary-color;
-
+      color: @text-color;
+      background-color: @background-darker-secondary-color;
     }
 
     &-active {
@@ -336,7 +346,7 @@ h2 {
 
   circle.shadow {
     stroke: none;
-    fill: @background-secondary-color;
+    fill: @background-lighter-color;
   }
 
   circle.node {
@@ -896,21 +906,19 @@ h2 {
   font-size: 85%;
 
   &-item {
-    background-color: darken(@background-color, 8%);
+    background-color: @background-darker-secondary-color;
     border-radius: 2px;
     padding: 4px 8px;
     width: 100%;
     margin-top: 2px;
+    color: @text-secondary-color;
 
-    &.status {
-      background-color: darken(@background-color, 4%);
-      color: @text-secondary-color;
-    }
     &.status-loading {
       animation: status-loading 2.0s infinite ease-in-out;
     }
 
     &-action {
+      .btn-opacity;
       float: right;
       text-transform: uppercase;
       font-weight: bold;
@@ -931,10 +939,10 @@ h2 {
 
 @keyframes status-loading {
   0%, 100% {
-    background-color: darken(@background-color, 4%);
+    background-color: @background-darker-secondary-color;
     color: @text-secondary-color;
   } 50% {
-    background-color: darken(@background-color, 8%);
+    background-color: @background-darker-color;
     color: @text-color;
   }
 }

From 88fb9fe4def7b09abcd80f3bcd658013069296fe Mon Sep 17 00:00:00 2001
From: David Kaltschmidt <david.kaltschmidt@gmail.com>
Date: Mon, 8 Feb 2016 12:21:43 +0100
Subject: [PATCH 3/3] Highlight topologies with no border

* removed background from sidebar items
---
 client/app/scripts/components/app.js | 17 +++++----
 client/app/styles/main.less          | 53 +++++++++++-----------------
 2 files changed, 32 insertions(+), 38 deletions(-)

diff --git a/client/app/scripts/components/app.js b/client/app/scripts/components/app.js
index 01cb5de6db..7ac137463d 100644
--- a/client/app/scripts/components/app.js
+++ b/client/app/scripts/components/app.js
@@ -72,7 +72,6 @@ export default class App extends React.Component {
   render() {
     const showingDetails = this.state.nodeDetails.size > 0;
     const showingTerminal = this.state.controlPipe;
-    const footer = `Version ${this.state.version} on ${this.state.hostname}`;
     // width of details panel blocking a view
     const detailsWidth = showingDetails ? 450 : 0;
     const topMargin = 100;
@@ -100,17 +99,23 @@ export default class App extends React.Component {
           topologyId={this.state.currentTopologyId} />
 
         <Sidebar>
-          <TopologyOptions options={this.state.currentTopologyOptions}
-            topologyId={this.state.currentTopologyId}
-            activeOptions={this.state.activeTopologyOptions} />
           <Status errorUrl={this.state.errorUrl} topology={this.state.currentTopology}
             topologiesLoaded={this.state.topologiesLoaded}
             websocketClosed={this.state.websocketClosed} />
+          <TopologyOptions options={this.state.currentTopologyOptions}
+            topologyId={this.state.currentTopologyId}
+            activeOptions={this.state.activeTopologyOptions} />
         </Sidebar>
 
         <div className="footer">
-          {footer}&nbsp;&nbsp;
-          <a href="https://gitreports.com/issue/weaveworks/scope" target="_blank">Report an issue</a>
+          <span className="footer-label">Version</span>
+          {this.state.version}
+          <span className="footer-label">on</span>
+          {this.state.hostname}
+          &nbsp;&nbsp;
+          <a className="footer-label" href="https://gitreports.com/issue/weaveworks/scope" target="_blank">
+            Report an issue
+          </a>
         </div>
       </div>
     );
diff --git a/client/app/styles/main.less b/client/app/styles/main.less
index 78ba880f51..80202f17e9 100644
--- a/client/app/styles/main.less
+++ b/client/app/styles/main.less
@@ -156,14 +156,20 @@ h2 {
   right: 48px;
   z-index: 20;
   color: @text-tertiary-color;
-  font-size: 85%;
+  font-size: 0.7rem;
+  opacity: 0.8;
 
   a {
     color: @text-secondary-color;
+    .btn-opacity;
+    text-decoration: none;
+    font-weight: bold;
+    font-size: 90%;
+  }
 
-    &:hover {
-      color: @text-color;
-    }
+  &-label {
+    text-transform: uppercase;
+    margin: 0 0.25em;
   }
 }
 
@@ -181,7 +187,7 @@ h2 {
     margin: 0px 8px;
 
     &-label {
-      font-size: 13px;
+      font-size: .8rem;
       text-transform: uppercase;
     }
 
@@ -190,7 +196,7 @@ h2 {
   .topologies-sub {
     &-item {
       &-label {
-        font-size: 11px;
+        font-size: .7rem;
         text-transform: uppercase;
       }
     }
@@ -198,13 +204,13 @@ h2 {
 
   .topologies-item-main,
   .topologies-sub-item {
+    // border: 1px solid @background-darker-secondary-color;
     color: @text-secondary-color;
     .palable;
     cursor: pointer;
     padding: 4px 8px;
     opacity: 0.7;
     border-radius: 4px;
-    background-color: @background-lighter-color;
     opacity: 0.8;
     margin-bottom: 3px;
 
@@ -228,22 +234,6 @@ h2 {
 
 }
 
-.topology-options {
-  margin-top: -16px;
-}
-
-.status {
-  &-icon {
-    font-size: 16px;
-    position: relative;
-    top: 1px;
-  }
-
-  &-label {
-    margin-left: 0.5em;
-  }
-}
-
 .nodes-chart {
 
   &-error {
@@ -901,17 +891,12 @@ h2 {
 .sidebar {
   position: fixed;
   bottom: 16px;
-  left: 20px;
-  width: 18em;
-  font-size: 85%;
+  left: 24px;
+  font-size: .7rem;
 
   &-item {
-    background-color: @background-darker-secondary-color;
-    border-radius: 2px;
-    padding: 4px 8px;
-    width: 100%;
-    margin-top: 2px;
     color: @text-secondary-color;
+    margin-top: 4px;
 
     &.status-loading {
       animation: status-loading 2.0s infinite ease-in-out;
@@ -919,16 +904,20 @@ h2 {
 
     &-action {
       .btn-opacity;
-      float: right;
       text-transform: uppercase;
       font-weight: bold;
       color: darken(@weave-orange, 25%);
       cursor: pointer;
       font-size: 90%;
+      margin-left: 0.5em;
     }
   }
 }
 
+.status {
+  text-transform: uppercase;
+}
+
 @keyframes blinking {
   0%, 100% {
     opacity: 1.0;