Skip to content

Commit f54647f

Browse files
aw2934aw2934
authored
Merge pull request #2 from lukemadden/merge
Merge
2 parents 435c9ff + 9e3ef57 commit f54647f

24 files changed

+944
-269
lines changed

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

Lines changed: 20 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -17,10 +17,10 @@ const BottomTabs = () => {
1717
const [tab, setTab] = useState(0);
1818
const classes = useStyles();
1919
treeWrapper: HTMLDivElement;
20-
const [theme, setTheme] = useState('monokai');
20+
const [theme, setTheme] = useState('solarized_light');
2121
const { style } = useContext(styleContext);
2222

23-
// method changes the
23+
// breaks if handleChange is commented out
2424
const handleChange = (event: React.ChangeEvent, value: number) => {
2525
setTab(value);
2626
};
@@ -53,36 +53,36 @@ const BottomTabs = () => {
5353
label="Component Tree"
5454
/>
5555
</Tabs>
56+
{/* Removed all style={{ backgroundColor: '#252526' }} from within each option tag. Its functionality was not apparent on page. */}
5657
<FormControl>
5758
<div className="flex-container">
58-
<div className="flex1">Change Theme:</div>
59+
<div className="flex1"></div>
5960
<NativeSelect
6061
className="flex2"
61-
style={{ color: 'white' }}
62+
style={{ color: '#091833' }}
6263
value={theme}
6364
onChange={changeTheme}
6465
>
65-
<option style={{ backgroundColor: '#252526' }} value={'monokai'}>
66-
Monokai
67-
</option>
68-
<option style={{ backgroundColor: '#252526' }} value={'github'}>
66+
<option value={'github'}>
6967
Github
7068
</option>
69+
<option value={'monokai'}>
70+
Monokai
71+
</option>
7172
<option
72-
style={{ backgroundColor: '#252526' }}
7373
value={'solarized_dark'}
7474
>
7575
Solarized Dark
7676
</option>
77-
<option style={{ backgroundColor: '#252526' }} value={'terminal'}>
78-
Terminal
79-
</option>
8077
<option
81-
style={{ backgroundColor: '#252526' }}
8278
value={'solarized_light'}
8379
>
8480
Solarized Light
8581
</option>
82+
<option value={'terminal'}>
83+
Terminal
84+
</option>
85+
8686
</NativeSelect>
8787
</div>
8888
</FormControl>
@@ -96,9 +96,9 @@ const BottomTabs = () => {
9696
const useStyles = makeStyles(theme => ({
9797
root: {
9898
flexGrow: 1,
99-
backgroundColor: '#333333',
99+
backgroundColor: '#3ea3d6',
100100
height: '100%',
101-
color: '#fff',
101+
color: '#091921',
102102
boxShadow: '0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23)'
103103
},
104104
bottomHeader: {
@@ -108,11 +108,11 @@ const useStyles = makeStyles(theme => ({
108108
Width: '200px'
109109
},
110110
tabsRoot: {
111-
borderBottom: '0.5px solid #424242',
111+
// borderBottom: '0.5px solid #424242',
112112
minHeight: '50%'
113113
},
114114
tabsIndicator: {
115-
backgroundColor: '#1de9b6'
115+
backgroundColor: '#545E75'
116116
},
117117
tabRoot: {
118118
textTransform: 'initial',
@@ -133,15 +133,15 @@ const useStyles = makeStyles(theme => ({
133133
'"Segoe UI Symbol"'
134134
].join(','),
135135
'&:hover': {
136-
color: '#1de9b6',
136+
color: 'white',
137137
opacity: 1
138138
},
139139
'&$tabSelected': {
140-
color: '#33eb91',
140+
color: 'white',
141141
fontWeight: theme.typography.fontWeightMedium
142142
},
143143
'&:focus': {
144-
color: '#4aedc4'
144+
color: 'white'
145145
}
146146
},
147147
tabSelected: {},

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -53,8 +53,8 @@ const CodePreview: React.FC<{
5353
width="100%"
5454
height="100%"
5555
style={{
56-
border: '2px solid #33eb91',
57-
borderRadius: '8px'
56+
// border: '2px solid #33eb91',
57+
// borderRadius: '8px'
5858
}}
5959
onChange={handleCodeSnipChange}
6060
value={currentComponent.code}

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

Lines changed: 78 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ import Button from '@material-ui/core/Button';
88
import FormControlLabel from '@material-ui/core/FormControlLabel';
99
import Checkbox from '@material-ui/core/Checkbox';
1010
import { makeStyles } from '@material-ui/core/styles';
11+
import { flexbox } from '@material-ui/system';
1112

1213
// The component panel section of the left panel displays all components and has the ability to add new components
1314
const ComponentPanel = (): JSX.Element => {
@@ -116,26 +117,28 @@ const ComponentPanel = (): JSX.Element => {
116117
{/* Add a new component*/}
117118
<div className={classes.addComponentWrapper}>
118119
<div>
120+
<h4 className={classes.newComponent}>New Component:</h4>
121+
{/* <label className={classes.inputLabel}>Name:</label> */}
119122
<div className={classes.inputWrapper}>
120123
{/* This renders the text field at the top left of the app, above the "ADD" button */}
121124
<TextField
122125
color={'primary'}
123-
label="Component Name"
126+
// label="Component Name"
124127
variant="outlined"
125128
className={classes.inputField}
126129
InputProps={{ className: classes.input }}
127-
InputLabelProps={{ className: classes.inputLabel }}
130+
// InputLabelProps={{ className: classes.inputLabel }}
128131
value={compName}
129132
error={errorStatus}
130133
helperText={errorStatus ? errorMsg : ''}
131134
onChange={handleNameInput}
132135
/>
133-
<div className={classes.btnGroup}>
134-
{/* This renders the checkbox adjacent to the "Component Name" text box */}
136+
<div className={classes.btnGroup} id="checkboxContainer">
135137
<FormControlLabel
136138
value="top"
137139
control={
138140
<Checkbox
141+
className={classes.rootCheckbox}
139142
color="primary"
140143
checked={isRoot}
141144
onChange={toggleRootStatus}
@@ -147,16 +150,28 @@ const ComponentPanel = (): JSX.Element => {
147150
/>
148151
</div>
149152
</div>
150-
{/* Renders the ADD button */}
151-
<Button
152-
className={classes.button}
153-
color="primary"
153+
<button
154+
className={classes.addComponentButton}
155+
id="addComponentButton"
154156
onClick={handleNameSubmit}
155157
>
156-
ADD
157-
</Button>
158+
Create
159+
</button>
158160
</div>
159161
</div>
162+
<div className="lineDiv">
163+
<hr
164+
style={{
165+
borderColor: '#f5f5f5',
166+
borderStyle: 'solid',
167+
color: '#f5f5f5',
168+
backgroundColor: 'white',
169+
height: '0.5px',
170+
width: '100%',
171+
marginLeft: '0px'
172+
}}
173+
/>
174+
</div>
160175
{/* Display all root components */}
161176
<div className={classes.panelWrapperList}>
162177
{/* Heading just below ADD button */}
@@ -216,26 +231,36 @@ const ComponentPanel = (): JSX.Element => {
216231

217232
const useStyles = makeStyles({
218233
inputField: {
219-
marginTop: '15px'
234+
marginTop: '0px'
220235
},
221236
inputWrapper: {
222237
// height: '115px',
223238
textAlign: 'center',
224239
display: 'flex',
240+
flexDirection: 'column',
225241
alignItems: 'center',
226242
justifyContent: 'space-between',
227-
// paddingLeft: '35px',
228-
marginBottom: '15px'
243+
paddingLeft: '35px',
244+
marginBottom: '15px',
229245
},
230246
addComponentWrapper: {
231-
border: '1px solid rgba(70,131,83)',
232-
padding: '20px',
233-
margin: '20px'
247+
// border: '1px solid rgba(70,131,83)',
248+
//-------------------CHANGED----------------------------------------------
249+
// border: '1px solid rgba(247, 167, 62, 0.75)',
250+
padding: 'auto',
251+
marginLeft: '21px',
252+
display: 'inline-block',
253+
// flexDirection: 'column',
254+
// justifyContent: 'space-between'
234255
},
235-
rootCheckBox: {},
236-
rootCheckBoxLabel: {
256+
rootCheckBox: {
257+
borderColor: 'white',
237258
color: 'white'
238259
},
260+
rootCheckBoxLabel: {
261+
color: 'white',
262+
borderColor: 'white'
263+
},
239264
panelWrapper: {
240265
width: '100%',
241266
marginTop: '15px'
@@ -252,38 +277,55 @@ const useStyles = makeStyles({
252277
color: '#fff'
253278
},
254279
input: {
255-
color: '#fff',
280+
// color: 'white',
281+
borderStyle: 'solid',
256282
borderRadius: '5px',
257-
paddingLeft: '15px',
258-
paddingRight: '10px',
283+
borderColor: 'white',
284+
// paddingLeft: '15px',
285+
// paddingRight: '10px',
286+
marginLeft: '-34px',
287+
width: '120px',
288+
height: '30px',
259289
whiteSpace: 'nowrap',
260-
overflowX: 'hidden',
261-
textOverflow: 'ellipsis',
262-
border: '1px solid rgba(51,235,145,0.75)',
263-
backgroundColor: 'rgba(255,255,255,0.15)'
290+
// border: '1px solid white'
291+
// overflowX: 'hidden',
292+
// textOverflow: 'ellipsis',
293+
// border: '1px solid rgba(51,235,145,0.75)',
294+
// backgroundColor: 'rgba(255,255,255,0.15)'
295+
},
296+
newComponent: {
297+
color: '#3d88e3',
298+
fontSize: '95%',
299+
marginTop: '0px'
264300
},
265301
inputLabel: {
266-
fontSize: '14px',
267-
zIndex: 20,
302+
fontSize: '.77em',
303+
// zIndex: 20,
268304
color: '#fff',
269-
marginTop: '-10px'
305+
marginLeft: '10px'
270306
},
271307
btnGroup: {
272308
display: 'flex',
273309
flexDirection: 'column',
274310
paddingTop: '10px',
275-
marginLeft: '10px'
276311
},
277-
button: {
278-
fontSize: '1rem',
312+
addComponentButton: {
313+
color: '#77b6ed',
314+
backgroundColor: 'transparent',
279315
height: '40px',
280-
maginTop: '10px',
281-
width: '100%',
282-
// border: '1px solid rgba(70,131,83)',
283-
backgroundColor: 'rgba(1,212,109,0.1)'
316+
width: '100px',
317+
fontFamily: '"Raleway", sans-serif',
318+
fontSize: '90%',
319+
textAlign: 'center',
320+
margin: '-20px 0px 5px 11px',
321+
// marginLeft: '30px',
322+
// border: '1px solid white',
323+
borderStyle: 'none',
324+
transition: '0.3s',
325+
borderRadius: '25px',
284326
},
285327
rootToggle: {
286-
color: '#01d46d',
328+
color: '#808080',
287329
fontSize: '0.85rem'
288330
}
289331
});

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -94,7 +94,7 @@ const useStyles = makeStyles({
9494
backgroundColor: 'rgba(1,212,109,0.3)'
9595
},
9696
focusMark: {
97-
backgroundColor: '#01d46d',
97+
backgroundColor: '#808080',
9898
position: 'absolute',
9999
width: '12px',
100100
height: '12px',

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

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -87,6 +87,7 @@ const ComponentPanelRoutingItem: React.FC<{}> = () => {
8787
borderRadius: '8px'
8888
}}
8989
>
90+
{/* Route Link component */}
9091
<div className="compPanelItem">
9192
<h3>Route Link</h3>
9293
{/* Select is the dropdown menu */}
@@ -115,7 +116,7 @@ const useStyles = makeStyles({
115116
backgroundColor: 'rgba(1,212,109,0.3)'
116117
},
117118
focusMark: {
118-
backgroundColor: '#01d46d',
119+
backgroundColor: '#808080',
119120
position: 'absolute',
120121
width: '12px',
121122
height: '12px',
@@ -124,7 +125,7 @@ const useStyles = makeStyles({
124125
top: '30px'
125126
},
126127
routeSelector: {
127-
backgroundColor: 'rgba(255,255,255,0.15)',
128+
backgroundColor: '#808080',
128129
marginLeft: '20px',
129130
color: '#fff',
130131
height: '60%',

0 commit comments

Comments
 (0)