update icon

src/Pages/Home.js

@@ -11,14 +11,14 @@ const Data = [
 	{
 	{
 		title: 'Current chart',
 		title: 'Current chart',
 		backgroundColor: '#51ABAD',
 		backgroundColor: '#51ABAD',
-		detail: [{ smtitle: 'Total current', smnumber: 0 }],
+		detail: [{ smtitle: 'Total current', smnumber: 0, iconType: 'money' }],
 	},
 	},
 	{
 	{
 		title: 'Revenue chart',
 		title: 'Revenue chart',
 		backgroundColor: '#51ABAD',
 		backgroundColor: '#51ABAD',
 		detail: [
 		detail: [
-			{ smtitle: 'Total revenue', smnumber: 18.0 },
-			{ smtitle: 'Avg. revenue', smnumber: 17.53 },
+			{ smtitle: 'Total revenue', smnumber: 18.0, iconType: 'money' },
+			{ smtitle: 'Avg. revenue', smnumber: 17.53, iconType: 'money' },
 			{ smtitle: 'Max. Revenue', smnumber: 18.0, iconType: 'max' },
 			{ smtitle: 'Max. Revenue', smnumber: 18.0, iconType: 'max' },
 			{ smtitle: 'Min. Revenue', smnumber: 17.0, iconType: 'min' },
 			{ smtitle: 'Min. Revenue', smnumber: 17.0, iconType: 'min' },
 		],
 		],

src/components/DataCard.js

 import React from 'react';
 import React from 'react';
 import { Card, Col, Row, Button } from 'react-bootstrap';
 import { Card, Col, Row, Button } from 'react-bootstrap';
-import { FaMoneyBillAlt, FaArrowUp, FaArrowDown } from 'react-icons/fa';
+import { FaMoneyBillAlt, FaArrowUp, FaArrowDown, FaUserFriends } from 'react-icons/fa';
 import { AreaChart, Area, XAxis, YAxis, ResponsiveContainer } from 'recharts';
 import { AreaChart, Area, XAxis, YAxis, ResponsiveContainer } from 'recharts';
 import withWindowDimensions from '../utils/withWindowDimensions';
 import withWindowDimensions from '../utils/withWindowDimensions';
 import { CSVLink } from 'react-csv';
 import { CSVLink } from 'react-csv';
+import { FaFileCsv } from 'react-icons/fa';
 
 
 const chartdata = [
 const chartdata = [
 	{
 	{
@@ -48,8 +49,10 @@ const SmCard = props => {
 						<FaArrowUp {...iconStyle} />
 						<FaArrowUp {...iconStyle} />
 					) : smdata.iconType === 'min' ? (
 					) : smdata.iconType === 'min' ? (
 						<FaArrowDown {...iconStyle} />
 						<FaArrowDown {...iconStyle} />
-					) : (
+					) : smdata.iconType === 'money' ? (
 						<FaMoneyBillAlt {...iconStyle} />
 						<FaMoneyBillAlt {...iconStyle} />
+					) : (
+						<FaUserFriends {...iconStyle} />
 					)}
 					)}
 				</Col>
 				</Col>
 				<Col>
 				<Col>
@@ -114,7 +117,8 @@ const DataCard = props => {
 			</Row>
 			</Row>
 			<Row style={{ justifyContent: 'flex-end', marginRight: 1 }}>
 			<Row style={{ justifyContent: 'flex-end', marginRight: 1 }}>
 				<CSVLink data={data.detail} filename={data.title}>
 				<CSVLink data={data.detail} filename={data.title}>
-					<Button variant="light" style={{ marginTop: '.5em' }}>
+					<Button variant="outline-dark" style={{ marginTop: '.5em' }}>
+						<FaFileCsv style={{ margin: '0 2px 2px 0' }} />
 						Export to CSV
 						Export to CSV
 					</Button>
 					</Button>
 				</CSVLink>
 				</CSVLink>

src/components/DataTable.js

 import React from 'react';
 import React from 'react';
 import { Col, Table, Row, Button } from 'react-bootstrap';
 import { Col, Table, Row, Button } from 'react-bootstrap';
 import { CSVLink } from 'react-csv';
 import { CSVLink } from 'react-csv';
+import { FaFileCsv } from 'react-icons/fa';
 const data = [
 const data = [
 	{ site: 'Pichaiyat Building', people: 2670.0, revenue: 17.0, timestamp: '07/31/2019 14:23' },
 	{ site: 'Pichaiyat Building', people: 2670.0, revenue: 17.0, timestamp: '07/31/2019 14:23' },
 	{ site: 'Pichaiyat Building', people: 2670.0, revenue: 17.0, timestamp: '07/31/2019 14:23' },
 	{ site: 'Pichaiyat Building', people: 2670.0, revenue: 17.0, timestamp: '07/31/2019 14:23' },
@@ -22,6 +23,14 @@ const data = [
 const DataTable = () => {
 const DataTable = () => {
 	return (
 	return (
 		<Col>
 		<Col>
+			<Row style={{ marginLeft: 1 }}>
+				<CSVLink data={data} filename={'data-table'}>
+					<Button variant="outline-dark" style={{ marginTop: '.5em' }}>
+						<FaFileCsv style={{ margin: '0 2 5 0' }} />
+						Export to CSV
+					</Button>
+				</CSVLink>
+			</Row>
 			<Table striped bordered hover size="sm" style={{ margin: '1em 0 0 0' }}>
 			<Table striped bordered hover size="sm" style={{ margin: '1em 0 0 0' }}>
 				<thead style={{ backgroundColor: '#49b9ff', color: 'white' }}>
 				<thead style={{ backgroundColor: '#49b9ff', color: 'white' }}>
 					<tr>
 					<tr>
@@ -42,13 +51,6 @@ const DataTable = () => {
 					))}
 					))}
 				</tbody>
 				</tbody>
 			</Table>
 			</Table>
-			<Row style={{ justifyContent: 'flex-end', marginRight: 1 }}>
-				<CSVLink data={data} filename={'data-table'}>
-					<Button variant="light" style={{ marginTop: '.5em' }}>
-						Export to CSV
-					</Button>
-				</CSVLink>
-			</Row>
 		</Col>
 		</Col>
 	);
 	);
 };
 };