Skip to content

Commit 8505b24

Browse files
jzuniga206jzuniga206
authored
Merge pull request #32 from ibeeliot/master
Refactored Styling: Component Props, Html Attributes
2 parents 2716d6c + be5568c commit 8505b24

File tree

11 files changed

+286
-356
lines changed

11 files changed

+286
-356
lines changed

‎package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -90,7 +90,7 @@
9090
]
9191
},
9292
"dependencies": {
93-
"@material-ui/core": "^4.0.1",
93+
"@material-ui/core": "^4.2.1",
9494
"@material-ui/icons": "^4.0.1",
9595
"@material-ui/styles": "^4.9.0",
9696
"@types/prettier": "^1.19.0",

‎src/components/BottomTabs.tsx

Lines changed: 23 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -38,13 +38,13 @@ const styles = (theme: Theme): any => ({
3838
backgroundColor: '#333333',
3939
height: '100%',
4040
color: '#fff',
41-
boxShadow: '0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23)',
41+
boxShadow: '0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23)'
4242
},
4343
tabsRoot: {
44-
borderBottom: '0.5px solid #424242',
44+
borderBottom: '0.5px solid #424242'
4545
},
4646
tabsIndicator: {
47-
backgroundColor: '#1de9b6',
47+
backgroundColor: '#1de9b6'
4848
},
4949
tabRoot: {
5050
textTransform: 'initial',
@@ -62,35 +62,35 @@ const styles = (theme: Theme): any => ({
6262
'sans-serif',
6363
'"Apple Color Emoji"',
6464
'"Segoe UI Emoji"',
65-
'"Segoe UI Symbol"',
65+
'"Segoe UI Symbol"'
6666
].join(','),
6767
'&:hover': {
6868
color: '#1de9b6',
69-
opacity: 1,
69+
opacity: 1
7070
},
7171
'&$tabSelected': {
7272
color: '#33eb91',
73-
fontWeight: theme.typography.fontWeightMedium,
73+
fontWeight: theme.typography.fontWeightMedium
7474
},
7575
'&:focus': {
76-
color: '#4aedc4',
77-
},
76+
color: '#4aedc4'
77+
}
7878
},
7979
tabSelected: {},
8080
typography: {
81-
padding: theme.spacing.unit * 3,
81+
padding: theme.spacing.unit * 3
8282
},
8383
padding: {
84-
padding: `0 ${theme.spacing.unit * 2}px`,
85-
},
84+
padding: `0 ${theme.spacing.unit * 2}px`
85+
}
8686
});
8787

8888
class BottomTabs extends Component<BottomTabsPropsInt, StateInt> {
8989
constructor(props: BottomTabsPropsInt) {
9090
super(props);
9191
this.state = {
9292
value: 0,
93-
translate: { x: 0, y: 0 },
93+
translate: { x: 0, y: 0 }
9494
};
9595
}
9696
treeWrapper: HTMLDivElement;
@@ -100,8 +100,8 @@ class BottomTabs extends Component<BottomTabsPropsInt, StateInt> {
100100
this.setState({
101101
translate: {
102102
x: dimensions.width / 12,
103-
y: dimensions.height / 2.2,
104-
},
103+
y: dimensions.height / 2.2
104+
}
105105
});
106106
}
107107

@@ -129,7 +129,7 @@ class BottomTabs extends Component<BottomTabsPropsInt, StateInt> {
129129
tree.children.push({
130130
name: child.componentName,
131131
attributes: str,
132-
children: [],
132+
children: []
133133
});
134134
}
135135
});
@@ -143,7 +143,7 @@ class BottomTabs extends Component<BottomTabsPropsInt, StateInt> {
143143
focusComponent,
144144
deleteProp,
145145
addProp,
146-
focusChild,
146+
focusChild
147147
} = this.props;
148148
const { value } = this.state;
149149

