Skip to content

Commit bbb399a

Browse files
tomarviii88tomarviii88
committed
UI changes
1 parent 81b1cde commit bbb399a

File tree

9 files changed

+140
-24
lines changed

9 files changed

+140
-24
lines changed

‎client/.eslintcache

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
[{"/media/shweta/New Volume/projects/RCE-aasf/remote-code-executor/client/src/components/header/Header.js":"1","/media/shweta/New Volume/projects/RCE-aasf/remote-code-executor/client/src/constants/theme.js":"2"},{"size":388,"mtime":1609927468679,"results":"3","hashOfConfig":"4"},{"size":285,"mtime":1609927468686,"results":"5","hashOfConfig":"4"},{"filePath":"6","messages":"7","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"kizngo",{"filePath":"8","messages":"9","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"/media/shweta/New Volume/projects/RCE-aasf/remote-code-executor/client/src/components/header/Header.js",[],"/media/shweta/New Volume/projects/RCE-aasf/remote-code-executor/client/src/constants/theme.js",[]]
1+
[{"/home/tomarviii88/Desktop/remote-code-executor/client/src/components/header/Header.js":"1","/home/tomarviii88/Desktop/remote-code-executor/client/src/components/code-editor/CodeEditor.js":"2","/home/tomarviii88/Desktop/remote-code-executor/client/src/components/output/InputOutput.js":"3","/home/tomarviii88/Desktop/remote-code-executor/client/src/constants/global.js":"4","/home/tomarviii88/Desktop/remote-code-executor/client/src/components/code-editor/Submit.js":"5","/home/tomarviii88/Desktop/remote-code-executor/client/src/constants/theme.js":"6"},{"size":388,"mtime":1609839782860,"results":"7","hashOfConfig":"8"},{"size":2623,"mtime":1610192088920,"results":"9","hashOfConfig":"8"},{"size":1390,"mtime":1610190812112,"results":"10","hashOfConfig":"8"},{"size":514,"mtime":1610187681416,"results":"11","hashOfConfig":"8"},{"size":462,"mtime":1610189429376,"results":"12","hashOfConfig":"8"},{"size":285,"mtime":1610192356464,"results":"13","hashOfConfig":"8"},{"filePath":"14","messages":"15","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"1ld0h7m",{"filePath":"16","messages":"17","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"18","messages":"19","errorCount":0,"warningCount":1,"fixableErrorCount":0,"fixableWarningCount":0,"source":null},{"filePath":"20","messages":"21","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"22","messages":"23","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"24","messages":"25","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"/home/tomarviii88/Desktop/remote-code-executor/client/src/components/header/Header.js",[],"/home/tomarviii88/Desktop/remote-code-executor/client/src/components/code-editor/CodeEditor.js",[],"/home/tomarviii88/Desktop/remote-code-executor/client/src/components/output/InputOutput.js",["26"],"/home/tomarviii88/Desktop/remote-code-executor/client/src/constants/global.js",[],"/home/tomarviii88/Desktop/remote-code-executor/client/src/components/code-editor/Submit.js",[],"/home/tomarviii88/Desktop/remote-code-executor/client/src/constants/theme.js",[],{"ruleId":"27","severity":1,"message":"28","line":32,"column":7,"nodeType":"29","messageId":"30","endLine":32,"endColumn":12},"no-unused-vars","'error' is assigned a value but never used.","Identifier","unusedVar"]

‎client/public/index.html

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,13 @@
2626
-->
2727
<title>React App</title>
2828
</head>
29+
<style>
30+
#root {
31+
height: 100%;
32+
display: flex;
33+
flex-direction: column;
34+
}
35+
</style>
2936
<body>
3037
<noscript>You need to enable JavaScript to run this app.</noscript>
3138
<div id="root"></div>

‎client/src/components/code-editor/CodeEditor.js

Lines changed: 60 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,44 @@ import Editor from '@monaco-editor/react';
33
import { executeCode, setLoadingTrue } from '../../actions/code';
44
import { useDispatch, useSelector } from 'react-redux';
55
import InputOutput from '../output/InputOutput';
6+
import Submit from './Submit';
7+
import styled from 'styled-components';
8+
import './style.css';
9+
10+
const Row = styled.div`
11+
display: flex;
12+
flex-direction: row;
13+
`;
14+
15+
const Column = styled.div`
16+
display: flex;
17+
flex-direction: column;
18+
box-sizing: border-box;
19+
flex: 1;
20+
`;
21+
22+
const SubmitButton = styled.button`
23+
background-color: #3b8d47;
24+
color: white;
25+
margin-left: 10px;
26+
padding: 10px;
27+
box-sizing: border-box;
28+
border: none;
29+
outline: none;
30+
font-size: 16px;
31+
width: 100px;
32+
`;
33+
34+
const OutputWindow = styled.div`
35+
flex: 1;
36+
background-color: #eeeeee;
37+
margin: 20px;
38+
border-radius: 5px;
39+
padding: 10px;
40+
box-sizing: border-box;
41+
overflow: auto;
42+
color: ${props => (props.error ? 'red' : 'black')};
43+
`;
644

745
const CodeEditor = ({ theme }) => {
846
const loading = useSelector(state => state.code.isFetching);
@@ -11,6 +49,8 @@ const CodeEditor = ({ theme }) => {
1149
const [input, setInput] = useState('');
1250
const dispatch = useDispatch();
1351
const valueGetter = useRef();
52+
let output = useSelector(state => state.code.output);
53+
let error = useSelector(state => state.code.error);
1454

1555
const handleEditorDidMount = _valueGetter => {
1656
setIsEditorReady(true);
@@ -30,22 +70,26 @@ const CodeEditor = ({ theme }) => {
3070

3171
return (
3272
<>
33-
<select value={language} onChange={changeLanguage}>
34-
<option value='c'>C</option>
35-
<option value='cpp'>C++</option>
36-
<option value='python'>Python</option>
37-
<option value='javascript'>Javascript</option>
38-
<option value='java'>Java</option>
39-
</select>
40-
<button onClick={SubmitCode} disabled={!isEditorReady}>
41-
{loading ? 'Loading..' : 'Submit'}
42-
</button>
43-
<Editor
44-
height='70vh'
45-
language={language}
46-
theme={theme === 'dark' ? 'vs-dark' : 'light'}
47-
editorDidMount={handleEditorDidMount}
48-
/>
73+
<Row>
74+
<Editor
75+
height='70vh'
76+
width='50%'
77+
language={language}
78+
theme={theme === 'dark' ? 'vs-dark' : 'light'}
79+
editorDidMount={handleEditorDidMount}
80+
/>
81+
<Column>
82+
<Row style={{ marginLeft: 20 }}>
83+
<Submit language={language} changeLanguage={changeLanguage} />
84+
<SubmitButton onClick={SubmitCode} disabled={!isEditorReady}>
85+
{loading ? 'Loading..' : 'Submit'}
86+
</SubmitButton>
87+
</Row>
88+
<OutputWindow error={error === '' ? false : true}>
89+
<pre>{output === '' ? error : output}</pre>
90+
</OutputWindow>
91+
</Column>
92+
</Row>
4993
<InputOutput input={input} setInput={setInput} theme={theme} />
5094
</>
5195
);

‎client/src/components/code-editor/Submit.js

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
import React from 'react';
2+
3+
const Submit = ({ language, changeLanguage }) => {
4+
return (
5+
<div className='sel-lang '>
6+
<select value={language} onChange={changeLanguage}>
7+
<option value='c'>C</option>
8+
<option value='cpp'>C++</option>
9+
<option value='python'>Python</option>
10+
<option value='javascript'>Javascript</option>
11+
<option value='java'>Java</option>
12+
</select>
13+
</div>
14+
);
15+
};
16+
17+
export default Submit;

‎client/src/components/code-editor/style.css

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
.sel-lang > select {
2+
display: block;
3+
font-size: 16px;
4+
font-family: sans-serif;
5+
font-weight: 700;
6+
color: #444;
7+
line-height: 1.3;
8+
padding: 10px;
9+
width: 100%;
10+
box-sizing: border-box;
11+
margin: 0;
12+
outline: none;
13+
border: none;
14+
background-color: white;
15+
}
16+
17+
.sel-lang > select > option {
18+
font-size: 16px;
19+
font-family: sans-serif;
20+
font-weight: 700;
21+
color: #444;
22+
line-height: 1.3;
23+
padding: 10px;
24+
display: block;
25+
}

‎client/src/components/output/InputOutput.js

Lines changed: 16 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,33 @@
11
import React, { useEffect } from 'react';
22
import styled from 'styled-components';
33
import { useSelector } from 'react-redux';
4+
import './style.css';
45

56
const Container = styled.div`
67
display: flex;
78
flex-direction: row;
89
justify-content: space-between;
910
margin-top: 10px;
11+
flex: 1;
1012
`;
1113

1214
const Div = styled.div`
13-
height: 100px;
15+
height: 100%;
1416
flex: 1;
1517
box-sizing: border-box;
1618
margin: 20;
1719
color: ${props => props.error && 'red'};
1820
background-color: '#eeeeee';
1921
overflow: scroll;
22+
outline: none;
23+
`;
24+
25+
const TextInput = styled.textarea`
26+
color: ${props => (props.theme === 'dark' ? 'white' : 'black')};
27+
background-color: ${props => (props.theme === 'dark' ? '#1e1e1e' : 'white')};
2028
`;
2129

22-
const InputOutput = ({ input, setInput }) => {
30+
const InputOutput = ({ input, setInput, theme }) => {
2331
let output = useSelector(state => state.code.output);
2432
let error = useSelector(state => state.code.error);
2533

@@ -28,18 +36,20 @@ const InputOutput = ({ input, setInput }) => {
2836
}, [output]);
2937
return (
3038
<Container>
31-
<Div>
32-
<textarea
39+
<Div className='input-field'>
40+
<TextInput
41+
theme={theme}
3342
value={input}
3443
onChange={e => {
3544
console.log(e.target.value);
3645
setInput(e.target.value);
3746
}}
47+
className='textarea-input'
3848
/>
3949
</Div>
40-
<Div error={error === '' ? false : true}>
50+
{/* <Div error={error === '' ? false : true}>
4151
<pre>{output === '' ? error : output}</pre>
42-
</Div>
52+
</Div> */}
4353
</Container>
4454
);
4555
};

‎client/src/components/output/style.css

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
.input-field::-webkit-scrollbar {
2+
display: none;
3+
}
4+
5+
.textarea-input {
6+
display: flex;
7+
outline: none;
8+
border-radius: 7px;
9+
padding: 5px;
10+
box-sizing: border-box;
11+
flex: 1;
12+
}

‎client/src/constants/global.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ export const GlobalStyles = createGlobalStyle`
55
*::after,
66
*::before {
77
box-sizing: border-box;
8+
89
}
910
1011
body {

‎client/src/constants/theme.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
export const lightTheme = {
2-
body: '#E2E2E2',
2+
body: '#7d7d7d',
33
text: '#363537',
44
toggleBorder: '#FFF',
55
gradient: 'linear-gradient(#39598A, #79D7ED)'

0 commit comments

Comments
 (0)