changed tutorial page home to close

Author: wang9hu

app/src/containers/CustomizationPanel.tsx

@@ -755,41 +755,41 @@ const CustomizationPanel = ({ isThemeLight }): JSX.Element => {
                     { value: 'onKeyDown', text: 'onKeyDown' }
                   ]}
                   />
+              </div>
+              { eventAll[0] && (<div className={classes.configRow}>
+                <div
+                  className={
+                    isThemeLight
+                      ? `${classes.configType} ${classes.lightThemeFontColor}`
+                      : `${classes.configType} ${classes.darkThemeFontColor}`
+                  }
+                >
+                  <h3>Function Name:</h3>
                 </div>
-                { eventAll[0] && (<div className={classes.configRow}>
-                  <div
-                    className={
-                      isThemeLight
-                        ? `${classes.configType} ${classes.lightThemeFontColor}`
-                        : `${classes.configType} ${classes.darkThemeFontColor}`
-                    }
-                  >
-                    <h3>Function Name:</h3>
-                  </div>
-                  <FormControl variant="filled">
-                    <TextField
-                      variant="filled"
-                      name="funcName"
-                      inputProps={{
-                        className: isThemeLight
-                          ? `${classes.selectInput} ${classes.lightThemeFontColor}`
-                          : `${classes.selectInput} ${classes.darkThemeFontColor}`
-                      }}
-                      value={eventAll[1]}
-                      onChange={handleChange}
-                      placeholder="Function Name"
-                    />
-                  </FormControl>
-                </div> )}
-                { currFocus && Object.keys(currFocus.events).length !== 0 && (<div className={'event-table'}>
-                  <DataGrid
-                    rows={eventRow}
-                    columns={eventColumnTabs}
-                    pageSize={5}
-                    // editRowsModel={editRowsModel}
-                    // className={props.isThemeLight ? classes.themeLight : classes.themeDark}
+                <FormControl variant="filled">
+                  <TextField
+                    variant="filled"
+                    name="funcName"
+                    inputProps={{
+                      className: isThemeLight
+                        ? `${classes.selectInput} ${classes.lightThemeFontColor}`
+                        : `${classes.selectInput} ${classes.darkThemeFontColor}`
+                    }}
+                    value={eventAll[1]}
+                    onChange={handleChange}
+                    placeholder="Function Name"
                   />
-                </div>)}
+                </FormControl>
+              </div> )}
+              { currFocus && Object.keys(currFocus.events).length !== 0 && (<div className={'event-table'}>
+                <DataGrid
+                  rows={eventRow}
+                  columns={eventColumnTabs}
+                  pageSize={5}
+                  // editRowsModel={editRowsModel}
+                  // className={props.isThemeLight ? classes.themeLight : classes.themeDark}
+                />
+              </div>)}
                 {/* <TableContainer component={Paper} sx={{ maxHeight: '350px' }}>
                   <Table
                     sx={{ width: '510px' }}

app/src/tutorial/Tutorial.tsx

@@ -20,7 +20,7 @@ import ColorLensIcon from '@material-ui/icons/ColorLens';
 import SwapVertIcon from '@material-ui/icons/SwapVert';
 import KeyboardIcon from '@material-ui/icons/Keyboard';
 import BrushIcon from '@material-ui/icons/Brush';
-import HomeIcon from '@material-ui/icons/Home';
+import CloseIcon from '@material-ui/icons/Close';
 import Button from '@material-ui/core/Button';
 
 
@@ -142,18 +142,19 @@ const Tutorial: React.FC<RouteComponentProps> = () => {
   return (
     <>
     <div>
-            <Link to='/' style={{textDecoration: 'none'}}>
+            {/* <Link to='/' style={{textDecoration: 'none'}}> */}
               <Button
                 variant='contained'
                 color='primary'
                 style={{ minWidth: '137.69px'}}
                 className="navbarButton"
                 id="ratingButton"
-                endIcon={<HomeIcon/>}
+                onClick={window.close}
+                endIcon={<CloseIcon/>}
                 > 
-                HOME
+                Close
               </Button>
-            </Link>
+            {/* </Link> */}
           </div>
     <Container maxWidth="xl" className={classes.container}>
       <h1 className={classes.pageTitle}>ReacType Tutorial</h1>