@@ -194,7 +194,7 @@ class BottomTabs extends Component<BottomTabsPropsInt, StateInt> {
194194
id='treeWrapper'
195195
style={{
196196
width: '100%',
197-
height: '100%',
197+
height: '100%'
198198
}}
199199
ref={node => (this.treeWrapper = node)}
200200
>
@@ -210,17 +210,17 @@ class BottomTabs extends Component<BottomTabsPropsInt, StateInt> {
210210
name: {
211211
fill: '#D3D3D3',
212212
stroke: '#D3D3D3',
213-
strokeWidth: 1,
214-
},
213+
strokeWidth: 1
214+
}
215215
},
216216
leafNode: {
217217
name: {
218218
fill: '#D3D3D3',
219219
stroke: '#D3D3D3',
220-
strokeWidth: 1,
221-
},
222-
},
223-
},
220+
strokeWidth: 1
221+
}
222+
}
223+
}
224224
}}
225225
/>
226226
</div>

‎src/components/DataTable.tsx

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,12 @@ const styles = (theme: Theme) => ({
1919
table: {
2020
minWidth: 500,
2121
marginRight: '100px'
22+
},
23+
tableCell: {
24+
fontWeight: '900',
25+
fontSize: '1.2rem',
26+
color: '#91D1F9',
27+
border: '1px solid red'
2228
}
2329
});
2430

‎src/components/HtmlAttr.tsx

Lines changed: 65 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -27,47 +27,82 @@ const styles = (theme: Theme): any => ({
2727
display: 'flex',
2828
justifyContent: 'center',
2929
flexWrap: 'wrap',
30+
height: '30px',
31+
width: '15rem',
32+
marginTop: '1rem',
33+
borderRadius: '5px'
34+
// border: '1px solid orange'
3035
},
3136
cssLabel: {
3237
color: 'white',
38+
marginTop: '10px'
39+
// border: '1px solid blue'
3340
},
3441
cssFocused: {
35-
color: 'green',
42+
color: 'green'
3643
},
3744
input: {
3845
color: '#fff',
3946
opacity: '0.7',
40-
marginBottom: '15px',
47+
height: '45px',
48+
width: '146px',
49+
marginTop: '20px',
50+
borderRadius: '5px',
51+
border: '1px solid #33eb91'
4152
},
53+
select: {
54+
background: '#424242',
55+
height: '45px',
56+
width: '146px',
57+
marginTop: '0px',
58+
color: '#fff',
59+
paddingLeft: '14px',
60+
borderRadius: '5px'
61+
},
62+
selectLabel: {
63+
color: 'white',
64+
zIndex: '10',
65+
dropShadow: '1px 1px 3px #fff',
66+
marginTop: '10px'
67+
68+
// border: '1px solid blue'
69+
},
70+
71+
save: {
72+
height: '45px',
73+
width: '146px',
74+
marginTop: '23px',
75+
marginLeft: '35px',
76+
borderRadius: '2px'
77+
}
4278
});
4379

4480
const mapDispatchToProps = (dispatch: any) => ({
4581
updateHtmlAttr: ({ attr, value }: { attr: string; value: string }) => {
4682
dispatch(updateHtmlAttr({ attr, value }));
47-
},
83+
}
4884
});
4985

5086
const mapStateToProps = (store: any) => ({
5187
focusComponent: store.workspace.focusComponent,
52-
focusChild: store.workspace.focusChild,
88+
focusChild: store.workspace.focusChild
5389
});
5490

5591
// available types for select drop-down for button types
5692
const availableButtonTypes = {
5793
button: 'BUTTON',
5894
submit: 'SUBMIT',
59-
reset: 'RESET',
95+
reset: 'RESET'
6096
};
6197

6298
// function for generating the button types for select dropdown
6399
// uses Object.keys method on object of drop down types
64100
const buttonTypeOptions = [
65-
<option value='' key='' />,
66-
...Object.keys(availableButtonTypes).map(type => (
101+
Object.keys(availableButtonTypes).map(type => (
67102
<option value={type} key={type} style={{ color: '#000' }}>
68103
{type == null ? '' : type}
69104
</option>
70-
)),
105+
))
71106
];
72107

73108
// this is a variable to save temp state for button types
@@ -82,7 +117,7 @@ class HtmlAttr extends Component<HTMLAttrPropsInt, StateInt> {
82117

83118
return acc;
84119
},
85-
{},
120+
{}
86121
);
87122

