feature(payments): basic layout for payments

app/routes/activity/components/Activity.js

@@ -29,7 +29,15 @@ class Activity extends Component {
                   console.log('payment: ', payment)
                   return (
                     <li key={index} className={styles.activity}>
-                      hi
+                      <div className={styles.left}>
+                        <div className={styles.path}>{payment.path[0]}</div>
+                      </div>
+                      <div className={styles.center}>
+                        <div className={styles.date}>{payment.creation_date}</div>
+                      </div>
+                      <div className={styles.right}>
+                        <span className={styles.value}>{payment.value}</span>
+                      </div>
                     </li>
                   )
                 })

app/routes/activity/components/Activity.scss

@@ -32,7 +32,7 @@
 	background: #F7F7F7;
 	
 	.header {
-	  width: 50%;
+	  width: 75%;
 	  margin: 0 auto;
 	  padding: 60px 0 20px 0;
 		background: #F7F7F7;
@@ -49,8 +49,35 @@
 	padding: 20px 0;
 	
 	.activityList {
-		width: 50%;
+		width: 75%;
 		margin: 0 auto;
 		background: #fff;
 	}
 }
+
+.activity {
+	padding: 35px 10px;
+	border-bottom: 1px solid #f2f2f2;
+
+	.left, .center, .right {
+		display: inline-block;
+		vertical-align: top;
+	}
+
+	.center, .right {
+		width: 10%;
+	}
+
+	.left {
+		width: 80%;
+		color: #000;
+	}
+
+	.center {
+		text-align: center;
+	}
+
+	.right {
+		text-align: right;
+	}
+}

app/routes/app/components/App.scss

@@ -3,4 +3,5 @@
 	height: 100vh;
 	display: inline-block;
 	vertical-align: top;
+	overflow-y: scroll;
 }