Skip to content

Commit 29565f4

Browse files
YohezeYoheze
authored
Merge pull request #21 from oslabs-beta/contextmanagerstyles
Contextmanagerstyles
2 parents 2747447 + c09ecb1 commit 29565f4

File tree

13 files changed

+58
-32
lines changed

13 files changed

+58
-32
lines changed

‎app/src/components/ContextAPIManager/AssignTab/components/ComponentDropDrown.tsx

Lines changed: 14 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,9 @@ import React, { Fragment, useState, useEffect, useContext } from 'react';
22
import TextField from '@mui/material/TextField';
33
import Autocomplete, { createFilterOptions } from '@mui/material/Autocomplete';
44
import Box from '@mui/material/Box';
5-
import StateContext from '../../../../context/context';
5+
66
import { useSelector } from 'react-redux';
7+
import { Store } from 'redux';
78

89
const filter = createFilterOptions();
910

@@ -15,8 +16,11 @@ const ComponentDropDown = ({
1516
}) => {
1617
const { allContext } = contextStore;
1718
// const [componentList] = useContext(StateContext);
18-
const state = useSelector(store => store.appState)
19-
19+
const {state, isDarkMode} = useSelector(store =>({
20+
state: store.appState,
21+
isDarkMode: store.darkMode.isDarkMode
22+
} ))
23+
const color = isDarkMode ? "white":"black"
2024
const onChange = (event, newValue) => {
2125
if (typeof newValue === 'string') {
2226
setComponentInput({
@@ -66,11 +70,11 @@ const ComponentDropDown = ({
6670
return option.name;
6771
};
6872

69-
const renderOption = (props, option) => <li {...props}>{option.name}</li>;
73+
const renderOption = (props, option) => <li style={{ color: "black", border: "1px solid black" }} {...props}>{option.name}</li>;
7074

7175
return (
7276
<Fragment>
73-
<Box sx={{ display: 'flex', gap: 2, mb: 4 }}>
77+
<Box sx={{ display: 'flex', gap: 2, mb: 4}}>
7478
<Autocomplete
7579
id="autoCompleteContextField"
7680
value={componentInput}
@@ -82,10 +86,13 @@ const ComponentDropDown = ({
8286
options={state.components || []}
8387
getOptionLabel={getOptionLabel}
8488
renderOption={renderOption}
85-
sx={{ width: 425 }}
89+
sx={{ width: 425, border: "1px solid black" }}
8690
freeSolo
8791
renderInput={params => (
88-
<TextField {...params} label="Select Component" helperText='Select a component for your selected context to consume' />
92+
<TextField {...params} InputProps={{
93+
...params.InputProps,
94+
style: { color: color },
95+
}} label="Select Component" helperText='Select a component for your selected context to consume' />
8996
)}
9097
/>
9198
</Box>

‎app/src/components/ContextAPIManager/AssignTab/components/ContextDropDown.tsx

Lines changed: 11 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import Autocomplete, { createFilterOptions } from '@mui/material/Autocomplete';
44
import Button from '@mui/material/Button';
55
import Box from '@mui/material/Box';
66
import { Typography } from '@mui/material';
7+
import { useSelector } from 'react-redux';
78

89
const filter = createFilterOptions();
910

@@ -15,6 +16,8 @@ const ContextDropDown = ({
1516
}) => {
1617
const { allContext } = contextStore;
1718

19+
const isDarkMode = useSelector(store => store.darkMode.isDarkMode)
20+
const color = isDarkMode ? "white":"black"
1821
const onChange = (event, newValue) => {
1922
if (typeof newValue === 'string') {
2023
setContextInput({
@@ -64,11 +67,11 @@ const ContextDropDown = ({
6467
return option.name;
6568
};
6669

67-
const renderOption = (props, option) => <li {...props}>{option.name}</li>;
70+
const renderOption = (props, option) => <li style={{ color:"black", border: "1px solid black" }} {...props}>{option.name}</li>;
6871

6972
return (
7073
<Fragment>
71-
<Box sx={{ display: 'flex', gap: 2, mb: 4 }}>
74+
<Box sx={{ display: 'flex', gap: 2, mb: 4, border:"1px black solid" }}>
7275
<Autocomplete
7376
id="autoCompleteContextField"
7477
value={contextInput}
@@ -83,7 +86,12 @@ const ContextDropDown = ({
8386
sx={{ width: 425 }}
8487
freeSolo
8588
renderInput={params => (
86-
<TextField {...params} label="Select Context" helperText='Select a context you would like to assign'/>
89+
<TextField {...params}
90+
InputProps={{
91+
...params.InputProps,
92+
style: { color },
93+
}}
94+
label="Select Context" helperText='Select a context you would like to assign'/>
8795
)}
8896
/>
8997
</Box>

‎app/src/components/ContextAPIManager/ContextManager.tsx

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -34,17 +34,18 @@ const ContextManager = (props): JSX.Element => {
3434
};
3535

3636
const background_Color = isDarkMode ? '#21262b' : 'white'
37+
const color = isDarkMode ? 'white' : 'black'
3738

3839
return (
3940
<React.Fragment>
4041
<div className={classes.contextContainer} style={style.style}>
4142
<Box sx={{ width: '100%', typography: 'body1' }}>
42-
<TabContext value={value}>
43+
<TabContext value={value} sx={{color:color}}>
4344
<Box sx={{ borderBottom: 1, borderColor: 'divider' }}>
44-
<TabList onChange={handleChange} centered={true}>
45-
<Tab label="Create/Edit" value="1" />
46-
<Tab label="Assign" value="2" />
47-
<Tab label="Display" value="3" />
45+
<TabList onChange={handleChange} centered={true} sx={{color:color}}>
46+
<Tab style={ { color: color }}label="Create/Edit" value="1" />
47+
<Tab style={{ color: color }} label="Assign" value="2" />
48+
<Tab style={{ color: color }} label="Display" value="3" />
4849
</TabList>
4950
</Box>
5051
<TabPanel value="1">

‎app/src/components/ContextAPIManager/CreateTab/components/AddContextForm.tsx

Lines changed: 14 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,6 @@ import Autocomplete, { createFilterOptions } from '@mui/material/Autocomplete';
44
import Button from '@mui/material/Button';
55
import Box from '@mui/material/Box';
66
import { Typography } from '@mui/material';
7-
import StateContext from '../../../../context/context';
87
import { useSelector } from 'react-redux';
98

109
const filter = createFilterOptions();
@@ -20,7 +19,11 @@ const AddContextForm = ({
2019
const { allContext } = contextStore;
2120
const [btnDisabled, setBtnDisabled] = useState(false);
2221
// const [state, dispatch] = useContext(StateContext);
23-
const state = useSelector(store => store.appState)
22+
const { state, isDarkMode } = useSelector(store => ({
23+
isDarkMode: store.darkMode.isDarkMode,
24+
state: store.appState
25+
}))
26+
const color = isDarkMode ? 'white' : 'black'
2427

2528
const handleClick = () => {
2629
if (contextInput === '' || contextInput === null) return;
@@ -76,11 +79,11 @@ const AddContextForm = ({
7679
return option.name;
7780
};
7881

79-
const renderOption = (props, option) => <li {...props}>{option.name}</li>;
82+
const renderOption = (props, option) => <li style={{ color: 'black' }} {...props}>{option.name}</li>;
8083

8184
return (
8285
<Fragment>
83-
<Typography style={{ color: 'black' }} variant="h6" gutterBottom={true}>
86+
<Typography style={{ color: color }} variant="h6" gutterBottom={true}>
8487
Context Input
8588
</Typography>
8689
<Box sx={{ display: 'flex', gap: 2, mb: 4 }}>
@@ -95,10 +98,15 @@ const AddContextForm = ({
9598
options={allContext || []}
9699
getOptionLabel={getOptionLabel}
97100
renderOption={renderOption}
98-
sx={{ width: 425 }}
101+
sx={{ width: 425, border: '1px solid black' }}
99102
freeSolo
100103
renderInput={params => (
101-
<TextField {...params} label="Create/Select Context" />
104+
<TextField {...params} InputProps={{
105+
...params.InputProps,
106+
style: { color: color },
107+
}}
108+
variant='filled'
109+
label="Create/Select Context" />
102110
)}
103111
/>
104112
<Button

‎app/src/components/ContextAPIManager/CreateTab/components/AddDataForm.tsx

Lines changed: 9 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,16 +3,18 @@ import TextField from '@mui/material/TextField';
33
import Button from '@mui/material/Button';
44
import Box from '@mui/material/Box';
55
import { Typography } from '@mui/material';
6+
import {useSelector} from 'react-redux'
67

78
const AddDataForm = ({ handleClickInputData, contextInput }) => {
89
//const [contextInput, setContextInput] = React.useState(null);
910
const defaultInputData = {inputKey: '', inputValue: ''};
1011
const [dataContext, setDataContext] = React.useState(defaultInputData);
11-
12+
const {isDarkMode} = useSelector(store=> store.darkMode.isDarkMode)
1213
const saveData = () => {
1314
setDataContext(defaultInputData);
1415
handleClickInputData(contextInput, dataContext)
1516
}
17+
const color = isDarkMode ? 'white' : 'black';
1618

1719
const handleChange = e => {
1820
setDataContext(prevDataContext => {
@@ -25,17 +27,19 @@ const AddDataForm = ({ handleClickInputData, contextInput }) => {
2527

2628
return (
2729
<Fragment>
28-
<Typography style={{ color: 'black' }} variant="h6" gutterBottom={true}>
30+
<Typography style={{ color: color }} variant="h6" gutterBottom={true}>
2931
Add context data
3032
</Typography>
31-
<Box sx={{ display: 'flex', gap: 2 }}>
33+
<Box sx={{ display: 'flex', gap: 2, color:'black' }}>
3234
<TextField
3335
id="outlined-basic"
3436
label="Key"
3537
variant="outlined"
3638
value={dataContext.inputKey}
3739
name="inputKey"
3840
onChange={e => handleChange(e)}
41+
InputProps={{style: { color: color }}}
42+
style={{border:'1px solid black'}}
3943
/>
4044
<TextField
4145
id="outlined-basic"
@@ -44,6 +48,8 @@ const AddDataForm = ({ handleClickInputData, contextInput }) => {
4448
value={dataContext.inputValue}
4549
name="inputValue"
4650
onChange={e => handleChange(e)}
51+
style={{border:'1px solid black'}}
52+
InputProps={{ style: { color: color }}}
4753
/>
4854
<Button
4955
variant="contained"

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

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,6 @@ import { useSelector } from 'react-redux';
77
// This allows users to create all aspects of this application in one place.
88
const CreationPanel = (props): JSX.Element => {
99
const style = useSelector((store) => store.styleSlice);
10-
console.log('style from creation',style)
1110
return (
1211
<div className="creation-panel" style={style.style}>
1312
<ComponentPanel isThemeLight={props.isThemeLight}/>

‎app/src/components/main/Canvas.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -49,7 +49,6 @@ function Canvas(props): JSX.Element {
4949
// takes a snapshot of state to be used in UNDO and REDO cases
5050
snapShotFunc();
5151
// returns false for direct drop target
52-
console.log('diddrop', didDrop)
5352
if (didDrop) {
5453
return;
5554
}
@@ -131,6 +130,7 @@ function Canvas(props): JSX.Element {
131130

132131
const canvasStyle = combineStyles(defaultCanvasStyle, currentComponent.style);
133132
const darkCombinedCanvasStyle = combineStyles(darkCanvasStyle, currentComponent.style);
133+
console.log('canvas comp', currentComponent)
134134
return (
135135
<div className={'componentContainer'} ref={drop} style={!isDarkMode ? canvasStyle : darkCombinedCanvasStyle} onClick={onClickHandler}>
136136
{renderChildren(currentComponent.children)}

‎app/src/components/main/DemoRender.tsx

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -57,7 +57,6 @@ const DemoRender = (): JSX.Element => {
5757
//Switch between components when clicking on a link in the live render
5858
window.onmessage = (event) => {
5959
if (event.data === undefined) return;
60-
console.log('event data demo render',event.data)
6160
const component: string = event.data.data?.split('/').at(-1);
6261
const componentId =
6362
component &&

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

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -145,7 +145,6 @@ const ComponentPanel = ({ isThemeLight }): JSX.Element => {
145145
document.removeEventListener('keydown', keyBindCreateComponent)
146146
}
147147
}, []);
148-
console.log(isThemeLight)
149148
return (
150149
<div className={`${classes.panelWrapper}`}>
151150
{/* Add a new component*/}

‎app/src/containers/AppContainer.tsx

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -37,7 +37,6 @@ style: store.styleSlice,
3737
// const initialStyle = useContext(styleContext);
3838
// const [style, setStyle] = useState(initialStyle);
3939
const [isThemeLight, setTheme] = useState(!isDarkMode);
40-
console.log('isthemlight in app con',isThemeLight)
4140
const dispatch = useDispatch();
4241

4342

‎app/src/containers/CustomizationPanel.tsx

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -489,7 +489,6 @@ dispatch(updateUseContext({ useContextObj: useContextObj, contextParam: contextP
489489
: '';
490490
}, []);
491491

492-
console.log('isthemelight in custimization', isThemeLight)
493492

494493
useEffect(() => {
495494
document.addEventListener('keydown', keyBindedFunc);

‎app/src/helperFunctions/generateCode.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -568,8 +568,8 @@ const formatCode = (code: string) => {
568568
jsxBracketSameLine: true,
569569
parser: 'babel'
570570
});
571-
} else if (process.env.NODE_ENV === 'production') {
572-
return window.api.formatCode(code);
571+
// } else if (process.env.NODE_ENV === 'production') {
572+
// return window.api.formatCode(code);
573573
} else {
574574
return code;
575575
}

‎app/src/helperFunctions/manageSeparators.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import { ChildElement } from '../interfaces/Interfaces';
22

3+
34
const separator = {
45
id: 1000,
56
tag: 'separator',

0 commit comments

Comments
 (0)