88123
// State looks like:
@@ -92,16 +127,9 @@ class HtmlAttr extends Component<HTMLAttrPropsInt, StateInt> {
92127
// propType: ''
93128

94129
handleChange = (event: MouseEvent) => {
95-
if (
96-
event.target.value == 'button' ||
97-
event.target.value == 'submit' ||
98-
event.target.value == 'reset'
99-
) {
100-
buttonTypeTemp = event.target.value;
101-
}
102-
130+
buttonTypeTemp = event.target.value;
103131
this.setState({
104-
[event.target.id]: event.target.value,
132+
[event.target.id]: buttonTypeTemp
105133
});
106134
};
107135

@@ -111,12 +139,12 @@ class HtmlAttr extends Component<HTMLAttrPropsInt, StateInt> {
111139
if (attr == 'type') {
112140
this.props.updateHtmlAttr({ attr, value: buttonTypeTemp });
113141
this.setState({
114-
[attr]: '',
142+
[attr]: ''
115143
});
116144
} else {
117145
this.props.updateHtmlAttr({ attr, value: this.state[attr] });
118146
this.setState({
119-
[attr]: '',
147+
[attr]: ''
120148
});
121149
}
122150
};
@@ -132,33 +160,28 @@ class HtmlAttr extends Component<HTMLAttrPropsInt, StateInt> {
132160
container
133161
spacing={0}
134162
key={i}
135-
style={{ marginTop: '10px', marginRight: '20px' }}
163+
style={{
164+
marginTop: '10px',
165+
marginRight: '20px',
166+
background: '5px solid yellow'
167+
}}
136168
>
137169
<Grid item xs={1}>
138170
{/* if the attr being rendered for the HTMLForm is a button, then give it a special
139171
condition to render a "select" component rather than a text-input component */}
140172
{attr == 'type' ? (
141173
<FormControl required>
142-
<InputLabel className={classes.light} htmlFor='htmlType'>
174+
<InputLabel className={classes.selectLabel} htmlFor='htmlType'>
143175
Type
144176
</InputLabel>
145177
<Select
146178
native
147-
className={classes.light}
179+
className={classes.select}
148180
id='htmlType'
149181
placeholder='title'
150182
onChange={this.handleChange}
151183
value={buttonTypeTemp}
152-
defaultValue={'button'}
153-
style={{
154-
background: '#424242',
155-
height: '45px',
156-
width: '146px',
157-
marginBottom: '23px',
158-
marginTop: '0px',
159-
color: '#fff',
160-
paddingLeft: '14px'
161-
}}
184+
defaultValue={`${``}`}
162185
required
163186
>
164187
{buttonTypeOptions}
@@ -170,18 +193,12 @@ class HtmlAttr extends Component<HTMLAttrPropsInt, StateInt> {
170193
classes: {
171194
root: classes.cssLabel,
172195
focused: classes.cssFocused,
173-
input: classes.input
196+
input: classes.inputLabel
174197
}
175198
}}
176199
InputProps={{
177-
classes: {
178-
root: classes.cssOutlinedInput,
179-
focused: classes.cssFocused,
180-
notchedOutline: classes.notchedOutline,
181-
input: classes.input
182-
}
200+
className: classes.input
183201
}}
184-
style={{ background: '#424242', height: '70%' }}
185202
label={attr}
186203
variant='outlined'
187204
id={attr}
@@ -196,11 +213,13 @@ class HtmlAttr extends Component<HTMLAttrPropsInt, StateInt> {
196213
size='small'
197214
color='default'
198215
aria-label='Save'
199-
style={{
200-
marginLeft: '10px',
201-
marginTop: '5px',
202-
marginBottom: '10px'
203-
}}
216+
// style={{
217+
// marginLeft: '10px',
218+
// marginTop: '5px',
219+
// marginBottom: '10px',
220+
// border: '2px solid pink'
221+
// }}
222+
className={classes.save}
204223
onClick={e => {
205224
e.preventDefault();
206225
this.handleSave(attr);

0 commit comments

Comments
 (0)