From 46d886eb895075508e310c22255f1a466af54f7f Mon Sep 17 00:00:00 2001
From: Raghav Khanna <rk4718@ic.ac.uk>
Date: Fri, 13 Mar 2020 05:50:24 +0000
Subject: [PATCH] Improve display layout and look

---
 src/App.js             | 15 ++++++++++++---
 src/view/ButonStrip.js |  9 +++++----
 2 files changed, 17 insertions(+), 7 deletions(-)

diff --git a/src/App.js b/src/App.js
index c495a9d..a96844f 100644
--- a/src/App.js
+++ b/src/App.js
@@ -69,7 +69,7 @@ class App extends React.Component {
         test = "";
     }
 
-    processWaccCode =  async (code) => {
+    processWaccCode = async (code) => {
         let rsp = await sendWaccCode(code);
         let graph = this.state.graphData;
         if (typeof rsp.isError !== "undefined") {
@@ -143,7 +143,7 @@ class App extends React.Component {
                                 </CardBody>
                             </Card>
                         </GridItem>
-                        <GridItem xs={12} sm={12} md={6}>
+                        <GridItem xs={12} sm={12} md={8}>
                             <Card>
                                 <CardBody>
                                     <div style={{height: '50em'}}>
@@ -154,12 +154,21 @@ class App extends React.Component {
                                 </CardBody>
                             </Card>
                         </GridItem>
-                        <GridItem xs={12} sm={12} md={6}>
+                        <GridItem xs={12} sm={12} md={4}>
                             <Card>
                                 <CardBody>
+                                    <div
+                                        style={{
+                                            display: "flex",
+                                            justifyContent: "center",
+                                            alignItems: "center",
+                                            height: "50em"
+                                        }}
+                                    >
                                     <Terminal commandPassThrough={cmd => {
                                         test = cmd[0]
                                     }} watchConsoleLogging hideTopBar allowTabs={false}/>
+                                    </div>
                                 </CardBody>
                             </Card>
                         </GridItem>
diff --git a/src/view/ButonStrip.js b/src/view/ButonStrip.js
index f56b723..18e9c05 100644
--- a/src/view/ButonStrip.js
+++ b/src/view/ButonStrip.js
@@ -1,4 +1,5 @@
 import React from 'react';
+import Button from "../components/CustomButtons/Button";
 
 class ButtonStrip extends React.Component {
     constructor(props) {
@@ -8,10 +9,10 @@ class ButtonStrip extends React.Component {
     render() {
         return (
             <div>
-                <button onClick={this.props.onCompileClick}>▶</button>
-                <button onClick={this.props.onStepJsClick}>STEP JS LINE</button>
-                <button onClick={this.props.onStepIntoAstClick}>STEP INTO AST NODE</button>
-                <button onClick={this.props.onStepOverAstClick}>STEP OVER AST NODE</button>
+                <Button onClick={this.props.onCompileClick}>▶</Button>
+                <Button onClick={this.props.onStepJsClick}>STEP JS LINE</Button>
+                <Button onClick={this.props.onStepIntoAstClick}>STEP INTO AST NODE</Button>
+                <Button onClick={this.props.onStepOverAstClick}>STEP OVER AST NODE</Button>
             </div>
         )
     }
-- 
GitLab