Merge 05df18aa66 into 1bc26b616f

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}

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;

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",

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