REFACTOR: Align icon imports;

REFACTOR: Remove obsolete `EditButton` component

frontend/src/components/Auth/AuthModal.tsx

@@ -1,6 +1,6 @@
 import React, { useState } from "react";
 import { ToggleButton } from "../Input/Button";
-import { LogIn as LogInIcon, User as UserIcon } from "lucide-react";
+import { LogInIcon, UserIcon } from "lucide-react";
 import LoginForm from "./LoginForm";
 import RegisterForm from "./RegisterForm";
 import ForgotPasswordForm from "./ForgotPasswordForm";

frontend/src/components/Auth/LoginForm.tsx

@@ -1,6 +1,6 @@
 import React, { useState } from "react";
 import Input from "../Input/Input";
-import Button, { ToggleButton } from "../Input/Button";
+import Button from "../Input/Button";
 import { useAuth } from "../../context/AuthContext";
 import GoogleLogin from "./OAuth";
 import { CircleHelp as ForgotIcon } from "lucide-react";

frontend/src/components/Input/Button.tsx

@@ -23,23 +23,6 @@ const Button: React.FC<ButtonProps> = ({
   );
 };
 
-interface EditButtonProps extends ButtonProps {}
-
-export const EditButton: React.FC<EditButtonProps> = ({
-  children = "",
-  extraClasses = "",
-  onClick,
-}) => {
-  return (
-    <button
-      className={`${extraClasses} p-[0.5em] bg-yellow-500 hover:bg-black rounded-[3rem] border-2 border-white shadow-lg transition-all duration-300`}
-      onClick={onClick}
-    >
-      {children}
-    </button>
-  );
-};
-
 interface ToggleButtonProps extends ButtonProps {
   toggled?: boolean;
 }

frontend/src/components/Input/SearchBar.tsx

@@ -1,6 +1,6 @@
 import React, { useState } from "react";
 import Input from "./Input";
-import { Search as SearchIcon } from "lucide-react";
+import { SearchIcon } from "lucide-react";
 import { useNavigate } from "react-router-dom";
 
 interface SearchBarProps {

frontend/src/components/Layout/Footer.tsx

@@ -1,4 +1,4 @@
-import { Mail as MailIcon } from "lucide-react";
+import { MailIcon } from "lucide-react";
 import { useState } from "react";
 
 const Footer = () => {

frontend/src/components/Layout/ListRow.tsx

@@ -1,6 +1,6 @@
 import {
-  ArrowLeft as ArrowLeftIcon,
-  ArrowRight as ArrowRightIcon,
+  ArrowLeftIcon,
+  ArrowRightIcon,
 } from "lucide-react";
 import React, {
   forwardRef,

frontend/src/components/Navigation/Navbar.tsx

@@ -2,9 +2,9 @@ import React, { useEffect } from "react";
 import Logo from "../Layout/Logo";
 import Button, { ToggleButton } from "../Input/Button";
 import {
-  LogIn as LogInIcon,
-  LogOut as LogOutIcon,
-  Settings as SettingsIcon,
+  LogInIcon,
+  LogOutIcon,
+  SettingsIcon,
   Radio as LiveIcon,
 } from "lucide-react";
 import SearchBar from "../Input/SearchBar";

frontend/src/components/Navigation/Sidebar.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from "react";
-import { Sidebar as SidebarIcon } from "lucide-react";
+import { SidebarIcon } from "lucide-react";
 import { useNavigate } from "react-router-dom";
 import { useAuth } from "../../context/AuthContext";
 import { useSidebar } from "../../context/SidebarContext";

frontend/src/components/Settings/ThemeSetting.tsx

@@ -1,38 +1,38 @@
 import React from "react";
-import { Sun, Moon, Droplet, Leaf, Flame } from "lucide-react";
+import { SunIcon, MoonIcon, DropletIcon, LeafIcon, FlameIcon } from "lucide-react";
 import { useTheme } from "../../context/ThemeContext";
 
 const themeConfig = {
   light: {
-    icon: Sun,
+    icon: SunIcon,
     color: "text-yellow-400",
     background: "bg-white",
     hoverBg: "hover:bg-gray-100",
     label: "Light Theme",
   },
   dark: {
-    icon: Moon,
+    icon: MoonIcon,
     color: "text-white",
     background: "bg-gray-800",
     hoverBg: "hover:bg-gray-700",
     label: "Dark Theme",
   },
   blue: {
-    icon: Droplet,
+    icon: DropletIcon,
     color: "text-blue-500",
     background: "bg-blue-50",
     hoverBg: "hover:bg-blue-100",
     label: "Blue Theme",
   },
   green: {
-    icon: Leaf,
+    icon: LeafIcon,
     color: "text-green-500",
     background: "bg-green-50",
     hoverBg: "hover:bg-green-100",
     label: "Green Theme",
   },
   orange: {
-    icon: Flame,
+    icon: FlameIcon,
     color: "text-orange-500",
     background: "bg-orange-50",
     hoverBg: "hover:bg-orange-100",

frontend/src/components/Stream/ChatPanel.tsx

@@ -6,7 +6,7 @@ import { useAuthModal } from "../../hooks/useAuthModal";
 import { useAuth } from "../../context/AuthContext";
 import { useSocket } from "../../context/SocketContext";
 import { useChat } from "../../context/ChatContext";
-import { ArrowLeftFromLineIcon, ArrowRightFromLine } from "lucide-react";
+import { ArrowLeftFromLineIcon, ArrowRightFromLineIcon } from "lucide-react";
 
 interface ChatMessage {
   chatter_username: string;
@@ -149,7 +149,7 @@ const ChatPanel: React.FC<ChatPanelProps> = ({
         onClick={toggleChat}
         className={`group cursor-pointer p-2 hover:bg-gray-800 rounded-md absolute top-[1vh] left-[1vw] ${showChat ? "" : "delay-[0.75s] -translate-x-[3.3vw]"} text-[1rem] text-purple-500 flex items-center flex-nowrap z-[50] duration-[0.3s] transition-all`}
       >
-        {showChat ? <ArrowRightFromLine /> : <ArrowLeftFromLineIcon />}
+        {showChat ? <ArrowRightFromLineIcon /> : <ArrowLeftFromLineIcon />}
 
         <small className={`absolute ${showChat ? "right-0 group-hover:-right-[4vw]" : "left-0 group-hover:-left-[4vw]"} p-1 rounded-md group-hover:bg-white/10 w-fit opacity-0 group-hover:opacity-100 text-white transition-all`}>
           Press C