fixed spelling

app/components/UsersDropdown/index.js

@@ -0,0 +1,58 @@
+import React, { useState } from 'react';
+import PropTypes from 'prop-types';
+import { Link } from 'react-router-dom';
+import { Popover, Row } from 'antd';
+import { UserOutlined } from '@ant-design/icons';
+
+import styles from './index.module.scss';
+
+const UsersDropdown = ({ onLogout }) => {
+  const [popoverVisible, setPopoverVisible] = useState(false);
+
+  const hidePopover = () => {
+    setPopoverVisible(false);
+  };
+
+  const handleVisibleChange = visible => {
+    setPopoverVisible(visible);
+  };
+
+  const userOptions = (
+    <>
+      <Row>
+        <Link onClick={hidePopover} to="/account">
+          Account
+        </Link>
+      </Row>
+      <Row>
+        <Link onClick={onLogout} to="/">
+          Log Out
+        </Link>
+      </Row>
+    </>
+  );
+
+  return (
+    <Popover
+      content={userOptions}
+      trigger="click"
+      getPopupContainer={e => e.parentElement}
+      visible={popoverVisible}
+      onVisibleChange={handleVisibleChange}
+      placement="bottomRight"
+      arrowPointAtCenter
+    >
+      <UserOutlined className={styles.MenuIcon} />
+    </Popover>
+  );
+};
+
+UsersDropdown.propTypes = {
+  onLogout: PropTypes.func,
+};
+
+UsersDropdown.defaultProps = {
+  onLogout: () => {},
+};
+
+export default UsersDropdown;

app/components/UsersDropdown/index.module.scss

@@ -0,0 +1,7 @@
+.MenuIcon {
+    cursor: pointer;
+    font-size: 18px;
+    line-height: 64px;
+    padding: 0 24px;
+  }
+  

app/containers/MasterLayout/index.js

@@ -12,8 +12,10 @@ import { removeItem } from 'utils/localStorage';
 
 import UserContext from 'contexts/UserContext';
 
+import UsersDropdown from 'components/UsersDropdown';
+
 const MasterLayout = ({ children }) => {
-  const { roles, customerId } = useContext(UserContext);
+  const { roles, customerId, email } = useContext(UserContext);
 
   const client = useApolloClient();
   const location = useLocation();
@@ -59,7 +61,7 @@ const MasterLayout = ({ children }) => {
         {
           key: 'editAccount',
           path: ROUTES.account,
-          text: 'Edit Account',
+          text: 'Account',
         },
         {
           key: 'logout',
@@ -90,6 +92,8 @@ const MasterLayout = ({ children }) => {
       menuItems={menuItems}
       mobileMenuItems={mobileMenuItems}
       totalAlarms={data && data.getAlarmCount}
+      currentUserEmail={email}
+      usersDropdown={<UsersDropdown onLogout={handleLogout} />}
     >
       {children}
     </Layout>