Add hover to the expand button (#6052)

* Extract ExpandButton

* Add simple hover

* Lint fixes after merge

Co-authored-by: Jaco Greeff <jacogr@gmail.com>

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

@@ -16,7 +16,7 @@ import React, { useCallback, useContext, useEffect, useMemo, useState } from 're
 import styled, { ThemeContext } from 'styled-components';
 
 import { ApiPromise } from '@polkadot/api';
-import { AddressInfo, AddressSmall, Badge, Button, ChainLock, CryptoType, Forget, Icon, IdentityIcon, LinkExternal, Menu, Popup, StatusContext, Tags } from '@polkadot/react-components';
+import { AddressInfo, AddressSmall, Badge, Button, ChainLock, CryptoType, ExpandButton, Forget, Icon, IdentityIcon, LinkExternal, Menu, Popup, StatusContext, Tags } from '@polkadot/react-components';
 import { useAccountInfo, useApi, useBalancesAll, useBestNumber, useCall, useLedger, useStakingInfo, useToggle } from '@polkadot/react-hooks';
 import { keyring } from '@polkadot/ui-keyring';
 import { BN_ZERO, formatBalance, formatNumber, isFunction } from '@polkadot/util';
@@ -659,18 +659,10 @@ function Account ({ account: { address, meta }, className = '', delegation, filt
                 </Menu>
               }
             />
-            <div
-              className='table-column-icon'
-              data-testid='row-toggle'
+            <ExpandButton
+              expanded={isExpanded}
               onClick={toggleIsExpanded}
-            >
-              <Icon icon={
-                isExpanded
-                  ? 'caret-up'
-                  : 'caret-down'
-              }
-              />
-            </div>
+            />
           </div>
         </td>
       </tr>
@@ -730,17 +722,6 @@ export default React.memo(styled(Account)`
     opacity: 0.65;
   }
 
-  .table-column-icon {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 1.7rem;
-    height: 1.7rem;
-    border: 1px solid var(--border-table);
-    border-radius: 4px;
-    cursor: pointer;
-  }
-
   && td.button {
     padding-bottom: 0.5rem;
   }

packages/page-bounties/src/Bounty.tsx

@@ -7,7 +7,7 @@ import type { BlockNumber, Bounty as BountyType, BountyIndex } from '@polkadot/t
 import React, { useCallback, useMemo, useState } from 'react';
 import styled from 'styled-components';
 
-import { AddressSmall, Icon, LinkExternal } from '@polkadot/react-components';
+import { AddressSmall, ExpandButton, LinkExternal } from '@polkadot/react-components';
 import { FormatBalance } from '@polkadot/react-query';
 import { formatNumber } from '@polkadot/util';
 
@@ -141,17 +141,10 @@ function Bounty ({ bestNumber, bounty, className = '', description, index, isEve
               proposals={proposals}
               status={status}
             />
-            <div
-              className='table-column-icon'
+            <ExpandButton
+              expanded={isExpanded}
               onClick={handleOnIconClick}
-            >
-              <Icon icon={
-                isExpanded
-                  ? 'caret-up'
-                  : 'caret-down'
-              }
-              />
-            </div>
+            />
           </div>
         </td>
       </tr>
@@ -236,17 +229,6 @@ export default React.memo(styled(Bounty)`
         margin-left: 0.285rem;
       }
     }
-
-    .table-column-icon {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      width: 1.7rem;
-      height: 1.7rem;
-      border: 1px solid var(--border-table);
-      border-radius: 4px;
-      cursor: pointer;
-    }
   }
 
   & .inline-balance {

packages/react-components/src/ExpandButton.tsx

@@ -0,0 +1,36 @@
+// Copyright 2017-2021 @polkadot/react-components authors & contributors
+// SPDX-License-Identifier: Apache-2.0
+
+import React from 'react';
+import styled from 'styled-components';
+
+import { Icon } from '@polkadot/react-components';
+
+interface Props {
+  onClick: () => void;
+  expanded: boolean;
+  className?: string;
+}
+
+function ExpandButton ({ className = '', expanded, onClick }: Props): React.ReactElement<Props> {
+  return (
+    <div
+      className={`ui--ExpandButton ${className}`}
+      data-testid='row-toggle'
+      onClick={onClick}
+    >
+      <Icon icon={expanded ? 'caret-up' : 'caret-down'} />
+    </div>
+  );
+}
+
+export default React.memo(styled(ExpandButton)`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 1.7rem;
+  height: 1.7rem;
+  border: 1px solid var(--border-table);
+  border-radius: 4px;
+  cursor: pointer;
+`);

packages/react-components/src/index.tsx

@@ -97,5 +97,6 @@ export { default as TxButton } from './TxButton';
 export { default as VoteAccount } from './VoteAccount';
 export { default as VoteValue } from './VoteValue';
 export { default as TextArea } from './TextArea';
+export { default as ExpandButton } from './ExpandButton';
 
 export { default as media } from './media';

packages/react-components/src/styles/index.ts

@@ -311,6 +311,14 @@ export default createGlobalStyle<Props & ThemeProps>(({ theme, uiHighlight }: Pr
     }
   }
 
+  .ui--ExpandButton:hover {
+    border-color: ${getHighlight(uiHighlight)} !important;
+
+    .ui--Icon {
+      color: ${getHighlight(uiHighlight)} !important;
+    }
+  }
+
   .ui--Tag.themeColor.lightTheme,
   .ui--InputTags.lightTheme .ui.label {
     background: ${hexToRGB(getHighlight(uiHighlight), '0.08')};