From f6e7faca3c00ee7cf945ae007cb30ca493b0d936 Mon Sep 17 00:00:00 2001 From: tomarviii88 Date: Sun, 10 Jan 2021 13:57:27 +0530 Subject: [PATCH] css changes --- client/.eslintcache | 2 +- client/src/App.js | 1 - .../src/components/code-editor/CodeEditor.js | 61 ++++----------- .../src/components/code-editor/InputOutput.js | 28 +++++++ client/src/components/code-editor/Submit.js | 9 ++- .../code-editor/codeEditor.module.css | 77 +++++++++++++++++++ client/src/components/code-editor/style.css | 25 ------ .../code-editor/styledComponents.js | 17 ++++ client/src/components/output/InputOutput.js | 57 -------------- client/src/components/output/style.css | 12 --- 10 files changed, 145 insertions(+), 144 deletions(-) create mode 100644 client/src/components/code-editor/InputOutput.js create mode 100644 client/src/components/code-editor/codeEditor.module.css delete mode 100644 client/src/components/code-editor/style.css create mode 100644 client/src/components/code-editor/styledComponents.js delete mode 100644 client/src/components/output/InputOutput.js delete mode 100644 client/src/components/output/style.css diff --git a/client/.eslintcache b/client/.eslintcache index df47075..aca87da 100644 --- a/client/.eslintcache +++ b/client/.eslintcache @@ -1 +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"] \ No newline at end of file +[{"/home/tomarviii88/Desktop/remote-code-executor/client/src/components/code-editor/CodeEditor.js":"1","/home/tomarviii88/Desktop/remote-code-executor/client/src/components/code-editor/Submit.js":"2","/home/tomarviii88/Desktop/remote-code-executor/client/src/App.js":"3","/home/tomarviii88/Desktop/remote-code-executor/client/src/components/code-editor/InputOutput.js":"4","/home/tomarviii88/Desktop/remote-code-executor/client/src/components/code-editor/styledComponents.js":"5"},{"size":2165,"mtime":1610266384288,"results":"6","hashOfConfig":"7"},{"size":544,"mtime":1610264957288,"results":"8","hashOfConfig":"7"},{"size":798,"mtime":1610265109888,"results":"9","hashOfConfig":"7"},{"size":728,"mtime":1610266437116,"results":"10","hashOfConfig":"7"},{"size":470,"mtime":1610266418988,"results":"11","hashOfConfig":"7"},{"filePath":"12","messages":"13","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"1ld0h7m",{"filePath":"14","messages":"15","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"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},"/home/tomarviii88/Desktop/remote-code-executor/client/src/components/code-editor/CodeEditor.js",[],"/home/tomarviii88/Desktop/remote-code-executor/client/src/components/code-editor/Submit.js",[],"/home/tomarviii88/Desktop/remote-code-executor/client/src/App.js",[],"/home/tomarviii88/Desktop/remote-code-executor/client/src/components/code-editor/InputOutput.js",["22"],"/home/tomarviii88/Desktop/remote-code-executor/client/src/components/code-editor/styledComponents.js",[],{"ruleId":"23","severity":1,"message":"24","line":8,"column":7,"nodeType":"25","messageId":"26","endLine":8,"endColumn":12},"no-unused-vars","'error' is assigned a value but never used.","Identifier","unusedVar"] \ No newline at end of file diff --git a/client/src/App.js b/client/src/App.js index 9ba5604..aaef232 100644 --- a/client/src/App.js +++ b/client/src/App.js @@ -5,7 +5,6 @@ import { GlobalStyles } from './constants/global.js'; import { useDarkMode } from './utils/useDarkMode'; import Header from './components/header/Header.js'; import CodeEditor from './components/code-editor/CodeEditor.js'; -import InputOutput from './components/output/InputOutput.js'; import './App.css'; const App = () => { diff --git a/client/src/components/code-editor/CodeEditor.js b/client/src/components/code-editor/CodeEditor.js index 524eb2d..be49e12 100644 --- a/client/src/components/code-editor/CodeEditor.js +++ b/client/src/components/code-editor/CodeEditor.js @@ -2,45 +2,10 @@ import React, { useRef, useState } from 'react'; import Editor from '@monaco-editor/react'; import { executeCode, setLoadingTrue } from '../../actions/code'; import { useDispatch, useSelector } from 'react-redux'; -import InputOutput from '../output/InputOutput'; +import InputOutput from './InputOutput'; import Submit from './Submit'; -import styled from 'styled-components'; -import './style.css'; - -const Row = styled.div` - display: flex; - flex-direction: row; -`; - -const Column = styled.div` - display: flex; - flex-direction: column; - box-sizing: border-box; - flex: 1; -`; - -const SubmitButton = styled.button` - background-color: #3b8d47; - color: white; - margin-left: 10px; - padding: 10px; - box-sizing: border-box; - border: none; - outline: none; - font-size: 16px; - width: 100px; -`; - -const OutputWindow = styled.div` - flex: 1; - background-color: #eeeeee; - margin: 20px; - border-radius: 5px; - padding: 10px; - box-sizing: border-box; - overflow: auto; - color: ${props => (props.error ? 'red' : 'black')}; -`; +import styles from './codeEditor.module.css'; +import { OutputWindow } from './styledComponents'; const CodeEditor = ({ theme }) => { const loading = useSelector(state => state.code.isFetching); @@ -70,7 +35,7 @@ const CodeEditor = ({ theme }) => { return ( <> - +
{ theme={theme === 'dark' ? 'vs-dark' : 'light'} editorDidMount={handleEditorDidMount} /> - - +
+
- + + 
{output === '' ? error : output}
 - - +
+
); diff --git a/client/src/components/code-editor/InputOutput.js b/client/src/components/code-editor/InputOutput.js new file mode 100644 index 0000000..fc636e9 --- /dev/null +++ b/client/src/components/code-editor/InputOutput.js @@ -0,0 +1,28 @@ +import React, { useEffect } from 'react'; +import { TextInput } from './styledComponents'; +import { useSelector } from 'react-redux'; +import styles from './codeEditor.module.css'; + +const InputOutput = ({ input, setInput, theme }) => { + let output = useSelector(state => state.code.output); + let error = useSelector(state => state.code.error); + + useEffect(() => { + console.log(output); + }, [output]); + return ( +
+ { + console.log(e.target.value); + setInput(e.target.value); + }} + className={styles.textareaInput} + /> +
+ ); +}; + +export default InputOutput; diff --git a/client/src/components/code-editor/Submit.js b/client/src/components/code-editor/Submit.js index 9ffa5be..ae0e38d 100644 --- a/client/src/components/code-editor/Submit.js +++ b/client/src/components/code-editor/Submit.js @@ -1,9 +1,14 @@ import React from 'react'; +import styles from './codeEditor.module.css'; const Submit = ({ language, changeLanguage }) => { return ( -
- diff --git a/client/src/components/code-editor/codeEditor.module.css b/client/src/components/code-editor/codeEditor.module.css new file mode 100644 index 0000000..af54844 --- /dev/null +++ b/client/src/components/code-editor/codeEditor.module.css @@ -0,0 +1,77 @@ +.row { + display: flex; + flex-direction: row; +} + +.column { + display: flex; + flex-direction: column; + box-sizing: border-box; + flex: 1; +} + +.submitButton { + background-color: #3b8d47; + color: white; + margin-left: 10px; + padding: 10px; + box-sizing: border-box; + border: none; + outline: none; + font-size: 16px; + width: 100px; +} + +.inputWindow { + display: flex; + flex-direction: row; + justify-content: space-between; + margin-top: 10px; + flex: 1; + height: 100%; + flex: 1; + box-sizing: border-box; + margin: 20; + background-color: '#eeeeee'; + overflow: scroll; + outline: none; +} + +.inputField::-webkit-scrollbar { + display: none; +} + +.sellang { + display: block; + font-size: 16px; + font-family: sans-serif; + font-weight: 700; + color: #444; + line-height: 1.3; + padding: 10px; + width: 100%; + box-sizing: border-box; + margin: 0; + outline: none; + border: none; + background-color: white; +} + +.sellang > option { + font-size: 16px; + font-family: sans-serif; + font-weight: 700; + color: #444; + line-height: 1.3; + padding: 10px; + display: block; +} + +.textareaInput { + display: flex; + outline: none; + border-radius: 7px; + padding: 5px; + box-sizing: border-box; + flex: 1; +} diff --git a/client/src/components/code-editor/style.css b/client/src/components/code-editor/style.css deleted file mode 100644 index 0c622b9..0000000 --- a/client/src/components/code-editor/style.css +++ /dev/null @@ -1,25 +0,0 @@ -.sel-lang > select { - display: block; - font-size: 16px; - font-family: sans-serif; - font-weight: 700; - color: #444; - line-height: 1.3; - padding: 10px; - width: 100%; - box-sizing: border-box; - margin: 0; - outline: none; - border: none; - background-color: white; -} - -.sel-lang > select > option { - font-size: 16px; - font-family: sans-serif; - font-weight: 700; - color: #444; - line-height: 1.3; - padding: 10px; - display: block; -} diff --git a/client/src/components/code-editor/styledComponents.js b/client/src/components/code-editor/styledComponents.js new file mode 100644 index 0000000..c636fd7 --- /dev/null +++ b/client/src/components/code-editor/styledComponents.js @@ -0,0 +1,17 @@ +import styled from 'styled-components'; + +export const OutputWindow = styled.div` + flex: 1; + background-color: #eeeeee; + margin: 20px; + border-radius: 5px; + padding: 10px; + box-sizing: border-box; + overflow: auto; + color: ${props => (props.error ? 'red' : 'black')}; +`; + +export const TextInput = styled.textarea` + color: ${props => (props.theme === 'dark' ? 'white' : 'black')}; + background-color: ${props => (props.theme === 'dark' ? '#1e1e1e' : 'white')}; +`; diff --git a/client/src/components/output/InputOutput.js b/client/src/components/output/InputOutput.js deleted file mode 100644 index bf8aa27..0000000 --- a/client/src/components/output/InputOutput.js +++ /dev/null @@ -1,57 +0,0 @@ -import React, { useEffect } from 'react'; -import styled from 'styled-components'; -import { useSelector } from 'react-redux'; -import './style.css'; - -const Container = styled.div` - display: flex; - flex-direction: row; - justify-content: space-between; - margin-top: 10px; - flex: 1; -`; - -const Div = styled.div` - height: 100%; - flex: 1; - box-sizing: border-box; - margin: 20; - color: ${props => props.error && 'red'}; - background-color: '#eeeeee'; - overflow: scroll; - outline: none; -`; - -const TextInput = styled.textarea` - color: ${props => (props.theme === 'dark' ? 'white' : 'black')}; - background-color: ${props => (props.theme === 'dark' ? '#1e1e1e' : 'white')}; -`; - -const InputOutput = ({ input, setInput, theme }) => { - let output = useSelector(state => state.code.output); - let error = useSelector(state => state.code.error); - - useEffect(() => { - console.log(output); - }, [output]); - return ( - -
- { - console.log(e.target.value); - setInput(e.target.value); - }} - className='textarea-input' - /> -
- {/*
- 
{output === '' ? error : output}
-
*/} - - ); -}; - -export default InputOutput; diff --git a/client/src/components/output/style.css b/client/src/components/output/style.css deleted file mode 100644 index db30ee2..0000000 --- a/client/src/components/output/style.css +++ /dev/null @@ -1,12 +0,0 @@ -.input-field::-webkit-scrollbar { - display: none; -} - -.textarea-input { - display: flex; - outline: none; - border-radius: 7px; - padding: 5px; - box-sizing: border-box; - flex: 1; -}