Skip to content

Commit 0769e9d

Browse files
brianjshanbrianjshan
committed
customized tutorial page
1 parent b65c260 commit 0769e9d

File tree

4 files changed

+68
-57
lines changed

4 files changed

+68
-57
lines changed

‎app/electron/menu.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,7 @@ var MenuBuilder = function(mainWindow, appName) {
2626
contextIsolation: true,
2727
enableRemoteModule: false,
2828
zoomFactor: 1.0,
29+
devTools: false
2930
}
3031
});
3132
tutorial.loadURL(`http://localhost:8080/#/tutorial`);

‎app/src/components/right/ProjectManager.tsx

Lines changed: 0 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -163,16 +163,6 @@ const ProjectManager = () => {
163163

164164
return (
165165
<div>
166-
<RouteLink to={'/tutorial'} style={{textDecoration: 'none'}}>
167-
<Button
168-
color="primary"
169-
style={{ ...style.button, marginLeft: '15%', textDecoration: 'none' }}
170-
variant="outlined"
171-
className={classes.button}
172-
>
173-
Tutorial
174-
</Button>
175-
</RouteLink>
176166
<Button
177167
color="primary"
178168
style={{ ...style.button, marginLeft: '15%' }}

‎app/src/constants/Styling.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,4 +3,4 @@ export default {
33
darkBlue: 'rgb(0, 0, 26)',
44
darkGray: '#252526',
55
tutorialGray: '#f2f0f0'
6-
}
6+
};

‎app/src/tutorial/Tutorial.tsx

Lines changed: 66 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,8 @@ import CardActions from '@material-ui/core/CardActions';
55
import CardContent from '@material-ui/core/CardContent';
66
import Button from '@material-ui/core/Button';
77
import Typography from '@material-ui/core/Typography';
8-
import Container from '@material-ui/core/Container';import { Link, withRouter, RouteComponentProps } from 'react-router-dom';
8+
import Container from '@material-ui/core/Container';
9+
import { Link, withRouter, RouteComponentProps } from 'react-router-dom';
910
import Styling from '../constants/Styling';
1011
import MenuBookIcon from '@material-ui/icons/MenuBook';
1112
import LinkIcon from '@material-ui/icons/Link';
@@ -24,17 +25,19 @@ const useStyles = makeStyles({
2425
width: 350,
2526
height: 300,
2627
margin: 20,
27-
border: `1px solid ${Styling.darkBlue}`,
28+
border: `1px solid gray`,
2829
backgroundColor: Styling.tutorialGray,
2930
color: 'white',
31+
borderRadius: '5%',
32+
boxShadow: '10px 10px 10px gray'
3033
},
3134
bullet: {
3235
display: 'inline-block',
3336
margin: '0 2px',
34-
transform: 'scale(0.8)',
37+
transform: 'scale(0.8)'
3538
},
3639
title: {
37-
color: Styling.darkBlue,
40+
color: Styling.darkBlue,
3841
fontSize: 28,
3942
fontWeight: 500
4043
},
@@ -49,19 +52,21 @@ const useStyles = makeStyles({
4952
pageTitle: {
5053
fontSize: 100,
5154
color: Styling.darkBlue,
52-
boxShadow: '2px 2px',
55+
boxShadow: '10px 10px 10px #00001a',
5356
border: `1px solid ${Styling.darkBlue}`,
5457
padding: '20px',
5558
backgroundColor: 'white',
59+
borderRadius: '10px'
5660
},
5761
container: {
58-
display:'flex',
62+
display: 'flex',
5963
justifyContent: 'center',
6064
flexDirection: 'column',
61-
alignItems: 'center'
65+
alignItems: 'center',
66+
backgroundColor: 'lightgray'
6267
},
6368
wrapper: {
64-
display:'flex',
69+
display: 'flex',
6570
justifyContent: 'center',
6671
flexWrap: 'wrap',
6772
width: '75%'
@@ -72,62 +77,77 @@ const useStyles = makeStyles({
7277
flexBasis: '33.333333%'
7378
},
7479
cardActions: {
75-
alignSelf:'center',
76-
justifySelf:'center'
80+
alignSelf: 'center',
81+
justifySelf: 'center'
7782
}
7883
});
7984

8085
const Tutorial: React.FC<RouteComponentProps> = () => {
8186
const classes = useStyles();
82-
const topics = ['Pages', 'Route Links', 'Code Preview', 'Reusable Components', 'Canvas', 'Component Tree', 'HTML Elements', 'Styling', 'Customization'];
83-
const routes = ['/pages', '/links', '/code-preview', '/reusable-components', '/canvas', '/component-tree', '/html-elements', '/styling', '/customization'];
87+
const topics = [
88+
'Pages',
89+
'Route Links',
90+
'Code Preview',
91+
'Reusable Components',
92+
'Canvas',
93+
'Component Tree',
94+
'HTML Elements',
95+
'Styling',
96+
'Customization'
97+
];
98+
const routes = [
99+
'/pages',
100+
'/links',
101+
'/code-preview',
102+
'/reusable-components',
103+
'/canvas',
104+
'/component-tree',
105+
'/html-elements',
106+
'/styling',
107+
'/customization'
108+
];
84109
const icons = [
85-
<MenuBookIcon className={classes.icons}/>,
86-
<LinkIcon className={classes.icons}/>,
87-
<CodeIcon className={classes.icons}/>,
88-
<AddToPhotosIcon className={classes.icons}/>,
89-
<TvIcon className={classes.icons}/>,
90-
<AccountTreeIcon className={classes.icons}/>,
91-
<AddPhotoAlternateIcon className={classes.icons}/>,
92-
<StyleIcon className={classes.icons}/>,
93-
<ColorLensIcon className={classes.icons}/>,
110+
<MenuBookIcon className={classes.icons} />,
111+
<LinkIcon className={classes.icons} />,
112+
<CodeIcon className={classes.icons} />,
113+
<AddToPhotosIcon className={classes.icons} />,
114+
<TvIcon className={classes.icons} />,
115+
<AccountTreeIcon className={classes.icons} />,
116+
<AddPhotoAlternateIcon className={classes.icons} />,
117+
<StyleIcon className={classes.icons} />,
118+
<ColorLensIcon className={classes.icons} />
94119
];
95-
120+
96121
const body = document.querySelector('body');
97122
body.style.overflowY = 'auto';
98-
body.style.backgroundColor = Styling.tutorialGray;
123+
body.style.backgroundColor = 'lightgray';
99124

100125
const cards = topics.map((topic, i) => {
101126
return (
102-
<div key={`k${i}`} className={classes.cardWrapper}>
103-
<Card className={classes.root} variant="elevation">
104-
<CardContent>
105-
<Typography className={classes.title}>
106-
{topic}
107-
</Typography>
108-
</CardContent>
109-
<CardActions className={classes.cardActions} >
110-
<Link to={routes[i]} style={{textDecoration: 'none'}}>
111-
{icons[i]}
112-
</Link>
113-
</CardActions>
114-
</Card>
115-
</div>
116-
)
127+
<div key={`k${i}`} className={classes.cardWrapper}>
128+
<Card className={classes.root} variant="elevation">
129+
<CardContent>
130+
<Typography className={classes.title}>{topic}</Typography>
131+
</CardContent>
132+
<CardActions className={classes.cardActions}>
133+
<Link to={routes[i]} style={{ textDecoration: 'none' }}>
134+
{icons[i]}
135+
</Link>
136+
</CardActions>
137+
</Card>
138+
</div>
139+
);
117140
});
118141

119142
return (
120-
<Container maxWidth="xl" className={classes.container}>
121-
<h1 className={classes.pageTitle}>Reactype Tutorial</h1>
122-
<div className={classes.wrapper}>
123-
{cards}
124-
</div>
125-
{/* <Link to={`/`}>
143+
<Container maxWidth="xl" className={classes.container}>
144+
<h1 className={classes.pageTitle}>Reactype Tutorial</h1>
145+
<div className={classes.wrapper}>{cards}</div>
146+
{/* <Link to={`/`}>
126147
<button>Application</button>
127148
</Link> */}
128-
</Container>
149+
</Container>
129150
);
130151
};
131152

132153
export default withRouter(Tutorial);
133-

0 commit comments

Comments
 (0)