From 9df7de05f43b21b6a21688aa1899a0896d7a7177 Mon Sep 17 00:00:00 2001
From: Delucse <46593742+Delucse@users.noreply.github.com>
Date: Mon, 21 Sep 2020 12:16:10 +0200
Subject: [PATCH] adjustment of colours and messages in case of error

---
 .../Tutorial/Builder/BlocklyExample.js         |  2 +-
 src/components/Tutorial/Builder/Hardware.js    |  2 +-
 src/components/Tutorial/Builder/Id.js          | 18 +++++++++++++++---
 src/components/Tutorial/Builder/Textfield.js   | 17 ++++++++++++++---
 4 files changed, 31 insertions(+), 8 deletions(-)

diff --git a/src/components/Tutorial/Builder/BlocklyExample.js b/src/components/Tutorial/Builder/BlocklyExample.js
index 2ecfa12..5b2c5b3 100644
--- a/src/components/Tutorial/Builder/BlocklyExample.js
+++ b/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 ? (() => {
diff --git a/src/components/Tutorial/Builder/Hardware.js b/src/components/Tutorial/Builder/Hardware.js
index fa0f452..f469851 100644
--- a/src/components/Tutorial/Builder/Hardware.js
+++ b/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}}>
diff --git a/src/components/Tutorial/Builder/Id.js b/src/components/Tutorial/Builder/Id.js
index bb4ebde..964f812 100644
--- a/src/components/Tutorial/Builder/Id.js
+++ b/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'}}>
-        <InputLabel htmlFor="id">ID</InputLabel>
+      <FormControl variant="outlined" style={{marginBottom: '10px', width: '250px'}}>
+        <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>
     );
   };
diff --git a/src/components/Tutorial/Builder/Textfield.js b/src/components/Tutorial/Builder/Textfield.js
index 46bae8f..d601784 100644
--- a/src/components/Tutorial/Builder/Textfield.js
+++ b/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}