Style sort dropdown (#6099)

* Style sort dropdown

* Use default icons

* Use rems

* Extract border-input variable

packages/apps/public/index.html

@@ -17,6 +17,7 @@
         --width-full: 1750px;
         --width-half: 875px;
         --bg-menu-hover: rgba(255, 255, 255, 0.2);
+        --border-input: rgba(34, 36, 38, .15);
       }
 
       [data-theme="dark"] {

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

@@ -9,7 +9,7 @@ import type { AccountBalance, Delegation, SortedAccount } from '../types';
 import React, { ReactElement, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import styled from 'styled-components';
 
-import { Button, Dropdown, Input, SummaryBox, Table } from '@polkadot/react-components';
+import { Button, Input, SortDropdown, SummaryBox, Table } from '@polkadot/react-components';
 import { useAccounts, useApi, useCall, useFavorites, useIpfs, useLedger, useLoadingDelay, useToggle } from '@polkadot/react-hooks';
 import { keyring } from '@polkadot/ui-keyring';
 import { BN_ZERO } from '@polkadot/util';
@@ -273,17 +273,13 @@ function Overview ({ className = '', onStatusChange }: Props): React.ReactElemen
           className='dropdown-section'
           data-testid='sort-by-section'
         >
-          <Dropdown
+          <SortDropdown
             defaultValue={sortBy}
             label={t<string>('sort by')}
             onChange={onDropdownChange()}
-            options={dropdownOptions()}
-          />
-          <Button
-            className='sort-direction-button'
-            icon='arrows-alt-v'
-            isCircular
             onClick={onSortDirectionChange()}
+            options={dropdownOptions()}
+            sortDirection={sortFromMax ? 'ascending' : 'descending'}
           />
         </section>
       </SummaryBox>
@@ -305,29 +301,9 @@ function Overview ({ className = '', onStatusChange }: Props): React.ReactElemen
 }
 
 export default React.memo(styled(Overview)`
-  .filter--tags {
-    .ui--Dropdown {
-      padding-left: 0;
-
-      label {
-        left: 1.55rem;
-      }
-    }
-  }
-
-  .ui--Dropdown {
-    max-width: 185px;
-    align: flex start;
-    margin-left: -28px;
-  }
-
   .dropdown-section {
     display: flex;
     flex-direction: row;
     align-items: center;
   }
-
-  .sort-direction-button {
-    padding: revert;
-  }
 `);

packages/page-claims/src/index.tsx

@@ -50,7 +50,7 @@ const Payload = styled.pre`
 const Signature = styled.textarea`
   font: var(--font-mono);
   padding: 1rem;
-  border: 1px solid rgba(34, 36, 38, 0.15);
+  border: 1px solid var(--border-input);
   border-radius: 0.25rem;
   margin: 1rem 0;
   resize: none;

packages/page-contracts/src/shared/Messages.tsx

@@ -125,7 +125,7 @@ export default React.memo(styled(Messages)`
   &.isLabelled {
     background: var(--bg-input);
     box-sizing: border-box;
-    border: 1px solid rgba(34,36,38,.15);
+    border: 1px solid var(--border-input);
     border-radius: .28571429rem;
     padding: 1rem 1rem 0.5rem;
     width: 100%;

packages/react-components/src/Editor.tsx

@@ -70,7 +70,7 @@ function Editor ({ className = '', code, isValid, onEdit }: Props): React.ReactE
 
 export default React.memo(styled(Editor)`
   .codeflask {
-    border: 1px solid rgba(34,36,38,.15);
+    border: 1px solid var(--border-input);
     background: transparent;
   }
 

packages/react-components/src/InputAddressMulti/index.tsx

@@ -137,7 +137,7 @@ export default React.memo(styled(InputAddressMulti)`
       .ui--InputAddressMulti-items {
         padding: 0.5rem 0;
         background: var(--bg-input);
-        border: 1px solid rgba(34,36,38,0.15);
+        border: 1px solid var(--border-input);
         border-radius: 0.286rem 0.286rem;
         flex: 1;
         overflow-y: auto;

packages/react-components/src/InputFile.tsx

@@ -136,7 +136,7 @@ function InputFile ({ accept, className = '', clearContent, help, isDisabled, is
 
 export default React.memo(styled(InputFile)`
   background: var(--bg-input);
-  border: 1px solid rgba(34, 36, 38, 0.15);
+  border: 1px solid var(--border-input);
   border-radius: 0.28571429rem;
   font-size: 1rem;
   margin: 0.25rem 0;

packages/react-components/src/InputNumber.tsx

@@ -316,7 +316,7 @@ export default React.memo(styled(InputNumber)`
   &.isDisabled {
     .ui--SiDropdown {
       background: transparent;
-      border-color: rgba(34, 36, 38, .15) !important;
+      border-color: var(--border-input) !important;
       border-style: dashed;
       color: #666 !important;
       cursor: default !important;

packages/react-components/src/SortDropdown.tsx

@@ -0,0 +1,142 @@
+// Copyright 2017-2021 @polkadot/react-components authors & contributors
+// SPDX-License-Identifier: Apache-2.0
+
+import React from 'react';
+import styled from 'styled-components';
+
+import { Dropdown, Icon } from './';
+
+interface Props {
+  className?: string;
+  defaultValue: string;
+  label: string;
+  onChange: (value: unknown) => void;
+  onClick: () => void;
+  options: unknown[];
+  sortDirection: 'descending' | 'ascending';
+}
+
+function SortDropdown ({ className = '', defaultValue, label, onChange, onClick, options, sortDirection }: Props): React.ReactElement<Props> {
+  return (
+    <div className={`ui--Sort ${className}`}>
+      <Dropdown
+        defaultValue={defaultValue}
+        label={label}
+        onChange={onChange}
+        options={options}
+      />
+      <button onClick={onClick}>
+        <Icon
+          className={`arrow up${sortDirection === 'ascending' ? ' isActive' : ''}`}
+          color='gray'
+          icon='sort-up'
+        />
+        <Icon
+          className={`arrow down${sortDirection === 'descending' ? ' isActive' : ''}`}
+          color='gray'
+          icon='sort-down'
+        />
+      </button>
+    </div>
+  );
+}
+
+export default React.memo(styled(SortDropdown)`
+  position: relative;
+
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+
+  && .ui--Labelled.ui--Dropdown {
+    padding: 0;
+
+    label {
+      left: 1.55rem;
+      z-index: 115;
+    }
+
+    .ui.selection.dropdown {
+      margin:0;
+      min-width: 7.857rem;
+      z-index: 110;
+
+      border-width: 1px 0 1px 1px;
+      border-style: solid;
+      border-color: var(--border-input);
+      border-radius: 4px 0 0 4px;
+
+      &.active {
+        position: absolute;
+        min-width: 10.714rem;
+
+        z-index: 120;
+
+        border-width: 1px;
+        border-radius: 4px;
+        top: 0;
+        left: 0;
+      }
+
+      .visible.menu {
+        border-color: var(--border-input);
+      }
+    }
+  }
+
+  button {
+    position: relative;
+    width: 2.857rem;
+    height: 3.893rem;
+
+    background-color: var(--bg-input);
+
+    border-width: 1px 1px 1px 0;
+    border-style: solid;
+    border-color: var(--border-input);
+    border-radius: 0 4px 4px 0;
+
+    &:hover {
+      cursor: pointer;
+    }
+
+    .arrow.down {
+      position: absolute;
+      top: calc(50% - 0.5rem);
+      left: calc(50% - 0.313rem);
+    }
+  }
+
+  &::after {
+    content: '';
+    position: absolute;
+    left: 7.857rem;
+    top: 10%;
+
+    width: 1px;
+    height: 80%;
+
+    background-color: var(--border-input);
+    z-index: 99;
+  }
+
+  button:hover,
+  .ui--Labelled.ui--Dropdown:hover {
+      &::after {
+        content: '';
+        position: absolute;
+        top: 0;
+        height: 100%;
+        width: 1px;
+        z-index: 100;
+      }
+  }
+
+  button:hover::after {
+    left: 0;
+  }
+
+  .ui--Labelled.ui--Dropdown:hover::after {
+    left: 7.857rem;
+  }
+`);

packages/react-components/src/index.tsx

@@ -98,5 +98,6 @@ 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 SortDropdown } from './SortDropdown';
 
 export { default as media } from './media';

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

@@ -280,6 +280,34 @@ export default createGlobalStyle<Props & ThemeProps>(({ theme, uiHighlight }: Pr
     }
   }
 
+  .ui--Sort {
+    .ui--Labelled.ui--Dropdown:hover {
+     .ui.selection.dropdown {
+        border-color: ${getHighlight(uiHighlight)};
+
+       .visible.menu {
+         border: 1px solid ${getHighlight(uiHighlight)};
+        }
+      }
+    }
+
+    button:hover {
+      border-color: ${getHighlight(uiHighlight)};
+    }
+
+    button:hover,
+    .ui--Labelled.ui--Dropdown:hover {
+      &::after {
+        background-color:  ${getHighlight(uiHighlight)};
+      }
+    }
+
+    .arrow.isActive {
+      color:  ${getHighlight(uiHighlight)};
+      opacity: 1;
+    }
+  }
+
   .theme--dark,
   .theme--light {
     .ui--Tabs .tabLinkActive .tabLinkText::after{