Skip to content

Commit 74b864c

Browse files
Eliza612Eliza612
authored
Merge pull request #33 from oslabs-beta/jon-appUI
UI Overhaul of the app (Not including Live Chat/ Collab section)
2 parents c342e76 + f48202f commit 74b864c

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

44 files changed

+489
-463
lines changed

‎app/src/Dashboard/Project.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -158,7 +158,7 @@ const Project = ({
158158
createModal({
159159
closeModal,
160160
children,
161-
message: 'Are you sure want to delete this project?',
161+
message: 'Are you sure you want to delete this project?',
162162
primBtnLabel: null,
163163
primBtnAction: null,
164164
secBtnAction: null,

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

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -63,14 +63,14 @@ const ComponentDropDown = ({
6363
};
6464

6565
const renderOption = (props, option) => (
66-
<li style={{ color: 'black', backgroundColor: 'none' }} {...props}>
66+
<li style={{ color: 'white', backgroundColor: 'none' }} {...props}>
6767
{option.name}
6868
</li>
6969
);
7070

7171
return (
7272
<Fragment>
73-
<Box sx={{ display: 'flex', gap: 2, mb: 4, border: '1px solid black' }}>
73+
<Box sx={{ display: 'flex', gap: 2, mb: 4}}>
7474
<Autocomplete
7575
id="autoCompleteContextField"
7676
value={componentInput}
@@ -82,7 +82,7 @@ const ComponentDropDown = ({
8282
options={state.components || []}
8383
getOptionLabel={getOptionLabel}
8484
renderOption={renderOption}
85-
sx={{ width: 425 }}
85+
sx={{ width: 510 }}
8686
freeSolo
8787
renderInput={(params) => (
8888
<TextField
@@ -91,7 +91,7 @@ const ComponentDropDown = ({
9191
...params.InputProps,
9292
style: { color: 'white' }
9393
}}
94-
variant="filled"
94+
variant="outlined"
9595
label="Select Component"
9696
/>
9797
)}

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,7 @@ export default function DataTable({ target }) {
3434
<Table sx={{ width: '510px' }} aria-label="customized table">
3535
<TableHead>
3636
<TableRow>
37-
<StyledTableCell align="center">Contexts Consumed</StyledTableCell>
37+
<StyledTableCell align="center" style={{backgroundColor: '#131416'}}>Contexts Consumed</StyledTableCell>
3838
</TableRow>
3939
</TableHead>
4040
<TableBody>

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

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -61,14 +61,14 @@ const ContextDropDown = ({
6161
};
6262

6363
const renderOption = (props, option) => (
64-
<li style={{ color: 'black' }} {...props}>
64+
<li style={{ color: 'white' }} {...props}>
6565
{option.name}
6666
</li>
6767
);
6868

6969
return (
7070
<Fragment>
71-
<Box sx={{ display: 'flex', gap: 2, mb: 4, border: '1px black solid' }}>
71+
<Box sx={{ display: 'flex', gap: 2, mb: 4 }}>
7272
<Autocomplete
7373
id="autoCompleteContextField"
7474
value={contextInput}
@@ -80,7 +80,7 @@ const ContextDropDown = ({
8080
options={allContext || []}
8181
getOptionLabel={getOptionLabel}
8282
renderOption={renderOption}
83-
sx={{ width: 425 }}
83+
sx={{ width: 510 }}
8484
freeSolo
8585
renderInput={(params) => (
8686
<TextField
@@ -90,7 +90,7 @@ const ContextDropDown = ({
9090
style: { color: 'white' }
9191
}}
9292
label="Select Context"
93-
variant="filled"
93+
variant="outlined"
9494
/>
9595
)}
9696
/>

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

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,6 @@ import { RootState } from '../../redux/store';
1414

1515
const useStyles = makeStyles({
1616
contextContainer: {
17-
backgroundColor: '#191919',
1817
height: 'fit-content'
1918
}
2019
});

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

Lines changed: 20 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -75,7 +75,7 @@ const AddContextForm = ({
7575

7676
return (
7777
<Fragment>
78-
<Typography style={{ color: color }} variant="h6" gutterBottom={true}>
78+
<Typography style={{ color: 'color' }} variant="h6" gutterBottom={true}>
7979
Create Context
8080
</Typography>
8181
<Box sx={{ display: 'flex', gap: 2, mb: 4 }}>
@@ -85,14 +85,13 @@ const AddContextForm = ({
8585
}}
8686
onChange={handleChange}
8787
sx={{
88-
width: 425,
89-
border: `1px solid ${color}`
88+
width: 425
9089
}}
91-
label="Create Context"
90+
label="context"
9291
value={contextInput}
9392
helperText={errorStatus ? errorMsg : null}
9493
error={errorStatus}
95-
variant="filled"
94+
variant="outlined"
9695
/>
9796
<Snackbar
9897
open={open && !errorStatus}
@@ -113,20 +112,26 @@ const AddContextForm = ({
113112
color="primary"
114113
onClick={handleSubmit}
115114
disabled={btnDisabled}
115+
sx={{
116+
textTransform: 'capitalize',
117+
height: '50px',
118+
width: '100px',
119+
fontSize: '15px'
120+
}}
116121
>
117122
Create
118123
</Button>
119124
</Box>
120125
<Typography style={{ color: color }} variant="h6" gutterBottom={true}>
121126
Select Context
122127
</Typography>
123-
<Box sx={{ display: 'flex', gap: 2, mb: 4 }}>
124-
<FormControl variant="filled">
125-
<InputLabel style={{ color: color }}>Select Context</InputLabel>
128+
<Box sx={{ display: 'flex', alignItems: 'center', gap: 2, mb: 2 }}>
129+
<FormControl variant="outlined">
130+
<InputLabel>select context</InputLabel>
126131
<Select
127132
required
128133
sx={{ width: 425 }}
129-
style={{ border: '1px solid #0671e3', color: color }}
134+
style={{ color: color }}
130135
value={currentContext}
131136
label="Select Context"
132137
MenuProps={{ disablePortal: true }}
@@ -141,6 +146,12 @@ const AddContextForm = ({
141146
color="primary"
142147
variant="contained"
143148
onClick={handleDeleteContextClick}
149+
sx={{
150+
textTransform: 'capitalize',
151+
height: '50px',
152+
width: '100px',
153+
fontSize: '15px'
154+
}}
144155
>
145156
Delete
146157
</Button>

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

Lines changed: 17 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -33,30 +33,39 @@ const AddDataForm = ({ handleClickInputData, currentContext }) => {
3333
return (
3434
<>
3535
<Typography style={{ color: color }} variant="h6" gutterBottom={true}>
36-
Add context data
36+
Add Context Data
3737
</Typography>
3838
<Box sx={{ display: 'flex', gap: 2, color: 'black' }}>
3939
<TextField
4040
id="outlined-basic"
41-
label="Key"
42-
variant="filled"
41+
label="key"
42+
variant="outlined"
4343
value={dataContext.inputKey}
4444
name="inputKey"
4545
onChange={(e) => handleChange(e)}
4646
InputProps={{ style: { color: color } }}
47-
style={{ border: '1px solid black' }}
47+
style={{ border: '1px solid black', width: '205px' }}
4848
/>
4949
<TextField
5050
id="outlined-basic"
51-
label="Value"
52-
variant="filled"
51+
label="value"
52+
variant="outlined"
5353
value={dataContext.inputValue}
5454
name="inputValue"
5555
onChange={(e) => handleChange(e)}
56-
style={{ border: '1px solid black' }}
56+
style={{ border: '1px solid black', width: '205px' }}
5757
InputProps={{ style: { color: color } }}
5858
/>
59-
<Button variant="contained" onClick={saveData}>
59+
<Button
60+
variant="contained"
61+
onClick={saveData}
62+
sx={{
63+
textTransform: 'capitalize',
64+
height: '50px',
65+
width: '100px',
66+
fontSize: '15px'
67+
}}
68+
>
6069
Save
6170
</Button>
6271
</Box>

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

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -39,7 +39,7 @@ export default function DataTable({ target, currentContext }) {
3939
>
4040
<TableHead>
4141
<TableRow>
42-
<StyledTableCell align="center" colSpan={3}>
42+
<StyledTableCell align="center" colSpan={3} style={{backgroundColor: '#131416'}}>
4343
{currentContext ? currentContext : 'Context Name'}
4444
</StyledTableCell>
4545
</TableRow>
@@ -48,14 +48,14 @@ export default function DataTable({ target, currentContext }) {
4848
{target.map((data, index) => (
4949
<StyledTableRow key={index}>
5050
<StyledTableCell
51-
style={{ color: 'black' }}
51+
style={{ color: 'white', backgroundColor: '#2D313A' }}
5252
component="th"
5353
scope="row"
5454
key={`${index}-key-${data.key}`}
5555
>
5656
{data.key}
5757
</StyledTableCell>
58-
<StyledTableCell style={{ color: 'black' }} align="right" key={`${index}-value-${data.value}`}>
58+
<StyledTableCell style={{ color: 'white', backgroundColor: '#2D313A' }} align="right" key={`${index}-value-${data.value}`}>
5959
{data.value}
6060
</StyledTableCell>
6161
</StyledTableRow>

‎app/src/components/ContextAPIManager/DisplayTab/DisplayContainer.tsx

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -31,13 +31,14 @@ const DisplayContainer = () => {
3131
wordtree: {
3232
format: 'implicit',
3333
word: 'App'
34-
}
34+
},
35+
backgroundColor: '#1E2024'
3536
};
3637

3738
return (
38-
<Grid container display="flex" justifyContent="center">
39-
{contextData.length < 2 && <h2>No Contexts consumed</h2>}
40-
<Grid item>
39+
<Grid container display="flex" justifyContent="center" alignItems="center">
40+
{contextData.length < 2 && <h2>No Contexts Consumed</h2>}
41+
<Grid item style={{marginLeft: '100px'}}>
4142
<Chart
4243
chartType="WordTree"
4344
width="100%"

0 commit comments

Comments
 (0)