From 05df18aa666875b32ebb1a1398aa77a50ac01711 Mon Sep 17 00:00:00 2001
From: Anas Dew <mailtoanas@duck.com>
Date: Thu, 25 Jan 2024 11:15:53 +0530
Subject: [PATCH] Shifted Heading to Main Screen Shifted Settings Icon to
 Bottom Added Some Radiues in ImageUpload

---
 frontend/src/App.tsx                              |  5 +++--
 frontend/src/components/Heading.tsx               | 12 ++++++++++++
 frontend/src/components/ImageUpload.tsx           |  4 ++--
 frontend/src/components/OutputSettingsSection.tsx |  2 +-
 4 files changed, 18 insertions(+), 5 deletions(-)
 create mode 100644 frontend/src/components/Heading.tsx

diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index 3f7a025..9033e68 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -35,6 +35,7 @@ import { extractHistoryTree } from "./components/history/utils";
 import toast from "react-hot-toast";
 import ImportCodeSection from "./components/ImportCodeSection";
 import { Stack } from "./lib/stacks";
+import Heading from "./components/Heading";
 
 const IS_OPENAI_DOWN = false;
 
@@ -321,8 +322,7 @@ function App() {
       )}
       <div className="lg:fixed lg:inset-y-0 lg:z-40 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 dark:bg-zinc-950 dark:text-white">
-          <div className="flex items-center justify-between mt-10 mb-2">
-            <h1 className="text-2xl ">Screenshot to Code</h1>
+          <div className="absolute bottom-1 left-5 center justify-between mt-10 mb-2">
             <SettingsDialog settings={settings} setSettings={setSettings} />
           </div>
 
@@ -470,6 +470,7 @@ function App() {
       <main className="py-2 lg:pl-96">
         {appState === AppState.INITIAL && (
           <div className="flex flex-col justify-center items-center gap-y-10">
+            <Heading />
             <ImageUpload setReferenceImages={doCreate} />
             <UrlInputSection
               doCreate={doCreate}
diff --git a/frontend/src/components/Heading.tsx b/frontend/src/components/Heading.tsx
new file mode 100644
index 0000000..af0cebb
--- /dev/null
+++ b/frontend/src/components/Heading.tsx
@@ -0,0 +1,12 @@
+function Heading() {
+
+  return (
+    <section className="container">
+      <div className="text-center text-slate-700 text-4xl">
+        Screenshot to code
+      </div>
+    </section>
+  );
+}
+
+export default Heading;
diff --git a/frontend/src/components/ImageUpload.tsx b/frontend/src/components/ImageUpload.tsx
index ff97466..92d123c 100644
--- a/frontend/src/components/ImageUpload.tsx
+++ b/frontend/src/components/ImageUpload.tsx
@@ -15,10 +15,10 @@ const baseStyle = {
   justifyContent: "center",
   padding: "20px",
   borderWidth: 2,
-  borderRadius: 2,
+  borderRadius: 10,
   borderColor: "#eeeeee",
   borderStyle: "dashed",
-  backgroundColor: "#fafafa",
+  backgroundColor: "#e9e9e9",
   color: "#bdbdbd",
   outline: "none",
   transition: "border .24s ease-in-out",
diff --git a/frontend/src/components/OutputSettingsSection.tsx b/frontend/src/components/OutputSettingsSection.tsx
index 64f62cb..e85ea8e 100644
--- a/frontend/src/components/OutputSettingsSection.tsx
+++ b/frontend/src/components/OutputSettingsSection.tsx
@@ -38,7 +38,7 @@ function OutputSettingsSection({
   shouldDisableUpdates = false,
 }: Props) {
   return (
-    <div className="flex flex-col gap-y-2 justify-between text-sm">
+    <div className="flex flex-col gap-y-2 mt-3 justify-between text-sm">
       <div className="grid grid-cols-3 items-center gap-4">
         <span>{label}</span>
         <Select