Added content for padding

src/components/WalletViewContainer/index.js

@@ -1,54 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import styled from 'styled-components';
-import colors from 'config/colors';
-import { FONT_SIZE, FONT_WEIGHT, FONT_FAMILY } from 'config/variables';
-
-const Wrapper = styled.div`
-   padding:
-`;
-
-const Textarea = ({
-    className,
-    placeholder = '',
-    value,
-    customStyle = {},
-    onFocus,
-    onBlur,
-    isDisabled,
-    onChange,
-    isError,
-    topLabel,
-}) => (
-    <Wrapper>
-        {topLabel && (
-            <TopLabel>{topLabel}</TopLabel>
-        )}
-        <StyledTextarea
-            className={className}
-            disabled={isDisabled}
-            style={customStyle}
-            onFocus={onFocus}
-            onBlur={onBlur}
-            value={value}
-            placeholder={placeholder}
-            onChange={onChange}
-            isError={isError}
-        />
-    </Wrapper>
-);
-
-Textarea.propTypes = {
-    className: PropTypes.string,
-    isError: PropTypes.bool,
-    onFocus: PropTypes.func,
-    onBlur: PropTypes.func,
-    onChange: PropTypes.func,
-    customStyle: PropTypes.string,
-    placeholder: PropTypes.string,
-    value: PropTypes.string,
-    isDisabled: PropTypes.bool,
-    topLabel: PropTypes.node,
-};
-
-export default Textarea;

src/views/Wallet/components/Content/index.js

@@ -0,0 +1,24 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import styled from 'styled-components';
+
+const Wrapper = styled.div`
+    display: flex;
+    flex: 1;
+    flex-direction: column;
+    padding: 40px 35px 40px 35px;
+`;
+
+const Content = ({
+    children,
+}) => (
+    <Wrapper>
+        {children}
+    </Wrapper>
+);
+
+Content.propTypes = {
+    children: PropTypes.element,
+};
+
+export default Content;

src/views/Wallet/index.js

@@ -77,7 +77,6 @@ const Body = styled.div`
     display: flex;
     flex: 1;
     flex-direction: column;
-    padding: 40px 35px 40px 35px;
 `;
 
 const Wallet = (props: WalletContainerProps) => (

src/views/Wallet/views/Account/Receive/index.js

@@ -5,6 +5,7 @@ import { H2 } from 'components/Heading';
 import Button from 'components/Button';
 import Icon from 'components/Icon';
 import ICONS from 'config/icons';
+import Content from 'views/Wallet/components/Content';
 import colors from 'config/colors';
 
 import Tooltip from 'components/Tooltip';
@@ -142,6 +143,7 @@ const AccountReceive = (props: Props) => {
 
     return (
         <SelectedAccount {...props}>
+            <Content>
                 <Wrapper>
                     <H2>Receive Ethereum or tokens</H2>
                     <AddressWrapper
@@ -215,6 +217,7 @@ const AccountReceive = (props: Props) => {
                         )}
                     </AddressWrapper>
                 </Wrapper>
+            </Content>
         </SelectedAccount>
     );
 };

src/views/Wallet/views/Account/Send/index.js

@@ -12,6 +12,7 @@ import { FONT_SIZE, FONT_WEIGHT, TRANSITION } from 'config/variables';
 import colors from 'config/colors';
 import P from 'components/Paragraph';
 import { H2 } from 'components/Heading';
+import Content from 'views/Wallet/components/Content';
 import SelectedAccount from 'views/Wallet/components/SelectedAccount';
 import type { Token } from 'flowtype';
 import AdvancedForm from './components/AdvancedForm';
@@ -230,6 +231,7 @@ const AccountSend = (props: Props) => {
 
     return (
         <SelectedAccount {...props}>
+            <Content>
                 <Wrapper>
                     <H2>Send Ethereum or tokens</H2>
                     <InputRow>
@@ -372,6 +374,7 @@ const AccountSend = (props: Props) => {
                         />
                     )}
                 </Wrapper>
+            </Content>
         </SelectedAccount>
     );
 };

src/views/Wallet/views/Account/SignVerify/index.js

