From 1e7dc8b39955a2eff5b2b13aa6089707d2e42fe1 Mon Sep 17 00:00:00 2001
From: Ewa Kowalska <30404388+ekowalsk@users.noreply.github.com>
Date: Mon, 20 Sep 2021 19:52:27 +0200
Subject: [PATCH] Apply the same filter and buttons style to Contacts as in
 Accounts (#6155)

* Extract FilterInput component

* Apply filter input and buttons style as in accounts

* Remove filter--tags class name
---
 packages/page-accounts/src/Accounts/index.tsx | 30 +++--------
 .../page-addresses/src/Contacts/index.tsx     | 50 ++++++++-----------
 packages/react-components/src/FilterInput.tsx | 41 +++++++++++++++
 packages/react-components/src/index.tsx       |  1 +
 4 files changed, 68 insertions(+), 54 deletions(-)
 create mode 100644 packages/react-components/src/FilterInput.tsx

diff --git a/packages/page-accounts/src/Accounts/index.tsx b/packages/page-accounts/src/Accounts/index.tsx
index a2619f5547..ae4f70456b 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, Input, SortDropdown, SummaryBox, Table } from '@polkadot/react-components';
+import { Button, FilterInput, 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';
@@ -152,18 +152,6 @@ function Overview ({ className = '', onStatusChange }: Props): React.ReactElemen
 
   const _openCreateModal = useCallback(() => setIsCreateOpen(true), [setIsCreateOpen]);
 
-  const filter = useMemo(() => (
-    <div className='filter--tags'>
-      <Input
-        autoFocus
-        isFull
-        label={t<string>('filter by name or tags')}
-        onChange={setFilter}
-        value={filterOn}
-      />
-    </div>
-  ), [filterOn, t]);
-
   const accountComponents = useMemo(() => {
     const ret: Record<string, React.ReactNode> = {};
 
@@ -241,7 +229,11 @@ function Overview ({ className = '', onStatusChange }: Props): React.ReactElemen
             options={dropdownOptions()}
             sortDirection={sortFromMax ? 'ascending' : 'descending'}
           />
-          {filter}
+          <FilterInput
+            filterOn={filterOn}
+            label={t<string>('filter by name or tags')}
+            setFilter={setFilter}
+          />
         </section>
         <Button.Group>
           <Button
@@ -301,16 +293,6 @@ function Overview ({ className = '', onStatusChange }: Props): React.ReactElemen
 }
 
 export default React.memo(styled(Overview)`
-  .filter--tags {
-    width: 29.5rem;
-    margin-left: 1.5rem;
-
-    .ui--Input {
-      margin: 0;
-      height: 3.893rem;
-    }
-  }
-
   .ui--Dropdown {
     width: 15rem;
   }
diff --git a/packages/page-addresses/src/Contacts/index.tsx b/packages/page-addresses/src/Contacts/index.tsx
index ebad83bfea..eb7b1231aa 100644
--- a/packages/page-addresses/src/Contacts/index.tsx
+++ b/packages/page-addresses/src/Contacts/index.tsx
@@ -3,10 +3,10 @@
 
 import type { ComponentProps as Props } from '../types';
 
-import React, { useEffect, useMemo, useRef, useState } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import styled from 'styled-components';
 
-import { Button, Input, Table } from '@polkadot/react-components';
+import { Button, FilterInput, SummaryBox, Table } from '@polkadot/react-components';
 import { useAddresses, useFavorites, useLoadingDelay, useToggle } from '@polkadot/react-hooks';
 
 import CreateModal from '../modals/Create';
@@ -48,36 +48,32 @@ function Overview ({ className = '', onStatusChange }: Props): React.ReactElemen
     );
   }, [allAddresses, favorites]);
 
-  const filter = useMemo(() => (
-    <div className='filter--tags'>
-      <Input
-        autoFocus
-        isFull
-        label={t<string>('filter by name or tags')}
-        onChange={setFilter}
-        value={filterOn}
-      />
-    </div>
-  ), [filterOn, t]);
-
   return (
     <div className={className}>
-      <Button.Group>
-        <Button
-          icon='plus'
-          label={t<string>('Add contact')}
-          onClick={toggleCreate}
-        />
-      </Button.Group>
       {isCreateOpen && (
         <CreateModal
           onClose={toggleCreate}
           onStatusChange={onStatusChange}
         />
       )}
+      <SummaryBox className='summary-box-contacts'>
+        <section>
+          <FilterInput
+            filterOn={filterOn}
+            label={t<string>('filter by name or tags')}
+            setFilter={setFilter}
+          />
+        </section>
+        <Button.Group>
+          <Button
+            icon='plus'
+            label={t<string>('Add contact')}
+            onClick={toggleCreate}
+          />
+        </Button.Group>
+      </SummaryBox>
       <Table
         empty={!isLoading && sortedAddresses && t<string>('no addresses saved yet, add any existing address')}
-        filter={filter}
         header={headerRef.current}
       >
         {!isLoading && sortedAddresses?.map(({ address, isFavorite }, index): React.ReactNode => (
@@ -96,13 +92,7 @@ function Overview ({ className = '', onStatusChange }: Props): React.ReactElemen
 }
 
 export default React.memo(styled(Overview)`
-  .filter--tags {
-    .ui--Dropdown {
-      padding-left: 0;
-
-      label {
-        left: 1.55rem;
-      }
-    }
+  .summary-box-contacts {
+    align-items: center;
   }
 `);
diff --git a/packages/react-components/src/FilterInput.tsx b/packages/react-components/src/FilterInput.tsx
new file mode 100644
index 0000000000..7acce90343
--- /dev/null
+++ b/packages/react-components/src/FilterInput.tsx
@@ -0,0 +1,41 @@
+// Copyright 2017-2021 @polkadot/app-accounts authors & contributors
+// SPDX-License-Identifier: Apache-2.0
+
+import React from 'react';
+import styled from 'styled-components';
+
+import { Input } from '@polkadot/react-components/index';
+
+interface Props {
+  className?: string;
+  filterOn: string;
+  label: string;
+  setFilter: (filter: string) => void;
+}
+
+function Filter ({ className = '', filterOn, label, setFilter }: Props) {
+  return (
+    <div className={className}>
+      <Input
+        autoFocus
+        isFull
+        label={label}
+        onChange={setFilter}
+        value={filterOn}
+      />
+    </div>
+  );
+}
+
+export default React.memo(styled(Filter)`
+  width: 29.5rem;
+
+  :not(:only-child) {
+    margin-left: 1.5rem;
+  }
+
+  .ui--Input {
+    margin: 0;
+    height: 3.893rem;
+  }
+`);
diff --git a/packages/react-components/src/index.tsx b/packages/react-components/src/index.tsx
index 93ea643113..b7600c21ea 100644
--- a/packages/react-components/src/index.tsx
+++ b/packages/react-components/src/index.tsx
@@ -99,5 +99,6 @@ 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 FilterInput } from './FilterInput';
 
 export { default as media } from './media';