helix-admin/helix-engage
1
0
Fork 0
mirror of https://dev.azure.com/globalhealthx/EMR/_git/helix-engage synced 2026-04-12 02:38:15 +00:00
Code Issues Packages Projects Releases Wiki Activity

refactor: migrate all icons from Untitled UI to FontAwesome Pro Duotone

Browse Source 
Replace all @untitledui/icons imports across 55 files with equivalent
@fortawesome/pro-duotone-svg-icons icons, using FontAwesomeIcon wrappers
(FC<{ className?: string }>) for prop-based usage and inline replacements
for direct JSX usage. Drops unsupported Untitled UI-specific props
(strokeWidth, numeric size). TypeScript compiles clean with no errors.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
saridsa2
2026-03-21 11:07:19 +05:30
parent 3064eeb444
commit 6f40b82579
55 changed files with 289 additions and 120 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
src/components/application/file-upload/file-upload-base.tsx
View File

@@ -1,8 +1,11 @@
import type { ComponentProps, ComponentPropsWithRef } from "react";
import type { ComponentProps, ComponentPropsWithRef, FC } from "react";
import { useId, useRef, useState } from "react";
import type { FileIcon } from "@untitledui/file-icons";
import { FileIcon as FileTypeIcon } from "@untitledui/file-icons";
import { CheckCircle, Trash01, UploadCloud02, XCircle } from "@untitledui/icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faCircleCheck, faTrash, faCloudArrowUp, faCircleXmark } from "@fortawesome/pro-duotone-svg-icons";
const Trash01: FC<{ className?: string }> = ({ className }) => <FontAwesomeIcon icon={faTrash} className={className} />;
import { AnimatePresence, motion } from "motion/react";
import { Button } from "@/components/base/buttons/button";
import { ButtonUtility } from "@/components/base/buttons/button-utility";
@@ -206,7 +209,7 @@ export const FileUploadDropZone = ({
)}
>
<FeaturedIcon color="gray" theme="modern" size="md">
<UploadCloud02 className="size-5" />
<FontAwesomeIcon icon={faCloudArrowUp} className="size-5" />
</FeaturedIcon>
<div className="flex flex-col gap-1 text-center">
@@ -283,13 +286,13 @@ export const FileListItemProgressBar = ({ name, size, progress, failed, type, fi
<hr className="h-3 w-px rounded-t-full rounded-b-full border-none bg-border-primary" />
<div className="flex items-center gap-1">
{isComplete && <CheckCircle className="size-4 stroke-[2.5px] text-fg-success-primary" />}
{isComplete && <FontAwesomeIcon icon={faCircleCheck} className="size-4 text-fg-success-primary" />}
{isComplete && <p className="text-sm font-medium text-success-primary">Complete</p>}
{!isComplete && !failed && <UploadCloud02 className="stroke-[2.5px size-4 text-fg-quaternary" />}
{!isComplete && !failed && <FontAwesomeIcon icon={faCloudArrowUp} className="size-4 text-fg-quaternary" />}
{!isComplete && !failed && <p className="text-sm font-medium text-quaternary">Uploading...</p>}
{failed && <XCircle className="size-4 text-fg-error-primary" />}
{failed && <FontAwesomeIcon icon={faCircleXmark} className="size-4 text-fg-error-primary" />}
{failed && <p className="text-sm font-medium text-error-primary">Failed</p>}
</div>
</div>
@@ -350,8 +353,8 @@ export const FileListItemProgressFill = ({ name, size, progress, failed, type, f
<>
<hr className="h-3 w-px rounded-t-full rounded-b-full border-none bg-border-primary" />
<div className="flex items-center gap-1">
{isComplete && <CheckCircle className="size-4 stroke-[2.5px] text-fg-success-primary" />}
{!isComplete && <UploadCloud02 className="size-4 stroke-[2.5px] text-fg-quaternary" />}
{isComplete && <FontAwesomeIcon icon={faCircleCheck} className="size-4 text-fg-success-primary" />}
{!isComplete && <FontAwesomeIcon icon={faCloudArrowUp} className="size-4 text-fg-quaternary" />}
<p className="text-sm text-tertiary">{progress}%</p>
</div>