Add style

.gitignore

@@ -1,2 +1,3 @@
 node_modules
-.env
+.env
+.build

public/index.html

@@ -11,6 +11,8 @@
     -->
 	<link rel="manifest" href="%PUBLIC_URL%/manifest.json">
 	<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
+  <script src="https://cdn.tailwindcss.com"></script>
+  <script src="https://cdn.tailwindcss.com?plugins=forms,typography"></script>
 	<!--
       Notice the use of %PUBLIC_URL% in the tags above.
       It will be replaced with the URL of the `public` folder during the build.

src/Components/CodeActions/index.jsx

@@ -0,0 +1,22 @@
+const CodeActions = ({ runEditorCode, refactorCode, isLoading }) => {
+  return (
+    <div className="flex md:space-x-2 w-full md:w-1/2 justify-between md:justify-end">
+      <button
+        className="border border-gray-200 bg-gray-200 text-gray-700 rounded-md px-4 py-2 md:m-2 mt-2 transition duration-500 ease select-none hover:bg-gray-300 focus:outline-none focus:shadow-outline"
+        onClick={runEditorCode}
+        disabled={isLoading}
+      >
+        Run Code
+      </button>
+      <button
+        className="border border-gray-200 bg-gray-200 text-gray-700 rounded-md px-4 py-2 md:m-2 mt-2 transition duration-500 ease select-none hover:bg-gray-300 focus:outline-none focus:shadow-outline"
+        onClick={refactorCode}
+        disabled={isLoading}
+      >
+        Refactor Code
+      </button>
+    </div>
+  );
+};
+
+export default CodeActions;

src/Components/CustomInput/Header.jsx

@@ -1,8 +1,13 @@
 const CustomInputHeader = ({ clearInput }) => {
   return (
-    <div className="flex justify-between items-center">
-      <label className="mb-2">Custom Input</label>
-      <input type="button" value="Clear Input" onClick={clearInput} />
+    <div className="flex justify-between items-center border-grey-700 border-b-2">
+      <h1 className="uppercase p-0">Custom Input</h1>
+      <button
+        className="border border-gray-200 bg-red-200 text-red-700 rounded-md px-4 py-2 m-2 transition duration-500 ease select-none hover:bg-red-300 focus:outline-none focus:shadow-outline"
+        onClick={clearInput}
+      >
+        Clear Input
+        </button>
     </div>
   );
 };

src/Components/CustomInput/index.jsx

@@ -1,5 +1,12 @@
 const CustomInput = ({ input, setInput }) => {
-  return <textarea value={input} onChange={setInput} className="mt-2" />;
+  return (
+    <textarea
+      value={input}
+      onChange={setInput}
+      className="block px-1 w-full text-sm bg-gray-800 text-white border focus:ring-0 border-gray-400 mt-2"
+      rows={5}
+    />
+  );
 };
 
 export default CustomInput;

src/Components/Header.jsx

