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

@@ -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;
   }

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;
   }
 `);

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;
+  }
+`);

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';