From c4b99c125e514175a45b046dfe51f32d10e09529 Mon Sep 17 00:00:00 2001
From: Abi Raja <abimanyuraja@gmail.com>
Date: Tue, 14 Nov 2023 23:33:06 -0500
Subject: [PATCH] make layout better

---
 frontend/src/App.tsx                    | 156 +++++++++++++-----------
 frontend/src/components/ImageUpload.tsx |   2 +-
 frontend/src/index.css                  |   2 +-
 3 files changed, 90 insertions(+), 70 deletions(-)

diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index 19129af..c125ee2 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -21,6 +21,14 @@ function App() {
     setBlobUrl(url);
   };
 
+  const reset = () => {
+    setAppState("INITIAL");
+    setGeneratedCode("");
+    setReferenceImages([]);
+    setExecutionConsole([]);
+    setBlobUrl("");
+  };
+
   function startCodeGeneration(referenceImages: string[]) {
     setAppState("CODING");
     setReferenceImages(referenceImages);
@@ -42,79 +50,91 @@ function App() {
   }
 
   return (
-    <div className="mx-auto mt-6 max-w-[1000px]">
-      <h1 className="text-4xl mb-2 text-center">Screenshot to Code</h1>
-      <h1 className="text-base text-gray-500 mb-2 text-center">
-        drag & drop a screenshot below
-      </h1>
+    <div className="mt-6">
+      <div className="hidden lg:fixed lg:inset-y-0 lg:z-50 lg:flex lg:w-96 lg:flex-col">
+        <div className="flex grow flex-col gap-y-2 overflow-y-auto border-r border-gray-200 bg-white px-6">
+          <h1 className="text-2xl mt-10">Screenshot to Code</h1>
+          <h2 className="text-sm text-gray-500 mb-2">
+            Drag & drop a screenshot to get started.
+          </h2>
 
-      {appState === "INITIAL" && (
-        <>
-          <ImageUpload setReferenceImages={startCodeGeneration} />
-        </>
-      )}
-
-      {(appState === "CODING" || appState === "CODE_READY") && (
-        <>
-          <div className="flex gap-x-2 justify-around">
-            <div
-              className={classNames({
-                "scanning relative": appState === "CODING",
-              })}
-            >
-              <img
-                className="w-[300px]"
-                src={referenceImages[0]}
-                alt="Reference"
-              />
-            </div>
-            <div className="bg-gray-400 px-4 py-2 rounded text-sm hidden">
-              <h2 className="text-lg mb-4 border-b border-gray-800">Console</h2>
-              {executionConsole.map((line, index) => (
-                <div
-                  key={index}
-                  className="border-b border-gray-400 mb-2 text-gray-600 font-mono"
-                >
-                  {line}
-                </div>
-              ))}
-            </div>
-          </div>
-          {/* Show code preview only when coding */}
-          {appState === "CODING" && (
+          {(appState === "CODING" || appState === "CODE_READY") && (
             <>
-              <div className="flex items-center gap-x-1">
-                <Spinner />
-                {executionConsole.slice(-1)[0]}
+              {/* Show code preview only when coding */}
+              {appState === "CODING" && (
+                <div className="flex flex-col">
+                  <div className="flex items-center gap-x-1">
+                    <Spinner />
+                    {executionConsole.slice(-1)[0]}
+                  </div>
+                  <CodePreview code={generatedCode} />
+                </div>
+              )}
+              <div className="flex gap-x-2">
+                <div
+                  className={classNames({
+                    "scanning relative": appState === "CODING",
+                  })}
+                >
+                  <img
+                    className="w-[340px]"
+                    src={referenceImages[0]}
+                    alt="Reference"
+                  />
+                </div>
+                <div className="bg-gray-400 px-4 py-2 rounded text-sm hidden">
+                  <h2 className="text-lg mb-4 border-b border-gray-800">
+                    Console
+                  </h2>
+                  {executionConsole.map((line, index) => (
+                    <div
+                      key={index}
+                      className="border-b border-gray-400 mb-2 text-gray-600 font-mono"
+                    >
+                      {line}
+                    </div>
+                  ))}
+                </div>
               </div>
-              <CodePreview code={generatedCode} />
+
+              {appState === "CODE_READY" && (
+                <div className="flex items-center gap-x-2 mb-4">
+                  <a
+                    className="bg-button/70 hover:bg-highlight text-black
+ py-2 px-4 rounded transition duration-300"
+                    onClick={createBlobUrl}
+                    href={blobUrl}
+                    download="index.html"
+                  >
+                    Download
+                  </a>
+                  <button
+                    className="bg-button/70 hover:bg-highlight text-black
+ py-2 px-4 rounded transition duration-300"
+                    onClick={reset}
+                  >
+                    Reset
+                  </button>
+                </div>
+              )}
             </>
           )}
-          {appState === "CODE_READY" && (
-            <div className="flex items-center gap-x-2 mb-4 justify-end">
-              <a
-                className="bg-button/70 hover:bg-highlight text-black
- py-2 px-4 rounded transition duration-300"
-                onClick={createBlobUrl}
-                href={blobUrl}
-                download="index.html"
-              >
-                Download code
-              </a>
-              <a
-                className="bg-button/70 hover:bg-highlight text-black
- py-2 px-4 rounded transition duration-300"
-                onClick={createBlobUrl}
-                href={blobUrl}
-                download="index.html"
-              >
-                Reset
-              </a>
-            </div>
-          )}
-          <Preview code={generatedCode} />
-        </>
-      )}
+        </div>
+      </div>
+
+      <main className="py-2 lg:pl-96">
+        {appState === "INITIAL" && (
+          <>
+            <ImageUpload setReferenceImages={startCodeGeneration} />
+          </>
+        )}
+
+        {(appState === "CODING" || appState === "CODE_READY") && (
+          <div className="ml-4">
+            <Preview code={generatedCode} />
+          </div>
+        )}
+      </main>
     </div>
   );
 }
diff --git a/frontend/src/components/ImageUpload.tsx b/frontend/src/components/ImageUpload.tsx
index e0dd0ec..16b5373 100644
--- a/frontend/src/components/ImageUpload.tsx
+++ b/frontend/src/components/ImageUpload.tsx
@@ -5,7 +5,7 @@ import { toast } from "react-hot-toast";
 
 const baseStyle = {
   flex: 1,
-  width: "50%",
+  width: "80%",
   margin: "0 auto",
   minHeight: "400px",
   display: "flex",
diff --git a/frontend/src/index.css b/frontend/src/index.css
index 4f6e47a..f77300a 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -28,6 +28,6 @@ body {
     transform: translateX(0px);
   }
   50% {
-    transform: translateX(300px);
+    transform: translateX(340px);
   }
 }