Dashboard refactored

src/js/components/wallet/pages/Dashboard.js

@@ -1,20 +1,44 @@
-/* @flow */
-
-
 import React from 'react';
-import { H2 } from '~/js/components/common/Heading';
+import styled from 'styled-components';
 import { connect } from 'react-redux';
+
+import { H2 } from '~/js/components/common/Heading';
 import DashboardImg from '~/images/dashboard.png';
 
+const Wrapper = styled.div`
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+`;
+
+const StyledH2 = styled(H2)`
+    padding: 24px 48px;
+`;
+
+const Row = styled.div`
+    flex: 1;
+    display: flex;
+    padding: 0px 48px;
+    
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+`;
+
+const P = styled.p`
+    padding: 24px 0px;
+    text-align: center;
+`;
+
 const Dashboard = () => (
-    <section className="dashboard">
-        <H2>Dashboard</H2>
-        <div className="row">
+    <Wrapper>
+        <StyledH2>Dashboard</StyledH2>
+        <Row>
             <H2>Please select your coin</H2>
-            <p>You will gain access to recieving &amp; sending selected coin</p>
+            <P>You will gain access to recieving &amp; sending selected coin</P>
             <img src={DashboardImg} height="34" width="auto" alt="Dashboard" />
-        </div>
-    </section>
+        </Row>
+    </Wrapper>
 );
 
 export default connect(null, null)(Dashboard);

src/styles/dashboard.less

@@ -1,24 +0,0 @@
-.dashboard {
-
-    //height: 1000px;
-
-    .row {
-        flex: 1;
-        
-        display: flex;
-        flex-direction: column;
-        justify-content: center;
-        align-items: center;
-        padding: 0px 48px;
-        padding-bottom: 98px;
-
-        h2 {
-            padding: 0;
-        }
-
-        p {
-            padding: 24px 0px;
-            text-align: center;
-        }
-    }
-}

src/styles/index.less

@@ -10,7 +10,6 @@
 @import './reactSelect.less';
 @import './rcTooltip.less';
 
-
 @import './history.less';
 @import './send.less';
 @import './receive.less';
@@ -19,7 +18,6 @@
 
 @import './landingPage.less';
 
-@import './dashboard.less';
 @import './acquire.less';
 @import './notification.less';