chore: replace MUI icons - 4 (#17748)

1. Replaced CloudUploadOutlined with CloudUploadIcon in FileUpload.tsx
2. Replaced DeleteOutline with TrashIcon in:
    - WorkspaceTopbar.tsx
    - TokensPageView.tsx
    - GroupPage.tsx
3. Replaced FolderOutlined with FolderIcon in FileUpload.tsx

site/src/components/FileUpload/FileUpload.tsx

@@ -1,11 +1,9 @@
 import { type Interpolation, type Theme, css } from "@emotion/react";
-import UploadIcon from "@mui/icons-material/CloudUploadOutlined";
-import RemoveIcon from "@mui/icons-material/DeleteOutline";
-import FileIcon from "@mui/icons-material/FolderOutlined";
 import CircularProgress from "@mui/material/CircularProgress";
 import IconButton from "@mui/material/IconButton";
 import { Stack } from "components/Stack/Stack";
 import { useClickable } from "hooks/useClickable";
+import { CloudUploadIcon, FolderIcon, TrashIcon } from "lucide-react";
 import { type DragEvent, type FC, type ReactNode, useRef } from "react";
 
 export interface FileUploadProps {
@@ -44,12 +42,12 @@ export const FileUpload: FC<FileUploadProps> = ({
 				alignItems="center"
 			>
 				<Stack direction="row" alignItems="center">
-					<FileIcon />
+					<FolderIcon className="size-icon-sm" />
 					<span>{file.name}</span>
 				</Stack>
 
 				<IconButton title={removeLabel} size="small" onClick={onRemove}>
-					<RemoveIcon />
+					<TrashIcon className="size-icon-sm" />
 				</IconButton>
 			</Stack>
 		);
@@ -68,7 +66,7 @@ export const FileUpload: FC<FileUploadProps> = ({
 						{isUploading ? (
 							<CircularProgress size={32} />
 						) : (
-							<UploadIcon css={styles.icon} />
+							<CloudUploadIcon className="size-16" />
 						)}
 					</div>
 
@@ -166,10 +164,6 @@ const styles = {
 		justifyContent: "center",
 	},
 
-	icon: {
-		fontSize: 64,
-	},
-
 	title: {
 		fontSize: 16,
 		lineHeight: "1",

site/src/components/FullPageLayout/Topbar.tsx

@@ -11,6 +11,7 @@ import {
 	cloneElement,
 	forwardRef,
 } from "react";
+import { cn } from "utils/cn";
 
 export const Topbar: FC<HTMLAttributes<HTMLElement>> = (props) => {
 	const theme = useTheme();
@@ -89,7 +90,7 @@ type TopbarIconProps = HTMLAttributes<HTMLOrSVGElement>;
 
 export const TopbarIcon = forwardRef<HTMLOrSVGElement, TopbarIconProps>(
 	(props: TopbarIconProps, ref) => {
-		const { children, ...restProps } = props;
+		const { children, className, ...restProps } = props;
 		const theme = useTheme();
 
 		return cloneElement(
@@ -101,7 +102,10 @@ export const TopbarIcon = forwardRef<HTMLOrSVGElement, TopbarIconProps>(
 			{
 				...restProps,
 				ref,
-				className: css({ fontSize: 16, color: theme.palette.text.disabled }),
+				className: cn([
+					css({ fontSize: 16, color: theme.palette.text.disabled }),
+					"size-icon-sm",
+				]),
 			},
 		);
 	},