consistent icons across tables

frontend/src/components/tables/EPGsTable.jsx

@@ -22,6 +22,7 @@ import {
 } from '@mantine/core';
 import { notifications } from '@mantine/notifications';
 import { IconSquarePlus } from '@tabler/icons-react';
+import { RefreshCcw, SquareMinus, SquarePen } from 'lucide-react';
 
 const EPGsTable = () => {
   const [epg, setEPG] = useState(null);
@@ -124,23 +125,23 @@ const EPGsTable = () => {
           color="yellow.5" // Red color for delete actions
           onClick={() => editEPG(row.original)}
         >
-          <EditIcon fontSize="small" /> {/* Small icon size */}
+          <SquarePen size="18" /> {/* Small icon size */}
         </ActionIcon>
         <ActionIcon
           variant="transparent"
           size="sm" // Makes the button smaller
-          color="red.5" // Red color for delete actions
+          color="red.9" // Red color for delete actions
           onClick={() => deleteEPG(row.original.id)}
         >
-          <DeleteIcon fontSize="small" /> {/* Small icon size */}
+          <SquareMinus size="18" /> {/* Small icon size */}
         </ActionIcon>
         <ActionIcon
           variant="transparent"
           size="sm" // Makes the button smaller
-          // color="blue.5" // Red color for delete actions
+          color="blue.5" // Red color for delete actions
           onClick={() => refreshEPG(row.original.id)}
         >
-          <RefreshIcon fontSize="small" /> {/* Small icon size */}
+          <RefreshCcw size="18" /> {/* Small icon size */}
         </ActionIcon>
       </>
     ),

frontend/src/components/tables/M3UsTable.jsx

@@ -8,7 +8,6 @@ import {
   SwapVert as SwapVertIcon,
   Check as CheckIcon,
   Close as CloseIcon,
-  Refresh as RefreshIcon,
 } from '@mui/icons-material';
 import {
   LiveTv as LiveTvIcon,
@@ -45,6 +44,8 @@ import {
   ArrowDown,
   ArrowUpDown,
   TvMinimalPlay,
+  SquarePen,
+  RefreshCcw,
 } from 'lucide-react';
 import {
   IconArrowDown,
@@ -193,15 +194,15 @@ const Example = () => {
             editPlaylist(row.original);
           }}
         >
-          <EditIcon fontSize="sm" />
+          <SquarePen size="18" />
         </ActionIcon>
         <ActionIcon
           variant="transparent"
           size="sm"
-          color="red.5"
+          color="red.9"
           onClick={() => deletePlaylist(row.original.id)}
         >
-          <DeleteIcon fontSize="sm" />
+          <SquareMinus size="18" />
         </ActionIcon>
         <ActionIcon
           variant="transparent"
@@ -209,7 +210,7 @@ const Example = () => {
           color="blue.5"
           onClick={() => refreshPlaylist(row.original.id)}
         >
-          <RefreshIcon fontSize="sm" />
+          <RefreshCcw size="18" />
         </ActionIcon>
       </>
     ),

frontend/src/components/tables/StreamProfilesTable.jsx

@@ -24,6 +24,7 @@ import {
   useMantineTheme,
 } from '@mantine/core';
 import { IconSquarePlus } from '@tabler/icons-react';
+import { SquareMinus, SquarePen } from 'lucide-react';
 
 const StreamProfiles = () => {
   const [profile, setProfile] = useState(null);
@@ -140,14 +141,14 @@ const StreamProfiles = () => {
     data: streamProfiles,
     enablePagination: false,
     enableRowVirtualization: true,
-    enableRowSelection: true,
+    // enableRowSelection: true,
     renderTopToolbar: false,
-    onRowSelectionChange: setRowSelection,
+    // onRowSelectionChange: setRowSelection,
     onSortingChange: setSorting,
     state: {
       isLoading,
       sorting,
-      rowSelection,
+      // rowSelection,
     },
     rowVirtualizerInstanceRef, //optional
     rowVirtualizerOptions: { overscan: 5 }, //optionally customize the row virtualizer
@@ -160,17 +161,18 @@ const StreamProfiles = () => {
         <ActionIcon
           variant="transparent"
           color="yellow.5"
+          size="sm"
           onClick={() => editStreamProfile(row.original)}
         >
-          <EditIcon fontSize="small" /> {/* Small icon size */}
+          <SquarePen size="18" /> {/* Small icon size */}
         </ActionIcon>
         <ActionIcon
           variant="transparent"
-          size="small"
-          color="red.5"
+          size="sm"
+          color="red.9"
           onClick={() => deleteStreamProfile(row.original.id)}
         >
-          <DeleteIcon fontSize="small" /> {/* Small icon size */}
+          <SquareMinus fontSize="small" /> {/* Small icon size */}
         </ActionIcon>
       </>
     ),

frontend/src/components/tables/UserAgentsTable.jsx

@@ -32,6 +32,7 @@ import {
   IconSortAscendingNumbers,
   IconSquarePlus,
 } from '@tabler/icons-react';
+import { SquareMinus, SquarePen } from 'lucide-react';
 
 const UserAgentsTable = () => {
   const [userAgent, setUserAgent] = useState(null);
@@ -191,14 +192,14 @@ const UserAgentsTable = () => {
     data: userAgents,
     enablePagination: false,
     enableRowVirtualization: true,
-    enableRowSelection: true,
+    // enableRowSelection: true,
     renderTopToolbar: false,
-    onRowSelectionChange: setRowSelection,
+    // onRowSelectionChange: setRowSelection,
     onSortingChange: setSorting,
     state: {
       isLoading,
       sorting,
-      rowSelection,
+      // rowSelection,
     },
     rowVirtualizerInstanceRef, //optional
     rowVirtualizerOptions: { overscan: 5 }, //optionally customize the row virtualizer
@@ -210,21 +211,21 @@ const UserAgentsTable = () => {
       <>
         <ActionIcon
           variant="transparent"
-          size="small" // Makes the button smaller
+          size="sm" // Makes the button smaller
           color="yellow.5" // Red color for delete actions
           onClick={() => {
             editUserAgent(row.original);
           }}
         >
-          <EditIcon fontSize="small" /> {/* Small icon size */}
+          <SquarePen size="18" /> {/* Small icon size */}
         </ActionIcon>
         <ActionIcon
           variant="transparent"
-          size="small" // Makes the button smaller
-          color="error" // Red color for delete actions
+          size="sm"
+          color="red.9" // Red color for delete actions
           onClick={() => deleteUserAgent(row.original.id)}
         >
-          <DeleteIcon fontSize="small" /> {/* Small icon size */}
+          <SquareMinus size="18" /> {/* Small icon size */}
         </ActionIcon>
       </>
     ),