Skip to content

Commit ab0e018

Browse files
enigmawunenigmawun
committed
updated spacing on create panel and added spacing to three dot menu to prevent overlap of icon and text. added orange to parts of color scheme
1 parent 6a89da4 commit ab0e018

File tree

8 files changed

+157
-174
lines changed

8 files changed

+157
-174
lines changed

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

Lines changed: 4 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -251,9 +251,8 @@ const CreateMenu = (props): JSX.Element => {
251251

252252
return (
253253
<div className={'MUIItems'}>
254-
<Box display="flex" alignItems="center">
255-
<HTMLPanel isThemeLight={props.isThemeLight} />
256-
</Box>
254+
<HTMLPanel isThemeLight={props.isThemeLight} />
255+
257256
{makeMenuCategory([
258257
state.HTMLTypes.filter((type) => type.id > 10000).map((option) => (
259258
<HTMLItem
@@ -267,16 +266,15 @@ const CreateMenu = (props): JSX.Element => {
267266
])}
268267
<FormGroup>
269268
<Box display="flex" alignItems="center" justifyContent="center">
270-
<p className="smallerText blueText">HTML</p>
269+
<p className="smallerText">HTML</p>
271270
<Switch
272271
checked={MUIMode}
273272
onChange={() => setMUIMode(!MUIMode)}
274273
inputProps={{ 'aria-label': 'HTML + MUI switch' }}
275274
sx={{ margin: '0 10px' }} // Adjust spacing between text and switch
276275
/>
277276
<p className="smallerText">
278-
<span className="blueText">HTML + </span>
279-
<span className="switchText-MUI orangeText"> MUI</span>
277+
<span className="orangeText">HTML {'+'} MUI</span>
280278
</p>
281279
</Box>
282280
</FormGroup>

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

Lines changed: 67 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,9 @@ const HTMLPanel = (props): JSX.Element => {
3434
const [alertOpen, setAlertOpen] = React.useState<boolean>(false);
3535
const state = useSelector((store: RootState) => store.appState);
3636
const roomCode = useSelector((store: RootState) => store.roomSlice.roomCode);
37-
const currentID = useSelector((store: RootState) => store.appState.customElementId);
37+
const currentID = useSelector(
38+
(store: RootState) => store.appState.customElementId
39+
);
3840

3941
const dispatch = useDispatch();
4042

@@ -54,8 +56,8 @@ const HTMLPanel = (props): JSX.Element => {
5456
let dupe = false;
5557
checkList.forEach((HTMLTag) => {
5658
if (
57-
HTMLTag.name.toLowerCase() === inputName.toLowerCase()
58-
|| HTMLTag.tag.toLowerCase() === inputName.toLowerCase()
59+
HTMLTag.name.toLowerCase() === inputName.toLowerCase() ||
60+
HTMLTag.tag.toLowerCase() === inputName.toLowerCase()
5961
) {
6062
dupe = true;
6163
}
@@ -65,19 +67,21 @@ const HTMLPanel = (props): JSX.Element => {
6567

6668
const triggerError = (type: string) => {
6769
setErrorStatus(true);
68-
if (type === 'empty') setErrorMsg('* Input cannot be blank. *');
69-
if (type === 'dupe') setErrorMsg('* Input already exists. *');
70-
if (type === 'letters') setErrorMsg('* Input must start with a letter. *');
71-
if (type === 'symbolsDetected') setErrorMsg('* Input must not contain symbols. *');
72-
if (type === 'length') setErrorMsg('* Input cannot exceed 10 characters. *');
70+
if (type === 'empty') setErrorMsg('Input cannot be blank.');
71+
if (type === 'dupe') setErrorMsg('Input already exists.');
72+
if (type === 'letters') setErrorMsg('Input must start with a letter.');
73+
if (type === 'symbolsDetected')
74+
setErrorMsg('Input must not contain symbols.');
75+
if (type === 'length') setErrorMsg('Input cannot exceed 10 characters.');
7376
};
7477

7578
const resetError = () => setErrorStatus(false);
7679

7780
const createOption = (inputTag: string, inputName: string) => {
7881
// format name so first letter is capitalized and there are no whitespaces
7982
const inputNameClean = inputName.replace(/\s+/g, '');
80-
const formattedName = inputNameClean.charAt(0).toUpperCase() + inputNameClean.slice(1);
83+
const formattedName =
84+
inputNameClean.charAt(0).toUpperCase() + inputNameClean.slice(1);
8185
// add new component to state
8286
const newElement = {
8387
id: currentID,
@@ -86,7 +90,7 @@ const HTMLPanel = (props): JSX.Element => {
8690
style: {},
8791
placeHolderShort: name,
8892
placeHolderLong: '',
89-
icon: null,
93+
icon: null
9094
};
9195

9296
dispatch(addElement(newElement));
@@ -108,16 +112,22 @@ const HTMLPanel = (props): JSX.Element => {
108112
e.preventDefault();
109113

110114
if (tag.trim() === '' || name.trim() === '') return triggerError('empty');
111-
if (!tag.charAt(0).match(/[a-zA-Z]/) || !name.charAt(0).match(/[a-zA-Z]/)) return triggerError('letters');
112-
if (!alphanumeric(tag) || !alphanumeric(name)) return triggerError('symbolsDetected');
115+
if (!tag.charAt(0).match(/[a-zA-Z]/) || !name.charAt(0).match(/[a-zA-Z]/))
116+
return triggerError('letters');
117+
if (!alphanumeric(tag) || !alphanumeric(name))
118+
return triggerError('symbolsDetected');
113119
if (checkNameDupe(tag) || checkNameDupe(name)) return triggerError('dupe');
114120
if (name.length > 10) return triggerError('length');
115121
createOption(tag, name);
116122
resetError();
117123
};
118124

119125
const handleCreateElement = useCallback((e) => {
120-
if (e.key === 'Enter' && e.target.tagName !== 'TEXTAREA' && e.target.id !== 'filled-hidden-label-small') {
126+
if (
127+
e.key === 'Enter' &&
128+
e.target.tagName !== 'TEXTAREA' &&
129+
e.target.id !== 'filled-hidden-label-small'
130+
) {
121131
e.preventDefault();
122132
document.getElementById('submitButton').click();
123133
}
@@ -132,12 +142,18 @@ const HTMLPanel = (props): JSX.Element => {
132142

133143
const handleAlertOpen = () => setAlertOpen(true);
134144

135-
const handleAlertClose = (event: React.SyntheticEvent | Event, reason?: string) => {
145+
const handleAlertClose = (
146+
event: React.SyntheticEvent | Event,
147+
reason?: string
148+
) => {
136149
if (reason === 'clickaway') return;
137150
setAlertOpen(false);
138151
};
139152

140-
const Alert = React.forwardRef<HTMLDivElement, AlertProps>(function Alert(props, ref) {
153+
const Alert = React.forwardRef<HTMLDivElement, AlertProps>(function Alert(
154+
props,
155+
ref
156+
) {
141157
return <MuiAlert elevation={6} ref={ref} variant="filled" {...props} />;
142158
});
143159

@@ -157,19 +173,22 @@ const HTMLPanel = (props): JSX.Element => {
157173
autoComplete="off"
158174
placeholder="Custom Element Name"
159175
sx={{ width: '80%' }}
160-
// style={{ marginTop: '10px' }}
161176
onChange={handleNameChange}
162177
/>
163-
{(!name.charAt(0).match(/[A-Za-z]/)
164-
|| !alphanumeric(name)
165-
|| name.trim() === ''
166-
|| name.length > 10
167-
|| checkNameDupe(name)) && (
168-
<span className={`${classes.errorMessage}/* ${classes.errorMessageDark} */`}>
178+
{(!name.charAt(0).match(/[A-Za-z]/) ||
179+
!alphanumeric(name) ||
180+
name.trim() === '' ||
181+
name.length > 10 ||
182+
checkNameDupe(name)) && (
183+
<span
184+
className={`${classes.errorMessage}/* ${classes.errorMessageDark} */`}
185+
>
169186
<em>{errorMsg}</em>
170187
</span>
171188
)}
172-
<div style={{ display: 'flex', alignItems: 'center', width: '100%' }}>
189+
<div
190+
style={{ display: 'flex', alignItems: 'center', width: '100%' }}
191+
>
173192
<TextField
174193
id="outlined-basic"
175194
label="Custom Tag Name"
@@ -181,11 +200,13 @@ const HTMLPanel = (props): JSX.Element => {
181200
sx={{ width: '80%' }}
182201
onChange={handleTagChange}
183202
/>
184-
{(!tag.charAt(0).match(/[A-Za-z]/)
185-
|| !alphanumeric(tag)
186-
|| tag.trim() === ''
187-
|| checkNameDupe(tag)) && (
188-
<span className={`${classes.errorMessage}/* ${classes.errorMessageDark} */`}>
203+
{(!tag.charAt(0).match(/[A-Za-z]/) ||
204+
!alphanumeric(tag) ||
205+
tag.trim() === '' ||
206+
checkNameDupe(tag)) && (
207+
<span
208+
className={`${classes.errorMessage}/* ${classes.errorMessageDark} */`}
209+
>
189210
<em>{errorMsg}</em>
190211
</span>
191212
)}
@@ -213,7 +234,11 @@ const HTMLPanel = (props): JSX.Element => {
213234
anchorOrigin={{ vertical: 'top', horizontal: 'center' }}
214235
onClose={handleAlertClose}
215236
>
216-
<Alert onClose={handleAlertClose} severity="success" sx={{ width: '100%', color: 'white' }}>
237+
<Alert
238+
onClose={handleAlertClose}
239+
severity="success"
240+
sx={{ width: '100%', color: 'white', backgroundColor: '#f88e16' }}
241+
>
217242
HTML Tag Created!
218243
</Alert>
219244
</Snackbar>
@@ -232,49 +257,49 @@ const useStyles = makeStyles({
232257
backgroundColor: 'rgba(255,255,255,0.15)',
233258
margin: '0px 0px 0px 10px',
234259
width: '100%',
235-
height: '30px',
260+
height: '30px'
236261
},
237262
inputWrapper: {
238263
width: '100%',
239-
marginBottom: '0px', // was originally 10px, decreased to 0 to decrease overall menu height
240-
alignItems: 'center',
264+
marginBottom: '10px', // was originally 10px, decreased to 0 to decrease overall menu height
265+
alignItems: 'center'
241266
},
242267
addComponentWrapper: {
243-
width: '100%',
268+
width: '100%'
244269
},
245270
input: {
246271
width: '500px',
247272
whiteSpace: 'nowrap',
248273
overflowX: 'hidden',
249274
textOverflow: 'ellipsis',
250275
margin: '0px 0px 0px 0px',
251-
alignSelf: 'center',
276+
alignSelf: 'center'
252277
},
253278
lightThemeFontColor: {
254279
color: 'white',
255280
'& .MuiInputBase-root': {
256-
color: 'rgba (0, 0, 0, 0.54)',
257-
},
281+
color: 'rgba (0, 0, 0, 0.54)'
282+
}
258283
},
259284
darkThemeFontColor: {
260285
color: '#ffffff',
261286
'& .MuiInputBase-root': {
262-
color: '#fff',
263-
},
287+
color: '#fff'
288+
}
264289
},
265290
errorMessage: {
266291
display: 'flex',
267292
alignSelf: 'center',
268293
fontSize: '11px',
269294
marginTop: '10px',
270-
width: '150px',
295+
width: '150px'
271296
},
272297
errorMessageLight: {
273-
color: '#6B6B6B',
298+
color: '#6B6B6B'
274299
},
275300
errorMessageDark: {
276-
color: 'white',
277-
},
301+
color: 'white'
302+
}
278303
});
279304

280305
export default HTMLPanel;

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

Lines changed: 3 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,7 @@ const ModulePanel: React.FC<ModulePanelProps> = ({ isThemeLight }) => {
3333
// Make visibility of custom components conditional ⭕️
3434

3535
return (
36-
<div>
36+
<div className="modulePanelContainer">
3737
{isEditingModule ? (
3838
<CreateMenu />
3939
) : (
@@ -43,39 +43,6 @@ const ModulePanel: React.FC<ModulePanelProps> = ({ isThemeLight }) => {
4343
setIsCreatingModule={setIsCreatingModule}
4444
isThemeLight={false}
4545
/>
46-
{/* ) : (
47-
<div style={{ display: 'grid', placeItems: 'center', margin: '30px' }}>
48-
<Button
49-
variant="contained"
50-
startIcon={<AddCircleIcon />}
51-
style={{
52-
backgroundColor: '#f88e16',
53-
border: 'none',
54-
color: 'white',
55-
fontSize: '12px',
56-
padding: '2px 15px',
57-
cursor: 'pointer',
58-
marginRight: '10px',
59-
marginLeft: '5px',
60-
borderRadius: '10px'
61-
}}
62-
onClick={handleClickAddModule}
63-
>
64-
Add Module
65-
</Button>
66-
</div>
67-
)}
68-
*/}
69-
{/* <div
70-
style={{
71-
color: '#f88e16',
72-
textAlign: 'center',
73-
padding: '20px',
74-
// border: '1px solid #101012'
75-
}}
76-
>
77-
Root Modules
78-
</div> */}
7946
<ComponentDrag
8047
isVisible={true}
8148
isThemeLight={false}
@@ -88,8 +55,8 @@ const ModulePanel: React.FC<ModulePanelProps> = ({ isThemeLight }) => {
8855
style={{
8956
color: '#f88e16',
9057
textAlign: 'center',
91-
padding: '20px',
92-
// border: '1px solid #101012'
58+
padding: '20px'
59+
// border: '1px solid #101012'
9360
}}
9461
>
9562
Other Modules

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

Lines changed: 1 addition & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -202,13 +202,6 @@ const ComponentPanel = ({ setIsCreatingModule, isThemeLight }): JSX.Element => {
202202
autoComplete="off"
203203
placeholder="Custom Module Name"
204204
sx={{ width: '80%' }}
205-
// color="primary"
206-
// className={
207-
// isThemeLight
208-
// ? `${classes.inputField} ${classes.lightThemeFontColor}`
209-
// : `${classes.inputField} ${classes.darkThemeFontColor}`
210-
// }
211-
// inputprops and helpertext must be lowercase
212205
inputProps={{ className: classes.input }}
213206
// Doesn't accept boolean value needs to be a string
214207
error={errorStatus}
@@ -307,7 +300,7 @@ const ComponentPanel = ({ setIsCreatingModule, isThemeLight }): JSX.Element => {
307300
<Alert
308301
onClose={handleAlertClose}
309302
severity="success"
310-
sx={{ width: '100%', color: 'white' }}
303+
sx={{ width: '100%', color: 'white', backgroundColor: '#f88e16' }}
311304
>
312305
Module Created!
313306
</Alert>

‎app/src/components/top/NavBar.tsx

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -178,11 +178,9 @@ const NavBar: React.FC = (): JSX.Element => {
178178
Unpublish
179179
</button>
180180
) : (
181-
<button style={buttonStyle} onClick={handlePublish}>
182-
Import
183-
</button>
181+
<NewExportButton />
184182
)}
185-
<NewExportButton />
183+
186184
<Button
187185
style={moreVertButtonStyle}
188186
variant="contained"

0 commit comments

Comments
 (0)