Merge pull request #269 from magjac/new-look

New look

Author: magjac

CHANGELOG.md

@@ -13,6 +13,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### Changed
 * Updated [Graphviz](https://graphviz.org/) from version [2.50.0](https://gitlab.com/graphviz/graphviz/-/blob/main/CHANGELOG.md?ref_type=heads#2500-2021-12-04) to version [9.0.0](https://gitlab.com/graphviz/graphviz/-/blob/main/CHANGELOG.md?ref_type=heads#900-2023-09-11) through [@hpcc-js/wasm](https://github.com/hpcc-systems/hpcc-js-wasm) version [2.14.1](https://github.com/hpcc-systems/hpcc-js-wasm/blob/trunk/CHANGELOG.md#2141-2023-10-12), containing a lot of improvements and fixes, including a fix for:
   * Failure of arrowhead and arrowtail to respect penwidth ([Graphviz issue #372](https://gitlab.com/graphviz/graphviz/issues/372))
+* New look with blueish primary and greenish secondary color and a toolbar with a Graphviz logo, a blueish grid on white as background and slightly larger text buttons.
+* More pronounced highlighting in the DOT source of nodes and edges selected in the graph, using shades of the blueish primary color.
 
 ### Fixed
 * Lost characters when typing fast and DOT parsing errors occur #236

public/GraphvizLogo.png

@@ -17,9 +17,6 @@ const styles = theme => ({
     display: 'flex',
     justifyContent: 'space-between',
   },
-  copyright: {
-    marginTop: theme.spacing(5),
-  },
 });
 
 class AboutDialog extends React.Component {
@@ -145,9 +142,6 @@ class AboutDialog extends React.Component {
                  {graphvizVersion}
               </a>
             </DialogContentText>
-            <DialogContentText variant='caption' className={classes.copyright}>
-              &copy; 2018-2022 Magnus Jacobsson Interactive AB
-            </DialogContentText>
           </DialogContent>
         </Dialog>
       </div>

src/AboutDialog.js

@@ -6,6 +6,7 @@ import { Toolbar } from '@mui/material';
 import { Typography } from '@mui/material';
 import { Button } from '@mui/material';
 import { IconButton } from '@mui/material';
+import { Icon } from '@mui/material';
 import { Menu as MenuIcon } from '@mui/icons-material';
 import { Add as AddIcon } from '@mui/icons-material';
 import { OpenInBrowser as OpenInBrowserIcon } from '@mui/icons-material';
@@ -23,6 +24,11 @@ const styles = {
   root: {
     flexGrow: 1,
   },
+  toolbar: {
+    backgroundSize: '16px 16px',
+    backgroundImage: 'linear-gradient(to right, #4ed1f860 1px, transparent 1px), linear-gradient(to bottom, #4ed1f860 1px, transparent 1px)',
+    backgroundColor: 'white',
+  },
   flex: {
     flexGrow: 1,
   },
@@ -36,6 +42,16 @@ const styles = {
       color: 'inherit',
     },
   },
+  imageIcon: {
+    display: 'block',
+    height: '100%',
+    verticalAlign: 'middle',
+  },
+  iconRoot: {
+    height: '64px',
+    width: '72px',
+    verticalAlign: 'middle',
+  },
 };
 
 function ButtonAppBar(props) {
@@ -106,7 +122,7 @@ function ButtonAppBar(props) {
       <AppBar
         position="static"
       >
-        <Toolbar id="toolbar">
+        <Toolbar id="toolbar" className={classes.toolbar}>
           <IconButton
             id="menu"
             className={classes.menuButton}
@@ -168,6 +184,9 @@ function ButtonAppBar(props) {
             color="inherit"
             className={classes.flex}
           >
+          <Icon classes={{root: classes.iconRoot}}>
+            <img className={classes.imageIcon} src="GraphvizLogo.png"  width="64" height="64"/>
+          </Icon>
             Graphviz Visual Editor
           </Typography>
           <IconButton
@@ -205,19 +224,22 @@ function ButtonAppBar(props) {
             1:1
           </Button>
           <Button
+            size="large"
             color="inherit"
             onClick={handleInsertClick}
           >
             Insert
           </Button>
           <Button
             color="inherit"
+            size="large"
             onClick={handleNodeFormatClick}
           >
             Node format
           </Button>
           <Button
             color="inherit"
+            size="large"
             onClick={handleEdgeFormatClick}
           >
             Edge format

src/ButtonAppBar.js

@@ -15,8 +15,8 @@ const styles = {
   },
   aceSelectedWord: {
     position: 'absolute',
-    background: 'rgb(250, 250, 255)',
-    border: '1px solid rgb(200, 200, 250)',
+    background: '#d8f4fd',
+    border: '1px solid #02c1ff',
   },
 };
 

src/TextEditor.js

@@ -7,10 +7,10 @@ import { CssBaseline } from '@mui/material';
 const theme = createTheme({
   palette: {
     primary: {
-      main: "#ffffcc",
+      main: "#4ed1f8", // Blueish
     },
     secondary: {
-      main: "#99ccff",
+      main: "#19ccaa", // Greenish
     },
   },
   components: {