Merge pull request #1926 from weaveworks/1151-improve-view-node-in-topo

Improve view-node-in-topo button usability

client/app/scripts/components/node-details.js

@@ -54,7 +54,9 @@ export class NodeDetails extends React.Component {
       <div className="node-details-tools-wrapper">
         <div className="node-details-tools">
           {showSwitchTopology && <span title={topologyTitle}
-            className="fa fa-exchange" onClick={this.handleShowTopologyForNode} />}
+            className="fa fa-long-arrow-left" onClick={this.handleShowTopologyForNode}>
+            <span>Show in <span>{this.props.topologyId.replace(/-/g, ' ')}</span></span>
+          </span>}
           <span title="Close details" className="fa fa-close" onClick={this.handleClickClose} />
         </div>
       </div>

client/app/styles/main.less

@@ -619,7 +619,7 @@ h2 {
     top: 6px;
     right: 8px;
 
-    span {
+    > span {
       .btn-opacity;
       padding: 4px 5px;
       margin-left: 2px;
@@ -627,7 +627,19 @@ h2 {
       color: @white;
       cursor: pointer;
       border: 1px solid rgba(255, 255, 255, 0);
-      border-radius: 10%;
+      border-radius: 4px;
+
+      span {
+        font-family: @base-font;
+        font-size: 0.9em;
+        margin-left: 4px;
+
+        span {
+          font-size: 1em;
+          margin-left: 0;
+          text-transform: uppercase;
+        }
+      }
 
       &:hover {
         border-color: rgba(255, 255, 255, 0.6);