completing the metadata in hardware.json

src/components/Tutorial/Builder/Hardware.js

@@ -23,6 +23,7 @@ const styles = theme => ({
     color: theme.palette.text.primary
   },
   border: {
+    cursor: 'pointer',
     '&:hover': {
       width: 'calc(100% - 4px)',
       height: 'calc(100% - 4px)',
@@ -30,6 +31,7 @@ const styles = theme => ({
     }
   },
   active: {
+    cursor: 'pointer',
     width: 'calc(100% - 4px)',
     height: 'calc(100% - 4px)',
     border: `2px solid ${theme.palette.primary.main}`
@@ -71,13 +73,13 @@ class Requirements extends Component {
         {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}}>
             <div style={{margin: 'auto', width: 'max-content'}}>
-              <img src={`/media/hardware/${picture.src}`} alt={picture.name} height={100} style={{cursor: 'pointer'}} />
+              <img src={`/media/hardware/${picture.src}`} alt={picture.name} height={100} />
             </div>
             <GridListTileBar
               classes={{root: this.props.classes.multiGridListTile}}
               title={
                 <div style={{overflow: 'hidden', textOverflow: 'ellipsis'}} className={this.props.classes.multiGridListTileTitle}>
-                  {picture.id}
+                  {picture.name}
                 </div>
               }
             />

src/components/Tutorial/Builder/Id.js

@@ -52,7 +52,8 @@ class Id extends Component {
 
   render() {
     return (
-      <FormControl variant="outlined" /*fullWidth*/ style={{marginBottom: '10px', width: '100%'}}>
+      <div style={{display: 'inline-flex'}}>
+      <FormControl variant="outlined" /*fullWidth*/ style={{marginBottom: '10px', width: 'max-content'}}>
         <InputLabel htmlFor="id">ID</InputLabel>
         <OutlinedInput
           style={{borderRadius: '25px', padding: '0 0 0 10px', width: '200px'}}
@@ -89,6 +90,8 @@ class Id extends Component {
         />
         {this.props.error.id ? <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>
+      </div>
     );
   };
 }