Skip to content

Commit b65c260

Browse files
brianjshanbrianjshan
committed
Merge branch 'main' of https://github.com/oslabs-beta/ReacType into master
2 parents f72cbd4 + fa63ba1 commit b65c260

File tree

6 files changed

+93
-32
lines changed

6 files changed

+93
-32
lines changed

‎app/electron/main.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -118,7 +118,7 @@ async function createWindow() {
118118
if (isDev) {
119119
win.webContents.once('dom-ready', () => {
120120
debug();
121-
win.webContents.openDevTools();
121+
//win.webContents.openDevTools();
122122
});
123123
}
124124

‎app/electron/menu.js

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -16,16 +16,16 @@ var MenuBuilder = function(mainWindow, appName) {
1616

1717
const openTutorial = () => {
1818
const tutorial = new BrowserWindow({
19-
width: 800,
20-
height: 600,
19+
width: 1224,
20+
height: 1024,
2121
title: 'Tutorial',
2222
webPreferences: {
2323
nodeIntegration: false,
2424
nodeIntegrationInWorker: false,
2525
nodeIntegrationInSubFrames: false,
2626
contextIsolation: true,
2727
enableRemoteModule: false,
28-
zoomFactor: 1.0
28+
zoomFactor: 1.0,
2929
}
3030
});
3131
tutorial.loadURL(`http://localhost:8080/#/tutorial`);

‎app/src/components/bottom/BottomTabs.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@ const BottomTabs = () => {
1919
treeWrapper: HTMLDivElement;
2020
const [theme, setTheme] = useState('monokai');
2121
const { style } = useContext(styleContext);
22-
22+
2323
// method changes the
2424
const handleChange = (event: React.ChangeEvent, value: number) => {
2525
setTab(value);

‎app/src/constants/Styling.ts

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
export default {
2+
neonGreen: 'rgb(51, 235, 145)',
3+
darkBlue: 'rgb(0, 0, 26)',
4+
darkGray: '#252526',
5+
tutorialGray: '#f2f0f0'
6+
}

‎app/src/containers/MainContainer.tsx

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,6 @@ import { styleContext } from './AppContainer';
55

66
const MainContainer = () => {
77
const { style } = useContext(styleContext);
8-
98
return (
109
<div className="main-container" style={style} >
1110
<div className="main">

‎app/src/tutorial/Tutorial.tsx

Lines changed: 82 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -4,72 +4,128 @@ import Card from '@material-ui/core/Card';
44
import CardActions from '@material-ui/core/CardActions';
55
import CardContent from '@material-ui/core/CardContent';
66
import Button from '@material-ui/core/Button';
7-
import CssBaseline from '@material-ui/core/CssBaseline';
87
import Typography from '@material-ui/core/Typography';
98
import Container from '@material-ui/core/Container';import { Link, withRouter, RouteComponentProps } from 'react-router-dom';
10-
11-
// import Grid from '@material-ui/core/Grid';
12-
13-
// import ComponentPanel from '../components/left/ComponentPanel';
14-
// import HTMLPanel from '../components/left/HTMLPanel';
15-
16-
// Left-hand portion of the app, where component options are displayed
9+
import Styling from '../constants/Styling';
10+
import MenuBookIcon from '@material-ui/icons/MenuBook';
11+
import LinkIcon from '@material-ui/icons/Link';
12+
import CodeIcon from '@material-ui/icons/Code';
13+
import AddToPhotosIcon from '@material-ui/icons/AddToPhotos';
14+
import TvIcon from '@material-ui/icons/Tv';
15+
import AccountTreeIcon from '@material-ui/icons/AccountTree';
16+
import AddPhotoAlternateIcon from '@material-ui/icons/AddPhotoAlternate';
17+
import StyleIcon from '@material-ui/icons/Style';
18+
import ColorLensIcon from '@material-ui/icons/ColorLens';
1719

1820
const useStyles = makeStyles({
1921
root: {
20-
width: 300,
21-
height: 300,
2222
display: 'flex',
23-
margin: 20
23+
flexDirection: 'column',
24+
width: 350,
25+
height: 300,
26+
margin: 20,
27+
border: `1px solid ${Styling.darkBlue}`,
28+
backgroundColor: Styling.tutorialGray,
29+
color: 'white',
2430
},
2531
bullet: {
2632
display: 'inline-block',
2733
margin: '0 2px',
2834
transform: 'scale(0.8)',
2935
},
3036
title: {
31-
fontSize: 24,
37+
color: Styling.darkBlue,
38+
fontSize: 28,
39+
fontWeight: 500
3240
},
3341
pos: {
3442
marginBottom: 12,
3543
margin: 20
3644
},
45+
icons: {
46+
color: Styling.darkBlue,
47+
fontSize: 125
48+
},
49+
pageTitle: {
50+
fontSize: 100,
51+
color: Styling.darkBlue,
52+
boxShadow: '2px 2px',
53+
border: `1px solid ${Styling.darkBlue}`,
54+
padding: '20px',
55+
backgroundColor: 'white',
56+
},
57+
container: {
58+
display:'flex',
59+
justifyContent: 'center',
60+
flexDirection: 'column',
61+
alignItems: 'center'
62+
},
63+
wrapper: {
64+
display:'flex',
65+
justifyContent: 'center',
66+
flexWrap: 'wrap',
67+
width: '75%'
68+
},
69+
cardWrapper: {
70+
display: 'flex',
71+
flexDirection: 'column',
72+
flexBasis: '33.333333%'
73+
},
74+
cardActions: {
75+
alignSelf:'center',
76+
justifySelf:'center'
77+
}
3778
});
3879

3980
const Tutorial: React.FC<RouteComponentProps> = () => {
4081
const classes = useStyles();
4182
const topics = ['Pages', 'Route Links', 'Code Preview', 'Reusable Components', 'Canvas', 'Component Tree', 'HTML Elements', 'Styling', 'Customization'];
4283
const routes = ['/pages', '/links', '/code-preview', '/reusable-components', '/canvas', '/component-tree', '/html-elements', '/styling', '/customization'];
84+
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}/>,
94+
];
95+
96+
const body = document.querySelector('body');
97+
body.style.overflowY = 'auto';
98+
body.style.backgroundColor = Styling.tutorialGray;
99+
43100
const cards = topics.map((topic, i) => {
44101
return (
45-
<div style={{display: 'flex', flexDirection: 'column', flexBasis: '33.333333%'}}>
46-
<Card className={classes.root} variant="elevation" style={{display: 'flex', flexDirection: 'column'}}>
102+
<div key={`k${i}`} className={classes.cardWrapper}>
103+
<Card className={classes.root} variant="elevation">
47104
<CardContent>
48105
<Typography className={classes.title}>
49106
{topic}
50107
</Typography>
51108
</CardContent>
52-
<CardActions>
53-
<Link to={routes[i]} style={{textDecoration: 'none'}}>
54-
<Button size="large">Learn More</Button>
55-
</Link>
109+
<CardActions className={classes.cardActions} >
110+
<Link to={routes[i]} style={{textDecoration: 'none'}}>
111+
{icons[i]}
112+
</Link>
56113
</CardActions>
57114
</Card>
58115
</div>
59116
)
60-
})
117+
});
118+
61119
return (
62-
// <div style={{display:'flex', justifyContent: 'center', flexDirection: 'column', alignItems: 'center'}}>
63-
<Container maxWidth="xl" style={{display:'flex', justifyContent: 'center', flexDirection: 'column', alignItems: 'center'}}>
64-
<center><h1>Reactype Tutorial</h1></center>
65-
<div style={{display:'flex', justifyContent: 'center', flexWrap: 'wrap', width: '75%'}}>
120+
<Container maxWidth="xl" className={classes.container}>
121+
<h1 className={classes.pageTitle}>Reactype Tutorial</h1>
122+
<div className={classes.wrapper}>
66123
{cards}
67124
</div>
68-
<Link to={`/`}>
125+
{/* <Link to={`/`}>
69126
<button>Application</button>
70-
</Link>
127+
</Link> */}
71128
</Container>
72-
// </div>
73129
);
74130
};
75131

0 commit comments

Comments
 (0)