Adjust Menu.Divider (only when between items) (#4560)

* Adjust Menu.Divider (only when between items)

* typos

packages/page-accounts/src/Accounts/Account.tsx

@@ -228,7 +228,7 @@ function Account ({ account: { address, meta }, className = '', delegation, filt
               <Badge
                 className='devBadge'
                 color='orange'
-                hover={t<string>('This is a development account derived from the known development seed. Do now use for any funds on a non-development network.')}
+                hover={t<string>('This is a development account derived from the known development seed. Do not use for any funds on a non-development network.')}
                 icon='wrench'
               />
             )
@@ -238,7 +238,6 @@ function Account ({ account: { address, meta }, className = '', delegation, filt
                 hover={
                   <div>
                     <p>{t<string>('This account is available on all networks. It is recommended to link to a specific network via the account options ("only this network" option) to limit availability. For accounts from an extension, set the network on the extension.')}</p>
-                    <p>{t<string>('This is especially prudent in cases where the address is only destined to be used on a single network or linked to a specific device.')}</p>
                     <p>{t<string>('This does not send any transaction, rather is only sets the genesis in the account JSON.')}</p>
                   </div>
                 }
@@ -602,12 +601,14 @@ function Account ({ account: { address, meta }, className = '', delegation, filt
                 }
               </Menu.Item>
             ])}
-            <ChainLock
-              className='accounts--network-toggle'
-              genesisHash={genesisHash}
-              isDisabled={api.isDevelopment || !isEditable}
-              onChange={onSetGenesisHash}
-            />
+            {isEditable && !api.isDevelopment && createMenuGroup([
+              <ChainLock
+                className='accounts--network-toggle'
+                genesisHash={genesisHash}
+                key='chainlock'
+                onChange={onSetGenesisHash}
+              />
+            ])}
           </Menu>
         </Popup>
       </td>

packages/page-accounts/src/util.tsx

@@ -13,7 +13,7 @@ export function createMenuGroup (items: (React.ReactNode | false | undefined | n
   const filtered = items.filter((item): item is React.ReactNode => !!item);
 
   return filtered.length
-    ? <>{filtered}<Menu.Divider /></>
+    ? <><Menu.Divider />{filtered}</>
     : null;
 }
 

packages/page-addresses/src/Contacts/Address.tsx

@@ -227,13 +227,16 @@ function Address ({ address, className = '', filter, isFavorite, toggleFavorite
             >
               {t<string>('Forget this address')}
             </Menu.Item>
-            <Menu.Divider />
-            <ChainLock
-              className='addresses--network-toggle'
-              genesisHash={genesisHash}
-              isDisabled={!isEditable || api.isDevelopment}
-              onChange={_onGenesisChange}
-            />
+            {isEditable && !api.isDevelopment && (
+              <>
+                <Menu.Divider />
+                <ChainLock
+                  className='addresses--network-toggle'
+                  genesisHash={genesisHash}
+                  onChange={_onGenesisChange}
+                />
+              </>
+            )}
           </Menu>
         </Popup>
       </td>

packages/react-components/src/Menu.tsx

@@ -2,6 +2,7 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import { Divider as SUIDivider, Menu as SUIMenu } from 'semantic-ui-react';
+import styled from 'styled-components';
 
 type MenuDef = typeof SUIMenu & {
   Divider: typeof SUIDivider;
@@ -11,4 +12,12 @@ const Menu: MenuDef = SUIMenu as MenuDef;
 
 Menu.Divider = SUIDivider;
 
-export default Menu;
+export default styled(Menu)`
+  .ui.divider {
+    display: none;
+  }
+
+  .item+.ui.divider {
+    display: block;
+  }
+`;