Minor UI Adjustments (#2122)

- Added shadow on nodes
- Removed unused buttons from API Node

src/frontend/src/components/codeTabsComponent/index.tsx

@@ -36,7 +36,7 @@ import {
   convertValuesToNumbers,
   hasDuplicateKeys,
 } from "../../utils/reactflowUtils";
-import { classNames } from "../../utils/utils";
+import { classNames, cn } from "../../utils/utils";
 import AccordionComponent from "../accordionComponent";
 import DictComponent from "../dictComponent";
 import IconComponent from "../genericIconComponent";
@@ -45,6 +45,7 @@ import KeypairListComponent from "../keypairListComponent";
 import ShadTooltip from "../shadTooltipComponent";
 import { Label } from "../ui/label";
 import { Switch } from "../ui/switch";
+import { Button } from "../ui/button";
 
 export default function CodeTabsComponent({
   flow,
@@ -93,28 +94,6 @@ export default function CodeTabsComponent({
     return node.data.node.template[templateParam].type;
   };
 
-  const downloadAsFile = () => {
-    const fileExtension = tabs[activeTab].language || ".txt";
-    const suggestedFileName = `${"generated-code."}${fileExtension}`;
-    const fileName = window.prompt("Enter the file name.", suggestedFileName);
-
-    if (!fileName) {
-      // user pressed cancel on prompt
-      return;
-    }
-
-    const blob = new Blob([tabs[activeTab].code], { type: "text/plain" });
-    const url = URL.createObjectURL(blob);
-    const link = document.createElement("a");
-    link.download = fileName;
-    link.href = url;
-    link.style.display = "none";
-    document.body.appendChild(link);
-    link.click();
-    document.body.removeChild(link);
-    URL.revokeObjectURL(url);
-  };
-
   return (
     <Tabs
       value={activeTab}
@@ -146,15 +125,9 @@ export default function CodeTabsComponent({
           <div></div>
         )}
 
-        <div className="float-right mx-1 mb-1 mt-2 flex gap-2">
+        <div className="float-right mx-2 mb-1 mt-2 flex items-center gap-4">
           {tweaks && (
-            <div
-              className={
-                Number(activeTab) > 2
-                  ? "hidden"
-                  : "relative top-[2.5px] flex gap-2"
-              }
-            >
+            <div className={Number(activeTab) > 2 ? "hidden" : "flex gap-2"}>
               <Switch
                 style={{
                   transform: `scaleX(${0.7}) scaleY(${0.7})`,
@@ -164,46 +137,31 @@ export default function CodeTabsComponent({
                 autoFocus={false}
               />
               <Label
-                className={
-                  "relative right-1 top-[4px] text-xs font-medium text-gray-500 dark:text-gray-300 " +
-                  (activeTweaks
-                    ? "font-bold text-black dark:text-white"
-                    : "font-medium")
-                }
+                className={cn(
+                  "relative right-1 top-[4px] text-xs font-medium text-muted-foreground",
+                  activeTweaks ? "text-primary" : "",
+                )}
                 htmlFor="tweaks-switch"
               >
                 Tweaks
               </Label>
             </div>
           )}
-          {allowExport && (
-            <ExportModal>
-              <div className="flex cursor-pointer items-center gap-1.5 rounded bg-none p-1 text-xs text-gray-500 dark:text-gray-300">
-                <IconComponent name="FileDown" className="h-4 w-4" />
-                Export Flow
-              </div>
-            </ExportModal>
-          )}
 
           {Number(activeTab) < 4 && (
             <>
-              <button
-                className="flex items-center gap-1.5 rounded bg-none p-1 text-xs text-gray-500 dark:text-gray-300"
+              <Button
+                variant="ghost"
+                size="icon"
+                className="text-muted-foreground"
                 onClick={copyToClipboard}
               >
                 {isCopied ? (
                   <IconComponent name="Check" className="h-4 w-4" />
                 ) : (
-                  <IconComponent name="Clipboard" className="h-4 w-4" />
+                  <IconComponent name="Copy" className="h-4 w-4" />
                 )}
-                {isCopied ? "Copied!" : "Copy Code"}
-              </button>
-              <button
-                className="flex items-center gap-1.5 rounded bg-none p-1 text-xs text-gray-500 dark:text-gray-300"
-                onClick={downloadAsFile}
-              >
-                <IconComponent name="Download" className="h-5 w-5" />
-              </button>
+              </Button>
             </>
           )}
         </div>

src/frontend/src/style/applies.css

@@ -330,7 +330,7 @@
     @apply grid w-full gap-4 p-4 md:grid-cols-2 lg:grid-cols-4;
   }
   .generic-node-div {
-    @apply relative flex flex-col justify-center bg-background;
+    @apply relative flex flex-col justify-center bg-background transition-all hover:shadow-node;
   }
   .generic-node-div-title {
     @apply flex w-full items-center gap-2 border-b bg-muted p-4;

src/frontend/tailwind.config.js

@@ -143,6 +143,7 @@ module.exports = {
       },
       boxShadow: {
         "frozen-ring": "0 0 10px 2px rgba(128, 190, 230, 0.5)",
+        node: "0 0px 15px -3px rgb(0 0 0 / 0.1), 0 0px 6px -4px rgb(0 0 0 / 0.1);",
         "frosted-ring": "0 0 10px 2px rgba(128, 190, 230, 0.7)",
       },
       backdropBlur: {