refactor: Design tweaks canvas actions and templates based on uplift feedback (#4418)

* uplift sweep for canvas actions and templates

* [autofix.ci] apply automated fixes

* test fix

* test fix 2

* one more fix

---------

Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>
Co-authored-by: anovazzi1 <otavio2204@gmail.com>
Co-authored-by: Cristhian Zanforlin Lousa <cristhian.lousa@gmail.com>

src/frontend/src/components/canvasControlsComponent/index.tsx

@@ -108,7 +108,9 @@ const CanvasControls = ({ children }) => {
         tooltipText={isInteractive ? "Lock" : "Unlock"}
         onClick={onToggleInteractivity}
         backgroundClasses={isInteractive ? "" : "bg-destructive"}
-        iconClasses={isInteractive ? "" : "text-primary-foreground"}
+        iconClasses={
+          isInteractive ? "" : "text-primary-foreground dark:text-primary"
+        }
         testId="lock_unlock"
       />
       {children}

src/frontend/src/components/flowToolbarComponent/index.tsx

@@ -76,10 +76,10 @@ export default function FlowToolbar(): JSX.Element {
           <button
             disabled={!hasApiKey || !validApiKey || !hasStore}
             className={classNames(
-              "relative inline-flex h-8 w-full items-center justify-center gap-1.5 rounded px-3 py-1.5 text-sm font-semibold text-foreground transition-all duration-150 ease-in-out hover:bg-accent",
+              "relative inline-flex h-8 w-full items-center justify-center gap-1.5 rounded px-3 py-1.5 text-sm font-semibold text-foreground transition-all duration-150 ease-in-out",
               !hasApiKey || !validApiKey || !hasStore
-                ? "text-muted-foreground"
+                ? "cursor-not-allowed text-muted-foreground"
-                : "",
+                : "hover:bg-accent",
             )}
             data-testid="shared-button-flow"
             onClick={() => {

src/frontend/src/modals/templatesModal/components/GetStartedComponent/index.tsx

@@ -12,21 +12,21 @@ export default function GetStartedComponent() {
   // Define the card data
   const cardData: CardData[] = [
     {
-      bg: "linear-gradient(145deg, #7CC0FF 0%, #96B9FF 50%, #CAA5FF 100%)",
+      bg: "radial-gradient(ellipse at top left, #A3E8EF, #ADF6FD, #9676fd)",
       spiralImage: memoryChatbotSpiral,
       icon: "MessagesSquare",
-      category: "Chatbot",
+      category: "Prompting",
       flow: examples.find((example) => example.name === "Memory Chatbot"),
     },
     {
-      bg: "linear-gradient(145deg,  #388295 0%, #52B0C4 50%, #7CAB64 100%)",
+      bg: "radial-gradient(ellipse at top right, #f599fe, #de8afa, #9a5af7)",
       spiralImage: vectorRagSpiral,
       icon: "Database",
-      category: "Vector RAG",
+      category: "RAG",
       flow: examples.find((example) => example.name === "Vector Store RAG"),
     },
     {
-      bg: "linear-gradient(145deg, #DB52C2 0%, #DC4F88 50%, #FFA395 100%)",
+      bg: "radial-gradient(ellipse at top left, #ed93f5, #e0bae9, #a5f0af)",
       spiralImage: multiAgentSpiral,
       icon: "Bot",
       category: "Agents",

src/frontend/src/modals/templatesModal/components/navComponent/index.tsx

@@ -20,7 +20,7 @@ export function Nav({ categories, currentTab, setCurrentTab }: NavProps) {
   const isMobile = useIsMobile();
 
   return (
-    <Sidebar collapsible={isMobile ? "icon" : "none"}>
+    <Sidebar collapsible={isMobile ? "icon" : "none"} className="max-w-[230px]">
       <SidebarContent className="gap-0 p-2">
         <div
           className={cn("relative flex items-center gap-2 px-2 py-3 md:px-4")}
@@ -33,11 +33,11 @@ export function Nav({ categories, currentTab, setCurrentTab }: NavProps) {
           />
           <div
             className={cn(
-              "flex h-8 shrink-0 items-center rounded-md text-lg font-semibold leading-none tracking-tight text-primary outline-none ring-ring transition-[margin,opa] duration-200 ease-linear focus-visible:ring-1 [&>svg]:size-4 [&>svg]:shrink-0",
+              "text-base-semibold flex h-8 shrink-0 items-center rounded-md leading-none tracking-tight text-primary outline-none ring-ring transition-[margin,opa] duration-200 ease-linear focus-visible:ring-1 [&>svg]:size-4 [&>svg]:shrink-0",
               "group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0",
             )}
           >
-            Categories
+            Templates
           </div>
         </div>
 

src/frontend/src/modals/templatesModal/index.tsx

@@ -32,9 +32,9 @@ export default function TemplatesModal({
       ],
     },
     {
-      title: "Usecase",
+      title: "Methodology",
       items: [
-        { title: "Chatbots", icon: "MessagesSquare", id: "chatbots" },
+        { title: "Prompting", icon: "MessagesSquare", id: "chatbots" },
         { title: "RAG", icon: "Database", id: "rag" },
         { title: "Agents", icon: "Bot", id: "agents" },
       ],

src/frontend/tests/extended/features/starter-projects.spec.ts

@@ -21,7 +21,7 @@ test("user must be able to interact with starter projects", async ({
     modalCount = await page.getByTestId("modal-title")?.count();
   }
 
-  expect(page.getByText("Start from scratch")).toBeVisible();
+  expect(page.getByText("Start from scratch", { exact: true })).toBeVisible();
   expect(page.getByRole("button", { name: "Blank Flow" })).toBeVisible();
 
   await page.getByTestId("side_nav_options_all-templates").click();
@@ -48,9 +48,9 @@ test("user must be able to interact with starter projects", async ({
 
   await page.waitForTimeout(500);
 
-  await page.getByTestId(`side_nav_options_chatbots`).click();
+  await page.getByTestId(`side_nav_options_prompting`).click();
   await page.waitForTimeout(500);
-  expect(page.getByTestId(`category_title_chatbots`)).toBeVisible();
+  expect(page.getByTestId(`category_title_prompting`)).toBeVisible();
 
   await page.getByTestId(`side_nav_options_rag`).click();
   await page.waitForTimeout(500);

src/frontend/tests/extended/features/twoEdges.spec.ts

@@ -29,7 +29,7 @@ test("user should be able to see multiple edges and interact with them", async (
   }
   await page.waitForTimeout(1000);
 
-  await page.getByText("Vector RAG", { exact: true }).last().click();
+  await page.getByText("Vector Store RAG", { exact: true }).last().click();
   await page.waitForTimeout(3000);
   await page.getByText("Retriever", { exact: true }).first().isVisible();
   await page.getByText("Search Results", { exact: true }).first().isVisible();