UI changes

README.md

@@ -7,7 +7,7 @@ sdk: docker
 pinned: true
 app_port: 5173
 license: mit
-short_description: Develop and deploy your static space in few-seconds
+short_description: Imagine and Share in 1-Click
 ---
 
 Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

src/components/App.tsx

@@ -2,12 +2,7 @@ import { useRef, useState } from "react";
 import Editor from "@monaco-editor/react";
 import classNames from "classnames";
 import { editor } from "monaco-editor";
-import {
-  useMount,
-  useUnmount,
-  useEvent,
-  useLocalStorage,
-} from "react-use";
+import { useMount, useUnmount, useEvent, useLocalStorage } from "react-use";
 import { toast } from "react-toastify";
 
 import Header from "./header/header";
@@ -18,7 +13,6 @@ import AskAI from "./ask-ai/ask-ai";
 import { Auth } from "../utils/types";
 import Preview from "./preview/preview";
 
-
 function App() {
   const [htmlStorage, , removeHtmlStorage] = useLocalStorage("html_content");
 
@@ -62,8 +56,8 @@ function App() {
       preview.current.style.width = `${initialPreviewWidth}px`;
     } else {
       // Remove inline styles for smaller screens, let CSS flex-col handle it
-      editor.current.style.width = '';
-      preview.current.style.width = '';
+      editor.current.style.width = "";
+      preview.current.style.width = "";
     }
   };
 
@@ -73,15 +67,19 @@ function App() {
    */
   const handleResize = (e: MouseEvent) => {
     if (!editor.current || !preview.current || !resizer.current) return;
-    
+
     const resizerWidth = resizer.current.offsetWidth;
     const minWidth = 100; // Minimum width for editor/preview
     const maxWidth = window.innerWidth - resizerWidth - minWidth;
-    
+
     const editorWidth = e.clientX;
-    const clampedEditorWidth = Math.max(minWidth, Math.min(editorWidth, maxWidth));
-    const calculatedPreviewWidth = window.innerWidth - clampedEditorWidth - resizerWidth;
-    
+    const clampedEditorWidth = Math.max(
+      minWidth,
+      Math.min(editorWidth, maxWidth)
+    );
+    const calculatedPreviewWidth =
+      window.innerWidth - clampedEditorWidth - resizerWidth;
+
     editor.current.style.width = `${clampedEditorWidth}px`;
     preview.current.style.width = `${calculatedPreviewWidth}px`;
   };
@@ -110,7 +108,7 @@ function App() {
   useMount(() => {
     // Fetch user data
     fetchMe();
-    
+
     // Restore content from storage if available
     if (htmlStorage) {
       removeHtmlStorage();
@@ -138,7 +136,7 @@ function App() {
 
   return (
     <div className="h-screen bg-gray-950 font-sans overflow-hidden">
-      <Header>
+      <Header onReset={() => setHtml(defaultHTML)}>
         <DeployButton html={html} error={error} auth={auth} />
       </Header>
       <main className="max-lg:flex-col flex w-full">

src/components/deploy-button/deploy-button.tsx

@@ -8,6 +8,20 @@ import Loading from "../loading/loading";
 import Login from "../login/login";
 import { Auth } from "../../utils/types";
 
+const MsgToast = ({ url }: { url: string }) => (
+  <div className="w-full flex items-center justify-center gap-3">
+    Your space is live!
+    <button
+      className="bg-black text-sm block text-white rounded-md px-3 py-1.5 hover:bg-gray-900 cursor-pointer"
+      onClick={() => {
+        window.open(url, "_blank");
+      }}
+    >
+      See Space
+    </button>
+  </div>
+);
+
 function DeployButton({
   html,
   error = false,
@@ -43,7 +57,9 @@ function DeployButton({
       const response = await request.json();
       if (response.ok) {
         toast.success(
-          path ? `Space updated successfully!` : `Space created successfully!`
+          <MsgToast
+            url={`https://huggingface.co/spaces/${response.path ?? path}`}
+          />
         );
         setPath(response.path);
       } else {

src/components/header/header.tsx

@@ -1,7 +1,21 @@
-import Logo from "@/assets/logo.svg";
 import { ReactNode } from "react";
+import { MdAdd } from "react-icons/md";
+
+import Logo from "@/assets/logo.svg";
+
+function Header({
+  onReset,
+  children,
+}: {
+  onReset: () => void;
+  children?: ReactNode;
+}) {
+  const handleConfirm = () => {
+    if (window.confirm("You're about to reset the editor. Are you sure?")) {
+      onReset();
+    }
+  };
 
-function Header({ children }: { children?: ReactNode }) {
   return (
     <header className="border-b border-gray-900 px-3 lg:px-6 py-2 flex justify-between items-center">
       <div className="flex items-center justify-start gap-3">
@@ -14,8 +28,15 @@ function Header({ children }: { children?: ReactNode }) {
           DeepSite
         </h1>
         <p className="text-gray-700 max-md:hidden">|</p>
+        <button
+          className="max-md:hidden relative cursor-pointer flex-none flex items-center justify-center rounded-md text-xs font-semibold leading-5 py-1.5 px-4 hover:bg-gray-100 text-gray-950 shadow-sm dark:shadow-highlight/20 bg-white"
+          onClick={handleConfirm}
+        >
+          <MdAdd className="text-gray-800 mr-1 text-base" />
+          New Project
+        </button>
         <p className="text-gray-500 text-sm max-md:hidden">
-          Code and Deploy in 1-Click
+          Imagine and Share in 1-Click
         </p>
       </div>
       {children}

src/utils/consts.ts

@@ -13,12 +13,28 @@ export const defaultHTML = `<!DOCTYPE html>
         font-family: "Arial", sans-serif;
         text-align: center;
       }
+      .arrow {
+        position: absolute;
+        bottom: 32px;
+        left: 0px;
+        width: 100px;
+        transform: rotate(30deg);
+      }
+      h1 {
+        font-size: 50px;
+      }
+      h1 span {
+        color: #acacac;
+        font-size: 32px;
+      }
     </style>
   </head>
   <body>
     <h1>
-      Start editing to see some magic happen!
+      <span>I'm ready to work,</span><br />
+      Ask me anything.
     </h1>
+    <img src="/arrow.svg" class="arrow" />
     <script></script>
   </body>
 </html>