From 25c275cd13d3a3c1ca1441a5f77c5b6aed65ad5a Mon Sep 17 00:00:00 2001
From: MiZiet <55240109+MiZiet@users.noreply.github.com>
Date: Tue, 14 Sep 2021 09:03:44 +0200
Subject: [PATCH] Style sort dropdown (#6099)

* Style sort dropdown

* Use default icons

* Use rems

* Extract border-input variable
---
 packages/apps/public/index.html               |   1 +
 packages/page-accounts/src/Accounts/index.tsx |  32 +---
 packages/page-claims/src/index.tsx            |   2 +-
 .../page-contracts/src/shared/Messages.tsx    |   2 +-
 packages/react-components/src/Editor.tsx      |   2 +-
 .../src/InputAddressMulti/index.tsx           |   2 +-
 packages/react-components/src/InputFile.tsx   |   2 +-
 packages/react-components/src/InputNumber.tsx |   2 +-
 .../react-components/src/SortDropdown.tsx     | 142 ++++++++++++++++++
 packages/react-components/src/index.tsx       |   1 +
 packages/react-components/src/styles/index.ts |  28 ++++
 11 files changed, 182 insertions(+), 34 deletions(-)
 create mode 100644 packages/react-components/src/SortDropdown.tsx

diff --git a/packages/apps/public/index.html b/packages/apps/public/index.html
index 297d9fe8fb..c5172318c4 100644
--- a/packages/apps/public/index.html
+++ b/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"] {
diff --git a/packages/page-accounts/src/Accounts/index.tsx b/packages/page-accounts/src/Accounts/index.tsx
index f0f6c71122..b56d46e90f 100644
--- a/packages/page-accounts/src/Accounts/index.tsx
+++ b/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;
-  }
 `);
diff --git a/packages/page-claims/src/index.tsx b/packages/page-claims/src/index.tsx
index 17245f6dfe..6cdf85b55d 100644
--- a/packages/page-claims/src/index.tsx
+++ b/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;
diff --git a/packages/page-contracts/src/shared/Messages.tsx b/packages/page-contracts/src/shared/Messages.tsx
index 1d9b4120bf..ce11551eb4 100644
--- a/packages/page-contracts/src/shared/Messages.tsx
+++ b/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%;
diff --git a/packages/react-components/src/Editor.tsx b/packages/react-components/src/Editor.tsx
index a58046767d..bf148ccf58 100644
--- a/packages/react-components/src/Editor.tsx
+++ b/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;
   }
 
diff --git a/packages/react-components/src/InputAddressMulti/index.tsx b/packages/react-components/src/InputAddressMulti/index.tsx
index 51ecb69303..543e82a9e0 100644
--- a/packages/react-components/src/InputAddressMulti/index.tsx
+++ b/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;
diff --git a/packages/react-components/src/InputFile.tsx b/packages/react-components/src/InputFile.tsx
index b38500cd1b..c36553d52f 100644
--- a/packages/react-components/src/InputFile.tsx
+++ b/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;
diff --git a/packages/react-components/src/InputNumber.tsx b/packages/react-components/src/InputNumber.tsx
index 461371155a..2eb353c471 100644
--- a/packages/react-components/src/InputNumber.tsx
+++ b/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;
diff --git a/packages/react-components/src/SortDropdown.tsx b/packages/react-components/src/SortDropdown.tsx
new file mode 100644
index 0000000000..2b3740ec72
--- /dev/null
+++ b/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;
+  }
+`);
diff --git a/packages/react-components/src/index.tsx b/packages/react-components/src/index.tsx
index 8a7216dfe8..93ea643113 100644
--- a/packages/react-components/src/index.tsx
+++ b/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';
diff --git a/packages/react-components/src/styles/index.ts b/packages/react-components/src/styles/index.ts
index 9e13405b9e..5468ebd3be 100644
--- a/packages/react-components/src/styles/index.ts
+++ b/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{