Skip to content

Commit 415731f

Browse files
pmhuapmhua
committed
Merge remote-tracking branch 'origin/dev' into Oauth
2 parents d57327f + f97e123 commit 415731f

File tree

14 files changed

+159
-38
lines changed

14 files changed

+159
-38
lines changed

‎app/src/Dashboard/ProjectContainer.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import React, {
22
useState, useContext, useEffect, createContext,
33
} from 'react';
44
import {
5-
createMuiTheme, MuiThemeProvider, makeStyles, Theme, useTheme,
5+
createTheme, MuiThemeProvider, makeStyles, Theme, useTheme,
66
} from '@material-ui/core/styles';
77
import { useQuery } from '@apollo/client';
88

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

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -46,7 +46,7 @@ const BottomTabs = (props): JSX.Element => {
4646
Arrow.renderArrow(state.canvasFocus.childId);
4747

4848
return (
49-
<div className={classes.root} style={style}>
49+
<div className={`${classes.root} ${classes.rootLight}`} style={style}>
5050
<Box display="flex" justifyContent="space-between" alignItems="center" paddingBottom="10px" paddingRight="10px">
5151
<Tabs
5252
value={tab}
@@ -111,12 +111,14 @@ const BottomTabs = (props): JSX.Element => {
111111
const useStyles = makeStyles(theme => ({
112112
root: {
113113
flexGrow: 1,
114-
backgroundColor: '#003366',
115114
height: '100%',
116115
color: '#E8E8E8',
117116
boxShadow: '0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23)',
118117

119118
},
119+
rootLight: isThemeLight => ({
120+
backgroundColor: isThemeLight ? 'blue': 'red'
121+
}),
120122
bottomHeader: {
121123
flex: 1,
122124
flexDirection: 'row',

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

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,12 +2,14 @@ import React, { useContext } from 'react';
22
import ComponentPanel from '../right/ComponentPanel'
33
import StatePropsPanel from '../right/StatePropsPanel'
44
import HTMLPanel from '../left/HTMLPanel'
5+
import { styleContext } from '../../containers/AppContainer';
56

67
// Creation panel holds all of the creation functionality of the application. ComponentPanel, HTMLPanel, and StatePropsPanel are all hanged here.
78
// This allows users to create all aspects of this application in one place.
89
const CreationPanel = (props): JSX.Element => {
10+
const {style} = useContext(styleContext);
911
return (
10-
<div className="creation-panel" >
12+
<div className="creation-panel" style={style}>
1113
<ComponentPanel isThemeLight={props.isThemeLight}/>
1214
<HTMLPanel isThemeLight={props.isThemeLight}/>
1315
<StatePropsPanel isThemeLight={props.isThemeLight}/>

‎app/src/components/left/HTMLPanel.tsx

Lines changed: 13 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,8 @@ import React, { useState, useCallback, useContext, useEffect } from 'react';
22
import Grid from '@material-ui/core/Grid';
33
import StateContext from '../../context/context';
44
import HTMLItem from './HTMLItem';
5+
// import { styleContext } from './AppContainer';
6+
57
import { makeStyles, styled } from '@material-ui/core/styles';
68
import {
79
Button,
@@ -32,6 +34,7 @@ const HTMLPanel = (props): JSX.Element => {
3234
const [errorStatus, setErrorStatus] = useState(false);
3335
const [state, dispatch] = useContext(StateContext);
3436
const {isThemeLight} = props;
37+
// const { style } = useContext(styleContext);
3538
let startingID = 0;
3639
state.HTMLTypes.forEach(element => {
3740
if (element.id >= startingID) startingID = element.id;
@@ -156,12 +159,12 @@ const HTMLPanel = (props): JSX.Element => {
156159
}, []);
157160

158161
return (
159-
<div className="HTMLItemCreate">
162+
<div className="HTMLItemCreate" >
160163
<div className={classes.addComponentWrapper}>
161164
<div className={classes.inputWrapper}>
162165
<form onSubmit={handleSubmit} className="customForm">
163166

164-
<h4 className={isThemeLight ? classes.lightThemeFontColor : classes.darkThemeFontColor }>New HTML Tag: </h4>
167+
<h4 className={isThemeLight ? classes.lightThemeFontColor : classes.darkThemeFontColor } value = "New HTML Tag">New HTML Tag: </h4>
165168
<InputLabel className={isThemeLight ? `${classes.inputLabel} ${classes.lightThemeFontColor}` : `${classes.inputLabel} ${classes.darkThemeFontColor}`}>
166169
Tag:
167170
</InputLabel>
@@ -268,10 +271,16 @@ const useStyles = makeStyles({
268271
borderRadius: '4px',
269272
},
270273
lightThemeFontColor: {
271-
color: '#155084'
274+
color: '#155084',
275+
'& .MuiInputBase-root': {
276+
color: 'rgba (0, 0, 0, 0.54)',
277+
}
272278
},
273279
darkThemeFontColor: {
274-
color: '#ffffff'
280+
color: '#ffffff',
281+
'& .MuiInputBase-root': {
282+
color: '#fff',
283+
}
275284
},
276285
errorMessage: {
277286
fontSize:"11px",

‎app/src/components/login/SignUp.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -281,7 +281,7 @@ const SignUp: React.FC<LoginInt & RouteComponentProps> = props => {
281281
onClick={e => handleSignUp(e)}
282282
>
283283
Sign Up
284-
</Button>+
284+
</Button>
285285
<Grid container justify="flex-end">
286286
<Grid item>
287287
<RouteLink to={`/login`} className="nav_link">

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -34,6 +34,7 @@ const ComponentDrag = ({isThemeLight}): JSX.Element => {
3434
name={comp.name}
3535
id={comp.id}
3636
root={true}
37+
isThemeLight={isThemeLight}
3738
/>
3839

3940
);

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

Lines changed: 9 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -125,7 +125,7 @@ const ComponentPanel = ({isThemeLight}): JSX.Element => {
125125
}, []);
126126

127127
return (
128-
<div className={classes.panelWrapper}>
128+
<div className={`${classes.panelWrapper}`}>
129129
{/* Add a new component*/}
130130
<div className={classes.addComponentWrapper}>
131131
<h4
@@ -216,7 +216,6 @@ const useStyles = makeStyles({
216216
flexDirection:'column',
217217
alignItems:'center',
218218
flexGrow : 1,
219-
backgroundColor: '#F9F9F9',
220219
color: '#000000',
221220
},
222221
addComponentWrapper: {
@@ -262,10 +261,16 @@ const useStyles = makeStyles({
262261
fontSize: '0.85rem'
263262
},
264263
lightThemeFontColor: {
265-
color: '#155084'
264+
color: '#155084',
265+
'& .MuiInputBase-root': {
266+
color: 'rgba (0, 0, 0, 0.54)',
267+
}
266268
},
267269
darkThemeFontColor: {
268-
color: '#fff'
270+
color: '#fff',
271+
'& .MuiInputBase-root': {
272+
color: '#fff',
273+
}
269274
}
270275
});
271276

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

Lines changed: 10 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -41,7 +41,8 @@ const ComponentPanelItem: React.FC<{
4141
id: number;
4242
root: boolean;
4343
isFocus: boolean;
44-
}> = ({ name, id, root, isFocus }) => {
44+
isThemeLight: boolean;
45+
}> = ({ name, id, root, isFocus, isThemeLight }) => {
4546
const classes = useStyles();
4647
const [state, dispatch] = useContext(StateContext);
4748

@@ -73,8 +74,7 @@ const ComponentPanelItem: React.FC<{
7374
xs={8}
7475
style={{
7576
display: 'grid',
76-
color: '#262626',
77-
display: 'grid',
77+
color: isThemeLight ? 'black' : 'white',
7878
backgroundColor: 'transparent',
7979
border: root
8080
? '2px dotted #186BB4'
@@ -86,7 +86,7 @@ const ComponentPanelItem: React.FC<{
8686
>
8787
{isFocus && <div className={classes.focusMark}></div>}
8888
<div className="compPanelItem" onClick={handleClick}>
89-
<h3 >{name}</h3>
89+
<h3>{name}</h3>
9090
</div>
9191
</Grid>
9292
);
@@ -102,6 +102,12 @@ const useStyles = makeStyles({
102102
width: '12px',
103103
height: '12px',
104104
borderRadius: '25px',
105+
},
106+
lightTheme: {
107+
color: 'rgba (0, 0, 0, 0.54)'
108+
},
109+
darkTheme: {
110+
color: '#fff'
105111
}
106112
});
107113

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

Lines changed: 74 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,9 @@ import {
55
makeStyles,
66
styled,
77
Theme,
8+
createTheme,
9+
ThemeProvider,
10+
withStyles
811
} from "@material-ui/core/styles";
912
import Button from "@material-ui/core/Button";
1013
import {
@@ -24,6 +27,7 @@ import {
2427
import StateContext from "../../context/context";
2528
import TableStateProps from "./TableStateProps";
2629

30+
2731
const StatePropsPanel = ({ isThemeLight }): JSX.Element => {
2832
const classes = useStyles();
2933
const [state] = useContext(StateContext);
@@ -119,27 +123,33 @@ const StatePropsPanel = ({ isThemeLight }): JSX.Element => {
119123
<div className={'state-panel'}>
120124
<div>
121125
<FormControl>
122-
<h4>Create New State</h4>
126+
<h4 className={isThemeLight ? classes.lightThemeFontColor : classes.darkThemeFontColor}>Create New State</h4>
123127
<TextField
124128
id="textfield-key"
125129
label="key:"
126130
variant="outlined"
127131
value={inputKey}
128132
onChange={(e) => setInputKey(e.target.value)}
129-
/>
133+
className={isThemeLight ? `${classes.rootLight} ${classes.inputTextLight}` : `${classes.rootDark} ${classes.inputTextDark}`}
134+
/>
130135
<TextField
131136
id="textfield-value"
132137
label="value:"
133138
variant="outlined"
134139
value={inputValue}
135140
onChange={(e) => setInputValue(e.target.value)}
136-
/>
137-
<FormControl required className={classes.formControl}>
138-
<InputLabel id="select-required-label">Type</InputLabel>
141+
className={isThemeLight ? `${classes.rootLight} ${classes.inputTextLight}` : `${classes.rootDark} ${classes.inputTextDark}`}
142+
/>
143+
<FormControl required className={isThemeLight ? `${classes.formControl} ${classes.lightThemeFontColor}` : `${classes.formControl} ${classes.darkThemeFontColor}`}>
144+
<InputLabel
145+
id="select-required-label"
146+
className={isThemeLight ? classes.greyThemeFontColor : classes.darkThemeFontColor}>
147+
Type
148+
</InputLabel>
139149
<Select
140150
labelId="select-required-label"
141151
id="type-input"
142-
className={classes.selectEmpty}
152+
className={isThemeLight ? `${classes.selectEmpty} ${classes.rootUnderlineLight} ${classes.inputTextLight}` : `${classes.selectEmpty} ${classes.rootUnderlineDark} ${classes.inputTextDark}`}
143153
value={inputType}
144154
onChange={(event, index) => setInputType(index.props.value)}
145155
>
@@ -165,7 +175,10 @@ const StatePropsPanel = ({ isThemeLight }): JSX.Element => {
165175
Any
166176
</MenuItem>
167177
</Select>
168-
<FormHelperText>Required</FormHelperText>
178+
<FormHelperText
179+
className={isThemeLight ? classes.greyThemeFontColor : classes.darkThemeFontColor}>
180+
Required
181+
</FormHelperText>
169182
</FormControl>
170183
<br></br>
171184
<MyButton
@@ -180,15 +193,17 @@ const StatePropsPanel = ({ isThemeLight }): JSX.Element => {
180193
</div>
181194
<br></br>
182195
<div>
183-
<h4>Current State Name: {state.components[state.canvasFocus.componentId - 1].name}</h4>
184-
<TableStateProps selectHandler={handlerRowSelect} deleteHandler={handlerRowDelete} />
196+
<h4 className={isThemeLight ? classes.lightThemeFontColor : classes.darkThemeFontColor}>
197+
Current State Name: {state.components[state.canvasFocus.componentId - 1].name}
198+
</h4>
199+
<TableStateProps selectHandler={handlerRowSelect} deleteHandler={handlerRowDelete} isThemeLight={isThemeLight} />
185200
</div>
186201
</div>
187202
);
188203
};
189204

190205
const useStyles = makeStyles((theme: Theme) =>
191-
createStyles({
206+
({
192207
inputField: {
193208
marginTop: "10px",
194209
borderRadius: "5px",
@@ -287,13 +302,61 @@ const useStyles = makeStyles((theme: Theme) =>
287302
darkThemeFontColor: {
288303
color: "#fff",
289304
},
305+
greyThemeFontColor: {
306+
color: 'rgba(0,0,0,0.54)',
307+
},
290308
formControl: {
291309
margin: theme.spacing(1),
292310
minWidth: 120,
293311
},
294312
selectEmpty: {
295313
marginTop: theme.spacing(2),
296314
},
315+
color: {
316+
color: '#fff',
317+
},
318+
rootLight: {
319+
'& .MuiFormLabel-root': {
320+
color: 'rgba(0,0,0,0.54)'
321+
}
322+
},
323+
rootDark: {
324+
'& .MuiFormLabel-root': {
325+
color: '#fff'
326+
},
327+
'& .MuiOutlinedInput-notchedOutline': {
328+
borderColor: '#fff'
329+
}
330+
},
331+
underlineDark: {
332+
borderBottom: '1px solid white'
333+
},
334+
rootUnderlineDark: {
335+
'& .MuiSelect-icon': {
336+
color: '#fff',
337+
},
338+
'&::before': {
339+
borderBottom: '1px solid #fff'
340+
}
341+
},
342+
rootUnderlineLight: {
343+
'& .MuiSelect-icon': {
344+
color: 'rgba(0,0,0,0.54)',
345+
},
346+
'&::before': {
347+
borderBottom: '1px solid rgba(0,0,0,0.54)'
348+
}
349+
},
350+
inputTextDark: {
351+
'& .MuiInputBase-input': {
352+
color: 'white'
353+
}
354+
},
355+
inputTextLight: {
356+
'& .MuiInputBase-input': {
357+
color: 'rgba(0,0,0,0.54)'
358+
}
359+
}
297360
})
298361
);
299362

@@ -308,4 +371,5 @@ const MyButton = styled(Button)({
308371
padding: "0 30px",
309372
});
310373

374+
311375
export default StatePropsPanel;

0 commit comments

Comments
 (0)