Add MainPage style constants

src/frontend/src/constants.tsx

@@ -148,3 +148,25 @@ export const EXPORT_CODE_DIALOG =
  */
 export const INPUT_STYLE =
   " focus:ring-1 focus:ring-offset-1 focus:ring-ring focus:outline-none ";
+
+
+/**
+ * The base text for subtitle of code dialog
+ * @constant
+ */
+export const COLUMN_DIV_STYLE =
+  " w-full h-full flex overflow-auto flex-col bg-muted px-16 ";
+
+/**
+ * The base text for subtitle of code dialog
+ * @constant
+ */
+export const NAV_DISPLAY_STYLE =
+  " w-full flex justify-between py-12 pb-2 px-6 ";
+
+/**
+ * The base text for subtitle of code dialog
+ * @constant
+ */
+export const BUTTON_DIV_STYLE =
+  " flex gap-2 ";

src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx

@@ -82,7 +82,7 @@ const NodeToolbarComponent = (props) => {
             </ShadTooltip>
           )}
 
-          {/*
+          
           <Menu as="div" className="relative inline-block text-left z-100">
             <button className="hover:dark:hover:bg-[#242f47] text-gray-700 transition-all duration-500 ease-in-out dark:bg-gray-800 dark:text-gray-300 shadow-md relative -ml-px inline-flex items-center bg-white px-2 py-2 ring-1 ring-inset ring-gray-300 hover:bg-muted focus:z-10 rounded-r-md">
               <div>
@@ -173,7 +173,7 @@ const NodeToolbarComponent = (props) => {
                 </Menu.Items>
               </Transition>
             </button>
-          </Menu> */}
+          </Menu>
         </span>
       </div>
     </>

src/frontend/src/pages/MainPage/index.tsx

@@ -1,24 +1,26 @@
 import { useContext, useEffect } from "react";
-import { Download, Upload, Plus, Home, ExternalLink } from "lucide-react";
+import { COLUMN_DIV_STYLE, NAV_DISPLAY_STYLE } from "../../constants";
-import { TabsContext } from "../../contexts/tabsContext";
+
-import { Button } from "../../components/ui/button";
+  import { Download, Upload, Plus, Home, ExternalLink } from "lucide-react";
-import { Link, useNavigate } from "react-router-dom";
+  import { TabsContext } from "../../contexts/tabsContext";
-import { CardComponent } from "../../components/cardComponent";
+  import { Button } from "../../components/ui/button";
-export default function HomePage() {
+  import { Link, useNavigate } from "react-router-dom";
-  const { flows, setTabId, downloadFlows, uploadFlows, addFlow, removeFlow } =
+  import { CardComponent } from "../../components/cardComponent";
+  export default function HomePage() {
+    const { flows, setTabId, downloadFlows, uploadFlows, addFlow, removeFlow } =
     useContext(TabsContext);
-  useEffect(() => {
+    useEffect(() => {
-    setTabId("");
+      setTabId("");
-  }, []);
+    }, []);
-  const navigate = useNavigate();
+    const navigate = useNavigate();
   return (
-    <div className="w-full h-full flex overflow-auto flex-col bg-muted px-16">
+    <div className={`${ COLUMN_DIV_STYLE }`} >
-      <div className="w-full flex justify-between py-12 pb-2 px-6">
+      <div className={`${ NAV_DISPLAY_STYLE }`}>
-        <span className="text-2xl flex items-center justify-center gap-2 font-semibold">
+        <span className=" text-2xl flex items-center justify-center gap-2 font-semibold ">
-          <Home className="w-6" />
+          <Home className=" w-6 " />
           My Projects
         </span>
-        <div className="flex gap-2">
+        <div className="hi flex gap-2">
           <Button
             variant="primary"
             onClick={() => {