new design

web/src/css/App.css

@@ -1,28 +1,13 @@
 .App {
-  text-align: center;
-}
-
-.App-logo {
-  animation: App-logo-spin infinite 20s linear;
-  height: 80px;
-}
+  text-align: center; }
 
 .App-header {
-  background-color: #222;
-  height: 150px;
-  padding: 20px;
-  color: white;
-}
+  background-color: white;
+  height: 80px;
+  padding: 20px; }
 
 .App-title {
-  font-size: 1.5em;
-}
+  font-size: 1.5em; }
 
 .App-intro {
-  font-size: large;
-}
-
-@keyframes App-logo-spin {
-  from { transform: rotate(0deg); }
-  to { transform: rotate(360deg); }
-}
+  font-size: large; }

web/src/css/App.scss

@@ -0,0 +1,17 @@
+.App {
+  text-align: center;
+}
+
+.App-header {
+  background-color:white;
+  height: 80px;
+  padding: 20px;
+}
+
+.App-title {
+  font-size: 1.5em;
+}
+
+.App-intro {
+  font-size: large;
+}

web/src/css/Intent.css

@@ -1,35 +1,44 @@
 /*IntentList and IntentItem CSS*/
+.IntentList {
+  width: 30%;
+  min-height: 9999px;
+  height: 9999px;
+  float: left;
+  background-color: #d5dae2; }
 
-.IntentList{
-    max-width: 300px;
-    width: 30%;
-    border: 2px solid black;
-    float:left;
-    background-color: gray;
-}
+.IntentList-title {
+  font-size: 1.5em;
+  height: 70px;
+  padding: 20px;
+  text-align: left; }
 
-.IntentList-title{
-    font-size: 1.5em;
-}
-
-.IntentItem{
-    margin-top: 1px;
-    margin-bottom: 1px;
-    background-color: blue;
-}
-
-.IntentItem-selected{
-    background-color: yellow;
-}
+.AddIntent {
+  float: right;
+  margin: 12px; }
 
+.IntentItem {
+  margin-top: 2px;
+  margin-bottom: 2px;
+  height: 50px;
+  width: 100%;
+  text-align: left;
+  background-color: #adb0b5; }
 
+.IntentItem-selected {
+  margin-top: 2px;
+  margin-bottom: 2px;
+  height: 50px;
+  width: 100%;
+  text-align: left;
+  background-color: #e8ecf2; }
 
 /*IntentDetails CSS*/
+.IntentDetails {
+  float: left;
+  width: 70%;
+  min-height: 9999px;
+  height: 9999px;
+  background-color: #e8ecf2; }
 
-.IntentDetails{
-    border: 2px solid blue;
-    float: left;
-    width: 70%;
-
-
-}
+.QuestionBox {
+  margin: 25px; }

web/src/css/Intent.scss

@@ -0,0 +1,54 @@
+/*IntentList and IntentItem CSS*/
+
+.IntentList{
+    width: 30%;
+    min-height:9999px;
+    height:9999px;
+    float:left;
+    background-color: #d5dae2;
+}
+
+.IntentList-title{
+    font-size: 1.5em;
+    height: 70px;
+    padding: 20px;
+    text-align:left;
+}
+
+.AddIntent{
+    float: right;
+    margin: 12px;
+}
+
+.IntentItem{
+    margin-top: 2px;
+    margin-bottom: 2px;
+    height: 50px;
+    width:100%;
+    text-align:left;
+    background-color: #adb0b5;
+}
+
+.IntentItem-selected{
+    margin-top: 2px;
+    margin-bottom: 2px;
+    height: 50px;
+    width:100%;
+    text-align:left;
+    background-color:#e8ecf2;
+    
+}
+
+/*IntentDetails CSS*/
+
+.IntentDetails{
+    float: left;
+    width: 70%;
+    min-height:9999px;
+    height:9999px;
+    background-color:#e8ecf2;
+}
+
+.QuestionBox{
+    margin:25px;
+}

web/src/css/_globals.scss

@@ -0,0 +1,5 @@
+@import 'react-md/src/scss/react-md';
+
+// Any variable overrides. The following just changes the default theme to use teal and purple.
+$md-primary-color: $md-teal-500;
+$md-secondary-color: $md-purple-a-400;

web/src/css/index.scss

@@ -0,0 +1,9 @@
+@import 'globals';
+
+@include react-md-everything;
+
+
+body {
+  margin: 0;
+  padding: 0;
+}