Some refinements around sync dropdown

app/sync/index.js

@@ -45,7 +45,8 @@ export async function initSync () {
   db.onChange(changes => {
     for (const [event, doc, fromSync] of changes) {
       const notOnWhitelist = !WHITE_LIST[doc.type];
-      if (notOnWhitelist || fromSync) {
+      const notLoggedIn = !session.isLoggedIn();
+      if (notLoggedIn || notOnWhitelist || fromSync) {
         continue;
       }
 
@@ -549,7 +550,7 @@ async function _createResourceGroup (name = '') {
   }
 
   // Create a config for it
-  await ensureConfigExists(resourceGroup.id, store.SYNC_MODE_OFF);
+  await ensureConfigExists(resourceGroup.id, store.SYNC_MODE_ON);
 
   logger.debug(`Created ResourceGroup ${resourceGroup.id}`);
   return resourceGroup;

app/sync/storage.js

@@ -142,7 +142,7 @@ export async function insertConfig (config) {
 function _initConfig (data) {
   return Object.assign({
     _id: util.generateId('scf'),
-    syncMode: SYNC_MODE_OFF,
+    syncMode: SYNC_MODE_ON,
     resourceGroupId: null
   }, data);
 }

app/ui/components/dropdowns/SyncDropdown.js

@@ -8,6 +8,7 @@ import * as session from '../../../sync/session';
 import * as sync from '../../../sync';
 import * as analytics from '../../../analytics/index';
 import * as models from '../../../models/index';
+import SettingsModal from '../modals/SettingsModal';
 
 class SyncDropdown extends Component {
   constructor (props) {
@@ -53,6 +54,10 @@ class SyncDropdown extends Component {
   }
 
   async _reloadData () {
+    if (!session.isLoggedIn()) {
+      return;
+    }
+
     // Get or create any related sync data
     const workspace = await models.workspace.getById(this.props.workspaceId);
     const {resourceGroupId} = await sync.getOrCreateResourceForDoc(workspace);
@@ -107,20 +112,28 @@ class SyncDropdown extends Component {
             {syncMode === syncStorage.SYNC_MODE_OFF ?
               <i className="fa fa-toggle-off"></i> :
               <i className="fa fa-toggle-on"></i>}
-            Sync Automatically
+            Automatic Sync
           </DropdownItem>
           <DropdownItem>
             <i className="fa fa-share-alt"></i>
             Share Workspace
           </DropdownItem>
+          {syncMode === syncStorage.SYNC_MODE_OFF ? (
+            <DropdownItem onClick={e => this._handleSyncResourceGroupId(resourceGroupId)}
+                          disabled={syncPercent === 100}
+                          stayOpenAfterClick={true}>
+              {loading ?
+                <i className="fa fa-refresh fa-spin"></i> :
+                <i className="fa fa-cloud-upload"></i>}
+              Sync Now {syncPercent === 100 ? '(up to date)' : ''}
+            </DropdownItem>
+          ) : null}
+
           <DropdownDivider name="Other"/>
-          <DropdownItem onClick={e => this._handleSyncResourceGroupId(resourceGroupId)}
-                        disabled={syncPercent === 100}
-                        stayOpenAfterClick={true}>
-            {loading ?
-              <i className="fa fa-refresh fa-spin"></i> :
-              <i className="fa fa-cloud-upload"></i>}
-            Sync Now {syncPercent === 100 ? '(up to date)' : ''}
+
+          <DropdownItem onClick={e => showModal(SettingsModal, 2)}>
+            <i className="fa fa-user"></i>
+            Manage Account
           </DropdownItem>
           <DropdownItem onClick={e => showModal(SyncLogsModal)}>
             <i className="fa fa-bug"></i>
@@ -128,11 +141,15 @@ class SyncDropdown extends Component {
           </DropdownItem>
         </Dropdown>
       );
-    } else if (!syncData) {
-      return null;
+    } else if (session.isLoggedIn() && !syncData) {
+      return (
+        <button className="btn btn--compact wide" disabled={true}>
+          Initializing Sync...
+        </button>
+      )
     } else {
       return (
-        <button className="btn btn--super-duper-compact btn--outlined wide"
+        <button className="btn btn--compact wide"
                 onClick={e => showModal(SignupModal)}>
           Login to Cloud Sync
         </button>

app/ui/containers/EnvironmentsDropdown.js

@@ -37,16 +37,13 @@ class EnvironmentsDropdown extends Component {
     const baseEnvironment = allEnvironments.find(e => e.parentId === workspace._id);
     const subEnvironments = allEnvironments.filter(e => e.parentId === (baseEnvironment && baseEnvironment._id));
     const activeEnvironment = allEnvironments.find(e => e._id === workspace.metaActiveEnvironmentId) || baseEnvironment;
+    const description = activeEnvironment !== baseEnvironment ? activeEnvironment.name : 'No Environment';
 
     return (
       <Dropdown {...other} className={classnames(className, 'wide')}>
         <DropdownButton className="btn btn--super-compact no-wrap">
           <div className="sidebar__menu__thing">
-            <span>
-              {activeEnvironment && activeEnvironment !== baseEnvironment ? activeEnvironment.name : 'No Environment'}
-              </span>
-            &nbsp;
-            <i className="fa fa-caret-down"></i>
+            <span>{description}</span> <i className="fa fa-caret-down"></i>
           </div>
         </DropdownButton>
         <DropdownDivider name="Switch Environment"/>
@@ -58,7 +55,7 @@ class EnvironmentsDropdown extends Component {
           </DropdownItem>
         ))}
         <DropdownItem disabled={!activeEnvironment || activeEnvironment._id === baseEnvironment._id}
-                        onClick={() => baseEnvironment && this._handleActivateEnvironment(baseEnvironment)}>
+                      onClick={() => baseEnvironment && this._handleActivateEnvironment(baseEnvironment)}>
           <i className="fa fa-empty"></i> No Environment
         </DropdownItem>
         <DropdownDivider name="General"/>

app/ui/css/components/sidebar.less

@@ -336,6 +336,7 @@
     border-top: 1px solid @hl-md;
   }
 
+  .sidebar__footer > button,
   .sidebar__footer .dropdown > button {
     font-size: @font-size-sm;
     padding: @padding-xs @padding-md;