High contrast mode switch

* added button to the bottom right to switch to higher contrast,
* suitable for projectors
* increased contrast between background and text colors
* thicker strokes around chart elements
* ensure yellow details panel backgrounds are darker

client/app/scripts/components/app.js

@@ -51,7 +51,7 @@ export default class App extends React.Component {
     AppStore.addListener(this.onChange);
     window.addEventListener('keyup', this.onKeyPress);
 
-    getRouter().start({hashbang: true});
+    getRouter(this.props.base).start({hashbang: true});
     if (!AppStore.isRouteSet()) {
       // dont request topologies when already done via router
       getTopologies(AppStore.getActiveTopologyOptions());
@@ -75,6 +75,10 @@ export default class App extends React.Component {
     // width of details panel blocking a view
     const detailsWidth = showingDetails ? 450 : 0;
     const topMargin = 100;
+    const contrastMode = this.props.base.indexOf('contrast') > -1;
+    // link url to switch contrast with current UI state
+    const otherContrastModeUrl = contrastMode ? '/' : '/contrast.html';
+    const otherContrastModeTitle = contrastMode ? 'Switch to normal contrast' : 'Switch to high contrast';
 
     return (
       <div className="app">
@@ -112,9 +116,12 @@ export default class App extends React.Component {
           {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
+          &nbsp;
+          <a className="footer-label footer-label-icon" href={otherContrastModeUrl} title={otherContrastModeTitle}>
+            <span className="fa fa-adjust" />
+          </a>
+          <a className="footer-label footer-label-icon" href="https://gitreports.com/issue/weaveworks/scope" target="_blank" title="Report an issue">
+            <span className="fa fa-bug" />
           </a>
         </div>
       </div>

client/app/scripts/contrast-main.js

@@ -0,0 +1,9 @@
+require('font-awesome-webpack');
+require('../styles/contrast.less');
+
+import React from 'react';
+import ReactDOM from 'react-dom';
+
+import App from './components/app.js';
+
+ReactDOM.render(<App base="/contrast.html" />, document.getElementById('app'));

client/app/scripts/main.js

@@ -6,4 +6,4 @@ import ReactDOM from 'react-dom';
 
 import App from './components/app.js';
 
-ReactDOM.render(<App/>, document.getElementById('app'));
+ReactDOM.render(<App base="" />, document.getElementById('app'));

client/app/scripts/utils/color-utils.js

@@ -59,7 +59,9 @@ export function getNodeColorDark(text = '', secondText = '', isPseudo = false) {
   let hsl = color.hsl();
 
   // ensure darkness
-  if (hsl.l > 0.7) {
+  if (hsl.h > 20 && hsl.h < 120) {
+    hsl = hsl.darker(2);
+  } else if (hsl.l > 0.7) {
     hsl = hsl.darker(1.5);
   } else {
     hsl = hsl.darker(1);

client/app/scripts/utils/router-utils.js

@@ -16,7 +16,9 @@ export function updateRoute() {
   const state = AppStore.getAppState();
   const stateUrl = JSON.stringify(state);
   const dispatch = false;
-  const urlStateString = window.location.hash.replace('#!/state/', '') || '{}';
+  const urlStateString = window.location.hash
+    .replace('#!/state/', '')
+    .replace('#!/', '') || '{}';
   const prevState = JSON.parse(urlStateString);
 
   if (shouldReplaceState(prevState, state)) {
@@ -36,6 +38,7 @@ page('/state/:state', function(ctx) {
   route(state);
 });
 
-export function getRouter() {
+export function getRouter(base) {
+  page.base(base);
   return page;
 }

client/app/scripts/utils/web-api-utils.js

@@ -8,8 +8,6 @@ import { clearControlError, closeWebsocket, openWebsocket, receiveError,
 
 import { API_INTERVAL, TOPOLOGY_INTERVAL } from '../constants/timer';
 
-const wsProto = location.protocol === 'https:' ? 'wss' : 'ws';
-const wsUrl = wsProto + '://' + location.host + location.pathname.replace(/\/$/, '');
 const log = debug('scope:web-api-utils');
 
 const reconnectTimerInterval = 5000;
@@ -47,6 +45,9 @@ export function basePath(urlPath) {
   return parts.join('/').replace(/\/$/, '');
 }
 
+const wsProto = location.protocol === 'https:' ? 'wss' : 'ws';
+const wsUrl = wsProto + '://' + location.host + basePath(location.pathname);
+
 function createWebsocket(topologyUrl, optionsQuery) {
   if (socket) {
     socket.onclose = null;

client/app/styles/contrast.less

@@ -0,0 +1,31 @@
+@import "main";
+
+@background-color: lighten(@primary-color, 75%);
+@background-lighter-color: lighten(@background-color, 10%);
+@background-darker-color: darken(@background-color, 20%);
+@background-darker-secondary-color: darken(@background-color, 15%);
+@background-dark-color: @primary-color;
+@text-color: darken(@primary-color, 20%);
+@text-secondary-color: lighten(@text-color, 10%);
+@text-tertiary-color: lighten(@text-color, 20%);
+@border-light-color: lighten(@text-color, 50%);
+@text-darker-color: darken(@text-color, 20%);
+@white: @background-lighter-color;
+
+@node-opacity-blurred: 0.6;
+@node-highlight-fill-opacity: 0.3;
+@node-highlight-stroke-opacity: 0.5;
+@node-highlight-stroke-width: 3px;
+@node-border-stroke-width: 6px;
+@node-pseudo-border-stroke-width: 2px;
+@node-pseudo-opacity: 1;
+@edge-highlight-opacity: 0.3;
+@edge-opacity-blurred: 0;
+@edge-opacity: 0.5;
+@edge-link-stroke-width: 3px;
+
+@btn-opacity-default: 1;
+@btn-opacity-hover: 1;
+@btn-opacity-selected: 1;
+
+@link-opacity-default: 1;