adding dark flexlayout styling

Author: ddelpiano

webapp/Main.js

@@ -2,11 +2,12 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 import { Provider } from 'react-redux';
 import { MuiThemeProvider } from '@material-ui/core/styles';
+import * as Sentry from '@sentry/react';
+import { Integrations } from '@sentry/tracing';
 import { NetPyNE } from './components';
 import theme from './theme';
 import store from './redux/store';
-import * as Sentry from "@sentry/react";
-import { Integrations } from "@sentry/tracing";
+import '@metacell/geppetto-meta-ui/flex-layout/style/dark.scss';
 
 global.GEPPETTO_CONFIGURATION = require('./GeppettoConfiguration.json');
 const { initGeppetto } = require('@metacell/geppetto-meta-client/GEPPETTO');

webapp/package.json

@@ -83,8 +83,15 @@
     "less": "^3.11.1",
     "less-loader": "^5.0.0",
     "mini-css-extract-plugin": "^0.7.0",
+    "postcss-flexbugs-fixes": "4.2.1",
+    "postcss-loader": "3.0.0",
+    "postcss-normalize": "8.0.1",
+    "postcss-preset-env": "6.7.0",
+    "postcss-safe-parser": "5.0.2",
     "raw-loader": "^0.5.1",
     "react-resize-detector": "^6.7.4",
+    "sass": "^1.32.12",
+    "sass-loader": "^10.0.5",
     "slimerjs": "^1.0.0",
     "source-map-loader": "^0.2.3",
     "style-loader": "^0.13.2",

webapp/webpack.config.js

@@ -181,7 +181,14 @@ module.exports = function (env) {
             { loader: 'css-loader' },
           ],
         },
-
+        {
+          test: /\.s[a|c]ss$/,
+          use: [
+            'style-loader', // 3. Inject styles into DOM
+            'css-loader', // 2. Turns css into commonjs
+            'sass-loader', // 1. Turns sass into css
+          ],
+        },
         {
           test: /\.less$/,
           use: [