styles - Add basic styling to show AST and code diff

package.json

@@ -24,6 +24,7 @@
   },
   "dependencies": {
     "react-diff-viewer": "3.0.1",
+    "react-flexbox-grid": "^2.1.2",
     "react-redux": "^7.1.3",
     "react-transition-group": "^4.3.0",
     "redux": "^4.0.5",

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;
 }

yarn.lock

@@ -4340,6 +4340,13 @@ flatten@^1.0.2:
   resolved "https://registry.yarnpkg.com/flatten/-/flatten-1.0.3.tgz#c1283ac9f27b368abc1e36d1ff7b04501a30356b"
   integrity sha512-dVsPA/UwQ8+2uoFe5GHtiBMu48dWLTdsuEd7CKGlZlD78r1TTWBvDuFaFGKCo/ZfEr95Uk56vZoX86OsHkUeIg==
 
+flexboxgrid2@^7.2.0:
+  version "7.2.1"
+  resolved "https://registry.yarnpkg.com/flexboxgrid2/-/flexboxgrid2-7.2.1.tgz#3ffb9661ca5a9e96468eae648f8caf279bd0b2a4"
+  integrity sha512-O2bO5ZcBXnFy7cYmyt/CKb6CuwzNuUPxWJt8WOiaot8SetE9zyUahXGTSpKDm3+CTYQ5YeEMPeunMdjcxKJz4w==
+  dependencies:
+    normalize.css "^7.0.0"
+
 flush-write-stream@^1.0.0:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/flush-write-stream/-/flush-write-stream-1.1.1.tgz#8dd7d873a1babc207d94ead0c2e0e44276ebf2e8"
@@ -7003,6 +7010,11 @@ normalize-url@^1.0.0, normalize-url@^1.4.0:
     query-string "^4.1.0"
     sort-keys "^1.0.0"
 
+normalize.css@^7.0.0:
+  version "7.0.0"
+  resolved "https://registry.yarnpkg.com/normalize.css/-/normalize.css-7.0.0.tgz#abfb1dd82470674e0322b53ceb1aaf412938e4bf"
+  integrity sha1-q/sd2CRwZ04DIrU86xqvQSk45L8=
+
 npm-run-path@^2.0.0:
   version "2.0.2"
   resolved "https://registry.yarnpkg.com/npm-run-path/-/npm-run-path-2.0.2.tgz#35a9232dfa35d7067b4cb2ddf2357b1871536c5f"
@@ -7951,7 +7963,7 @@ promise@8.0.1:
   dependencies:
     asap "~2.0.3"
 
-prop-types@^15.6.2, prop-types@^15.7.2:
+prop-types@^15.5.8, prop-types@^15.6.2, prop-types@^15.7.2:
   version "15.7.2"
   resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.7.2.tgz#52c41e75b8c87e72b9d9360e0206b99dcbffa6c5"
   integrity sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ==
@@ -8162,6 +8174,14 @@ react-error-overlay@^4.0.1:
   resolved "https://registry.yarnpkg.com/react-error-overlay/-/react-error-overlay-4.0.1.tgz#417addb0814a90f3a7082eacba7cee588d00da89"
   integrity sha512-xXUbDAZkU08aAkjtUvldqbvI04ogv+a1XdHxvYuHPYKIVk/42BIOD0zSKTHAWV4+gDy3yGm283z2072rA2gdtw==
 
+react-flexbox-grid@^2.1.2:
+  version "2.1.2"
+  resolved "https://registry.yarnpkg.com/react-flexbox-grid/-/react-flexbox-grid-2.1.2.tgz#5eadf04e8559f7140cd6867a55a5351ded8d3920"
+  integrity sha512-lj1oVnIJ7TY3W6tPjFUxlUYd1DLFxEg8RiX3HAYVvreE3O9HU9n2390CFoPQ+qk1E+5MXa2t/mLMafFLAa8+7Q==
+  dependencies:
+    flexboxgrid2 "^7.2.0"
+    prop-types "^15.5.8"
+
 react-is@^16.7.0, react-is@^16.8.1, react-is@^16.9.0:
   version "16.12.0"
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.12.0.tgz#2cc0fe0fba742d97fd527c42a13bec4eeb06241c"