@@ -3,7 +3,7 @@ import github from "../Images/github-mark.png";
 
 const Header = () => {
   return (
-    <div className="flex justify-between items-center p-4">
+    <div className="flex justify-between items-center p-4 border-b-2 border-grey-2 h-20">
       <img src={codeboost} />
       <a href="https://github.com/abhirampai/codeboost" target="_blank" referrerPolicy="no-referrer">
         <img src={github} className="w-9 h-9 cursor-pointer"/>

src/Components/LanguageSelector/index.jsx

@@ -3,17 +3,15 @@ import { LANGUAGE_OPTIONS } from "./constants";
 
 const LanguageSelector = ({ selectedLanguage, setSelectedLanguage }) => {
   return (
-    <div className="flex">
-      <Select
-        isSearchable
-        name="language"
-        placeholder="Select a Language"
-        className="w-full"
-        value={selectedLanguage}
-        options={LANGUAGE_OPTIONS}
-        onChange={(selectedOption) => setSelectedLanguage(selectedOption)}
-      />
-    </div>
+    <Select
+      isSearchable
+      name="language"
+      placeholder="Select a Language"
+      className="w-full"
+      value={selectedLanguage}
+      options={LANGUAGE_OPTIONS}
+      onChange={(selectedOption) => setSelectedLanguage(selectedOption)}
+    />
   );
 };
 

src/Components/Main.jsx

@@ -1,4 +1,4 @@
-import { useEffect, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 
 import { assoc } from "ramda";
 
@@ -17,8 +17,11 @@ import CustomInputHeader from "./CustomInput/Header";
 import OutputTerminalHeader from "./OutputTerminal/Header";
 import { useCreateCompletionApi } from "../Hooks/useRefactorApi";
 import Header from "./Header";
+import CodeActions from "./CodeActions";
 
 const Main = () => {
+  const outputRef = useRef(null);
+
   const [selectedLanguage, setSelectedLanguage] = useState(LANGUAGE_OPTIONS[0]);
   const [value, setValue] = useState(selectedLanguage?.stub);
   const [input, setInput] = useState();
@@ -33,6 +36,12 @@ const Main = () => {
     setValue(selectedLanguage?.stub);
   }, [selectedLanguage]);
 
+  useEffect(() => {
+    if (output?.data) {
+      outputRef.current.scrollIntoView({ behavior: "smooth" });
+    }
+  }, [output]);
+
   const clearInput = () => {
     setInput("");
   };
@@ -93,12 +102,19 @@ const Main = () => {
   };
 
   return (
-    <div className="flex flex-col w-full">
+    <div className="flex flex-col p-4">
       <Header />
-      <LanguageSelector
-        selectedLanguage={selectedLanguage}
-        setSelectedLanguage={setSelectedLanguage}
-      />
+      <div className="md:flex md:w-full mt-4 justify-between items-center">
+        <LanguageSelector
+          selectedLanguage={selectedLanguage}
+          setSelectedLanguage={setSelectedLanguage}
+        />
+        <CodeActions
+          refactorCode={refactorCode}
+          runEditorCode={runEditorCode}
+          isLoading={isLoading}
+        />
+      </div>
       <div className="editor-height mt-5">
         <CodeEditor
           selectedLanguage={selectedLanguage?.title.toLowerCase()}
@@ -108,33 +124,18 @@ const Main = () => {
           runCode={runEditorCode}
         />
       </div>
-      <div className="flex mt-5 justify-end">
-        <input
-          value="Run Code"
-          type="button"
-          onClick={runEditorCode}
-          disabled={isLoading}
-        />
-        <input
-          value="Refactor Code"
-          type="button"
-          className="ml-2"
-          onClick={refactorCode}
-          disabled={isLoading}
-        />
-      </div>
       <div className="flex flex-col mt-5">
         <CustomInputHeader clearInput={clearInput} />
         <CustomInput input={input} setInput={handleCustomInputChange} />
       </div>
       {output.data && (
         <>
-          <div className="flex flex-col mt-5">
+          <div className="flex flex-col py-4">
             <OutputTerminalHeader
               status={output?.status}
               clearOutput={clearOutput}
             />
-            <OutputTerminal output={output?.data} />
+            <OutputTerminal output={output?.data} outputRef={outputRef} />
           </div>
         </>
       )}

src/Components/OutputTerminal/Header.jsx

@@ -1,8 +1,13 @@
 const OutputTerminalHeader = ({ status, clearOutput }) => {
   return (
-    <div className="flex justify-between">
-      <label className="mb-2">Output ({status})</label>
-      <input value="Clear Ouput" type="button" onClick={clearOutput} />
+    <div className="flex justify-between items-center border-grey-700 border-b-2">
+      <h1 className="uppercase p-0">Output ({status})</h1>
+      <button
+        onClick={clearOutput}
+        className="border border-gray-200 bg-red-200 text-red-700 rounded-md px-4 py-2 m-2 transition duration-500 ease select-none hover:bg-red-300 focus:outline-none focus:shadow-outline"
+      >
+        Clear Output
+      </button>
     </div>
   );
 };

src/Components/OutputTerminal/index.jsx

@@ -1,7 +1,10 @@
-const OutputTerminal = ({ output }) => {
+const OutputTerminal = ({ output, outputRef }) => {
   return (
-    <div className="output-terminal-bg output-terminal-height overflow-auto flex flex-col mt-2">
-      <pre className="padding-top-left-1 text-white">{output}</pre>
+    <div
+      ref={outputRef}
+      className="block px-1 w-full h-36 text-sm bg-gray-800 text-white border focus:ring-0 border-gray-400 mt-2"
+    >
+      {output}
     </div>
   );
 };

src/styles.css

@@ -7,26 +7,6 @@
   height: calc(80vh - 165px);
 }
 
-.flex {
-  display: flex;
-}
-
-.w-full {
-  width: 100%;
-}
-
-.flex-col {
-  flex-direction: column;
-}
-
-.mt-5 {
-  margin-top: 1.25rem;
-}
-
-.justify-end {
-  justify-content: flex-end;
-}
-
 .output-terminal-bg {
   background-color: #303841;
 }
@@ -35,46 +15,6 @@
   height: 10vh;
 }
 
-.overflow-auto {
-  overflow: auto;
-}
-
 .padding-top-left-1 {
   padding: 1rem 0rem 0rem 1rem;
 }
-
-.text-white {
-  color: white;
-}
-
-.mt-2 {
-  margin-top: 0.5rem;
-}
-
-.justify-between {
-  justify-content: space-between;
-}
-
-.items-center {
-  align-items: center;
-}
-
-.ml-2 {
-  margin-left: 0.5rem;
-}
-
-.w-9 {
-  width: 2.25rem;
-}
-
-.h-9 {
-  height: 2.25rem;
-}
-
-.p-4 {
-  padding: 1rem;
-}
-
-.cursor-pointer {
-  cursor: pointer;
-}