From 3432e70fa13315a97887663c0aab08fc2e64c5b1 Mon Sep 17 00:00:00 2001
From: Filip Barl <filip@weave.works>
Date: Wed, 2 Oct 2019 15:28:00 +0200
Subject: [PATCH 01/12] Prototype global inject of Scope theme

---
 client/app/scripts/components/app.js          | 81 ++++++++++---------
 client/app/scripts/components/global-style.js |  9 +++
 2 files changed, 52 insertions(+), 38 deletions(-)
 create mode 100644 client/app/scripts/components/global-style.js

diff --git a/client/app/scripts/components/app.js b/client/app/scripts/components/app.js
index b9a4ebc74..e27417fe7 100644
--- a/client/app/scripts/components/app.js
+++ b/client/app/scripts/components/app.js
@@ -8,6 +8,7 @@ import { debounce, isEqual } from 'lodash';
 import { ThemeProvider } from 'styled-components';
 import theme from 'weaveworks-ui-components/lib/theme';
 
+import GlobalStyle from './global-style';
 import Logo from './logo';
 import Footer from './footer';
 import Sidebar from './sidebar';
@@ -205,52 +206,56 @@ class App extends React.Component {
     const isIframe = window !== window.top;
 
     return (
-      <ThemeProvider theme={theme}>
-        <div className={className} ref={this.saveAppRef}>
-          {showingDebugToolbar() && <DebugToolbar />}
+      <ThemeProvider theme={{...theme, scope: { background: contrastMode ? '#f00' : '#00f' }}}>
+        <>
+          <GlobalStyle />
 
-          {showingHelp && <HelpPanel />}
+          <div className={className} ref={this.saveAppRef}>
+            {showingDebugToolbar() && <DebugToolbar />}
 
-          {showingTroubleshootingMenu && <TroubleshootingMenu />}
+            {showingHelp && <HelpPanel />}
 
-          {showingDetails && (
-          <Details
-            renderNodeDetailsExtras={this.props.renderNodeDetailsExtras}
-          />
-          )}
+            {showingTroubleshootingMenu && <TroubleshootingMenu />}
 
-          <div className="header">
-            {timeTravelSupported && this.props.renderTimeTravel()}
+            {showingDetails && (
+            <Details
+              renderNodeDetailsExtras={this.props.renderNodeDetailsExtras}
+            />
+            )}
 
-            <div className="selectors">
-              <div className="logo">
-                {!isIframe
-                  && (
-                  <svg width="100%" height="100%" viewBox="0 0 1089 217">
-                    <Logo />
-                  </svg>
-                  )
-                }
+            <div className="header">
+              {timeTravelSupported && this.props.renderTimeTravel()}
+
+              <div className="selectors">
+                <div className="logo">
+                  {!isIframe
+                    && (
+                    <svg width="100%" height="100%" viewBox="0 0 1089 217">
+                      <Logo />
+                    </svg>
+                    )
+                  }
+                </div>
+                <Search />
+                <Topologies />
+                <ViewModeSelector />
+                <TimeControl />
               </div>
-              <Search />
-              <Topologies />
-              <ViewModeSelector />
-              <TimeControl />
             </div>
+
+            <Nodes />
+
+            <Sidebar classNames={isTableViewMode ? 'sidebar-gridmode' : ''}>
+              {showingNetworkSelector && isGraphViewMode && <NetworkSelector />}
+              {!isResourceViewMode && <Status />}
+              {!isResourceViewMode && <TopologyOptions />}
+            </Sidebar>
+
+            <Footer />
+
+            <Overlay faded={timeTravelTransitioning} />
           </div>
-
-          <Nodes />
-
-          <Sidebar classNames={isTableViewMode ? 'sidebar-gridmode' : ''}>
-            {showingNetworkSelector && isGraphViewMode && <NetworkSelector />}
-            {!isResourceViewMode && <Status />}
-            {!isResourceViewMode && <TopologyOptions />}
-          </Sidebar>
-
-          <Footer />
-
-          <Overlay faded={timeTravelTransitioning} />
-        </div>
+        </>
       </ThemeProvider>
     );
   }
diff --git a/client/app/scripts/components/global-style.js b/client/app/scripts/components/global-style.js
new file mode 100644
index 000000000..0e6cbcb93
--- /dev/null
+++ b/client/app/scripts/components/global-style.js
@@ -0,0 +1,9 @@
+import { createGlobalStyle } from 'styled-components';
+
+const GlobalStyle = createGlobalStyle`
+  div {
+    background: ${props => props.theme.scope.background};
+  }
+`;
+
+export default GlobalStyle;

From 1aa9080576b73a172a34d209cd1ae2fcab1431b5 Mon Sep 17 00:00:00 2001
From: Filip Barl <filip@weave.works>
Date: Wed, 2 Oct 2019 19:13:52 +0200
Subject: [PATCH 02/12] Created styled components Scope themes

---
 client/app/scripts/components/app.js          |   6 +-
 client/app/scripts/components/global-style.js | 169 ++++++++++++++++++
 client/app/scripts/themes/contrast.js         |  38 ++++
 client/app/scripts/themes/default.js          |  45 +++++
 client/app/styles/main.scss                   |   1 -
 client/app/styles/terminal.scss               | 167 -----------------
 client/package.json                           |   1 +
 client/yarn.lock                              |   7 +
 8 files changed, 264 insertions(+), 170 deletions(-)
 create mode 100644 client/app/scripts/themes/contrast.js
 create mode 100644 client/app/scripts/themes/default.js
 delete mode 100644 client/app/styles/terminal.scss

diff --git a/client/app/scripts/components/app.js b/client/app/scripts/components/app.js
index e27417fe7..8e0c80b97 100644
--- a/client/app/scripts/components/app.js
+++ b/client/app/scripts/components/app.js
@@ -6,7 +6,7 @@ import { connect } from 'react-redux';
 import { debounce, isEqual } from 'lodash';
 
 import { ThemeProvider } from 'styled-components';
-import theme from 'weaveworks-ui-components/lib/theme';
+import commonTheme from 'weaveworks-ui-components/lib/theme';
 
 import GlobalStyle from './global-style';
 import Logo from './logo';
@@ -55,6 +55,8 @@ import {
   isTableViewModeSelector,
   isGraphViewModeSelector,
 } from '../selectors/topology';
+import defaultTheme from '../themes/default';
+import contrastTheme from '../themes/contrast';
 import { VIEWPORT_RESIZE_DEBOUNCE_INTERVAL } from '../constants/timer';
 import {
   ESC_KEY_CODE,
@@ -206,7 +208,7 @@ class App extends React.Component {
     const isIframe = window !== window.top;
 
     return (
-      <ThemeProvider theme={{...theme, scope: { background: contrastMode ? '#f00' : '#00f' }}}>
+      <ThemeProvider theme={{...commonTheme, scope: contrastMode ? contrastTheme : defaultTheme }}>
         <>
           <GlobalStyle />
 
diff --git a/client/app/scripts/components/global-style.js b/client/app/scripts/components/global-style.js
index 0e6cbcb93..9ec75a442 100644
--- a/client/app/scripts/components/global-style.js
+++ b/client/app/scripts/components/global-style.js
@@ -1,9 +1,178 @@
 import { createGlobalStyle } from 'styled-components';
+import { color } from 'weaveworks-ui-components/lib/theme/selectors';
 
 const GlobalStyle = createGlobalStyle`
   div {
     background: ${props => props.theme.scope.background};
   }
+
+  /**
+  * Copyright (c) 2014 The xterm.js authors. All rights reserved.
+  * Copyright (c) 2012-2013, Christopher Jeffrey (MIT License)
+  * https://github.com/chjj/term.js
+  * @license MIT
+  *
+  * Permission is hereby granted, free of charge, to any person obtaining a copy
+  * of this software and associated documentation files (the "Software"), to deal
+  * in the Software without restriction, including without limitation the rights
+  * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+  * copies of the Software, and to permit persons to whom the Software is
+  * furnished to do so, subject to the following conditions:
+  *
+  * The above copyright notice and this permission notice shall be included in
+  * all copies or substantial portions of the Software.
+  *
+  * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+  * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+  * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+  * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+  * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+  * THE SOFTWARE.
+  *
+  * Originally forked from (with the author's permission):
+  *   Fabrice Bellard's javascript vt100 for jslinux:
+  *   http://bellard.org/jslinux/
+  *   Copyright (c) 2011 Fabrice Bellard
+  *   The original design remains. The terminal itself
+  *   has been extended to include xterm CSI codes, among
+  *   other features.
+  */
+
+  /**
+  *  Default styles for xterm.js
+  */
+
+  .xterm {
+      font-family: $font-family-monospace;
+      font-feature-settings: "liga" 0;
+      position: relative;
+      user-select: none;
+      /* stylelint-disable property-no-vendor-prefix */
+      -ms-user-select: none;
+      -webkit-user-select: none;
+      /* stylelint-enable property-no-vendor-prefix */
+  }
+
+  .xterm.focus,
+  .xterm:focus {
+      outline: none;
+  }
+
+  .xterm .xterm-helpers {
+      position: absolute;
+      top: 0;
+      /**
+      * The z-index of the helpers must be higher than the canvases in order for
+      * IMEs to appear on top.
+      */
+      /* stylelint-disable sh-waqar/declaration-use-variable */
+      z-index: 10;
+      /* stylelint-enable sh-waqar/declaration-use-variable */
+  }
+
+  .xterm .xterm-helper-textarea {
+      /*
+      * HACK: to fix IE's blinking cursor
+      * Move textarea out of the screen to the far left, so that the cursor is not visible.
+      */
+      position: absolute;
+      opacity: 0;
+      left: -9999em;
+      top: 0;
+      width: 0;
+      height: 0;
+      /* stylelint-disable sh-waqar/declaration-use-variable */
+      z-index: -10;
+      /* stylelint-enable sh-waqar/declaration-use-variable */
+      /** Prevent wrapping so the IME appears against the textarea at the correct position */
+      white-space: nowrap;
+      overflow: hidden;
+      resize: none;
+  }
+
+  .xterm .composition-view {
+      /* TODO: Composition position got messed up somewhere */
+      background: ${color('black')};
+      color: ${color('white')};
+      display: none;
+      position: absolute;
+      white-space: nowrap;
+      z-index: ${props => props.theme.layers.front};
+  }
+
+  .xterm .composition-view.active {
+      display: block;
+  }
+
+  .xterm .xterm-viewport {
+      /* On OS X this is required in order for the scroll bar to appear fully opaque */
+      background-color: ${color('black')};
+      overflow-y: scroll;
+      cursor: default;
+      position: absolute;
+      right: 0;
+      left: 0;
+      top: 0;
+      bottom: 0;
+  }
+
+  .xterm .xterm-screen {
+      position: relative;
+  }
+
+  .xterm .xterm-screen canvas {
+      position: absolute;
+      left: 0;
+      top: 0;
+  }
+
+  .xterm .xterm-scroll-area {
+      visibility: hidden;
+  }
+
+  .xterm-char-measure-element {
+      display: inline-block;
+      visibility: hidden;
+      position: absolute;
+      top: 0;
+      left: -9999em;
+      line-height: normal;
+  }
+
+  .xterm.enable-mouse-events {
+      /* When mouse events are enabled (eg. tmux), revert to the standard pointer cursor */
+      cursor: default;
+  }
+
+  .xterm:not(.enable-mouse-events) {
+      cursor: text;
+  }
+
+  .xterm .xterm-accessibility,
+  .xterm .xterm-message {
+      position: absolute;
+      left: 0;
+      top: 0;
+      bottom: 0;
+      right: 0;
+      /* stylelint-disable sh-waqar/declaration-use-variable */
+      z-index: 100;
+      /* stylelint-enable sh-waqar/declaration-use-variable */
+      color: transparent;
+  }
+
+  .xterm .live-region {
+      position: absolute;
+      left: -9999px;
+      width: 1px;
+      height: 1px;
+      overflow: hidden;
+  }
+
+  .xterm-cursor-pointer {
+      cursor: pointer;
+  }
 `;
 
 export default GlobalStyle;
diff --git a/client/app/scripts/themes/contrast.js b/client/app/scripts/themes/contrast.js
new file mode 100644
index 000000000..9b02091fc
--- /dev/null
+++ b/client/app/scripts/themes/contrast.js
@@ -0,0 +1,38 @@
+import { color } from 'weaveworks-ui-components/lib/theme/selectors';
+
+import defaultTheme from './default';
+
+const contrastTheme = {
+  ...defaultTheme,
+
+  /* contrast overrides */
+  background: '#ccf',
+
+  backgroundColor: color('white'),
+  backgroundDarkerColor: color('purple200'),
+  backgroundDarkerSecondaryColor: color('purple200'),
+  bodyBackgroundColor: color('white'),
+  borderLightColor: color('gray600'),
+  btnOpacityDefault: 1,
+  btnOpacityDisabled: 0.4,
+  btnOpacitySelected: 1,
+  edgeColor: color('black'),
+  edgeHighlightOpacity: 0.3,
+  edgeOpacityBlurred: 0,
+  labelBackgroundColor: color('white'),
+  linkOpacityDefault: 1,
+  nodeBorderStrokeWidth: 0.2,
+  nodeElementsInBackgroundOpacity: 0.4,
+  nodeHighlightShadowOpacity: 0.4,
+  nodeHighlightStrokeOpacity: 0.5,
+  nodeHighlightStrokeWidth: 0.25,
+  nodePseudoOpacity: 1,
+  searchBorderColor: color('purple200'),
+  searchBorderWidth: '2px',
+  textColor: color('black'),
+  textDarkerColor: color('black'),
+  textSecondaryColor: color('black'),
+  textTertiaryColor: color('black'),
+};
+
+export default contrastTheme;
diff --git a/client/app/scripts/themes/default.js b/client/app/scripts/themes/default.js
new file mode 100644
index 000000000..fc5cbb40b
--- /dev/null
+++ b/client/app/scripts/themes/default.js
@@ -0,0 +1,45 @@
+import { color } from 'weaveworks-ui-components/lib/theme/selectors';
+import { transparentize } from 'polished';
+
+const defaultTheme = {
+  background: '#fcc',
+
+  backgroundColor: color('gray50'), // $background-color: $color-gray-50;
+  backgroundDarkColor: color('purple900'), // $background-dark-color: $color-purple-900;
+  backgroundDarkerColor: color('purple100'), // $background-darker-color: $color-purple-100;
+  backgroundDarkerSecondaryColor: color('gray50'), // $background-darker-secondary-color: $color-gray-50;
+  backgroundLighterColor: color('white'), // $background-lighter-color: $color-white;
+  baseEase: 'ease-in-out', // $base-ease: ease-in-out;
+  bodyBackgroundColor: color('purple25'), // $body-background-color: $color-purple-25;
+  borderLightColor: color('purple100'), // $border-light-color: $color-purple-100;
+  btnOpacityDefault: 0.9, // $btn-opacity-default: 0.9;
+  btnOpacityDisabled: 0.25, // $btn-opacity-disabled: 0.25;
+  btnOpacityHover: 1, // $btn-opacity-hover: 1;
+  btnOpacitySelected: 0.9, // $btn-opacity-selected: 0.9;
+  detailsWindowPaddingLeft: '30px', // $details-window-padding-left: 30px;
+  detailsWindowWidth: '420px', // $details-window-width: 420px;
+  edgeColor: color('purple500'), // $edge-color: $color-purple-500;
+  edgeHighlightOpacity: 0.1, // $edge-highlight-opacity: 0.1;
+  edgeOpacity: 0.5, // $edge-opacity: 0.5;
+  edgeOpacityBlurred: 0.2, // $edge-opacity-blurred: 0.2;
+  labelBackgroundColor: props => transparentize(0.3, props.theme.colors.purple25),
+  linkOpacityDefault: 0.8, // $link-opacity-default: 0.8;
+  nodeBorderStrokeWidth: 0.12, // $node-border-stroke-width: 0.12;
+  nodeElementsInBackgroundOpacity: 0.7, // $node-elements-in-background-opacity: 0.7;
+  nodeHighlightShadowOpacity: 0.5, // $node-highlight-shadow-opacity: 0.5;
+  nodeHighlightStrokeOpacity: 0.4, // $node-highlight-stroke-opacity: 0.4;
+  nodeHighlightStrokeWidth: 0.04, // $node-highlight-stroke-width: 0.04;
+  nodePseudoOpacity: 0.8, // $node-pseudo-opacity: 0.8;
+  nodeShadowStrokeWidth: 0.18, // $node-shadow-stroke-width: 0.18;
+  nodeTextScale: 2, // $node-text-scale: 2;
+  searchBorderColor: 'transparent', // $search-border-color: transparent;
+  searchBorderWidth: '1px', // $search-border-width: 1px;
+  terminalHeaderHeight: '44px', // $terminal-header-height: 44px;
+  textColor: color('purple800'), // $text-color: $color-purple-800;
+  textDarkerColor: color('purple900'), // $text-darker-color: $color-purple-900;
+  textSecondaryColor: color('purple600'), // $text-secondary-color: $color-purple-600;
+  textTertiaryColor: color('purple400'), // $text-tertiary-color: $color-purple-400;
+  timelineHeight: '55px', // $timeline-height: 55px;
+};
+
+export default defaultTheme;
diff --git a/client/app/styles/main.scss b/client/app/styles/main.scss
index f3db39a52..81625aa93 100644
--- a/client/app/styles/main.scss
+++ b/client/app/styles/main.scss
@@ -1,7 +1,6 @@
 // Load the default theme initially to apply it on the global html level.
 @import "default-theme";
 @import "base";
-@import "terminal";
 
 .scope-app.contrast-mode {
     // Load the contrast theme and reload all the CSS in the scope-app container.
diff --git a/client/app/styles/terminal.scss b/client/app/styles/terminal.scss
deleted file mode 100644
index 3ba6b4b27..000000000
--- a/client/app/styles/terminal.scss
+++ /dev/null
@@ -1,167 +0,0 @@
-/**
- * Copyright (c) 2014 The xterm.js authors. All rights reserved.
- * Copyright (c) 2012-2013, Christopher Jeffrey (MIT License)
- * https://github.com/chjj/term.js
- * @license MIT
- *
- * Permission is hereby granted, free of charge, to any person obtaining a copy
- * of this software and associated documentation files (the "Software"), to deal
- * in the Software without restriction, including without limitation the rights
- * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
- * copies of the Software, and to permit persons to whom the Software is
- * furnished to do so, subject to the following conditions:
- *
- * The above copyright notice and this permission notice shall be included in
- * all copies or substantial portions of the Software.
- *
- * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
- * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
- * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
- * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
- * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
- * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
- * THE SOFTWARE.
- *
- * Originally forked from (with the author's permission):
- *   Fabrice Bellard's javascript vt100 for jslinux:
- *   http://bellard.org/jslinux/
- *   Copyright (c) 2011 Fabrice Bellard
- *   The original design remains. The terminal itself
- *   has been extended to include xterm CSI codes, among
- *   other features.
- */
-
-/**
- *  Default styles for xterm.js
- */
-
-.xterm {
-    font-family: $font-family-monospace;
-    font-feature-settings: "liga" 0;
-    position: relative;
-    user-select: none;
-    -ms-user-select: none;
-    -webkit-user-select: none;
-}
-
-.xterm.focus,
-.xterm:focus {
-    outline: none;
-}
-
-.xterm .xterm-helpers {
-    position: absolute;
-    top: 0;
-    /**
-     * The z-index of the helpers must be higher than the canvases in order for
-     * IMEs to appear on top.
-     */
-    /* sass-lint:disable variable-for-property */
-    z-index: 10;
-    /* sass-lint:enable variable-for-property */
-}
-
-.xterm .xterm-helper-textarea {
-    /*
-     * HACK: to fix IE's blinking cursor
-     * Move textarea out of the screen to the far left, so that the cursor is not visible.
-     */
-    position: absolute;
-    opacity: 0;
-    left: -9999em;
-    top: 0;
-    width: 0;
-    height: 0;
-    /* sass-lint:disable variable-for-property */
-    z-index: -10;
-    /* sass-lint:enable variable-for-property */
-    /** Prevent wrapping so the IME appears against the textarea at the correct position */
-    white-space: nowrap;
-    overflow: hidden;
-    resize: none;
-}
-
-.xterm .composition-view {
-    /* TODO: Composition position got messed up somewhere */
-    background: $color-black;
-    color: $color-white;
-    display: none;
-    position: absolute;
-    white-space: nowrap;
-    /* sass-lint:disable variable-for-property */
-    z-index: 1;
-    /* sass-lint:enable variable-for-property */
-}
-
-.xterm .composition-view.active {
-    display: block;
-}
-
-.xterm .xterm-viewport {
-    /* On OS X this is required in order for the scroll bar to appear fully opaque */
-    background-color: $color-black;
-    overflow-y: scroll;
-    cursor: default;
-    position: absolute;
-    right: 0;
-    left: 0;
-    top: 0;
-    bottom: 0;
-}
-
-.xterm .xterm-screen {
-    position: relative;
-}
-
-.xterm .xterm-screen canvas {
-    position: absolute;
-    left: 0;
-    top: 0;
-}
-
-.xterm .xterm-scroll-area {
-    visibility: hidden;
-}
-
-.xterm-char-measure-element {
-    display: inline-block;
-    visibility: hidden;
-    position: absolute;
-    top: 0;
-    left: -9999em;
-    line-height: normal;
-}
-
-.xterm.enable-mouse-events {
-    /* When mouse events are enabled (eg. tmux), revert to the standard pointer cursor */
-    cursor: default;
-}
-
-.xterm:not(.enable-mouse-events) {
-    cursor: text;
-}
-
-.xterm .xterm-accessibility,
-.xterm .xterm-message {
-    position: absolute;
-    left: 0;
-    top: 0;
-    bottom: 0;
-    right: 0;
-    /* sass-lint:disable variable-for-property */
-    z-index: 100;
-    /* sass-lint:enable variable-for-property */
-    color: transparent;
-}
-
-.xterm .live-region {
-    position: absolute;
-    left: -9999px;
-    width: 1px;
-    height: 1px;
-    overflow: hidden;
-}
-
-.xterm-cursor-pointer {
-    cursor: pointer;
-}
diff --git a/client/package.json b/client/package.json
index e7a99f2ca..d75e50ea1 100644
--- a/client/package.json
+++ b/client/package.json
@@ -29,6 +29,7 @@
     "lodash": "4.17.15",
     "moment": "2.24.0",
     "page": "1.11.4",
+    "polished": "3.4.1",
     "prop-types": "15.7.2",
     "rc-slider": "8.6.13",
     "react": "16.9.0",
diff --git a/client/yarn.lock b/client/yarn.lock
index 5801294b2..bf4c88e4d 100644
--- a/client/yarn.lock
+++ b/client/yarn.lock
@@ -7374,6 +7374,13 @@ polished@1.9.0:
   version "1.9.0"
   resolved "https://registry.yarnpkg.com/polished/-/polished-1.9.0.tgz#76d277d6610dbcb85477dbba1bd1aa8e642741b6"
 
+polished@3.4.1:
+  version "3.4.1"
+  resolved "https://registry.yarnpkg.com/polished/-/polished-3.4.1.tgz#1eb5597ec1792206365635811d465751f5cbf71c"
+  integrity sha512-GflTnlP5rrpDoigjczEkS6Ye7NDA4sFvAnlr5hSDrEvjiVj97Xzev3hZlLi3UB27fpxyTS9rWU64VzVLWkG+mg==
+  dependencies:
+    "@babel/runtime" "^7.4.5"
+
 posix-character-classes@^0.1.0:
   version "0.1.1"
   resolved "https://registry.yarnpkg.com/posix-character-classes/-/posix-character-classes-0.1.1.tgz#01eac0fe3b5af71a2a6c02feabb8c1fef7e00eab"

From 4224d45458784715267d83a4469186a3906314f7 Mon Sep 17 00:00:00 2001
From: Filip Barl <filip@weave.works>
Date: Thu, 3 Oct 2019 14:33:03 +0200
Subject: [PATCH 03/12] Copied over _base.scss + adjusted the comments

---
 client/app/scripts/components/global-style.js | 1802 ++++++++++++++++-
 client/app/scripts/themes/contrast.js         |    2 -
 client/app/scripts/themes/default.js          |    2 -
 client/app/styles/_base.scss                  | 1801 ----------------
 4 files changed, 1800 insertions(+), 1807 deletions(-)

diff --git a/client/app/scripts/components/global-style.js b/client/app/scripts/components/global-style.js
index 9ec75a442..dc7a40de5 100644
--- a/client/app/scripts/components/global-style.js
+++ b/client/app/scripts/components/global-style.js
@@ -2,10 +2,1808 @@ import { createGlobalStyle } from 'styled-components';
 import { color } from 'weaveworks-ui-components/lib/theme/selectors';
 
 const GlobalStyle = createGlobalStyle`
-  div {
-    background: ${props => props.theme.scope.background};
+  /* sass-lint:disable variable-for-property */
+  @font-face {
+    font-family: 'proxima-nova';
+    src: url('../fonts/proximanova-regular.woff');
   }
 
+  @font-face {
+    font-family: 'Roboto Mono';
+    src: url('../fonts/robotomono-regular.ttf');
+  }
+  /* sass-lint:enable variable-for-property */
+
+  a {
+    text-decoration: none;
+  }
+
+  .browsehappy {
+    margin: 0.2em 0;
+    background: $color-gray-200;
+    color: $color-black;
+    padding: 0.2em 0;
+  }
+
+  /* add this class to truncate text with ellipsis, container needs width */
+  .truncate {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  .colorable {
+    transition: background-color .3s $base-ease;
+  }
+
+  .palable {
+    transition: all .2s $base-ease;
+  }
+
+  .hideable {
+    transition: opacity .5s $base-ease;
+  }
+
+  .blinkable {
+    animation: blinking 1.5s infinite $base-ease;
+  }
+
+  .hang-around {
+    transition-delay: .5s;
+  }
+
+  /* From https://stackoverflow.com/a/18294634 */
+  .fully-pannable {
+    width: 100%;
+    height: 100%;
+    /* Grabbable */
+    cursor: move; /* fallback if grab cursor is unsupported */
+    cursor: grab;
+    cursor: -moz-grab;
+    cursor: -webkit-grab;
+
+    &.panning {
+      /* Grabbing */
+      cursor: grabbing;
+      cursor: -moz-grabbing;
+      cursor: -webkit-grabbing;
+    }
+  }
+
+  .shadow-2 {
+    box-shadow: 0 3px 10px transparentize($color-black, 0.84), 0 3px 10px transparentize($color-black, 0.77);
+  }
+
+  .shadow-3 {
+    box-shadow: 0 10px 30px transparentize($color-black, 0.81), 0 6px 10px transparentize($color-black, 0.77);
+  }
+
+  .overlay {
+    @extend .hideable;
+
+    background-color: $color-white;
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    top: 0;
+    left: 0;
+    opacity: 0;
+    pointer-events: none;
+    z-index: $layer-modal;
+
+    &.faded {
+      /* NOTE: Not sure if we should block the pointer events here.. */
+      pointer-events: all;
+      cursor: wait;
+      opacity: 0.5;
+    }
+  }
+
+  .overlay-wrapper {
+    align-items: center;
+    background-color: transparentize($color-purple-25, 0.1);
+    border-radius: $border-radius-soft;
+    color: $text-tertiary-color;
+    display: flex;
+    font-size: $font-size-tiny;
+    justify-content: center;
+    padding: 5px;
+    position: fixed;
+    bottom: 11px;
+
+    button {
+      @extend .btn-opacity;
+      background-color: transparent;
+      border: 1px solid transparent;
+      border-radius: $border-radius-soft;
+      color: $text-secondary-color;
+      cursor: pointer;
+      line-height: 20px;
+      padding: 1px 3px;
+      outline: 0;
+
+      i {
+        font-size: $font-size-small;
+        position: relative;
+        top: 2px;
+      }
+
+      &:hover, &.selected {
+        border: 1px solid $text-tertiary-color;
+      }
+
+      &.active {
+        & > * { @extend .blinkable; }
+        border: 1px solid $text-tertiary-color;
+      }
+    }
+  }
+
+  .btn-opacity {
+    @extend .palable;
+    opacity: $btn-opacity-default;
+    &-selected {
+      opacity: $btn-opacity-selected;
+    }
+    &[disabled] {
+      cursor: default;
+      opacity: $btn-opacity-disabled;
+    }
+    &:not([disabled]):hover {
+      opacity: $btn-opacity-hover;
+    }
+  }
+
+  .hide {
+    opacity: 0;
+  }
+
+  .scope-app, .terminal-app {
+    -webkit-font-smoothing: antialiased;
+    background: $body-background-color;
+    bottom: 0;
+    color: $text-color;
+    font-family: $font-family-regular;
+    font-size: $font-size-small;
+    height: auto;
+    left: 0;
+    line-height: 150%;
+    margin: 0;
+    overflow: auto;
+    position: fixed;
+    right: 0;
+    top: 0;
+    width: 100%;
+
+    * {
+      box-sizing: border-box;
+      -webkit-tap-highlight-color: transparent;
+    }
+    *:before,
+    *:after {
+      box-sizing: border-box;
+    }
+
+    p {
+      line-height: 20px;
+      padding-top: 6px;
+      margin-bottom: 14px;
+      letter-spacing: 0;
+      font-weight: 400;
+      color: $text-color;
+    }
+
+    h2 {
+      font-size: $font-size-extra-large;
+      line-height: 40px;
+      padding-top: 8px;
+      margin-bottom: 12px;
+      font-weight: 400;
+    }
+
+    &.time-travel-open {
+      .details-wrapper {
+        margin-top: $timeline-height + 50px;
+      }
+    }
+  }
+
+  .header {
+    background-color: transparentize($color-purple-25, 0.2);
+    z-index: $layer-front;
+    padding: 15px 10px 0;
+    position: relative;
+    width: 100%;
+
+    .selectors {
+      display: flex;
+      position: relative;
+
+      > * {
+        flex: 1 1;
+      }
+
+      .logo {
+        margin: -16px 0 0 8px;
+        height: 64px;
+        max-width: 250px;
+        min-width: 0;
+      }
+    }
+  }
+
+
+  .rc-slider {
+    .rc-slider-step { cursor: pointer; }
+    .rc-slider-track { background-color: $text-tertiary-color; }
+    .rc-slider-rail { background-color: $border-light-color; }
+    .rc-slider-handle { border-color: $text-tertiary-color; }
+  }
+
+  .footer {
+    @extend .overlay-wrapper;
+    right: 43px;
+
+    &-status {
+      margin-right: 1em;
+    }
+
+    &-label, .pause-text {
+      margin: 0 0.25em;
+    }
+
+    &-versionupdate {
+      margin-right: 0.5em;
+    }
+
+    &-tools {
+      display: flex;
+    }
+
+    &-icon {
+      margin-left: 0.5em;
+    }
+
+    .tooltip-wrapper {
+      position: relative;
+
+      .tooltip {
+        display: none;
+        background-color: $color-black;
+        position: absolute;
+        color: $color-white;
+        text-align: center;
+        line-height: 22px;
+        border-radius: $border-radius-soft;
+        font-size: $font-size-tiny;
+        margin-bottom: 25px;
+        margin-left: -4px;
+        opacity: 0.75;
+        padding: 10px 20px;
+        bottom: 0;
+        left: 10px;
+        transform: translateX(-50%);
+        white-space: nowrap;
+        z-index: $layer-tooltip;
+
+        /* Adjusted from http://www.cssarrowplease.com/ */
+        &:after {
+          border: 6px solid transparent;
+          content: ' ';
+          top: 100%;
+          left: 50%;
+          height: 0;
+          width: 0;
+          position: absolute;
+          border-color: transparent;
+          border-top-color: $color-black;
+          margin-left: -6px;
+        }
+      }
+
+      &:hover .tooltip {
+        display: block;
+      }
+    }
+  }
+
+  .zoomable-canvas svg {
+    @extend .fully-pannable;
+  }
+
+  .topologies-selector {
+    margin: 0 4px;
+    display: flex;
+
+    .topologies-item {
+      margin: 0px 8px;
+
+      &-label {
+        font-size: $font-size-normal;
+      }
+
+    }
+
+    .topologies-sub {
+      &-item {
+        &-label {
+          font-size: $font-size-small;
+        }
+      }
+    }
+
+    .topologies-item-main,
+    .topologies-sub-item {
+      pointer-events: all;
+      color: $text-secondary-color;
+      @extend .btn-opacity;
+      cursor: pointer;
+      padding: 4px 8px;
+      border-radius: $border-radius-soft;
+      opacity: 0.9;
+      margin-bottom: 3px;
+      border: 1px solid transparent;
+      white-space: nowrap;
+
+      &-active, &:hover {
+        color: $text-color;
+        background-color: $background-darker-color;
+      }
+
+      &-active {
+        opacity: 0.85;
+      }
+
+      &-matched {
+        border-color: $color-blue-400;
+      }
+
+    }
+
+    .topologies-sub-item {
+      padding: 2px 8px;
+    }
+
+  }
+
+  .nodes-chart-overlay {
+    pointer-events: none;
+    opacity: $node-elements-in-background-opacity;
+
+    &:not(.active) {
+      display: none;
+    }
+  }
+
+  .nodes-chart, .nodes-resources {
+
+    &-error, &-loading {
+      @extend .hideable;
+      pointer-events: none;
+      position: absolute;
+      left: 50%;
+      top: 50%;
+      margin-left: -16.5%;
+      margin-top: -275px;
+      color: $text-secondary-color;
+      width: 33%;
+      height: 550px;
+
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+
+      .heading {
+        font-size: $font-size-normal;
+      }
+
+      &-icon {
+        text-align: center;
+        opacity: 0.25;
+        font-size: $overlay-icon-size;
+      }
+
+      li { padding-top: 5px; }
+    }
+
+    /* Make watermarks blink only if actually shown (otherwise the FF performance decreses weirdly). */
+    &-loading:not(.hide) &-error-icon-container {
+      @extend .blinkable;
+    }
+
+    &-loading {
+      text-align: center;
+    }
+
+    svg {
+      @extend .hideable;
+      position: absolute;
+      top: 0px;
+    }
+
+    .logo {
+      display: none;
+    }
+
+    svg.exported {
+      .logo {
+        display: inline;
+      }
+    }
+
+    text {
+      font-family: $font-family-regular;
+      fill: $text-secondary-color;
+    }
+
+    .nodes-chart-elements .matched-results {
+      background-color: $label-background-color;
+    }
+
+    .edge {
+      .link-none {
+        fill: none;
+        display: none;
+      }
+      .link-storage {
+        fill: none;
+        stroke: $edge-color;
+        stroke-dasharray: 1, 30;
+        stroke-linecap: round;
+      }
+      .link {
+        fill: none;
+        stroke: $edge-color
+      }
+      .shadow {
+        fill: none;
+        stroke: $color-blue-400;
+        stroke-opacity: 0;
+      }
+      &.highlighted {
+        .shadow {
+          stroke-opacity: $edge-highlight-opacity;
+        }
+      }
+    }
+
+    .edge-marker {
+      color: $edge-color;
+      fill: $edge-color;
+    }
+  }
+
+  .matched-results {
+    text-align: center;
+
+    &-match {
+      font-size: $font-size-small;
+
+      &-wrapper {
+        display: inline-block;
+        margin: 1px;
+        padding: 2px 4px;
+        background-color: transparentize($color-blue-400, 0.9);
+      }
+
+      &-label {
+        color: $text-secondary-color;
+        margin-right: 0.5em;
+      }
+    }
+
+    &-more {
+      font-size: $font-size-tiny;
+      color: $color-blue-700;
+      margin-top: -2px;
+    }
+  }
+
+  .details {
+    &-wrapper {
+      position: fixed;
+      display: flex;
+      z-index: $layer-toolbar;
+      right: $details-window-padding-left;
+      top: 100px;
+      bottom: 48px;
+      transition: transform 0.33333s cubic-bezier(0,0,0.21,1), margin-top .15s $base-ease;
+    }
+  }
+
+  .node-details {
+    height: 100%;
+    width: $details-window-width;
+    background-color: transparentize($color-white, 0.14);
+    display: flex;
+    flex-flow: column;
+    margin-bottom: 12px;
+    padding-bottom: 2px;
+    border-radius: $border-radius-soft;
+    background-color: $color-white;
+    @extend .shadow-2;
+    /* keep node-details above the terminal. */
+    z-index: $layer-front;
+    overflow: hidden;
+
+    &:last-child {
+      margin-bottom: 0;
+    }
+
+    &-tools-wrapper {
+      position: relative;
+    }
+
+
+    &-tools {
+      position: absolute;
+      top: 6px;
+      right: 8px;
+
+      .close-details {
+        position: relative;
+        z-index: $layer-front;
+      }
+
+      > i {
+        @extend .btn-opacity;
+        padding: 4px 5px;
+        margin-left: 2px;
+        font-size: $font-size-normal;
+        color: $color-white;
+        cursor: pointer;
+        border: 1px solid transparent;
+        border-radius: $border-radius-soft;
+
+        span {
+          font-family: $font-family-regular;
+          font-size: $font-size-small;
+          margin-left: 4px;
+
+          span {
+            text-transform: capitalize;
+            font-size: $font-size-normal;
+            margin-left: 0;
+          }
+        }
+
+        &:hover {
+          border-color: transparentize($color-white, 0.4);
+        }
+      }
+    }
+
+    .match {
+      background-color: transparentize($color-blue-400, 0.7);
+      border: 1px solid $color-blue-400;
+    }
+
+    &-header {
+      @extend .colorable;
+
+      &-wrapper {
+        padding: 36px 36px 8px 36px;
+      }
+
+      &-label {
+        color: $color-white;
+        margin: 0;
+        width: 348px;
+        padding-top: 0;
+      }
+
+      .details-tools {
+        position: absolute;
+        top: 16px;
+        right: 24px;
+      }
+
+      &-notavailable {
+        background-color: $background-dark-color;
+      }
+
+    }
+
+    &-relatives {
+      margin-top: 4px;
+      font-size: $font-size-normal;
+      color: $color-white;
+
+      &-link {
+        @extend .truncate;
+        @extend .btn-opacity;
+        display: inline-block;
+        margin-right: 0.5em;
+        cursor: pointer;
+        text-decoration: underline;
+        opacity: $link-opacity-default;
+        max-width: 12em;
+      }
+
+      &-more {
+        @extend .btn-opacity;
+        padding: 0 2px;
+        cursor: pointer;
+        font-size: $font-size-tiny;
+        font-weight: bold;
+        display: inline-block;
+        position: relative;
+        top: -5px;
+      }
+    }
+
+    &-controls {
+      white-space: nowrap;
+      padding: 8px 0;
+      font-size: $font-size-small;
+
+      &-wrapper {
+        padding: 0 36px 0 32px;
+      }
+
+      .node-control-button {
+        color: $color-white;
+      }
+
+      &-spinner {
+        @extend .hideable;
+        color: $color-white;
+        margin-left: 8px;
+      }
+
+      &-error {
+        @extend .truncate;
+        float: right;
+        width: 55%;
+        padding-top: 6px;
+        text-align: left;
+        color: $color-white;
+
+        &-icon {
+          @extend .blinkable;
+          margin-right: 0.5em;
+        }
+      }
+    }
+
+    &-content {
+      flex: 1;
+      padding: 0 36px 0 36px;
+      overflow-y: auto;
+
+      &-loading {
+        margin-top: 48px;
+        text-align: center;
+        font-size: $font-size-huge;
+        color: $text-tertiary-color;
+      }
+
+      &-section {
+        margin: 16px 0;
+
+        &-header {
+          font-size: $font-size-normal;
+          color: $text-tertiary-color;
+          margin-bottom: 10px;
+        }
+      }
+    }
+
+    &-health {
+
+      &-wrapper {
+        display: flex;
+        justify-content: space-around;
+        align-content: center;
+        text-align: center;
+        flex-wrap: wrap;
+      }
+
+      &-overflow {
+        @extend .btn-opacity;
+        flex-basis: 33%;
+        display: flex;
+        flex-direction: row;
+        flex-wrap: wrap;
+        align-items: center;
+        opacity: 0.85;
+        cursor: pointer;
+        position: relative;
+        padding-bottom: 16px;
+
+        &-item {
+          padding: 4px 8px;
+          line-height: 1.2;
+          flex-basis: 48%;
+
+          &-value {
+            color: $text-secondary-color;
+            font-size: $font-size-normal;
+          }
+
+          &-label {
+            color: $text-secondary-color;
+            font-size: $font-size-tiny;
+          }
+        }
+      }
+
+      &-item {
+        padding: 8px 16px;
+        width: 33%;
+        display: flex;
+        flex-direction: column;
+        flex-grow: 1;
+
+        &-label {
+          color: $text-secondary-color;
+          font-size: $font-size-small;
+        }
+
+        &-sparkline {
+          margin-top: auto;
+        }
+
+        &-placeholder {
+          font-size: $font-size-extra-large;
+          opacity: 0.2;
+          margin-bottom: 0.2em;
+        }
+      }
+
+      &-link-item {
+        @extend .btn-opacity;
+        cursor: pointer;
+        opacity: $link-opacity-default;
+        width: 33%;
+        display: flex;
+        color: inherit;
+
+        .node-details-health-item {
+          width: auto;
+        }
+      }
+    }
+
+    &-info {
+
+      &-field {
+        display: flex;
+        align-items: baseline;
+
+        &-label {
+          text-align: right;
+          width: 30%;
+          color: $text-secondary-color;
+          padding: 0 0.5em 0 0;
+          white-space: nowrap;
+          font-size: $font-size-small;
+
+          &::after {
+            content: ':';
+          }
+        }
+
+        &-value {
+          font-size: $font-size-small;
+          flex: 1;
+          /* Now required (from chrome 48) to get overflow + flexbox behaving: */
+          min-width: 0;
+          color: $text-color;
+        }
+      }
+    }
+
+    &-property-list {
+      &-controls {
+        margin-left: -4px;
+      }
+
+      &-field {
+        display: flex;
+        align-items: baseline;
+
+        &-label {
+          text-align: right;
+          width: 50%;
+          color: $text-secondary-color;
+          padding: 0 0.5em 0 0;
+          white-space: nowrap;
+          font-size: $font-size-small;
+
+          &::after {
+            content: ':';
+          }
+        }
+
+        &-value {
+          font-size: $font-size-small;
+          flex: 1;
+          /* Now required (from chrome 48) to get overflow + flexbox behaving: */
+          min-width: 0;
+          color: $text-color;
+        }
+      }
+    }
+
+    &-generic-table {
+      width: 100%;
+
+      tr {
+        display: flex;
+        th, td {
+          padding: 0 5px;
+        }
+      }
+    }
+
+    &-table {
+      width: 100%;
+      border-spacing: 0;
+      /* need fixed for truncating, but that does not extend wide columns dynamically */
+      table-layout: fixed;
+
+      &-wrapper {
+        margin: 24px -4px;
+      }
+
+      &-header {
+        color: $text-tertiary-color;
+        font-size: $font-size-small;
+        text-align: right;
+        padding: 0;
+
+        .node-details-table-header-sortable {
+          padding: 3px 4px;
+          cursor: pointer;
+        }
+
+        &-sorted {
+          color: $text-secondary-color;
+        }
+
+        &-sorter {
+          margin: 0 0.35em;
+        }
+
+        &:first-child {
+          margin-right: 0;
+          text-align: left;
+        }
+      }
+
+      tbody {
+        position: relative;
+
+        .min-height-constraint {
+          position: absolute;
+          width: 0 !important;
+          opacity: 0;
+          top: 0;
+        }
+      }
+
+      &-node {
+        font-size: $font-size-small;
+        line-height: 1.5;
+
+        &:hover, &.selected {
+          background-color: $color-white;
+        }
+
+        > * {
+          padding: 0 4px;
+        }
+
+        &-link {
+          @extend .btn-opacity;
+          text-decoration: underline;
+          cursor: pointer;
+          opacity: $link-opacity-default;
+          color: $text-color;
+        }
+
+        &-value, &-metric {
+          flex: 1;
+          margin-left: 0.5em;
+          text-align: right;
+        }
+
+        &-metric-link {
+          @extend .btn-opacity;
+          text-decoration: underline;
+          cursor: pointer;
+          opacity: $link-opacity-default;
+          color: $text-color;
+        }
+
+        &-value-scalar {
+          /* width: 2em; */
+          text-align: right;
+          margin-right: 0.5em;
+        }
+
+        &-value-minor,
+        &-value-unit {
+          font-size: $font-size-small;
+          color: $text-secondary-color;
+        }
+      }
+    }
+  }
+
+
+
+  .node-resources {
+    &-metric-box {
+      @extend .palable;
+      cursor: pointer;
+      fill: transparentize($color-gray-600, 0.6);
+
+      &-info {
+        background-color: transparentize($color-white, 0.4);
+        border-radius: $border-radius-soft;
+        cursor: inherit;
+        padding: 5px;
+
+        .wrapper {
+          display: block;
+
+          &.label { font-size: $font-size-small; }
+          &.consumption { font-size: $font-size-tiny; }
+        }
+      }
+    }
+
+    &-layer-topology {
+      background-color: transparentize($color-gray-50, 0.05);
+      border-radius: $border-radius-soft;
+      border: 1px solid $color-gray-200;
+      color: $text-tertiary-color;
+      font-size: $font-size-normal;
+      font-weight: bold;
+      padding-right: 20px;
+      text-align: right;
+      text-transform: capitalize;
+    }
+  }
+
+  /* This part sets the styles only for the 'real' node details table, not applying
+  them to the nodes grid, because there we control hovering from the JS.
+  NOTE: Maybe it would be nice to separate the class names between the two places
+  where node tables are used - i.e. it doesn't make sense that node-details-table
+  can also refer to the tables in the nodes grid. */
+  .details-wrapper .node-details-table {
+    &-node {
+      &:hover, &.selected {
+        background-color: $color-white;
+      }
+    }
+  }
+
+  .node-control-button {
+    @extend .btn-opacity;
+    padding: 6px;
+    margin-left: 2px;
+    font-size: $font-size-small;
+    color: $text-secondary-color;
+    cursor: pointer;
+    border: 1px solid transparent;
+    border-radius: $border-radius-soft;
+    &:hover {
+      border-color: transparentize($color-white, 0.4);
+    }
+    &-pending, &-pending:hover {
+      opacity: 0.2;
+      border-color: transparent;
+      cursor: not-allowed;
+    }
+  }
+
+  .terminal {
+
+    &-app {
+      display: flex;
+      flex-flow: column;
+    }
+
+    &-embedded {
+      position: relative;
+      /* shadow of animation-wrapper is 10px, let it fit in here without being
+      overflow hiddened. */
+      flex: 1;
+      overflow-x: hidden;
+    }
+
+    &-animation-wrapper {
+      position: absolute;
+      /* some room for the drop shadow. */
+      top: 10px;
+      left: 10px;
+      bottom: 10px;
+      right: 0;
+      transition: transform 0.5s cubic-bezier(0.230, 1.000, 0.320, 1.000);
+      @extend .shadow-2;
+    }
+
+    &-wrapper {
+      width: 100%;
+      height: 100%;
+      border: 0px solid $color-black;
+      color: $color-gray-50;
+    }
+
+    &-header {
+      @extend .truncate;
+      color: $color-white;
+      height: $terminal-header-height;
+      padding: 8px 24px;
+      background-color: $text-color;
+      position: relative;
+      font-size: $font-size-small;
+      line-height: 28px;
+      border-top-left-radius: $border-radius-soft;
+
+      &-title {
+        cursor: default;
+      }
+
+      &-tools {
+        position: absolute;
+        right: 8px;
+        top: 6px;
+
+        &-item, &-item-icon {
+          @extend .palable;
+          padding: 4px 5px;
+          color: $color-white;
+          cursor: pointer;
+          opacity: 0.7;
+          border: 1px solid transparent;
+          border-radius: $border-radius-soft;
+
+          font-size: $font-size-tiny;
+          font-weight: bold;
+
+          &:hover {
+            opacity: 1;
+            border-color: transparentize($color-white, 0.4);
+          }
+        }
+
+        &-item-icon {
+          font-size: $font-size-normal;
+        }
+      }
+    }
+
+    &-embedded &-inner { top: $terminal-header-height; }
+    &-app &-inner { top: 0; }
+    &-inner {
+      cursor: text;
+      font-family: $font-family-monospace;
+      position: absolute;
+      bottom: 0;
+      left: 0;
+      right: 0;
+      background-color: $color-black;
+      padding: 8px;
+      box-sizing: content-box;
+      border-bottom-left-radius: $border-radius-soft;
+
+      .terminal {
+        background-color: transparent !important;
+      }
+    }
+
+    &-status-bar {
+      font-family: $font-family-regular;
+      position: absolute;
+      bottom: 16px;
+      right: 16px;
+      width: 50%;
+      padding: 16px 16px;
+      opacity: 0.8;
+      border-radius: $border-radius-soft;
+
+      h3 {
+        margin: 4px 0;
+      }
+
+      &-message {
+        margin: 4px 0;
+        color: $color-white;
+      }
+
+      .link {
+        font-weight: bold;
+        cursor: pointer;
+        float: right;
+      }
+    }
+
+    &-cursor {
+      color: $color-black;
+      background: $color-gray-50;
+    }
+  }
+
+  .terminal-inactive .terminal-cursor {
+    visibility: hidden;
+  }
+
+  .metric {
+    &-unit {
+      padding-left: 0.25em;
+    }
+  }
+
+  .show-more {
+    @extend .btn-opacity;
+    border-top: 1px dotted $border-light-color;
+    padding: 0px 0;
+    margin-top: 4px;
+    text-align: right;
+    cursor: pointer;
+    color: $text-secondary-color;
+    font-size: $font-size-small;
+
+    &-icon {
+      color: $text-tertiary-color;
+      font-size: $font-size-normal;
+      position: relative;
+      top: 1px;
+    }
+  }
+
+  .plugins {
+    margin-right: 0.5em;
+
+    &-label {
+      margin-right: 0.25em;
+    }
+
+    &-plugin {
+      cursor: default;
+    }
+
+    &-plugin + &-plugin:before {
+      content: ', ';
+    }
+
+    &-plugin-icon {
+      top: 1px;
+      position: relative;
+      font-size: $font-size-large;
+      margin-right: 2px;
+    }
+
+    .error {
+      animation: blinking 2.0s 60 $base-ease; /* blink for 2 minutes */
+      color: $text-secondary-color;
+    }
+
+    &-empty {
+      opacity: $text-secondary-color;
+    }
+  }
+
+  .status {
+    padding: 2px 12px;
+    background-color: $body-background-color;
+    border-radius: $border-radius-soft;
+    color: $text-secondary-color;
+    display: inline-block;
+    opacity: 0.9;
+
+    &-icon {
+      font-size: $font-size-normal;
+      position: relative;
+      top: 0.125rem;
+      margin-right: 0.25rem;
+    }
+
+    &.status-loading {
+      animation: blinking 2.0s 150 $base-ease; /* keep blinking for 5 minutes */
+      text-transform: none;
+      color: $text-color;
+    }
+  }
+
+  .topology-option, .metric-selector, .network-selector, .view-mode-selector, .time-control {
+    font-size: $font-size-normal;
+    color: $text-secondary-color;
+    margin-bottom: 6px;
+
+    &:last-child {
+      margin-bottom: 0;
+    }
+
+    i {
+      font-size: $font-size-tiny;
+      margin-left: 4px;
+      color: $color-orange-500;
+    }
+
+    &-wrapper {
+      pointer-events: all;
+      border-radius: $border-radius-soft;
+      border: 1px solid $background-darker-color;
+      display: inline-block;
+      white-space: nowrap;
+    }
+
+    &-action {
+      @extend .btn-opacity;
+      padding: 3px 12px;
+      cursor: pointer;
+      display: inline-block;
+      background-color: $background-color;
+
+      &-selected, &:not([disabled]):hover {
+        color: $text-darker-color;
+        background-color: $background-darker-color;
+      }
+
+      &:first-child {
+        border-left: none;
+        border-top-left-radius: $border-radius-soft;
+        border-bottom-left-radius: $border-radius-soft;
+      }
+
+      &:last-child {
+        border-top-right-radius: $border-radius-soft;
+        border-bottom-right-radius: $border-radius-soft;
+      }
+    }
+  }
+
+  .metric-selector {
+    font-size: $font-size-small;
+    margin-top: 6px;
+  }
+
+  .view-mode-selector, .time-control {
+    margin-left: 20px;
+
+    &-wrapper {
+      pointer-events: all;
+      border-color: $background-darker-secondary-color;
+      overflow: hidden;
+    }
+
+    &:first-child,
+    &:last-child {
+      .view-mode-selector-action {
+        border-radius: $border-radius-none;
+      }
+    }
+
+    &-action {
+      background-color: transparent;
+
+      &-selected, &:not([disabled]):hover {
+        background-color: $background-darker-color;
+      }
+
+      &:not(:last-child) {
+        border-right: 1px solid $background-darker-secondary-color;
+      }
+    }
+  }
+
+  .time-control {
+    margin-right: 20px;
+
+    &-controls {
+      align-items: center;
+      justify-content: flex-end;
+      display: flex;
+    }
+
+    &-spinner {
+      display: inline-block;
+      margin-right: 15px;
+      margin-top: 3px;
+
+      i {
+        color: $text-secondary-color;
+        font-size: $font-size-normal;
+      }
+    }
+
+    &-info {
+      @extend .blinkable;
+      display: block;
+      margin-top: 5px;
+      text-align: right;
+      pointer-events: all;
+      font-size: $font-size-small;
+    }
+  }
+
+  .topology-option {
+    &-wrapper {
+      display: inline-flex;
+      flex-wrap: wrap;
+      overflow: hidden;
+      max-height: 27px;
+      transition: max-height 0.5s 0s $base-ease;
+
+      .topology-option-action {
+        flex: 1 1 auto;
+        text-align: center;
+      }
+    }
+    
+      &:last-child :hover {
+      height: auto;
+      max-height: calc((13px * 1.5 + 3px + 3px) * 8); /* expand to display 8 rows */
+      overflow: auto;
+      transition: max-height 0.5s 0s $base-ease;
+    } 
+
+    font-size: $font-size-small;
+
+    &-action {
+      &-selected {
+        cursor: default;
+      }
+    }
+  }
+
+  .view-mode-selector-wrapper, .time-control-wrapper {
+    .label { margin-left: 4px; }
+    i {
+      margin-left: 0;
+      color: $text-secondary-color;
+    }
+  }
+
+  .network-selector-action {
+    border-top: 3px solid transparent;
+    border-bottom: 3px solid $background-dark-color;
+  }
+
+  .warning {
+    display: inline-block;
+    cursor: pointer;
+    border: 1px dashed transparent;
+    text-transform: none;
+    border-radius: $border-radius-soft;
+    margin-left: 4px;
+
+    &-wrapper {
+      display: flex;
+    }
+
+    &-text {
+      display: inline-block;
+      color: $text-secondary-color;
+      padding-left: 0.5em;
+    }
+
+    &-icon {
+      @extend .btn-opacity;
+    }
+
+    &-expanded {
+      margin-left: 0;
+      padding: 2px 4px;
+      border-color: $text-tertiary-color;
+    }
+
+    &-expanded &-icon {
+      position: relative;
+      top: 4px;
+      left: 2px;
+    }
+
+  }
+
+  .sidebar {
+    position: fixed;
+    bottom: 11px;
+    left: 11px;
+    padding: 5px;
+    font-size: $font-size-small;
+    border-radius: $border-radius-soft;
+    border: 1px solid transparent;
+    pointer-events: none;
+    max-width: 50%;
+  }
+
+  .sidebar-gridmode {
+    background-color: $color-purple-50;
+    border-color: $background-darker-color;
+    opacity: 0.9;
+  }
+
+  .search {
+    &-wrapper {
+      margin: 0 8px;
+      min-width: 160px;
+      text-align: right;
+    }
+  }
+
+  @keyframes blinking {
+    0%, 50%, 100% {
+      opacity: 1.0;
+    } 25% {
+      opacity: 0.5;
+    }
+  }
+
+  /*   
+  Help panel!
+   */
+
+  .help-panel {
+    z-index: $layer-modal;
+    background-color: $color-white;
+    @extend .shadow-2;
+    display: flex;
+    position: relative;
+
+    &-wrapper {
+      position: absolute;
+      width: 100%;
+      height: 100%;
+
+      display: flex;
+      justify-content: center;
+      align-items: flex-start;
+    }
+
+    &-header {
+      background-color: $color-blue-400;
+      padding: 12px 24px;
+      color: $color-white;
+
+      h2 {
+        margin: 0;
+        font-size: $font-size-large;
+      }
+    }
+
+    &-tools {
+      position: absolute;
+      top: 6px;
+      right: 8px;
+
+      i {
+        @extend .btn-opacity;
+        padding: 4px 5px;
+        margin-left: 2px;
+        font-size: $font-size-normal;
+        color: $color-purple-400;
+        cursor: pointer;
+        border: 1px solid transparent;
+        border-radius: $border-radius-soft;
+
+        &:hover {
+          border-color: transparentize($color-purple-400, 0.4);
+        }
+      }
+
+    }
+
+    &-main {
+      display: flex;
+      padding: 12px 36px 36px 36px;
+      flex-direction: row;
+      align-items: stretch;
+
+      h2 {
+        line-height: 150%;
+        font-size: $font-size-large;
+        color: $color-purple-400;
+        padding: 4px 0;
+        border-bottom: 1px solid transparentize($color-purple-400, 0.9);
+      }
+
+      h3 {
+        font-size: $font-size-normal;
+        color: $color-purple-400;
+        padding: 4px 0;
+      }
+
+      p {
+        margin: 0;
+      }
+    }
+
+    &-shortcuts {
+      margin-right: 36px;
+
+      &-shortcut {
+        kbd {
+          display: inline-block;
+          padding: 3px 5px;
+          font-size: $font-size-tiny;
+          line-height: 10px;
+          color: $color-gray-600;
+          vertical-align: middle;
+          background-color: $color-white;
+          border: solid 1px $color-gray-200;
+          border-bottom-color: $color-gray-600;
+          border-radius: $border-radius-soft;
+          box-shadow: inset 0 -1px 0 $color-gray-600;
+        }
+        div.key {
+          width: 60px;
+          display: inline-block;
+        }
+        div.label {
+          display: inline-block;
+        }
+      }
+    }
+
+    &-search {
+      margin-right: 36px;
+
+      &-row {
+        display: flex;
+        flex-direction: row;
+
+        &-term {
+          flex: 1;
+          color: $text-secondary-color;
+          i {
+            margin-right: 5px;
+          }
+        }
+
+        &-term-label {
+          flex: 1;
+          b {
+            color: $text-secondary-color;
+          }
+        }
+      }
+    }
+
+    &-fields {
+      display: flex;
+      flex-direction: column;
+
+      &-current-topology {
+        color: $color-purple-400;
+      }
+
+      &-fields {
+        display: flex;
+        align-items: stretch;
+
+        &-column {
+          display: flex;
+          flex-direction: column;
+          flex: 1;
+          margin-right: 12px;
+
+          &-content {
+            overflow: auto;
+            /* 160px for top and bottom margins and the rest of the help window
+            is about 160px too.
+            Notes: Firefox gets a bit messy if you try and bubble
+            heights + overflow up (min-height issue + still doesn't work v.well),
+            so this is a bit of a hack. */
+            max-height: calc(100vh - 160px - 160px - 160px);
+          }
+        }
+      }
+    }
+  }
+
+  /*   
+  Zoom control
+   */
+
+  .zoom-control {
+    @extend .overlay-wrapper;
+    flex-direction: column;
+    padding: 5px 7px 0;
+    bottom: 50px;
+    right: 40px;
+
+    a:hover { border-color: transparent; }
+
+    .rc-slider {
+      margin: 5px 0;
+      height: 60px;
+    }
+  }
+
+  /*   
+  Debug panel!
+   */
+
+  .debug-panel {
+    @extend .shadow-2;
+    background-color: $color-white;
+    top: 80px;
+    position: absolute;
+    padding: 10px;
+    left: 10px;
+    z-index: $layer-modal;
+
+    opacity: 0.3;
+
+    &:hover {
+      opacity: 1;
+    }
+
+    table {
+      display: inline-block;
+      border-collapse: collapse;
+      margin: 4px 2px;
+
+      td {
+        width: 10px;
+        height: 10px;
+      }
+    }
+  }
+
+  /*   
+  Nodes grid.
+   */
+
+  .nodes-grid {
+    tr {
+      border-radius: $border-radius-soft;
+    }
+
+    &-label-minor {
+      opacity: 0.7;
+    }
+
+    &-id-column {
+      margin: -3px -4px;
+      padding: 2px 4px;
+      display: flex;
+      div {
+        flex: 1;
+      }
+    }
+
+    .node-details-table-wrapper-wrapper {
+
+      flex: 1;
+      display: flex;
+      flex-direction: row;
+      width: 100%;
+
+      .node-details-table-wrapper {
+        margin: 0;
+        flex: 1;
+      }
+
+      .nodes-grid-graph {
+        position: relative;
+        margin-top: 24px;
+      }
+
+      .node-details-table-node > * {
+        padding: 3px 4px;
+      }
+
+      /* Keeping the row height fixed is important for locking the rows on hover. */
+      .node-details-table-node, thead tr {
+        height: 28px;
+      }
+
+      tr:nth-child(even) {
+        background: $color-gray-100;
+      }
+
+      tbody tr {
+        border: 1px solid transparent;
+        border-radius: $border-radius-soft;
+        cursor: pointer;
+      }
+
+      /* We fully control hovering of the grid rows from JS,
+      because we want consistent behaviour between the
+      visual and row locking logic that happens on hover. */
+      tbody tr.selected, tbody tr.focused {
+        background-color: transparentize($color-blue-400, 0.85);
+        border: 1px solid $color-blue-400;
+      }
+    }
+
+    .scroll-body {
+
+      table {
+        border-bottom: 1px solid $color-gray-200;
+      }
+
+      thead, tbody tr {
+        display: table;
+        width: 100%;
+        table-layout: fixed;
+      }
+
+      tbody:after {
+        content: '';
+        display: block;
+        /* height of the controls so you can scroll the last row up above them
+        and have a good look. */
+        height: 140px;
+      }
+
+      thead {
+        box-shadow: 0 4px 2px -2px transparentize($color-black, 0.84);
+        border-bottom: 1px solid $color-gray-600;
+      }
+
+      tbody {
+        display: block;
+        overflow-y: scroll;
+      }
+    }
+  }
+
+  .troubleshooting-menu {
+    display: flex;
+    position: relative;
+
+    &-wrapper {
+      height: 100%;
+      width: 100%;
+      align-items: center;
+      display: flex;
+      justify-content: center;
+      position: absolute;
+    }
+
+    &-content {
+      position: relative;
+      background-color: $color-white;
+      padding: 20px;
+      @extend .shadow-2;
+      z-index: $layer-modal;
+    }
+
+    &-item {
+      height: 40px;
+      .soft { opacity: 0.6; }
+    }
+
+    button {
+      border: 0;
+      background-color: transparent;
+      cursor: pointer;
+      padding: 0;
+      outline: 0;
+    }
+
+    button, a {
+      color: $color-purple-900;
+
+      &:hover {
+        color: $text-color;
+      }
+    }
+
+    i {
+      width: 20px;
+      text-align: center;
+      margin-right: 10px;
+    }
+
+    .fa.fa-times {
+      width: 25px;
+    }
+  }
+
+  @media (max-width: 1330px) {
+    .view-mode-selector .label { display: none; }
+  }
+
+
   /**
   * Copyright (c) 2014 The xterm.js authors. All rights reserved.
   * Copyright (c) 2012-2013, Christopher Jeffrey (MIT License)
diff --git a/client/app/scripts/themes/contrast.js b/client/app/scripts/themes/contrast.js
index 9b02091fc..eabf19488 100644
--- a/client/app/scripts/themes/contrast.js
+++ b/client/app/scripts/themes/contrast.js
@@ -6,8 +6,6 @@ const contrastTheme = {
   ...defaultTheme,
 
   /* contrast overrides */
-  background: '#ccf',
-
   backgroundColor: color('white'),
   backgroundDarkerColor: color('purple200'),
   backgroundDarkerSecondaryColor: color('purple200'),
diff --git a/client/app/scripts/themes/default.js b/client/app/scripts/themes/default.js
index fc5cbb40b..cdf9f7b6f 100644
--- a/client/app/scripts/themes/default.js
+++ b/client/app/scripts/themes/default.js
@@ -2,8 +2,6 @@ import { color } from 'weaveworks-ui-components/lib/theme/selectors';
 import { transparentize } from 'polished';
 
 const defaultTheme = {
-  background: '#fcc',
-
   backgroundColor: color('gray50'), // $background-color: $color-gray-50;
   backgroundDarkColor: color('purple900'), // $background-dark-color: $color-purple-900;
   backgroundDarkerColor: color('purple100'), // $background-darker-color: $color-purple-100;
diff --git a/client/app/styles/_base.scss b/client/app/styles/_base.scss
index b55831f41..1dfaa444c 100644
--- a/client/app/styles/_base.scss
+++ b/client/app/styles/_base.scss
@@ -1,1804 +1,3 @@
 @import '~@fortawesome/fontawesome-free/css/all.css';
 @import '~@fortawesome/fontawesome-free/css/v4-shims.css';
 @import '~rc-slider/dist/rc-slider.css';
-
-/* sass-lint:disable variable-for-property */
-@font-face {
-  font-family: 'proxima-nova';
-  src: url('../fonts/proximanova-regular.woff');
-}
-
-@font-face {
-  font-family: 'Roboto Mono';
-  src: url('../fonts/robotomono-regular.ttf');
-}
-/* sass-lint:enable variable-for-property */
-
-a {
-  text-decoration: none;
-}
-
-.browsehappy {
-  margin: 0.2em 0;
-  background: $color-gray-200;
-  color: $color-black;
-  padding: 0.2em 0;
-}
-
-/* add this class to truncate text with ellipsis, container needs width */
-.truncate {
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-.colorable {
-  transition: background-color .3s $base-ease;
-}
-
-.palable {
-  transition: all .2s $base-ease;
-}
-
-.hideable {
-  transition: opacity .5s $base-ease;
-}
-
-.blinkable {
-  animation: blinking 1.5s infinite $base-ease;
-}
-
-.hang-around {
-  transition-delay: .5s;
-}
-
-// From https://stackoverflow.com/a/18294634
-.fully-pannable {
-  width: 100%;
-  height: 100%;
-  // Grabbable
-  cursor: move; /* fallback if grab cursor is unsupported */
-  cursor: grab;
-  cursor: -moz-grab;
-  cursor: -webkit-grab;
-
-  &.panning {
-    // Grabbing
-    cursor: grabbing;
-    cursor: -moz-grabbing;
-    cursor: -webkit-grabbing;
-  }
-}
-
-.shadow-2 {
-  box-shadow: 0 3px 10px transparentize($color-black, 0.84), 0 3px 10px transparentize($color-black, 0.77);
-}
-
-.shadow-3 {
-  box-shadow: 0 10px 30px transparentize($color-black, 0.81), 0 6px 10px transparentize($color-black, 0.77);
-}
-
-.overlay {
-  @extend .hideable;
-
-  background-color: $color-white;
-  position: absolute;
-  width: 100%;
-  height: 100%;
-  top: 0;
-  left: 0;
-  opacity: 0;
-  pointer-events: none;
-  z-index: $layer-modal;
-
-  &.faded {
-    // NOTE: Not sure if we should block the pointer events here..
-    pointer-events: all;
-    cursor: wait;
-    opacity: 0.5;
-  }
-}
-
-.overlay-wrapper {
-  align-items: center;
-  background-color: transparentize($color-purple-25, 0.1);
-  border-radius: $border-radius-soft;
-  color: $text-tertiary-color;
-  display: flex;
-  font-size: $font-size-tiny;
-  justify-content: center;
-  padding: 5px;
-  position: fixed;
-  bottom: 11px;
-
-  button {
-    @extend .btn-opacity;
-    background-color: transparent;
-    border: 1px solid transparent;
-    border-radius: $border-radius-soft;
-    color: $text-secondary-color;
-    cursor: pointer;
-    line-height: 20px;
-    padding: 1px 3px;
-    outline: 0;
-
-    i {
-      font-size: $font-size-small;
-      position: relative;
-      top: 2px;
-    }
-
-    &:hover, &.selected {
-      border: 1px solid $text-tertiary-color;
-    }
-
-    &.active {
-      & > * { @extend .blinkable; }
-      border: 1px solid $text-tertiary-color;
-    }
-  }
-}
-
-.btn-opacity {
-  @extend .palable;
-  opacity: $btn-opacity-default;
-  &-selected {
-    opacity: $btn-opacity-selected;
-  }
-  &[disabled] {
-    cursor: default;
-    opacity: $btn-opacity-disabled;
-  }
-  &:not([disabled]):hover {
-    opacity: $btn-opacity-hover;
-  }
-}
-
-.hide {
-  opacity: 0;
-}
-
-.scope-app, .terminal-app {
-  -webkit-font-smoothing: antialiased;
-  background: $body-background-color;
-  bottom: 0;
-  color: $text-color;
-  font-family: $font-family-regular;
-  font-size: $font-size-small;
-  height: auto;
-  left: 0;
-  line-height: 150%;
-  margin: 0;
-  overflow: auto;
-  position: fixed;
-  right: 0;
-  top: 0;
-  width: 100%;
-
-  * {
-    box-sizing: border-box;
-    -webkit-tap-highlight-color: transparent;
-  }
-  *:before,
-  *:after {
-    box-sizing: border-box;
-  }
-
-  p {
-    line-height: 20px;
-    padding-top: 6px;
-    margin-bottom: 14px;
-    letter-spacing: 0;
-    font-weight: 400;
-    color: $text-color;
-  }
-
-  h2 {
-    font-size: $font-size-extra-large;
-    line-height: 40px;
-    padding-top: 8px;
-    margin-bottom: 12px;
-    font-weight: 400;
-  }
-
-  &.time-travel-open {
-    .details-wrapper {
-      margin-top: $timeline-height + 50px;
-    }
-  }
-}
-
-.header {
-  background-color: transparentize($color-purple-25, 0.2);
-  z-index: $layer-front;
-  padding: 15px 10px 0;
-  position: relative;
-  width: 100%;
-
-  .selectors {
-    display: flex;
-    position: relative;
-
-    > * {
-      flex: 1 1;
-    }
-
-    .logo {
-      margin: -16px 0 0 8px;
-      height: 64px;
-      max-width: 250px;
-      min-width: 0;
-    }
-  }
-}
-
-
-.rc-slider {
-  .rc-slider-step { cursor: pointer; }
-  .rc-slider-track { background-color: $text-tertiary-color; }
-  .rc-slider-rail { background-color: $border-light-color; }
-  .rc-slider-handle { border-color: $text-tertiary-color; }
-}
-
-.footer {
-  @extend .overlay-wrapper;
-  right: 43px;
-
-  &-status {
-    margin-right: 1em;
-  }
-
-  &-label, .pause-text {
-    margin: 0 0.25em;
-  }
-
-  &-versionupdate {
-    margin-right: 0.5em;
-  }
-
-  &-tools {
-    display: flex;
-  }
-
-  &-icon {
-    margin-left: 0.5em;
-  }
-
-  .tooltip-wrapper {
-    position: relative;
-
-    .tooltip {
-      display: none;
-      background-color: $color-black;
-      position: absolute;
-      color: $color-white;
-      text-align: center;
-      line-height: 22px;
-      border-radius: $border-radius-soft;
-      font-size: $font-size-tiny;
-      margin-bottom: 25px;
-      margin-left: -4px;
-      opacity: 0.75;
-      padding: 10px 20px;
-      bottom: 0;
-      left: 10px;
-      transform: translateX(-50%);
-      white-space: nowrap;
-      z-index: $layer-tooltip;
-
-      // Adjusted from http://www.cssarrowplease.com/
-      &:after {
-        border: 6px solid transparent;
-        content: ' ';
-        top: 100%;
-        left: 50%;
-        height: 0;
-        width: 0;
-        position: absolute;
-        border-color: transparent;
-        border-top-color: $color-black;
-        margin-left: -6px;
-      }
-    }
-
-    &:hover .tooltip {
-      display: block;
-    }
-  }
-}
-
-.zoomable-canvas svg {
-  @extend .fully-pannable;
-}
-
-.topologies-selector {
-  margin: 0 4px;
-  display: flex;
-
-  .topologies-item {
-    margin: 0px 8px;
-
-    &-label {
-      font-size: $font-size-normal;
-    }
-
-  }
-
-  .topologies-sub {
-    &-item {
-      &-label {
-        font-size: $font-size-small;
-      }
-    }
-  }
-
-  .topologies-item-main,
-  .topologies-sub-item {
-    pointer-events: all;
-    color: $text-secondary-color;
-    @extend .btn-opacity;
-    cursor: pointer;
-    padding: 4px 8px;
-    border-radius: $border-radius-soft;
-    opacity: 0.9;
-    margin-bottom: 3px;
-    border: 1px solid transparent;
-    white-space: nowrap;
-
-    &-active, &:hover {
-      color: $text-color;
-      background-color: $background-darker-color;
-    }
-
-    &-active {
-      opacity: 0.85;
-    }
-
-    &-matched {
-      border-color: $color-blue-400;
-    }
-
-  }
-
-  .topologies-sub-item {
-    padding: 2px 8px;
-  }
-
-}
-
-.nodes-chart-overlay {
-  pointer-events: none;
-  opacity: $node-elements-in-background-opacity;
-
-  &:not(.active) {
-    display: none;
-  }
-}
-
-.nodes-chart, .nodes-resources {
-
-  &-error, &-loading {
-    @extend .hideable;
-    pointer-events: none;
-    position: absolute;
-    left: 50%;
-    top: 50%;
-    margin-left: -16.5%;
-    margin-top: -275px;
-    color: $text-secondary-color;
-    width: 33%;
-    height: 550px;
-
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-
-    .heading {
-      font-size: $font-size-normal;
-    }
-
-    &-icon {
-      text-align: center;
-      opacity: 0.25;
-      font-size: $overlay-icon-size;
-    }
-
-    li { padding-top: 5px; }
-  }
-
-  // Make watermarks blink only if actually shown (otherwise the FF performance decreses weirdly).
-  &-loading:not(.hide) &-error-icon-container {
-    @extend .blinkable;
-  }
-
-  &-loading {
-    text-align: center;
-  }
-
-  svg {
-    @extend .hideable;
-    position: absolute;
-    top: 0px;
-  }
-
-  .logo {
-    display: none;
-  }
-
-  svg.exported {
-    .logo {
-      display: inline;
-    }
-  }
-
-  text {
-    font-family: $font-family-regular;
-    fill: $text-secondary-color;
-  }
-
-  .nodes-chart-elements .matched-results {
-    background-color: $label-background-color;
-  }
-
-  .edge {
-    .link-none {
-      fill: none;
-      display: none;
-    }
-    .link-storage {
-      fill: none;
-      stroke: $edge-color;
-      stroke-dasharray: 1, 30;
-      stroke-linecap: round;
-    }
-    .link {
-      fill: none;
-      stroke: $edge-color
-    }
-    .shadow {
-      fill: none;
-      stroke: $color-blue-400;
-      stroke-opacity: 0;
-    }
-    &.highlighted {
-      .shadow {
-        stroke-opacity: $edge-highlight-opacity;
-      }
-    }
-  }
-
-  .edge-marker {
-    color: $edge-color;
-    fill: $edge-color;
-  }
-}
-
-.matched-results {
-  text-align: center;
-
-  &-match {
-    font-size: $font-size-small;
-
-    &-wrapper {
-      display: inline-block;
-      margin: 1px;
-      padding: 2px 4px;
-      background-color: transparentize($color-blue-400, 0.9);
-    }
-
-    &-label {
-      color: $text-secondary-color;
-      margin-right: 0.5em;
-    }
-  }
-
-  &-more {
-    font-size: $font-size-tiny;
-    color: $color-blue-700;
-    margin-top: -2px;
-  }
-}
-
-.details {
-  &-wrapper {
-    position: fixed;
-    display: flex;
-    z-index: $layer-toolbar;
-    right: $details-window-padding-left;
-    top: 100px;
-    bottom: 48px;
-    transition: transform 0.33333s cubic-bezier(0,0,0.21,1), margin-top .15s $base-ease;
-  }
-}
-
-.node-details {
-  height: 100%;
-  width: $details-window-width;
-  background-color: transparentize($color-white, 0.14);
-  display: flex;
-  flex-flow: column;
-  margin-bottom: 12px;
-  padding-bottom: 2px;
-  border-radius: $border-radius-soft;
-  background-color: $color-white;
-  @extend .shadow-2;
-  // keep node-details above the terminal.
-  z-index: $layer-front;
-  overflow: hidden;
-
-  &:last-child {
-    margin-bottom: 0;
-  }
-
-  &-tools-wrapper {
-    position: relative;
-  }
-
-
-  &-tools {
-    position: absolute;
-    top: 6px;
-    right: 8px;
-
-    .close-details {
-      position: relative;
-      z-index: $layer-front;
-    }
-
-    > i {
-      @extend .btn-opacity;
-      padding: 4px 5px;
-      margin-left: 2px;
-      font-size: $font-size-normal;
-      color: $color-white;
-      cursor: pointer;
-      border: 1px solid transparent;
-      border-radius: $border-radius-soft;
-
-      span {
-        font-family: $font-family-regular;
-        font-size: $font-size-small;
-        margin-left: 4px;
-
-        span {
-          text-transform: capitalize;
-          font-size: $font-size-normal;
-          margin-left: 0;
-        }
-      }
-
-      &:hover {
-        border-color: transparentize($color-white, 0.4);
-      }
-    }
-  }
-
-  .match {
-    background-color: transparentize($color-blue-400, 0.7);
-    border: 1px solid $color-blue-400;
-  }
-
-  &-header {
-    @extend .colorable;
-
-    &-wrapper {
-      padding: 36px 36px 8px 36px;
-    }
-
-    &-label {
-      color: $color-white;
-      margin: 0;
-      width: 348px;
-      padding-top: 0;
-    }
-
-    .details-tools {
-      position: absolute;
-      top: 16px;
-      right: 24px;
-    }
-
-    &-notavailable {
-      background-color: $background-dark-color;
-    }
-
-  }
-
-  &-relatives {
-    margin-top: 4px;
-    font-size: $font-size-normal;
-    color: $color-white;
-
-    &-link {
-      @extend .truncate;
-      @extend .btn-opacity;
-      display: inline-block;
-      margin-right: 0.5em;
-      cursor: pointer;
-      text-decoration: underline;
-      opacity: $link-opacity-default;
-      max-width: 12em;
-    }
-
-    &-more {
-      @extend .btn-opacity;
-      padding: 0 2px;
-      cursor: pointer;
-      font-size: $font-size-tiny;
-      font-weight: bold;
-      display: inline-block;
-      position: relative;
-      top: -5px;
-    }
-  }
-
-  &-controls {
-    white-space: nowrap;
-    padding: 8px 0;
-    font-size: $font-size-small;
-
-    &-wrapper {
-      padding: 0 36px 0 32px;
-    }
-
-    .node-control-button {
-      color: $color-white;
-    }
-
-    &-spinner {
-      @extend .hideable;
-      color: $color-white;
-      margin-left: 8px;
-    }
-
-    &-error {
-      @extend .truncate;
-      float: right;
-      width: 55%;
-      padding-top: 6px;
-      text-align: left;
-      color: $color-white;
-
-      &-icon {
-        @extend .blinkable;
-        margin-right: 0.5em;
-      }
-    }
-  }
-
-  &-content {
-    flex: 1;
-    padding: 0 36px 0 36px;
-    overflow-y: auto;
-
-    &-loading {
-      margin-top: 48px;
-      text-align: center;
-      font-size: $font-size-huge;
-      color: $text-tertiary-color;
-    }
-
-    &-section {
-      margin: 16px 0;
-
-      &-header {
-        font-size: $font-size-normal;
-        color: $text-tertiary-color;
-        margin-bottom: 10px;
-      }
-    }
-  }
-
-  &-health {
-
-    &-wrapper {
-      display: flex;
-      justify-content: space-around;
-      align-content: center;
-      text-align: center;
-      flex-wrap: wrap;
-    }
-
-    &-overflow {
-      @extend .btn-opacity;
-      flex-basis: 33%;
-      display: flex;
-      flex-direction: row;
-      flex-wrap: wrap;
-      align-items: center;
-      opacity: 0.85;
-      cursor: pointer;
-      position: relative;
-      padding-bottom: 16px;
-
-      &-item {
-        padding: 4px 8px;
-        line-height: 1.2;
-        flex-basis: 48%;
-
-        &-value {
-          color: $text-secondary-color;
-          font-size: $font-size-normal;
-        }
-
-        &-label {
-          color: $text-secondary-color;
-          font-size: $font-size-tiny;
-        }
-      }
-    }
-
-    &-item {
-      padding: 8px 16px;
-      width: 33%;
-      display: flex;
-      flex-direction: column;
-      flex-grow: 1;
-
-      &-label {
-        color: $text-secondary-color;
-        font-size: $font-size-small;
-      }
-
-      &-sparkline {
-        margin-top: auto;
-      }
-
-      &-placeholder {
-        font-size: $font-size-extra-large;
-        opacity: 0.2;
-        margin-bottom: 0.2em;
-      }
-    }
-
-    &-link-item {
-      @extend .btn-opacity;
-      cursor: pointer;
-      opacity: $link-opacity-default;
-      width: 33%;
-      display: flex;
-      color: inherit;
-
-      .node-details-health-item {
-        width: auto;
-      }
-    }
-  }
-
-  &-info {
-
-    &-field {
-      display: flex;
-      align-items: baseline;
-
-      &-label {
-        text-align: right;
-        width: 30%;
-        color: $text-secondary-color;
-        padding: 0 0.5em 0 0;
-        white-space: nowrap;
-        font-size: $font-size-small;
-
-        &::after {
-          content: ':';
-        }
-      }
-
-      &-value {
-        font-size: $font-size-small;
-        flex: 1;
-        // Now required (from chrome 48) to get overflow + flexbox behaving:
-        min-width: 0;
-        color: $text-color;
-      }
-    }
-  }
-
-  &-property-list {
-    &-controls {
-      margin-left: -4px;
-    }
-
-    &-field {
-      display: flex;
-      align-items: baseline;
-
-      &-label {
-        text-align: right;
-        width: 50%;
-        color: $text-secondary-color;
-        padding: 0 0.5em 0 0;
-        white-space: nowrap;
-        font-size: $font-size-small;
-
-        &::after {
-          content: ':';
-        }
-      }
-
-      &-value {
-        font-size: $font-size-small;
-        flex: 1;
-        // Now required (from chrome 48) to get overflow + flexbox behaving:
-        min-width: 0;
-        color: $text-color;
-      }
-    }
-  }
-
-  &-generic-table {
-    width: 100%;
-
-    tr {
-      display: flex;
-      th, td {
-        padding: 0 5px;
-      }
-    }
-  }
-
-  &-table {
-    width: 100%;
-    border-spacing: 0;
-    /* need fixed for truncating, but that does not extend wide columns dynamically */
-    table-layout: fixed;
-
-    &-wrapper {
-      margin: 24px -4px;
-    }
-
-    &-header {
-      color: $text-tertiary-color;
-      font-size: $font-size-small;
-      text-align: right;
-      padding: 0;
-
-      .node-details-table-header-sortable {
-        padding: 3px 4px;
-        cursor: pointer;
-      }
-
-      &-sorted {
-        color: $text-secondary-color;
-      }
-
-      &-sorter {
-        margin: 0 0.35em;
-      }
-
-      &:first-child {
-        margin-right: 0;
-        text-align: left;
-      }
-    }
-
-    tbody {
-      position: relative;
-
-      .min-height-constraint {
-        position: absolute;
-        width: 0 !important;
-        opacity: 0;
-        top: 0;
-      }
-    }
-
-    &-node {
-      font-size: $font-size-small;
-      line-height: 1.5;
-
-      &:hover, &.selected {
-        background-color: $color-white;
-      }
-
-      > * {
-        padding: 0 4px;
-      }
-
-      &-link {
-        @extend .btn-opacity;
-        text-decoration: underline;
-        cursor: pointer;
-        opacity: $link-opacity-default;
-        color: $text-color;
-      }
-
-      &-value, &-metric {
-        flex: 1;
-        margin-left: 0.5em;
-        text-align: right;
-      }
-
-      &-metric-link {
-        @extend .btn-opacity;
-        text-decoration: underline;
-        cursor: pointer;
-        opacity: $link-opacity-default;
-        color: $text-color;
-      }
-
-      &-value-scalar {
-        // width: 2em;
-        text-align: right;
-        margin-right: 0.5em;
-      }
-
-      &-value-minor,
-      &-value-unit {
-        font-size: $font-size-small;
-        color: $text-secondary-color;
-      }
-    }
-  }
-}
-
-
-
-.node-resources {
-  &-metric-box {
-    @extend .palable;
-    cursor: pointer;
-    fill: transparentize($color-gray-600, 0.6);
-
-    &-info {
-      background-color: transparentize($color-white, 0.4);
-      border-radius: $border-radius-soft;
-      cursor: inherit;
-      padding: 5px;
-
-      .wrapper {
-        display: block;
-
-        &.label { font-size: $font-size-small; }
-        &.consumption { font-size: $font-size-tiny; }
-      }
-    }
-  }
-
-  &-layer-topology {
-    background-color: transparentize($color-gray-50, 0.05);
-    border-radius: $border-radius-soft;
-    border: 1px solid $color-gray-200;
-    color: $text-tertiary-color;
-    font-size: $font-size-normal;
-    font-weight: bold;
-    padding-right: 20px;
-    text-align: right;
-    text-transform: capitalize;
-  }
-}
-
-// This part sets the styles only for the 'real' node details table, not applying
-// them to the nodes grid, because there we control hovering from the JS.
-// NOTE: Maybe it would be nice to separate the class names between the two places
-// where node tables are used - i.e. it doesn't make sense that node-details-table
-// can also refer to the tables in the nodes grid.
-.details-wrapper .node-details-table {
-  &-node {
-    &:hover, &.selected {
-      background-color: $color-white;
-    }
-  }
-}
-
-.node-control-button {
-  @extend .btn-opacity;
-  padding: 6px;
-  margin-left: 2px;
-  font-size: $font-size-small;
-  color: $text-secondary-color;
-  cursor: pointer;
-  border: 1px solid transparent;
-  border-radius: $border-radius-soft;
-  &:hover {
-    border-color: transparentize($color-white, 0.4);
-  }
-  &-pending, &-pending:hover {
-    opacity: 0.2;
-    border-color: transparent;
-    cursor: not-allowed;
-  }
-}
-
-.terminal {
-
-  &-app {
-    display: flex;
-    flex-flow: column;
-  }
-
-  &-embedded {
-    position: relative;
-    // shadow of animation-wrapper is 10px, let it fit in here without being
-    // overflow hiddened.
-    flex: 1;
-    overflow-x: hidden;
-  }
-
-  &-animation-wrapper {
-    position: absolute;
-    // some room for the drop shadow.
-    top: 10px;
-    left: 10px;
-    bottom: 10px;
-    right: 0;
-    transition: transform 0.5s cubic-bezier(0.230, 1.000, 0.320, 1.000);
-    @extend .shadow-2;
-  }
-
-  &-wrapper {
-    width: 100%;
-    height: 100%;
-    border: 0px solid $color-black;
-    color: $color-gray-50;
-  }
-
-  &-header {
-    @extend .truncate;
-    color: $color-white;
-    height: $terminal-header-height;
-    padding: 8px 24px;
-    background-color: $text-color;
-    position: relative;
-    font-size: $font-size-small;
-    line-height: 28px;
-    border-top-left-radius: $border-radius-soft;
-
-    &-title {
-      cursor: default;
-    }
-
-    &-tools {
-      position: absolute;
-      right: 8px;
-      top: 6px;
-
-      &-item, &-item-icon {
-        @extend .palable;
-        padding: 4px 5px;
-        color: $color-white;
-        cursor: pointer;
-        opacity: 0.7;
-        border: 1px solid transparent;
-        border-radius: $border-radius-soft;
-
-        font-size: $font-size-tiny;
-        font-weight: bold;
-
-        &:hover {
-          opacity: 1;
-          border-color: transparentize($color-white, 0.4);
-        }
-      }
-
-      &-item-icon {
-        font-size: $font-size-normal;
-      }
-    }
-  }
-
-  &-embedded &-inner { top: $terminal-header-height; }
-  &-app &-inner { top: 0; }
-  &-inner {
-    cursor: text;
-    font-family: $font-family-monospace;
-    position: absolute;
-    bottom: 0;
-    left: 0;
-    right: 0;
-    background-color: $color-black;
-    padding: 8px;
-    box-sizing: content-box;
-    border-bottom-left-radius: $border-radius-soft;
-
-    .terminal {
-      background-color: transparent !important;
-    }
-  }
-
-  &-status-bar {
-    font-family: $font-family-regular;
-    position: absolute;
-    bottom: 16px;
-    right: 16px;
-    width: 50%;
-    padding: 16px 16px;
-    opacity: 0.8;
-    border-radius: $border-radius-soft;
-
-    h3 {
-      margin: 4px 0;
-    }
-
-    &-message {
-      margin: 4px 0;
-      color: $color-white;
-    }
-
-    .link {
-      font-weight: bold;
-      cursor: pointer;
-      float: right;
-    }
-  }
-
-  &-cursor {
-    color: $color-black;
-    background: $color-gray-50;
-  }
-}
-
-.terminal-inactive .terminal-cursor {
-  visibility: hidden;
-}
-
-.metric {
-  &-unit {
-    padding-left: 0.25em;
-  }
-}
-
-.show-more {
-  @extend .btn-opacity;
-  border-top: 1px dotted $border-light-color;
-  padding: 0px 0;
-  margin-top: 4px;
-  text-align: right;
-  cursor: pointer;
-  color: $text-secondary-color;
-  font-size: $font-size-small;
-
-  &-icon {
-    color: $text-tertiary-color;
-    font-size: $font-size-normal;
-    position: relative;
-    top: 1px;
-  }
-}
-
-.plugins {
-  margin-right: 0.5em;
-
-  &-label {
-    margin-right: 0.25em;
-  }
-
-  &-plugin {
-    cursor: default;
-  }
-
-  &-plugin + &-plugin:before {
-    content: ', ';
-  }
-
-  &-plugin-icon {
-    top: 1px;
-    position: relative;
-    font-size: $font-size-large;
-    margin-right: 2px;
-  }
-
-  .error {
-    animation: blinking 2.0s 60 $base-ease; // blink for 2 minutes
-    color: $text-secondary-color;
-  }
-
-  &-empty {
-    opacity: $text-secondary-color;
-  }
-}
-
-.status {
-  padding: 2px 12px;
-  background-color: $body-background-color;
-  border-radius: $border-radius-soft;
-  color: $text-secondary-color;
-  display: inline-block;
-  opacity: 0.9;
-
-  &-icon {
-    font-size: $font-size-normal;
-    position: relative;
-    top: 0.125rem;
-    margin-right: 0.25rem;
-  }
-
-  &.status-loading {
-    animation: blinking 2.0s 150 $base-ease; // keep blinking for 5 minutes
-    text-transform: none;
-    color: $text-color;
-  }
-}
-
-.topology-option, .metric-selector, .network-selector, .view-mode-selector, .time-control {
-  font-size: $font-size-normal;
-  color: $text-secondary-color;
-  margin-bottom: 6px;
-
-  &:last-child {
-    margin-bottom: 0;
-  }
-
-  i {
-    font-size: $font-size-tiny;
-    margin-left: 4px;
-    color: $color-orange-500;
-  }
-
-  &-wrapper {
-    pointer-events: all;
-    border-radius: $border-radius-soft;
-    border: 1px solid $background-darker-color;
-    display: inline-block;
-    white-space: nowrap;
-  }
-
-  &-action {
-    @extend .btn-opacity;
-    padding: 3px 12px;
-    cursor: pointer;
-    display: inline-block;
-    background-color: $background-color;
-
-    &-selected, &:not([disabled]):hover {
-      color: $text-darker-color;
-      background-color: $background-darker-color;
-    }
-
-    &:first-child {
-      border-left: none;
-      border-top-left-radius: $border-radius-soft;
-      border-bottom-left-radius: $border-radius-soft;
-    }
-
-    &:last-child {
-      border-top-right-radius: $border-radius-soft;
-      border-bottom-right-radius: $border-radius-soft;
-    }
-  }
-}
-
-.metric-selector {
-  font-size: $font-size-small;
-  margin-top: 6px;
-}
-
-.view-mode-selector, .time-control {
-  margin-left: 20px;
-
-  &-wrapper {
-    pointer-events: all;
-    border-color: $background-darker-secondary-color;
-    overflow: hidden;
-  }
-
-  &:first-child,
-  &:last-child {
-    .view-mode-selector-action {
-      border-radius: $border-radius-none;
-    }
-  }
-
-  &-action {
-    background-color: transparent;
-
-    &-selected, &:not([disabled]):hover {
-      background-color: $background-darker-color;
-    }
-
-    &:not(:last-child) {
-      border-right: 1px solid $background-darker-secondary-color;
-    }
-  }
-}
-
-.time-control {
-  margin-right: 20px;
-
-  &-controls {
-    align-items: center;
-    justify-content: flex-end;
-    display: flex;
-  }
-
-  &-spinner {
-    display: inline-block;
-    margin-right: 15px;
-    margin-top: 3px;
-
-    i {
-      color: $text-secondary-color;
-      font-size: $font-size-normal;
-    }
-  }
-
-  &-info {
-    @extend .blinkable;
-    display: block;
-    margin-top: 5px;
-    text-align: right;
-    pointer-events: all;
-    font-size: $font-size-small;
-  }
-}
-
-.topology-option {
-  &-wrapper {
-    display: inline-flex;
-    flex-wrap: wrap;
-    overflow: hidden;
-    max-height: 27px;
-    transition: max-height 0.5s 0s $base-ease;
-
-    .topology-option-action {
-      flex: 1 1 auto;
-      text-align: center;
-    }
-  }
-  
-    &:last-child :hover {
-    height: auto;
-    max-height: calc((13px * 1.5 + 3px + 3px) * 8); // expand to display 8 rows
-    overflow: auto;
-    transition: max-height 0.5s 0s $base-ease;
-  } 
-
-  font-size: $font-size-small;
-
-  &-action {
-    &-selected {
-      cursor: default;
-    }
-  }
-}
-
-.view-mode-selector-wrapper, .time-control-wrapper {
-  .label { margin-left: 4px; }
-  i {
-    margin-left: 0;
-    color: $text-secondary-color;
-  }
-}
-
-.network-selector-action {
-  border-top: 3px solid transparent;
-  border-bottom: 3px solid $background-dark-color;
-}
-
-.warning {
-  display: inline-block;
-  cursor: pointer;
-  border: 1px dashed transparent;
-  text-transform: none;
-  border-radius: $border-radius-soft;
-  margin-left: 4px;
-
-  &-wrapper {
-    display: flex;
-  }
-
-  &-text {
-    display: inline-block;
-    color: $text-secondary-color;
-    padding-left: 0.5em;
-  }
-
-  &-icon {
-    @extend .btn-opacity;
-  }
-
-  &-expanded {
-    margin-left: 0;
-    padding: 2px 4px;
-    border-color: $text-tertiary-color;
-  }
-
-  &-expanded &-icon {
-    position: relative;
-    top: 4px;
-    left: 2px;
-  }
-
-}
-
-.sidebar {
-  position: fixed;
-  bottom: 11px;
-  left: 11px;
-  padding: 5px;
-  font-size: $font-size-small;
-  border-radius: $border-radius-soft;
-  border: 1px solid transparent;
-  pointer-events: none;
-  max-width: 50%;
-}
-
-.sidebar-gridmode {
-  background-color: $color-purple-50;
-  border-color: $background-darker-color;
-  opacity: 0.9;
-}
-
-.search {
-  &-wrapper {
-    margin: 0 8px;
-    min-width: 160px;
-    text-align: right;
-  }
-}
-
-@keyframes blinking {
-  0%, 50%, 100% {
-    opacity: 1.0;
-  } 25% {
-    opacity: 0.5;
-  }
-}
-
-//
-// Help panel!
-//
-
-.help-panel {
-  z-index: $layer-modal;
-  background-color: $color-white;
-  @extend .shadow-2;
-  display: flex;
-  position: relative;
-
-  &-wrapper {
-    position: absolute;
-    width: 100%;
-    height: 100%;
-
-    display: flex;
-    justify-content: center;
-    align-items: flex-start;
-  }
-
-  &-header {
-    background-color: $color-blue-400;
-    padding: 12px 24px;
-    color: $color-white;
-
-    h2 {
-      margin: 0;
-      font-size: $font-size-large;
-    }
-  }
-
-  &-tools {
-    position: absolute;
-    top: 6px;
-    right: 8px;
-
-    i {
-      @extend .btn-opacity;
-      padding: 4px 5px;
-      margin-left: 2px;
-      font-size: $font-size-normal;
-      color: $color-purple-400;
-      cursor: pointer;
-      border: 1px solid transparent;
-      border-radius: $border-radius-soft;
-
-      &:hover {
-        border-color: transparentize($color-purple-400, 0.4);
-      }
-    }
-
-  }
-
-  &-main {
-    display: flex;
-    padding: 12px 36px 36px 36px;
-    flex-direction: row;
-    align-items: stretch;
-
-    h2 {
-      line-height: 150%;
-      font-size: $font-size-large;
-      color: $color-purple-400;
-      padding: 4px 0;
-      border-bottom: 1px solid transparentize($color-purple-400, 0.9);
-    }
-
-    h3 {
-      font-size: $font-size-normal;
-      color: $color-purple-400;
-      padding: 4px 0;
-    }
-
-    p {
-      margin: 0;
-    }
-  }
-
-  &-shortcuts {
-    margin-right: 36px;
-
-    &-shortcut {
-      kbd {
-        display: inline-block;
-        padding: 3px 5px;
-        font-size: $font-size-tiny;
-        line-height: 10px;
-        color: $color-gray-600;
-        vertical-align: middle;
-        background-color: $color-white;
-        border: solid 1px $color-gray-200;
-        border-bottom-color: $color-gray-600;
-        border-radius: $border-radius-soft;
-        box-shadow: inset 0 -1px 0 $color-gray-600;
-      }
-      div.key {
-        width: 60px;
-        display: inline-block;
-      }
-      div.label {
-        display: inline-block;
-      }
-    }
-  }
-
-  &-search {
-    margin-right: 36px;
-
-    &-row {
-      display: flex;
-      flex-direction: row;
-
-      &-term {
-        flex: 1;
-        color: $text-secondary-color;
-        i {
-          margin-right: 5px;
-        }
-      }
-
-      &-term-label {
-        flex: 1;
-        b {
-          color: $text-secondary-color;
-        }
-      }
-    }
-  }
-
-  &-fields {
-    display: flex;
-    flex-direction: column;
-
-    &-current-topology {
-      color: $color-purple-400;
-    }
-
-    &-fields {
-      display: flex;
-      align-items: stretch;
-
-      &-column {
-        display: flex;
-        flex-direction: column;
-        flex: 1;
-        margin-right: 12px;
-
-        &-content {
-          overflow: auto;
-          // 160px for top and bottom margins and the rest of the help window
-          // is about 160px too.
-          // Notes: Firefox gets a bit messy if you try and bubble
-          // heights + overflow up (min-height issue + still doesn't work v.well),
-          // so this is a bit of a hack.
-          max-height: calc(100vh - 160px - 160px - 160px);
-        }
-      }
-    }
-  }
-}
-
-//
-// Zoom control
-//
-
-.zoom-control {
-  @extend .overlay-wrapper;
-  flex-direction: column;
-  padding: 5px 7px 0;
-  bottom: 50px;
-  right: 40px;
-
-  a:hover { border-color: transparent; }
-
-  .rc-slider {
-    margin: 5px 0;
-    height: 60px;
-  }
-}
-
-//
-// Debug panel!
-//
-
-.debug-panel {
-  @extend .shadow-2;
-  background-color: $color-white;
-  top: 80px;
-  position: absolute;
-  padding: 10px;
-  left: 10px;
-  z-index: $layer-modal;
-
-  opacity: 0.3;
-
-  &:hover {
-    opacity: 1;
-  }
-
-  table {
-    display: inline-block;
-    border-collapse: collapse;
-    margin: 4px 2px;
-
-    td {
-      width: 10px;
-      height: 10px;
-    }
-  }
-}
-
-//
-// Nodes grid.
-//
-
-.nodes-grid {
-  tr {
-    border-radius: $border-radius-soft;
-  }
-
-  &-label-minor {
-    opacity: 0.7;
-  }
-
-  &-id-column {
-    margin: -3px -4px;
-    padding: 2px 4px;
-    display: flex;
-    div {
-      flex: 1;
-    }
-  }
-
-  .node-details-table-wrapper-wrapper {
-
-    flex: 1;
-    display: flex;
-    flex-direction: row;
-    width: 100%;
-
-    .node-details-table-wrapper {
-      margin: 0;
-      flex: 1;
-    }
-
-    .nodes-grid-graph {
-      position: relative;
-      margin-top: 24px;
-    }
-
-    .node-details-table-node > * {
-      padding: 3px 4px;
-    }
-
-    // Keeping the row height fixed is important for locking the rows on hover.
-    .node-details-table-node, thead tr {
-      height: 28px;
-    }
-
-    tr:nth-child(even) {
-      background: $color-gray-100;
-    }
-
-    tbody tr {
-      border: 1px solid transparent;
-      border-radius: $border-radius-soft;
-      cursor: pointer;
-    }
-
-    // We fully control hovering of the grid rows from JS,
-    // because we want consistent behaviour between the
-    // visual and row locking logic that happens on hover.
-    tbody tr.selected, tbody tr.focused {
-      background-color: transparentize($color-blue-400, 0.85);
-      border: 1px solid $color-blue-400;
-    }
-  }
-
-  .scroll-body {
-
-    table {
-      border-bottom: 1px solid $color-gray-200;
-    }
-
-    thead, tbody tr {
-      display: table;
-      width: 100%;
-      table-layout: fixed;
-    }
-
-    tbody:after {
-      content: '';
-      display: block;
-      // height of the controls so you can scroll the last row up above them
-      // and have a good look.
-      height: 140px;
-    }
-
-    thead {
-      box-shadow: 0 4px 2px -2px transparentize($color-black, 0.84);
-      border-bottom: 1px solid $color-gray-600;
-    }
-
-    tbody {
-      display: block;
-      overflow-y: scroll;
-    }
-  }
-}
-
-.troubleshooting-menu {
-  display: flex;
-  position: relative;
-
-  &-wrapper {
-    height: 100%;
-    width: 100%;
-    align-items: center;
-    display: flex;
-    justify-content: center;
-    position: absolute;
-  }
-
-  &-content {
-    position: relative;
-    background-color: $color-white;
-    padding: 20px;
-    @extend .shadow-2;
-    z-index: $layer-modal;
-  }
-
-  &-item {
-    height: 40px;
-    .soft { opacity: 0.6; }
-  }
-
-  button {
-    border: 0;
-    background-color: transparent;
-    cursor: pointer;
-    padding: 0;
-    outline: 0;
-  }
-
-  button, a {
-    color: $color-purple-900;
-
-    &:hover {
-      color: $text-color;
-    }
-  }
-
-  i {
-    width: 20px;
-    text-align: center;
-    margin-right: 10px;
-  }
-
-  .fa.fa-times {
-    width: 25px;
-  }
-}
-
-@media (max-width: 1330px) {
-  .view-mode-selector .label { display: none; }
-}

From fa9754a8292aae36f85b5f58e2f3e7530ee1a8e1 Mon Sep 17 00:00:00 2001
From: Filip Barl <filip@weave.works>
Date: Thu, 3 Oct 2019 15:47:26 +0200
Subject: [PATCH 04/12] Satisfying all the stylelint rules

---
 client/.stylelintrc                           |   1 +
 client/app/scripts/components/global-style.js | 280 +++++++++---------
 2 files changed, 140 insertions(+), 141 deletions(-)

diff --git a/client/.stylelintrc b/client/.stylelintrc
index e458ce678..783419f13 100644
--- a/client/.stylelintrc
+++ b/client/.stylelintrc
@@ -11,6 +11,7 @@
     "color-no-hex": true,
     "function-blacklist": ["/^rgb/", "/^hsl/"],
     "no-empty-source": null,
+    "no-descending-specificity": null,
     "no-duplicate-selectors": null,
     "property-no-vendor-prefix": [true, {
       "ignoreProperties": ["tab-size", "hyphens"],
diff --git a/client/app/scripts/components/global-style.js b/client/app/scripts/components/global-style.js
index dc7a40de5..9875235b7 100644
--- a/client/app/scripts/components/global-style.js
+++ b/client/app/scripts/components/global-style.js
@@ -1,8 +1,111 @@
 import { createGlobalStyle } from 'styled-components';
+import { transparentize } from 'polished';
 import { color } from 'weaveworks-ui-components/lib/theme/selectors';
 
+const hideable = props => `
+  transition: opacity .5s ${props.theme.scope.baseEase};
+`;
+
+const palable = props => `
+  transition: all .2s ${props.theme.scope.baseEase};
+`;
+
+const blinkable = props => `
+  animation: blinking 1.5s infinite ${props.theme.scope.baseEase};
+`;
+
+const colorable = props => `
+  transition: background-color .3s ${props.theme.scope.baseEase};
+`;
+
+/* add this class to truncate text with ellipsis, container needs width */
+const truncate = () => `
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+`;
+
+const shadow2 = props => `
+  box-shadow: 0 3px 10px ${transparentize(0.84, props.theme.colors.black)}, 0 3px 10px ${transparentize(0.77, props.theme.colors.black)};
+`;
+
+const btnOpacity = props => `
+  ${palable(props)};
+  opacity: ${props.theme.scope.btnOpacityDefault};
+  &-selected {
+    opacity: ${props.theme.scope.btnOpacitySelected};
+  }
+  &[disabled] {
+    cursor: default;
+    opacity: ${props.theme.scope.btnOpacityDisabled};
+  }
+  &:not([disabled]):hover {
+    opacity: ${props.theme.scope.btnOpacityHover};
+  }
+`;
+
+/* From https://stackoverflow.com/a/18294634 */
+const fullyPannable = () => `
+  width: 100%;
+  height: 100%;
+  /* stylelint-disable value-no-vendor-prefix */
+  /* Grabbable */
+  cursor: move; /* fallback if grab cursor is unsupported */
+  cursor: grab;
+  cursor: -moz-grab;
+  cursor: -webkit-grab;
+
+  &.panning {
+    /* Grabbing */
+    cursor: grabbing;
+    cursor: -moz-grabbing;
+    cursor: -webkit-grabbing;
+  }
+  /* stylelint-enable value-no-vendor-prefix */
+`;
+
+const overlayWrapper = props => `
+  align-items: center;
+  background-color: ${transparentize(0.1, props.theme.colors.purple25)};
+  border-radius: ${props.theme.borderRadius.soft};
+  color: ${props.theme.scope.textTertiaryColor};
+  display: flex;
+  font-size: ${props.theme.fontSizes.tiny};
+  justify-content: center;
+  padding: 5px;
+  position: fixed;
+  bottom: 11px;
+
+  button {
+    ${btnOpacity(props)};
+    background-color: transparent;
+    border: 1px solid transparent;
+    border-radius: ${props.theme.borderRadius.soft};
+    color: ${props.theme.scope.textSecondaryColor};
+    cursor: pointer;
+    line-height: 20px;
+    padding: 1px 3px;
+    outline: 0;
+
+    i {
+      font-size: ${props.theme.fontSizes.small};
+      position: relative;
+      top: 2px;
+    }
+
+    &:hover, &.selected {
+      border: 1px solid ${props.theme.scope.textTertiaryColor};
+    }
+
+    &.active {
+      & > * { ${blinkable(props)}; }
+      border: 1px solid $text-tertiary-color;
+    }
+  }
+`;
+
 const GlobalStyle = createGlobalStyle`
-  /* sass-lint:disable variable-for-property */
+  /* stylelint-disable sh-waqar/declaration-use-variable */
   @font-face {
     font-family: 'proxima-nova';
     src: url('../fonts/proximanova-regular.woff');
@@ -12,7 +115,7 @@ const GlobalStyle = createGlobalStyle`
     font-family: 'Roboto Mono';
     src: url('../fonts/robotomono-regular.ttf');
   }
-  /* sass-lint:enable variable-for-property */
+  /* stylelint-enable sh-waqar/declaration-use-variable */
 
   a {
     text-decoration: none;
@@ -25,61 +128,12 @@ const GlobalStyle = createGlobalStyle`
     padding: 0.2em 0;
   }
 
-  /* add this class to truncate text with ellipsis, container needs width */
-  .truncate {
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-  }
-
-  .colorable {
-    transition: background-color .3s $base-ease;
-  }
-
-  .palable {
-    transition: all .2s $base-ease;
-  }
-
-  .hideable {
-    transition: opacity .5s $base-ease;
-  }
-
-  .blinkable {
-    animation: blinking 1.5s infinite $base-ease;
-  }
-
   .hang-around {
     transition-delay: .5s;
   }
 
-  /* From https://stackoverflow.com/a/18294634 */
-  .fully-pannable {
-    width: 100%;
-    height: 100%;
-    /* Grabbable */
-    cursor: move; /* fallback if grab cursor is unsupported */
-    cursor: grab;
-    cursor: -moz-grab;
-    cursor: -webkit-grab;
-
-    &.panning {
-      /* Grabbing */
-      cursor: grabbing;
-      cursor: -moz-grabbing;
-      cursor: -webkit-grabbing;
-    }
-  }
-
-  .shadow-2 {
-    box-shadow: 0 3px 10px transparentize($color-black, 0.84), 0 3px 10px transparentize($color-black, 0.77);
-  }
-
-  .shadow-3 {
-    box-shadow: 0 10px 30px transparentize($color-black, 0.81), 0 6px 10px transparentize($color-black, 0.77);
-  }
-
   .overlay {
-    @extend .hideable;
+    ${hideable};
 
     background-color: $color-white;
     position: absolute;
@@ -99,61 +153,6 @@ const GlobalStyle = createGlobalStyle`
     }
   }
 
-  .overlay-wrapper {
-    align-items: center;
-    background-color: transparentize($color-purple-25, 0.1);
-    border-radius: $border-radius-soft;
-    color: $text-tertiary-color;
-    display: flex;
-    font-size: $font-size-tiny;
-    justify-content: center;
-    padding: 5px;
-    position: fixed;
-    bottom: 11px;
-
-    button {
-      @extend .btn-opacity;
-      background-color: transparent;
-      border: 1px solid transparent;
-      border-radius: $border-radius-soft;
-      color: $text-secondary-color;
-      cursor: pointer;
-      line-height: 20px;
-      padding: 1px 3px;
-      outline: 0;
-
-      i {
-        font-size: $font-size-small;
-        position: relative;
-        top: 2px;
-      }
-
-      &:hover, &.selected {
-        border: 1px solid $text-tertiary-color;
-      }
-
-      &.active {
-        & > * { @extend .blinkable; }
-        border: 1px solid $text-tertiary-color;
-      }
-    }
-  }
-
-  .btn-opacity {
-    @extend .palable;
-    opacity: $btn-opacity-default;
-    &-selected {
-      opacity: $btn-opacity-selected;
-    }
-    &[disabled] {
-      cursor: default;
-      opacity: $btn-opacity-disabled;
-    }
-    &:not([disabled]):hover {
-      opacity: $btn-opacity-hover;
-    }
-  }
-
   .hide {
     opacity: 0;
   }
@@ -241,7 +240,7 @@ const GlobalStyle = createGlobalStyle`
   }
 
   .footer {
-    @extend .overlay-wrapper;
+    ${overlayWrapper};
     right: 43px;
 
     &-status {
@@ -308,7 +307,7 @@ const GlobalStyle = createGlobalStyle`
   }
 
   .zoomable-canvas svg {
-    @extend .fully-pannable;
+    ${fullyPannable};
   }
 
   .topologies-selector {
@@ -336,7 +335,7 @@ const GlobalStyle = createGlobalStyle`
     .topologies-sub-item {
       pointer-events: all;
       color: $text-secondary-color;
-      @extend .btn-opacity;
+      ${btnOpacity};
       cursor: pointer;
       padding: 4px 8px;
       border-radius: $border-radius-soft;
@@ -378,7 +377,7 @@ const GlobalStyle = createGlobalStyle`
   .nodes-chart, .nodes-resources {
 
     &-error, &-loading {
-      @extend .hideable;
+      ${hideable};
       pointer-events: none;
       position: absolute;
       left: 50%;
@@ -408,7 +407,7 @@ const GlobalStyle = createGlobalStyle`
 
     /* Make watermarks blink only if actually shown (otherwise the FF performance decreses weirdly). */
     &-loading:not(.hide) &-error-icon-container {
-      @extend .blinkable;
+      ${blinkable};
     }
 
     &-loading {
@@ -416,7 +415,7 @@ const GlobalStyle = createGlobalStyle`
     }
 
     svg {
-      @extend .hideable;
+      ${hideable};
       position: absolute;
       top: 0px;
     }
@@ -514,14 +513,13 @@ const GlobalStyle = createGlobalStyle`
   .node-details {
     height: 100%;
     width: $details-window-width;
-    background-color: transparentize($color-white, 0.14);
     display: flex;
     flex-flow: column;
     margin-bottom: 12px;
     padding-bottom: 2px;
     border-radius: $border-radius-soft;
     background-color: $color-white;
-    @extend .shadow-2;
+    ${shadow2};
     /* keep node-details above the terminal. */
     z-index: $layer-front;
     overflow: hidden;
@@ -546,7 +544,7 @@ const GlobalStyle = createGlobalStyle`
       }
 
       > i {
-        @extend .btn-opacity;
+        ${btnOpacity};
         padding: 4px 5px;
         margin-left: 2px;
         font-size: $font-size-normal;
@@ -579,7 +577,7 @@ const GlobalStyle = createGlobalStyle`
     }
 
     &-header {
-      @extend .colorable;
+      ${colorable};
 
       &-wrapper {
         padding: 36px 36px 8px 36px;
@@ -610,8 +608,8 @@ const GlobalStyle = createGlobalStyle`
       color: $color-white;
 
       &-link {
-        @extend .truncate;
-        @extend .btn-opacity;
+        ${truncate};
+        ${btnOpacity};
         display: inline-block;
         margin-right: 0.5em;
         cursor: pointer;
@@ -621,7 +619,7 @@ const GlobalStyle = createGlobalStyle`
       }
 
       &-more {
-        @extend .btn-opacity;
+        ${btnOpacity};
         padding: 0 2px;
         cursor: pointer;
         font-size: $font-size-tiny;
@@ -646,13 +644,13 @@ const GlobalStyle = createGlobalStyle`
       }
 
       &-spinner {
-        @extend .hideable;
+        ${hideable};
         color: $color-white;
         margin-left: 8px;
       }
 
       &-error {
-        @extend .truncate;
+        ${truncate};
         float: right;
         width: 55%;
         padding-top: 6px;
@@ -660,7 +658,7 @@ const GlobalStyle = createGlobalStyle`
         color: $color-white;
 
         &-icon {
-          @extend .blinkable;
+          ${blinkable};
           margin-right: 0.5em;
         }
       }
@@ -700,7 +698,7 @@ const GlobalStyle = createGlobalStyle`
       }
 
       &-overflow {
-        @extend .btn-opacity;
+        ${btnOpacity};
         flex-basis: 33%;
         display: flex;
         flex-direction: row;
@@ -752,7 +750,7 @@ const GlobalStyle = createGlobalStyle`
       }
 
       &-link-item {
-        @extend .btn-opacity;
+        ${btnOpacity};
         cursor: pointer;
         opacity: $link-opacity-default;
         width: 33%;
@@ -896,7 +894,7 @@ const GlobalStyle = createGlobalStyle`
         }
 
         &-link {
-          @extend .btn-opacity;
+          ${btnOpacity};
           text-decoration: underline;
           cursor: pointer;
           opacity: $link-opacity-default;
@@ -910,7 +908,7 @@ const GlobalStyle = createGlobalStyle`
         }
 
         &-metric-link {
-          @extend .btn-opacity;
+          ${btnOpacity};
           text-decoration: underline;
           cursor: pointer;
           opacity: $link-opacity-default;
@@ -936,7 +934,7 @@ const GlobalStyle = createGlobalStyle`
 
   .node-resources {
     &-metric-box {
-      @extend .palable;
+      ${palable};
       cursor: pointer;
       fill: transparentize($color-gray-600, 0.6);
 
@@ -982,7 +980,7 @@ const GlobalStyle = createGlobalStyle`
   }
 
   .node-control-button {
-    @extend .btn-opacity;
+    ${btnOpacity};
     padding: 6px;
     margin-left: 2px;
     font-size: $font-size-small;
@@ -1023,7 +1021,7 @@ const GlobalStyle = createGlobalStyle`
       bottom: 10px;
       right: 0;
       transition: transform 0.5s cubic-bezier(0.230, 1.000, 0.320, 1.000);
-      @extend .shadow-2;
+      ${shadow2};
     }
 
     &-wrapper {
@@ -1034,7 +1032,7 @@ const GlobalStyle = createGlobalStyle`
     }
 
     &-header {
-      @extend .truncate;
+      ${truncate};
       color: $color-white;
       height: $terminal-header-height;
       padding: 8px 24px;
@@ -1054,7 +1052,7 @@ const GlobalStyle = createGlobalStyle`
         top: 6px;
 
         &-item, &-item-icon {
-          @extend .palable;
+          ${palable};
           padding: 4px 5px;
           color: $color-white;
           cursor: pointer;
@@ -1139,7 +1137,7 @@ const GlobalStyle = createGlobalStyle`
   }
 
   .show-more {
-    @extend .btn-opacity;
+    ${btnOpacity};
     border-top: 1px dotted $border-light-color;
     padding: 0px 0;
     margin-top: 4px;
@@ -1234,7 +1232,7 @@ const GlobalStyle = createGlobalStyle`
     }
 
     &-action {
-      @extend .btn-opacity;
+      ${btnOpacity};
       padding: 3px 12px;
       cursor: pointer;
       display: inline-block;
@@ -1313,7 +1311,7 @@ const GlobalStyle = createGlobalStyle`
     }
 
     &-info {
-      @extend .blinkable;
+      ${blinkable};
       display: block;
       margin-top: 5px;
       text-align: right;
@@ -1384,7 +1382,7 @@ const GlobalStyle = createGlobalStyle`
     }
 
     &-icon {
-      @extend .btn-opacity;
+      ${btnOpacity};
     }
 
     &-expanded {
@@ -1442,7 +1440,7 @@ const GlobalStyle = createGlobalStyle`
   .help-panel {
     z-index: $layer-modal;
     background-color: $color-white;
-    @extend .shadow-2;
+    ${shadow2};
     display: flex;
     position: relative;
 
@@ -1473,7 +1471,7 @@ const GlobalStyle = createGlobalStyle`
       right: 8px;
 
       i {
-        @extend .btn-opacity;
+        ${btnOpacity};
         padding: 4px 5px;
         margin-left: 2px;
         font-size: $font-size-normal;
@@ -1602,7 +1600,7 @@ const GlobalStyle = createGlobalStyle`
    */
 
   .zoom-control {
-    @extend .overlay-wrapper;
+    ${overlayWrapper};
     flex-direction: column;
     padding: 5px 7px 0;
     bottom: 50px;
@@ -1621,7 +1619,7 @@ const GlobalStyle = createGlobalStyle`
    */
 
   .debug-panel {
-    @extend .shadow-2;
+    ${shadow2};
     background-color: $color-white;
     top: 80px;
     position: absolute;
@@ -1763,7 +1761,7 @@ const GlobalStyle = createGlobalStyle`
       position: relative;
       background-color: $color-white;
       padding: 20px;
-      @extend .shadow-2;
+      ${shadow2};
       z-index: $layer-modal;
     }
 

From b6a983e5a8f3b5a19450fd2a322624e54d436a9b Mon Sep 17 00:00:00 2001
From: Filip Barl <filip@weave.works>
Date: Fri, 4 Oct 2019 14:20:57 +0200
Subject: [PATCH 05/12] Replaced all scopeTheme vars in global-style.js and got
 rid of the unused ones

---
 client/app/scripts/components/global-style.js | 156 +++++++++---------
 client/app/scripts/themes/contrast.js         |   8 -
 client/app/scripts/themes/default.js          |  58 +++----
 3 files changed, 102 insertions(+), 120 deletions(-)

diff --git a/client/app/scripts/components/global-style.js b/client/app/scripts/components/global-style.js
index 9875235b7..0aa0fe4d7 100644
--- a/client/app/scripts/components/global-style.js
+++ b/client/app/scripts/components/global-style.js
@@ -2,6 +2,8 @@ import { createGlobalStyle } from 'styled-components';
 import { transparentize } from 'polished';
 import { color } from 'weaveworks-ui-components/lib/theme/selectors';
 
+const scopeTheme = key => props => props.theme.scope[key];
+
 const hideable = props => `
   transition: opacity .5s ${props.theme.scope.baseEase};
 `;
@@ -99,7 +101,7 @@ const overlayWrapper = props => `
 
     &.active {
       & > * { ${blinkable(props)}; }
-      border: 1px solid $text-tertiary-color;
+      border: 1px solid ${props.theme.scope.textTertiaryColor};
     }
   }
 `;
@@ -159,9 +161,9 @@ const GlobalStyle = createGlobalStyle`
 
   .scope-app, .terminal-app {
     -webkit-font-smoothing: antialiased;
-    background: $body-background-color;
+    background: ${scopeTheme('bodyBackgroundColor')};
     bottom: 0;
-    color: $text-color;
+    color: ${scopeTheme('textColor')};
     font-family: $font-family-regular;
     font-size: $font-size-small;
     height: auto;
@@ -189,7 +191,7 @@ const GlobalStyle = createGlobalStyle`
       margin-bottom: 14px;
       letter-spacing: 0;
       font-weight: 400;
-      color: $text-color;
+      color: ${scopeTheme('textColor')};
     }
 
     h2 {
@@ -202,7 +204,7 @@ const GlobalStyle = createGlobalStyle`
 
     &.time-travel-open {
       .details-wrapper {
-        margin-top: $timeline-height + 50px;
+        margin-top: ${scopeTheme('timelineHeight')} + 50px;
       }
     }
   }
@@ -234,9 +236,9 @@ const GlobalStyle = createGlobalStyle`
 
   .rc-slider {
     .rc-slider-step { cursor: pointer; }
-    .rc-slider-track { background-color: $text-tertiary-color; }
-    .rc-slider-rail { background-color: $border-light-color; }
-    .rc-slider-handle { border-color: $text-tertiary-color; }
+    .rc-slider-track { background-color: ${scopeTheme('textTertiaryColor')}; }
+    .rc-slider-rail { background-color: ${scopeTheme('borderLightColor')}; }
+    .rc-slider-handle { border-color: ${scopeTheme('textTertiaryColor')}; }
   }
 
   .footer {
@@ -334,7 +336,7 @@ const GlobalStyle = createGlobalStyle`
     .topologies-item-main,
     .topologies-sub-item {
       pointer-events: all;
-      color: $text-secondary-color;
+      color: ${scopeTheme('textSecondaryColor')};
       ${btnOpacity};
       cursor: pointer;
       padding: 4px 8px;
@@ -345,8 +347,8 @@ const GlobalStyle = createGlobalStyle`
       white-space: nowrap;
 
       &-active, &:hover {
-        color: $text-color;
-        background-color: $background-darker-color;
+        color: ${scopeTheme('textColor')};
+        background-color: ${scopeTheme('backgroundDarkerColor')};
       }
 
       &-active {
@@ -367,7 +369,7 @@ const GlobalStyle = createGlobalStyle`
 
   .nodes-chart-overlay {
     pointer-events: none;
-    opacity: $node-elements-in-background-opacity;
+    opacity: ${scopeTheme('nodeElementsInBackgroundOpacity')};
 
     &:not(.active) {
       display: none;
@@ -384,7 +386,7 @@ const GlobalStyle = createGlobalStyle`
       top: 50%;
       margin-left: -16.5%;
       margin-top: -275px;
-      color: $text-secondary-color;
+      color: ${scopeTheme('textSecondaryColor')};
       width: 33%;
       height: 550px;
 
@@ -432,11 +434,11 @@ const GlobalStyle = createGlobalStyle`
 
     text {
       font-family: $font-family-regular;
-      fill: $text-secondary-color;
+      fill: ${scopeTheme('textSecondaryColor')};
     }
 
     .nodes-chart-elements .matched-results {
-      background-color: $label-background-color;
+      background-color: ${scopeTheme('labelBackgroundColor')};
     }
 
     .edge {
@@ -446,13 +448,13 @@ const GlobalStyle = createGlobalStyle`
       }
       .link-storage {
         fill: none;
-        stroke: $edge-color;
+        stroke: ${scopeTheme('edgeColor')};
         stroke-dasharray: 1, 30;
         stroke-linecap: round;
       }
       .link {
         fill: none;
-        stroke: $edge-color
+        stroke: ${scopeTheme('edgeColor')};
       }
       .shadow {
         fill: none;
@@ -461,14 +463,14 @@ const GlobalStyle = createGlobalStyle`
       }
       &.highlighted {
         .shadow {
-          stroke-opacity: $edge-highlight-opacity;
+          stroke-opacity: ${scopeTheme('edgeHighlightOpacity')};
         }
       }
     }
 
     .edge-marker {
-      color: $edge-color;
-      fill: $edge-color;
+      color: ${scopeTheme('edgeColor')};
+      fill: ${scopeTheme('edgeColor')};
     }
   }
 
@@ -486,7 +488,7 @@ const GlobalStyle = createGlobalStyle`
       }
 
       &-label {
-        color: $text-secondary-color;
+        color: ${scopeTheme('textSecondaryColor')};
         margin-right: 0.5em;
       }
     }
@@ -503,16 +505,16 @@ const GlobalStyle = createGlobalStyle`
       position: fixed;
       display: flex;
       z-index: $layer-toolbar;
-      right: $details-window-padding-left;
+      right: ${scopeTheme('detailsWindowPaddingLeft')};
       top: 100px;
       bottom: 48px;
-      transition: transform 0.33333s cubic-bezier(0,0,0.21,1), margin-top .15s $base-ease;
+      transition: transform 0.33333s cubic-bezier(0,0,0.21,1), margin-top .15s ${scopeTheme('baseEase')};
     }
   }
 
   .node-details {
     height: 100%;
-    width: $details-window-width;
+    width: ${scopeTheme('detailsWindowPaddingLeft')};
     display: flex;
     flex-flow: column;
     margin-bottom: 12px;
@@ -597,7 +599,7 @@ const GlobalStyle = createGlobalStyle`
       }
 
       &-notavailable {
-        background-color: $background-dark-color;
+        background-color: ${scopeTheme('backgroundDarkColor')};
       }
 
     }
@@ -614,7 +616,7 @@ const GlobalStyle = createGlobalStyle`
         margin-right: 0.5em;
         cursor: pointer;
         text-decoration: underline;
-        opacity: $link-opacity-default;
+        opacity: ${scopeTheme('linkOpacityDefault')};
         max-width: 12em;
       }
 
@@ -673,7 +675,7 @@ const GlobalStyle = createGlobalStyle`
         margin-top: 48px;
         text-align: center;
         font-size: $font-size-huge;
-        color: $text-tertiary-color;
+        color: ${scopeTheme('textTertiaryColor')};
       }
 
       &-section {
@@ -681,7 +683,7 @@ const GlobalStyle = createGlobalStyle`
 
         &-header {
           font-size: $font-size-normal;
-          color: $text-tertiary-color;
+          color: ${scopeTheme('textTertiaryColor')};
           margin-bottom: 10px;
         }
       }
@@ -715,12 +717,12 @@ const GlobalStyle = createGlobalStyle`
           flex-basis: 48%;
 
           &-value {
-            color: $text-secondary-color;
+            color: ${scopeTheme('textSecondaryColor')};
             font-size: $font-size-normal;
           }
 
           &-label {
-            color: $text-secondary-color;
+            color: ${scopeTheme('textSecondaryColor')};
             font-size: $font-size-tiny;
           }
         }
@@ -734,7 +736,7 @@ const GlobalStyle = createGlobalStyle`
         flex-grow: 1;
 
         &-label {
-          color: $text-secondary-color;
+          color: ${scopeTheme('textSecondaryColor')};
           font-size: $font-size-small;
         }
 
@@ -752,7 +754,7 @@ const GlobalStyle = createGlobalStyle`
       &-link-item {
         ${btnOpacity};
         cursor: pointer;
-        opacity: $link-opacity-default;
+        opacity: ${scopeTheme('linkOpacityDefault')};
         width: 33%;
         display: flex;
         color: inherit;
@@ -772,7 +774,7 @@ const GlobalStyle = createGlobalStyle`
         &-label {
           text-align: right;
           width: 30%;
-          color: $text-secondary-color;
+          color: ${scopeTheme('textSecondaryColor')};
           padding: 0 0.5em 0 0;
           white-space: nowrap;
           font-size: $font-size-small;
@@ -787,7 +789,7 @@ const GlobalStyle = createGlobalStyle`
           flex: 1;
           /* Now required (from chrome 48) to get overflow + flexbox behaving: */
           min-width: 0;
-          color: $text-color;
+          color: ${scopeTheme('textColor')};
         }
       }
     }
@@ -804,7 +806,7 @@ const GlobalStyle = createGlobalStyle`
         &-label {
           text-align: right;
           width: 50%;
-          color: $text-secondary-color;
+          color: ${scopeTheme('textSecondaryColor')};
           padding: 0 0.5em 0 0;
           white-space: nowrap;
           font-size: $font-size-small;
@@ -819,7 +821,7 @@ const GlobalStyle = createGlobalStyle`
           flex: 1;
           /* Now required (from chrome 48) to get overflow + flexbox behaving: */
           min-width: 0;
-          color: $text-color;
+          color: ${scopeTheme('textColor')};
         }
       }
     }
@@ -846,7 +848,7 @@ const GlobalStyle = createGlobalStyle`
       }
 
       &-header {
-        color: $text-tertiary-color;
+        color: ${scopeTheme('textTertiaryColor')};
         font-size: $font-size-small;
         text-align: right;
         padding: 0;
@@ -857,7 +859,7 @@ const GlobalStyle = createGlobalStyle`
         }
 
         &-sorted {
-          color: $text-secondary-color;
+          color: ${scopeTheme('textSecondaryColor')};
         }
 
         &-sorter {
@@ -897,8 +899,8 @@ const GlobalStyle = createGlobalStyle`
           ${btnOpacity};
           text-decoration: underline;
           cursor: pointer;
-          opacity: $link-opacity-default;
-          color: $text-color;
+          opacity: ${scopeTheme('linkOpacityDefault')};
+          color: ${scopeTheme('textColor')};
         }
 
         &-value, &-metric {
@@ -911,8 +913,8 @@ const GlobalStyle = createGlobalStyle`
           ${btnOpacity};
           text-decoration: underline;
           cursor: pointer;
-          opacity: $link-opacity-default;
-          color: $text-color;
+          opacity: ${scopeTheme('linkOpacityDefault')};
+          color: ${scopeTheme('textColor')};
         }
 
         &-value-scalar {
@@ -924,7 +926,7 @@ const GlobalStyle = createGlobalStyle`
         &-value-minor,
         &-value-unit {
           font-size: $font-size-small;
-          color: $text-secondary-color;
+          color: ${scopeTheme('textSecondaryColor')};
         }
       }
     }
@@ -957,7 +959,7 @@ const GlobalStyle = createGlobalStyle`
       background-color: transparentize($color-gray-50, 0.05);
       border-radius: $border-radius-soft;
       border: 1px solid $color-gray-200;
-      color: $text-tertiary-color;
+      color: ${scopeTheme('textTertiaryColor')};
       font-size: $font-size-normal;
       font-weight: bold;
       padding-right: 20px;
@@ -984,7 +986,7 @@ const GlobalStyle = createGlobalStyle`
     padding: 6px;
     margin-left: 2px;
     font-size: $font-size-small;
-    color: $text-secondary-color;
+    color: ${scopeTheme('textSecondaryColor')};
     cursor: pointer;
     border: 1px solid transparent;
     border-radius: $border-radius-soft;
@@ -1034,9 +1036,9 @@ const GlobalStyle = createGlobalStyle`
     &-header {
       ${truncate};
       color: $color-white;
-      height: $terminal-header-height;
+      height: ${scopeTheme('terminalHeaderHeight')};
       padding: 8px 24px;
-      background-color: $text-color;
+      background-color: ${scopeTheme('textColor')};
       position: relative;
       font-size: $font-size-small;
       line-height: 28px;
@@ -1075,7 +1077,7 @@ const GlobalStyle = createGlobalStyle`
       }
     }
 
-    &-embedded &-inner { top: $terminal-header-height; }
+    &-embedded &-inner { top: ${scopeTheme('terminalHeaderHeight')}; }
     &-app &-inner { top: 0; }
     &-inner {
       cursor: text;
@@ -1138,16 +1140,16 @@ const GlobalStyle = createGlobalStyle`
 
   .show-more {
     ${btnOpacity};
-    border-top: 1px dotted $border-light-color;
+    border-top: 1px dotted ${scopeTheme('borderLightColor')};
     padding: 0px 0;
     margin-top: 4px;
     text-align: right;
     cursor: pointer;
-    color: $text-secondary-color;
+    color: ${scopeTheme('textSecondaryColor')};
     font-size: $font-size-small;
 
     &-icon {
-      color: $text-tertiary-color;
+      color: ${scopeTheme('textTertiaryColor')};
       font-size: $font-size-normal;
       position: relative;
       top: 1px;
@@ -1177,20 +1179,20 @@ const GlobalStyle = createGlobalStyle`
     }
 
     .error {
-      animation: blinking 2.0s 60 $base-ease; /* blink for 2 minutes */
-      color: $text-secondary-color;
+      animation: blinking 2.0s 60 ${scopeTheme('baseEase')}; /* blink for 2 minutes */
+      color: ${scopeTheme('textSecondaryColor')};
     }
 
     &-empty {
-      opacity: $text-secondary-color;
+      opacity: ${scopeTheme('textSecondaryColor')};
     }
   }
 
   .status {
     padding: 2px 12px;
-    background-color: $body-background-color;
+    background-color: ${scopeTheme('bodyBackgroundColor')};
     border-radius: $border-radius-soft;
-    color: $text-secondary-color;
+    color: ${scopeTheme('textSecondaryColor')};
     display: inline-block;
     opacity: 0.9;
 
@@ -1202,15 +1204,15 @@ const GlobalStyle = createGlobalStyle`
     }
 
     &.status-loading {
-      animation: blinking 2.0s 150 $base-ease; /* keep blinking for 5 minutes */
+      animation: blinking 2.0s 150 ${scopeTheme('baseEase')}; /* keep blinking for 5 minutes */
       text-transform: none;
-      color: $text-color;
+      color: ${scopeTheme('textColor')};
     }
   }
 
   .topology-option, .metric-selector, .network-selector, .view-mode-selector, .time-control {
     font-size: $font-size-normal;
-    color: $text-secondary-color;
+    color: ${scopeTheme('textSecondaryColor')};
     margin-bottom: 6px;
 
     &:last-child {
@@ -1226,7 +1228,7 @@ const GlobalStyle = createGlobalStyle`
     &-wrapper {
       pointer-events: all;
       border-radius: $border-radius-soft;
-      border: 1px solid $background-darker-color;
+      border: 1px solid ${scopeTheme('backgroundDarkerColor')};
       display: inline-block;
       white-space: nowrap;
     }
@@ -1236,11 +1238,11 @@ const GlobalStyle = createGlobalStyle`
       padding: 3px 12px;
       cursor: pointer;
       display: inline-block;
-      background-color: $background-color;
+      background-color: ${scopeTheme('backgroundColor')};
 
       &-selected, &:not([disabled]):hover {
-        color: $text-darker-color;
-        background-color: $background-darker-color;
+        color: ${scopeTheme('textDarkerColor')};
+        background-color: ${scopeTheme('backgroundDarkerColor')};
       }
 
       &:first-child {
@@ -1266,7 +1268,7 @@ const GlobalStyle = createGlobalStyle`
 
     &-wrapper {
       pointer-events: all;
-      border-color: $background-darker-secondary-color;
+      border-color: ${scopeTheme('backgroundDarkerSecondaryColor')};
       overflow: hidden;
     }
 
@@ -1281,11 +1283,11 @@ const GlobalStyle = createGlobalStyle`
       background-color: transparent;
 
       &-selected, &:not([disabled]):hover {
-        background-color: $background-darker-color;
+        background-color: ${scopeTheme('backgroundDarkerColor')};
       }
 
       &:not(:last-child) {
-        border-right: 1px solid $background-darker-secondary-color;
+        border-right: 1px solid ${scopeTheme('backgroundDarkerSecondaryColor')};
       }
     }
   }
@@ -1305,7 +1307,7 @@ const GlobalStyle = createGlobalStyle`
       margin-top: 3px;
 
       i {
-        color: $text-secondary-color;
+        color: ${scopeTheme('textSecondaryColor')};
         font-size: $font-size-normal;
       }
     }
@@ -1326,7 +1328,7 @@ const GlobalStyle = createGlobalStyle`
       flex-wrap: wrap;
       overflow: hidden;
       max-height: 27px;
-      transition: max-height 0.5s 0s $base-ease;
+      transition: max-height 0.5s 0s ${scopeTheme('baseEase')};
 
       .topology-option-action {
         flex: 1 1 auto;
@@ -1338,7 +1340,7 @@ const GlobalStyle = createGlobalStyle`
       height: auto;
       max-height: calc((13px * 1.5 + 3px + 3px) * 8); /* expand to display 8 rows */
       overflow: auto;
-      transition: max-height 0.5s 0s $base-ease;
+      transition: max-height 0.5s 0s ${scopeTheme('baseEase')};
     } 
 
     font-size: $font-size-small;
@@ -1354,13 +1356,13 @@ const GlobalStyle = createGlobalStyle`
     .label { margin-left: 4px; }
     i {
       margin-left: 0;
-      color: $text-secondary-color;
+      color: ${scopeTheme('textSecondaryColor')};
     }
   }
 
   .network-selector-action {
     border-top: 3px solid transparent;
-    border-bottom: 3px solid $background-dark-color;
+    border-bottom: 3px solid ${scopeTheme('backgroundDarkColor')};
   }
 
   .warning {
@@ -1377,7 +1379,7 @@ const GlobalStyle = createGlobalStyle`
 
     &-text {
       display: inline-block;
-      color: $text-secondary-color;
+      color: ${scopeTheme('textSecondaryColor')};
       padding-left: 0.5em;
     }
 
@@ -1388,7 +1390,7 @@ const GlobalStyle = createGlobalStyle`
     &-expanded {
       margin-left: 0;
       padding: 2px 4px;
-      border-color: $text-tertiary-color;
+      border-color: ${scopeTheme('textTertiaryColor')};
     }
 
     &-expanded &-icon {
@@ -1413,7 +1415,7 @@ const GlobalStyle = createGlobalStyle`
 
   .sidebar-gridmode {
     background-color: $color-purple-50;
-    border-color: $background-darker-color;
+    border-color: ${scopeTheme('backgroundDarkerColor')};
     opacity: 0.9;
   }
 
@@ -1548,7 +1550,7 @@ const GlobalStyle = createGlobalStyle`
 
         &-term {
           flex: 1;
-          color: $text-secondary-color;
+          color: ${scopeTheme('textSecondaryColor')};
           i {
             margin-right: 5px;
           }
@@ -1557,7 +1559,7 @@ const GlobalStyle = createGlobalStyle`
         &-term-label {
           flex: 1;
           b {
-            color: $text-secondary-color;
+            color: ${scopeTheme('textSecondaryColor')};
           }
         }
       }
@@ -1782,7 +1784,7 @@ const GlobalStyle = createGlobalStyle`
       color: $color-purple-900;
 
       &:hover {
-        color: $text-color;
+        color: ${scopeTheme('textColor')};
       }
     }
 
diff --git a/client/app/scripts/themes/contrast.js b/client/app/scripts/themes/contrast.js
index eabf19488..8c433de62 100644
--- a/client/app/scripts/themes/contrast.js
+++ b/client/app/scripts/themes/contrast.js
@@ -16,17 +16,9 @@ const contrastTheme = {
   btnOpacitySelected: 1,
   edgeColor: color('black'),
   edgeHighlightOpacity: 0.3,
-  edgeOpacityBlurred: 0,
   labelBackgroundColor: color('white'),
   linkOpacityDefault: 1,
-  nodeBorderStrokeWidth: 0.2,
   nodeElementsInBackgroundOpacity: 0.4,
-  nodeHighlightShadowOpacity: 0.4,
-  nodeHighlightStrokeOpacity: 0.5,
-  nodeHighlightStrokeWidth: 0.25,
-  nodePseudoOpacity: 1,
-  searchBorderColor: color('purple200'),
-  searchBorderWidth: '2px',
   textColor: color('black'),
   textDarkerColor: color('black'),
   textSecondaryColor: color('black'),
diff --git a/client/app/scripts/themes/default.js b/client/app/scripts/themes/default.js
index cdf9f7b6f..05194838c 100644
--- a/client/app/scripts/themes/default.js
+++ b/client/app/scripts/themes/default.js
@@ -2,42 +2,30 @@ import { color } from 'weaveworks-ui-components/lib/theme/selectors';
 import { transparentize } from 'polished';
 
 const defaultTheme = {
-  backgroundColor: color('gray50'), // $background-color: $color-gray-50;
-  backgroundDarkColor: color('purple900'), // $background-dark-color: $color-purple-900;
-  backgroundDarkerColor: color('purple100'), // $background-darker-color: $color-purple-100;
-  backgroundDarkerSecondaryColor: color('gray50'), // $background-darker-secondary-color: $color-gray-50;
-  backgroundLighterColor: color('white'), // $background-lighter-color: $color-white;
-  baseEase: 'ease-in-out', // $base-ease: ease-in-out;
-  bodyBackgroundColor: color('purple25'), // $body-background-color: $color-purple-25;
-  borderLightColor: color('purple100'), // $border-light-color: $color-purple-100;
-  btnOpacityDefault: 0.9, // $btn-opacity-default: 0.9;
-  btnOpacityDisabled: 0.25, // $btn-opacity-disabled: 0.25;
-  btnOpacityHover: 1, // $btn-opacity-hover: 1;
-  btnOpacitySelected: 0.9, // $btn-opacity-selected: 0.9;
-  detailsWindowPaddingLeft: '30px', // $details-window-padding-left: 30px;
-  detailsWindowWidth: '420px', // $details-window-width: 420px;
-  edgeColor: color('purple500'), // $edge-color: $color-purple-500;
-  edgeHighlightOpacity: 0.1, // $edge-highlight-opacity: 0.1;
-  edgeOpacity: 0.5, // $edge-opacity: 0.5;
-  edgeOpacityBlurred: 0.2, // $edge-opacity-blurred: 0.2;
+  backgroundColor: color('gray50'),
+  backgroundDarkColor: color('purple900'),
+  backgroundDarkerColor: color('purple100'),
+  backgroundDarkerSecondaryColor: color('gray50'),
+  baseEase: 'ease-in-out',
+  bodyBackgroundColor: color('purple25'),
+  borderLightColor: color('purple100'),
+  btnOpacityDefault: 0.9,
+  btnOpacityDisabled: 0.25,
+  btnOpacityHover: 1,
+  btnOpacitySelected: 0.9,
+  detailsWindowPaddingLeft: '30px',
+  detailsWindowWidth: '420px',
+  edgeColor: color('purple500'),
+  edgeHighlightOpacity: 0.1,
   labelBackgroundColor: props => transparentize(0.3, props.theme.colors.purple25),
-  linkOpacityDefault: 0.8, // $link-opacity-default: 0.8;
-  nodeBorderStrokeWidth: 0.12, // $node-border-stroke-width: 0.12;
-  nodeElementsInBackgroundOpacity: 0.7, // $node-elements-in-background-opacity: 0.7;
-  nodeHighlightShadowOpacity: 0.5, // $node-highlight-shadow-opacity: 0.5;
-  nodeHighlightStrokeOpacity: 0.4, // $node-highlight-stroke-opacity: 0.4;
-  nodeHighlightStrokeWidth: 0.04, // $node-highlight-stroke-width: 0.04;
-  nodePseudoOpacity: 0.8, // $node-pseudo-opacity: 0.8;
-  nodeShadowStrokeWidth: 0.18, // $node-shadow-stroke-width: 0.18;
-  nodeTextScale: 2, // $node-text-scale: 2;
-  searchBorderColor: 'transparent', // $search-border-color: transparent;
-  searchBorderWidth: '1px', // $search-border-width: 1px;
-  terminalHeaderHeight: '44px', // $terminal-header-height: 44px;
-  textColor: color('purple800'), // $text-color: $color-purple-800;
-  textDarkerColor: color('purple900'), // $text-darker-color: $color-purple-900;
-  textSecondaryColor: color('purple600'), // $text-secondary-color: $color-purple-600;
-  textTertiaryColor: color('purple400'), // $text-tertiary-color: $color-purple-400;
-  timelineHeight: '55px', // $timeline-height: 55px;
+  linkOpacityDefault: 0.8,
+  nodeElementsInBackgroundOpacity: 0.7,
+  terminalHeaderHeight: '44px',
+  textColor: color('purple800'),
+  textDarkerColor: color('purple900'),
+  textSecondaryColor: color('purple600'),
+  textTertiaryColor: color('purple400'),
+  timelineHeight: '55px',
 };
 
 export default defaultTheme;

From 577282d68b348e6db96a121e1706c7801284dfa9 Mon Sep 17 00:00:00 2001
From: Filip Barl <filip@weave.works>
Date: Fri, 4 Oct 2019 14:38:52 +0200
Subject: [PATCH 06/12] Replaced all sass variables with styled theme ones

---
 client/app/scripts/components/global-style.js | 306 +++++++++---------
 1 file changed, 153 insertions(+), 153 deletions(-)

diff --git a/client/app/scripts/components/global-style.js b/client/app/scripts/components/global-style.js
index 0aa0fe4d7..198a54ed0 100644
--- a/client/app/scripts/components/global-style.js
+++ b/client/app/scripts/components/global-style.js
@@ -1,6 +1,6 @@
 import { createGlobalStyle } from 'styled-components';
 import { transparentize } from 'polished';
-import { color } from 'weaveworks-ui-components/lib/theme/selectors';
+import { borderRadius, color, fontSize } from 'weaveworks-ui-components/lib/theme/selectors';
 
 const scopeTheme = key => props => props.theme.scope[key];
 
@@ -125,8 +125,8 @@ const GlobalStyle = createGlobalStyle`
 
   .browsehappy {
     margin: 0.2em 0;
-    background: $color-gray-200;
-    color: $color-black;
+    background: ${color('gray200')};
+    color: ${color('black')};
     padding: 0.2em 0;
   }
 
@@ -137,7 +137,7 @@ const GlobalStyle = createGlobalStyle`
   .overlay {
     ${hideable};
 
-    background-color: $color-white;
+    background-color: ${color('white')};
     position: absolute;
     width: 100%;
     height: 100%;
@@ -145,7 +145,7 @@ const GlobalStyle = createGlobalStyle`
     left: 0;
     opacity: 0;
     pointer-events: none;
-    z-index: $layer-modal;
+    z-index: ${props => props.theme.layers.modal};
 
     &.faded {
       /* NOTE: Not sure if we should block the pointer events here.. */
@@ -164,8 +164,8 @@ const GlobalStyle = createGlobalStyle`
     background: ${scopeTheme('bodyBackgroundColor')};
     bottom: 0;
     color: ${scopeTheme('textColor')};
-    font-family: $font-family-regular;
-    font-size: $font-size-small;
+    font-family: ${props => props.theme.fontFamilies.regular};
+    font-size: ${fontSize('small')};
     height: auto;
     left: 0;
     line-height: 150%;
@@ -195,7 +195,7 @@ const GlobalStyle = createGlobalStyle`
     }
 
     h2 {
-      font-size: $font-size-extra-large;
+      font-size: ${fontSize('large')};
       line-height: 40px;
       padding-top: 8px;
       margin-bottom: 12px;
@@ -210,8 +210,8 @@ const GlobalStyle = createGlobalStyle`
   }
 
   .header {
-    background-color: transparentize($color-purple-25, 0.2);
-    z-index: $layer-front;
+    background-color: transparentize(${color('purple25')}, 0.2);
+    z-index: ${props => props.theme.layers.front};
     padding: 15px 10px 0;
     position: relative;
     width: 100%;
@@ -270,13 +270,13 @@ const GlobalStyle = createGlobalStyle`
 
       .tooltip {
         display: none;
-        background-color: $color-black;
+        background-color: ${color('black')};
         position: absolute;
-        color: $color-white;
+        color: ${color('white')};
         text-align: center;
         line-height: 22px;
-        border-radius: $border-radius-soft;
-        font-size: $font-size-tiny;
+        border-radius: ${borderRadius('soft')};
+        font-size: ${fontSize('tiny')};
         margin-bottom: 25px;
         margin-left: -4px;
         opacity: 0.75;
@@ -285,7 +285,7 @@ const GlobalStyle = createGlobalStyle`
         left: 10px;
         transform: translateX(-50%);
         white-space: nowrap;
-        z-index: $layer-tooltip;
+        z-index: ${props => props.theme.layers.tooltip};
 
         /* Adjusted from http://www.cssarrowplease.com/ */
         &:after {
@@ -297,7 +297,7 @@ const GlobalStyle = createGlobalStyle`
           width: 0;
           position: absolute;
           border-color: transparent;
-          border-top-color: $color-black;
+          border-top-color: ${color('black')};
           margin-left: -6px;
         }
       }
@@ -320,7 +320,7 @@ const GlobalStyle = createGlobalStyle`
       margin: 0px 8px;
 
       &-label {
-        font-size: $font-size-normal;
+        font-size: ${fontSize('normal')};
       }
 
     }
@@ -328,7 +328,7 @@ const GlobalStyle = createGlobalStyle`
     .topologies-sub {
       &-item {
         &-label {
-          font-size: $font-size-small;
+          font-size: ${fontSize('small')};
         }
       }
     }
@@ -340,7 +340,7 @@ const GlobalStyle = createGlobalStyle`
       ${btnOpacity};
       cursor: pointer;
       padding: 4px 8px;
-      border-radius: $border-radius-soft;
+      border-radius: ${borderRadius('soft')};
       opacity: 0.9;
       margin-bottom: 3px;
       border: 1px solid transparent;
@@ -356,7 +356,7 @@ const GlobalStyle = createGlobalStyle`
       }
 
       &-matched {
-        border-color: $color-blue-400;
+        border-color: ${color('blue400')};
       }
 
     }
@@ -395,13 +395,13 @@ const GlobalStyle = createGlobalStyle`
       justify-content: center;
 
       .heading {
-        font-size: $font-size-normal;
+        font-size: ${fontSize('normal')};
       }
 
       &-icon {
         text-align: center;
         opacity: 0.25;
-        font-size: $overlay-icon-size;
+        font-size: ${props => props.theme.overlayIconSize};
       }
 
       li { padding-top: 5px; }
@@ -433,7 +433,7 @@ const GlobalStyle = createGlobalStyle`
     }
 
     text {
-      font-family: $font-family-regular;
+      font-family: ${props => props.theme.fontFamilies.regular};
       fill: ${scopeTheme('textSecondaryColor')};
     }
 
@@ -458,7 +458,7 @@ const GlobalStyle = createGlobalStyle`
       }
       .shadow {
         fill: none;
-        stroke: $color-blue-400;
+        stroke: ${color('blue400')};
         stroke-opacity: 0;
       }
       &.highlighted {
@@ -478,13 +478,13 @@ const GlobalStyle = createGlobalStyle`
     text-align: center;
 
     &-match {
-      font-size: $font-size-small;
+      font-size: ${fontSize('small')};
 
       &-wrapper {
         display: inline-block;
         margin: 1px;
         padding: 2px 4px;
-        background-color: transparentize($color-blue-400, 0.9);
+        background-color: transparentize(${color('blue400')}, 0.9);
       }
 
       &-label {
@@ -494,8 +494,8 @@ const GlobalStyle = createGlobalStyle`
     }
 
     &-more {
-      font-size: $font-size-tiny;
-      color: $color-blue-700;
+      font-size: ${fontSize('tiny')};
+      color: ${color('blue700')};
       margin-top: -2px;
     }
   }
@@ -504,7 +504,7 @@ const GlobalStyle = createGlobalStyle`
     &-wrapper {
       position: fixed;
       display: flex;
-      z-index: $layer-toolbar;
+      z-index: ${props => props.theme.layers.toolbar};
       right: ${scopeTheme('detailsWindowPaddingLeft')};
       top: 100px;
       bottom: 48px;
@@ -519,11 +519,11 @@ const GlobalStyle = createGlobalStyle`
     flex-flow: column;
     margin-bottom: 12px;
     padding-bottom: 2px;
-    border-radius: $border-radius-soft;
-    background-color: $color-white;
+    border-radius: ${borderRadius('soft')};
+    background-color: ${color('white')};
     ${shadow2};
     /* keep node-details above the terminal. */
-    z-index: $layer-front;
+    z-index: ${props => props.theme.layers.front};
     overflow: hidden;
 
     &:last-child {
@@ -542,40 +542,40 @@ const GlobalStyle = createGlobalStyle`
 
       .close-details {
         position: relative;
-        z-index: $layer-front;
+        z-index: ${props => props.theme.layers.front};
       }
 
       > i {
         ${btnOpacity};
         padding: 4px 5px;
         margin-left: 2px;
-        font-size: $font-size-normal;
-        color: $color-white;
+        font-size: ${fontSize('normal')};
+        color: ${color('white')};
         cursor: pointer;
         border: 1px solid transparent;
-        border-radius: $border-radius-soft;
+        border-radius: ${borderRadius('soft')};
 
         span {
-          font-family: $font-family-regular;
-          font-size: $font-size-small;
+          font-family: ${props => props.theme.fontFamilies.regular};
+          font-size: ${fontSize('small')};
           margin-left: 4px;
 
           span {
             text-transform: capitalize;
-            font-size: $font-size-normal;
+            font-size: ${fontSize('normal')};
             margin-left: 0;
           }
         }
 
         &:hover {
-          border-color: transparentize($color-white, 0.4);
+          border-color: transparentize(${color('white')}, 0.4);
         }
       }
     }
 
     .match {
-      background-color: transparentize($color-blue-400, 0.7);
-      border: 1px solid $color-blue-400;
+      background-color: transparentize(${color('blue400')}, 0.7);
+      border: 1px solid ${color('blue400')};
     }
 
     &-header {
@@ -586,7 +586,7 @@ const GlobalStyle = createGlobalStyle`
       }
 
       &-label {
-        color: $color-white;
+        color: ${color('white')};
         margin: 0;
         width: 348px;
         padding-top: 0;
@@ -606,8 +606,8 @@ const GlobalStyle = createGlobalStyle`
 
     &-relatives {
       margin-top: 4px;
-      font-size: $font-size-normal;
-      color: $color-white;
+      font-size: ${fontSize('normal')};
+      color: ${color('white')};
 
       &-link {
         ${truncate};
@@ -624,7 +624,7 @@ const GlobalStyle = createGlobalStyle`
         ${btnOpacity};
         padding: 0 2px;
         cursor: pointer;
-        font-size: $font-size-tiny;
+        font-size: ${fontSize('tiny')};
         font-weight: bold;
         display: inline-block;
         position: relative;
@@ -635,19 +635,19 @@ const GlobalStyle = createGlobalStyle`
     &-controls {
       white-space: nowrap;
       padding: 8px 0;
-      font-size: $font-size-small;
+      font-size: ${fontSize('small')};
 
       &-wrapper {
         padding: 0 36px 0 32px;
       }
 
       .node-control-button {
-        color: $color-white;
+        color: ${color('white')};
       }
 
       &-spinner {
         ${hideable};
-        color: $color-white;
+        color: ${color('white')};
         margin-left: 8px;
       }
 
@@ -657,7 +657,7 @@ const GlobalStyle = createGlobalStyle`
         width: 55%;
         padding-top: 6px;
         text-align: left;
-        color: $color-white;
+        color: ${color('white')};
 
         &-icon {
           ${blinkable};
@@ -674,7 +674,7 @@ const GlobalStyle = createGlobalStyle`
       &-loading {
         margin-top: 48px;
         text-align: center;
-        font-size: $font-size-huge;
+        font-size: ${fontSize('huge')};
         color: ${scopeTheme('textTertiaryColor')};
       }
 
@@ -682,7 +682,7 @@ const GlobalStyle = createGlobalStyle`
         margin: 16px 0;
 
         &-header {
-          font-size: $font-size-normal;
+          font-size: ${fontSize('normal')};
           color: ${scopeTheme('textTertiaryColor')};
           margin-bottom: 10px;
         }
@@ -718,12 +718,12 @@ const GlobalStyle = createGlobalStyle`
 
           &-value {
             color: ${scopeTheme('textSecondaryColor')};
-            font-size: $font-size-normal;
+            font-size: ${fontSize('normal')};
           }
 
           &-label {
             color: ${scopeTheme('textSecondaryColor')};
-            font-size: $font-size-tiny;
+            font-size: ${fontSize('tiny')};
           }
         }
       }
@@ -737,7 +737,7 @@ const GlobalStyle = createGlobalStyle`
 
         &-label {
           color: ${scopeTheme('textSecondaryColor')};
-          font-size: $font-size-small;
+          font-size: ${fontSize('small')};
         }
 
         &-sparkline {
@@ -745,7 +745,7 @@ const GlobalStyle = createGlobalStyle`
         }
 
         &-placeholder {
-          font-size: $font-size-extra-large;
+          font-size: ${fontSize('large')};
           opacity: 0.2;
           margin-bottom: 0.2em;
         }
@@ -777,7 +777,7 @@ const GlobalStyle = createGlobalStyle`
           color: ${scopeTheme('textSecondaryColor')};
           padding: 0 0.5em 0 0;
           white-space: nowrap;
-          font-size: $font-size-small;
+          font-size: ${fontSize('small')};
 
           &::after {
             content: ':';
@@ -785,7 +785,7 @@ const GlobalStyle = createGlobalStyle`
         }
 
         &-value {
-          font-size: $font-size-small;
+          font-size: ${fontSize('small')};
           flex: 1;
           /* Now required (from chrome 48) to get overflow + flexbox behaving: */
           min-width: 0;
@@ -809,7 +809,7 @@ const GlobalStyle = createGlobalStyle`
           color: ${scopeTheme('textSecondaryColor')};
           padding: 0 0.5em 0 0;
           white-space: nowrap;
-          font-size: $font-size-small;
+          font-size: ${fontSize('small')};
 
           &::after {
             content: ':';
@@ -817,7 +817,7 @@ const GlobalStyle = createGlobalStyle`
         }
 
         &-value {
-          font-size: $font-size-small;
+          font-size: ${fontSize('small')};
           flex: 1;
           /* Now required (from chrome 48) to get overflow + flexbox behaving: */
           min-width: 0;
@@ -849,7 +849,7 @@ const GlobalStyle = createGlobalStyle`
 
       &-header {
         color: ${scopeTheme('textTertiaryColor')};
-        font-size: $font-size-small;
+        font-size: ${fontSize('small')};
         text-align: right;
         padding: 0;
 
@@ -884,11 +884,11 @@ const GlobalStyle = createGlobalStyle`
       }
 
       &-node {
-        font-size: $font-size-small;
+        font-size: ${fontSize('small')};
         line-height: 1.5;
 
         &:hover, &.selected {
-          background-color: $color-white;
+          background-color: ${color('white')};
         }
 
         > * {
@@ -925,7 +925,7 @@ const GlobalStyle = createGlobalStyle`
 
         &-value-minor,
         &-value-unit {
-          font-size: $font-size-small;
+          font-size: ${fontSize('small')};
           color: ${scopeTheme('textSecondaryColor')};
         }
       }
@@ -938,29 +938,29 @@ const GlobalStyle = createGlobalStyle`
     &-metric-box {
       ${palable};
       cursor: pointer;
-      fill: transparentize($color-gray-600, 0.6);
+      fill: transparentize(${color('gray600')}, 0.6);
 
       &-info {
-        background-color: transparentize($color-white, 0.4);
-        border-radius: $border-radius-soft;
+        background-color: transparentize(${color('white')}, 0.4);
+        border-radius: ${borderRadius('soft')};
         cursor: inherit;
         padding: 5px;
 
         .wrapper {
           display: block;
 
-          &.label { font-size: $font-size-small; }
-          &.consumption { font-size: $font-size-tiny; }
+          &.label { font-size: ${fontSize('small')}; }
+          &.consumption { font-size: ${fontSize('tiny')}; }
         }
       }
     }
 
     &-layer-topology {
-      background-color: transparentize($color-gray-50, 0.05);
-      border-radius: $border-radius-soft;
-      border: 1px solid $color-gray-200;
+      background-color: transparentize(${color('gray50')}, 0.05);
+      border-radius: ${borderRadius('soft')};
+      border: 1px solid ${color('gray200')};
       color: ${scopeTheme('textTertiaryColor')};
-      font-size: $font-size-normal;
+      font-size: ${fontSize('normal')};
       font-weight: bold;
       padding-right: 20px;
       text-align: right;
@@ -976,7 +976,7 @@ const GlobalStyle = createGlobalStyle`
   .details-wrapper .node-details-table {
     &-node {
       &:hover, &.selected {
-        background-color: $color-white;
+        background-color: ${color('white')};
       }
     }
   }
@@ -985,13 +985,13 @@ const GlobalStyle = createGlobalStyle`
     ${btnOpacity};
     padding: 6px;
     margin-left: 2px;
-    font-size: $font-size-small;
+    font-size: ${fontSize('small')};
     color: ${scopeTheme('textSecondaryColor')};
     cursor: pointer;
     border: 1px solid transparent;
-    border-radius: $border-radius-soft;
+    border-radius: ${borderRadius('soft')};
     &:hover {
-      border-color: transparentize($color-white, 0.4);
+      border-color: transparentize(${color('white')}, 0.4);
     }
     &-pending, &-pending:hover {
       opacity: 0.2;
@@ -1029,20 +1029,20 @@ const GlobalStyle = createGlobalStyle`
     &-wrapper {
       width: 100%;
       height: 100%;
-      border: 0px solid $color-black;
-      color: $color-gray-50;
+      border: 0px solid ${color('black')};
+      color: ${color('gray50')};
     }
 
     &-header {
       ${truncate};
-      color: $color-white;
+      color: ${color('white')};
       height: ${scopeTheme('terminalHeaderHeight')};
       padding: 8px 24px;
       background-color: ${scopeTheme('textColor')};
       position: relative;
-      font-size: $font-size-small;
+      font-size: ${fontSize('small')};
       line-height: 28px;
-      border-top-left-radius: $border-radius-soft;
+      border-top-left-radius: ${borderRadius('soft')};
 
       &-title {
         cursor: default;
@@ -1056,23 +1056,23 @@ const GlobalStyle = createGlobalStyle`
         &-item, &-item-icon {
           ${palable};
           padding: 4px 5px;
-          color: $color-white;
+          color: ${color('white')};
           cursor: pointer;
           opacity: 0.7;
           border: 1px solid transparent;
-          border-radius: $border-radius-soft;
+          border-radius: ${borderRadius('soft')};
 
-          font-size: $font-size-tiny;
+          font-size: ${fontSize('tiny')};
           font-weight: bold;
 
           &:hover {
             opacity: 1;
-            border-color: transparentize($color-white, 0.4);
+            border-color: transparentize(${color('white')}, 0.4);
           }
         }
 
         &-item-icon {
-          font-size: $font-size-normal;
+          font-size: ${fontSize('normal')};
         }
       }
     }
@@ -1081,15 +1081,15 @@ const GlobalStyle = createGlobalStyle`
     &-app &-inner { top: 0; }
     &-inner {
       cursor: text;
-      font-family: $font-family-monospace;
+      font-family: ${props => props.theme.fontFamilies.monospace};
       position: absolute;
       bottom: 0;
       left: 0;
       right: 0;
-      background-color: $color-black;
+      background-color: ${color('black')};
       padding: 8px;
       box-sizing: content-box;
-      border-bottom-left-radius: $border-radius-soft;
+      border-bottom-left-radius: ${borderRadius('soft')};
 
       .terminal {
         background-color: transparent !important;
@@ -1097,14 +1097,14 @@ const GlobalStyle = createGlobalStyle`
     }
 
     &-status-bar {
-      font-family: $font-family-regular;
+      font-family: ${props => props.theme.fontFamilies.regular};
       position: absolute;
       bottom: 16px;
       right: 16px;
       width: 50%;
       padding: 16px 16px;
       opacity: 0.8;
-      border-radius: $border-radius-soft;
+      border-radius: ${borderRadius('soft')};
 
       h3 {
         margin: 4px 0;
@@ -1112,7 +1112,7 @@ const GlobalStyle = createGlobalStyle`
 
       &-message {
         margin: 4px 0;
-        color: $color-white;
+        color: ${color('white')};
       }
 
       .link {
@@ -1123,8 +1123,8 @@ const GlobalStyle = createGlobalStyle`
     }
 
     &-cursor {
-      color: $color-black;
-      background: $color-gray-50;
+      color: ${color('black')};
+      background: ${color('gray50')};
     }
   }
 
@@ -1146,11 +1146,11 @@ const GlobalStyle = createGlobalStyle`
     text-align: right;
     cursor: pointer;
     color: ${scopeTheme('textSecondaryColor')};
-    font-size: $font-size-small;
+    font-size: ${fontSize('small')};
 
     &-icon {
       color: ${scopeTheme('textTertiaryColor')};
-      font-size: $font-size-normal;
+      font-size: ${fontSize('normal')};
       position: relative;
       top: 1px;
     }
@@ -1174,7 +1174,7 @@ const GlobalStyle = createGlobalStyle`
     &-plugin-icon {
       top: 1px;
       position: relative;
-      font-size: $font-size-large;
+      font-size: ${fontSize('large')};
       margin-right: 2px;
     }
 
@@ -1191,13 +1191,13 @@ const GlobalStyle = createGlobalStyle`
   .status {
     padding: 2px 12px;
     background-color: ${scopeTheme('bodyBackgroundColor')};
-    border-radius: $border-radius-soft;
+    border-radius: ${borderRadius('soft')};
     color: ${scopeTheme('textSecondaryColor')};
     display: inline-block;
     opacity: 0.9;
 
     &-icon {
-      font-size: $font-size-normal;
+      font-size: ${fontSize('normal')};
       position: relative;
       top: 0.125rem;
       margin-right: 0.25rem;
@@ -1211,7 +1211,7 @@ const GlobalStyle = createGlobalStyle`
   }
 
   .topology-option, .metric-selector, .network-selector, .view-mode-selector, .time-control {
-    font-size: $font-size-normal;
+    font-size: ${fontSize('normal')};
     color: ${scopeTheme('textSecondaryColor')};
     margin-bottom: 6px;
 
@@ -1220,14 +1220,14 @@ const GlobalStyle = createGlobalStyle`
     }
 
     i {
-      font-size: $font-size-tiny;
+      font-size: ${fontSize('tiny')};
       margin-left: 4px;
-      color: $color-orange-500;
+      color: ${color('orange500')};
     }
 
     &-wrapper {
       pointer-events: all;
-      border-radius: $border-radius-soft;
+      border-radius: ${borderRadius('soft')};
       border: 1px solid ${scopeTheme('backgroundDarkerColor')};
       display: inline-block;
       white-space: nowrap;
@@ -1247,19 +1247,19 @@ const GlobalStyle = createGlobalStyle`
 
       &:first-child {
         border-left: none;
-        border-top-left-radius: $border-radius-soft;
-        border-bottom-left-radius: $border-radius-soft;
+        border-top-left-radius: ${borderRadius('soft')};
+        border-bottom-left-radius: ${borderRadius('soft')};
       }
 
       &:last-child {
-        border-top-right-radius: $border-radius-soft;
-        border-bottom-right-radius: $border-radius-soft;
+        border-top-right-radius: ${borderRadius('soft')};
+        border-bottom-right-radius: ${borderRadius('soft')};
       }
     }
   }
 
   .metric-selector {
-    font-size: $font-size-small;
+    font-size: ${fontSize('small')};
     margin-top: 6px;
   }
 
@@ -1275,7 +1275,7 @@ const GlobalStyle = createGlobalStyle`
     &:first-child,
     &:last-child {
       .view-mode-selector-action {
-        border-radius: $border-radius-none;
+        border-radius: ${borderRadius('none')};
       }
     }
 
@@ -1308,7 +1308,7 @@ const GlobalStyle = createGlobalStyle`
 
       i {
         color: ${scopeTheme('textSecondaryColor')};
-        font-size: $font-size-normal;
+        font-size: ${fontSize('normal')};
       }
     }
 
@@ -1318,7 +1318,7 @@ const GlobalStyle = createGlobalStyle`
       margin-top: 5px;
       text-align: right;
       pointer-events: all;
-      font-size: $font-size-small;
+      font-size: ${fontSize('small')};
     }
   }
 
@@ -1343,7 +1343,7 @@ const GlobalStyle = createGlobalStyle`
       transition: max-height 0.5s 0s ${scopeTheme('baseEase')};
     } 
 
-    font-size: $font-size-small;
+    font-size: ${fontSize('small')};
 
     &-action {
       &-selected {
@@ -1370,7 +1370,7 @@ const GlobalStyle = createGlobalStyle`
     cursor: pointer;
     border: 1px dashed transparent;
     text-transform: none;
-    border-radius: $border-radius-soft;
+    border-radius: ${borderRadius('soft')};
     margin-left: 4px;
 
     &-wrapper {
@@ -1406,15 +1406,15 @@ const GlobalStyle = createGlobalStyle`
     bottom: 11px;
     left: 11px;
     padding: 5px;
-    font-size: $font-size-small;
-    border-radius: $border-radius-soft;
+    font-size: ${fontSize('small')};
+    border-radius: ${borderRadius('soft')};
     border: 1px solid transparent;
     pointer-events: none;
     max-width: 50%;
   }
 
   .sidebar-gridmode {
-    background-color: $color-purple-50;
+    background-color: ${color('purple50')};
     border-color: ${scopeTheme('backgroundDarkerColor')};
     opacity: 0.9;
   }
@@ -1440,8 +1440,8 @@ const GlobalStyle = createGlobalStyle`
    */
 
   .help-panel {
-    z-index: $layer-modal;
-    background-color: $color-white;
+    z-index: ${props => props.theme.layers.modal};
+    background-color: ${color('white')};
     ${shadow2};
     display: flex;
     position: relative;
@@ -1457,13 +1457,13 @@ const GlobalStyle = createGlobalStyle`
     }
 
     &-header {
-      background-color: $color-blue-400;
+      background-color: ${color('blue400')};
       padding: 12px 24px;
-      color: $color-white;
+      color: ${color('white')};
 
       h2 {
         margin: 0;
-        font-size: $font-size-large;
+        font-size: ${fontSize('large')};
       }
     }
 
@@ -1476,14 +1476,14 @@ const GlobalStyle = createGlobalStyle`
         ${btnOpacity};
         padding: 4px 5px;
         margin-left: 2px;
-        font-size: $font-size-normal;
-        color: $color-purple-400;
+        font-size: ${fontSize('normal')};
+        color: ${color('purple400')};
         cursor: pointer;
         border: 1px solid transparent;
-        border-radius: $border-radius-soft;
+        border-radius: ${borderRadius('soft')};
 
         &:hover {
-          border-color: transparentize($color-purple-400, 0.4);
+          border-color: transparentize(${color('purple400')}, 0.4);
         }
       }
 
@@ -1497,15 +1497,15 @@ const GlobalStyle = createGlobalStyle`
 
       h2 {
         line-height: 150%;
-        font-size: $font-size-large;
-        color: $color-purple-400;
+        font-size: ${fontSize('large')};
+        color: ${color('purple400')};
         padding: 4px 0;
-        border-bottom: 1px solid transparentize($color-purple-400, 0.9);
+        border-bottom: 1px solid transparentize(${color('purple400')}, 0.9);
       }
 
       h3 {
-        font-size: $font-size-normal;
-        color: $color-purple-400;
+        font-size: ${fontSize('normal')};
+        color: ${color('purple400')};
         padding: 4px 0;
       }
 
@@ -1521,15 +1521,15 @@ const GlobalStyle = createGlobalStyle`
         kbd {
           display: inline-block;
           padding: 3px 5px;
-          font-size: $font-size-tiny;
+          font-size: ${fontSize('tiny')};
           line-height: 10px;
-          color: $color-gray-600;
+          color: ${color('gray600')};
           vertical-align: middle;
-          background-color: $color-white;
-          border: solid 1px $color-gray-200;
-          border-bottom-color: $color-gray-600;
-          border-radius: $border-radius-soft;
-          box-shadow: inset 0 -1px 0 $color-gray-600;
+          background-color: ${color('white')};
+          border: solid 1px ${color('gray200')};
+          border-bottom-color: ${color('gray600')};
+          border-radius: ${borderRadius('soft')};
+          box-shadow: inset 0 -1px 0 ${color('gray600')};
         }
         div.key {
           width: 60px;
@@ -1570,7 +1570,7 @@ const GlobalStyle = createGlobalStyle`
       flex-direction: column;
 
       &-current-topology {
-        color: $color-purple-400;
+        color: ${color('purple400')};
       }
 
       &-fields {
@@ -1622,12 +1622,12 @@ const GlobalStyle = createGlobalStyle`
 
   .debug-panel {
     ${shadow2};
-    background-color: $color-white;
+    background-color: ${color('white')};
     top: 80px;
     position: absolute;
     padding: 10px;
     left: 10px;
-    z-index: $layer-modal;
+    z-index: ${props => props.theme.layers.modal};
 
     opacity: 0.3;
 
@@ -1653,7 +1653,7 @@ const GlobalStyle = createGlobalStyle`
 
   .nodes-grid {
     tr {
-      border-radius: $border-radius-soft;
+      border-radius: ${borderRadius('soft')};
     }
 
     &-label-minor {
@@ -1696,12 +1696,12 @@ const GlobalStyle = createGlobalStyle`
       }
 
       tr:nth-child(even) {
-        background: $color-gray-100;
+        background: ${color('gray100')};
       }
 
       tbody tr {
         border: 1px solid transparent;
-        border-radius: $border-radius-soft;
+        border-radius: ${borderRadius('soft')};
         cursor: pointer;
       }
 
@@ -1709,15 +1709,15 @@ const GlobalStyle = createGlobalStyle`
       because we want consistent behaviour between the
       visual and row locking logic that happens on hover. */
       tbody tr.selected, tbody tr.focused {
-        background-color: transparentize($color-blue-400, 0.85);
-        border: 1px solid $color-blue-400;
+        background-color: transparentize(${color('blue400')}, 0.85);
+        border: 1px solid ${color('blue400')};
       }
     }
 
     .scroll-body {
 
       table {
-        border-bottom: 1px solid $color-gray-200;
+        border-bottom: 1px solid ${color('gray200')};
       }
 
       thead, tbody tr {
@@ -1735,8 +1735,8 @@ const GlobalStyle = createGlobalStyle`
       }
 
       thead {
-        box-shadow: 0 4px 2px -2px transparentize($color-black, 0.84);
-        border-bottom: 1px solid $color-gray-600;
+        box-shadow: 0 4px 2px -2px transparentize(${color('black')}, 0.84);
+        border-bottom: 1px solid ${color('gray600')};
       }
 
       tbody {
@@ -1761,10 +1761,10 @@ const GlobalStyle = createGlobalStyle`
 
     &-content {
       position: relative;
-      background-color: $color-white;
+      background-color: ${color('white')};
       padding: 20px;
       ${shadow2};
-      z-index: $layer-modal;
+      z-index: ${props => props.theme.layers.modal};
     }
 
     &-item {
@@ -1781,7 +1781,7 @@ const GlobalStyle = createGlobalStyle`
     }
 
     button, a {
-      color: $color-purple-900;
+      color: ${color('purple900')};
 
       &:hover {
         color: ${scopeTheme('textColor')};
@@ -1842,7 +1842,7 @@ const GlobalStyle = createGlobalStyle`
   */
 
   .xterm {
-      font-family: $font-family-monospace;
+      font-family: ${props => props.theme.fontFamilies.monospace};
       font-feature-settings: "liga" 0;
       position: relative;
       user-select: none;

From 99f502a2b61c4d043bc217e2d8c414013a1bc325 Mon Sep 17 00:00:00 2001
From: Filip Barl <filip@weave.works>
Date: Fri, 4 Oct 2019 15:16:28 +0200
Subject: [PATCH 07/12] Fixed some styling inconsistencies

---
 client/app/scripts/components/global-style.js | 44 ++++++++++++-------
 1 file changed, 29 insertions(+), 15 deletions(-)

diff --git a/client/app/scripts/components/global-style.js b/client/app/scripts/components/global-style.js
index 198a54ed0..f2465cf3f 100644
--- a/client/app/scripts/components/global-style.js
+++ b/client/app/scripts/components/global-style.js
@@ -2,6 +2,9 @@ import { createGlobalStyle } from 'styled-components';
 import { transparentize } from 'polished';
 import { borderRadius, color, fontSize } from 'weaveworks-ui-components/lib/theme/selectors';
 
+import ProximaNova from '../../fonts/proximanova-regular.woff';
+import RobotoMono from '../../fonts/robotomono-regular.ttf';
+
 const scopeTheme = key => props => props.theme.scope[key];
 
 const hideable = props => `
@@ -110,15 +113,26 @@ const GlobalStyle = createGlobalStyle`
   /* stylelint-disable sh-waqar/declaration-use-variable */
   @font-face {
     font-family: 'proxima-nova';
-    src: url('../fonts/proximanova-regular.woff');
+    src: url(${ProximaNova});
   }
 
   @font-face {
     font-family: 'Roboto Mono';
-    src: url('../fonts/robotomono-regular.ttf');
+    src: url(${RobotoMono});
   }
   /* stylelint-enable sh-waqar/declaration-use-variable */
 
+  /* Extendable classes */
+  .hideable { ${hideable}; }
+  .palable { ${palable}; }
+  .blinkable { ${blinkable}; }
+  .colorable { ${colorable}; }
+  .truncate { ${truncate}; }
+  .shadow-2 { ${shadow2}; }
+  .btn-opacity { ${btnOpacity}; }
+  .fully-pannable { ${fullyPannable}; }
+  .overlay-wrapper { ${overlayWrapper}; }
+
   a {
     text-decoration: none;
   }
@@ -195,7 +209,7 @@ const GlobalStyle = createGlobalStyle`
     }
 
     h2 {
-      font-size: ${fontSize('large')};
+      font-size: ${fontSize('extraLarge')};
       line-height: 40px;
       padding-top: 8px;
       margin-bottom: 12px;
@@ -514,7 +528,7 @@ const GlobalStyle = createGlobalStyle`
 
   .node-details {
     height: 100%;
-    width: ${scopeTheme('detailsWindowPaddingLeft')};
+    width: ${scopeTheme('detailsWindowWidth')};
     display: flex;
     flex-flow: column;
     margin-bottom: 12px;
@@ -568,13 +582,13 @@ const GlobalStyle = createGlobalStyle`
         }
 
         &:hover {
-          border-color: transparentize(${color('white')}, 0.4);
+          border-color: ${props => transparentize(0.4, props.theme.colors.white)};
         }
       }
     }
 
     .match {
-      background-color: transparentize(${color('blue400')}, 0.7);
+      background-color: ${props => transparentize(0.7, props.theme.colors.blue400)};
       border: 1px solid ${color('blue400')};
     }
 
@@ -938,10 +952,10 @@ const GlobalStyle = createGlobalStyle`
     &-metric-box {
       ${palable};
       cursor: pointer;
-      fill: transparentize(${color('gray600')}, 0.6);
+      fill: ${props => transparentize(0.6, props.theme.colors.gray600)};
 
       &-info {
-        background-color: transparentize(${color('white')}, 0.4);
+        background-color: ${props => transparentize(0.4, props.theme.colors.white)};
         border-radius: ${borderRadius('soft')};
         cursor: inherit;
         padding: 5px;
@@ -956,7 +970,7 @@ const GlobalStyle = createGlobalStyle`
     }
 
     &-layer-topology {
-      background-color: transparentize(${color('gray50')}, 0.05);
+      background-color: ${props => transparentize(0.05, props.theme.colors.gray50)};
       border-radius: ${borderRadius('soft')};
       border: 1px solid ${color('gray200')};
       color: ${scopeTheme('textTertiaryColor')};
@@ -991,7 +1005,7 @@ const GlobalStyle = createGlobalStyle`
     border: 1px solid transparent;
     border-radius: ${borderRadius('soft')};
     &:hover {
-      border-color: transparentize(${color('white')}, 0.4);
+      border-color: ${props => transparentize(0.4, props.theme.colors.white)};
     }
     &-pending, &-pending:hover {
       opacity: 0.2;
@@ -1067,7 +1081,7 @@ const GlobalStyle = createGlobalStyle`
 
           &:hover {
             opacity: 1;
-            border-color: transparentize(${color('white')}, 0.4);
+            border-color: ${props => transparentize(0.4, props.theme.colors.white)};
           }
         }
 
@@ -1483,7 +1497,7 @@ const GlobalStyle = createGlobalStyle`
         border-radius: ${borderRadius('soft')};
 
         &:hover {
-          border-color: transparentize(${color('purple400')}, 0.4);
+          border-color: ${props => transparentize(0.4, props.theme.colors.purple400)};
         }
       }
 
@@ -1500,7 +1514,7 @@ const GlobalStyle = createGlobalStyle`
         font-size: ${fontSize('large')};
         color: ${color('purple400')};
         padding: 4px 0;
-        border-bottom: 1px solid transparentize(${color('purple400')}, 0.9);
+        border-bottom: 1px solid ${props => transparentize(0.9, props.theme.colors.purple400)};
       }
 
       h3 {
@@ -1709,7 +1723,7 @@ const GlobalStyle = createGlobalStyle`
       because we want consistent behaviour between the
       visual and row locking logic that happens on hover. */
       tbody tr.selected, tbody tr.focused {
-        background-color: transparentize(${color('blue400')}, 0.85);
+        background-color: ${props => transparentize(0.85, props.theme.colors.blue400)};
         border: 1px solid ${color('blue400')};
       }
     }
@@ -1735,7 +1749,7 @@ const GlobalStyle = createGlobalStyle`
       }
 
       thead {
-        box-shadow: 0 4px 2px -2px transparentize(${color('black')}, 0.84);
+        box-shadow: 0 4px 2px -2px ${props => transparentize(0.84, props.theme.colors.black)};
         border-bottom: 1px solid ${color('gray600')};
       }
 

From 4cac153de5d59d8894d4b52c50381a6f555a6118 Mon Sep 17 00:00:00 2001
From: Filip Barl <filip@weave.works>
Date: Fri, 4 Oct 2019 15:36:07 +0200
Subject: [PATCH 08/12] Contained global styles and made themes scope static

---
 client/app/scripts/components/global-style.js | 2956 +++++++++--------
 client/app/scripts/themes/contrast.js         |   25 +-
 client/app/scripts/themes/default.js          |   26 +-
 3 files changed, 1506 insertions(+), 1501 deletions(-)

diff --git a/client/app/scripts/components/global-style.js b/client/app/scripts/components/global-style.js
index f2465cf3f..6fcc0768a 100644
--- a/client/app/scripts/components/global-style.js
+++ b/client/app/scripts/components/global-style.js
@@ -122,58 +122,24 @@ const GlobalStyle = createGlobalStyle`
   }
   /* stylelint-enable sh-waqar/declaration-use-variable */
 
-  /* Extendable classes */
-  .hideable { ${hideable}; }
-  .palable { ${palable}; }
-  .blinkable { ${blinkable}; }
-  .colorable { ${colorable}; }
-  .truncate { ${truncate}; }
-  .shadow-2 { ${shadow2}; }
-  .btn-opacity { ${btnOpacity}; }
-  .fully-pannable { ${fullyPannable}; }
-  .overlay-wrapper { ${overlayWrapper}; }
-
-  a {
-    text-decoration: none;
-  }
-
-  .browsehappy {
-    margin: 0.2em 0;
-    background: ${color('gray200')};
-    color: ${color('black')};
-    padding: 0.2em 0;
-  }
-
-  .hang-around {
-    transition-delay: .5s;
-  }
-
-  .overlay {
-    ${hideable};
-
-    background-color: ${color('white')};
-    position: absolute;
-    width: 100%;
-    height: 100%;
-    top: 0;
-    left: 0;
-    opacity: 0;
-    pointer-events: none;
-    z-index: ${props => props.theme.layers.modal};
-
-    &.faded {
-      /* NOTE: Not sure if we should block the pointer events here.. */
-      pointer-events: all;
-      cursor: wait;
-      opacity: 0.5;
-    }
-  }
-
-  .hide {
-    opacity: 0;
-  }
-
+  /*
+  * Contain all the styles in the root div instead of having them truly
+  * global, so that they don't interfere with the app they're injected into.
+  */
   .scope-app, .terminal-app {
+
+    /* Extendable classes */
+    .hideable { ${hideable}; }
+    .palable { ${palable}; }
+    .blinkable { ${blinkable}; }
+    .colorable { ${colorable}; }
+    .truncate { ${truncate}; }
+    .shadow-2 { ${shadow2}; }
+    .btn-opacity { ${btnOpacity}; }
+    .fully-pannable { ${fullyPannable}; }
+    .overlay-wrapper { ${overlayWrapper}; }
+
+    /* General styles */
     -webkit-font-smoothing: antialiased;
     background: ${scopeTheme('bodyBackgroundColor')};
     bottom: 0;
@@ -189,6 +155,10 @@ const GlobalStyle = createGlobalStyle`
     right: 0;
     top: 0;
     width: 100%;
+  
+    a {
+      text-decoration: none;
+    }
 
     * {
       box-sizing: border-box;
@@ -216,1605 +186,1641 @@ const GlobalStyle = createGlobalStyle`
       font-weight: 400;
     }
 
+    .browsehappy {
+      margin: 0.2em 0;
+      background: ${color('gray200')};
+      color: ${color('black')};
+      padding: 0.2em 0;
+    }
+
+    .hang-around {
+      transition-delay: .5s;
+    }
+
+    .overlay {
+      ${hideable};
+
+      background-color: ${color('white')};
+      position: absolute;
+      width: 100%;
+      height: 100%;
+      top: 0;
+      left: 0;
+      opacity: 0;
+      pointer-events: none;
+      z-index: ${props => props.theme.layers.modal};
+
+      &.faded {
+        /* NOTE: Not sure if we should block the pointer events here.. */
+        pointer-events: all;
+        cursor: wait;
+        opacity: 0.5;
+      }
+    }
+
+    .hide {
+      opacity: 0;
+    }
+
     &.time-travel-open {
       .details-wrapper {
         margin-top: ${scopeTheme('timelineHeight')} + 50px;
       }
     }
-  }
 
-  .header {
-    background-color: transparentize(${color('purple25')}, 0.2);
-    z-index: ${props => props.theme.layers.front};
-    padding: 15px 10px 0;
-    position: relative;
-    width: 100%;
-
-    .selectors {
-      display: flex;
+    .header {
+      background-color: transparentize(${color('purple25')}, 0.2);
+      z-index: ${props => props.theme.layers.front};
+      padding: 15px 10px 0;
       position: relative;
+      width: 100%;
 
-      > * {
-        flex: 1 1;
-      }
+      .selectors {
+        display: flex;
+        position: relative;
 
-      .logo {
-        margin: -16px 0 0 8px;
-        height: 64px;
-        max-width: 250px;
-        min-width: 0;
-      }
-    }
-  }
-
-
-  .rc-slider {
-    .rc-slider-step { cursor: pointer; }
-    .rc-slider-track { background-color: ${scopeTheme('textTertiaryColor')}; }
-    .rc-slider-rail { background-color: ${scopeTheme('borderLightColor')}; }
-    .rc-slider-handle { border-color: ${scopeTheme('textTertiaryColor')}; }
-  }
-
-  .footer {
-    ${overlayWrapper};
-    right: 43px;
-
-    &-status {
-      margin-right: 1em;
-    }
-
-    &-label, .pause-text {
-      margin: 0 0.25em;
-    }
-
-    &-versionupdate {
-      margin-right: 0.5em;
-    }
-
-    &-tools {
-      display: flex;
-    }
-
-    &-icon {
-      margin-left: 0.5em;
-    }
-
-    .tooltip-wrapper {
-      position: relative;
-
-      .tooltip {
-        display: none;
-        background-color: ${color('black')};
-        position: absolute;
-        color: ${color('white')};
-        text-align: center;
-        line-height: 22px;
-        border-radius: ${borderRadius('soft')};
-        font-size: ${fontSize('tiny')};
-        margin-bottom: 25px;
-        margin-left: -4px;
-        opacity: 0.75;
-        padding: 10px 20px;
-        bottom: 0;
-        left: 10px;
-        transform: translateX(-50%);
-        white-space: nowrap;
-        z-index: ${props => props.theme.layers.tooltip};
-
-        /* Adjusted from http://www.cssarrowplease.com/ */
-        &:after {
-          border: 6px solid transparent;
-          content: ' ';
-          top: 100%;
-          left: 50%;
-          height: 0;
-          width: 0;
-          position: absolute;
-          border-color: transparent;
-          border-top-color: ${color('black')};
-          margin-left: -6px;
+        > * {
+          flex: 1 1;
         }
-      }
 
-      &:hover .tooltip {
-        display: block;
-      }
-    }
-  }
-
-  .zoomable-canvas svg {
-    ${fullyPannable};
-  }
-
-  .topologies-selector {
-    margin: 0 4px;
-    display: flex;
-
-    .topologies-item {
-      margin: 0px 8px;
-
-      &-label {
-        font-size: ${fontSize('normal')};
-      }
-
-    }
-
-    .topologies-sub {
-      &-item {
-        &-label {
-          font-size: ${fontSize('small')};
+        .logo {
+          margin: -16px 0 0 8px;
+          height: 64px;
+          max-width: 250px;
+          min-width: 0;
         }
       }
     }
 
-    .topologies-item-main,
-    .topologies-sub-item {
-      pointer-events: all;
-      color: ${scopeTheme('textSecondaryColor')};
-      ${btnOpacity};
-      cursor: pointer;
-      padding: 4px 8px;
-      border-radius: ${borderRadius('soft')};
-      opacity: 0.9;
-      margin-bottom: 3px;
-      border: 1px solid transparent;
-      white-space: nowrap;
-
-      &-active, &:hover {
-        color: ${scopeTheme('textColor')};
-        background-color: ${scopeTheme('backgroundDarkerColor')};
-      }
-
-      &-active {
-        opacity: 0.85;
-      }
-
-      &-matched {
-        border-color: ${color('blue400')};
-      }
 
+    .rc-slider {
+      .rc-slider-step { cursor: pointer; }
+      .rc-slider-track { background-color: ${scopeTheme('textTertiaryColor')}; }
+      .rc-slider-rail { background-color: ${scopeTheme('borderLightColor')}; }
+      .rc-slider-handle { border-color: ${scopeTheme('textTertiaryColor')}; }
     }
 
-    .topologies-sub-item {
-      padding: 2px 8px;
-    }
+    .footer {
+      ${overlayWrapper};
+      right: 43px;
 
-  }
+      &-status {
+        margin-right: 1em;
+      }
 
-  .nodes-chart-overlay {
-    pointer-events: none;
-    opacity: ${scopeTheme('nodeElementsInBackgroundOpacity')};
+      &-label, .pause-text {
+        margin: 0 0.25em;
+      }
 
-    &:not(.active) {
-      display: none;
-    }
-  }
+      &-versionupdate {
+        margin-right: 0.5em;
+      }
 
-  .nodes-chart, .nodes-resources {
-
-    &-error, &-loading {
-      ${hideable};
-      pointer-events: none;
-      position: absolute;
-      left: 50%;
-      top: 50%;
-      margin-left: -16.5%;
-      margin-top: -275px;
-      color: ${scopeTheme('textSecondaryColor')};
-      width: 33%;
-      height: 550px;
-
-      display: flex;
-      flex-direction: column;
-      justify-content: center;
-
-      .heading {
-        font-size: ${fontSize('normal')};
+      &-tools {
+        display: flex;
       }
 
       &-icon {
-        text-align: center;
-        opacity: 0.25;
-        font-size: ${props => props.theme.overlayIconSize};
+        margin-left: 0.5em;
       }
 
-      li { padding-top: 5px; }
-    }
-
-    /* Make watermarks blink only if actually shown (otherwise the FF performance decreses weirdly). */
-    &-loading:not(.hide) &-error-icon-container {
-      ${blinkable};
-    }
-
-    &-loading {
-      text-align: center;
-    }
-
-    svg {
-      ${hideable};
-      position: absolute;
-      top: 0px;
-    }
-
-    .logo {
-      display: none;
-    }
-
-    svg.exported {
-      .logo {
-        display: inline;
-      }
-    }
-
-    text {
-      font-family: ${props => props.theme.fontFamilies.regular};
-      fill: ${scopeTheme('textSecondaryColor')};
-    }
-
-    .nodes-chart-elements .matched-results {
-      background-color: ${scopeTheme('labelBackgroundColor')};
-    }
-
-    .edge {
-      .link-none {
-        fill: none;
-        display: none;
-      }
-      .link-storage {
-        fill: none;
-        stroke: ${scopeTheme('edgeColor')};
-        stroke-dasharray: 1, 30;
-        stroke-linecap: round;
-      }
-      .link {
-        fill: none;
-        stroke: ${scopeTheme('edgeColor')};
-      }
-      .shadow {
-        fill: none;
-        stroke: ${color('blue400')};
-        stroke-opacity: 0;
-      }
-      &.highlighted {
-        .shadow {
-          stroke-opacity: ${scopeTheme('edgeHighlightOpacity')};
-        }
-      }
-    }
-
-    .edge-marker {
-      color: ${scopeTheme('edgeColor')};
-      fill: ${scopeTheme('edgeColor')};
-    }
-  }
-
-  .matched-results {
-    text-align: center;
-
-    &-match {
-      font-size: ${fontSize('small')};
-
-      &-wrapper {
-        display: inline-block;
-        margin: 1px;
-        padding: 2px 4px;
-        background-color: transparentize(${color('blue400')}, 0.9);
-      }
-
-      &-label {
-        color: ${scopeTheme('textSecondaryColor')};
-        margin-right: 0.5em;
-      }
-    }
-
-    &-more {
-      font-size: ${fontSize('tiny')};
-      color: ${color('blue700')};
-      margin-top: -2px;
-    }
-  }
-
-  .details {
-    &-wrapper {
-      position: fixed;
-      display: flex;
-      z-index: ${props => props.theme.layers.toolbar};
-      right: ${scopeTheme('detailsWindowPaddingLeft')};
-      top: 100px;
-      bottom: 48px;
-      transition: transform 0.33333s cubic-bezier(0,0,0.21,1), margin-top .15s ${scopeTheme('baseEase')};
-    }
-  }
-
-  .node-details {
-    height: 100%;
-    width: ${scopeTheme('detailsWindowWidth')};
-    display: flex;
-    flex-flow: column;
-    margin-bottom: 12px;
-    padding-bottom: 2px;
-    border-radius: ${borderRadius('soft')};
-    background-color: ${color('white')};
-    ${shadow2};
-    /* keep node-details above the terminal. */
-    z-index: ${props => props.theme.layers.front};
-    overflow: hidden;
-
-    &:last-child {
-      margin-bottom: 0;
-    }
-
-    &-tools-wrapper {
-      position: relative;
-    }
-
-
-    &-tools {
-      position: absolute;
-      top: 6px;
-      right: 8px;
-
-      .close-details {
+      .tooltip-wrapper {
         position: relative;
-        z-index: ${props => props.theme.layers.front};
-      }
 
-      > i {
-        ${btnOpacity};
-        padding: 4px 5px;
-        margin-left: 2px;
-        font-size: ${fontSize('normal')};
-        color: ${color('white')};
-        cursor: pointer;
-        border: 1px solid transparent;
-        border-radius: ${borderRadius('soft')};
+        .tooltip {
+          display: none;
+          background-color: ${color('black')};
+          position: absolute;
+          color: ${color('white')};
+          text-align: center;
+          line-height: 22px;
+          border-radius: ${borderRadius('soft')};
+          font-size: ${fontSize('tiny')};
+          margin-bottom: 25px;
+          margin-left: -4px;
+          opacity: 0.75;
+          padding: 10px 20px;
+          bottom: 0;
+          left: 10px;
+          transform: translateX(-50%);
+          white-space: nowrap;
+          z-index: ${props => props.theme.layers.tooltip};
 
-        span {
-          font-family: ${props => props.theme.fontFamilies.regular};
-          font-size: ${fontSize('small')};
-          margin-left: 4px;
-
-          span {
-            text-transform: capitalize;
-            font-size: ${fontSize('normal')};
-            margin-left: 0;
+          /* Adjusted from http://www.cssarrowplease.com/ */
+          &:after {
+            border: 6px solid transparent;
+            content: ' ';
+            top: 100%;
+            left: 50%;
+            height: 0;
+            width: 0;
+            position: absolute;
+            border-color: transparent;
+            border-top-color: ${color('black')};
+            margin-left: -6px;
           }
         }
 
-        &:hover {
-          border-color: ${props => transparentize(0.4, props.theme.colors.white)};
+        &:hover .tooltip {
+          display: block;
         }
       }
     }
 
-    .match {
-      background-color: ${props => transparentize(0.7, props.theme.colors.blue400)};
-      border: 1px solid ${color('blue400')};
+    .zoomable-canvas svg {
+      ${fullyPannable};
     }
 
-    &-header {
-      ${colorable};
+    .topologies-selector {
+      margin: 0 4px;
+      display: flex;
+
+      .topologies-item {
+        margin: 0px 8px;
+
+        &-label {
+          font-size: ${fontSize('normal')};
+        }
 
-      &-wrapper {
-        padding: 36px 36px 8px 36px;
       }
 
-      &-label {
-        color: ${color('white')};
-        margin: 0;
-        width: 348px;
-        padding-top: 0;
+      .topologies-sub {
+        &-item {
+          &-label {
+            font-size: ${fontSize('small')};
+          }
+        }
       }
 
-      .details-tools {
-        position: absolute;
-        top: 16px;
-        right: 24px;
-      }
-
-      &-notavailable {
-        background-color: ${scopeTheme('backgroundDarkColor')};
-      }
-
-    }
-
-    &-relatives {
-      margin-top: 4px;
-      font-size: ${fontSize('normal')};
-      color: ${color('white')};
-
-      &-link {
-        ${truncate};
+      .topologies-item-main,
+      .topologies-sub-item {
+        pointer-events: all;
+        color: ${scopeTheme('textSecondaryColor')};
         ${btnOpacity};
-        display: inline-block;
-        margin-right: 0.5em;
         cursor: pointer;
-        text-decoration: underline;
-        opacity: ${scopeTheme('linkOpacityDefault')};
-        max-width: 12em;
+        padding: 4px 8px;
+        border-radius: ${borderRadius('soft')};
+        opacity: 0.9;
+        margin-bottom: 3px;
+        border: 1px solid transparent;
+        white-space: nowrap;
+
+        &-active, &:hover {
+          color: ${scopeTheme('textColor')};
+          background-color: ${scopeTheme('backgroundDarkerColor')};
+        }
+
+        &-active {
+          opacity: 0.85;
+        }
+
+        &-matched {
+          border-color: ${color('blue400')};
+        }
+
+      }
+
+      .topologies-sub-item {
+        padding: 2px 8px;
+      }
+
+    }
+
+    .nodes-chart-overlay {
+      pointer-events: none;
+      opacity: ${scopeTheme('nodeElementsInBackgroundOpacity')};
+
+      &:not(.active) {
+        display: none;
+      }
+    }
+
+    .nodes-chart, .nodes-resources {
+
+      &-error, &-loading {
+        ${hideable};
+        pointer-events: none;
+        position: absolute;
+        left: 50%;
+        top: 50%;
+        margin-left: -16.5%;
+        margin-top: -275px;
+        color: ${scopeTheme('textSecondaryColor')};
+        width: 33%;
+        height: 550px;
+
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+
+        .heading {
+          font-size: ${fontSize('normal')};
+        }
+
+        &-icon {
+          text-align: center;
+          opacity: 0.25;
+          font-size: ${props => props.theme.overlayIconSize};
+        }
+
+        li { padding-top: 5px; }
+      }
+
+      /* Make watermarks blink only if actually shown (otherwise the FF performance decreses weirdly). */
+      &-loading:not(.hide) &-error-icon-container {
+        ${blinkable};
+      }
+
+      &-loading {
+        text-align: center;
+      }
+
+      svg {
+        ${hideable};
+        position: absolute;
+        top: 0px;
+      }
+
+      .logo {
+        display: none;
+      }
+
+      svg.exported {
+        .logo {
+          display: inline;
+        }
+      }
+
+      text {
+        font-family: ${props => props.theme.fontFamilies.regular};
+        fill: ${scopeTheme('textSecondaryColor')};
+      }
+
+      .nodes-chart-elements .matched-results {
+        background-color: ${scopeTheme('labelBackgroundColor')};
+      }
+
+      .edge {
+        .link-none {
+          fill: none;
+          display: none;
+        }
+        .link-storage {
+          fill: none;
+          stroke: ${scopeTheme('edgeColor')};
+          stroke-dasharray: 1, 30;
+          stroke-linecap: round;
+        }
+        .link {
+          fill: none;
+          stroke: ${scopeTheme('edgeColor')};
+        }
+        .shadow {
+          fill: none;
+          stroke: ${color('blue400')};
+          stroke-opacity: 0;
+        }
+        &.highlighted {
+          .shadow {
+            stroke-opacity: ${scopeTheme('edgeHighlightOpacity')};
+          }
+        }
+      }
+
+      .edge-marker {
+        color: ${scopeTheme('edgeColor')};
+        fill: ${scopeTheme('edgeColor')};
+      }
+    }
+
+    .matched-results {
+      text-align: center;
+
+      &-match {
+        font-size: ${fontSize('small')};
+
+        &-wrapper {
+          display: inline-block;
+          margin: 1px;
+          padding: 2px 4px;
+          background-color: transparentize(${color('blue400')}, 0.9);
+        }
+
+        &-label {
+          color: ${scopeTheme('textSecondaryColor')};
+          margin-right: 0.5em;
+        }
       }
 
       &-more {
-        ${btnOpacity};
-        padding: 0 2px;
-        cursor: pointer;
         font-size: ${fontSize('tiny')};
-        font-weight: bold;
-        display: inline-block;
-        position: relative;
-        top: -5px;
+        color: ${color('blue700')};
+        margin-top: -2px;
       }
     }
 
-    &-controls {
-      white-space: nowrap;
-      padding: 8px 0;
-      font-size: ${fontSize('small')};
-
+    .details {
       &-wrapper {
-        padding: 0 36px 0 32px;
-      }
-
-      .node-control-button {
-        color: ${color('white')};
-      }
-
-      &-spinner {
-        ${hideable};
-        color: ${color('white')};
-        margin-left: 8px;
-      }
-
-      &-error {
-        ${truncate};
-        float: right;
-        width: 55%;
-        padding-top: 6px;
-        text-align: left;
-        color: ${color('white')};
-
-        &-icon {
-          ${blinkable};
-          margin-right: 0.5em;
-        }
+        position: fixed;
+        display: flex;
+        z-index: ${props => props.theme.layers.toolbar};
+        right: ${scopeTheme('detailsWindowPaddingLeft')};
+        top: 100px;
+        bottom: 48px;
+        transition: transform 0.33333s cubic-bezier(0,0,0.21,1), margin-top .15s ${scopeTheme('baseEase')};
       }
     }
 
-    &-content {
-      flex: 1;
-      padding: 0 36px 0 36px;
-      overflow-y: auto;
+    .node-details {
+      height: 100%;
+      width: ${scopeTheme('detailsWindowWidth')};
+      display: flex;
+      flex-flow: column;
+      margin-bottom: 12px;
+      padding-bottom: 2px;
+      border-radius: ${borderRadius('soft')};
+      background-color: ${color('white')};
+      ${shadow2};
+      /* keep node-details above the terminal. */
+      z-index: ${props => props.theme.layers.front};
+      overflow: hidden;
 
-      &-loading {
-        margin-top: 48px;
-        text-align: center;
-        font-size: ${fontSize('huge')};
-        color: ${scopeTheme('textTertiaryColor')};
+      &:last-child {
+        margin-bottom: 0;
       }
 
-      &-section {
-        margin: 16px 0;
+      &-tools-wrapper {
+        position: relative;
+      }
 
-        &-header {
+
+      &-tools {
+        position: absolute;
+        top: 6px;
+        right: 8px;
+
+        .close-details {
+          position: relative;
+          z-index: ${props => props.theme.layers.front};
+        }
+
+        > i {
+          ${btnOpacity};
+          padding: 4px 5px;
+          margin-left: 2px;
           font-size: ${fontSize('normal')};
-          color: ${scopeTheme('textTertiaryColor')};
-          margin-bottom: 10px;
-        }
-      }
-    }
+          color: ${color('white')};
+          cursor: pointer;
+          border: 1px solid transparent;
+          border-radius: ${borderRadius('soft')};
 
-    &-health {
+          span {
+            font-family: ${props => props.theme.fontFamilies.regular};
+            font-size: ${fontSize('small')};
+            margin-left: 4px;
 
-      &-wrapper {
-        display: flex;
-        justify-content: space-around;
-        align-content: center;
-        text-align: center;
-        flex-wrap: wrap;
-      }
-
-      &-overflow {
-        ${btnOpacity};
-        flex-basis: 33%;
-        display: flex;
-        flex-direction: row;
-        flex-wrap: wrap;
-        align-items: center;
-        opacity: 0.85;
-        cursor: pointer;
-        position: relative;
-        padding-bottom: 16px;
-
-        &-item {
-          padding: 4px 8px;
-          line-height: 1.2;
-          flex-basis: 48%;
-
-          &-value {
-            color: ${scopeTheme('textSecondaryColor')};
-            font-size: ${fontSize('normal')};
+            span {
+              text-transform: capitalize;
+              font-size: ${fontSize('normal')};
+              margin-left: 0;
+            }
           }
 
-          &-label {
-            color: ${scopeTheme('textSecondaryColor')};
-            font-size: ${fontSize('tiny')};
+          &:hover {
+            border-color: ${props => transparentize(0.4, props.theme.colors.white)};
           }
         }
       }
 
-      &-item {
-        padding: 8px 16px;
-        width: 33%;
-        display: flex;
-        flex-direction: column;
-        flex-grow: 1;
-
-        &-label {
-          color: ${scopeTheme('textSecondaryColor')};
-          font-size: ${fontSize('small')};
-        }
-
-        &-sparkline {
-          margin-top: auto;
-        }
-
-        &-placeholder {
-          font-size: ${fontSize('large')};
-          opacity: 0.2;
-          margin-bottom: 0.2em;
-        }
-      }
-
-      &-link-item {
-        ${btnOpacity};
-        cursor: pointer;
-        opacity: ${scopeTheme('linkOpacityDefault')};
-        width: 33%;
-        display: flex;
-        color: inherit;
-
-        .node-details-health-item {
-          width: auto;
-        }
-      }
-    }
-
-    &-info {
-
-      &-field {
-        display: flex;
-        align-items: baseline;
-
-        &-label {
-          text-align: right;
-          width: 30%;
-          color: ${scopeTheme('textSecondaryColor')};
-          padding: 0 0.5em 0 0;
-          white-space: nowrap;
-          font-size: ${fontSize('small')};
-
-          &::after {
-            content: ':';
-          }
-        }
-
-        &-value {
-          font-size: ${fontSize('small')};
-          flex: 1;
-          /* Now required (from chrome 48) to get overflow + flexbox behaving: */
-          min-width: 0;
-          color: ${scopeTheme('textColor')};
-        }
-      }
-    }
-
-    &-property-list {
-      &-controls {
-        margin-left: -4px;
-      }
-
-      &-field {
-        display: flex;
-        align-items: baseline;
-
-        &-label {
-          text-align: right;
-          width: 50%;
-          color: ${scopeTheme('textSecondaryColor')};
-          padding: 0 0.5em 0 0;
-          white-space: nowrap;
-          font-size: ${fontSize('small')};
-
-          &::after {
-            content: ':';
-          }
-        }
-
-        &-value {
-          font-size: ${fontSize('small')};
-          flex: 1;
-          /* Now required (from chrome 48) to get overflow + flexbox behaving: */
-          min-width: 0;
-          color: ${scopeTheme('textColor')};
-        }
-      }
-    }
-
-    &-generic-table {
-      width: 100%;
-
-      tr {
-        display: flex;
-        th, td {
-          padding: 0 5px;
-        }
-      }
-    }
-
-    &-table {
-      width: 100%;
-      border-spacing: 0;
-      /* need fixed for truncating, but that does not extend wide columns dynamically */
-      table-layout: fixed;
-
-      &-wrapper {
-        margin: 24px -4px;
+      .match {
+        background-color: ${props => transparentize(0.7, props.theme.colors.blue400)};
+        border: 1px solid ${color('blue400')};
       }
 
       &-header {
-        color: ${scopeTheme('textTertiaryColor')};
-        font-size: ${fontSize('small')};
-        text-align: right;
-        padding: 0;
+        ${colorable};
 
-        .node-details-table-header-sortable {
-          padding: 3px 4px;
-          cursor: pointer;
+        &-wrapper {
+          padding: 36px 36px 8px 36px;
         }
 
-        &-sorted {
-          color: ${scopeTheme('textSecondaryColor')};
+        &-label {
+          color: ${color('white')};
+          margin: 0;
+          width: 348px;
+          padding-top: 0;
         }
 
-        &-sorter {
-          margin: 0 0.35em;
-        }
-
-        &:first-child {
-          margin-right: 0;
-          text-align: left;
-        }
-      }
-
-      tbody {
-        position: relative;
-
-        .min-height-constraint {
+        .details-tools {
           position: absolute;
-          width: 0 !important;
-          opacity: 0;
-          top: 0;
+          top: 16px;
+          right: 24px;
+        }
+
+        &-notavailable {
+          background-color: ${scopeTheme('backgroundDarkColor')};
+        }
+
+      }
+
+      &-relatives {
+        margin-top: 4px;
+        font-size: ${fontSize('normal')};
+        color: ${color('white')};
+
+        &-link {
+          ${truncate};
+          ${btnOpacity};
+          display: inline-block;
+          margin-right: 0.5em;
+          cursor: pointer;
+          text-decoration: underline;
+          opacity: ${scopeTheme('linkOpacityDefault')};
+          max-width: 12em;
+        }
+
+        &-more {
+          ${btnOpacity};
+          padding: 0 2px;
+          cursor: pointer;
+          font-size: ${fontSize('tiny')};
+          font-weight: bold;
+          display: inline-block;
+          position: relative;
+          top: -5px;
         }
       }
 
-      &-node {
+      &-controls {
+        white-space: nowrap;
+        padding: 8px 0;
         font-size: ${fontSize('small')};
-        line-height: 1.5;
 
+        &-wrapper {
+          padding: 0 36px 0 32px;
+        }
+
+        .node-control-button {
+          color: ${color('white')};
+        }
+
+        &-spinner {
+          ${hideable};
+          color: ${color('white')};
+          margin-left: 8px;
+        }
+
+        &-error {
+          ${truncate};
+          float: right;
+          width: 55%;
+          padding-top: 6px;
+          text-align: left;
+          color: ${color('white')};
+
+          &-icon {
+            ${blinkable};
+            margin-right: 0.5em;
+          }
+        }
+      }
+
+      &-content {
+        flex: 1;
+        padding: 0 36px 0 36px;
+        overflow-y: auto;
+
+        &-loading {
+          margin-top: 48px;
+          text-align: center;
+          font-size: ${fontSize('huge')};
+          color: ${scopeTheme('textTertiaryColor')};
+        }
+
+        &-section {
+          margin: 16px 0;
+
+          &-header {
+            font-size: ${fontSize('normal')};
+            color: ${scopeTheme('textTertiaryColor')};
+            margin-bottom: 10px;
+          }
+        }
+      }
+
+      &-health {
+
+        &-wrapper {
+          display: flex;
+          justify-content: space-around;
+          align-content: center;
+          text-align: center;
+          flex-wrap: wrap;
+        }
+
+        &-overflow {
+          ${btnOpacity};
+          flex-basis: 33%;
+          display: flex;
+          flex-direction: row;
+          flex-wrap: wrap;
+          align-items: center;
+          opacity: 0.85;
+          cursor: pointer;
+          position: relative;
+          padding-bottom: 16px;
+
+          &-item {
+            padding: 4px 8px;
+            line-height: 1.2;
+            flex-basis: 48%;
+
+            &-value {
+              color: ${scopeTheme('textSecondaryColor')};
+              font-size: ${fontSize('normal')};
+            }
+
+            &-label {
+              color: ${scopeTheme('textSecondaryColor')};
+              font-size: ${fontSize('tiny')};
+            }
+          }
+        }
+
+        &-item {
+          padding: 8px 16px;
+          width: 33%;
+          display: flex;
+          flex-direction: column;
+          flex-grow: 1;
+
+          &-label {
+            color: ${scopeTheme('textSecondaryColor')};
+            font-size: ${fontSize('small')};
+          }
+
+          &-sparkline {
+            margin-top: auto;
+          }
+
+          &-placeholder {
+            font-size: ${fontSize('large')};
+            opacity: 0.2;
+            margin-bottom: 0.2em;
+          }
+        }
+
+        &-link-item {
+          ${btnOpacity};
+          cursor: pointer;
+          opacity: ${scopeTheme('linkOpacityDefault')};
+          width: 33%;
+          display: flex;
+          color: inherit;
+
+          .node-details-health-item {
+            width: auto;
+          }
+        }
+      }
+
+      &-info {
+
+        &-field {
+          display: flex;
+          align-items: baseline;
+
+          &-label {
+            text-align: right;
+            width: 30%;
+            color: ${scopeTheme('textSecondaryColor')};
+            padding: 0 0.5em 0 0;
+            white-space: nowrap;
+            font-size: ${fontSize('small')};
+
+            &::after {
+              content: ':';
+            }
+          }
+
+          &-value {
+            font-size: ${fontSize('small')};
+            flex: 1;
+            /* Now required (from chrome 48) to get overflow + flexbox behaving: */
+            min-width: 0;
+            color: ${scopeTheme('textColor')};
+          }
+        }
+      }
+
+      &-property-list {
+        &-controls {
+          margin-left: -4px;
+        }
+
+        &-field {
+          display: flex;
+          align-items: baseline;
+
+          &-label {
+            text-align: right;
+            width: 50%;
+            color: ${scopeTheme('textSecondaryColor')};
+            padding: 0 0.5em 0 0;
+            white-space: nowrap;
+            font-size: ${fontSize('small')};
+
+            &::after {
+              content: ':';
+            }
+          }
+
+          &-value {
+            font-size: ${fontSize('small')};
+            flex: 1;
+            /* Now required (from chrome 48) to get overflow + flexbox behaving: */
+            min-width: 0;
+            color: ${scopeTheme('textColor')};
+          }
+        }
+      }
+
+      &-generic-table {
+        width: 100%;
+
+        tr {
+          display: flex;
+          th, td {
+            padding: 0 5px;
+          }
+        }
+      }
+
+      &-table {
+        width: 100%;
+        border-spacing: 0;
+        /* need fixed for truncating, but that does not extend wide columns dynamically */
+        table-layout: fixed;
+
+        &-wrapper {
+          margin: 24px -4px;
+        }
+
+        &-header {
+          color: ${scopeTheme('textTertiaryColor')};
+          font-size: ${fontSize('small')};
+          text-align: right;
+          padding: 0;
+
+          .node-details-table-header-sortable {
+            padding: 3px 4px;
+            cursor: pointer;
+          }
+
+          &-sorted {
+            color: ${scopeTheme('textSecondaryColor')};
+          }
+
+          &-sorter {
+            margin: 0 0.35em;
+          }
+
+          &:first-child {
+            margin-right: 0;
+            text-align: left;
+          }
+        }
+
+        tbody {
+          position: relative;
+
+          .min-height-constraint {
+            position: absolute;
+            width: 0 !important;
+            opacity: 0;
+            top: 0;
+          }
+        }
+
+        &-node {
+          font-size: ${fontSize('small')};
+          line-height: 1.5;
+
+          &:hover, &.selected {
+            background-color: ${color('white')};
+          }
+
+          > * {
+            padding: 0 4px;
+          }
+
+          &-link {
+            ${btnOpacity};
+            text-decoration: underline;
+            cursor: pointer;
+            opacity: ${scopeTheme('linkOpacityDefault')};
+            color: ${scopeTheme('textColor')};
+          }
+
+          &-value, &-metric {
+            flex: 1;
+            margin-left: 0.5em;
+            text-align: right;
+          }
+
+          &-metric-link {
+            ${btnOpacity};
+            text-decoration: underline;
+            cursor: pointer;
+            opacity: ${scopeTheme('linkOpacityDefault')};
+            color: ${scopeTheme('textColor')};
+          }
+
+          &-value-scalar {
+            /* width: 2em; */
+            text-align: right;
+            margin-right: 0.5em;
+          }
+
+          &-value-minor,
+          &-value-unit {
+            font-size: ${fontSize('small')};
+            color: ${scopeTheme('textSecondaryColor')};
+          }
+        }
+      }
+    }
+
+
+
+    .node-resources {
+      &-metric-box {
+        ${palable};
+        cursor: pointer;
+        fill: ${props => transparentize(0.6, props.theme.colors.gray600)};
+
+        &-info {
+          background-color: ${props => transparentize(0.4, props.theme.colors.white)};
+          border-radius: ${borderRadius('soft')};
+          cursor: inherit;
+          padding: 5px;
+
+          .wrapper {
+            display: block;
+
+            &.label { font-size: ${fontSize('small')}; }
+            &.consumption { font-size: ${fontSize('tiny')}; }
+          }
+        }
+      }
+
+      &-layer-topology {
+        background-color: ${props => transparentize(0.05, props.theme.colors.gray50)};
+        border-radius: ${borderRadius('soft')};
+        border: 1px solid ${color('gray200')};
+        color: ${scopeTheme('textTertiaryColor')};
+        font-size: ${fontSize('normal')};
+        font-weight: bold;
+        padding-right: 20px;
+        text-align: right;
+        text-transform: capitalize;
+      }
+    }
+
+    /* This part sets the styles only for the 'real' node details table, not applying
+    them to the nodes grid, because there we control hovering from the JS.
+    NOTE: Maybe it would be nice to separate the class names between the two places
+    where node tables are used - i.e. it doesn't make sense that node-details-table
+    can also refer to the tables in the nodes grid. */
+    .details-wrapper .node-details-table {
+      &-node {
         &:hover, &.selected {
           background-color: ${color('white')};
         }
+      }
+    }
 
-        > * {
-          padding: 0 4px;
+    .node-control-button {
+      ${btnOpacity};
+      padding: 6px;
+      margin-left: 2px;
+      font-size: ${fontSize('small')};
+      color: ${scopeTheme('textSecondaryColor')};
+      cursor: pointer;
+      border: 1px solid transparent;
+      border-radius: ${borderRadius('soft')};
+      &:hover {
+        border-color: ${props => transparentize(0.4, props.theme.colors.white)};
+      }
+      &-pending, &-pending:hover {
+        opacity: 0.2;
+        border-color: transparent;
+        cursor: not-allowed;
+      }
+    }
+
+    .terminal {
+
+      &-app {
+        display: flex;
+        flex-flow: column;
+      }
+
+      &-embedded {
+        position: relative;
+        /* shadow of animation-wrapper is 10px, let it fit in here without being
+        overflow hiddened. */
+        flex: 1;
+        overflow-x: hidden;
+      }
+
+      &-animation-wrapper {
+        position: absolute;
+        /* some room for the drop shadow. */
+        top: 10px;
+        left: 10px;
+        bottom: 10px;
+        right: 0;
+        transition: transform 0.5s cubic-bezier(0.230, 1.000, 0.320, 1.000);
+        ${shadow2};
+      }
+
+      &-wrapper {
+        width: 100%;
+        height: 100%;
+        border: 0px solid ${color('black')};
+        color: ${color('gray50')};
+      }
+
+      &-header {
+        ${truncate};
+        color: ${color('white')};
+        height: ${scopeTheme('terminalHeaderHeight')};
+        padding: 8px 24px;
+        background-color: ${scopeTheme('textColor')};
+        position: relative;
+        font-size: ${fontSize('small')};
+        line-height: 28px;
+        border-top-left-radius: ${borderRadius('soft')};
+
+        &-title {
+          cursor: default;
         }
 
-        &-link {
-          ${btnOpacity};
-          text-decoration: underline;
+        &-tools {
+          position: absolute;
+          right: 8px;
+          top: 6px;
+
+          &-item, &-item-icon {
+            ${palable};
+            padding: 4px 5px;
+            color: ${color('white')};
+            cursor: pointer;
+            opacity: 0.7;
+            border: 1px solid transparent;
+            border-radius: ${borderRadius('soft')};
+
+            font-size: ${fontSize('tiny')};
+            font-weight: bold;
+
+            &:hover {
+              opacity: 1;
+              border-color: ${props => transparentize(0.4, props.theme.colors.white)};
+            }
+          }
+
+          &-item-icon {
+            font-size: ${fontSize('normal')};
+          }
+        }
+      }
+
+      &-embedded &-inner { top: ${scopeTheme('terminalHeaderHeight')}; }
+      &-app &-inner { top: 0; }
+      &-inner {
+        cursor: text;
+        font-family: ${props => props.theme.fontFamilies.monospace};
+        position: absolute;
+        bottom: 0;
+        left: 0;
+        right: 0;
+        background-color: ${color('black')};
+        padding: 8px;
+        box-sizing: content-box;
+        border-bottom-left-radius: ${borderRadius('soft')};
+
+        .terminal {
+          background-color: transparent !important;
+        }
+      }
+
+      &-status-bar {
+        font-family: ${props => props.theme.fontFamilies.regular};
+        position: absolute;
+        bottom: 16px;
+        right: 16px;
+        width: 50%;
+        padding: 16px 16px;
+        opacity: 0.8;
+        border-radius: ${borderRadius('soft')};
+
+        h3 {
+          margin: 4px 0;
+        }
+
+        &-message {
+          margin: 4px 0;
+          color: ${color('white')};
+        }
+
+        .link {
+          font-weight: bold;
           cursor: pointer;
-          opacity: ${scopeTheme('linkOpacityDefault')};
-          color: ${scopeTheme('textColor')};
+          float: right;
+        }
+      }
+
+      &-cursor {
+        color: ${color('black')};
+        background: ${color('gray50')};
+      }
+    }
+
+    .terminal-inactive .terminal-cursor {
+      visibility: hidden;
+    }
+
+    .metric {
+      &-unit {
+        padding-left: 0.25em;
+      }
+    }
+
+    .show-more {
+      ${btnOpacity};
+      border-top: 1px dotted ${scopeTheme('borderLightColor')};
+      padding: 0px 0;
+      margin-top: 4px;
+      text-align: right;
+      cursor: pointer;
+      color: ${scopeTheme('textSecondaryColor')};
+      font-size: ${fontSize('small')};
+
+      &-icon {
+        color: ${scopeTheme('textTertiaryColor')};
+        font-size: ${fontSize('normal')};
+        position: relative;
+        top: 1px;
+      }
+    }
+
+    .plugins {
+      margin-right: 0.5em;
+
+      &-label {
+        margin-right: 0.25em;
+      }
+
+      &-plugin {
+        cursor: default;
+      }
+
+      &-plugin + &-plugin:before {
+        content: ', ';
+      }
+
+      &-plugin-icon {
+        top: 1px;
+        position: relative;
+        font-size: ${fontSize('large')};
+        margin-right: 2px;
+      }
+
+      .error {
+        animation: blinking 2.0s 60 ${scopeTheme('baseEase')}; /* blink for 2 minutes */
+        color: ${scopeTheme('textSecondaryColor')};
+      }
+
+      &-empty {
+        opacity: ${scopeTheme('textSecondaryColor')};
+      }
+    }
+
+    .status {
+      padding: 2px 12px;
+      background-color: ${scopeTheme('bodyBackgroundColor')};
+      border-radius: ${borderRadius('soft')};
+      color: ${scopeTheme('textSecondaryColor')};
+      display: inline-block;
+      opacity: 0.9;
+
+      &-icon {
+        font-size: ${fontSize('normal')};
+        position: relative;
+        top: 0.125rem;
+        margin-right: 0.25rem;
+      }
+
+      &.status-loading {
+        animation: blinking 2.0s 150 ${scopeTheme('baseEase')}; /* keep blinking for 5 minutes */
+        text-transform: none;
+        color: ${scopeTheme('textColor')};
+      }
+    }
+
+    .topology-option, .metric-selector, .network-selector, .view-mode-selector, .time-control {
+      font-size: ${fontSize('normal')};
+      color: ${scopeTheme('textSecondaryColor')};
+      margin-bottom: 6px;
+
+      &:last-child {
+        margin-bottom: 0;
+      }
+
+      i {
+        font-size: ${fontSize('tiny')};
+        margin-left: 4px;
+        color: ${color('orange500')};
+      }
+
+      &-wrapper {
+        pointer-events: all;
+        border-radius: ${borderRadius('soft')};
+        border: 1px solid ${scopeTheme('backgroundDarkerColor')};
+        display: inline-block;
+        white-space: nowrap;
+      }
+
+      &-action {
+        ${btnOpacity};
+        padding: 3px 12px;
+        cursor: pointer;
+        display: inline-block;
+        background-color: ${scopeTheme('backgroundColor')};
+
+        &-selected, &:not([disabled]):hover {
+          color: ${scopeTheme('textDarkerColor')};
+          background-color: ${scopeTheme('backgroundDarkerColor')};
         }
 
-        &-value, &-metric {
-          flex: 1;
-          margin-left: 0.5em;
-          text-align: right;
+        &:first-child {
+          border-left: none;
+          border-top-left-radius: ${borderRadius('soft')};
+          border-bottom-left-radius: ${borderRadius('soft')};
         }
 
-        &-metric-link {
-          ${btnOpacity};
-          text-decoration: underline;
-          cursor: pointer;
-          opacity: ${scopeTheme('linkOpacityDefault')};
-          color: ${scopeTheme('textColor')};
-        }
-
-        &-value-scalar {
-          /* width: 2em; */
-          text-align: right;
-          margin-right: 0.5em;
-        }
-
-        &-value-minor,
-        &-value-unit {
-          font-size: ${fontSize('small')};
-          color: ${scopeTheme('textSecondaryColor')};
+        &:last-child {
+          border-top-right-radius: ${borderRadius('soft')};
+          border-bottom-right-radius: ${borderRadius('soft')};
         }
       }
     }
-  }
 
+    .metric-selector {
+      font-size: ${fontSize('small')};
+      margin-top: 6px;
+    }
 
+    .view-mode-selector, .time-control {
+      margin-left: 20px;
 
-  .node-resources {
-    &-metric-box {
-      ${palable};
-      cursor: pointer;
-      fill: ${props => transparentize(0.6, props.theme.colors.gray600)};
+      &-wrapper {
+        pointer-events: all;
+        border-color: ${scopeTheme('backgroundDarkerSecondaryColor')};
+        overflow: hidden;
+      }
+
+      &:first-child,
+      &:last-child {
+        .view-mode-selector-action {
+          border-radius: ${borderRadius('none')};
+        }
+      }
+
+      &-action {
+        background-color: transparent;
+
+        &-selected, &:not([disabled]):hover {
+          background-color: ${scopeTheme('backgroundDarkerColor')};
+        }
+
+        &:not(:last-child) {
+          border-right: 1px solid ${scopeTheme('backgroundDarkerSecondaryColor')};
+        }
+      }
+    }
+
+    .time-control {
+      margin-right: 20px;
+
+      &-controls {
+        align-items: center;
+        justify-content: flex-end;
+        display: flex;
+      }
+
+      &-spinner {
+        display: inline-block;
+        margin-right: 15px;
+        margin-top: 3px;
+
+        i {
+          color: ${scopeTheme('textSecondaryColor')};
+          font-size: ${fontSize('normal')};
+        }
+      }
 
       &-info {
-        background-color: ${props => transparentize(0.4, props.theme.colors.white)};
-        border-radius: ${borderRadius('soft')};
-        cursor: inherit;
-        padding: 5px;
+        ${blinkable};
+        display: block;
+        margin-top: 5px;
+        text-align: right;
+        pointer-events: all;
+        font-size: ${fontSize('small')};
+      }
+    }
 
-        .wrapper {
-          display: block;
+    .topology-option {
+      &-wrapper {
+        display: inline-flex;
+        flex-wrap: wrap;
+        overflow: hidden;
+        max-height: 27px;
+        transition: max-height 0.5s 0s ${scopeTheme('baseEase')};
 
-          &.label { font-size: ${fontSize('small')}; }
-          &.consumption { font-size: ${fontSize('tiny')}; }
+        .topology-option-action {
+          flex: 1 1 auto;
+          text-align: center;
+        }
+      }
+      
+        &:last-child :hover {
+        height: auto;
+        max-height: calc((13px * 1.5 + 3px + 3px) * 8); /* expand to display 8 rows */
+        overflow: auto;
+        transition: max-height 0.5s 0s ${scopeTheme('baseEase')};
+      } 
+
+      font-size: ${fontSize('small')};
+
+      &-action {
+        &-selected {
+          cursor: default;
         }
       }
     }
 
-    &-layer-topology {
-      background-color: ${props => transparentize(0.05, props.theme.colors.gray50)};
-      border-radius: ${borderRadius('soft')};
-      border: 1px solid ${color('gray200')};
-      color: ${scopeTheme('textTertiaryColor')};
-      font-size: ${fontSize('normal')};
-      font-weight: bold;
-      padding-right: 20px;
-      text-align: right;
-      text-transform: capitalize;
-    }
-  }
-
-  /* This part sets the styles only for the 'real' node details table, not applying
-  them to the nodes grid, because there we control hovering from the JS.
-  NOTE: Maybe it would be nice to separate the class names between the two places
-  where node tables are used - i.e. it doesn't make sense that node-details-table
-  can also refer to the tables in the nodes grid. */
-  .details-wrapper .node-details-table {
-    &-node {
-      &:hover, &.selected {
-        background-color: ${color('white')};
+    .view-mode-selector-wrapper, .time-control-wrapper {
+      .label { margin-left: 4px; }
+      i {
+        margin-left: 0;
+        color: ${scopeTheme('textSecondaryColor')};
       }
     }
-  }
 
-  .node-control-button {
-    ${btnOpacity};
-    padding: 6px;
-    margin-left: 2px;
-    font-size: ${fontSize('small')};
-    color: ${scopeTheme('textSecondaryColor')};
-    cursor: pointer;
-    border: 1px solid transparent;
-    border-radius: ${borderRadius('soft')};
-    &:hover {
-      border-color: ${props => transparentize(0.4, props.theme.colors.white)};
-    }
-    &-pending, &-pending:hover {
-      opacity: 0.2;
-      border-color: transparent;
-      cursor: not-allowed;
-    }
-  }
-
-  .terminal {
-
-    &-app {
-      display: flex;
-      flex-flow: column;
+    .network-selector-action {
+      border-top: 3px solid transparent;
+      border-bottom: 3px solid ${scopeTheme('backgroundDarkColor')};
     }
 
-    &-embedded {
-      position: relative;
-      /* shadow of animation-wrapper is 10px, let it fit in here without being
-      overflow hiddened. */
-      flex: 1;
-      overflow-x: hidden;
+    .warning {
+      display: inline-block;
+      cursor: pointer;
+      border: 1px dashed transparent;
+      text-transform: none;
+      border-radius: ${borderRadius('soft')};
+      margin-left: 4px;
+
+      &-wrapper {
+        display: flex;
+      }
+
+      &-text {
+        display: inline-block;
+        color: ${scopeTheme('textSecondaryColor')};
+        padding-left: 0.5em;
+      }
+
+      &-icon {
+        ${btnOpacity};
+      }
+
+      &-expanded {
+        margin-left: 0;
+        padding: 2px 4px;
+        border-color: ${scopeTheme('textTertiaryColor')};
+      }
+
+      &-expanded &-icon {
+        position: relative;
+        top: 4px;
+        left: 2px;
+      }
+
     }
 
-    &-animation-wrapper {
-      position: absolute;
-      /* some room for the drop shadow. */
-      top: 10px;
-      left: 10px;
-      bottom: 10px;
-      right: 0;
-      transition: transform 0.5s cubic-bezier(0.230, 1.000, 0.320, 1.000);
-      ${shadow2};
-    }
-
-    &-wrapper {
-      width: 100%;
-      height: 100%;
-      border: 0px solid ${color('black')};
-      color: ${color('gray50')};
-    }
-
-    &-header {
-      ${truncate};
-      color: ${color('white')};
-      height: ${scopeTheme('terminalHeaderHeight')};
-      padding: 8px 24px;
-      background-color: ${scopeTheme('textColor')};
-      position: relative;
+    .sidebar {
+      position: fixed;
+      bottom: 11px;
+      left: 11px;
+      padding: 5px;
       font-size: ${fontSize('small')};
-      line-height: 28px;
-      border-top-left-radius: ${borderRadius('soft')};
+      border-radius: ${borderRadius('soft')};
+      border: 1px solid transparent;
+      pointer-events: none;
+      max-width: 50%;
+    }
 
-      &-title {
-        cursor: default;
+    .sidebar-gridmode {
+      background-color: ${color('purple50')};
+      border-color: ${scopeTheme('backgroundDarkerColor')};
+      opacity: 0.9;
+    }
+
+    .search {
+      &-wrapper {
+        margin: 0 8px;
+        min-width: 160px;
+        text-align: right;
+      }
+    }
+
+    @keyframes blinking {
+      0%, 50%, 100% {
+        opacity: 1.0;
+      } 25% {
+        opacity: 0.5;
+      }
+    }
+
+    /*   
+    Help panel!
+    */
+
+    .help-panel {
+      z-index: ${props => props.theme.layers.modal};
+      background-color: ${color('white')};
+      ${shadow2};
+      display: flex;
+      position: relative;
+
+      &-wrapper {
+        position: absolute;
+        width: 100%;
+        height: 100%;
+
+        display: flex;
+        justify-content: center;
+        align-items: flex-start;
+      }
+
+      &-header {
+        background-color: ${color('blue400')};
+        padding: 12px 24px;
+        color: ${color('white')};
+
+        h2 {
+          margin: 0;
+          font-size: ${fontSize('large')};
+        }
       }
 
       &-tools {
         position: absolute;
-        right: 8px;
         top: 6px;
+        right: 8px;
 
-        &-item, &-item-icon {
-          ${palable};
+        i {
+          ${btnOpacity};
           padding: 4px 5px;
-          color: ${color('white')};
+          margin-left: 2px;
+          font-size: ${fontSize('normal')};
+          color: ${color('purple400')};
           cursor: pointer;
-          opacity: 0.7;
           border: 1px solid transparent;
           border-radius: ${borderRadius('soft')};
 
-          font-size: ${fontSize('tiny')};
-          font-weight: bold;
-
           &:hover {
-            opacity: 1;
-            border-color: ${props => transparentize(0.4, props.theme.colors.white)};
+            border-color: ${props => transparentize(0.4, props.theme.colors.purple400)};
           }
         }
 
-        &-item-icon {
-          font-size: ${fontSize('normal')};
-        }
-      }
-    }
-
-    &-embedded &-inner { top: ${scopeTheme('terminalHeaderHeight')}; }
-    &-app &-inner { top: 0; }
-    &-inner {
-      cursor: text;
-      font-family: ${props => props.theme.fontFamilies.monospace};
-      position: absolute;
-      bottom: 0;
-      left: 0;
-      right: 0;
-      background-color: ${color('black')};
-      padding: 8px;
-      box-sizing: content-box;
-      border-bottom-left-radius: ${borderRadius('soft')};
-
-      .terminal {
-        background-color: transparent !important;
-      }
-    }
-
-    &-status-bar {
-      font-family: ${props => props.theme.fontFamilies.regular};
-      position: absolute;
-      bottom: 16px;
-      right: 16px;
-      width: 50%;
-      padding: 16px 16px;
-      opacity: 0.8;
-      border-radius: ${borderRadius('soft')};
-
-      h3 {
-        margin: 4px 0;
       }
 
-      &-message {
-        margin: 4px 0;
-        color: ${color('white')};
-      }
-
-      .link {
-        font-weight: bold;
-        cursor: pointer;
-        float: right;
-      }
-    }
-
-    &-cursor {
-      color: ${color('black')};
-      background: ${color('gray50')};
-    }
-  }
-
-  .terminal-inactive .terminal-cursor {
-    visibility: hidden;
-  }
-
-  .metric {
-    &-unit {
-      padding-left: 0.25em;
-    }
-  }
-
-  .show-more {
-    ${btnOpacity};
-    border-top: 1px dotted ${scopeTheme('borderLightColor')};
-    padding: 0px 0;
-    margin-top: 4px;
-    text-align: right;
-    cursor: pointer;
-    color: ${scopeTheme('textSecondaryColor')};
-    font-size: ${fontSize('small')};
-
-    &-icon {
-      color: ${scopeTheme('textTertiaryColor')};
-      font-size: ${fontSize('normal')};
-      position: relative;
-      top: 1px;
-    }
-  }
-
-  .plugins {
-    margin-right: 0.5em;
-
-    &-label {
-      margin-right: 0.25em;
-    }
-
-    &-plugin {
-      cursor: default;
-    }
-
-    &-plugin + &-plugin:before {
-      content: ', ';
-    }
-
-    &-plugin-icon {
-      top: 1px;
-      position: relative;
-      font-size: ${fontSize('large')};
-      margin-right: 2px;
-    }
-
-    .error {
-      animation: blinking 2.0s 60 ${scopeTheme('baseEase')}; /* blink for 2 minutes */
-      color: ${scopeTheme('textSecondaryColor')};
-    }
-
-    &-empty {
-      opacity: ${scopeTheme('textSecondaryColor')};
-    }
-  }
-
-  .status {
-    padding: 2px 12px;
-    background-color: ${scopeTheme('bodyBackgroundColor')};
-    border-radius: ${borderRadius('soft')};
-    color: ${scopeTheme('textSecondaryColor')};
-    display: inline-block;
-    opacity: 0.9;
-
-    &-icon {
-      font-size: ${fontSize('normal')};
-      position: relative;
-      top: 0.125rem;
-      margin-right: 0.25rem;
-    }
-
-    &.status-loading {
-      animation: blinking 2.0s 150 ${scopeTheme('baseEase')}; /* keep blinking for 5 minutes */
-      text-transform: none;
-      color: ${scopeTheme('textColor')};
-    }
-  }
-
-  .topology-option, .metric-selector, .network-selector, .view-mode-selector, .time-control {
-    font-size: ${fontSize('normal')};
-    color: ${scopeTheme('textSecondaryColor')};
-    margin-bottom: 6px;
-
-    &:last-child {
-      margin-bottom: 0;
-    }
-
-    i {
-      font-size: ${fontSize('tiny')};
-      margin-left: 4px;
-      color: ${color('orange500')};
-    }
-
-    &-wrapper {
-      pointer-events: all;
-      border-radius: ${borderRadius('soft')};
-      border: 1px solid ${scopeTheme('backgroundDarkerColor')};
-      display: inline-block;
-      white-space: nowrap;
-    }
-
-    &-action {
-      ${btnOpacity};
-      padding: 3px 12px;
-      cursor: pointer;
-      display: inline-block;
-      background-color: ${scopeTheme('backgroundColor')};
-
-      &-selected, &:not([disabled]):hover {
-        color: ${scopeTheme('textDarkerColor')};
-        background-color: ${scopeTheme('backgroundDarkerColor')};
-      }
-
-      &:first-child {
-        border-left: none;
-        border-top-left-radius: ${borderRadius('soft')};
-        border-bottom-left-radius: ${borderRadius('soft')};
-      }
-
-      &:last-child {
-        border-top-right-radius: ${borderRadius('soft')};
-        border-bottom-right-radius: ${borderRadius('soft')};
-      }
-    }
-  }
-
-  .metric-selector {
-    font-size: ${fontSize('small')};
-    margin-top: 6px;
-  }
-
-  .view-mode-selector, .time-control {
-    margin-left: 20px;
-
-    &-wrapper {
-      pointer-events: all;
-      border-color: ${scopeTheme('backgroundDarkerSecondaryColor')};
-      overflow: hidden;
-    }
-
-    &:first-child,
-    &:last-child {
-      .view-mode-selector-action {
-        border-radius: ${borderRadius('none')};
-      }
-    }
-
-    &-action {
-      background-color: transparent;
-
-      &-selected, &:not([disabled]):hover {
-        background-color: ${scopeTheme('backgroundDarkerColor')};
-      }
-
-      &:not(:last-child) {
-        border-right: 1px solid ${scopeTheme('backgroundDarkerSecondaryColor')};
-      }
-    }
-  }
-
-  .time-control {
-    margin-right: 20px;
-
-    &-controls {
-      align-items: center;
-      justify-content: flex-end;
-      display: flex;
-    }
-
-    &-spinner {
-      display: inline-block;
-      margin-right: 15px;
-      margin-top: 3px;
-
-      i {
-        color: ${scopeTheme('textSecondaryColor')};
-        font-size: ${fontSize('normal')};
-      }
-    }
-
-    &-info {
-      ${blinkable};
-      display: block;
-      margin-top: 5px;
-      text-align: right;
-      pointer-events: all;
-      font-size: ${fontSize('small')};
-    }
-  }
-
-  .topology-option {
-    &-wrapper {
-      display: inline-flex;
-      flex-wrap: wrap;
-      overflow: hidden;
-      max-height: 27px;
-      transition: max-height 0.5s 0s ${scopeTheme('baseEase')};
-
-      .topology-option-action {
-        flex: 1 1 auto;
-        text-align: center;
-      }
-    }
-    
-      &:last-child :hover {
-      height: auto;
-      max-height: calc((13px * 1.5 + 3px + 3px) * 8); /* expand to display 8 rows */
-      overflow: auto;
-      transition: max-height 0.5s 0s ${scopeTheme('baseEase')};
-    } 
-
-    font-size: ${fontSize('small')};
-
-    &-action {
-      &-selected {
-        cursor: default;
-      }
-    }
-  }
-
-  .view-mode-selector-wrapper, .time-control-wrapper {
-    .label { margin-left: 4px; }
-    i {
-      margin-left: 0;
-      color: ${scopeTheme('textSecondaryColor')};
-    }
-  }
-
-  .network-selector-action {
-    border-top: 3px solid transparent;
-    border-bottom: 3px solid ${scopeTheme('backgroundDarkColor')};
-  }
-
-  .warning {
-    display: inline-block;
-    cursor: pointer;
-    border: 1px dashed transparent;
-    text-transform: none;
-    border-radius: ${borderRadius('soft')};
-    margin-left: 4px;
-
-    &-wrapper {
-      display: flex;
-    }
-
-    &-text {
-      display: inline-block;
-      color: ${scopeTheme('textSecondaryColor')};
-      padding-left: 0.5em;
-    }
-
-    &-icon {
-      ${btnOpacity};
-    }
-
-    &-expanded {
-      margin-left: 0;
-      padding: 2px 4px;
-      border-color: ${scopeTheme('textTertiaryColor')};
-    }
-
-    &-expanded &-icon {
-      position: relative;
-      top: 4px;
-      left: 2px;
-    }
-
-  }
-
-  .sidebar {
-    position: fixed;
-    bottom: 11px;
-    left: 11px;
-    padding: 5px;
-    font-size: ${fontSize('small')};
-    border-radius: ${borderRadius('soft')};
-    border: 1px solid transparent;
-    pointer-events: none;
-    max-width: 50%;
-  }
-
-  .sidebar-gridmode {
-    background-color: ${color('purple50')};
-    border-color: ${scopeTheme('backgroundDarkerColor')};
-    opacity: 0.9;
-  }
-
-  .search {
-    &-wrapper {
-      margin: 0 8px;
-      min-width: 160px;
-      text-align: right;
-    }
-  }
-
-  @keyframes blinking {
-    0%, 50%, 100% {
-      opacity: 1.0;
-    } 25% {
-      opacity: 0.5;
-    }
-  }
-
-  /*   
-  Help panel!
-   */
-
-  .help-panel {
-    z-index: ${props => props.theme.layers.modal};
-    background-color: ${color('white')};
-    ${shadow2};
-    display: flex;
-    position: relative;
-
-    &-wrapper {
-      position: absolute;
-      width: 100%;
-      height: 100%;
-
-      display: flex;
-      justify-content: center;
-      align-items: flex-start;
-    }
-
-    &-header {
-      background-color: ${color('blue400')};
-      padding: 12px 24px;
-      color: ${color('white')};
-
-      h2 {
-        margin: 0;
-        font-size: ${fontSize('large')};
-      }
-    }
-
-    &-tools {
-      position: absolute;
-      top: 6px;
-      right: 8px;
-
-      i {
-        ${btnOpacity};
-        padding: 4px 5px;
-        margin-left: 2px;
-        font-size: ${fontSize('normal')};
-        color: ${color('purple400')};
-        cursor: pointer;
-        border: 1px solid transparent;
-        border-radius: ${borderRadius('soft')};
-
-        &:hover {
-          border-color: ${props => transparentize(0.4, props.theme.colors.purple400)};
-        }
-      }
-
-    }
-
-    &-main {
-      display: flex;
-      padding: 12px 36px 36px 36px;
-      flex-direction: row;
-      align-items: stretch;
-
-      h2 {
-        line-height: 150%;
-        font-size: ${fontSize('large')};
-        color: ${color('purple400')};
-        padding: 4px 0;
-        border-bottom: 1px solid ${props => transparentize(0.9, props.theme.colors.purple400)};
-      }
-
-      h3 {
-        font-size: ${fontSize('normal')};
-        color: ${color('purple400')};
-        padding: 4px 0;
-      }
-
-      p {
-        margin: 0;
-      }
-    }
-
-    &-shortcuts {
-      margin-right: 36px;
-
-      &-shortcut {
-        kbd {
-          display: inline-block;
-          padding: 3px 5px;
-          font-size: ${fontSize('tiny')};
-          line-height: 10px;
-          color: ${color('gray600')};
-          vertical-align: middle;
-          background-color: ${color('white')};
-          border: solid 1px ${color('gray200')};
-          border-bottom-color: ${color('gray600')};
-          border-radius: ${borderRadius('soft')};
-          box-shadow: inset 0 -1px 0 ${color('gray600')};
-        }
-        div.key {
-          width: 60px;
-          display: inline-block;
-        }
-        div.label {
-          display: inline-block;
-        }
-      }
-    }
-
-    &-search {
-      margin-right: 36px;
-
-      &-row {
+      &-main {
         display: flex;
+        padding: 12px 36px 36px 36px;
         flex-direction: row;
+        align-items: stretch;
 
-        &-term {
-          flex: 1;
-          color: ${scopeTheme('textSecondaryColor')};
-          i {
-            margin-right: 5px;
-          }
+        h2 {
+          line-height: 150%;
+          font-size: ${fontSize('large')};
+          color: ${color('purple400')};
+          padding: 4px 0;
+          border-bottom: 1px solid ${props => transparentize(0.9, props.theme.colors.purple400)};
         }
 
-        &-term-label {
-          flex: 1;
-          b {
-            color: ${scopeTheme('textSecondaryColor')};
+        h3 {
+          font-size: ${fontSize('normal')};
+          color: ${color('purple400')};
+          padding: 4px 0;
+        }
+
+        p {
+          margin: 0;
+        }
+      }
+
+      &-shortcuts {
+        margin-right: 36px;
+
+        &-shortcut {
+          kbd {
+            display: inline-block;
+            padding: 3px 5px;
+            font-size: ${fontSize('tiny')};
+            line-height: 10px;
+            color: ${color('gray600')};
+            vertical-align: middle;
+            background-color: ${color('white')};
+            border: solid 1px ${color('gray200')};
+            border-bottom-color: ${color('gray600')};
+            border-radius: ${borderRadius('soft')};
+            box-shadow: inset 0 -1px 0 ${color('gray600')};
+          }
+          div.key {
+            width: 60px;
+            display: inline-block;
+          }
+          div.label {
+            display: inline-block;
           }
         }
       }
-    }
 
-    &-fields {
-      display: flex;
-      flex-direction: column;
+      &-search {
+        margin-right: 36px;
 
-      &-current-topology {
-        color: ${color('purple400')};
+        &-row {
+          display: flex;
+          flex-direction: row;
+
+          &-term {
+            flex: 1;
+            color: ${scopeTheme('textSecondaryColor')};
+            i {
+              margin-right: 5px;
+            }
+          }
+
+          &-term-label {
+            flex: 1;
+            b {
+              color: ${scopeTheme('textSecondaryColor')};
+            }
+          }
+        }
       }
 
       &-fields {
         display: flex;
-        align-items: stretch;
+        flex-direction: column;
 
-        &-column {
+        &-current-topology {
+          color: ${color('purple400')};
+        }
+
+        &-fields {
           display: flex;
-          flex-direction: column;
-          flex: 1;
-          margin-right: 12px;
+          align-items: stretch;
 
-          &-content {
-            overflow: auto;
-            /* 160px for top and bottom margins and the rest of the help window
-            is about 160px too.
-            Notes: Firefox gets a bit messy if you try and bubble
-            heights + overflow up (min-height issue + still doesn't work v.well),
-            so this is a bit of a hack. */
-            max-height: calc(100vh - 160px - 160px - 160px);
+          &-column {
+            display: flex;
+            flex-direction: column;
+            flex: 1;
+            margin-right: 12px;
+
+            &-content {
+              overflow: auto;
+              /* 160px for top and bottom margins and the rest of the help window
+              is about 160px too.
+              Notes: Firefox gets a bit messy if you try and bubble
+              heights + overflow up (min-height issue + still doesn't work v.well),
+              so this is a bit of a hack. */
+              max-height: calc(100vh - 160px - 160px - 160px);
+            }
           }
         }
       }
     }
-  }
 
-  /*   
-  Zoom control
-   */
+    /*   
+    Zoom control
+    */
 
-  .zoom-control {
-    ${overlayWrapper};
-    flex-direction: column;
-    padding: 5px 7px 0;
-    bottom: 50px;
-    right: 40px;
+    .zoom-control {
+      ${overlayWrapper};
+      flex-direction: column;
+      padding: 5px 7px 0;
+      bottom: 50px;
+      right: 40px;
 
-    a:hover { border-color: transparent; }
+      a:hover { border-color: transparent; }
 
-    .rc-slider {
-      margin: 5px 0;
-      height: 60px;
-    }
-  }
-
-  /*   
-  Debug panel!
-   */
-
-  .debug-panel {
-    ${shadow2};
-    background-color: ${color('white')};
-    top: 80px;
-    position: absolute;
-    padding: 10px;
-    left: 10px;
-    z-index: ${props => props.theme.layers.modal};
-
-    opacity: 0.3;
-
-    &:hover {
-      opacity: 1;
-    }
-
-    table {
-      display: inline-block;
-      border-collapse: collapse;
-      margin: 4px 2px;
-
-      td {
-        width: 10px;
-        height: 10px;
-      }
-    }
-  }
-
-  /*   
-  Nodes grid.
-   */
-
-  .nodes-grid {
-    tr {
-      border-radius: ${borderRadius('soft')};
-    }
-
-    &-label-minor {
-      opacity: 0.7;
-    }
-
-    &-id-column {
-      margin: -3px -4px;
-      padding: 2px 4px;
-      display: flex;
-      div {
-        flex: 1;
+      .rc-slider {
+        margin: 5px 0;
+        height: 60px;
       }
     }
 
-    .node-details-table-wrapper-wrapper {
+    /*   
+    Debug panel!
+    */
 
-      flex: 1;
-      display: flex;
-      flex-direction: row;
-      width: 100%;
-
-      .node-details-table-wrapper {
-        margin: 0;
-        flex: 1;
-      }
-
-      .nodes-grid-graph {
-        position: relative;
-        margin-top: 24px;
-      }
-
-      .node-details-table-node > * {
-        padding: 3px 4px;
-      }
-
-      /* Keeping the row height fixed is important for locking the rows on hover. */
-      .node-details-table-node, thead tr {
-        height: 28px;
-      }
-
-      tr:nth-child(even) {
-        background: ${color('gray100')};
-      }
-
-      tbody tr {
-        border: 1px solid transparent;
-        border-radius: ${borderRadius('soft')};
-        cursor: pointer;
-      }
-
-      /* We fully control hovering of the grid rows from JS,
-      because we want consistent behaviour between the
-      visual and row locking logic that happens on hover. */
-      tbody tr.selected, tbody tr.focused {
-        background-color: ${props => transparentize(0.85, props.theme.colors.blue400)};
-        border: 1px solid ${color('blue400')};
-      }
-    }
-
-    .scroll-body {
-
-      table {
-        border-bottom: 1px solid ${color('gray200')};
-      }
-
-      thead, tbody tr {
-        display: table;
-        width: 100%;
-        table-layout: fixed;
-      }
-
-      tbody:after {
-        content: '';
-        display: block;
-        /* height of the controls so you can scroll the last row up above them
-        and have a good look. */
-        height: 140px;
-      }
-
-      thead {
-        box-shadow: 0 4px 2px -2px ${props => transparentize(0.84, props.theme.colors.black)};
-        border-bottom: 1px solid ${color('gray600')};
-      }
-
-      tbody {
-        display: block;
-        overflow-y: scroll;
-      }
-    }
-  }
-
-  .troubleshooting-menu {
-    display: flex;
-    position: relative;
-
-    &-wrapper {
-      height: 100%;
-      width: 100%;
-      align-items: center;
-      display: flex;
-      justify-content: center;
-      position: absolute;
-    }
-
-    &-content {
-      position: relative;
-      background-color: ${color('white')};
-      padding: 20px;
+    .debug-panel {
       ${shadow2};
+      background-color: ${color('white')};
+      top: 80px;
+      position: absolute;
+      padding: 10px;
+      left: 10px;
       z-index: ${props => props.theme.layers.modal};
-    }
 
-    &-item {
-      height: 40px;
-      .soft { opacity: 0.6; }
-    }
-
-    button {
-      border: 0;
-      background-color: transparent;
-      cursor: pointer;
-      padding: 0;
-      outline: 0;
-    }
-
-    button, a {
-      color: ${color('purple900')};
+      opacity: 0.3;
 
       &:hover {
-        color: ${scopeTheme('textColor')};
+        opacity: 1;
+      }
+
+      table {
+        display: inline-block;
+        border-collapse: collapse;
+        margin: 4px 2px;
+
+        td {
+          width: 10px;
+          height: 10px;
+        }
       }
     }
 
-    i {
-      width: 20px;
-      text-align: center;
-      margin-right: 10px;
+    /*   
+    Nodes grid.
+    */
+
+    .nodes-grid {
+      tr {
+        border-radius: ${borderRadius('soft')};
+      }
+
+      &-label-minor {
+        opacity: 0.7;
+      }
+
+      &-id-column {
+        margin: -3px -4px;
+        padding: 2px 4px;
+        display: flex;
+        div {
+          flex: 1;
+        }
+      }
+
+      .node-details-table-wrapper-wrapper {
+
+        flex: 1;
+        display: flex;
+        flex-direction: row;
+        width: 100%;
+
+        .node-details-table-wrapper {
+          margin: 0;
+          flex: 1;
+        }
+
+        .nodes-grid-graph {
+          position: relative;
+          margin-top: 24px;
+        }
+
+        .node-details-table-node > * {
+          padding: 3px 4px;
+        }
+
+        /* Keeping the row height fixed is important for locking the rows on hover. */
+        .node-details-table-node, thead tr {
+          height: 28px;
+        }
+
+        tr:nth-child(even) {
+          background: ${color('gray100')};
+        }
+
+        tbody tr {
+          border: 1px solid transparent;
+          border-radius: ${borderRadius('soft')};
+          cursor: pointer;
+        }
+
+        /* We fully control hovering of the grid rows from JS,
+        because we want consistent behaviour between the
+        visual and row locking logic that happens on hover. */
+        tbody tr.selected, tbody tr.focused {
+          background-color: ${props => transparentize(0.85, props.theme.colors.blue400)};
+          border: 1px solid ${color('blue400')};
+        }
+      }
+
+      .scroll-body {
+
+        table {
+          border-bottom: 1px solid ${color('gray200')};
+        }
+
+        thead, tbody tr {
+          display: table;
+          width: 100%;
+          table-layout: fixed;
+        }
+
+        tbody:after {
+          content: '';
+          display: block;
+          /* height of the controls so you can scroll the last row up above them
+          and have a good look. */
+          height: 140px;
+        }
+
+        thead {
+          box-shadow: 0 4px 2px -2px ${props => transparentize(0.84, props.theme.colors.black)};
+          border-bottom: 1px solid ${color('gray600')};
+        }
+
+        tbody {
+          display: block;
+          overflow-y: scroll;
+        }
+      }
     }
 
-    .fa.fa-times {
-      width: 25px;
-    }
-  }
+    .troubleshooting-menu {
+      display: flex;
+      position: relative;
 
-  @media (max-width: 1330px) {
-    .view-mode-selector .label { display: none; }
+      &-wrapper {
+        height: 100%;
+        width: 100%;
+        align-items: center;
+        display: flex;
+        justify-content: center;
+        position: absolute;
+      }
+
+      &-content {
+        position: relative;
+        background-color: ${color('white')};
+        padding: 20px;
+        ${shadow2};
+        z-index: ${props => props.theme.layers.modal};
+      }
+
+      &-item {
+        height: 40px;
+        .soft { opacity: 0.6; }
+      }
+
+      button {
+        border: 0;
+        background-color: transparent;
+        cursor: pointer;
+        padding: 0;
+        outline: 0;
+      }
+
+      button, a {
+        color: ${color('purple900')};
+
+        &:hover {
+          color: ${scopeTheme('textColor')};
+        }
+      }
+
+      i {
+        width: 20px;
+        text-align: center;
+        margin-right: 10px;
+      }
+
+      .fa.fa-times {
+        width: 25px;
+      }
+    }
+
+    @media (max-width: 1330px) {
+      .view-mode-selector .label { display: none; }
+    }
   }
 
 
diff --git a/client/app/scripts/themes/contrast.js b/client/app/scripts/themes/contrast.js
index 8c433de62..4d0b5d977 100644
--- a/client/app/scripts/themes/contrast.js
+++ b/client/app/scripts/themes/contrast.js
@@ -1,28 +1,27 @@
-import { color } from 'weaveworks-ui-components/lib/theme/selectors';
-
+import theme from 'weaveworks-ui-components/lib/theme';
 import defaultTheme from './default';
 
 const contrastTheme = {
   ...defaultTheme,
 
   /* contrast overrides */
-  backgroundColor: color('white'),
-  backgroundDarkerColor: color('purple200'),
-  backgroundDarkerSecondaryColor: color('purple200'),
-  bodyBackgroundColor: color('white'),
-  borderLightColor: color('gray600'),
+  backgroundColor: theme.colors.white,
+  backgroundDarkerColor: theme.colors.purple200,
+  backgroundDarkerSecondaryColor: theme.colors.purple200,
+  bodyBackgroundColor: theme.colors.white,
+  borderLightColor: theme.colors.gray600,
   btnOpacityDefault: 1,
   btnOpacityDisabled: 0.4,
   btnOpacitySelected: 1,
-  edgeColor: color('black'),
+  edgeColor: theme.colors.black,
   edgeHighlightOpacity: 0.3,
-  labelBackgroundColor: color('white'),
+  labelBackgroundColor: theme.colors.white,
   linkOpacityDefault: 1,
   nodeElementsInBackgroundOpacity: 0.4,
-  textColor: color('black'),
-  textDarkerColor: color('black'),
-  textSecondaryColor: color('black'),
-  textTertiaryColor: color('black'),
+  textColor: theme.colors.black,
+  textDarkerColor: theme.colors.black,
+  textSecondaryColor: theme.colors.black,
+  textTertiaryColor: theme.colors.black,
 };
 
 export default contrastTheme;
diff --git a/client/app/scripts/themes/default.js b/client/app/scripts/themes/default.js
index 05194838c..0e6e8b475 100644
--- a/client/app/scripts/themes/default.js
+++ b/client/app/scripts/themes/default.js
@@ -1,30 +1,30 @@
-import { color } from 'weaveworks-ui-components/lib/theme/selectors';
+import theme from 'weaveworks-ui-components/lib/theme';
 import { transparentize } from 'polished';
 
 const defaultTheme = {
-  backgroundColor: color('gray50'),
-  backgroundDarkColor: color('purple900'),
-  backgroundDarkerColor: color('purple100'),
-  backgroundDarkerSecondaryColor: color('gray50'),
+  backgroundColor: theme.colors.gray50,
+  backgroundDarkColor: theme.colors.purple900,
+  backgroundDarkerColor: theme.colors.purple100,
+  backgroundDarkerSecondaryColor: theme.colors.gray50,
   baseEase: 'ease-in-out',
-  bodyBackgroundColor: color('purple25'),
-  borderLightColor: color('purple100'),
+  bodyBackgroundColor: theme.colors.purple25,
+  borderLightColor: theme.colors.purple100,
   btnOpacityDefault: 0.9,
   btnOpacityDisabled: 0.25,
   btnOpacityHover: 1,
   btnOpacitySelected: 0.9,
   detailsWindowPaddingLeft: '30px',
   detailsWindowWidth: '420px',
-  edgeColor: color('purple500'),
+  edgeColor: theme.colors.purple500,
   edgeHighlightOpacity: 0.1,
-  labelBackgroundColor: props => transparentize(0.3, props.theme.colors.purple25),
+  labelBackgroundColor: transparentize(0.3, theme.colors.purple25),
   linkOpacityDefault: 0.8,
   nodeElementsInBackgroundOpacity: 0.7,
   terminalHeaderHeight: '44px',
-  textColor: color('purple800'),
-  textDarkerColor: color('purple900'),
-  textSecondaryColor: color('purple600'),
-  textTertiaryColor: color('purple400'),
+  textColor: theme.colors.purple800,
+  textDarkerColor: theme.colors.purple900,
+  textSecondaryColor: theme.colors.purple600,
+  textTertiaryColor: theme.colors.purple400,
   timelineHeight: '55px',
 };
 

From fd34eadf02bddae06bdf5f5bac2bb1846af26717 Mon Sep 17 00:00:00 2001
From: Filip Barl <filip@weave.works>
Date: Fri, 4 Oct 2019 15:46:58 +0200
Subject: [PATCH 09/12] Removed all SASS files

---
 client/app/scripts/components/global-style.js |  4 ++
 client/app/scripts/main.dev.js                |  1 -
 client/app/scripts/main.js                    |  1 -
 client/app/scripts/terminal-main.js           |  1 -
 client/app/styles/_base.scss                  |  3 --
 client/app/styles/_contrast-theme.scss        | 38 ---------------
 client/app/styles/_default-theme.scss         | 48 -------------------
 client/app/styles/main.scss                   | 14 ------
 8 files changed, 4 insertions(+), 106 deletions(-)
 delete mode 100644 client/app/styles/_base.scss
 delete mode 100644 client/app/styles/_contrast-theme.scss
 delete mode 100644 client/app/styles/_default-theme.scss
 delete mode 100644 client/app/styles/main.scss

diff --git a/client/app/scripts/components/global-style.js b/client/app/scripts/components/global-style.js
index 6fcc0768a..540cfbaea 100644
--- a/client/app/scripts/components/global-style.js
+++ b/client/app/scripts/components/global-style.js
@@ -2,6 +2,10 @@ import { createGlobalStyle } from 'styled-components';
 import { transparentize } from 'polished';
 import { borderRadius, color, fontSize } from 'weaveworks-ui-components/lib/theme/selectors';
 
+import '@fortawesome/fontawesome-free/css/all.css';
+import '@fortawesome/fontawesome-free/css/v4-shims.css';
+import 'rc-slider/dist/rc-slider.css';
+
 import ProximaNova from '../../fonts/proximanova-regular.woff';
 import RobotoMono from '../../fonts/robotomono-regular.ttf';
 
diff --git a/client/app/scripts/main.dev.js b/client/app/scripts/main.dev.js
index 8f1ff20b1..3401dad42 100644
--- a/client/app/scripts/main.dev.js
+++ b/client/app/scripts/main.dev.js
@@ -3,7 +3,6 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 import { Provider } from 'react-redux';
 
-import '../styles/main.scss';
 import '../images/favicon.ico';
 import configureStore from './stores/configureStore.dev';
 
diff --git a/client/app/scripts/main.js b/client/app/scripts/main.js
index e7a21d0fd..0eb34d246 100644
--- a/client/app/scripts/main.js
+++ b/client/app/scripts/main.js
@@ -3,7 +3,6 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 import { Provider } from 'react-redux';
 
-import '../styles/main.scss';
 import '../images/favicon.ico';
 import configureStore from './stores/configureStore';
 
diff --git a/client/app/scripts/terminal-main.js b/client/app/scripts/terminal-main.js
index 41f647dc4..b11d8f843 100644
--- a/client/app/scripts/terminal-main.js
+++ b/client/app/scripts/terminal-main.js
@@ -3,7 +3,6 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 import { Provider } from 'react-redux';
 
-import '../styles/main.scss';
 import '../images/favicon.ico';
 import configureStore from './stores/configureStore';
 
diff --git a/client/app/styles/_base.scss b/client/app/styles/_base.scss
deleted file mode 100644
index 1dfaa444c..000000000
--- a/client/app/styles/_base.scss
+++ /dev/null
@@ -1,3 +0,0 @@
-@import '~@fortawesome/fontawesome-free/css/all.css';
-@import '~@fortawesome/fontawesome-free/css/v4-shims.css';
-@import '~rc-slider/dist/rc-slider.css';
diff --git a/client/app/styles/_contrast-theme.scss b/client/app/styles/_contrast-theme.scss
deleted file mode 100644
index c7c45da6e..000000000
--- a/client/app/styles/_contrast-theme.scss
+++ /dev/null
@@ -1,38 +0,0 @@
-@import "default-theme";
-
-$background-color: $color-white;
-$background-lighter-color: $color-white;
-$background-darker-color: $color-purple-200;
-$background-darker-secondary-color: $color-purple-200;
-$background-dark-color: $color-purple-900;
-$text-color: $color-black;
-$text-secondary-color: $color-black;
-$text-tertiary-color: $color-black;
-$border-light-color: $color-gray-600;
-$text-darker-color: $color-black;
-$edge-color: $color-black;
-
-$node-elements-in-background-opacity: 0.4;
-
-$node-highlight-shadow-opacity: 0.4;
-$node-highlight-stroke-opacity: 0.5;
-$node-highlight-stroke-width: 0.16;
-$node-border-stroke-width: 0.2;
-$node-shadow-stroke-width: 0.25;
-$node-pseudo-opacity: 1;
-$edge-highlight-opacity: 0.3;
-$edge-opacity-blurred: 0;
-
-$btn-opacity-default: 1;
-$btn-opacity-hover: 1;
-$btn-opacity-selected: 1;
-$btn-opacity-disabled: 0.4;
-
-$link-opacity-default: 1;
-
-$search-border-color: $color-purple-200;
-$search-border-width: 2px;
-
-/* specific elements */
-$body-background-color: $color-white;
-$label-background-color: $color-white;
diff --git a/client/app/styles/_default-theme.scss b/client/app/styles/_default-theme.scss
deleted file mode 100644
index 6b25ce456..000000000
--- a/client/app/styles/_default-theme.scss
+++ /dev/null
@@ -1,48 +0,0 @@
-$base-ease: ease-in-out;
-
-$background-color: $color-gray-50;
-$background-lighter-color: $color-white;
-$background-darker-color: $color-purple-100;
-$background-darker-secondary-color: $color-gray-50;
-$background-dark-color: $color-purple-900;
-$text-color: $color-purple-800;
-$text-secondary-color: $color-purple-600;
-$text-tertiary-color: $color-purple-400;
-$border-light-color: $color-purple-100;
-$text-darker-color: $color-purple-900;
-
-$details-window-width: 420px;
-$details-window-padding-left: 30px;
-
-$terminal-header-height: 44px;
-
-$node-elements-in-background-opacity: 0.7;
-
-$node-highlight-shadow-opacity: 0.5;
-$node-highlight-stroke-opacity: 0.4;
-$node-highlight-stroke-width: 0.04;
-$node-border-stroke-width: 0.12;
-$node-shadow-stroke-width: 0.18;
-$node-pseudo-opacity: 0.8;
-$node-text-scale: 2;
-$edge-highlight-opacity: 0.1;
-$edge-opacity-blurred: 0.2;
-$edge-opacity: 0.5;
-$edge-color: $color-purple-500;
-
-$btn-opacity-default: 0.9;
-$btn-opacity-hover: 1;
-$btn-opacity-selected: 0.9;
-$btn-opacity-disabled: 0.25;
-
-$link-opacity-default: 0.8;
-
-$search-border-color: transparent;
-$search-border-width: 1px;
-
-$timeline-height: 55px;
-
-/* specific elements */
-$body-background-color: $color-purple-25;
-$label-background-color: transparentize($color-purple-25, 0.3);
-
diff --git a/client/app/styles/main.scss b/client/app/styles/main.scss
deleted file mode 100644
index 81625aa93..000000000
--- a/client/app/styles/main.scss
+++ /dev/null
@@ -1,14 +0,0 @@
-// Load the default theme initially to apply it on the global html level.
-@import "default-theme";
-@import "base";
-
-.scope-app.contrast-mode {
-    // Load the contrast theme and reload all the CSS in the scope-app container.
-    @import "contrast-theme";
-    @import "base";
-}
-.scope-app:not(.contrast-mode) {
-    // Load the default theme and reload all the CSS in the scope-app container.
-    @import "default-theme";
-    @import "base";
-}

From 2b41016596137b5816d618dfb3821b7f28a1529a Mon Sep 17 00:00:00 2001
From: Filip Barl <filip@weave.works>
Date: Fri, 4 Oct 2019 16:01:08 +0200
Subject: [PATCH 10/12] Got rid of sass + sass-lint dependencies

---
 client/.sass-lint.yml               |  19 -
 client/package.json                 |   6 +-
 client/webpack.local.config.js      |  23 -
 client/webpack.production.config.js |  18 -
 client/yarn.lock                    | 816 ++--------------------------
 5 files changed, 41 insertions(+), 841 deletions(-)
 delete mode 100644 client/.sass-lint.yml

diff --git a/client/.sass-lint.yml b/client/.sass-lint.yml
deleted file mode 100644
index 349477899..000000000
--- a/client/.sass-lint.yml
+++ /dev/null
@@ -1,19 +0,0 @@
-options:
-  merge-default-rules: false
-files:
-  include: 'app/styles/*.s+(a|c)ss'
-rules:
-  no-important: 1
-  no-color-literals: 2
-  variable-for-property:
-    - 2
-    -
-      properties:
-      - 'border-radius'
-      - 'border-top-left-radius'
-      - 'border-top-right-radius'
-      - 'border-bottom-left-radius'
-      - 'border-bottom-right-radius'
-      - 'font-family'
-      - 'font-size'
-      - 'z-index'
diff --git a/client/package.json b/client/package.json
index d75e50ea1..6cdc7720f 100644
--- a/client/package.json
+++ b/client/package.json
@@ -79,12 +79,8 @@
     "jest-cli": "25.0.0",
     "json-loader": "0.5.7",
     "mockdate": "2.0.2",
-    "node-sass": "^4.12.0",
     "postcss-loader": "3.0.0",
     "react-router": "3.2.0",
-    "sass-lint": "^1.13.1",
-    "sass-lint-webpack": "1.0.0",
-    "sass-loader": "7.0.1",
     "style-loader": "0.21.0",
     "stylelint": "11.0.0",
     "stylelint-config-recommended": "3.0.0",
@@ -109,7 +105,7 @@
     "start-production": "NODE_ENV=production node server.js",
     "test": "jest",
     "coveralls": "cat coverage/lcov.info | coveralls",
-    "lint": "eslint app server.js && stylelint app/scripts && sass-lint -v",
+    "lint": "eslint app server.js && stylelint app/scripts",
     "clean": "rm build/app.js",
     "noprobe": "../scope stop && ../scope launch --no-probe --app.window 8760h",
     "loadreport": "yarn run noprobe && sleep 1 && curl -X POST -H \"Content-Type: application/json\" http://$BACKEND_HOST/api/report -d"
diff --git a/client/webpack.local.config.js b/client/webpack.local.config.js
index 6c82236b1..47f9a8e19 100644
--- a/client/webpack.local.config.js
+++ b/client/webpack.local.config.js
@@ -2,8 +2,6 @@ const webpack = require('webpack');
 const autoprefixer = require('autoprefixer');
 const path = require('path');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
-const SassLintPlugin = require('sass-lint-webpack');
-const { themeVarsAsScss } = require('weaveworks-ui-components/lib/theme');
 
 /**
  * This is the Webpack configuration file for local development.
@@ -70,10 +68,6 @@ module.exports = {
       filename: 'index.html',
       template: 'app/html/index.html',
     }),
-    new SassLintPlugin({
-      context: 'app/styles',
-      ignorePlugins: ['html-webpack-plugin'],
-    }),
   ],
 
   // Transform source code using Babel and React Hot Loader
@@ -127,23 +121,6 @@ module.exports = {
             }
           },
         ],
-      },
-      {
-        test: /\.scss$/,
-        use: [
-          { loader: 'style-loader' },
-          { loader: 'css-loader' },
-          {
-            loader: 'sass-loader',
-            options: {
-              data: themeVarsAsScss(),
-              includePaths: [
-                path.resolve(__dirname, './node_modules/xterm'),
-                path.resolve(__dirname, './node_modules/rc-slider'),
-              ]
-            }
-          },
-        ],
       }
     ]
   },
diff --git a/client/webpack.production.config.js b/client/webpack.production.config.js
index 4dd2aeea2..51cc677d0 100644
--- a/client/webpack.production.config.js
+++ b/client/webpack.production.config.js
@@ -4,7 +4,6 @@ const path = require('path');
 
 const CleanWebpackPlugin = require('clean-webpack-plugin');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
-const { themeVarsAsScss } = require('weaveworks-ui-components/lib/theme');
 
 const GLOBALS = {
   'process.env': {NODE_ENV: '"production"'}
@@ -122,23 +121,6 @@ module.exports = {
             }
           },
         ],
-      },
-      {
-        test: /\.scss$/,
-        use: [
-          { loader: 'style-loader' },
-          { loader: 'css-loader' },
-          {
-            loader: 'sass-loader',
-            options: {
-              data: themeVarsAsScss(),
-              includePaths: [
-                path.resolve(__dirname, './node_modules/xterm'),
-                path.resolve(__dirname, './node_modules/rc-slider'),
-              ]
-            }
-          },
-        ],
       }
     ]
   },
diff --git a/client/yarn.lock b/client/yarn.lock
index bf4c88e4d..7e41db306 100644
--- a/client/yarn.lock
+++ b/client/yarn.lock
@@ -1324,12 +1324,6 @@ acorn-globals@^4.3.2:
     acorn "^6.0.1"
     acorn-walk "^6.0.1"
 
-acorn-jsx@^3.0.0:
-  version "3.0.1"
-  resolved "https://registry.yarnpkg.com/acorn-jsx/-/acorn-jsx-3.0.1.tgz#afdf9488fb1ecefc8348f6fb22f464e32a58b36b"
-  dependencies:
-    acorn "^3.0.4"
-
 acorn-jsx@^5.0.2:
   version "5.0.2"
   resolved "https://registry.yarnpkg.com/acorn-jsx/-/acorn-jsx-5.0.2.tgz#84b68ea44b373c4f8686023a551f61a21b7c4a4f"
@@ -1339,18 +1333,10 @@ acorn-walk@^6.0.1:
   version "6.1.1"
   resolved "https://registry.yarnpkg.com/acorn-walk/-/acorn-walk-6.1.1.tgz#d363b66f5fac5f018ff9c3a1e7b6f8e310cc3913"
 
-acorn@^3.0.4:
-  version "3.3.0"
-  resolved "https://registry.yarnpkg.com/acorn/-/acorn-3.3.0.tgz#45e37fb39e8da3f25baee3ff5369e2bb5f22017a"
-
 acorn@^5.0.0:
   version "5.7.3"
   resolved "https://registry.yarnpkg.com/acorn/-/acorn-5.7.3.tgz#67aa231bf8812974b85235a96771eb6bd07ea279"
 
-acorn@^5.5.0:
-  version "5.5.3"
-  resolved "https://registry.yarnpkg.com/acorn/-/acorn-5.5.3.tgz#f473dd47e0277a08e28e9bec5aeeb04751f0b8c9"
-
 acorn@^6.0.1:
   version "6.1.1"
   resolved "https://registry.yarnpkg.com/acorn/-/acorn-6.1.1.tgz#7d25ae05bb8ad1f9b699108e1094ecd7884adc1f"
@@ -1374,10 +1360,6 @@ ajv-errors@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/ajv-errors/-/ajv-errors-1.0.1.tgz#f35986aceb91afadec4102fbd85014950cefa64d"
 
-ajv-keywords@^1.0.0:
-  version "1.5.1"
-  resolved "https://registry.yarnpkg.com/ajv-keywords/-/ajv-keywords-1.5.1.tgz#314dd0a4b3368fad3dfcdc54ede6171b886daf3c"
-
 ajv-keywords@^2.1.0:
   version "2.1.1"
   resolved "https://registry.yarnpkg.com/ajv-keywords/-/ajv-keywords-2.1.1.tgz#617997fc5f60576894c435f940d819e135b80762"
@@ -1391,13 +1373,6 @@ ajv-keywords@^3.4.1:
   resolved "https://registry.yarnpkg.com/ajv-keywords/-/ajv-keywords-3.4.1.tgz#ef916e271c64ac12171fd8384eaae6b2345854da"
   integrity sha512-RO1ibKvd27e6FEShVFfPALuHI3WjSVNeK5FIsmme/LYRNxjKuNj+Dt7bucLa6NdSv3JcVTyMlm9kGR84z1XpaQ==
 
-ajv@^4.7.0:
-  version "4.11.8"
-  resolved "https://registry.yarnpkg.com/ajv/-/ajv-4.11.8.tgz#82ffb02b29e662ae53bdc20af15947706739c536"
-  dependencies:
-    co "^4.6.0"
-    json-stable-stringify "^1.0.1"
-
 ajv@^5.0.0, ajv@^5.2.3:
   version "5.3.0"
   resolved "https://registry.yarnpkg.com/ajv/-/ajv-5.3.0.tgz#4414ff74a50879c208ee5fdc826e32c303549eda"
@@ -1426,14 +1401,6 @@ ajv@^6.10.2:
     json-schema-traverse "^0.4.1"
     uri-js "^4.2.2"
 
-amdefine@>=0.0.4:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/amdefine/-/amdefine-1.0.1.tgz#4a5282ac164729e93619bcfd3ad151f817ce91f5"
-
-ansi-escapes@^1.1.0:
-  version "1.4.0"
-  resolved "https://registry.yarnpkg.com/ansi-escapes/-/ansi-escapes-1.4.0.tgz#d3a8a83b319aa67793662b13e761c7911422306e"
-
 ansi-escapes@^3.2.0:
   version "3.2.0"
   resolved "https://registry.yarnpkg.com/ansi-escapes/-/ansi-escapes-3.2.0.tgz#8780b98ff9dbf5638152d1f1fe5c1d7b4442976b"
@@ -1632,10 +1599,6 @@ async-each@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/async-each/-/async-each-1.0.1.tgz#19d386a1d9edc6e7c1c85d388aedbcc56d33602d"
 
-async-foreach@^0.1.3:
-  version "0.1.3"
-  resolved "https://registry.yarnpkg.com/async-foreach/-/async-foreach-0.1.3.tgz#36121f845c0578172de419a97dbeb1d16ec34542"
-
 async-limiter@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/async-limiter/-/async-limiter-1.0.1.tgz#dd379e94f0db8310b08291f9d64c3209766617fd"
@@ -1938,12 +1901,6 @@ bindings@^1.3.0:
   dependencies:
     file-uri-to-path "1.0.0"
 
-block-stream@*:
-  version "0.0.9"
-  resolved "https://registry.yarnpkg.com/block-stream/-/block-stream-0.0.9.tgz#13ebfe778a03205cfe03751481ebb4b3300c126a"
-  dependencies:
-    inherits "~2.0.0"
-
 bluebird@^3.5.1:
   version "3.5.3"
   resolved "https://registry.yarnpkg.com/bluebird/-/bluebird-3.5.3.tgz#7d01c6f9616c9a51ab0f8c549a79dfe6ec33efa7"
@@ -2172,22 +2129,12 @@ caller-callsite@^2.0.0:
   dependencies:
     callsites "^2.0.0"
 
-caller-path@^0.1.0:
-  version "0.1.0"
-  resolved "https://registry.yarnpkg.com/caller-path/-/caller-path-0.1.0.tgz#94085ef63581ecd3daa92444a8fe94e82577751f"
-  dependencies:
-    callsites "^0.2.0"
-
 caller-path@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/caller-path/-/caller-path-2.0.0.tgz#468f83044e369ab2010fac5f06ceee15bb2cb1f4"
   dependencies:
     caller-callsite "^2.0.0"
 
-callsites@^0.2.0:
-  version "0.2.0"
-  resolved "https://registry.yarnpkg.com/callsites/-/callsites-0.2.0.tgz#afab96262910a7f33c19a5775825c69f34e350ca"
-
 callsites@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/callsites/-/callsites-2.0.0.tgz#06eb84f00eea413da86affefacbffb36093b3c50"
@@ -2203,13 +2150,6 @@ camel-case@3.0.x:
     no-case "^2.2.0"
     upper-case "^1.1.1"
 
-camelcase-keys@^2.0.0:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/camelcase-keys/-/camelcase-keys-2.1.0.tgz#308beeaffdf28119051efa1d932213c91b8f92e7"
-  dependencies:
-    camelcase "^2.0.0"
-    map-obj "^1.0.0"
-
 camelcase-keys@^4.0.0:
   version "4.2.0"
   resolved "https://registry.yarnpkg.com/camelcase-keys/-/camelcase-keys-4.2.0.tgz#a2aa5fb1af688758259c32c141426d78923b9b77"
@@ -2218,14 +2158,6 @@ camelcase-keys@^4.0.0:
     map-obj "^2.0.0"
     quick-lru "^1.0.0"
 
-camelcase@^2.0.0:
-  version "2.1.1"
-  resolved "https://registry.yarnpkg.com/camelcase/-/camelcase-2.1.1.tgz#7c1d16d679a1bbe59ca02cacecfb011e201f5a1f"
-
-camelcase@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/camelcase/-/camelcase-3.0.0.tgz#32fc4b9fcdaf845fcdf7e73bb97cac2261f0ab0a"
-
 camelcase@^4.1.0:
   version "4.1.0"
   resolved "https://registry.yarnpkg.com/camelcase/-/camelcase-4.1.0.tgz#d545635be1e33c542649c69173e5de6acfae34dd"
@@ -2268,7 +2200,7 @@ ccount@^1.0.0:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/ccount/-/ccount-1.0.2.tgz#53b6a2f815bb77b9c2871f7b9a72c3a25f1d8e89"
 
-chalk@^1.0.0, chalk@^1.1.1, chalk@^1.1.3:
+chalk@^1.1.3:
   version "1.1.3"
   resolved "https://registry.yarnpkg.com/chalk/-/chalk-1.1.3.tgz#a8115c55e4a702fe4d150abd3872822a7e09fc98"
   dependencies:
@@ -2412,12 +2344,6 @@ clean-webpack-plugin@0.1.17:
   dependencies:
     rimraf "^2.6.1"
 
-cli-cursor@^1.0.1:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/cli-cursor/-/cli-cursor-1.0.2.tgz#64da3f7d56a54412e59794bd62dc35295e8f2987"
-  dependencies:
-    restore-cursor "^1.0.1"
-
 cli-cursor@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/cli-cursor/-/cli-cursor-2.1.0.tgz#b35dac376479facc3e94747d41d0d0f5238ffcb5"
@@ -2428,14 +2354,6 @@ cli-width@^2.0.0:
   version "2.2.0"
   resolved "https://registry.yarnpkg.com/cli-width/-/cli-width-2.2.0.tgz#ff19ede8a9a5e579324147b0c11f0fbcbabed639"
 
-cliui@^3.2.0:
-  version "3.2.0"
-  resolved "https://registry.yarnpkg.com/cliui/-/cliui-3.2.0.tgz#120601537a916d29940f934da3b48d585a39213d"
-  dependencies:
-    string-width "^1.0.1"
-    strip-ansi "^3.0.1"
-    wrap-ansi "^2.0.0"
-
 cliui@^4.0.0:
   version "4.1.0"
   resolved "https://registry.yarnpkg.com/cliui/-/cliui-4.1.0.tgz#348422dbe82d800b3022eef4f6ac10bf2e4d1b49"
@@ -2452,15 +2370,6 @@ cliui@^5.0.0:
     strip-ansi "^5.2.0"
     wrap-ansi "^5.1.0"
 
-clone-deep@^2.0.1:
-  version "2.0.2"
-  resolved "https://registry.yarnpkg.com/clone-deep/-/clone-deep-2.0.2.tgz#00db3a1e173656730d1188c3d6aced6d7ea97713"
-  dependencies:
-    for-own "^1.0.0"
-    is-plain-object "^2.0.4"
-    kind-of "^6.0.0"
-    shallow-clone "^1.0.0"
-
 clone-regexp@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/clone-regexp/-/clone-regexp-1.0.0.tgz#eae0a2413f55c0942f818c229fefce845d7f3b1c"
@@ -2559,14 +2468,6 @@ concat-map@0.0.1:
   version "0.0.1"
   resolved "https://registry.yarnpkg.com/concat-map/-/concat-map-0.0.1.tgz#d8a96bd77fd68df7793a73036a3ba0d5405d477b"
 
-concat-stream@^1.4.6:
-  version "1.6.1"
-  resolved "https://registry.yarnpkg.com/concat-stream/-/concat-stream-1.6.1.tgz#261b8f518301f1d834e36342b9fea095d2620a26"
-  dependencies:
-    inherits "^2.0.3"
-    readable-stream "^2.2.2"
-    typedarray "^0.0.6"
-
 concat-stream@^1.5.0:
   version "1.6.2"
   resolved "https://registry.yarnpkg.com/concat-stream/-/concat-stream-1.6.2.tgz#904bdf194cd3122fc675c77fc4ac3d4ff0fd1a34"
@@ -2722,13 +2623,6 @@ create-react-class@^15.5.1:
     loose-envify "^1.3.1"
     object-assign "^4.1.1"
 
-cross-spawn@^3.0.0:
-  version "3.0.1"
-  resolved "https://registry.yarnpkg.com/cross-spawn/-/cross-spawn-3.0.1.tgz#1256037ecb9f0c5f79e3d6ef135e30770184b982"
-  dependencies:
-    lru-cache "^4.0.1"
-    which "^1.2.9"
-
 cross-spawn@^6.0.0, cross-spawn@^6.0.5:
   version "6.0.5"
   resolved "https://registry.yarnpkg.com/cross-spawn/-/cross-spawn-6.0.5.tgz#4a5ec7c64dfae22c3a14124dbacdee846d80cbc4"
@@ -2985,7 +2879,7 @@ date-now@^0.1.4:
   version "0.1.4"
   resolved "https://registry.yarnpkg.com/date-now/-/date-now-0.1.4.tgz#eaf439fd4d4848ad74e5cc7dbef200672b9e345b"
 
-debug@2.6.9, debug@^2.1.1, debug@^2.1.2, debug@^2.2.0, debug@^2.3.3, debug@^2.6.8, debug@^2.6.9:
+debug@2.6.9, debug@^2.1.2, debug@^2.2.0, debug@^2.3.3, debug@^2.6.8, debug@^2.6.9:
   version "2.6.9"
   resolved "https://registry.yarnpkg.com/debug/-/debug-2.6.9.tgz#5d128515df134ff327e90a4c93f4e077a536341f"
   dependencies:
@@ -3010,7 +2904,7 @@ decamelize-keys@^1.0.0:
     decamelize "^1.1.0"
     map-obj "^1.0.0"
 
-decamelize@^1.1.0, decamelize@^1.1.1, decamelize@^1.1.2, decamelize@^1.2.0:
+decamelize@^1.1.0, decamelize@^1.2.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/decamelize/-/decamelize-1.2.0.tgz#f6534d15148269b20352e7bee26f501f9a191290"
 
@@ -3136,7 +3030,7 @@ dir-glob@^2.2.2:
   dependencies:
     path-type "^3.0.0"
 
-doctrine@1.5.0, doctrine@^1.2.2:
+doctrine@1.5.0:
   version "1.5.0"
   resolved "https://registry.yarnpkg.com/doctrine/-/doctrine-1.5.0.tgz#379dce730f6166f76cefa4e6707a159b02c5a6fa"
   dependencies:
@@ -3370,7 +3264,7 @@ es-to-primitive@^1.2.0:
     is-date-object "^1.0.1"
     is-symbol "^1.0.2"
 
-es5-ext@^0.10.14, es5-ext@^0.10.35, es5-ext@^0.10.9, es5-ext@~0.10.14:
+es5-ext@^0.10.35, es5-ext@^0.10.9, es5-ext@~0.10.14:
   version "0.10.41"
   resolved "https://registry.yarnpkg.com/es5-ext/-/es5-ext-0.10.41.tgz#bab3e982d750f0112f0cb9e6abed72c59eb33eb2"
   dependencies:
@@ -3378,7 +3272,7 @@ es5-ext@^0.10.14, es5-ext@^0.10.35, es5-ext@^0.10.9, es5-ext@~0.10.14:
     es6-symbol "~3.1.1"
     next-tick "1"
 
-es6-iterator@^2.0.1, es6-iterator@~2.0.1, es6-iterator@~2.0.3:
+es6-iterator@~2.0.3:
   version "2.0.3"
   resolved "https://registry.yarnpkg.com/es6-iterator/-/es6-iterator-2.0.3.tgz#a7de889141a05a94b0854403b2d0a0fbfa98f3b7"
   dependencies:
@@ -3386,43 +3280,13 @@ es6-iterator@^2.0.1, es6-iterator@~2.0.1, es6-iterator@~2.0.3:
     es5-ext "^0.10.35"
     es6-symbol "^3.1.1"
 
-es6-map@^0.1.3:
-  version "0.1.5"
-  resolved "https://registry.yarnpkg.com/es6-map/-/es6-map-0.1.5.tgz#9136e0503dcc06a301690f0bb14ff4e364e949f0"
-  dependencies:
-    d "1"
-    es5-ext "~0.10.14"
-    es6-iterator "~2.0.1"
-    es6-set "~0.1.5"
-    es6-symbol "~3.1.1"
-    event-emitter "~0.3.5"
-
-es6-set@~0.1.5:
-  version "0.1.5"
-  resolved "https://registry.yarnpkg.com/es6-set/-/es6-set-0.1.5.tgz#d2b3ec5d4d800ced818db538d28974db0a73ccb1"
-  dependencies:
-    d "1"
-    es5-ext "~0.10.14"
-    es6-iterator "~2.0.1"
-    es6-symbol "3.1.1"
-    event-emitter "~0.3.5"
-
-es6-symbol@3.1.1, es6-symbol@^3.1.1, es6-symbol@~3.1.1:
+es6-symbol@^3.1.1, es6-symbol@~3.1.1:
   version "3.1.1"
   resolved "https://registry.yarnpkg.com/es6-symbol/-/es6-symbol-3.1.1.tgz#bf00ef4fdab6ba1b46ecb7b629b4c7ed5715cc77"
   dependencies:
     d "1"
     es5-ext "~0.10.14"
 
-es6-weak-map@^2.0.1:
-  version "2.0.2"
-  resolved "https://registry.yarnpkg.com/es6-weak-map/-/es6-weak-map-2.0.2.tgz#5e3ab32251ffd1538a1f8e5ffa1357772f92d96f"
-  dependencies:
-    d "1"
-    es5-ext "^0.10.14"
-    es6-iterator "^2.0.1"
-    es6-symbol "^3.1.1"
-
 escape-html@~1.0.3:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/escape-html/-/escape-html-1.0.3.tgz#0258eae4d3d0c0974de1c169188ef0051d1d1988"
@@ -3443,15 +3307,6 @@ escodegen@^1.11.1:
   optionalDependencies:
     source-map "~0.6.1"
 
-escope@^3.6.0:
-  version "3.6.0"
-  resolved "https://registry.yarnpkg.com/escope/-/escope-3.6.0.tgz#e01975e812781a163a6dadfdd80398dc64c889c3"
-  dependencies:
-    es6-map "^0.1.3"
-    es6-weak-map "^2.0.1"
-    esrecurse "^4.1.0"
-    estraverse "^4.1.1"
-
 eslint-config-airbnb-base@^13.2.0:
   version "13.2.0"
   resolved "https://registry.yarnpkg.com/eslint-config-airbnb-base/-/eslint-config-airbnb-base-13.2.0.tgz#f6ea81459ff4dec2dda200c35f1d8f7419d57943"
@@ -3609,51 +3464,6 @@ eslint@6.4.0:
     text-table "^0.2.0"
     v8-compile-cache "^2.0.3"
 
-eslint@^2.7.0:
-  version "2.13.1"
-  resolved "https://registry.yarnpkg.com/eslint/-/eslint-2.13.1.tgz#e4cc8fa0f009fb829aaae23855a29360be1f6c11"
-  dependencies:
-    chalk "^1.1.3"
-    concat-stream "^1.4.6"
-    debug "^2.1.1"
-    doctrine "^1.2.2"
-    es6-map "^0.1.3"
-    escope "^3.6.0"
-    espree "^3.1.6"
-    estraverse "^4.2.0"
-    esutils "^2.0.2"
-    file-entry-cache "^1.1.1"
-    glob "^7.0.3"
-    globals "^9.2.0"
-    ignore "^3.1.2"
-    imurmurhash "^0.1.4"
-    inquirer "^0.12.0"
-    is-my-json-valid "^2.10.0"
-    is-resolvable "^1.0.0"
-    js-yaml "^3.5.1"
-    json-stable-stringify "^1.0.0"
-    levn "^0.3.0"
-    lodash "^4.0.0"
-    mkdirp "^0.5.0"
-    optionator "^0.8.1"
-    path-is-absolute "^1.0.0"
-    path-is-inside "^1.0.1"
-    pluralize "^1.2.1"
-    progress "^1.1.8"
-    require-uncached "^1.0.2"
-    shelljs "^0.6.0"
-    strip-json-comments "~1.0.1"
-    table "^3.7.8"
-    text-table "~0.2.0"
-    user-home "^2.0.0"
-
-espree@^3.1.6:
-  version "3.5.4"
-  resolved "https://registry.yarnpkg.com/espree/-/espree-3.5.4.tgz#b0f447187c8a8bed944b815a660bddf5deb5d1a7"
-  dependencies:
-    acorn "^5.5.0"
-    acorn-jsx "^3.0.0"
-
 espree@^6.1.1:
   version "6.1.1"
   resolved "https://registry.yarnpkg.com/espree/-/espree-6.1.1.tgz#7f80e5f7257fc47db450022d723e356daeb1e5de"
@@ -3696,13 +3506,6 @@ etag@~1.8.1:
   version "1.8.1"
   resolved "https://registry.yarnpkg.com/etag/-/etag-1.8.1.tgz#41ae2eeb65efa62268aebfea83ac7d79299b0887"
 
-event-emitter@~0.3.5:
-  version "0.3.5"
-  resolved "https://registry.yarnpkg.com/event-emitter/-/event-emitter-0.3.5.tgz#df8c69eef1647923c7157b9ce83840610b02cc39"
-  dependencies:
-    d "1"
-    es5-ext "~0.10.14"
-
 eventemitter3@1.x.x:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/eventemitter3/-/eventemitter3-1.2.0.tgz#1c86991d816ad1e504750e73874224ecf3bec508"
@@ -3761,10 +3564,6 @@ execall@^2.0.0:
   dependencies:
     clone-regexp "^2.1.0"
 
-exit-hook@^1.0.0:
-  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/exit-hook/-/exit-hook-1.1.1.tgz#f05ca233b48c05d54fff07765df8507e95c02ff8"
-
 exit@^0.1.2:
   version "0.1.2"
   resolved "https://registry.yarnpkg.com/exit/-/exit-0.1.2.tgz#0632638f8d877cc82107d30a0fff1a17cba1cd0c"
@@ -3953,26 +3752,12 @@ fbjs@^0.8.16, fbjs@^0.8.9:
     setimmediate "^1.0.5"
     ua-parser-js "^0.7.9"
 
-figures@^1.3.5:
-  version "1.7.0"
-  resolved "https://registry.yarnpkg.com/figures/-/figures-1.7.0.tgz#cbe1e3affcf1cd44b80cadfed28dc793a9701d2e"
-  dependencies:
-    escape-string-regexp "^1.0.5"
-    object-assign "^4.1.0"
-
 figures@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/figures/-/figures-2.0.0.tgz#3ab1a2d2a62c8bfb431a0c94cb797a2fce27c962"
   dependencies:
     escape-string-regexp "^1.0.5"
 
-file-entry-cache@^1.1.1:
-  version "1.3.1"
-  resolved "https://registry.yarnpkg.com/file-entry-cache/-/file-entry-cache-1.3.1.tgz#44c61ea607ae4be9c1402f41f44270cbfe334ff8"
-  dependencies:
-    flat-cache "^1.2.1"
-    object-assign "^4.0.1"
-
 file-entry-cache@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/file-entry-cache/-/file-entry-cache-2.0.0.tgz#c392990c3e684783d838b8c84a45d8a048458361"
@@ -4137,10 +3922,6 @@ flush-write-stream@^1.0.0:
     inherits "^2.0.3"
     readable-stream "^2.3.6"
 
-for-in@^0.1.3:
-  version "0.1.8"
-  resolved "https://registry.yarnpkg.com/for-in/-/for-in-0.1.8.tgz#d8773908e31256109952b1fdb9b3fa867d2775e1"
-
 for-in@^1.0.1, for-in@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/for-in/-/for-in-1.0.2.tgz#81068d295a8142ec0ac726c6e2200c30fb6d5e80"
@@ -4151,12 +3932,6 @@ for-own@^0.1.4:
   dependencies:
     for-in "^1.0.1"
 
-for-own@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/for-own/-/for-own-1.0.0.tgz#c63332f415cedc4b04dbfe70cf836494c53cb44b"
-  dependencies:
-    for-in "^1.0.1"
-
 foreach@^2.0.5:
   version "2.0.5"
   resolved "https://registry.yarnpkg.com/foreach/-/foreach-2.0.5.tgz#0bee005018aeb260d0a3af3ae658dd0136ec1b99"
@@ -4194,20 +3969,6 @@ from2@^2.1.0:
     inherits "^2.0.1"
     readable-stream "^2.0.0"
 
-front-matter@2.1.2:
-  version "2.1.2"
-  resolved "https://registry.yarnpkg.com/front-matter/-/front-matter-2.1.2.tgz#f75983b9f2f413be658c93dfd7bd8ce4078f5cdb"
-  dependencies:
-    js-yaml "^3.4.6"
-
-fs-extra@^3.0.1:
-  version "3.0.1"
-  resolved "https://registry.yarnpkg.com/fs-extra/-/fs-extra-3.0.1.tgz#3794f378c58b342ea7dbbb23095109c4b3b62291"
-  dependencies:
-    graceful-fs "^4.1.2"
-    jsonfile "^3.0.0"
-    universalify "^0.1.0"
-
 fs-minipass@^1.2.5:
   version "1.2.5"
   resolved "https://registry.yarnpkg.com/fs-minipass/-/fs-minipass-1.2.5.tgz#06c277218454ec288df77ada54a03b8702aacb9d"
@@ -4246,15 +4007,6 @@ fsevents@^1.2.9:
     nan "^2.12.1"
     node-pre-gyp "^0.12.0"
 
-fstream@^1.0.0, fstream@^1.0.2:
-  version "1.0.11"
-  resolved "https://registry.yarnpkg.com/fstream/-/fstream-1.0.11.tgz#5c1fb1f117477114f0632a0eb4b71b3cb0fd3171"
-  dependencies:
-    graceful-fs "^4.1.2"
-    inherits "~2.0.0"
-    mkdirp ">=0.5 0"
-    rimraf "2"
-
 function-bind@^1.0.2, function-bind@^1.1.1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/function-bind/-/function-bind-1.1.1.tgz#a56899d3ea3c9bab874bb9773b7c5ede92f4895d"
@@ -4276,22 +4028,6 @@ gauge@~2.7.3:
     strip-ansi "^3.0.1"
     wide-align "^1.1.0"
 
-gaze@^1.0.0:
-  version "1.1.2"
-  resolved "https://registry.yarnpkg.com/gaze/-/gaze-1.1.2.tgz#847224677adb8870d679257ed3388fdb61e40105"
-  dependencies:
-    globule "^1.0.0"
-
-generate-function@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/generate-function/-/generate-function-2.0.0.tgz#6858fe7c0969b7d4e9093337647ac79f60dfbe74"
-
-generate-object-property@^1.1.0:
-  version "1.2.0"
-  resolved "https://registry.yarnpkg.com/generate-object-property/-/generate-object-property-1.2.0.tgz#9c0e1c40308ce804f4783618b937fa88f99d50d0"
-  dependencies:
-    is-property "^1.0.0"
-
 get-caller-file@^1.0.1:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/get-caller-file/-/get-caller-file-1.0.2.tgz#f702e63127e7e231c160a80c1554acb70d5047e5"
@@ -4300,10 +4036,6 @@ get-caller-file@^2.0.1:
   version "2.0.5"
   resolved "https://registry.yarnpkg.com/get-caller-file/-/get-caller-file-2.0.5.tgz#4f94412a82db32f36e3b0b9741f8a97feb031f7e"
 
-get-stdin@^4.0.1:
-  version "4.0.1"
-  resolved "https://registry.yarnpkg.com/get-stdin/-/get-stdin-4.0.1.tgz#b968c6b0a04384324902e8bf1a5df32579a450fe"
-
 get-stdin@^6.0.0:
   version "6.0.0"
   resolved "https://registry.yarnpkg.com/get-stdin/-/get-stdin-6.0.0.tgz#9e09bf712b360ab9225e812048f71fde9c89657b"
@@ -4377,7 +4109,7 @@ glob-to-regexp@^0.3.0:
   version "0.3.0"
   resolved "https://registry.yarnpkg.com/glob-to-regexp/-/glob-to-regexp-0.3.0.tgz#8c5a1494d2066c570cc3bfe4496175acc4d502ab"
 
-glob@^7.0.0, glob@^7.0.3, glob@^7.0.5, glob@^7.1.1, glob@^7.1.2, glob@~7.1.1:
+glob@^7.0.0, glob@^7.0.3, glob@^7.0.5, glob@^7.1.1, glob@^7.1.2:
   version "7.1.2"
   resolved "https://registry.yarnpkg.com/glob/-/glob-7.1.2.tgz#c19c9df9a028702d678612384a6552404c636d15"
   dependencies:
@@ -4439,7 +4171,7 @@ globals@^11.7.0:
   version "11.12.0"
   resolved "https://registry.yarnpkg.com/globals/-/globals-11.12.0.tgz#ab8795338868a0babd8525758018c2a7eb95c42e"
 
-globals@^9.18.0, globals@^9.2.0:
+globals@^9.18.0:
   version "9.18.0"
   resolved "https://registry.yarnpkg.com/globals/-/globals-9.18.0.tgz#aa3896b3e69b487f17e31ed2143d69a8e30c2d8a"
 
@@ -4483,20 +4215,6 @@ globjoin@^0.1.4:
   version "0.1.4"
   resolved "https://registry.yarnpkg.com/globjoin/-/globjoin-0.1.4.tgz#2f4494ac8919e3767c5cbb691e9f463324285d43"
 
-globule@^1.0.0:
-  version "1.2.0"
-  resolved "https://registry.yarnpkg.com/globule/-/globule-1.2.0.tgz#1dc49c6822dd9e8a2fa00ba2a295006e8664bd09"
-  dependencies:
-    glob "~7.1.1"
-    lodash "~4.17.4"
-    minimatch "~3.0.2"
-
-gonzales-pe-sl@^4.2.3:
-  version "4.2.3"
-  resolved "https://registry.yarnpkg.com/gonzales-pe-sl/-/gonzales-pe-sl-4.2.3.tgz#6a868bc380645f141feeb042c6f97fcc71b59fe6"
-  dependencies:
-    minimist "1.1.x"
-
 gonzales-pe@^4.2.3:
   version "4.2.3"
   resolved "https://registry.yarnpkg.com/gonzales-pe/-/gonzales-pe-4.2.3.tgz#41091703625433285e0aee3aa47829fc1fbeb6f2"
@@ -4510,7 +4228,7 @@ gonzales-pe@^4.2.4:
   dependencies:
     minimist "1.1.x"
 
-graceful-fs@^4.1.11, graceful-fs@^4.1.2, graceful-fs@^4.1.6:
+graceful-fs@^4.1.11, graceful-fs@^4.1.2:
   version "4.1.11"
   resolved "https://registry.yarnpkg.com/graceful-fs/-/graceful-fs-4.1.11.tgz#0e8bdfe4d1ddb8854d64e04ea7c00e2a026e5658"
 
@@ -4830,7 +4548,7 @@ ignore-walk@^3.0.1:
   dependencies:
     minimatch "^3.0.4"
 
-ignore@^3.1.2, ignore@^3.3.3, ignore@^3.3.5:
+ignore@^3.3.3, ignore@^3.3.5:
   version "3.3.7"
   resolved "https://registry.yarnpkg.com/ignore/-/ignore-3.3.7.tgz#612289bfb3c220e186a58118618d5be8c1bab021"
 
@@ -4899,16 +4617,6 @@ imurmurhash@^0.1.4:
   version "0.1.4"
   resolved "https://registry.yarnpkg.com/imurmurhash/-/imurmurhash-0.1.4.tgz#9218b9b2b928a238b13dc4fb6b6d576f231453ea"
 
-in-publish@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/in-publish/-/in-publish-2.0.0.tgz#e20ff5e3a2afc2690320b6dc552682a9c7fadf51"
-
-indent-string@^2.1.0:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/indent-string/-/indent-string-2.1.0.tgz#8e2d48348742121b4a8218b7a137e9a52049dc80"
-  dependencies:
-    repeating "^2.0.0"
-
 indent-string@^3.0.0:
   version "3.2.0"
   resolved "https://registry.yarnpkg.com/indent-string/-/indent-string-3.2.0.tgz#4a5fd6d27cc332f37e5419a504dbb837105c9289"
@@ -4928,7 +4636,7 @@ inflight@^1.0.4:
     once "^1.3.0"
     wrappy "1"
 
-inherits@2, inherits@2.0.3, inherits@^2.0.1, inherits@^2.0.3, inherits@~2.0.0, inherits@~2.0.1, inherits@~2.0.3:
+inherits@2, inherits@2.0.3, inherits@^2.0.1, inherits@^2.0.3, inherits@~2.0.1, inherits@~2.0.3:
   version "2.0.3"
   resolved "https://registry.yarnpkg.com/inherits/-/inherits-2.0.3.tgz#633c2c83e3da42a502f52466022480f4208261de"
 
@@ -4944,24 +4652,6 @@ ini@~1.3.0:
   version "1.3.4"
   resolved "https://registry.yarnpkg.com/ini/-/ini-1.3.4.tgz#0537cb79daf59b59a1a517dff706c86ec039162e"
 
-inquirer@^0.12.0:
-  version "0.12.0"
-  resolved "https://registry.yarnpkg.com/inquirer/-/inquirer-0.12.0.tgz#1ef2bfd63504df0bc75785fff8c2c41df12f077e"
-  dependencies:
-    ansi-escapes "^1.1.0"
-    ansi-regex "^2.0.0"
-    chalk "^1.0.0"
-    cli-cursor "^1.0.1"
-    cli-width "^2.0.0"
-    figures "^1.3.5"
-    lodash "^4.3.0"
-    readline2 "^1.0.1"
-    run-async "^0.1.0"
-    rx-lite "^3.1.2"
-    string-width "^1.0.1"
-    strip-ansi "^3.0.0"
-    through "^2.3.6"
-
 inquirer@^6.4.1:
   version "6.5.0"
   resolved "https://registry.yarnpkg.com/inquirer/-/inquirer-6.5.0.tgz#2303317efc9a4ea7ec2e2df6f86569b734accf42"
@@ -5000,10 +4690,6 @@ invariant@^2.2.1, invariant@^2.2.4:
   dependencies:
     loose-envify "^1.0.0"
 
-invert-kv@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/invert-kv/-/invert-kv-1.0.0.tgz#104a8e4aaca6d3d8cd157a8ef8bfab2d7a3ffdb6"
-
 invert-kv@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/invert-kv/-/invert-kv-2.0.0.tgz#7393f5afa59ec9ff5f67a27620d11c226e3eec02"
@@ -5150,12 +4836,6 @@ is-extglob@^2.1.0, is-extglob@^2.1.1:
   version "2.1.1"
   resolved "https://registry.yarnpkg.com/is-extglob/-/is-extglob-2.1.1.tgz#a88c02535791f02ed37c76a1b9ea9773c833f8c2"
 
-is-finite@^1.0.0:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/is-finite/-/is-finite-1.0.2.tgz#cc6677695602be550ef11e8b4aa6305342b6d0aa"
-  dependencies:
-    number-is-nan "^1.0.0"
-
 is-fullwidth-code-point@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/is-fullwidth-code-point/-/is-fullwidth-code-point-1.0.0.tgz#ef9e31386f031a7f0d643af82fde50c457ef00cb"
@@ -5202,20 +4882,6 @@ is-hexadecimal@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/is-hexadecimal/-/is-hexadecimal-1.0.1.tgz#6e084bbc92061fbb0971ec58b6ce6d404e24da69"
 
-is-my-ip-valid@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/is-my-ip-valid/-/is-my-ip-valid-1.0.0.tgz#7b351b8e8edd4d3995d4d066680e664d94696824"
-
-is-my-json-valid@^2.10.0:
-  version "2.17.2"
-  resolved "https://registry.yarnpkg.com/is-my-json-valid/-/is-my-json-valid-2.17.2.tgz#6b2103a288e94ef3de5cf15d29dd85fc4b78d65c"
-  dependencies:
-    generate-function "^2.0.0"
-    generate-object-property "^1.1.0"
-    is-my-ip-valid "^1.0.0"
-    jsonpointer "^4.0.0"
-    xtend "^4.0.0"
-
 is-number@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/is-number/-/is-number-2.1.0.tgz#01fcbbb393463a548f2f466cce16dece49db908f"
@@ -5284,10 +4950,6 @@ is-promise@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/is-promise/-/is-promise-2.1.0.tgz#79a2a9ece7f096e80f36d2b2f3bc16c1ff4bf3fa"
 
-is-property@^1.0.0:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/is-property/-/is-property-1.0.2.tgz#57fe1c4e48474edd65b09911f26b1cd4095dda84"
-
 is-regex@^1.0.4:
   version "1.0.4"
   resolved "https://registry.yarnpkg.com/is-regex/-/is-regex-1.0.4.tgz#5517489b547091b0930e095654ced25ee97e9491"
@@ -5302,12 +4964,6 @@ is-regexp@^2.0.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/is-regexp/-/is-regexp-2.1.0.tgz#cd734a56864e23b956bf4e7c66c396a4c0b22c2d"
 
-is-resolvable@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/is-resolvable/-/is-resolvable-1.0.0.tgz#8df57c61ea2e3c501408d100fb013cf8d6e0cc62"
-  dependencies:
-    tryit "^1.0.1"
-
 is-stream@^1.0.1, is-stream@^1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/is-stream/-/is-stream-1.1.0.tgz#12d4a3dd4e68e0b79ceb8dbc84173ae80d91ca44"
@@ -5336,10 +4992,6 @@ is-typedarray@^1.0.0, is-typedarray@~1.0.0:
   resolved "https://registry.yarnpkg.com/is-typedarray/-/is-typedarray-1.0.0.tgz#e479c80858df0c1b11ddda6940f96011fcda4a9a"
   integrity sha1-5HnICFjfDBsR3dppQPlgEfzaSpo=
 
-is-utf8@^0.2.0:
-  version "0.2.1"
-  resolved "https://registry.yarnpkg.com/is-utf8/-/is-utf8-0.2.1.tgz#4b0da1442104d1b336340e80797e865cf39f7d72"
-
 is-what@^3.3.1:
   version "3.3.1"
   resolved "https://registry.yarnpkg.com/is-what/-/is-what-3.3.1.tgz#79502181f40226e2d8c09226999db90ef7c1bcbe"
@@ -5787,7 +5439,7 @@ jest@25.0.0:
     import-local "^3.0.2"
     jest-cli "^25.0.0"
 
-js-base64@^2.1.8, js-base64@^2.1.9:
+js-base64@^2.1.9:
   version "2.3.2"
   resolved "https://registry.yarnpkg.com/js-base64/-/js-base64-2.3.2.tgz#a79a923666372b580f8e27f51845c6f7e8fbfbaf"
 
@@ -5810,7 +5462,7 @@ js-yaml@^3.13.1:
     argparse "^1.0.7"
     esprima "^4.0.0"
 
-js-yaml@^3.4.6, js-yaml@^3.5.1, js-yaml@^3.5.4, js-yaml@^3.9.0:
+js-yaml@^3.9.0:
   version "3.11.0"
   resolved "https://registry.yarnpkg.com/js-yaml/-/js-yaml-3.11.0.tgz#597c1a8bd57152f26d622ce4117851a51f5ebaef"
   dependencies:
@@ -5885,7 +5537,7 @@ json-stable-stringify-without-jsonify@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/json-stable-stringify-without-jsonify/-/json-stable-stringify-without-jsonify-1.0.1.tgz#9db7b59496ad3f3cfef30a75142d2d930ad72651"
 
-json-stable-stringify@1.0.1, json-stable-stringify@^1.0.0, json-stable-stringify@^1.0.1:
+json-stable-stringify@1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/json-stable-stringify/-/json-stable-stringify-1.0.1.tgz#9a759d39c5f2ff503fd5300646ed445f88c4f9af"
   dependencies:
@@ -5911,20 +5563,10 @@ json5@^2.1.0:
   dependencies:
     minimist "^1.2.0"
 
-jsonfile@^3.0.0:
-  version "3.0.1"
-  resolved "https://registry.yarnpkg.com/jsonfile/-/jsonfile-3.0.1.tgz#a5ecc6f65f53f662c4415c7675a0331d0992ec66"
-  optionalDependencies:
-    graceful-fs "^4.1.6"
-
 jsonify@~0.0.0:
   version "0.0.0"
   resolved "https://registry.yarnpkg.com/jsonify/-/jsonify-0.0.0.tgz#2c74b6ee41d93ca51b7b5aaee8f503631d252a73"
 
-jsonpointer@^4.0.0:
-  version "4.0.1"
-  resolved "https://registry.yarnpkg.com/jsonpointer/-/jsonpointer-4.0.1.tgz#4fd92cb34e0e9db3c89c8622ecf51f9b978c6cb9"
-
 jsprim@^1.2.2:
   version "1.4.1"
   resolved "https://registry.yarnpkg.com/jsprim/-/jsprim-1.4.1.tgz#313e66bc1e5cc06e438bc1b7499c2e5c56acb6a2"
@@ -5976,20 +5618,10 @@ known-css-properties@^0.15.0:
   resolved "https://registry.yarnpkg.com/known-css-properties/-/known-css-properties-0.15.0.tgz#5aa14a98b5a1652448aad44a1c67e867e4e7d88c"
   integrity sha512-TS0RCcQfHYsA+59uIHhnsA71NBkpILbqi0W+hde4R5FtESdzur0tCJFoko/1Pbhx+8rmdUc0R1VE4ixnnD+9xw==
 
-known-css-properties@^0.3.0:
-  version "0.3.0"
-  resolved "https://registry.yarnpkg.com/known-css-properties/-/known-css-properties-0.3.0.tgz#a3d135bbfc60ee8c6eacf2f7e7e6f2d4755e49a4"
-
 known-css-properties@^0.6.0:
   version "0.6.1"
   resolved "https://registry.yarnpkg.com/known-css-properties/-/known-css-properties-0.6.1.tgz#31b5123ad03d8d1a3f36bd4155459c981173478b"
 
-lcid@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/lcid/-/lcid-1.0.0.tgz#308accafa0bc483a3867b4b6f2b9506251d1b835"
-  dependencies:
-    invert-kv "^1.0.0"
-
 lcid@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/lcid/-/lcid-2.0.0.tgz#6ef5d2df60e52f82eb228a4c373e8d1f397253cf"
@@ -6011,16 +5643,6 @@ levn@^0.3.0, levn@~0.3.0:
     prelude-ls "~1.1.2"
     type-check "~0.3.2"
 
-load-json-file@^1.0.0:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/load-json-file/-/load-json-file-1.1.0.tgz#956905708d58b4bab4c2261b04f59f31c99374c0"
-  dependencies:
-    graceful-fs "^4.1.2"
-    parse-json "^2.2.0"
-    pify "^2.0.0"
-    pinkie-promise "^2.0.0"
-    strip-bom "^2.0.0"
-
 load-json-file@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/load-json-file/-/load-json-file-2.0.0.tgz#7947e42149af80d696cbf797bcaabcfe1fe29ca8"
@@ -6060,7 +5682,7 @@ loader-utils@^0.2.16:
     json5 "^0.5.0"
     object-assign "^4.0.1"
 
-loader-utils@^1.0.1, loader-utils@^1.0.2, loader-utils@~1.1.0:
+loader-utils@^1.0.2, loader-utils@~1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/loader-utils/-/loader-utils-1.1.0.tgz#c98aef488bcceda2ffb5e2de646d6a754429f5cd"
   dependencies:
@@ -6101,10 +5723,6 @@ lodash._getnative@^3.0.0:
   version "3.9.1"
   resolved "https://registry.yarnpkg.com/lodash._getnative/-/lodash._getnative-3.9.1.tgz#570bc7dede46d61cdcde687d65d3eecbaa3aaff5"
 
-lodash.capitalize@^4.1.0:
-  version "4.2.1"
-  resolved "https://registry.yarnpkg.com/lodash.capitalize/-/lodash.capitalize-4.2.1.tgz#f826c9b4e2a8511d84e3aca29db05e1a4f3b72a9"
-
 lodash.isarguments@^3.0.0:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/lodash.isarguments/-/lodash.isarguments-3.1.0.tgz#2f573d85c6a24289ff00663b491c1d338ff3458a"
@@ -6113,10 +5731,6 @@ lodash.isarray@^3.0.0:
   version "3.0.4"
   resolved "https://registry.yarnpkg.com/lodash.isarray/-/lodash.isarray-3.0.4.tgz#79e4eb88c36a8122af86f844aa9bcd851b5fbb55"
 
-lodash.kebabcase@^4.0.0:
-  version "4.1.1"
-  resolved "https://registry.yarnpkg.com/lodash.kebabcase/-/lodash.kebabcase-4.1.1.tgz#8489b1cb0d29ff88195cceca448ff6d6cc295c36"
-
 lodash.keys@^3.1.2:
   version "3.1.2"
   resolved "https://registry.yarnpkg.com/lodash.keys/-/lodash.keys-3.1.2.tgz#4dbc0472b156be50a0b286855d1bd0b0c656098a"
@@ -6129,22 +5743,18 @@ lodash.sortby@^4.7.0:
   version "4.7.0"
   resolved "https://registry.yarnpkg.com/lodash.sortby/-/lodash.sortby-4.7.0.tgz#edd14c824e2cc9c1e0b0a1b42bb5210516a42438"
 
-lodash.tail@^4.1.1:
-  version "4.1.1"
-  resolved "https://registry.yarnpkg.com/lodash.tail/-/lodash.tail-4.1.1.tgz#d2333a36d9e7717c8ad2f7cacafec7c32b444664"
-
 lodash@4.17.15, lodash@^4.17.12, lodash@^4.17.13, lodash@^4.17.14:
   version "4.17.15"
   resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.15.tgz#b447f6670a0455bbfeedd11392eff330ea097548"
 
-lodash@^4.0.0, lodash@^4.17.3, lodash@^4.17.4, lodash@^4.2.0, lodash@^4.3.0, lodash@~4.17.4:
-  version "4.17.4"
-  resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.4.tgz#78203a4d1c328ae1d86dca6460e369b57f4055ae"
-
 lodash@^4.17.10, lodash@^4.17.11, lodash@^4.17.5:
   version "4.17.11"
   resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.11.tgz#b39ea6229ef607ecd89e2c8df12536891cac9b8d"
 
+lodash@^4.17.3, lodash@^4.17.4, lodash@^4.2.0:
+  version "4.17.4"
+  resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.4.tgz#78203a4d1c328ae1d86dca6460e369b57f4055ae"
+
 log-symbols@^2.0.0, log-symbols@^2.1.0, log-symbols@^2.2.0:
   version "2.2.0"
   resolved "https://registry.yarnpkg.com/log-symbols/-/log-symbols-2.2.0.tgz#5740e1c5d6f0dfda4ad9323b5332107ef6b4c40a"
@@ -6191,13 +5801,6 @@ lower-case@^1.1.1:
   version "1.1.4"
   resolved "https://registry.yarnpkg.com/lower-case/-/lower-case-1.1.4.tgz#9a2cabd1b9e8e0ae993a4bf7d5875c39c42e8eac"
 
-lru-cache@^4.0.1:
-  version "4.1.1"
-  resolved "https://registry.yarnpkg.com/lru-cache/-/lru-cache-4.1.1.tgz#622e32e82488b49279114a4f9ecf45e7cd6bba55"
-  dependencies:
-    pseudomap "^1.0.2"
-    yallist "^2.1.2"
-
 lru-cache@^4.1.1:
   version "4.1.5"
   resolved "https://registry.yarnpkg.com/lru-cache/-/lru-cache-4.1.5.tgz#8bbe50ea85bed59bc9e33dcab8235ee9bcf443cd"
@@ -6227,7 +5830,7 @@ map-cache@^0.2.2:
   version "0.2.2"
   resolved "https://registry.yarnpkg.com/map-cache/-/map-cache-0.2.2.tgz#c32abd0bd6525d9b051645bb4f26ac5dc98a0dbf"
 
-map-obj@^1.0.0, map-obj@^1.0.1:
+map-obj@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/map-obj/-/map-obj-1.0.1.tgz#d933ceb9205d82bdcf4886f6742bdc2b4dea146d"
 
@@ -6294,21 +5897,6 @@ memory-fs@^0.4.0, memory-fs@~0.4.1:
     errno "^0.1.3"
     readable-stream "^2.0.1"
 
-meow@^3.7.0:
-  version "3.7.0"
-  resolved "https://registry.yarnpkg.com/meow/-/meow-3.7.0.tgz#72cb668b425228290abbfa856892587308a801fb"
-  dependencies:
-    camelcase-keys "^2.0.0"
-    decamelize "^1.1.2"
-    loud-rejection "^1.0.0"
-    map-obj "^1.0.1"
-    minimist "^1.1.3"
-    normalize-package-data "^2.3.4"
-    object-assign "^4.0.1"
-    read-pkg-up "^1.0.1"
-    redent "^1.0.0"
-    trim-newlines "^1.0.0"
-
 meow@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/meow/-/meow-4.0.0.tgz#fd5855dd008db5b92c552082db1c307cba20b29d"
@@ -6359,10 +5947,6 @@ merge2@^1.2.3:
   version "1.2.3"
   resolved "https://registry.yarnpkg.com/merge2/-/merge2-1.2.3.tgz#7ee99dbd69bb6481689253f018488a1b902b0ed5"
 
-merge@^1.2.0:
-  version "1.2.0"
-  resolved "https://registry.yarnpkg.com/merge/-/merge-1.2.0.tgz#7531e39d4949c281a66b8c5a6e0265e8b05894da"
-
 methods@~1.1.2:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/methods/-/methods-1.1.2.tgz#5529a4d67654134edcc5266656835b0f851afcee"
@@ -6466,7 +6050,7 @@ minimalistic-crypto-utils@^1.0.0, minimalistic-crypto-utils@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/minimalistic-crypto-utils/-/minimalistic-crypto-utils-1.0.1.tgz#f6c00c1c0b082246e5c4d99dfb8c7c083b2b582a"
 
-minimatch@^3.0.4, minimatch@~3.0.2:
+minimatch@^3.0.4:
   version "3.0.4"
   resolved "https://registry.yarnpkg.com/minimatch/-/minimatch-3.0.4.tgz#5166e286457f03306064be5497e8dbb0c3d32083"
   dependencies:
@@ -6530,14 +6114,7 @@ mixin-deep@^1.2.0:
     for-in "^1.0.2"
     is-extendable "^1.0.1"
 
-mixin-object@^2.0.1:
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/mixin-object/-/mixin-object-2.0.1.tgz#4fb949441dab182540f1fe035ba60e1947a5e57e"
-  dependencies:
-    for-in "^0.1.3"
-    is-extendable "^0.1.1"
-
-mkdirp@0.5.1, "mkdirp@>=0.5 0", mkdirp@^0.5.0, mkdirp@^0.5.1, mkdirp@~0.5.0:
+mkdirp@0.5.1, mkdirp@^0.5.0, mkdirp@^0.5.1, mkdirp@~0.5.0:
   version "0.5.1"
   resolved "https://registry.yarnpkg.com/mkdirp/-/mkdirp-0.5.1.tgz#30057438eac6cf7f8c4767f38648d6697d75c903"
   dependencies:
@@ -6570,15 +6147,11 @@ ms@^2.1.1:
   version "2.1.1"
   resolved "https://registry.yarnpkg.com/ms/-/ms-2.1.1.tgz#30a5864eb3ebb0a66f2ebe6d727af06a09d86e0a"
 
-mute-stream@0.0.5:
-  version "0.0.5"
-  resolved "https://registry.yarnpkg.com/mute-stream/-/mute-stream-0.0.5.tgz#8fbfabb0a98a253d3184331f9e8deb7372fac6c0"
-
 mute-stream@0.0.7:
   version "0.0.7"
   resolved "https://registry.yarnpkg.com/mute-stream/-/mute-stream-0.0.7.tgz#3075ce93bc21b8fab43e1bc4da7e8115ed1e7bab"
 
-nan@^2.12.1, nan@^2.13.2:
+nan@^2.12.1:
   version "2.14.0"
   resolved "https://registry.yarnpkg.com/nan/-/nan-2.14.0.tgz#7818f722027b2459a86f0295d434d1fc2336c52c"
   integrity sha512-INOFj37C7k3AfaNTtX8RhsTw7qRy7eLET14cROi9+5HAVbbHuIWUHEauBv5qT4Av2tWasiTY1Jw6puUNqRJXQg==
@@ -6656,23 +6229,6 @@ node-fetch@^1.0.1:
     encoding "^0.1.11"
     is-stream "^1.0.1"
 
-node-gyp@^3.8.0:
-  version "3.8.0"
-  resolved "https://registry.yarnpkg.com/node-gyp/-/node-gyp-3.8.0.tgz#540304261c330e80d0d5edce253a68cb3964218c"
-  dependencies:
-    fstream "^1.0.0"
-    glob "^7.0.3"
-    graceful-fs "^4.1.2"
-    mkdirp "^0.5.0"
-    nopt "2 || 3"
-    npmlog "0 || 1 || 2 || 3 || 4"
-    osenv "0"
-    request "^2.87.0"
-    rimraf "2"
-    semver "~5.3.0"
-    tar "^2.0.0"
-    which "1"
-
 node-int64@^0.4.0:
   version "0.4.0"
   resolved "https://registry.yarnpkg.com/node-int64/-/node-int64-0.4.0.tgz#87a9065cdb355d3182d8f94ce11188b825c68a3b"
@@ -6763,34 +6319,6 @@ node-releases@^1.1.25:
   dependencies:
     semver "^5.3.0"
 
-node-sass@^4.12.0:
-  version "4.12.0"
-  resolved "https://registry.yarnpkg.com/node-sass/-/node-sass-4.12.0.tgz#0914f531932380114a30cc5fa4fa63233a25f017"
-  dependencies:
-    async-foreach "^0.1.3"
-    chalk "^1.1.1"
-    cross-spawn "^3.0.0"
-    gaze "^1.0.0"
-    get-stdin "^4.0.1"
-    glob "^7.0.3"
-    in-publish "^2.0.0"
-    lodash "^4.17.11"
-    meow "^3.7.0"
-    mkdirp "^0.5.1"
-    nan "^2.13.2"
-    node-gyp "^3.8.0"
-    npmlog "^4.0.0"
-    request "^2.88.0"
-    sass-graph "^2.2.4"
-    stdout-stream "^1.4.0"
-    "true-case-path" "^1.0.2"
-
-"nopt@2 || 3":
-  version "3.0.6"
-  resolved "https://registry.yarnpkg.com/nopt/-/nopt-3.0.6.tgz#c6465dbf08abcd4db359317f79ac68a646b28ff9"
-  dependencies:
-    abbrev "1"
-
 nopt@^4.0.1:
   version "4.0.1"
   resolved "https://registry.yarnpkg.com/nopt/-/nopt-4.0.1.tgz#d0d4685afd5415193c8c7505602d0d17cd64474d"
@@ -6849,7 +6377,7 @@ npm-run-path@^3.0.0:
   dependencies:
     path-key "^3.0.0"
 
-"npmlog@0 || 1 || 2 || 3 || 4", npmlog@^4.0.0, npmlog@^4.0.2:
+npmlog@^4.0.2:
   version "4.1.2"
   resolved "https://registry.yarnpkg.com/npmlog/-/npmlog-4.1.2.tgz#08a7f2a8bf734604779a9efa4ad5cc717abb954b"
   dependencies:
@@ -6980,10 +6508,6 @@ once@^1.3.0, once@^1.3.1, once@^1.4.0:
   dependencies:
     wrappy "1"
 
-onetime@^1.0.0:
-  version "1.1.0"
-  resolved "http://registry.npmjs.org/onetime/-/onetime-1.1.0.tgz#a1f7838f8314c516f05ecefcbc4ccfe04b4ed789"
-
 onetime@^2.0.0:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/onetime/-/onetime-2.0.1.tgz#067428230fd67443b2794b22bba528b6867962d4"
@@ -7023,12 +6547,6 @@ os-homedir@^1.0.0:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/os-homedir/-/os-homedir-1.0.2.tgz#ffbc4988336e0e833de0c168c7ef152121aa7fb3"
 
-os-locale@^1.4.0:
-  version "1.4.0"
-  resolved "https://registry.yarnpkg.com/os-locale/-/os-locale-1.4.0.tgz#20f9f17ae29ed345e8bde583b13d2009803c14d9"
-  dependencies:
-    lcid "^1.0.0"
-
 os-locale@^3.0.0:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/os-locale/-/os-locale-3.1.0.tgz#a802a6ee17f24c10483ab9935719cef4ed16bf1a"
@@ -7041,7 +6559,7 @@ os-tmpdir@^1.0.0, os-tmpdir@~1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/os-tmpdir/-/os-tmpdir-1.0.2.tgz#bbe67406c79aa85c5cfec766fe5734555dfa1274"
 
-osenv@0, osenv@^0.1.4:
+osenv@^0.1.4:
   version "0.1.4"
   resolved "https://registry.yarnpkg.com/osenv/-/osenv-0.1.4.tgz#42fe6d5953df06c8064be6f176c3d05aaaa34644"
   dependencies:
@@ -7267,14 +6785,6 @@ path-to-regexp@~1.2.1:
   dependencies:
     isarray "0.0.1"
 
-path-type@^1.0.0:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/path-type/-/path-type-1.1.0.tgz#59c44f7ee491da704da415da5a4070ba4f8fe441"
-  dependencies:
-    graceful-fs "^4.1.2"
-    pify "^2.0.0"
-    pinkie-promise "^2.0.0"
-
 path-type@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/path-type/-/path-type-2.0.0.tgz#f012ccb8415b7096fc2daa1054c3d72389594c73"
@@ -7362,10 +6872,6 @@ pkg-dir@^4.2.0:
   dependencies:
     find-up "^4.0.0"
 
-pluralize@^1.2.1:
-  version "1.2.1"
-  resolved "https://registry.yarnpkg.com/pluralize/-/pluralize-1.2.1.tgz#d1a21483fd22bb41e58a12fa3421823140897c45"
-
 pn@^1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/pn/-/pn-1.1.0.tgz#e2f4cef0e219f463c179ab37463e4e1ecdccbafb"
@@ -7645,10 +7151,6 @@ process@^0.11.0:
   version "0.11.10"
   resolved "https://registry.yarnpkg.com/process/-/process-0.11.10.tgz#7332300e840161bda3e69a1d1d91a7d4bc16f182"
 
-progress@^1.1.8:
-  version "1.1.8"
-  resolved "https://registry.yarnpkg.com/progress/-/progress-1.1.8.tgz#e260c78f6161cdd9b0e56cc3e0a85de17c7a57be"
-
 progress@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/progress/-/progress-2.0.0.tgz#8a1be366bf8fc23db2bd23f10c6fe920b4389d1f"
@@ -7961,13 +7463,6 @@ react@16.9.0:
     object-assign "^4.1.1"
     prop-types "^15.6.2"
 
-read-pkg-up@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/read-pkg-up/-/read-pkg-up-1.0.1.tgz#9d63c13276c065918d57f002a57f40a1b643fb02"
-  dependencies:
-    find-up "^1.0.0"
-    read-pkg "^1.0.0"
-
 read-pkg-up@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/read-pkg-up/-/read-pkg-up-2.0.0.tgz#6b72a8048984e0c41e79510fd5e9fa99b3b549be"
@@ -7989,14 +7484,6 @@ read-pkg-up@^4.0.0:
     find-up "^3.0.0"
     read-pkg "^3.0.0"
 
-read-pkg@^1.0.0:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/read-pkg/-/read-pkg-1.1.0.tgz#f5ffaa5ecd29cb31c0474bca7d756b6bb29e3f28"
-  dependencies:
-    load-json-file "^1.0.0"
-    normalize-package-data "^2.3.2"
-    path-type "^1.0.0"
-
 read-pkg@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/read-pkg/-/read-pkg-2.0.0.tgz#8ef1c0623c6a6db0dc6713c4bfac46332b2368f8"
@@ -8062,27 +7549,12 @@ readdirp@^2.2.1:
     micromatch "^3.1.10"
     readable-stream "^2.0.2"
 
-readline2@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/readline2/-/readline2-1.0.1.tgz#41059608ffc154757b715d9989d199ffbf372e35"
-  dependencies:
-    code-point-at "^1.0.0"
-    is-fullwidth-code-point "^1.0.0"
-    mute-stream "0.0.5"
-
 realpath-native@^1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/realpath-native/-/realpath-native-1.1.0.tgz#2003294fea23fb0672f2476ebe22fcf498a2d65c"
   dependencies:
     util.promisify "^1.0.0"
 
-redent@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/redent/-/redent-1.0.0.tgz#cf916ab1fd5f1f16dfb20822dd6ec7f730c2afde"
-  dependencies:
-    indent-string "^2.1.0"
-    strip-indent "^1.0.1"
-
 redent@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/redent/-/redent-2.0.0.tgz#c1b2007b42d57eb1389079b3c8333639d5e1ccaa"
@@ -8298,12 +7770,6 @@ repeat-string@^1.5.2, repeat-string@^1.5.4, repeat-string@^1.6.1:
   version "1.6.1"
   resolved "https://registry.yarnpkg.com/repeat-string/-/repeat-string-1.6.1.tgz#8dcae470e1c88abc2d600fff4a776286da75e637"
 
-repeating@^2.0.0:
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/repeating/-/repeating-2.0.1.tgz#5214c53a926d3552707527fbab415dbc08d06dda"
-  dependencies:
-    is-finite "^1.0.0"
-
 replace-ext@1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/replace-ext/-/replace-ext-1.0.0.tgz#de63128373fcbf7c3ccfa4de5a480c45a67958eb"
@@ -8323,7 +7789,7 @@ request-promise-native@^1.0.7:
     stealthy-require "^1.1.1"
     tough-cookie "^2.3.3"
 
-request@^2.87.0, request@^2.88.0:
+request@^2.88.0:
   version "2.88.0"
   resolved "https://registry.yarnpkg.com/request/-/request-2.88.0.tgz#9c2fca4f7d35b592efe57c7f0a55e81052124fef"
   dependencies:
@@ -8368,13 +7834,6 @@ require-package-name@^2.0.1:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/require-package-name/-/require-package-name-2.0.1.tgz#c11e97276b65b8e2923f75dabf5fb2ef0c3841b9"
 
-require-uncached@^1.0.2:
-  version "1.0.3"
-  resolved "https://registry.yarnpkg.com/require-uncached/-/require-uncached-1.0.3.tgz#4e0d56d6c9662fd31e43011c4b95aa49955421d3"
-  dependencies:
-    caller-path "^0.1.0"
-    resolve-from "^1.0.0"
-
 requires-port@1.x.x:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/requires-port/-/requires-port-1.0.0.tgz#925d2601d39ac485e091cf0da5c6e694dc3dcaff"
@@ -8411,10 +7870,6 @@ resolve-dir@^1.0.0, resolve-dir@^1.0.1:
     expand-tilde "^2.0.0"
     global-modules "^1.0.0"
 
-resolve-from@^1.0.0:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/resolve-from/-/resolve-from-1.0.1.tgz#26cbfe935d1aeeeabb29bc3fe5aeb01e93d44226"
-
 resolve-from@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/resolve-from/-/resolve-from-3.0.0.tgz#b22c7af7d9d6881bc8b6e653335eebcb0a188748"
@@ -8454,13 +7909,6 @@ resolve@^1.3.2:
   dependencies:
     path-parse "^1.0.5"
 
-restore-cursor@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/restore-cursor/-/restore-cursor-1.0.1.tgz#34661f46886327fed2991479152252df92daa541"
-  dependencies:
-    exit-hook "^1.0.0"
-    onetime "^1.0.0"
-
 restore-cursor@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/restore-cursor/-/restore-cursor-2.0.0.tgz#9f7ee287f82fd326d4fd162923d62129eee0dfaf"
@@ -8472,18 +7920,18 @@ ret@~0.1.10:
   version "0.1.15"
   resolved "https://registry.yarnpkg.com/ret/-/ret-0.1.15.tgz#b8a4825d5bdb1fc3f6f53c2bc33f81388681c7bc"
 
-rimraf@2, rimraf@^2.2.8, rimraf@^2.6.1:
-  version "2.6.2"
-  resolved "https://registry.yarnpkg.com/rimraf/-/rimraf-2.6.2.tgz#2ed8150d24a16ea8651e6d6ef0f47c4158ce7a36"
-  dependencies:
-    glob "^7.0.5"
-
 rimraf@2.6.3, rimraf@^2.5.4, rimraf@^2.6.2:
   version "2.6.3"
   resolved "https://registry.yarnpkg.com/rimraf/-/rimraf-2.6.3.tgz#b2d104fe0d8fb27cf9e0a1cda8262dd3833c6cab"
   dependencies:
     glob "^7.1.3"
 
+rimraf@^2.2.8, rimraf@^2.6.1:
+  version "2.6.2"
+  resolved "https://registry.yarnpkg.com/rimraf/-/rimraf-2.6.2.tgz#2ed8150d24a16ea8651e6d6ef0f47c4158ce7a36"
+  dependencies:
+    glob "^7.0.5"
+
 rimraf@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/rimraf/-/rimraf-3.0.0.tgz#614176d4b3010b75e5c390eb0ee96f6dc0cebb9b"
@@ -8502,12 +7950,6 @@ rsvp@^4.8.4:
   version "4.8.4"
   resolved "https://registry.yarnpkg.com/rsvp/-/rsvp-4.8.4.tgz#b50e6b34583f3dd89329a2f23a8a2be072845911"
 
-run-async@^0.1.0:
-  version "0.1.0"
-  resolved "https://registry.yarnpkg.com/run-async/-/run-async-0.1.0.tgz#c8ad4a5e110661e402a7d21b530e009f25f8e389"
-  dependencies:
-    once "^1.3.0"
-
 run-async@^2.2.0:
   version "2.3.0"
   resolved "https://registry.yarnpkg.com/run-async/-/run-async-2.3.0.tgz#0371ab4ae0bdd720d4166d7dfda64ff7a445a6c0"
@@ -8520,10 +7962,6 @@ run-queue@^1.0.0, run-queue@^1.0.3:
   dependencies:
     aproba "^1.1.1"
 
-rx-lite@^3.1.2:
-  version "3.1.2"
-  resolved "https://registry.yarnpkg.com/rx-lite/-/rx-lite-3.1.2.tgz#19ce502ca572665f3b647b10939f97fd1615f102"
-
 rxjs@^6.4.0:
   version "6.5.2"
   resolved "https://registry.yarnpkg.com/rxjs/-/rxjs-6.5.2.tgz#2e35ce815cd46d84d02a209fb4e5921e051dbec7"
@@ -8562,50 +8000,6 @@ sane@^4.0.3:
     minimist "^1.1.1"
     walker "~1.0.5"
 
-sass-graph@^2.2.4:
-  version "2.2.4"
-  resolved "https://registry.yarnpkg.com/sass-graph/-/sass-graph-2.2.4.tgz#13fbd63cd1caf0908b9fd93476ad43a51d1e0b49"
-  dependencies:
-    glob "^7.0.0"
-    lodash "^4.0.0"
-    scss-tokenizer "^0.2.3"
-    yargs "^7.0.0"
-
-sass-lint-webpack@1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/sass-lint-webpack/-/sass-lint-webpack-1.0.0.tgz#9ee6b54b02e602f6d5c8dff89598ce30a468857b"
-  dependencies:
-    chalk "^2.4.1"
-
-sass-lint@^1.13.1:
-  version "1.13.1"
-  resolved "https://registry.yarnpkg.com/sass-lint/-/sass-lint-1.13.1.tgz#5fd2b2792e9215272335eb0f0dc607f61e8acc8f"
-  dependencies:
-    commander "^2.8.1"
-    eslint "^2.7.0"
-    front-matter "2.1.2"
-    fs-extra "^3.0.1"
-    glob "^7.0.0"
-    globule "^1.0.0"
-    gonzales-pe-sl "^4.2.3"
-    js-yaml "^3.5.4"
-    known-css-properties "^0.3.0"
-    lodash.capitalize "^4.1.0"
-    lodash.kebabcase "^4.0.0"
-    merge "^1.2.0"
-    path-is-absolute "^1.0.0"
-    util "^0.10.3"
-
-sass-loader@7.0.1:
-  version "7.0.1"
-  resolved "https://registry.yarnpkg.com/sass-loader/-/sass-loader-7.0.1.tgz#fd937259ccba3a9cfe0d5f8a98746d48adfcc261"
-  dependencies:
-    clone-deep "^2.0.1"
-    loader-utils "^1.0.1"
-    lodash.tail "^4.1.1"
-    neo-async "^2.5.0"
-    pify "^3.0.0"
-
 sax@^1.2.4:
   version "1.2.4"
   resolved "https://registry.yarnpkg.com/sax/-/sax-1.2.4.tgz#2816234e2378bddc4e5354fab5caa895df7100d9"
@@ -8653,13 +8047,6 @@ schema-utils@^2.1.0:
     ajv "^6.10.2"
     ajv-keywords "^3.4.1"
 
-scss-tokenizer@^0.2.3:
-  version "0.2.3"
-  resolved "https://registry.yarnpkg.com/scss-tokenizer/-/scss-tokenizer-0.2.3.tgz#8eb06db9a9723333824d3f5530641149847ce5d1"
-  dependencies:
-    js-base64 "^2.1.8"
-    source-map "^0.4.2"
-
 "semver@2 || 3 || 4 || 5", semver@^5.3.0:
   version "5.4.1"
   resolved "https://registry.yarnpkg.com/semver/-/semver-5.4.1.tgz#e059c09d8571f0540823733433505d3a2f00b18e"
@@ -8676,10 +8063,6 @@ semver@^6.1.2, semver@^6.2.0, semver@^6.3.0:
   version "6.3.0"
   resolved "https://registry.yarnpkg.com/semver/-/semver-6.3.0.tgz#ee0a64c8af5e8ceea67687b133761e1becbd1d3d"
 
-semver@~5.3.0:
-  version "5.3.0"
-  resolved "https://registry.yarnpkg.com/semver/-/semver-5.3.0.tgz#9b2ce5d3de02d17c6012ad326aa6b4d0cf54f94f"
-
 send@0.16.2:
   version "0.16.2"
   resolved "https://registry.yarnpkg.com/send/-/send-0.16.2.tgz#6ecca1e0f8c156d141597559848df64730a6bbc1"
@@ -8755,14 +8138,6 @@ sha.js@^2.4.0, sha.js@^2.4.8:
     inherits "^2.0.1"
     safe-buffer "^5.0.1"
 
-shallow-clone@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/shallow-clone/-/shallow-clone-1.0.0.tgz#4480cd06e882ef68b2ad88a3ea54832e2c48b571"
-  dependencies:
-    is-extendable "^0.1.1"
-    kind-of "^5.0.0"
-    mixin-object "^2.0.1"
-
 shallowequal@^0.2.2:
   version "0.2.2"
   resolved "https://registry.yarnpkg.com/shallowequal/-/shallowequal-0.2.2.tgz#1e32fd5bcab6ad688a4812cb0cc04efc75c7014e"
@@ -8783,10 +8158,6 @@ shebang-regex@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/shebang-regex/-/shebang-regex-1.0.0.tgz#da42f49740c0b42db2ca9728571cb190c98efea3"
 
-shelljs@^0.6.0:
-  version "0.6.1"
-  resolved "https://registry.yarnpkg.com/shelljs/-/shelljs-0.6.1.tgz#ec6211bed1920442088fe0f70b2837232ed2c8a8"
-
 shellwords@^0.1.1:
   version "0.1.1"
   resolved "https://registry.yarnpkg.com/shellwords/-/shellwords-0.1.1.tgz#d6b9181c1a48d397324c84871efbcfc73fc0654b"
@@ -8811,10 +8182,6 @@ slash@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/slash/-/slash-3.0.0.tgz#6539be870c165adbd5240220dbe361f1bc4d4634"
 
-slice-ansi@0.0.4:
-  version "0.0.4"
-  resolved "https://registry.yarnpkg.com/slice-ansi/-/slice-ansi-0.0.4.tgz#edbf8903f66f7ce2f8eafd6ceed65e264c831b35"
-
 slice-ansi@1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/slice-ansi/-/slice-ansi-1.0.0.tgz#044f1a49d8842ff307aad6b505ed178bd950134d"
@@ -8885,12 +8252,6 @@ source-map@0.5.x, source-map@^0.5.0, source-map@^0.5.6:
   version "0.5.7"
   resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.5.7.tgz#8a039d2d1021d22d1ea14c80d8ea468ba2ef3fcc"
 
-source-map@^0.4.2:
-  version "0.4.4"
-  resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.4.4.tgz#eba4f5da9c0dc999de68032d8b4f76173652036b"
-  dependencies:
-    amdefine ">=0.0.4"
-
 source-map@^0.6.0, source-map@^0.6.1, source-map@~0.6.1:
   version "0.6.1"
   resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.6.1.tgz#74722af32e9614e9c287a8d0bbde48b5e2f1a263"
@@ -8970,12 +8331,6 @@ statuses@~1.4.0:
   version "1.4.0"
   resolved "https://registry.yarnpkg.com/statuses/-/statuses-1.4.0.tgz#bb73d446da2796106efcc1b601a253d6c46bd087"
 
-stdout-stream@^1.4.0:
-  version "1.4.0"
-  resolved "https://registry.yarnpkg.com/stdout-stream/-/stdout-stream-1.4.0.tgz#a2c7c8587e54d9427ea9edb3ac3f2cd522df378b"
-  dependencies:
-    readable-stream "^2.0.1"
-
 stealthy-require@^1.1.1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/stealthy-require/-/stealthy-require-1.1.1.tgz#35b09875b4ff49f26a777e509b3090a3226bf24b"
@@ -9114,12 +8469,6 @@ strip-ansi@^5.1.0, strip-ansi@^5.2.0:
   dependencies:
     ansi-regex "^4.1.0"
 
-strip-bom@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/strip-bom/-/strip-bom-2.0.0.tgz#6219a85616520491f35788bdbf1447a99c7e6b0e"
-  dependencies:
-    is-utf8 "^0.2.0"
-
 strip-bom@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/strip-bom/-/strip-bom-3.0.0.tgz#2334c18e9c759f7bdd56fdef7e9ae3d588e68ed3"
@@ -9138,12 +8487,6 @@ strip-final-newline@^2.0.0:
   resolved "https://registry.yarnpkg.com/strip-final-newline/-/strip-final-newline-2.0.0.tgz#89b852fb2fcbe936f6f4b3187afb0a12c1ab58ad"
   integrity sha512-BrpvfNAE3dcvq7ll3xVumzjKjZQ5tI1sEUIKr3Uoks0XUl45St3FlatVqef9prk4jRDzhW6WZg+3bk93y6pLjA==
 
-strip-indent@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/strip-indent/-/strip-indent-1.0.1.tgz#0c7962a6adefa7bbd4ac366460a638552ae1a0a2"
-  dependencies:
-    get-stdin "^4.0.1"
-
 strip-indent@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/strip-indent/-/strip-indent-2.0.0.tgz#5ef8db295d01e6ed6cbf7aab96998d7822527b68"
@@ -9152,10 +8495,6 @@ strip-json-comments@^3.0.1:
   version "3.0.1"
   resolved "https://registry.yarnpkg.com/strip-json-comments/-/strip-json-comments-3.0.1.tgz#85713975a91fb87bf1b305cca77395e40d2a64a7"
 
-strip-json-comments@~1.0.1:
-  version "1.0.4"
-  resolved "https://registry.yarnpkg.com/strip-json-comments/-/strip-json-comments-1.0.4.tgz#1e15fbcac97d3ee99bf2d73b4c656b082bbafb91"
-
 strip-json-comments@~2.0.1:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/strip-json-comments/-/strip-json-comments-2.0.1.tgz#3c531942e908c2697c0ec344858c286c7ca0a60a"
@@ -9392,17 +8731,6 @@ symbol-tree@^3.2.2:
   version "3.2.2"
   resolved "https://registry.yarnpkg.com/symbol-tree/-/symbol-tree-3.2.2.tgz#ae27db38f660a7ae2e1c3b7d1bc290819b8519e6"
 
-table@^3.7.8:
-  version "3.8.3"
-  resolved "https://registry.yarnpkg.com/table/-/table-3.8.3.tgz#2bbc542f0fda9861a755d3947fefd8b3f513855f"
-  dependencies:
-    ajv "^4.7.0"
-    ajv-keywords "^1.0.0"
-    chalk "^1.1.1"
-    lodash "^4.0.0"
-    slice-ansi "0.0.4"
-    string-width "^2.0.0"
-
 table@^4.0.1:
   version "4.0.2"
   resolved "https://registry.yarnpkg.com/table/-/table-4.0.2.tgz#a33447375391e766ad34d3486e6e2aedc84d2e36"
@@ -9427,14 +8755,6 @@ tapable@^1.0.0:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/tapable/-/tapable-1.1.1.tgz#4d297923c5a72a42360de2ab52dadfaaec00018e"
 
-tar@^2.0.0:
-  version "2.2.1"
-  resolved "https://registry.yarnpkg.com/tar/-/tar-2.2.1.tgz#8e4d2a256c0e2185c6b18ad694aec968b83cb1d1"
-  dependencies:
-    block-stream "*"
-    fstream "^1.0.2"
-    inherits "2"
-
 tar@^4:
   version "4.4.8"
   resolved "https://registry.yarnpkg.com/tar/-/tar-4.4.8.tgz#b19eec3fde2a96e64666df9fdb40c5ca1bc3747d"
@@ -9456,7 +8776,7 @@ test-exclude@^5.0.0:
     read-pkg-up "^4.0.0"
     require-main-filename "^1.0.1"
 
-text-table@^0.2.0, text-table@~0.2.0:
+text-table@^0.2.0:
   version "0.2.0"
   resolved "https://registry.yarnpkg.com/text-table/-/text-table-0.2.0.tgz#7f5ee823ae805207c00af2df4a84ec3fcfa570b4"
 
@@ -9565,10 +8885,6 @@ tr46@^1.0.1:
   dependencies:
     punycode "^2.1.0"
 
-trim-newlines@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/trim-newlines/-/trim-newlines-1.0.0.tgz#5887966bb582a4503a41eb524f7d35011815a613"
-
 trim-newlines@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/trim-newlines/-/trim-newlines-2.0.0.tgz#b403d0b91be50c331dfc4b82eeceb22c3de16d20"
@@ -9589,16 +8905,6 @@ trough@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/trough/-/trough-1.0.1.tgz#a9fd8b0394b0ae8fff82e0633a0a36ccad5b5f86"
 
-"true-case-path@^1.0.2":
-  version "1.0.3"
-  resolved "https://registry.yarnpkg.com/true-case-path/-/true-case-path-1.0.3.tgz#f813b5a8c86b40da59606722b144e3225799f47d"
-  dependencies:
-    glob "^7.1.2"
-
-tryit@^1.0.1:
-  version "1.0.3"
-  resolved "https://registry.yarnpkg.com/tryit/-/tryit-1.0.3.tgz#393be730a9446fd1ead6da59a014308f36c289cb"
-
 tslib@^1.9.0:
   version "1.9.3"
   resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.9.3.tgz#d7e4dd79245d85428c4d7e4822a79917954ca286"
@@ -9798,10 +9104,6 @@ unist-util-visit@^1.1.0:
   dependencies:
     unist-util-is "^2.1.1"
 
-universalify@^0.1.0:
-  version "0.1.1"
-  resolved "https://registry.yarnpkg.com/universalify/-/universalify-0.1.1.tgz#fa71badd4437af4c148841e3b3b165f9e9e590b7"
-
 unpipe@1.0.0, unpipe@~1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/unpipe/-/unpipe-1.0.0.tgz#b2bf4ee8514aae6165b4817829d21b2ef49904ec"
@@ -9860,12 +9162,6 @@ use@^3.1.0:
   dependencies:
     kind-of "^6.0.2"
 
-user-home@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/user-home/-/user-home-2.0.0.tgz#9c70bfd8169bc1dcbf48604e0f04b8b49cde9e9f"
-  dependencies:
-    os-homedir "^1.0.0"
-
 util-deprecate@^1.0.1, util-deprecate@~1.0.1:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/util-deprecate/-/util-deprecate-1.0.2.tgz#450d4dc9fa70de732762fbd2d4a28981419a0ccf"
@@ -10153,26 +9449,22 @@ whatwg-url@^7.0.0:
     tr46 "^1.0.1"
     webidl-conversions "^4.0.2"
 
-which-module@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/which-module/-/which-module-1.0.0.tgz#bba63ca861948994ff307736089e3b96026c2a4f"
-
 which-module@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/which-module/-/which-module-2.0.0.tgz#d9ef07dce77b9902b8a3a8fa4b31c3e3f7e6e87a"
 
-which@1, which@^1.2.9:
-  version "1.3.0"
-  resolved "https://registry.yarnpkg.com/which/-/which-1.3.0.tgz#ff04bdfc010ee547d780bec38e1ac1c2777d253a"
-  dependencies:
-    isexe "^2.0.0"
-
 which@^1.2.14, which@^1.3.0, which@^1.3.1:
   version "1.3.1"
   resolved "https://registry.yarnpkg.com/which/-/which-1.3.1.tgz#a45043d54f5805316da8d62f9f50918d3da70b0a"
   dependencies:
     isexe "^2.0.0"
 
+which@^1.2.9:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/which/-/which-1.3.0.tgz#ff04bdfc010ee547d780bec38e1ac1c2777d253a"
+  dependencies:
+    isexe "^2.0.0"
+
 wide-align@^1.1.0:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/wide-align/-/wide-align-1.1.2.tgz#571e0f1b0604636ebc0dfc21b0339bbe31341710"
@@ -10270,10 +9562,6 @@ xterm@3.14.5:
   version "3.14.5"
   resolved "https://registry.yarnpkg.com/xterm/-/xterm-3.14.5.tgz#c9d14e48be6873aa46fb429f22f2165557fd2dea"
 
-y18n@^3.2.1:
-  version "3.2.1"
-  resolved "https://registry.yarnpkg.com/y18n/-/y18n-3.2.1.tgz#6d15fba884c08679c0d77e88e7759e811e07fa41"
-
 "y18n@^3.2.1 || ^4.0.0", y18n@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/y18n/-/y18n-4.0.0.tgz#95ef94f85ecc81d007c264e190a120f0a3c8566b"
@@ -10306,12 +9594,6 @@ yargs-parser@^13.1.1:
     camelcase "^5.0.0"
     decamelize "^1.2.0"
 
-yargs-parser@^5.0.0:
-  version "5.0.0"
-  resolved "https://registry.yarnpkg.com/yargs-parser/-/yargs-parser-5.0.0.tgz#275ecf0d7ffe05c77e64e7c86e4cd94bf0e1228a"
-  dependencies:
-    camelcase "^3.0.0"
-
 yargs@^12.0.5:
   version "12.0.5"
   resolved "https://registry.yarnpkg.com/yargs/-/yargs-12.0.5.tgz#05f5997b609647b64f66b81e3b4b10a368e7ad13"
@@ -10345,21 +9627,3 @@ yargs@^14.0.0:
     which-module "^2.0.0"
     y18n "^4.0.0"
     yargs-parser "^13.1.1"
-
-yargs@^7.0.0:
-  version "7.1.0"
-  resolved "https://registry.yarnpkg.com/yargs/-/yargs-7.1.0.tgz#6ba318eb16961727f5d284f8ea003e8d6154d0c8"
-  dependencies:
-    camelcase "^3.0.0"
-    cliui "^3.2.0"
-    decamelize "^1.1.1"
-    get-caller-file "^1.0.1"
-    os-locale "^1.4.0"
-    read-pkg-up "^1.0.1"
-    require-directory "^2.1.1"
-    require-main-filename "^1.0.1"
-    set-blocking "^2.0.0"
-    string-width "^1.0.2"
-    which-module "^1.0.0"
-    y18n "^3.2.1"
-    yargs-parser "^5.0.0"

From b8532441394105cd3b34ed93e541a8023890767d Mon Sep 17 00:00:00 2001
From: Filip Barl <filip@weave.works>
Date: Fri, 4 Oct 2019 16:09:51 +0200
Subject: [PATCH 11/12] Fixed terminal styles

---
 client/app/scripts/components/global-style.js |  4 +--
 client/app/scripts/components/terminal-app.js | 30 ++++++++++++-------
 2 files changed, 22 insertions(+), 12 deletions(-)

diff --git a/client/app/scripts/components/global-style.js b/client/app/scripts/components/global-style.js
index 540cfbaea..8c4a380b3 100644
--- a/client/app/scripts/components/global-style.js
+++ b/client/app/scripts/components/global-style.js
@@ -1100,8 +1100,7 @@ const GlobalStyle = createGlobalStyle`
         }
       }
 
-      &-embedded &-inner { top: ${scopeTheme('terminalHeaderHeight')}; }
-      &-app &-inner { top: 0; }
+      &-embedded { .terminal-inner { top: ${scopeTheme('terminalHeaderHeight')}; } }
       &-inner {
         cursor: text;
         font-family: ${props => props.theme.fontFamilies.monospace};
@@ -1109,6 +1108,7 @@ const GlobalStyle = createGlobalStyle`
         bottom: 0;
         left: 0;
         right: 0;
+        top: 0;
         background-color: ${color('black')};
         padding: 8px;
         box-sizing: content-box;
diff --git a/client/app/scripts/components/terminal-app.js b/client/app/scripts/components/terminal-app.js
index d8819aa5f..889998974 100644
--- a/client/app/scripts/components/terminal-app.js
+++ b/client/app/scripts/components/terminal-app.js
@@ -1,7 +1,12 @@
 import React from 'react';
 import { connect } from 'react-redux';
 
+import { ThemeProvider } from 'styled-components';
+import commonTheme from 'weaveworks-ui-components/lib/theme';
+
 import Terminal from './terminal';
+import GlobalStyle from './global-style';
+import defaultTheme from '../themes/default';
 import { receiveControlPipeFromParams, hitEsc } from '../actions/app-actions';
 
 const ESC_KEY_CODE = 27;
@@ -50,16 +55,21 @@ class TerminalApp extends React.Component {
     const style = {borderTop: `4px solid ${this.state.titleBarColor}`};
 
     return (
-      <div className="terminal-app" style={style}>
-        {this.props.controlPipe && (
-        <Terminal
-          pipe={this.props.controlPipe}
-          titleBarColor={this.state.titleBarColor}
-          statusBarColor={this.state.statusBarColor}
-          title={this.state.title}
-          embedded={false} />
-        )}
-      </div>
+      <ThemeProvider theme={{...commonTheme, scope: defaultTheme }}>
+        <>
+          <GlobalStyle />
+          <div className="terminal-app" style={style}>
+            {this.props.controlPipe && (
+              <Terminal
+                pipe={this.props.controlPipe}
+                titleBarColor={this.state.titleBarColor}
+                statusBarColor={this.state.statusBarColor}
+                title={this.state.title}
+                embedded={false} />
+            )}
+          </div>
+        </>
+      </ThemeProvider>
     );
   }
 }

From 3036379c831cc89cd59af61f2117c34db336abe9 Mon Sep 17 00:00:00 2001
From: Filip Barl <filip@weave.works>
Date: Fri, 4 Oct 2019 16:12:30 +0200
Subject: [PATCH 12/12] Don't try copying across app/styles

---
 client/package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/client/package.json b/client/package.json
index 6cdc7720f..07bfb63fe 100644
--- a/client/package.json
+++ b/client/package.json
@@ -98,7 +98,7 @@
   "scripts": {
     "build": "webpack --config webpack.production.config.js",
     "build-external": "EXTERNAL=true webpack --config webpack.production.config.js",
-    "copy-pkg-files": "cp package.json build-pkg/ && cp -R app/styles build-pkg/",
+    "copy-pkg-files": "cp package.json build-pkg/",
     "build-pkg": "mkdir -p build-pkg && node node_modules/.bin/babel app/scripts --ignore __tests__ --out-dir build-pkg && yarn run copy-pkg-files",
     "bundle": "mkdir -p bundle && yarn run build-pkg && cd ./build-pkg && yarn pack --filename ../bundle/weave-scope.tgz",
     "start": "node server.js",