Add deprecation message and link to web UI.

main/index.js

@@ -10,7 +10,7 @@ function createWindow () {
     width: 1218,
     minWidth: 1126,
     height: 732,
-    minHeight: 540,
+    minHeight: 582,
     title: 'Themer',
     titleBarStyle: 'hiddenInset',
     webPreferences: {

package.json

@@ -72,6 +72,7 @@
     "lodash": "^4.17.10",
     "pn": "^1.1.0",
     "prettier": "^1.13.5",
+    "qs": "^6.7.0",
     "react": "^16.4.0",
     "react-dom": "^16.4.0",
     "react-redux": "^5.0.7",

renderer/components/App.js

@@ -6,6 +6,7 @@ import ColorSet from './ColorSet';
 import Dialogs from './Dialogs';
 import UpdateNotifier from './UpdateNotifier';
 import css from './App.css';
+import DeprecationNotice from './DeprecationNotice';
 
 const App = ({ isDialogOpen, title, isFocusMode }) => (
   <section className={ css.gui }>
@@ -20,6 +21,7 @@ const App = ({ isDialogOpen, title, isFocusMode }) => (
         <ColorSet />
         <ColorSet light={ true } />
       </div>
+      <DeprecationNotice />
       <UpdateNotifier />
     </div>
     <Dialogs />

renderer/components/DeprecationNotice.css

@@ -0,0 +1,12 @@
+.deprecationNotice {
+  background-color: #282629;
+  color: #FFFCFF;
+  padding: 0.75em;
+  text-align: center;
+}
+
+.deprecationNotice a {
+  color: #66BFFF;
+  text-decoration: underline;
+  cursor: pointer;
+}

renderer/components/DeprecationNotice.js

@@ -0,0 +1,40 @@
+import React from 'react';
+import { shell } from 'electron';
+import qs from 'qs';
+import { connect } from 'react-redux';
+import { External } from './Icons';
+import Emoji from './Emoji';
+import css from './DeprecationNotice.css';
+
+const getQueryString = colorSets => qs.stringify(
+  {
+    colors: colorSets,
+    activeColorSet: Object.values(colorSets.dark).filter(Boolean).length ? 'dark' : 'light',
+    calculateIntermediaryShades: {
+      dark: false,
+      light: false,
+    }
+  },
+  { allowDots: true },
+);
+
+const DeprecationNotice = ({ colorSets }) => (
+  <div className={ css.deprecationNotice }>
+    <Emoji emoji="⚠️"/>
+    {' '}
+    Heads up: this GUI for themer has been deprecated.
+    {' '}
+    <a onClick={ () => shell.openExternal(`https://themer.mjswensen.com?${getQueryString(colorSets)}`) }>
+      Open current theme in the new Web UI
+      <External />
+    </a>
+  </div>
+);
+
+const mapStateToProps = state => ({
+  colorSets: state.colorSets
+});
+
+export default connect(
+  mapStateToProps,
+)(DeprecationNotice);