css changes

Author: tomarviii88

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"]
+[{"/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"]

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 = () => {

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,26 +35,30 @@ const CodeEditor = ({ theme }) => {
 
   return (
     <>
-      <Row>
+      <div className={styles.row}>
         <Editor
           height='70vh'
           width='50%'
           language={language}
           theme={theme === 'dark' ? 'vs-dark' : 'light'}
           editorDidMount={handleEditorDidMount}
         />
-        <Column>
-          <Row style={{ marginLeft: 20 }}>
+        <div className={styles.column}>
+          <div className={styles.row} style={{ marginLeft: 20 }}>
             <Submit language={language} changeLanguage={changeLanguage} />
-            <SubmitButton onClick={SubmitCode} disabled={!isEditorReady}>
+            <button
+              className={styles.submitButton}
+              onClick={SubmitCode}
+              disabled={!isEditorReady}
+            >
               {loading ? 'Loading..' : 'Submit'}
-            </SubmitButton>
-          </Row>
+            </button>
+          </div>
           <OutputWindow error={error === '' ? false : true}>
             <pre>{output === '' ? error : output}</pre>
           </OutputWindow>
-        </Column>
-      </Row>
+        </div>
+      </div>
       <InputOutput input={input} setInput={setInput} theme={theme} />
     </>
   );

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 (
+    <div className={styles.inputWindow}>
+      <TextInput
+        theme={theme}
+        value={input}
+        onChange={e => {
+          console.log(e.target.value);
+          setInput(e.target.value);
+        }}
+        className={styles.textareaInput}
+      />
+    </div>
+  );
+};
+
+export default InputOutput;

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 (
-    <div className='sel-lang '>
-      <select value={language} onChange={changeLanguage}>
+    <div>
+      <select
+        className={styles.sellang}
+        value={language}
+        onChange={changeLanguage}
+      >
         <option value='c'>C</option>
         <option value='cpp'>C++</option>
         <option value='python'>Python</option>

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;
+}

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

@@ -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')};
+`;