Merge pull request #20 from signorecello/styling

feat: adding some styling suggestions and a favicon :)
signorecello · Dec 5, 2023 · 8b6305d · 8b6305d
2 parents 751ee3d + 1954873
commit 8b6305d
Show file tree

Hide file tree

Showing 7 changed files with 718 additions and 38 deletions.
diff --git a/.yarn/install-state.gz b/.yarn/install-state.gz
diff --git a/packages/playground/src/components/actionsBox/actions.tsx b/packages/playground/src/components/actionsBox/actions.tsx
@@ -52,24 +52,29 @@ export const ActionsBox = ({
 
   const submit = async (e: FormEvent) => {
     e.preventDefault();
-    setPending(true);
-    const compileTO = new Promise((resolve, reject) =>
-      setTimeout(async () => {
-        try {
-          setPending(false);
-          await compile(code);
-          resolve(code);
-        } catch (err) {
-          reject(err);
-        }
-      }, 100)
-    );
 
-    await toast.promise(compileTO, {
-      pending: "Compiling...",
-      success: "Compiled!",
-      error: "Error compiling",
-    });
+    if (!compiledCode) {
+      setPending(true);
+      const compileTO = new Promise((resolve, reject) =>
+        setTimeout(async () => {
+          try {
+            setPending(false);
+            await compile(code);
+            resolve(code);
+          } catch (err) {
+            reject(err);
+          }
+        }, 100)
+      );
+
+      await toast.promise(compileTO, {
+        pending: "Compiling...",
+        success: "Compiled!",
+        error: "Error compiling",
+      });
+    } else {
+      await prove(e);
+    }
   };
 
   const prove = async (e: FormEvent) => {
@@ -116,7 +121,6 @@ export const ActionsBox = ({
             Inputs
           </h3>
           <form
-            onSubmit={(e) => prove(e)}
             className="flex-col mt-5 sm:flex sm:items-center"
             id="inputs-container"
           >
@@ -130,11 +134,6 @@ export const ActionsBox = ({
                 handleInput={handleInput}
               />
             </div>
-            <ButtonContainer>
-              <Button type="submit" disabled={pending} $primary={true}>
-                📜 Prove
-              </Button>
-            </ButtonContainer>
           </form>
         </div>
       )}
@@ -145,7 +144,7 @@ export const ActionsBox = ({
         <input type="text" style={{ display: "none" }} />
         <ButtonContainer>
           <Button type="submit" disabled={pending} $primary={true}>
-            🔄 Compile
+            {compiledCode ? "📜 Prove" : "🔄 Compile"}
           </Button>
           <Button
             onClick={(e: FormEvent) => share(e)}

diff --git a/packages/website/index.html b/packages/website/index.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Vite + React + TS</title>
+    <title>Noir Playground</title>
   </head>
   <body class="min-h-screen bg-purple-1 font-nunito flex flex-col">
     <div id="root" class="flex-grow flex justify-center"></div>

diff --git a/packages/website/package.json b/packages/website/package.json
@@ -26,6 +26,7 @@
     "devDependencies": {
         "@types/react-dom": "^18.2.16",
         "eslint": "^8.54.0",
-        "tailwindcss": "^3.3.5"
+        "tailwindcss": "^3.3.5",
+        "vite-plugin-favicons-inject": "^2.2.0"
     }
 }
diff --git a/packages/website/public/noir_logo.svg b/packages/website/public/noir_logo.svg
diff --git a/packages/website/vite.config.ts b/packages/website/vite.config.ts
@@ -1,15 +1,10 @@
 import { defineConfig } from "vite";
 import react from "@vitejs/plugin-react-swc";
 
+import vitePluginFaviconsInject from "vite-plugin-favicons-inject";
+
 export default defineConfig({
-  build: {
-    lib: {
-      entry: "index.html",
-      formats: ["cjs", "es"],
-      fileName: "index",
-    },
-  },
-  plugins: [react()],
+  plugins: [react(), vitePluginFaviconsInject("./public/noir_logo.svg")],
   define: {
     "process.env": process.env,
   },