#431 Layout fixes after migration to meta

Author: vidhyalongani

webapp/components/instantiation/NetPyNEInstantiated.js

@@ -7,7 +7,7 @@ import CameraControls from '@metacell/geppetto-meta-ui/camera-controls/CameraCon
 // import ControlPanel from 'geppetto-client/js/components/interface/controlPanel/controlpanel';
 
 import { NetWorkControlButtons } from 'netpyne/components';
-import { primaryColor, canvasBgDark, canvasBgLight } from '../../theme';
+import { primaryColor, canvasBgDark, canvasBgLight, bgRegular } from '../../theme';
 import { THEMES } from '../../constants';
 
 const CANVAS_LIGHT = 'canvas-toolbar-btns-light';
@@ -222,7 +222,7 @@ class NetPyNEInstantiated extends React.Component {
           cameraOptions={camOptions}
           key="CanvasContainer"
           data={canvasData}
-          backgroundColor="#000000"
+          backgroundColor={bgRegular}
         />
         <div id="controlpanel" style={{ top: 0 }}>
           {/* TODO: refactor the control panel with the list viewer

webapp/css/flexlayout.less

@@ -1,12 +1,42 @@
 @import "variables";
 
-.flexlayout__layout {
+div.flexlayout__layout {
   border-left: none !important;
   border-right: none !important;
   background-color: transparent;
   top: 0px;
   border-top: none;
 
+  .flexlayout__tab_button {
+    &:hover {
+      .flexlayout__tab_button_trailing {
+        background: none;
+      }
+    }
+
+    &.flexlayout__tab_button--selected {
+      .flexlayout__tab_button_trailing {
+        background: none;
+      }
+    }
+  }
+
+  .flexlayout__tab_button_top {
+    box-shadow: none;
+  }
+
+  .flexlayout__tabset_tabbar_outer {
+    background-color: transparent;
+  }
+
+  .flexlayout__tabset_tabbar_outer_top {
+    border-bottom: none;
+  }
+
+  .flexlayout__tabset_tabbar_inner_tab_container_top {
+    border-top: none;
+  }
+
   a {
     color: @colorLink;
   }

webapp/css/netpyne.less

@@ -8,6 +8,15 @@ body {
   font-size: 16px;
 }
 
+html {
+  * {
+    box-sizing: border-box;
+  }
+  body {
+    background: @bgDarker;
+  }
+}
+
 :root {
   --m2: 8px;
   --m4: 16px;
@@ -142,6 +151,7 @@ button.actionButton {
   color: white;
   left: 22px;
   pointer-events: none;
+  word-wrap: break-word;
   z-index: 10;
 }
 .breadcrumbButtony button {
@@ -574,17 +584,35 @@ div.flexlayout__layout {
   }
 }
 @-webkit-keyframes spin {
-  0% { -webkit-transform: rotate(0deg); }
-  100% { -webkit-transform: rotate(360deg); }
+  0% {
+    -webkit-transform: rotate(0deg);
+  }
+  100% {
+    -webkit-transform: rotate(360deg);
+  }
 }
 
 @keyframes spin {
-  0% { transform: rotate(0deg); }
-  100% { transform: rotate(360deg); }
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
 }
 
 body {
   .MuiTable-root {
     border-collapse: separate;
   }
 }
+
+.instantiatedContainer {
+  .position-toolbar {
+    button {
+      background-color: rgba(255, 255, 255, 0.2);
+      font-size: 0.875rem;
+      border-radius: 0;
+    }
+  }
+}