enh: sparkle-ization of app design

dust-tt · Aug 31, 2023 · 2ce618d · 2ce618d
1 parent 609fe06
commit 2ce618d
Show file tree

Hide file tree

Showing 13 changed files with 1,104 additions and 911 deletions.
diff --git a/front/components/app/Deploy.tsx b/front/components/app/Deploy.tsx
@@ -1,13 +1,16 @@
 import "@uiw/react-textarea-code-editor/dist.css";
 
+import {
+  Button,
+  ClipboardIcon,
+  CubeIcon,
+  DocumentTextIcon,
+} from "@dust-tt/sparkle";
 import { Dialog, Transition } from "@headlessui/react";
-import { CubeIcon, DocumentDuplicateIcon } from "@heroicons/react/20/solid";
-import { ArrowRightCircleIcon } from "@heroicons/react/24/outline";
 import dynamic from "next/dynamic";
 import Link from "next/link";
 import { Fragment, useState } from "react";
 
-import { ActionButton, Button, HighlightButton } from "@app/components/Button";
 import { useKeys } from "@app/lib/swr";
 import { classNames } from "@app/lib/utils";
 import { AppType, SpecificationType } from "@app/types/app";
@@ -82,15 +85,15 @@ export default function Deploy({
 
   return (
     <div>
-      <HighlightButton
-        disabled={disabled}
+      <Button
+        label="deploy"
+        type="primary"
         onClick={() => {
           setOpen(!open);
         }}
-      >
-        <CubeIcon className="-ml-1 mr-1 h-5 w-5" />
-        Deploy
-      </HighlightButton>
+        disabled={disabled}
+        icon={CubeIcon}
+      />
 
       <Transition.Root show={open} as={Fragment}>
         <Dialog
@@ -180,34 +183,42 @@ export default function Deploy({
                         </div>
                         <div className="flex-1"></div>
                         <div className="mt-1">
-                          <ActionButton onClick={handleCopyClick}>
-                            <DocumentDuplicateIcon className="-ml-1 mr-1 mt-0.5 h-5 w-5" />
-                            {copyButtonText}
-                          </ActionButton>
+                          <Button
+                            type="primary"
+                            onClick={handleCopyClick}
+                            label={copyButtonText}
+                            icon={ClipboardIcon}
+                          />
                         </div>
                       </div>
                       <p className="mt-4 text-sm text-gray-500">
                         For a detailed documentation of the Run model and Run
                         creation parameters, refer to the API reference.
                       </p>
                       <p className="mt-2">
-                        <Link
-                          href="https://docs.dust.tt/runs"
-                          target="_blank"
-                          className="mr-2"
-                        >
-                          <Button>
-                            <ArrowRightCircleIcon className="-ml-1 mr-2 h-4 w-4" />
-                            Visit API Reference
-                          </Button>
-                        </Link>
+                        <Button
+                          icon={DocumentTextIcon}
+                          label="Visit API Reference"
+                          type="secondary"
+                          onClick={() => {
+                            window.open(
+                              "https://docs.dust.tt/runs",
+                              "_blank",
+                              "noopener,noreferrer"
+                            );
+                          }}
+                        />
                       </p>
                     </div>
                   </div>
                   <div className="mt-5 flex flex-row items-center space-x-2 sm:mt-6">
                     <div className="flex-1"></div>
                     <div className="flex flex-initial">
-                      <Button onClick={() => setOpen(false)}>Close</Button>
+                      <Button
+                        type="secondary"
+                        onClick={() => setOpen(false)}
+                        label="Close"
+                      />
                     </div>
                   </div>
                 </Dialog.Panel>

diff --git a/front/components/app/NewBlock.tsx b/front/components/app/NewBlock.tsx
@@ -1,3 +1,4 @@
+import { Button } from "@dust-tt/sparkle";
 import { Menu } from "@headlessui/react";
 import { PlusIcon } from "@heroicons/react/20/solid";
 
@@ -121,18 +122,13 @@ export default function NewBlock({
             <PlusIcon className="h-4 w-4" />
           </Menu.Button>
         ) : (
-          <Menu.Button
-            className={classNames(
-              "inline-flex items-center rounded-md border px-3 py-1 text-sm font-medium leading-6",
-              disabled
-                ? "border-gray-200 bg-white text-gray-300"
-                : "border-gray-700 bg-gray-700 text-white hover:bg-gray-800",
-              "shadow-sm focus:outline-none focus:ring-0 focus:ring-2"
-            )}
-            disabled={disabled}
-          >
-            <PlusIcon className="-ml-1 mr-1 h-5 w-5" />
-            Block
+          <Menu.Button as="div" disabled={disabled}>
+            <Button
+              type="secondary"
+              label="Add Block"
+              icon={PlusIcon}
+              disabled={disabled}
+            />
           </Menu.Button>
         )}
       </div>

diff --git a/front/components/sparkle/navigation.tsx b/front/components/sparkle/navigation.tsx
@@ -158,13 +158,15 @@ export const subNavigationApp = ({
       label: "Specification",
       icon: CommandLineIcon,
       href: `/w/${owner.sId}/a/${app.sId}`,
+      sizing: "expand",
       current: current === "specification",
     },
     {
       id: "datasets",
       label: "Datasets",
       icon: DocumentTextIcon,
       href: `/w/${owner.sId}/a/${app.sId}/datasets`,
+      sizing: "expand",
       current: current === "datasets",
     },
   ];
@@ -180,20 +182,23 @@ export const subNavigationApp = ({
         label: "Run",
         icon: PaperAirplaneIcon,
         href: `/w/${owner.sId}/a/${app.sId}/execute`,
+        sizing: "expand",
         current: current === "execute",
       },
       {
         id: "runs",
         label: "Logs",
         icon: FolderOpenIcon,
         href: `/w/${owner.sId}/a/${app.sId}/runs`,
+        sizing: "expand",
         current: current === "runs",
       },
       {
         id: "settings",
         label: "Settings",
         icon: Cog6ToothIcon,
         href: `/w/${owner.sId}/a/${app.sId}/settings`,
+        sizing: "expand",
         current: current === "settings",
       },
     ]);