feat: Update styling for various components

- Updated hover and transition effects for several components
- Removed unnecessary CSS classes and styles
- Adjusted colors and text styles for better visual consistency

src/frontend/src/CustomNodes/GenericNode/index.tsx

@@ -161,7 +161,7 @@ export default function GenericNode({
                       !validationStatus || isBuilding
                         ? "w-4 h-4 rounded-full  bg-yellow-500 opacity-100"
                         : "w-4 h-4 rounded-full bg-gray-500 opacity-0 hidden animate-spin",
-                      "absolute w-4 hover:text-gray-500 hover:dark:text-gray-300 transition-all ease-in-out duration-200"
+                      "absolute w-4 hover:text-gray-500 transition-all ease-in-out duration-200"
                     )}
                   ></div>
                 </div>

src/frontend/src/alerts/alertDropDown/components/singleAlertComponent/index.tsx

@@ -30,7 +30,7 @@ export default function SingleAlert({
         >
           <div className="flex-shrink-0">
             <XCircle
-              className="h-5 w-5 text-red-400 dark:text-red-50"
+              className="h-5 w-5 text-red-400"
               aria-hidden="true"
             />
           </div>
@@ -77,7 +77,7 @@ export default function SingleAlert({
         >
           <div className="flex-shrink-0">
             <Info
-              className="h-5 w-5 text-blue-400 dark:text-blue-50"
+              className="h-5 w-5 text-blue-400 "
               aria-hidden="true"
             />
           </div>
@@ -123,7 +123,7 @@ export default function SingleAlert({
         >
           <div className="flex-shrink-0">
             <CheckCircle2
-              className="h-5 w-5 text-green-400 dark:text-green-50"
+              className="h-5 w-5 text-green-400 "
               aria-hidden="true"
             />
           </div>

src/frontend/src/alerts/error/index.tsx

@@ -44,7 +44,7 @@ export default function ErrorAlert({
         <div className="flex">
           <div className="flex-shrink-0">
             <XCircle
-              className="h-5 w-5 text-red-400 dark:text-red-50"
+              className="h-5 w-5 text-red-400"
               aria-hidden="true"
             />
           </div>

src/frontend/src/alerts/notice/index.tsx

@@ -41,7 +41,7 @@ export default function NoticeAlert({
         <div className="flex">
           <div className="flex-shrink-0">
             <Info
-              className="h-5 w-5 text-blue-400 dark:text-blue-50"
+              className="h-5 w-5 text-blue-400 "
               aria-hidden="true"
             />
           </div>

src/frontend/src/alerts/success/index.tsx

@@ -39,7 +39,7 @@ export default function SuccessAlert({
         <div className="flex">
           <div className="flex-shrink-0">
             <CheckCircle2
-              className="h-5 w-5 text-green-400 dark:text-green-50"
+              className="h-5 w-5 text-green-400 "
               aria-hidden="true"
             />
           </div>

src/frontend/src/components/chatComponent/buildTrigger/index.tsx

@@ -158,7 +158,7 @@ export default function BuildTrigger({
     >
       <div className={`fixed right-4` + (isBuilt ? " bottom-20" : " bottom-4")}>
         <div
-          className={`${eventClick} flex justify-center align-center py-1 px-3 w-12 h-12 rounded-full shadow-md shadow-[#0000002a] hover:shadow-[#00000032] bg-[#E2E7EE] dark:border-gray-600 cursor-pointer`}
+          className={`${eventClick} flex justify-center align-center py-1 px-3 w-12 h-12 rounded-full shadow-md shadow-[#0000002a] hover:shadow-[#00000032] bg-[#E2E7EE]  cursor-pointer`}
           onClick={() => {
             handleBuild(flow);
           }}

src/frontend/src/components/chatComponent/chatTrigger/index.tsx

@@ -33,7 +33,7 @@ export default function ChatTrigger({ open, setOpen, isBuilt }) {
       <div className="absolute bottom-4 right-3">
         <div
           className="flex justify-center align-center py-1 px-3 w-12 h-12 rounded-full shadow-md shadow-[#0000002a] hover:shadow-[#00000032]
-          bg-[#E2E7EE] dark:border-gray-600 cursor-pointer"
+          bg-[#E2E7EE]  cursor-pointer"
           onClick={handleClick}
         >
           <button>

src/frontend/src/components/codeAreaComponent/index.tsx

@@ -69,7 +69,7 @@ export default function CodeAreaComponent({
           }}
         >
           {!editNode && (
-            <ExternalLink className="w-6 h-6 hover:text-ring dark:text-gray-300 ml-3" />
+            <ExternalLink className="w-6 h-6 hover:text-ring  ml-3" />
           )}
         </button>
       </div>

src/frontend/src/components/headerComponent/index.tsx

@@ -75,7 +75,7 @@ export default function Header() {
             href="https://github.com/logspace-ai/langflow"
             target="_blank"
             rel="noreferrer"
-            className="inline-flex shadow-sm items-center justify-center text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:opacity-50 disabled:pointer-events-none ring-offset-background text-gray-600 dark:text-gray-300 border border-input hover:bg-accent hover:text-accent-foreground h-9 px-3 pr-0 rounded-md"
+            className="inline-flex shadow-sm items-center justify-center text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:opacity-50 disabled:pointer-events-none ring-offset-background text-gray-600  border border-input hover:bg-accent hover:text-accent-foreground h-9 px-3 pr-0 rounded-md"
           >
             <FaGithub className="h-5 w-5 mr-2" />
             Star
@@ -102,7 +102,7 @@ export default function Header() {
 
           <Separator orientation="vertical" />
           <button
-            className="text-gray-600 hover:text-gray-500 dark:text-gray-300 dark:hover:text-gray-200"
+            className="text-gray-600 hover:text-gray-500 "
             onClick={() => {
               setDark(!dark);
             }}

src/frontend/src/components/promptComponent/index.tsx

@@ -74,7 +74,7 @@ export default function PromptAreaComponent({
           }}
         >
           {!editNode && (
-            <ExternalLink className="w-6 h-6 hover:text-ring dark:text-gray-300" />
+            <ExternalLink className="w-6 h-6 hover:text-ring " />
           )}
         </button>
       </div>

src/frontend/src/components/textAreaComponent/index.tsx

@@ -77,7 +77,7 @@ export default function TextAreaComponent({
           }}
         >
           {!editNode && (
-            <ExternalLink className="w-6 h-6 hover:text-ring dark:text-gray-300" />
+            <ExternalLink className="w-6 h-6 hover:text-ring " />
           )}
         </button>
       </div>

src/frontend/src/modals/ApiModal/index.tsx

@@ -88,7 +88,7 @@ export default function ApiModal({ flow }: { flow: FlowType }) {
           <DialogTitle className="flex items-center">
             <span className="pr-2">Code</span>
             <Code2
-              className="h-6 w-6 text-gray-800 pl-1 dark:text-white"
+              className="h-6 w-6 text-gray-800 pl-1 "
               aria-hidden="true"
             />
           </DialogTitle>

src/frontend/src/modals/EditNodeModal/index.tsx

@@ -90,8 +90,8 @@ export default function EditNodeModal({ data }: { data: NodeDataType }) {
           <DialogDescription>
             {data.node?.description}
             <div className="flex pt-4">
-              <Variable className="w-5 h-5 pe-1 text-gray-700 stroke-2 dark:text-slate-200"></Variable>
+              <Variable className="w-5 h-5 pe-1 text-gray-700 stroke-2 "></Variable>
-              <span className="text-sm font-semibold text-gray-800 dark:text-white">
+              <span className="text-sm font-semibold text-gray-800 ">
                 Parameters
               </span>
             </div>

src/frontend/src/modals/chatModal/chatInput/index.tsx

@@ -62,12 +62,12 @@ export default function ChatInput({
         <button disabled={lockChat} onClick={() => sendMessage()}>
           {lockChat ? (
             <Lock
-              className="h-5 w-5 text-gray-500  dark:hover:text-gray-300 animate-pulse"
+              className="h-5 w-5 text-gray-500   animate-pulse"
               aria-hidden="true"
             />
           ) : (
             <Send
-              className="h-5 w-5 text-gray-500 hover:text-gray-600 dark:hover:text-gray-300"
+              className="h-5 w-5 text-gray-500 hover:text-gray-600 "
               aria-hidden="true"
             />
           )}

src/frontend/src/modals/chatModal/chatMessage/index.tsx

@@ -61,7 +61,7 @@ export default function ChatMessage({
           </div>
         )}
         {chat.isSend && (
-          <User2 className="w-6 h-6 -mb-1 text-gray-800 dark:text-gray-200" />
+          <User2 className="w-6 h-6 -mb-1 text-gray-800 " />
         )}
       </div>
       {!chat.isSend ? (
@@ -72,7 +72,7 @@ export default function ChatMessage({
                 onClick={() => setHidden((prev) => !prev)}
                 className="absolute -top-1 -left-2 cursor-pointer"
               >
-                <MessageCircle className="w-5 h-5 animate-bounce dark:text-white" />
+                <MessageCircle className="w-5 h-5 animate-bounce " />
               </div>
             )}
             {chat.thought && chat.thought !== "" && !hidden && (
@@ -151,7 +151,7 @@ export default function ChatMessage({
         </div>
       ) : (
         <div className="w-full flex items-center">
-          <div className="text-start inline-block px-3 text-gray-600 dark:text-white">
+          <div className="text-start inline-block px-3 text-gray-600 ">
             <span
               className="text-muted-foreground "
               dangerouslySetInnerHTML={{

src/frontend/src/modals/codeAreaModal/index.tsx

@@ -52,7 +52,7 @@ export default function CodeAreaModal({
           <DialogTitle className="flex items-center">
             <span className="pr-2">Edit Code</span>
             <TerminalSquare
-              className="h-6 w-6 text-gray-800 pl-1 dark:text-white"
+              className="h-6 w-6 text-gray-800 pl-1 "
               aria-hidden="true"
             />
           </DialogTitle>

src/frontend/src/modals/genericModal/index.tsx

@@ -55,7 +55,7 @@ export default function GenericModal({
           <DialogTitle className="flex items-center">
             <span className="pr-2">{myModalTitle}</span>
             <FileText
-              className="h-6 w-6 text-gray-800 pl-1 dark:text-white"
+              className="h-6 w-6 text-gray-800 pl-1 "
               aria-hidden="true"
             />
           </DialogTitle>

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

@@ -14,8 +14,8 @@ export default function DisclosureComponent({
           <div>
             <Disclosure.Button className="select-none bg-muted w-full flex justify-between items-center -mt-px px-3 py-2 border-y border-y-input">
               <div className="flex gap-4">
-                <Icon size={22} className="text-gray-800 dark:text-white/80" />
+                <Icon size={22} className="text-gray-800 " />
-                <span className="flex items-center text-sm text-gray-800 dark:text-white/80 font-medium">
+                <span className="flex items-center text-sm text-gray-800  font-medium">
                   {title}
                 </span>
               </div>

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

@@ -182,11 +182,11 @@ export default function ExtraSidebar() {
                               );
                             }}
                           >
-                            <div className="flex w-full justify-between text-sm px-3 py-1 bg-white dark:bg-gray-800 items-center border-dashed border-gray-400 dark:border-gray-600 border-l-0 rounded-md rounded-l-none border">
+                            <div className="flex w-full justify-between text-sm px-3 py-1 bg-white items-center border-dashed border-gray-400  border-l-0 rounded-md rounded-l-none border">
-                              <span className="text-black dark:text-white w-full pr-1 truncate text-xs">
+                              <span className="text-black  w-full pr-1 truncate text-xs">
                                 {data[d][t].display_name}
                               </span>
-                              <Menu className="w-4 h-6  text-gray-400 dark:text-gray-600" />
+                              <Menu className="w-4 h-6  text-gray-400 " />
                             </div>
                           </div>
                         </div>