Skip to content

Commit e09c3f4

Browse files
ibeeliotibeeliot
committed
Refactored style components
1 parent 5876d35 commit e09c3f4

File tree

4 files changed

+119
-215
lines changed

4 files changed

+119
-215
lines changed

‎src/components/HtmlAttr.tsx

Lines changed: 56 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -26,18 +26,54 @@ const styles = (theme: Theme): any => ({
2626
root: {
2727
display: 'flex',
2828
justifyContent: 'center',
29-
flexWrap: 'wrap'
29+
flexWrap: 'wrap',
30+
height: '30px',
31+
width: '15rem',
32+
marginTop: '1rem',
33+
borderRadius: '5px'
34+
// border: '1px solid orange'
3035
},
3136
cssLabel: {
32-
color: 'white'
37+
color: 'white',
38+
marginTop: '10px'
39+
// border: '1px solid blue'
3340
},
3441
cssFocused: {
3542
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'
52+
},
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'
4177
}
4278
});
4379

@@ -124,33 +160,28 @@ class HtmlAttr extends Component<HTMLAttrPropsInt, StateInt> {
124160
container
125161
spacing={0}
126162
key={i}
127-
style={{ marginTop: '10px', marginRight: '20px' }}
163+
style={{
164+
marginTop: '10px',
165+
marginRight: '20px',
166+
background: '5px solid yellow'
167+
}}
128168
>
129169
<Grid item xs={1}>
130170
{/* if the attr being rendered for the HTMLForm is a button, then give it a special
131171
condition to render a "select" component rather than a text-input component */}
132172
{attr == 'type' ? (
133173
<FormControl required>
134-
<InputLabel className={classes.light} htmlFor='htmlType'>
174+
<InputLabel className={classes.selectLabel} htmlFor='htmlType'>
135175
Type
136176
</InputLabel>
137177
<Select
138178
native
139-
className={classes.light}
179+
className={classes.select}
140180
id='htmlType'
141181
placeholder='title'
142182
onChange={this.handleChange}
143183
value={buttonTypeTemp}
144-
defaultValue={'button'}
145-
style={{
146-
background: '#424242',
147-
height: '45px',
148-
width: '146px',
149-
marginBottom: '23px',
150-
marginTop: '0px',
151-
color: '#fff',
152-
paddingLeft: '14px'
153-
}}
184+
defaultValue={`${``}`}
154185
required
155186
>
156187
{buttonTypeOptions}
@@ -162,18 +193,12 @@ class HtmlAttr extends Component<HTMLAttrPropsInt, StateInt> {
162193
classes: {
163194
root: classes.cssLabel,
164195
focused: classes.cssFocused,
165-
input: classes.input
196+
input: classes.inputLabel
166197
}
167198
}}
168199
InputProps={{
169-
classes: {
170-
root: classes.cssOutlinedInput,
171-
focused: classes.cssFocused,
172-
notchedOutline: classes.notchedOutline,
173-
input: classes.input
174-
}
200+
className: classes.input
175201
}}
176-
style={{ background: '#424242', height: '70%' }}
177202
label={attr}
178203
variant='outlined'
179204
id={attr}
@@ -188,11 +213,13 @@ class HtmlAttr extends Component<HTMLAttrPropsInt, StateInt> {
188213
size='small'
189214
color='default'
190215
aria-label='Save'
191-
style={{
192-
marginLeft: '10px',
193-
marginTop: '5px',
194-
marginBottom: '10px'
195-
}}
216+
// style={{
217+
// marginLeft: '10px',
218+
// marginTop: '5px',
219+
// marginBottom: '10px',
220+
// border: '2px solid pink'
221+
// }}
222+
className={classes.save}
196223
onClick={e => {
197224
e.preventDefault();
198225
this.handleSave(attr);

‎src/components/LeftColExpansionPanel.tsx

Lines changed: 28 additions & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -60,31 +60,41 @@ const LeftColExpansionPanel = (props: LeftColExpPanPropsInt) => {
6060
direction='row'
6161
justify='center'
6262
alignItems='center'
63-
style={{ minWidth: '320px' }}
63+
style={{
64+
minWidth: '470px'
65+
}}
6466
>
6567
<Grid item xs={9}>
6668
<div
6769
className={classes.root}
6870
style={
6971
// shadow to highlight the focused component card
70-
focusedToggle ? { boxShadow: '4px 4px 4px rgba(0, 0, 0, .4)' } : {}
72+
focusedToggle
73+
? {
74+
boxShadow: '4px 4px 4px rgba(0, 0, 0, .4)',
75+
borderRadius: '8px'
76+
}
77+
: {}
7178
}
7279
>
7380
{/* {This is the component responsible for the collapsing transition animation for each component card} */}
7481
<Collapse
7582
in={focusedToggle}
7683
collapsedHeight={'70px'}
7784
timeout={500} //The type for the Collapse component is asking for a string, but if you put in a string and not a number, the component itself breaks.
85+
style={{ borderRadius: '5px' }}
7886
>
7987
{/* NOT SURE WHY COLOR: RED IS USED, TRIED REMOVING IT AND NO VISIBLE CHANGE OCCURED. */}
8088
<Grid
8189
item
8290
xs={12}
8391
style={{
84-
color: 'red',
85-
backgroundColor: color,
92+
// color: 'red',
93+
// this is experimental for version: BLADERUNNER THEME
94+
backgroundColor: 'none',
8695
borderRadius: '10px',
87-
minWidth: '320px'
96+
minWidth: '340px',
97+
border: `2px solid ${color}`
8898
}}
8999
>
90100
<List style={{ color: 'red' }}>
@@ -99,6 +109,7 @@ const LeftColExpansionPanel = (props: LeftColExpPanPropsInt) => {
99109
disableTypography
100110
className={classes.light}
101111
primary={
112+
<div>
102113
<Typography
103114
//type='body2'
104115
style={{
@@ -113,19 +124,18 @@ const LeftColExpansionPanel = (props: LeftColExpPanPropsInt) => {
113124
TO DO : IMPROVE DRYNESS OF CODE BY RENDERING ALL FOUR MATERIAL ELEMENTS (LABELS/SWITCH) IN ONE CONDITIONAL
114125
*/}
115126
{/* LABEL AND TOGGLE(SWITCH) FOR STATEFULNESS */}
116-
117127
{focusedToggle ? (
118-
<span>
128+
<span style={{ display: 'inline-flex' }}>
119129
<InputLabel
120-
htmlFor="stateful"
130+
htmlFor='stateful'
121131
style={{
122132
color: '#fff',
123-
marginBottom: '10px',
124-
marginTop: '0px',
133+
marginBottom: '0px',
134+
marginTop: '10px',
125135
marginLeft: '11px',
126136
padding: '0px',
127137
fontSize: '18px',
128-
textShadow: '1px 1px 2px rgba(0, 0, 0, 0.7)',
138+
textShadow: '1px 1px 2px rgba(0, 0, 0, 0.7)'
129139
}}
130140
>
131141
State?
@@ -136,16 +146,16 @@ const LeftColExpansionPanel = (props: LeftColExpPanPropsInt) => {
136146
toggleComponentState(id);
137147
changeFocusComponent({ title });
138148
}}
139-
value="stateful"
140-
color="primary"
149+
value='stateful'
150+
color='primary'
141151
// id={props.id.toString()}
142152
/>
143153
<InputLabel
144-
htmlFor='stateful'
154+
htmlFor='classBased'
145155
style={{
146156
color: '#fff',
147-
marginBottom: '10px',
148-
marginTop: '0px',
157+
marginBottom: '0px',
158+
marginTop: '10px',
149159
marginLeft: '11px',
150160
padding: '0px',
151161
fontSize: '18px',
@@ -154,7 +164,6 @@ const LeftColExpansionPanel = (props: LeftColExpPanPropsInt) => {
154164
>
155165
Class?
156166
</InputLabel>{' '}
157-
(
158167
<Switch
159168
checked={classBased}
160169
onChange={e => {
@@ -193,35 +202,6 @@ const LeftColExpansionPanel = (props: LeftColExpPanPropsInt) => {
193202
textShadow: '1px 1px 2px rgba(0, 0, 0, 0.5)'
194203
}}
195204
/>
196-
) : (
197-
''
198-
)}
199-
200-
{focusedToggle && component.id !== 1 ? (
201-
<Button
202-
variant="text"
203-
size="small"
204-
color="default"
205-
aria-label="Delete"
206-
className={classes.margin}
207-
onClick={() =>
208-
deleteComponent({
209-
componentId: id,
210-
stateComponents: components,
211-
})
212-
}
213-
style={{
214-
color: 'white',
215-
marginBottom: '0px',
216-
marginTop: '4px',
217-
}}
218-
>
219-
<DeleteIcon
220-
style={{
221-
color: '#b30000',
222-
textShadow: '1px 1px 2px rgba(0, 0, 0, 0.5)',
223-
}}
224-
/>
225205
<div
226206
style={{
227207
marginTop: '3px',
@@ -237,7 +217,7 @@ const LeftColExpansionPanel = (props: LeftColExpPanPropsInt) => {
237217
)}
238218
</div>
239219
}
240-
style={{ color }}
220+
// style={{ color }}
241221
/>
242222
</ListItem>
243223
</List>
@@ -299,7 +279,7 @@ const LeftColExpansionPanel = (props: LeftColExpPanPropsInt) => {
299279
</Grid>
300280
);
301281
};
302-
function styles(): any {
282+
function styles(themes: any): any {
303283
return {
304284
root: {
305285
width: '100%',

0 commit comments

Comments
 (0)