Add some minor fixes and improvements

vaclav-zeman · May 6, 2016 · 9c44ebc · 9c44ebc
1 parent 7a8f4b4
commit 9c44ebc
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 12 deletions.
diff --git a/src/components/Box/box.scss b/src/components/Box/box.scss
@@ -66,7 +66,7 @@
 }
 
 .ChartBox-title {
-	margin: .5em .5em;
+	margin: .5em .5em !important;
 	color: #666;
 	font-size: 1.2rem;
 	text-align: center;

diff --git a/src/components/SideNav/index.js b/src/components/SideNav/index.js
@@ -16,8 +16,14 @@ const SideNav = (props) => {
     {
       title: 'Users',
       link: '/users',
-      faClass: 'fa-users',
-      count: 15
+      faClass: 'fa-users', // Font awesome class
+      count: 15 // Notification count
+    },
+    {
+      title: 'Messages',
+      link: '/messages',
+      faClass: 'fa-envelope-o',
+      count: 253
     },
     {
       title: 'Data',
@@ -28,12 +34,6 @@ const SideNav = (props) => {
       title: 'Finance',
       link: '/finance',
       faClass: 'fa-bank'
-    },
-    {
-      title: 'Messages',
-      link: '/messages',
-      faClass: 'fa-envelope-o',
-      count: 253
     }
   ];
 

diff --git a/src/containers/Messages/index.js b/src/containers/Messages/index.js
@@ -1,7 +1,18 @@
 import React, { Component, PropTypes } from 'react';
 import Box from '../../components/Box';
+import DataTable from '../../components/DataTable';
 
 const Messages = (props) => {
+	const exampleData = {
+    titles: ['ID', 'Name', 'Address', 'Country', 'E-mail'],
+    data: [
+      [1, 'Charles Johnson', 'Mackenzie 14', 'United States', 'a@jognson.com'],
+      [2, 'Carrie Johnson', 'Mackenzie 25', 'United States', 'carrie@johnson.com'],
+      [3, 'Margaret Johnson', 'Low Reed 152', 'Canada', 'spam@gmail.com'],
+      [4, 'Mark Johnson', 'Popocatepetel', 'Costa Rica', 'costa@rica.com']
+    ]
+  };
+
   return (
     <div>
       <Box>
@@ -11,12 +22,12 @@ const Messages = (props) => {
 				<div className="row">
 					<form className="Form col-md-5">
 						<div className="Form-control">
-							<input className="Form-field" type="text" placeholder="Name (required)" />
-							<span className="Form-error">Name is required</span>
+							<input className="Form-field" type="text" placeholder="E-mail (required)" />
+							<span className="Form-error">E-mail is required</span>
 						</div>
 
 						<div className="Form-control">
-							<input className="Form-field" type="text" placeholder="Surname (required)" />
+							<input className="Form-field" type="text" placeholder="Name (required)" />
 						</div>
 
 						<div className="Form-control">
@@ -45,6 +56,10 @@ const Messages = (props) => {
 							<input className="Form-button" type="submit" value="Send" />
 						</div>
 					</form>
+
+					<div className="col-md-7">
+						<DataTable data={exampleData} />
+					</div>
 				</div>
       </Box>
     </div>