Consistent staking filter placement (#1064)

packages/app-accounts/src/index.tsx

@@ -101,7 +101,7 @@ class AccountsApp extends React.PureComponent<Props, State> {
 
     return (
       <main className='accounts--App'>
-      <HelpOverlay md={basicMd} />
+        <HelpOverlay md={basicMd} />
         <header>
           <Tabs
             basePath={basePath}

packages/app-address-book/src/index.tsx

@@ -88,7 +88,7 @@ class AddressBookApp extends React.PureComponent<Props, State> {
 
     return (
       <main className='address-book--App'>
-      <HelpOverlay md={basicMd} />
+        <HelpOverlay md={basicMd} />
         <header>
           <Tabs
             basePath={basePath}

packages/app-democracy/src/index.tsx

@@ -23,7 +23,7 @@ class App extends React.PureComponent<Props> {
 
     return (
       <main className='democracy--App'>
-      <HelpOverlay md={basicMd} />
+        <HelpOverlay md={basicMd} />
         <header>
           <Tabs
             basePath={basePath}

packages/app-staking/src/Accounts.tsx

@@ -7,7 +7,7 @@ import { AccountFilter, ComponentProps } from './types';
 
 import React from 'react';
 import styled from 'styled-components';
-import { Dropdown } from '@polkadot/ui-app';
+import { Dropdown, FilterOverlay } from '@polkadot/ui-app';
 import { getAddrName } from '@polkadot/ui-app/util';
 import keyring from '@polkadot/ui-keyring';
 import createOption from '@polkadot/ui-keyring/options/item';
@@ -34,16 +34,6 @@ const Wrapper = styled.div`
       padding: 1rem 1.5rem;
     }
   }
-
-  .filter {
-    display: flex;
-    justify-content: flex-end;
-    margin-bottom: 0.75rem;
-
-    > div {
-      max-width: 30rem;
-    }
-  }
 `;
 
 class Accounts extends React.PureComponent<Props, State> {
@@ -72,7 +62,7 @@ class Accounts extends React.PureComponent<Props, State> {
 
     return (
       <Wrapper>
-        <div className='filter'>
+        <FilterOverlay>
           <Dropdown
             help={t('Select which types of accounts to display, either all, only the stash accounts or the controller accounts.')}
             label={t('filter')}
@@ -80,7 +70,7 @@ class Accounts extends React.PureComponent<Props, State> {
             options={filterOptions}
             value={filter}
           />
-        </div>
+        </FilterOverlay>
         <div className='accounts'>
           {accounts.map((account) => {
             const address = account.address();

packages/app-staking/src/Overview/CurrentList.tsx

@@ -7,8 +7,7 @@ import { I18nProps } from '@polkadot/ui-app/types';
 import { ValidatorFilter, RecentlyOfflineMap } from '../types';
 
 import React from 'react';
-import styled from 'styled-components';
-import { Dropdown } from '@polkadot/ui-app';
+import { Dropdown, FilterOverlay } from '@polkadot/ui-app';
 
 import translate from '../translate';
 import Address from './Address';
@@ -27,18 +26,6 @@ type State = {
   filterOptions: Array<{ text: React.ReactNode, value: ValidatorFilter }>
 };
 
-const Wrapper = styled.div`
-  .filter {
-    display: flex;
-    justify-content: flex-end;
-    margin-bottom: 0.75rem;
-
-    > div {
-      max-width: 35rem;
-    }
-  }
-`;
-
 class CurrentList extends React.PureComponent<Props, State> {
   state: State;
 
@@ -64,8 +51,8 @@ class CurrentList extends React.PureComponent<Props, State> {
     const { t } = this.props;
     const { filter, filterOptions } = this.state;
     return (
-      <Wrapper>
-        <div className='filter'>
+      <div>
+        <FilterOverlay>
           <Dropdown
             help={t('Select which validators/intentions you want to display.')}
             label={t('filter')}
@@ -73,7 +60,7 @@ class CurrentList extends React.PureComponent<Props, State> {
             options={filterOptions}
             value={filter}
           />
-        </div>
+        </FilterOverlay>
         <div className='validator--ValidatorsList ui--flex-medium'>
           <div className='validator--current'>
             {this.renderCurrent()}
@@ -82,7 +69,7 @@ class CurrentList extends React.PureComponent<Props, State> {
             {this.renderNext()}
           </div>
         </div>
-      </Wrapper>
+      </div>
     );
   }
 

packages/app-transfer/src/index.tsx

@@ -20,7 +20,7 @@ class App extends React.PureComponent<Props> {
 
     return (
       <main className='transfer--App'>
-      <HelpOverlay md={basicMd} />
+        <HelpOverlay md={basicMd} />
         <header>
           <Tabs
             basePath={basePath}

packages/ui-app/src/FilterOverlay.tsx

@@ -0,0 +1,48 @@
+// Copyright 2017-2019 @polkadot/ui-app authors & contributors
+// This software may be modified and distributed under the terms
+// of the Apache-2.0 license. See the LICENSE file for details.
+
+import { BareProps } from './types';
+
+import React from 'react';
+import styled from 'styled-components';
+
+import media from './media';
+
+type Props = BareProps & {
+  children: React.ReactNode
+};
+
+const Wrapper = styled.div`
+  display: flex;
+  justify-content: flex-end;
+  position: absolute;
+  right: 5rem;
+  top: 0.4rem;
+
+  > div {
+    max-width: 35rem;
+  }
+
+  .ui--Labelled label {
+    display: none;
+  }
+
+  ${media.DESKTOP`
+    .ui--Labelled label {
+      display: flex;
+    }
+  `}
+`;
+
+export default class FilterOverlay extends React.PureComponent<Props> {
+  render () {
+    const { children } = this.props;
+
+    return (
+      <Wrapper>
+        {children}
+      </Wrapper>
+    );
+  }
+}

packages/ui-app/src/index.tsx

@@ -16,6 +16,7 @@ export { default as Dropdown } from './Dropdown';
 export { default as Editor } from './Editor';
 export { default as Event } from './Event';
 export { default as Extrinsic } from './Extrinsic';
+export { default as FilterOverlay } from './FilterOverlay';
 export { default as HelpOverlay } from './HelpOverlay';
 export { default as Icon } from './Icon';
 export { default as IdentityIcon } from './IdentityIcon';

packages/ui-app/src/media.ts

@@ -3,6 +3,7 @@
 // of the Apache-2.0 license. See the LICENSE file for details.
 
 import { css } from 'styled-components';
+
 import { ScreenSizes } from './constants';
 
 type MediaCss = {