From a7132a95aae56690eb918edb903d44812a3b6750 Mon Sep 17 00:00:00 2001
From: Jaco Greeff <jacogr@gmail.com>
Date: Sun, 7 Jun 2020 12:47:53 +0200
Subject: [PATCH] Adjust account menu position (#367)

---
 .../src/Popup/Accounts/Account.tsx            | 34 ++++++++++++-------
 .../extension-ui/src/components/Address.tsx   |  3 +-
 .../extension-ui/src/components/MenuItem.tsx  |  1 +
 .../extension-ui/src/hooks/useOutsideClick.ts |  6 ++--
 4 files changed, 27 insertions(+), 17 deletions(-)

diff --git a/packages/extension-ui/src/Popup/Accounts/Account.tsx b/packages/extension-ui/src/Popup/Accounts/Account.tsx
index 693b8699..006e45e1 100644
--- a/packages/extension-ui/src/Popup/Accounts/Account.tsx
+++ b/packages/extension-ui/src/Popup/Accounts/Account.tsx
@@ -95,19 +95,23 @@ function Account ({ address, className, genesisHash, isExternal, isHidden, paren
         Forget Account
       </Link>
       <MenuDivider />
-      <Checkbox
-        checked={!isHidden}
-        className='menuItem'
-        label='Visible (always inject)'
-        onClick={_toggleVisibility}
-      />
-      <Dropdown
-        className='menuItem'
-        label=''
-        onChange={_onChangeGenesis}
-        options={genesisOptions}
-        value={genesisHash || ''}
-      />
+      <div className='menuItem'>
+        <Checkbox
+          checked={!isHidden}
+          className='inputItem'
+          label='Visible (always inject)'
+          onClick={_toggleVisibility}
+        />
+      </div>
+      <div className='menuItem'>
+        <Dropdown
+          className='inputItem'
+          label=''
+          onChange={_onChangeGenesis}
+          options={genesisOptions}
+          value={genesisHash || ''}
+        />
+      </div>
     </>
   ), [_onChangeGenesis, _toggleEdit, _toggleVisibility, address, genesisHash, isExternal, isHidden]);
 
@@ -160,5 +164,9 @@ export default styled(Account)`
     margin: 0;
     min-width: 13rem;
     padding: 4px 16px;
+
+    .inputItem {
+      margin: 0;
+    }
   }
 `;
diff --git a/packages/extension-ui/src/components/Address.tsx b/packages/extension-ui/src/components/Address.tsx
index c4434509..962070e9 100644
--- a/packages/extension-ui/src/components/Address.tsx
+++ b/packages/extension-ui/src/components/Address.tsx
@@ -250,7 +250,8 @@ const ArrowLabel = styled(Svg).attrs(() => ({ src: parentArrow }))`
 `;
 
 const MovableMenu = styled(Menu)<{ isMoved: boolean }>`
-  ${({ isMoved }): string => isMoved ? 'bottom: 50px' : ''};
+  ${({ isMoved }): string => isMoved ? 'bottom: 0;' : ''}
+  right: 28px;
 `;
 
 export default styled(Address)(({ theme }: ThemeProps) => `
diff --git a/packages/extension-ui/src/components/MenuItem.tsx b/packages/extension-ui/src/components/MenuItem.tsx
index c3020025..0991f067 100644
--- a/packages/extension-ui/src/components/MenuItem.tsx
+++ b/packages/extension-ui/src/components/MenuItem.tsx
@@ -26,6 +26,7 @@ function MenuItem ({ children, className = '', title }: Props): React.ReactEleme
 }
 
 export default styled(MenuItem)`
+  min-width: 13rem;
   padding: 0 16px;
   max-width: 100%;
 
diff --git a/packages/extension-ui/src/hooks/useOutsideClick.ts b/packages/extension-ui/src/hooks/useOutsideClick.ts
index f7f40435..2440ade2 100644
--- a/packages/extension-ui/src/hooks/useOutsideClick.ts
+++ b/packages/extension-ui/src/hooks/useOutsideClick.ts
@@ -2,14 +2,14 @@
 // This software may be modified and distributed under the terms
 // of the Apache-2.0 license. See the LICENSE file for details.
 
-import { useEffect, RefObject } from 'react';
+import { useCallback, useEffect, RefObject } from 'react';
 
 export default function useOutsideClick (ref: RefObject<HTMLDivElement>, callback: () => void): void {
-  const handleClick = (e: MouseEvent): void => {
+  const handleClick = useCallback((e: MouseEvent): void => {
     if (ref.current && !ref.current.contains(e.target as HTMLInputElement)) {
       callback();
     }
-  };
+  }, [callback, ref]);
 
   useEffect(() => {
     document.addEventListener('click', handleClick);