UX changes in main nav bar for browse as user;

Toggle new type added - HIDE_LABELS;

Author: NinoZX

src/components/BrowserMenu/BrowserMenu.scss

@@ -35,7 +35,7 @@
   }
 
   &.active {
-    background: $blue;
+    background: $orange;
     border-radius: 5px;
 
     svg {
@@ -54,7 +54,7 @@
   }
 
   &.active {
-    background: $blue;
+    background: $orange;
     border-radius: 5px;
   }
 }
@@ -108,24 +108,6 @@
       background: none;
     }
   }
-
-  &.active {
-    background: $blue;
-
-    &:hover {
-      background: white;
-      color: $blue;
-    }
-  }
-
-  &.greenActive {
-    background: $green;
-
-    &:hover {
-      background: white;
-      color: $blue;
-    }
-  }
 }
 
 .separator {

src/components/Toggle/Toggle.react.js

@@ -80,6 +80,10 @@ export default class Toggle extends React.Component {
         left = this.props.value === this.props.optionLeft;
         colored = this.props.colored;
         break;
+      case Toggle.Types.HIDE_LABELS:
+        colored = true;
+        left = !this.props.value;
+        break;
       default:
         labelLeft = 'No';
         labelRight = 'Yes';
@@ -90,7 +94,10 @@ export default class Toggle extends React.Component {
 
     let switchClasses = [styles.switch];
     if (colored) {
-      switchClasses.push(styles.colored)
+      switchClasses.push(styles.colored);
+    }
+    if (this.props.switchNoMargin) {
+      switchClasses.push(styles.switchNoMargin);
     }
     let toggleClasses = [styles.toggle, unselectable, input];
     if (left) {
@@ -101,9 +108,9 @@ export default class Toggle extends React.Component {
     }
     return (
       <div className={toggleClasses.join(' ')} style={this.props.additionalStyles || {}}>
-        <span className={styles.label} onClick={this.toLeft.bind(this)}>{labelLeft}</span>
+        {labelLeft && <span className={styles.label} onClick={this.toLeft.bind(this)}>{labelLeft}</span>}
         <span className={switchClasses.join(' ')} onClick={this.toggle.bind(this)}></span>
-        <span className={styles.label} onClick={this.toRight.bind(this)}>{labelRight}</span>
+        {labelRight && <span className={styles.label} onClick={this.toRight.bind(this)}>{labelRight}</span>}
       </div>
     );
   }

src/components/Toggle/Toggle.scss

@@ -60,6 +60,10 @@
   transition: background-position 0.15s ease-out;
 }
 
+.switchNoMargin {
+  margin: 0;
+}
+
 .left {
   .label {
     &:first-of-type {

src/dashboard/Data/Browser/BrowserToolbar.react.js

@@ -18,6 +18,7 @@ import SecurityDialog       from 'dashboard/Data/Browser/SecurityDialog.react';
 import ColumnsConfiguration  from 'components/ColumnsConfiguration/ColumnsConfiguration.react';
 import SecureFieldsDialog   from 'dashboard/Data/Browser/SecureFieldsDialog.react';
 import LoginDialog          from 'dashboard/Data/Browser/LoginDialog.react';
+import Toggle               from 'components/Toggle/Toggle.react';
 
 let BrowserToolbar = ({
   className,
@@ -224,6 +225,23 @@ let BrowserToolbar = ({
         className={classNameForEditors}
         blacklistedFilters={onAddRow ? [] : ['unique']}
       />
+      <div className={styles.toolbarSeparator} />
+      <LoginDialog
+        ref={loginDialogRef}
+        currentUser={currentUser}
+        login={login}
+        logout={logout}
+      />
+      <BrowserMenu
+          setCurrent={setCurrent}
+          title={currentUser ? "Browsing" : "Browse"}
+          icon="users-solid"
+          active={!!currentUser}
+        >
+          <MenuItem text={currentUser ? 'Switch User' : 'As User'} onClick={showLogin} />
+          {currentUser ? <MenuItem text={<span>Use Master Key <Toggle type={Toggle.Types.HIDE_LABELS} value={useMasterKey} onChange={toggleMasterKeyUsage} switchNoMargin={true} additionalStyles={{ display: 'inline', lineHeight: 0, margin: 0, paddingLeft: 5 }} /></span>} onClick={toggleMasterKeyUsage} /> : <noscript />}
+          {currentUser ? <MenuItem text={<span>Stop browsing (<b>{currentUser.get('username')}</b>)</span>} onClick={logout} /> : <noscript />}
+        </BrowserMenu>
       {onAddRow && <div className={styles.toolbarSeparator} />}
       {perms && enableSecurityDialog ? (
         <SecurityDialog
@@ -253,26 +271,15 @@ let BrowserToolbar = ({
         icon='locked-solid'
         onEditPermissions={onEditPermissions}
       />
-      <LoginDialog
-        ref={loginDialogRef}
-        currentUser={currentUser}
-        login={login}
-        logout={logout}
-      />
       {enableSecurityDialog ? (
         <BrowserMenu
           setCurrent={setCurrent}
           title="Security"
           icon="locked-solid"
           disabled={!!relation || !!isUnique}
-          active={!!currentUser}
         >
           <MenuItem text={'Class Level Permissions'} onClick={showCLP} />
           <MenuItem text={'Protected Fields'} onClick={showProtected} />
-          <Separator />
-          <MenuItem text={currentUser ? 'Switch Parse.User' : 'Browse as Parse.User'} onClick={showLogin} active={!!currentUser} />
-          {currentUser ? <MenuItem text={useMasterKey ? <span>Browsing with <b>Master Key</b></span> : <span>Browse with <s>Master Key</s></span>} onClick={toggleMasterKeyUsage} active={!!currentUser} greenActive={useMasterKey} /> : <noscript />}
-          {currentUser ? <MenuItem text={<span>Logout (<b>{currentUser.get('username')}</b>)</span>} onClick={logout} active={!!currentUser} /> : <noscript />}
         </BrowserMenu>
       ) : (
         <noscript />

src/dashboard/Data/Browser/LoginDialog.react.js

@@ -61,19 +61,19 @@ export default class LoginDialog extends React.Component {
       open && (
         <Modal
           type={Modal.Types.INFO}
-          title={currentUser ? 'Switch Parse.User' : 'Login as Parse.User'}
+          title={currentUser ? 'Switch User' : 'Browse as User'}
           subtitle={
             <div style={{ paddingTop: '5px' }}>
               {currentUser && (
                 <p>
-                  Logged in as <strong>{currentUser.get('username')}</strong>
+                  Browsing as <strong>{currentUser.get('username')}</strong>
                 </p>
               )}
             </div>
           }
           onCancel={this.handleClose}
           onConfirm={this.login}
-          confirmText="Login"
+          confirmText="Browse"
           cancelText="Cancel"
         >
           <LoginRow