Fix UI layout

sansmoraxz · May 16, 2024 · 8f992d3 · 8f992d3
1 parent 3452afb
commit 8f992d3
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 15 deletions.
diff --git a/src/App.tsx b/src/App.tsx
@@ -7,9 +7,9 @@ import CodeEditorWindow from "./CodeEditorWindow";
 function App() {
   return (
     <>
-
-      <h1 className="text-4xl text-center">Lua Web Editor</h1>
-      <br />
+      <h1 className="text-4xl text-center mb-10 text-gray-100 md:font-bold">
+        Lua Web Editor
+      </h1>
       <CodeEditorWindow />
 
       <div className="text-center mt-4">Free to use, no sign up required.</div>

diff --git a/src/CodeEditorWindow.tsx b/src/CodeEditorWindow.tsx
@@ -22,7 +22,7 @@ type CodeEditorWindowProps = {
 
 const CodeEditorWindow = ({ language }: CodeEditorWindowProps) => {
   const [srCode, setSrCode] = useState<string>("");
-  const [output, setOutput] = useState<string>("");
+  const [output, setOutput] = useState<string>("Press run to execute the script.");
 
   const [isRunning, setIsRunning] = useState<boolean>(false);
 
@@ -41,11 +41,10 @@ const CodeEditorWindow = ({ language }: CodeEditorWindowProps) => {
 
       try {
         const output = await engine.doString(srCode);
-        if (output){
+        if (output) {
           console.log("Script Output:", output);
           setOutput(output);
-        }
-        else {
+        } else {
           console.log("Script Output: No output");
           setOutput("No output");
         }
@@ -55,7 +54,6 @@ const CodeEditorWindow = ({ language }: CodeEditorWindowProps) => {
         setOutput(`Error occured. Check the logs.`);
         console.timeEnd("Execution Time");
       }
-
     } catch (err) {
       console.error("Engine Error:", err);
     }
@@ -81,27 +79,31 @@ const CodeEditorWindow = ({ language }: CodeEditorWindowProps) => {
           defaultValue={defaultCode}
         />
       </div>
-      <div className="h-1/4 w-[50vw] p-4">
+      <div className="h-1/4 w-[50vw] min-w-[30vw] pl-10">
         <button
           onClick={() => runScript()}
           disabled={isRunning}
-          className="relative inline-flex items-center justify-center p-0.5 mb-2 me-2 overflow-hidden text-sm font-medium text-gray-900 rounded-lg group bg-gradient-to-br from-purple-600 to-blue-500 group-hover:from-purple-600 group-hover:to-blue-500 hover:text-white dark:text-white focus:ring-4 focus:outline-none focus:ring-blue-300 dark:focus:ring-blue-800"
+          className="relative inline-flex items-center justify-center p-0.5 mb-2 me-2 overflow-hidden text-sm font-medium text-gray-900 rounded-lg group bg-gradient-to-br from-purple-600 to-blue-500 group-hover:from-purple-600 group-hover:to-blue-500 hover:text-white dark:text-white focus:ring-4 focus:outline-none focus:ring-blue-300 dark:focus:ring-blue-800 mb-10"
         >
           <span className="relative px-5 py-2.5 transition-all ease-in duration-75 bg-white dark:bg-gray-900 rounded-md group-hover:bg-opacity-0">
             Run
           </span>
         </button>
 
         <div className="h-36 w-full overflow-y-auto">
-          <h3>Output:</h3>
-          <br />
-          <pre>{output}</pre>
+          <div className="text-lg  text-gray-400 pb-4 md:font-semibold">
+            Output
+          </div>
+          <div className="text-sm text-gray-300 md:font-light">
+            {isRunning ? "Running..." : output}
+          </div>
         </div>
         <br />
 
         <div className="h-fit w-full overflow-y-auto">
-          <h3>Logs:</h3>
-          <br />
+          <div className="text-lg text-gray-400 pb-4 md:font-semibold">
+            Logs
+          </div>
           <LogsContainer />
         </div>
       </div>