feat(preferences): Add theme picker button to Appearances

internal_packages/preferences/lib/tabs/preferences-appearance.jsx

@@ -97,11 +97,17 @@ class PreferencesAppearance extends React.Component {
     configSchema: React.PropTypes.object,
   }
 
+  onClick = () => {
+    NylasEnv.commands.dispatch(document.body, "window:launch-theme-picker");
+  }
+
+
   render() {
     return (
       <div className="container-appearance">
         <label>Change layout:</label>
         <AppearanceModeSwitch config={this.props.config} />
+        <button className="btn btn-large" onClick={this.onClick}>Change theme...</button>
       </div>
     );
   }

internal_packages/theme-picker/lib/main.js

@@ -1,10 +1,21 @@
 /** @babel */
-import ThemePickerStore from './theme-picker-store';
+import React from 'react';
+import {Actions, WorkspaceStore} from 'nylas-exports';
+
+import ThemePicker from './theme-picker';
+
 
 export function activate() {
-  ThemePickerStore.activate();
+  this.disposable = NylasEnv.commands.add("body", "window:launch-theme-picker", () => {
+    WorkspaceStore.popToRootSheet();
+    Actions.openModal({
+      component: (<ThemePicker />),
+      height: 390,
+      width: 250,
+    });
+  });
 }
 
 export function deactivate() {
-  ThemePickerStore.deactivate();
+  this.disposable.dispose();
 }

internal_packages/theme-picker/lib/theme-picker-store.jsx

@@ -1,30 +0,0 @@
-import React from 'react';
-import Actions from '../../../src/flux/actions';
-import NylasStore from 'nylas-store';
-
-import ThemePicker from './theme-picker';
-
-
-class ThemePickerStore extends NylasStore {
-
-  constructor() {
-    super();
-  }
-
-  activate = ()=> {
-    this.disposable = NylasEnv.commands.add("body", "window:launch-theme-picker", () => {
-      Actions.openModal({
-        component: (<ThemePicker />),
-        height: 390,
-        width: 250,
-      });
-    });
-  }
-
-  deactivate = ()=> {
-    this.disposable.dispose();
-  }
-
-}
-
-export default new ThemePickerStore();