From 292442c36ff9fedc8e7bab023974cf5fa33d0f3a Mon Sep 17 00:00:00 2001
From: Feenix <25067102+NayamAmarshe@users.noreply.github.com>
Date: Mon, 15 Aug 2022 12:51:12 +0530
Subject: [PATCH] Updated UI

---
 main/index.js            |  2 +-
 renderer/pages/index.jsx | 34 +++++++++++++++++++++++++++++++---
 2 files changed, 32 insertions(+), 4 deletions(-)

diff --git a/main/index.js b/main/index.js
index 200e84c..18ead53 100644
--- a/main/index.js
+++ b/main/index.js
@@ -38,7 +38,7 @@ app.on("ready", async () => {
 // Quit the app once all windows are closed
 app.on("window-all-closed", app.quit);
 
-// listen the channel `message` and resend the received message to the renderer process
+// ! DONT FORGET TO RESTART THE APP WHEN YOU CHANGE CODE HERE
 ipcMain.on("sendMessage", (_, message) => {
   console.log(message);
 });
diff --git a/renderer/pages/index.jsx b/renderer/pages/index.jsx
index 66c7be8..9066c9a 100644
--- a/renderer/pages/index.jsx
+++ b/renderer/pages/index.jsx
@@ -6,9 +6,37 @@ const Home = () => {
     window.electron.send("sendMessage", { message: "Hello!" });
   }, []);
   return (
-    <div className="h-screen w-screen bg-neutral-900">
-      <div>
-        <input />
+    <div className="flex h-screen w-screen flex-row bg-neutral-900">
+      <div className="flex h-screen w-96 flex-col bg-neutral-800 p-5">
+        <h1 className="text-3xl font-bold text-neutral-50">Upscayl</h1>
+        <div className="mt-10">
+          <p className="mb-2 font-medium text-neutral-100">Step 1</p>
+          <button className="rounded-lg bg-sky-400 p-3">Select Image</button>
+        </div>
+        <div className="mt-10">
+          <p className="mb-2 font-medium text-neutral-100">Step 2</p>
+          <p className="mb-1 text-neutral-300">Select Scale Factor:</p>
+          <div className="flex flex-row gap-2">
+            <button className="rounded-lg bg-red-400 p-3">2x</button>
+            <button className="rounded-lg bg-red-400 p-3">4x</button>
+            <button className="rounded-lg bg-red-400 p-3">6x</button>
+          </div>
+        </div>
+        <div className="mt-10">
+          <p className="mb-2 font-medium text-neutral-100">Step 3</p>
+          <button className="rounded-lg bg-violet-400 p-3">
+            Set Output Folder
+          </button>
+        </div>
+        <div className="mt-10">
+          <p className="mb-2 font-medium text-neutral-100">Step 4</p>
+          <button className="rounded-lg bg-green-400 p-3">Upscayl</button>
+        </div>
+      </div>
+      <div className="flex h-screen w-full flex-col items-center justify-center p-5">
+        <p className="text-lg font-medium text-neutral-400">
+          Select an Image to Upscale
+        </p>
       </div>
     </div>
   );