Merge pull request #2 from MetaCell/feature/33

Feature/33 Removes styles/ theme from here for components, as they are now in meta-diagram

src/assets/styles/variables.js

@@ -1,3 +1,24 @@
+const nodeRed = {
+  nodeRedBackgroundColor: '#F4D4D4',
+  nodeRedTextColor: '#9D6666',
+  nodeRedBorderColor: 'rgba(157, 139, 102, 0.2)',
+  nodeRedBoxShadow: '0 0.25rem 0.625rem -0.25rem rgba(157, 139, 102, 0.3)',
+};
+
+const nodeBlue = {
+  nodeBlueBackgroundColor: '#D4E6F4',
+  nodeBlueTextColor: '#66829D',
+  nodeBlueBorderColor: 'rgba(102, 130, 157, 0.2)',
+  nodeBlueBoxShadow: '0 0.125rem 0.375rem -0.25rem rgba(102, 130, 157, 0.2)',
+};
+
+const nodeGray = {
+  nodeGrayBackgroundColor: '#E4E4E4',
+  nodeGrayTextColor: '#818181',
+  nodeGrayBorderColor: 'rgba(130, 130, 130, 0.2)',
+  nodeGrayBoxShadow: '0 0.25rem 0.625rem -0.25rem rgba(129, 129, 129, 0.3)',
+};
+
 const vars = {
   fontFamily: 'Inter, sans-serif',
   primaryBg: '#f1f1f1',
@@ -31,7 +52,10 @@ const vars = {
   progressBar: '#017AFF',
   progressShadow: 'inset 0 0 0.0625rem #E3E3E3',
 
-  switchShadow: '0 0.1875rem 0.5rem rgba(0, 0, 0, 0.15), 0 0.1875rem 0.0625rem rgba(0, 0, 0, 0.06)'
+  switchShadow: '0 0.1875rem 0.5rem rgba(0, 0, 0, 0.15), 0 0.1875rem 0.0625rem rgba(0, 0, 0, 0.06)',
+  ...nodeRed,
+  ...nodeBlue,
+  ...nodeGray,
 };
 
 export default vars;

src/components/Main.js

@@ -12,20 +12,12 @@ const mockModel = require('../resources/model').mockModel;
 
 const styles = () => ({
   root: {
-    position: 'absolute',
-    top: '3.5rem',
-    left: 0,
-    height: 'calc(100% - 3.5rem)',
+    height: 'calc(100vh - 3.5rem)',
     width: '100%',
-    backgroundRepeat: 'repeat',
-    backgroundColor: '#fff',
-    backgroundImage: `url(${BG})`
-  },
-
-  diagramContainer: {
-    width: '100%',
-    height: '100%',
   },
+  canvasBG: {
+    backgroundImage: `url(${BG})`
+  }
 });
 
 class Main extends React.Component {
@@ -47,7 +39,12 @@ class Main extends React.Component {
 
     return (
       <div className={classes.root}>
-        <MetaDiagram metaNodes={metaModel.mechanisms} metaLinks={metaModel.projections} componentsMap={componentsMap} />
+        <MetaDiagram metaNodes={metaModel.mechanisms} metaLinks={metaModel.projections} componentsMap={componentsMap}
+          metaTheme={{
+            customThemeVariables: {},
+            canvasClassName: classes.canvasBG,
+          }}
+        />
       </div>
     );
   }

src/components/common/Header.js

@@ -10,7 +10,7 @@ import vars from "../../assets/styles/variables";
 
 const { textWhite, listSelectedTextColor, dropdownBg, dropdownTextColor } = vars;
 
-const useStyles = makeStyles((theme) => ({
+const useStyles = makeStyles(() => ({
   root: {
     background: textWhite,
     height: '3.5rem',

src/components/common/Layout.js

@@ -1,17 +1,11 @@
 import React from 'react';
-import { makeStyles } from '@mui/styles';
 import { Box } from '@mui/material';
 import Header from './Header';
 import Main from '../Main';
 
-const useStyles = makeStyles((theme) => ({
-  root: {},
-}));
-
 const Layout = ({ children }) => {
-  const classes = useStyles();
   return (
-    <Box className={classes.root}>
+    <Box>
       <Header />
       <Main />
     </Box>

src/components/views/mechanisms/CustomNodeWidget.js

@@ -1,7 +1,7 @@
 import * as React from "react";
 import {DiagramEngine, PortWidget} from "@projectstorm/react-diagrams";
 import {MetaNodeModel} from "meta-diagram";
-import {Typography} from "@material-ui/core";
+import {Typography} from "@mui/material";
 
 export class CustomNodeWidget extends React.Component {
     render() {

src/components/views/mechanisms/MechMetadata.js

@@ -6,8 +6,6 @@ import InputOutputNode from "./InputOutputNode";
 import TextField from '@mui/material/TextField';
 import Typography from "@mui/material/Typography";
 
-
-
 const styles = () => ({
   root: {
     position: 'relative',