Use react-bs icons, remove bootstrap-icons css

crates/librqbit/webui/src/components/DeleteTorrentModal.tsx

@@ -1,7 +1,7 @@
 import { useContext, useState } from "react";
 import { Button, Modal, Form, Spinner } from "react-bootstrap";
 import { AppContext, APIContext } from "../context";
-import { Error } from "../rqbit-web";
+import { ErrorWithLabel } from "../rqbit-web";
 import { ErrorComponent } from "./ErrorComponent";
 
 export const DeleteTorrentModal: React.FC<{
@@ -13,7 +13,7 @@ export const DeleteTorrentModal: React.FC<{
     return null;
   }
   const [deleteFiles, setDeleteFiles] = useState(false);
-  const [error, setError] = useState<Error | null>(null);
+  const [error, setError] = useState<ErrorWithLabel | null>(null);
   const [deleting, setDeleting] = useState(false);
 
   const ctx = useContext(AppContext);

crates/librqbit/webui/src/components/ErrorComponent.tsx

@@ -1,8 +1,8 @@
 import { Alert } from "react-bootstrap";
-import { Error } from "../rqbit-web";
+import { ErrorWithLabel } from "../rqbit-web";
 
 export const ErrorComponent = (props: {
-  error: Error | null;
+  error: ErrorWithLabel | null;
   remove?: () => void;
 }) => {
   let { error, remove } = props;

crates/librqbit/webui/src/components/FileSelectionModal.tsx

@@ -4,12 +4,12 @@ import { AddTorrentResponse, AddTorrentOptions } from "../api-types";
 import { AppContext, APIContext } from "../context";
 import { ErrorComponent } from "./ErrorComponent";
 import { formatBytes } from "../helper/formatBytes";
-import { Error } from "../rqbit-web";
+import { ErrorWithLabel } from "../rqbit-web";
 
 export const FileSelectionModal = (props: {
   onHide: () => void;
   listTorrentResponse: AddTorrentResponse | null;
-  listTorrentError: Error | null;
+  listTorrentError: ErrorWithLabel | null;
   listTorrentLoading: boolean;
   data: string | File;
 }) => {
@@ -23,7 +23,7 @@ export const FileSelectionModal = (props: {
 
   const [selectedFiles, setSelectedFiles] = useState<number[]>([]);
   const [uploading, setUploading] = useState(false);
-  const [uploadError, setUploadError] = useState<Error | null>(null);
+  const [uploadError, setUploadError] = useState<ErrorWithLabel | null>(null);
   const [unpopularTorrent, setUnpopularTorrent] = useState(false);
   const [outputFolder, setOutputFolder] = useState<string>("");
   const ctx = useContext(AppContext);

crates/librqbit/webui/src/components/IconButton.tsx

@@ -1,11 +1,11 @@
 import { MouseEventHandler } from "react";
 
 export const IconButton: React.FC<{
-  className: string;
   onClick: () => void;
   disabled?: boolean;
   color?: string;
-}> = ({ className, onClick, disabled, color }) => {
+  children: any;
+}> = ({ onClick, disabled, color, children }) => {
   const onClickStopPropagation: MouseEventHandler<HTMLAnchorElement> = (e) => {
     e.stopPropagation();
     if (disabled) {
@@ -13,11 +13,14 @@ export const IconButton: React.FC<{
     }
     onClick();
   };
+  const colorClassName = color ? `text-${color}` : "";
   return (
     <a
-      className={`bi ${className} p-1`}
+      className={`p-1 ${colorClassName}`}
       onClick={onClickStopPropagation}
       href="#"
-    ></a>
+    >
+      {children}
+    </a>
   );
 };

crates/librqbit/webui/src/components/TorrentActions.tsx

@@ -4,6 +4,7 @@ import { TorrentStats } from "../api-types";
 import { AppContext, APIContext, RefreshTorrentStatsContext } from "../context";
 import { IconButton } from "./IconButton";
 import { DeleteTorrentModal } from "./DeleteTorrentModal";
+import { BsPauseCircle, BsPlayCircle, BsXCircle } from "react-icons/bs";
 
 export const TorrentActions: React.FC<{
   id: number;
@@ -70,26 +71,18 @@ export const TorrentActions: React.FC<{
     <Row>
       <Col>
         {canUnpause && (
-          <IconButton
-            className="bi-play-circle"
-            onClick={unpause}
-            disabled={disabled}
-            color="success"
-          />
+          <IconButton onClick={unpause} disabled={disabled} color="success">
+            <BsPlayCircle />
+          </IconButton>
         )}
         {canPause && (
-          <IconButton
-            className="bi-pause-circle"
-            onClick={pause}
-            disabled={disabled}
-          />
+          <IconButton onClick={pause} disabled={disabled}>
+            <BsPauseCircle />
+          </IconButton>
         )}
-        <IconButton
-          className="bi-x-circle"
-          onClick={startDeleting}
-          disabled={disabled}
-          color="danger"
-        />
+        <IconButton onClick={startDeleting} disabled={disabled} color="danger">
+          <BsXCircle />
+        </IconButton>
         <DeleteTorrentModal id={id} show={deleting} onHide={cancelDeleting} />
       </Col>
     </Row>

crates/librqbit/webui/src/components/TorrentRow.tsx

@@ -30,10 +30,10 @@ export const TorrentRow: React.FC<{
   const progressBarVariant = error
     ? "danger"
     : finished
-    ? "success"
-    : state == STATE_INITIALIZING
-    ? "warning"
-    : "primary";
+      ? "success"
+      : state == STATE_INITIALIZING
+        ? "warning"
+        : "primary";
 
   const formatPeersString = () => {
     let peer_stats = statsResponse?.live?.snapshot.peer_stats;

crates/librqbit/webui/src/components/UploadButton.tsx

@@ -5,7 +5,7 @@ import {
   ErrorDetails as ApiErrorDetails,
 } from "../api-types";
 import { APIContext } from "../context";
-import { Error } from "../rqbit-web";
+import { ErrorWithLabel } from "../rqbit-web";
 import { FileSelectionModal } from "./FileSelectionModal";
 
 export const UploadButton: React.FC<{
@@ -18,7 +18,8 @@ export const UploadButton: React.FC<{
   const [loading, setLoading] = useState(false);
   const [listTorrentResponse, setListTorrentResponse] =
     useState<AddTorrentResponse | null>(null);
-  const [listTorrentError, setListTorrentError] = useState<Error | null>(null);
+  const [listTorrentError, setListTorrentError] =
+    useState<ErrorWithLabel | null>(null);
   const API = useContext(APIContext);
 
   // Get the torrent file list if there's data.