adjustment of colours and messages in case of error

src/components/Tutorial/Builder/BlocklyExample.js

@@ -97,7 +97,7 @@ class BlocklyExample extends Component {
           />
         : <FormLabel style={{color: 'black'}}>Musterlösung</FormLabel>}
         {this.state.checked ? !this.props.value || this.props.error ?
-          <FormHelperText style={{lineHeight: 'initial'}} className={this.props.classes.errorColor}>Reiche deine Blöcke ein, indem du auf den rot gefärbten Button klickst.</FormHelperText>
+          <FormHelperText style={{lineHeight: 'initial'}} className={this.props.classes.errorColor}>{`Reiche deine Blöcke ein, indem du auf den '${this.props.task ? 'Musterlösung einreichen' : 'Beispiel einreichen'}'-Button klickst.`}</FormHelperText>
         : this.state.input ? <FormHelperText style={{lineHeight: 'initial'}}>Die letzte Einreichung erfolgte um {this.state.input} Uhr.</FormHelperText> : null
         : null}
         {this.state.checked ? (() => {

src/components/Tutorial/Builder/Hardware.js

@@ -68,7 +68,7 @@ class Requirements extends Component {
       <div style={{marginBottom: '10px', padding: '18.5px 14px', borderRadius: '25px', border: '1px solid lightgrey', width: 'calc(100% - 28px)'}}>
         <FormLabel style={{color: 'black'}}>Hardware</FormLabel>
         <FormHelperText style={this.props.error ? {lineHeight: 'initial', marginTop: '5px'} : {marginTop: '5px', lineHeight: 'initial', marginBottom: '10px'}}>Beachte, dass die Reihenfolge des Auswählens maßgebend ist.</FormHelperText>
-        {this.props.error ? <FormHelperText className={this.props.classes.errorColor}>Wähle mindestens eine Hardware aus.</FormHelperText> : null}
+        {this.props.error ? <FormHelperText className={this.props.classes.errorColor}>Wähle mindestens eine Hardware-Komponente aus.</FormHelperText> : null}
         <GridList cellHeight={100} cols={cols} spacing={10}>
         {hardware.map((picture,i) => (
           <GridListTile key={i} onClick={() => this.onChange(picture.id)} classes={{tile: this.props.value.filter(value => value === picture.id).length > 0 ? this.props.classes.active : this.props.classes.border}}>

src/components/Tutorial/Builder/Id.js

@@ -16,6 +16,12 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 const styles = theme => ({
   errorColor: {
     color: theme.palette.error.dark
+  },
+  errorColorShrink: {
+    color: `rgba(0, 0, 0, 0.54) !important`
+  },
+  errorBorder: {
+    borderColor: `${theme.palette.error.dark} !important`
   }
 });
 
@@ -53,10 +59,16 @@ class Id extends Component {
   render() {
     return (
       <div style={{display: 'inline-flex'}}>
-      <FormControl variant="outlined" /*fullWidth*/ style={{marginBottom: '10px', width: 'max-content'}}>
+      <FormControl variant="outlined" style={{marginBottom: '10px', width: '250px'}}>
-        <InputLabel htmlFor="id">ID</InputLabel>
+        <InputLabel
+          htmlFor="id"
+          classes={{shrink: this.props.error ? this.props.classes.errorColorShrink : null}}
+        >
+          ID
+        </InputLabel>
         <OutlinedInput
           style={{borderRadius: '25px', padding: '0 0 0 10px', width: '200px'}}
+          classes={{notchedOutline: this.props.error ? this.props.classes.errorBorder : null}}
           error={this.props.error}
           value={this.props.value}
           name='id'
@@ -90,7 +102,7 @@ class Id extends Component {
         />
         {this.props.error ? <FormHelperText className={this.props.classes.errorColor}>Gib eine positive ganzzahlige Zahl ein.</FormHelperText> : null}
       </FormControl>
-      <FormHelperText style={{marginLeft: '10px', marginTop: '5px', lineHeight: 'initial', marginBottom: '10px', width: '200px'}}>Beachte, dass die ID eindeutig sein muss. Sie muss sich also zu den anderen Tutorials unterscheiden.</FormHelperText>
+      <FormHelperText style={{marginLeft: '-40px', marginTop: '5px', lineHeight: 'initial', marginBottom: '10px', width: '200px'}}>Beachte, dass die ID eindeutig sein muss. Sie muss sich also zu den anderen Tutorials unterscheiden.</FormHelperText>
       </div>
     );
   };

src/components/Tutorial/Builder/Textfield.js

@@ -14,7 +14,13 @@ const styles = theme => ({
     padding: '18.5px 14px 18.5px 24px'
   },
   errorColor: {
-    color: theme.palette.error.dark
+    color: `${theme.palette.error.dark} !important`
+  },
+  errorColorShrink: {
+    color: `rgba(0, 0, 0, 0.54) !important`
+  },
+  errorBorder: {
+    borderColor: `${theme.palette.error.dark} !important`
   }
 });
 
@@ -48,10 +54,15 @@ class Textfield extends Component {
   render() {
     return (
       <FormControl variant="outlined" fullWidth style={{marginBottom: '10px'}}>
-        <InputLabel htmlFor={this.props.property}>{this.props.label}</InputLabel>
+        <InputLabel
+          htmlFor={this.props.property}
+          classes={{shrink: this.props.error ? this.props.classes.errorColorShrink : null}}
+        >
+          {this.props.label}
+        </InputLabel>
         <OutlinedInput
           style={{borderRadius: '25px'}}
-          classes={{multiline: this.props.classes.multiline}}
+          classes={{multiline: this.props.classes.multiline, notchedOutline: this.props.error ? this.props.classes.errorBorder : null}}
           error={this.props.error}
           value={this.props.value}
           label={this.props.label}