Merge branch 'nav-bugbash-2' into issue47

Author: luizrrodrigues

dist/dev/index.js

@@ -32,6 +32,7 @@ $themes: (
     iconDarkDisplay: none,
     iconLightDisplay: block,
     arrowBackground: $gray-neutral-light,
+    beforeBackground: $turquoise
   ),
   dark: (
     secondaryBackgroundColor: $gray-60,
@@ -42,5 +43,6 @@ $themes: (
     iconDarkDisplay: block,
     iconLightDisplay: none,
     arrowBackground: $gray-60,
+    beforeBackground: $white
   ),
 );

dist/prod/index.js

@@ -18,7 +18,9 @@ const MANAGE_ROLES = [
   'manager',
   'global manager',
   'client manager',
-  'connect manager'
+  'connect manager',
+  'connect account manager',
+  'connect copilot manager'
 ]
 
 const hasAccess = roles => {
@@ -41,11 +43,11 @@ class AccountMenu extends React.Component {
 
   render () {
     const {
-      onClose, open, menu, switchText, onSwitch, profile
+      onClose, open, menu, switchText, onSwitch, profile, domRef
     } = this.props
 
     return (
-      <div className={cn(styles['user-info-popup'], open && styles.open)}>
+      <div ref={domRef} className={cn(styles['user-info-popup'], open && styles.open)}>
         <div className={styles.backdrop} onClick={onClose} />
 
         <Link to={_.isEmpty(profile) ? '/' : `/members/${profile.handle}`}>
@@ -113,7 +115,8 @@ AccountMenu.propTypes = {
   menu: PropTypes.array,
   switchText: PropTypes.shape(),
   onSwitch: PropTypes.func,
-  profile: PropTypes.shape()
+  profile: PropTypes.shape(),
+  domRef: PropTypes.shape()
 }
 
 export default AccountMenu

src/assets/sass/_global/_themes.scss

@@ -5,7 +5,7 @@ import styles from './styles.module.scss'
 const ChosenArrow = ({ show, x }) => (
   <div
     className={styles.chosenArrow}
-    style={{ transform: `translateX(calc(${x}px - 50%))` }}
+    style={{ transform: `translateX(${x}px)` }}
     hidden={!show}
   >
     <svg width='40px' height='10px' viewBox='0 0 40 10'>

src/components/AccountMenu/index.js

@@ -3,7 +3,7 @@
 .chosenArrow {
   position: absolute;
   bottom: -1px;
-  left: 0;
+  left: -20px;
   z-index: 1;
   -webkit-transition: -webkit-transform 0.5s;
   transition: transform 0.5s;

src/components/ChosenArrow/index.js

@@ -2,15 +2,26 @@ import React from 'react'
 import PropTypes from 'prop-types'
 import styles from './styles.module.scss'
 
-const IconSelect = ({ show, x }) => (
-  <span
+const IconSelect = ({ show, x, isResize }) => {
+  let styleObj = {
+    transform: `translateX(${x}px)`
+
+  }
+  // is window is on resize, stop animation
+  if (isResize) {
+    styleObj['transition'] = 'auto'
+    styleObj['-webkit-transition'] = 'auto'
+  }
+  return <span
     className={styles.iconSelect}
-    style={{ transform: `translateX(calc(${x}px - 50%))` }}
+    style={styleObj}
     hidden={!show}
   />
-)
+}
 
 IconSelect.propTypes = {
+  // screen is changing size
+  isResize: PropTypes.bool,
   /** Show or hide the icon */
   show: PropTypes.bool,
   /** The x position of the arrow. Generally this will be the center of the target */

src/components/ChosenArrow/styles.module.scss

@@ -3,7 +3,7 @@
 .iconSelect {
   position: absolute;
   bottom: -1px;
-  left: 0;
+  left: -7px;
   width: 15px;
   height: 3px;
   border-radius: 1.5px;

src/components/IconSelect/index.js

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react'
+import React, { useState, useEffect, useRef } from 'react'
 import PropTypes from 'prop-types'
 import styles from './styles.module.scss'
 
@@ -21,6 +21,8 @@ const LoginNav = ({
 }) => {
   const [openNotifications, setOpenNotifications] = useState()
   const [openAccountMenu, setOpenAccountMenu] = useState()
+  const accountMenuRef = useRef(null)
+  const userInfoRef = useRef(null)
 
   useEffect(() => {
     // trigger when orientationChange in ipad
@@ -32,6 +34,25 @@ const LoginNav = ({
     window.addEventListener('orientationchange', onOrientationChange)
     return () => window.removeEventListener('orientationchange', onOrientationChange)
   }, [])
+
+  useEffect(() => {
+    // Internet Explorer 6-11
+    const isIE = /*@cc_on!@*/false || !!document.documentMode // eslint-disable-line spaced-comment
+    // Edge 20+
+    const isEdge = !isIE && !!window.StyleMedia
+    if (!(isIE || isEdge)) return
+
+    // trigger when click outside
+    const onClickOutside = (event) => {
+      if (!(userInfoRef.current.contains(event.target) || accountMenuRef.current.contains(event.target))) {
+        setOpenAccountMenu(false)
+        document.body.style.position = ''
+      }
+    }
+    document.addEventListener('mousedown', onClickOutside, true)
+    return () => document.removeEventListener('mousedown', onClickOutside, true)
+  }, [])
+
   const handleClickNotifications = () => setOpenNotifications(x => !x)
 
   const handleClickUserInfo = () => {
@@ -61,6 +82,7 @@ const LoginNav = ({
           onClick={handleClickUserInfo}
           open={openAccountMenu}
           key='user-info'
+          domRef={userInfoRef}
         />
       ])
     }
@@ -72,6 +94,7 @@ const LoginNav = ({
         onClick={handleClickUserInfo}
         open={openAccountMenu}
         key='user-info'
+        domRef={userInfoRef}
       />
     )
   }
@@ -108,6 +131,7 @@ const LoginNav = ({
           setOpenAccountMenu(false)
           document.body.style.position = ''
         }}
+        domRef={accountMenuRef}
       />
     </div>
   )

src/components/IconSelect/styles.module.scss

@@ -5,6 +5,7 @@
   position: relative;
   display: flex;
   align-items: center;
+  cursor: default;
 
   .notificationButton {
     @include hide-mobile;