styles - Add basic styling to show AST and code diff

src/index.tsx

@@ -1,10 +1,7 @@
-/**
- * @class ExampleComponent
- */
-
 import * as React from "react";
 import { bindActionCreators } from "redux";
 import { Provider } from "react-redux";
+import { Grid, Row, Col } from "react-flexbox-grid";
 
 import ASTOutline from "./components/ASTOutline";
 import CodeOutputDiff from "./components/CodeOutput";
@@ -12,16 +9,38 @@ import CodeOutputDiff from "./components/CodeOutput";
 import configureStore from "./store";
 import { initSourceFile, updateSourceFile } from "./store/sourceFiles/actions";
 
-// import styles from "./styles.css";
+import styles from "./styles.css";
 
 const store = configureStore();
 
 export function ASTVisualizer() {
   return (
     <Provider store={store}>
-      Initial vs Current:
-      <CodeOutputDiff />
-      <ASTOutline />
+      <Grid fluid className={styles.wrapperWhole}>
+        <Row>
+          <Col xs={12}>
+            <h1 className={styles.title}>AST Transformation visualizer</h1>
+          </Col>
+        </Row>
+        <Row>
+          <Col xs={12} md={6} className={styles.hideOverflow}>
+            <Row>
+              <h2 className={styles.titleLight}>AST Inline Diff</h2>
+            </Row>
+            <ASTOutline />
+          </Col>
+          <Col xs={12} md={6}>
+            <Row>
+              <h2 className={styles.titleLight}>Code output Diff</h2>
+            </Row>
+            <Row>
+              <Col xs={6} className={styles.titleLight}>Input</Col>
+              <Col xs={6} className={styles.titleLight}>Output</Col>
+            </Row>
+            <CodeOutputDiff />
+          </Col>
+        </Row>
+      </Grid>
     </Provider>
   );
 }

src/styles.css

@@ -1,8 +1,20 @@
-/* add css styles here (optional) */
+.wrapperWhole {
+  margin: 1em;
+}
 
-.test {
-  display: inline-block;
-  margin: 2em auto;
-  border: 2px solid #000;
-  font-size: 2em;
+.title {
+  margin: 8px 0;
+  padding-bottom: 8px;
+  text-align: center;
+}
+
+.titleLight {
+  background-color: lightgray;
+  padding: 4px 8px;
+  margin-bottom: 4px;
+  border-bottom: 2px solid darkgray;
+}
+
+.hideOverflow {
+  overflow: hidden;
 }