update: Transaction Page

src/common/pages/Transaction/ItemList/index.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import {Card} from 'antd';
+import {Card, Button, Alert} from 'antd';
 import {inject, observer} from "mobx-react";
 import faker from "faker";
 
@@ -29,26 +29,35 @@ export default class ItemList extends React.Component {
 
     return(
       <Card className={'cardContainer'}>
-        <div className={'parentContainerLeft'}>
-          <div className={'headerContainer'}>
-            <p className={'transactionCode'}>{data.transaction_id}</p>
-            <p className={'transactionDate'}>{data.updated_at}</p>
-          </div>
-          <div className={'bodyContainer'}>
-            <p className={'nameText'}>{data.name}</p>
-            <div className={'childContainer'}>
-              <p className={'childTitle'}>Price</p>
-              <p className={'childText'}>{data.price}</p>
+        <div className={'veryParentContainer'}>
+          <div className={'parentContainerLeft'}>
+            <div className={'headerContainer'}>
+              <p className={'transactionCode'}>{data.transaction_id}</p>
+              <p className={'transactionDate'}>{data.updated_at}</p>
             </div>
-            <div className={'childContainer'}>
-              <p className={'childTitle'}>Voucher Code</p>
-              <p className={'childText'}>{data.voucher_code}</p>
+            <div className={'bodyContainer'}>
+              <p className={'nameText'}>{data.name}</p>
+              <div className={'childContainer'}>
+                <p className={'childTitle'}>Price</p>
+                <p className={'childText'}>{(+data.price).toFixed(0)} Points</p>
+              </div>
+              <div className={'childContainer'}>
+                <p className={'childTitle'}>Voucher Code</p>
+                <p className={'childText'}>{data.voucher_code}</p>
+              </div>
             </div>
           </div>
-        </div>
-        <div className={'parentContainerRight'}>
-          <p className={'statusTitle'}>Status</p>
-          <p className={'statusText'}>{data.status}</p>
+          <div className={'parentContainerRight'}>
+            <p className={'statusTitle'}>Status</p>
+            <p className={'statusText'}>{data.status}</p>
+
+            <div className={'buttonContainer'}>
+              <Button className={'buttonSubscribe'} block={true} success>Subscribe</Button>
+              <Button className={'buttonMore'} block={true} success>Buy More</Button>
+            </div>
+
+            <Alert style={{marginTop: '20px'}} message="Those Voucher Code has been sent to your email" type="info" />
+          </div>
         </div>
       </Card>
     );

src/common/pages/Transaction/ItemList/style.scss

@@ -1,3 +1,84 @@
 .cardContainer{
   margin-bottom: 15px;
+  animation-duration: 2s;
+
+  .veryParentContainer{
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+
+    .parentContainerLeft{
+      flex: 0.65;
+
+      .headerContainer{
+
+
+        .transactionCode{
+          color: #9ca0ff;
+          margin-bottom: 0px;
+        }
+
+        .transactionDate{
+          color: #aaa;
+          font-size: 0.75rem;
+        }
+      }
+
+      .bodyContainer{
+
+
+        .nameText{
+          font-weight: 700;
+        }
+
+        .childContainer{
+
+
+          .childTitle{
+            margin-bottom: 0px;
+            font-size: 0.65rem;
+          }
+
+          .childText{
+            font-weight: 500;
+          }
+        }
+      }
+    }
+
+    .parentContainerRight{
+      flex: 0.35;
+
+      .statusTitle{
+        font-size: 0.7rem;
+        margin-bottom: 0px;
+      }
+
+      .statusText{
+        color: #6772e5;
+        font-size: 1.15rem;
+      }
+
+      .buttonContainer{
+        display: flex;
+        justify-content: space-around;
+
+        .buttonSubscribe{
+          background-color: #42b549;
+          color: #fff;
+          margin-right: 7.5px;
+        }
+
+        .buttonMore{
+          margin-left: 7.5px;
+          background-color: #ff5722;
+          color: #fff;
+        }
+      }
+    }
+  }
+}
+
+.cardContainer:hover{
+  box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
 }