Create 'AsideSection' component

src/js/components/wallet/aside/AccountSelection.js

@@ -10,6 +10,8 @@ import * as stateUtils from 'reducers/utils';
 import Loader from 'components/common/LoaderCircle';
 import Tooltip from 'rc-tooltip';
 
+import AsideSection from './AsideSection';
+
 import type { TrezorDevice, Accounts } from 'flowtype';
 import type { Props } from './index';
 
@@ -128,13 +130,13 @@ const AccountSelection = (props: Props): ?React$Element<string> => {
     }
 
     return (
-        <section>
+        <AsideSection>
             { backButton }
             <div>
                 { selectedAccounts }
             </div>
             { discoveryStatus }
-        </section>
+        </AsideSection>
     );
 };
 

src/js/components/wallet/aside/AsideSection.js

@@ -0,0 +1,16 @@
+import styled from 'styled-components';
+import React from 'react';
+
+const Section = styled.section`
+    width: 320px;
+    display: inline-block;
+    vertical-align: top;
+`;
+
+const AsideSection = (props) => (
+    <Section>
+        {props.children}
+    </Section>
+);
+
+export default AsideSection;

src/js/components/wallet/aside/CoinSelection.js

@@ -4,18 +4,14 @@ import styled from 'styled-components';
 import React from 'react';
 import { NavLink } from 'react-router-dom';
 
+import AsideDivider from './AsideDivider';
 import AsideRowCoinWallet from './AsideRowCoinWallet';
 import AsideRowCoinExternal from './AsideRowCoinExternal';
-import AsideDivider from './AsideDivider';
+import AsideSection from './AsideSection';
 
 import type { TrezorDevice } from 'flowtype';
 import type { Props } from './index';
 
-const Section = styled.section`
-    width: 320px;
-    display: inline-block;
-    vertical-align: top;
-`;
 
 const CoinSelection = (props: Props): React$Element<string> => {
     const { location } = props.router;
@@ -54,7 +50,7 @@ const CoinSelection = (props: Props): React$Element<string> => {
     });
 
     return (
-        <Section>
+        <AsideSection>
             { walletCoins }
             <AsideDivider
                 textLeft={'Other coins'}
@@ -103,7 +99,7 @@ const CoinSelection = (props: Props): React$Element<string> => {
                 }}
                 url={'https://wallet.trezor.io/#/coin/zec'}
             />
-        </Section>
+        </AsideSection>
     );
 };
 

src/js/components/wallet/aside/DeviceSelection.js

@@ -10,6 +10,8 @@ import AsideDivider from './AsideDivider';
 import type { TrezorDevice } from 'flowtype';
 import type { Props } from './index';
 
+import AsideSection from './AsideSection';
+
 export const DeviceSelect = (props: Props) => {
     const { devices } = props;
     const { transport } = props.connect;
@@ -214,12 +216,12 @@ export class DeviceDropdown extends Component<Props> {
 
 
         return (
-            <section>
+            <AsideSection>
                 { currentDeviceMenu }
                 { deviceList.length > 1 ? <AsideDivider textLeft={'Other devices'}/> : null }
                 { deviceList }
                 { webUsbButton }
-            </section>
+            </AsideSection>
         );
     }
 }