@@ -2,6 +2,7 @@ import React from 'react';
 import styled from 'styled-components';
 import Input from 'components/inputs/Input';
 import Textarea from 'components/Textarea';
+import Content from 'views/Wallet/components/Content';
 
 import { H2 } from 'components/Heading';
 import colors from 'config/colors';
@@ -35,6 +36,7 @@ const Label = styled.div`
 `;
 
 const AccountSignVerify = () => (
+    <Content>
         <Wrapper>
             <Sign>
                 <StyledH2>Sign message</StyledH2>
@@ -55,6 +57,7 @@ const AccountSignVerify = () => (
                 <Textarea rows="4" maxLength="255" />
             </Verify>
         </Wrapper>
+    </Content>
 );
 
 export default AccountSignVerify;

src/views/Wallet/views/Account/Summary/index.js

@@ -8,6 +8,7 @@ import { AsyncSelect } from 'components/Select';
 import ICONS from 'config/icons';
 import colors from 'config/colors';
 import Tooltip from 'components/Tooltip';
+import Content from 'views/Wallet/components/Content';
 
 import CoinLogo from 'components/images/CoinLogo';
 import * as stateUtils from 'reducers/utils';
@@ -77,6 +78,7 @@ const AccountSummary = (props: Props) => {
 
     return (
         <SelectedAccount {...props}>
+            <Content>
                 <AccountHeading>
                     <AccountName>
                         <StyledCoinLogo coinNetwork={account.network} />
@@ -155,6 +157,7 @@ const AccountSummary = (props: Props) => {
                         />
                     ))}
                 </AddedTokensWrapper>
+            </Content>
         </SelectedAccount>
     );
 };

src/views/Wallet/views/Dashboard/index.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import styled from 'styled-components';
 import { connect } from 'react-redux';
+import Content from 'views/Wallet/components/Content';
 
 import { H2 } from 'components/Heading';
 import DashboardImg from 'images/dashboard.png';
@@ -27,6 +28,7 @@ const P = styled.p`
 `;
 
 const Dashboard = () => (
+    <Content>
         <Wrapper>
             <H2>Dashboard</H2>
             <Row>
@@ -35,6 +37,7 @@ const Dashboard = () => (
                 <img src={DashboardImg} height="34" width="auto" alt="Dashboard" />
             </Row>
         </Wrapper>
+    </Content>
 );
 
 export default connect(null, null)(Dashboard);

src/views/Wallet/views/DeviceSettings/index.js

@@ -7,6 +7,7 @@ import Button from 'components/Button';
 import P from 'components/Paragraph';
 import Link from 'components/Link';
 import ICONS from 'config/icons';
+import Content from 'views/Wallet/components/Content';
 import { connect } from 'react-redux';
 
 const Section = styled.section`
@@ -30,6 +31,7 @@ const StyledP = styled(P)`
 `;
 
 const DeviceSettings = () => (
+    <Content>
         <Section>
             <Row>
                 <Icon
@@ -44,6 +46,7 @@ const DeviceSettings = () => (
                 </Link>
             </Row>
         </Section>
+    </Content>
 );
 
 export default connect(null, null)(DeviceSettings);

src/views/Wallet/views/WalletSettings/index.js

@@ -1,13 +1,16 @@
 import styled from 'styled-components';
 import React from 'react';
 import { connect } from 'react-redux';
+import Content from 'views/Wallet/components/Content';
 
 const Wrapper = styled.div``;
 
 const WalletSettings = () => (
+    <Content>
         <Wrapper>
             Wallet settings
         </Wrapper>
+    </Content>
 );
 
 export default connect(null, null)(WalletSettings);

webpack/production.babel.js

@@ -65,7 +65,7 @@ module.exports = {
     plugins: [
         new webpack.DefinePlugin({
             'process.env.BUILD': JSON.stringify(process.env.BUILD),
-            COMMITHASH: JSON.stringify(gitRevisionPlugin.commithash())
+            COMMITHASH: JSON.stringify(gitRevisionPlugin.commithash()),
         }),
         new HtmlWebpackPlugin({
             chunks: ['index'],