From 181df91500d09880d49a5282ae345d7d2b187258 Mon Sep 17 00:00:00 2001
From: Gabriel Luiz Freitas Almeida <gabriel@logspace.ai>
Date: Sat, 10 Jun 2023 16:52:09 -0300
Subject: [PATCH] =?UTF-8?q?=F0=9F=8E=A8=20style(menuBar):=20replace=20hero?=
 =?UTF-8?q?icons=20with=20lucide-react=20icons=20and=20refactor=20code=20t?=
 =?UTF-8?q?o=20improve=20readability=20=E2=9C=A8=20feat(menuBar):=20add=20?=
 =?UTF-8?q?support=20for=20custom=20emoji=20and=20color=20for=20each=20flo?=
 =?UTF-8?q?w=20This=20commit=20replaces=20the=20heroicons=20with=20lucide-?=
 =?UTF-8?q?react=20icons=20to=20improve=20the=20consistency=20of=20the=20i?=
 =?UTF-8?q?con=20set=20used=20in=20the=20application.=20The=20code=20has?=
 =?UTF-8?q?=20also=20been=20refactored=20to=20improve=20readability.=20Add?=
 =?UTF-8?q?itionally,=20support=20for=20custom=20emoji=20and=20color=20for?=
 =?UTF-8?q?=20each=20flow=20has=20been=20added=20to=20improve=20the=20user?=
 =?UTF-8?q?=20experience.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../MainPage/components/menuBar/index.tsx     | 70 ++++++++++---------
 1 file changed, 38 insertions(+), 32 deletions(-)

diff --git a/src/frontend/src/pages/MainPage/components/menuBar/index.tsx b/src/frontend/src/pages/MainPage/components/menuBar/index.tsx
index f8a1ccce9..b19dabbf3 100644
--- a/src/frontend/src/pages/MainPage/components/menuBar/index.tsx
+++ b/src/frontend/src/pages/MainPage/components/menuBar/index.tsx
@@ -1,6 +1,7 @@
 import React, { useContext } from "react";
 import { TabsContext } from "../../../../contexts/tabsContext";
 import { PopUpContext } from "../../../../contexts/popUpContext";
+import { Save, Edit, Upload, Download, Code, Plus } from "lucide-react";
 import {
   Menubar,
   MenubarContent,
@@ -10,14 +11,7 @@ import {
   MenubarRadioGroup,
   MenubarRadioItem,
 } from "../../../../components/ui/menubar";
-import {
-  ArrowUpTrayIcon,
-  ArrowDownTrayIcon,
-  CodeBracketSquareIcon,
-  CloudArrowUpIcon,
-  PencilSquareIcon,
-  PlusIcon,
-} from "@heroicons/react/24/outline";
+
 import RenameLabel from "../../../../components/ui/rename-label";
 import _ from "lodash";
 import ImportModal from "../../../../modals/importModal";
@@ -48,37 +42,49 @@ export const MenuBar = ({ activeTab, setRename, rename, flows, tabIndex }) => {
       setErrorData(err);
     }
   }
+  let current_flow = flows[tabIndex];
+
+  // robot emoji
+  let emoji = current_flow.style?.emoji || "🤖";
+  let color = current_flow.style?.color || "bg-blue-200";
 
   return (
     <div className="flex gap-2 justify-start items-center w-96">
       <span className="text-2xl ml-4">⛓️</span>
       {activeTab === "myflow" && (
         <div className="flex gap-2 p-2">
+          <div className="flex gap-2 items-center">
+            <span
+              className={
+                "rounded-md w-10 h-10 flex items-center justify-center text-2xl " +
+                color
+              }
+            >
+              {emoji}
+            </span>
+            <RenameLabel
+              value={flows[tabIndex].name}
+              setValue={(value) => {
+                if (value !== "") {
+                  let newFlow = _.cloneDeep(flows[tabIndex]);
+                  newFlow.name = value;
+                  updateFlow(newFlow);
+                }
+              }}
+              rename={rename}
+              setRename={setRename}
+            />
+          </div>
           <Menubar>
             <MenubarMenu>
-              <MenubarTrigger className="px-2">
-                <b>
-                  <RenameLabel
-                    value={flows[tabIndex].name}
-                    setValue={(value) => {
-                      if (value !== "") {
-                        let newFlow = _.cloneDeep(flows[tabIndex]);
-                        newFlow.name = value;
-                        updateFlow(newFlow);
-                      }
-                    }}
-                    rename={rename}
-                    setRename={setRename}
-                  />
-                </b>
-              </MenubarTrigger>
+              <MenubarTrigger className="px-2">File</MenubarTrigger>
               <MenubarContent>
                 <MenubarItem
                   onClick={() => {
                     openPopUp(<ImportModal />);
                   }}
                 >
-                  <ArrowUpTrayIcon className="w-4 h-4 mr-2" />
+                  <Upload className="w-4 h-4 mr-2" />
                   Import
                 </MenubarItem>
                 <MenubarItem
@@ -86,15 +92,15 @@ export const MenuBar = ({ activeTab, setRename, rename, flows, tabIndex }) => {
                     openPopUp(<ExportModal />);
                   }}
                 >
-                  <ArrowDownTrayIcon className="w-4 h-4 mr-2" />
+                  <Download className="w-4 h-4 mr-2" />
                   Export
                 </MenubarItem>
                 <MenubarItem
                   onClick={() => {
-                    openPopUp(<ApiModal flowName={flows[tabIndex].name} />);
+                    openPopUp(<ApiModal flow={flows[tabIndex]} />);
                   }}
                 >
-                  <CodeBracketSquareIcon className="w-4 h-4 mr-2" />
+                  <Code className="w-4 h-4 mr-2" />
                   Code
                 </MenubarItem>
               </MenubarContent>
@@ -107,7 +113,7 @@ export const MenuBar = ({ activeTab, setRename, rename, flows, tabIndex }) => {
                     handleSaveFlow(flows[tabIndex]);
                   }}
                 >
-                  <CloudArrowUpIcon className="w-4 h-4 mr-2" />
+                  <Save className="w-4 h-4 mr-2" />
                   Save
                 </MenubarItem>
                 <MenubarItem
@@ -115,7 +121,7 @@ export const MenuBar = ({ activeTab, setRename, rename, flows, tabIndex }) => {
                     setRename(true);
                   }}
                 >
-                  <PencilSquareIcon className="w-4 h-4 mr-2" />
+                  <Edit className="w-4 h-4 mr-2" />
                   Rename
                 </MenubarItem>
               </MenubarContent>
@@ -132,7 +138,7 @@ export const MenuBar = ({ activeTab, setRename, rename, flows, tabIndex }) => {
                   {flows.map((flow, idx) => {
                     return (
                       <MenubarRadioItem value={idx.toString()}>
-                        {flow.name}
+                        {emoji} {flow.name}
                       </MenubarRadioItem>
                     );
                   })}
@@ -142,7 +148,7 @@ export const MenuBar = ({ activeTab, setRename, rename, flows, tabIndex }) => {
                     handleAddFlow();
                   }}
                 >
-                  <PlusIcon className="w-4 h-4 mr-2" />
+                  <Plus className="w-4 h-4 mr-2" />
                   Add Flow
                 </MenubarItem>
               </MenubarContent>