Adjust account menu position (#367)

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
+      <div className='menuItem'>
-        checked={!isHidden}
+        <Checkbox
-        className='menuItem'
+          checked={!isHidden}
-        label='Visible (always inject)'
+          className='inputItem'
-        onClick={_toggleVisibility}
+          label='Visible (always inject)'
-      />
+          onClick={_toggleVisibility}
-      <Dropdown
+        />
-        className='menuItem'
+      </div>
-        label=''
+      <div className='menuItem'>
-        onChange={_onChangeGenesis}
+        <Dropdown
-        options={genesisOptions}
+          className='inputItem'
-        value={genesisHash || ''}
+          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;
+    }
   }
 `;

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) => `

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%;
 

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);