fix accountbox toggling

frontend/src/Metamaps/GlobalUI/Account.js

@@ -7,7 +7,6 @@ const Account = {
   changing: false,
   init: function() {
     var self = Account
-    $('.sidebarAccountIcon').click(self.toggleBox)
     $('body').click(self.close)
   },
   toggleBox: function(event) {

frontend/src/Metamaps/GlobalUI/ReactApp.js

@@ -7,6 +7,7 @@ import { merge } from 'lodash'
 
 import { notifyUser } from './index.js'
 import ImportDialog from './ImportDialog'
+import Account from './Account'
 import Active from '../Active'
 import DataModel from '../DataModel'
 import { ExploreMaps, ChatView, TopicCard } from '../Views'
@@ -86,7 +87,8 @@ const ReactApp = {
       mobileTitle: self.mobileTitle,
       mobileTitleWidth: self.mobileTitleWidth,
       mobileTitleClick: (e) => Active.Map && InfoBox.toggleBox(e),
-      openInviteLightbox: () => self.openLightbox('invite')
+      openInviteLightbox: () => self.openLightbox('invite'),
+      toggleAccountBox: Account.toggleBox
     },
     self.getMapProps(),
     self.getTopicProps(),

frontend/src/components/App/UpperRightUI.js

@@ -9,7 +9,8 @@ class UpperRightUI extends Component {
     currentUser: PropTypes.object,
     signInPage: PropTypes.bool,
     unreadNotificationsCount: PropTypes.number,
-    openInviteLightbox: PropTypes.func
+    openInviteLightbox: PropTypes.func,
+    onClickAccount: PropTypes.func
   }
 
   static contextTypes = {
@@ -17,7 +18,7 @@ class UpperRightUI extends Component {
   }
 
   render () {
-    const { currentUser, signInPage, unreadNotificationsCount, openInviteLightbox } = this.props
+    const { currentUser, signInPage, unreadNotificationsCount, openInviteLightbox, onClickAccount } = this.props
     return <div className="upperRightUI">
       {currentUser && <a href="/maps/new" target="_blank" className="addMap upperRightEl upperRightIcon">
         <div className="tooltipsUnder">
@@ -28,7 +29,8 @@ class UpperRightUI extends Component {
         <NotificationIcon unreadNotificationsCount={unreadNotificationsCount} />
       </span>}
       {!signInPage && <div className="sidebarAccount upperRightEl">
-        <div className="sidebarAccountIcon"><div className="tooltipsUnder">Account</div>
+        <div className="sidebarAccountIcon" onClick={onClickAccount}>
+          <div className="tooltipsUnder">Account</div>
           {currentUser && <img src={currentUser.get('image')} />}
           {!currentUser && 'SIGN IN'}
           {!currentUser && <div className="accountInnerArrow"></div>}

frontend/src/components/App/index.js

@@ -15,7 +15,8 @@ class App extends Component {
     mobileTitle: PropTypes.string,
     mobileTitleWidth: PropTypes.number,
     mobileTitleClick: PropTypes.func,
-    openInviteLightbox: PropTypes.func
+    openInviteLightbox: PropTypes.func,
+    toggleAccountBox: PropTypes.func
   }
 
   static childContextTypes = {
@@ -30,7 +31,8 @@ class App extends Component {
 
   render () {
     const { children, toast, currentUser, unreadNotificationsCount, openInviteLightbox,
-            mobile, mobileTitle, mobileTitleWidth, mobileTitleClick, location } = this.props
+            mobile, mobileTitle, mobileTitleWidth, mobileTitleClick, location,
+            toggleAccountBox } = this.props
     const { pathname } = location || {}
     const unauthedHome = pathname === '/' && !currentUser
     return <div className="wrapper" id="wrapper">
@@ -43,7 +45,8 @@ class App extends Component {
       {!mobile && <UpperRightUI currentUser={currentUser}
                                 unreadNotificationsCount={unreadNotificationsCount}
                                 openInviteLightbox={openInviteLightbox}
-                                signInPage={pathname === '/login'} />}
+                                signInPage={pathname === '/login'}
+                                onClickAccount={toggleAccountBox} />}
       <Toast message={toast} />
       {!mobile && currentUser && <a className='feedback-icon' target='_blank' href='https://hylo.com/c/metamaps'></a>}
       {children}