I hope this doesn't break your design Nad.

2 files changed, 80 insertions, 95 deletions

diff --git a/synapse_topology/webui/src/scss/main.scss b/synapse_topology/webui/src/scss/main.scss
index 02528d0ebf..633a81a56a 100644
--- a/synapse_topology/webui/src/scss/main.scss
+++ b/synapse_topology/webui/src/scss/main.scss
@@ -46,100 +46,90 @@ a {
 }
 
 
-.contentWrapper {
-  @include theme;
-  margin: 0 20% 2rem 20%;
-  display: flex;
-  flex-direction: column;
-  text-align: center;
-  justify-content: space-evenly;
-  min-height: 100%;
-
-  .buttonDisplay {
+.buttonDisplay {
     display: flex;
     flex-direction: row;
     justify-content: space-evenly;
     margin-top: 0.5rem;
     margin-bottom: 0.5rem;
-  }
-
-  .keyDisplay {
-    word-wrap: break-word;
-  }
-
-  button {
-    @include rippler;
-    @include dropshadowed;
-    border-radius: 0.5rem;
-    font-size: 1rem;
-    padding: 0.6rem;
-    color: $font;
-    background-color: $tertiary;
-    border: none;
-    display: inline-block;
-    text-transform: capitalize;
-    font-style: bold;
-    color: $primary;
-    margin-left: 0.4rem;
-    margin-right: 0.4rem;
-  }
-
-
-  button[disabled] {
-    background-color: darken($secondary, 20%);
-    color: lighten($font, 20%);
-  }
-
-  @mixin select {
-    padding: 0.4rem;
-    font-size: 1rem;
-    background-color: $secondary;
-    border-width: 0.1rem;
-    border-radius: 0.5rem;
-    color: lighten($font, 20%);
-    margin-bottom: 1rem;
-    border-style: solid;
-    border-color: darken($secondary, 50%);
-  }
-
-  input {
-    @include select;
-  }
-
-  select {
-    @include select;
-    -webkit-appearance: none;
-    -moz-appearance: none;
-    appearance: none;
-
-    &:after {
-      content: ▸;
-      transform: rotate(90deg);
-      position: absolute;
-    }
-  }
-
-  pre {
-    padding: 0.4rem;
-    font-size: 0.6rem;
-    text-align: left;
-    border-style: solid;
-    border-color: darken($secondary, 50%);
-    border-radius: 0.5rem;
-    text-decoration: none;
-  }
-
-  .redButton {
-    background-color: red;
-  }
-
-  .invalidInput {
-    border-color: red;
-  }
-  p {
-    text-align: justify;
-    text-align-last: center;
-  }
+}
+
+.keyDisplay {
+word-wrap: break-word;
+}
+
+button {
+@include rippler;
+@include dropshadowed;
+border-radius: 0.5rem;
+font-size: 1rem;
+padding: 0.6rem;
+color: $font;
+background-color: $tertiary;
+border: none;
+display: inline-block;
+text-transform: capitalize;
+font-style: bold;
+color: $primary;
+margin-left: 0.4rem;
+margin-right: 0.4rem;
+}
+
+
+button[disabled] {
+background-color: darken($secondary, 20%);
+color: lighten($font, 20%);
+}
+
+@mixin select {
+padding: 0.4rem;
+font-size: 1rem;
+background-color: $secondary;
+border-width: 0.1rem;
+border-radius: 0.5rem;
+color: lighten($font, 20%);
+margin-bottom: 1rem;
+border-style: solid;
+border-color: darken($secondary, 50%);
+}
+
+input {
+@include select;
+}
+
+select {
+@include select;
+-webkit-appearance: none;
+-moz-appearance: none;
+appearance: none;
+
+&:after {
+    content: ▸;
+    transform: rotate(90deg);
+    position: absolute;
+}
+}
+
+pre {
+padding: 0.4rem;
+font-size: 0.6rem;
+text-align: left;
+border-style: solid;
+border-color: darken($secondary, 50%);
+border-radius: 0.5rem;
+text-decoration: none;
+}
+
+.redButton {
+background-color: red;
+}
+
+.invalidInput {
+border-color: red;
+}
+p {
+text-align: justify;
+text-align-last: center;
 }
 
 h1 {
diff --git a/synapse_topology/webui/webpack.config.babel.js b/synapse_topology/webui/webpack.config.babel.js
index a18a8da35e..8b8d2512de 100644
--- a/synapse_topology/webui/webpack.config.babel.js
+++ b/synapse_topology/webui/webpack.config.babel.js
@@ -5,6 +5,7 @@ import HtmlWebpackTagsPlugin from 'html-webpack-tags-plugin';
 
 export default {
     entry: ['./src/js/index.jsx', './src/scss/main.scss', './src/scss/bootstrap.min.css'],
+    watch: true,
     output: {
         path: path.resolve(__dirname, 'dist'),
         filename: 'bundle.js',
@@ -23,12 +24,6 @@ export default {
                 test: /\.scss$/,
                 use: [
                     {
-                        loader: 'file-loader',
-                        options: {
-                            name: 'css/[name].css',
-                        },
-                    },
-                    {
                         loader: 'style-loader',
                     },
                     {