some styling

src/App.js

@@ -17,6 +17,7 @@ const theme = createMuiTheme({
   palette: {
     primary: {
       main: '#4EAF47',
+      contrastText: '#ffffff'
     },
     secondary: {
       main: '#DDDDDD'

src/components/Blockly/BlocklyComponent.css

@@ -2,6 +2,6 @@
   height: 100%;
   min-height: 700px;
   width: 100%;
-  border: 1px solid #4EAF47;
+  /* border: 1px solid #4EAF47; */
   position: relative;
 }

src/components/Blockly/BlocklyComponent.jsx

@@ -29,6 +29,8 @@ import locale from 'blockly/msg/en';
 import 'blockly/blocks';
 import Toolbox from './toolbox/Toolbox';
 
+import { Card } from '@material-ui/core';
+
 
 Blockly.setLocale(locale);
 
@@ -66,7 +68,7 @@ class BlocklyComponent extends React.Component {
 
 
         return <React.Fragment>
-            <div ref={this.blocklyDiv} id="blocklyDiv" />
+            <Card ref={this.blocklyDiv} id="blocklyDiv" />
             <Toolbox toolbox={this.toolbox} />
         </React.Fragment>;
     }

src/components/CodeViewer.js

@@ -11,6 +11,8 @@ import { withStyles } from '@material-ui/core/styles';
 import MuiAccordion from '@material-ui/core/Accordion';
 import MuiAccordionSummary from '@material-ui/core/AccordionSummary';
 import MuiAccordionDetails from '@material-ui/core/AccordionDetails';
+import { Card } from '@material-ui/core';
+
 
 const Accordion = withStyles((theme) => ({
   root: {
@@ -73,7 +75,7 @@ class CodeViewer extends Component {
     var curlyBrackets = '{ }';
     var unequal = '<>';
     return (
-      <div style={{height: '500px'}}>
+      <Card style={{height: '500px'}}>
         <Accordion
           square={true}
           style={{margin: 0}}
@@ -110,7 +112,7 @@ class CodeViewer extends Component {
             </pre>
           </AccordionDetails>
         </Accordion>
-      </div>
+      </Card>
     );
   };
 }

src/components/WorkspaceStats.js

@@ -6,6 +6,8 @@ import * as Blockly from 'blockly/core';
 
 import { withStyles } from '@material-ui/core/styles';
 import Tooltip from '@material-ui/core/Tooltip';
+import Chip from '@material-ui/core/Chip';
+import Avatar from '@material-ui/core/Avatar';
 import Typography from '@material-ui/core/Typography';
 
 import { faPuzzlePiece, faTrash, faPlus, faPen, faArrowsAlt } from "@fortawesome/free-solid-svg-icons";
@@ -17,7 +19,7 @@ const styles = (theme) => ({
     display: 'inline',
     marginLeft: '50px',
     padding: '3px 10px',
-    borderRadius: '25%'
+    // borderRadius: '25%'
   }
 });
 
@@ -27,44 +29,57 @@ class WorkspaceStats extends Component {
     const workspace = Blockly.getMainWorkspace();
     const remainingBlocksInfinity = workspace ? workspace.remainingCapacity() !== Infinity : null;
     return (
-      <div style={{marginBottom: '20px', color: 'white'}}>
+      <div style={{marginBottom: '20px'}}>
-        <Tooltip title="Anzahl aktueller Blöcke" style={{marginLeft: 0}} className={this.props.classes.stats}>
+        <Tooltip title="Anzahl aktueller Blöcke" >
-          <div>
+          <Chip 
-            <FontAwesomeIcon icon={faPuzzlePiece} />
+            style={{marginRight: '1rem'}}
-            <Typography style={{display: 'inline'}}> {workspace ? workspace.getAllBlocks().length : 0}</Typography>
+            color="primary" 
-          </div>
+            title="Anzahl aktueller Blöcke" 
+            avatar={<Avatar><FontAwesomeIcon icon={faPuzzlePiece} /></Avatar>} 
+            label={workspace ? workspace.getAllBlocks().length : 0}>
+          </Chip>
         </Tooltip>
-        <Tooltip title="Anzahl neuer Blöcke" className={this.props.classes.stats}>
+        <Tooltip title="Anzahl aktueller Blöcke" >
-          <div>
+          <Chip 
-            <FontAwesomeIcon icon={faPlus} style={{marginRight: '5px'}}/>
+            style={{marginRight: '1rem'}}
-            <FontAwesomeIcon icon={faPuzzlePiece} />
+            color="primary" 
-            <Typography style={{display: 'inline'}}> {this.props.create}</Typography>
+            title="Anzahl neuer Blöcke"
-          </div>
+            avatar={<Avatar><FontAwesomeIcon icon={faPlus} /></Avatar>} 
+            label={this.props.create}>
+          </Chip>
         </Tooltip>
-        <Tooltip title="Anzahl veränderter Blöcke" className={this.props.classes.stats}>
+        <Tooltip title="Anzahl veränderter Blöcke" >
-          <div>
+          <Chip 
-            <FontAwesomeIcon icon={faPen} style={{marginRight: '5px'}}/>
+            style={{marginRight: '1rem'}}
-            <FontAwesomeIcon icon={faPuzzlePiece} />
+            color="primary" 
-            <Typography style={{display: 'inline'}}> {this.props.change}</Typography>
+            title="Anzahl neuer Blöcke"
-          </div>
+            avatar={<Avatar><FontAwesomeIcon icon={faPen} /></Avatar>} 
+            label={this.props.change}>
+          </Chip>
         </Tooltip>
-        <Tooltip title="Anzahl bewegter Blöcke" className={this.props.classes.stats}>
+        <Tooltip title="Anzahl bewegter Blöcke" >
-          <div>
+          <Chip 
-            <FontAwesomeIcon icon={faArrowsAlt} style={{marginRight: '5px'}}/>
+            style={{marginRight: '1rem'}}
-            <FontAwesomeIcon icon={faPuzzlePiece} />
+            color="primary" 
-            <Typography style={{display: 'inline'}}> {this.props.move}</Typography>
+            avatar={<Avatar><FontAwesomeIcon icon={faArrowsAlt} /></Avatar>} 
-          </div>
+            label={this.props.move}>
+          </Chip>
         </Tooltip>
-        <Tooltip title="Anzahl gelöschter Blöcke" className={this.props.classes.stats}>
+        <Tooltip title="Anzahl gelöschter Blöcke" >
-          <div>
+          <Chip 
-            <FontAwesomeIcon icon={faTrash} style={{marginRight: '5px'}}/>
+            style={{marginRight: '1rem'}}
-            <FontAwesomeIcon icon={faPuzzlePiece} />
+            color="primary" 
-            <Typography style={{display: 'inline'}}> {this.props.delete}</Typography>
+            avatar={<Avatar><FontAwesomeIcon icon={faTrash} /></Avatar>} 
-          </div>
+            label={this.props.delete}>
+          </Chip>
         </Tooltip>
         {remainingBlocksInfinity ?
-          <Tooltip title="verbleibende Blöcke" className={this.props.classes.stats}>
+          <Tooltip title="Verbleibende Blöcke" >
-            <Typography style={{display: 'inline'}}>{workspace.remainingCapacity()} verbleibende Blöcke</Typography>
+            <Chip 
+              style={{marginRight: '1rem'}}
+              color="primary" 
+              label={workspace.remainingCapacity()}>
+            </Chip>
           </Tooltip> : null}
       </div>
     );