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

6
src/components/call-desk/appointment-form.tsx
View File

@@ -1,10 +1,12 @@
import { useState, useEffect } from 'react';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faCalendarPlus } from '@fortawesome/pro-duotone-svg-icons';
import { faCalendarPlus, faXmark } from '@fortawesome/pro-duotone-svg-icons';
import type { FC, HTMLAttributes } from 'react';
const CalendarPlus02: FC<HTMLAttributes<HTMLOrSVGElement>> = ({ className }) => <FontAwesomeIcon icon={faCalendarPlus} className={className} />;
import { XClose } from '@untitledui/icons';
import { faXmark } from '@fortawesome/pro-duotone-svg-icons';
const XClose: FC<{ className?: string }> = ({ className }) => <FontAwesomeIcon icon={faXmark} className={className} />;
import { Input } from '@/components/base/input/input';
import { Select } from '@/components/base/select/select';
import { TextArea } from '@/components/base/textarea/textarea';

6
src/components/call-desk/call-log.tsx
View File

@@ -1,6 +1,10 @@
import type { FC } from 'react';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faArrowRight } from '@fortawesome/pro-duotone-svg-icons';
import { Badge } from '@/components/base/badges/badges';
import { Button } from '@/components/base/buttons/button';
import { ArrowRight } from '@untitledui/icons';
const ArrowRight: FC<{ className?: string }> = ({ className }) => <FontAwesomeIcon icon={faArrowRight} className={className} />;
import { formatShortDate } from '@/lib/format';
import type { Call, CallDisposition } from '@/types/entities';

5
src/components/call-desk/call-simulator.tsx
View File

@@ -1,4 +1,5 @@
import { PhoneCall01 } from '@untitledui/icons';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faPhoneArrowUpRight } from '@fortawesome/pro-duotone-svg-icons';
import { cx } from '@/utils/cx';
interface CallSimulatorProps {
@@ -19,7 +20,7 @@ export const CallSimulator = ({ onSimulate, isCallActive }: CallSimulatorProps)
: 'cursor-pointer bg-brand-solid hover:bg-brand-solid_hover [&:hover_svg]:animate-[ring-shake_0.5s_ease-in-out]',
)}
>
<PhoneCall01 className="size-5 shrink-0" />
<FontAwesomeIcon icon={faPhoneArrowUpRight} className="size-5 shrink-0" />
{isCallActive ? 'Call in progress...' : 'Simulate Incoming Call'}
</button>
);

6
src/components/call-desk/click-to-call-button.tsx
View File

@@ -1,6 +1,10 @@
import type { FC } from 'react';
import { useState } from 'react';
import { Phone01 } from '@untitledui/icons';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faPhone } from '@fortawesome/pro-duotone-svg-icons';
import { useSetAtom } from 'jotai';
const Phone01: FC<{ className?: string }> = ({ className }) => <FontAwesomeIcon icon={faPhone} className={className} />;
import { Button } from '@/components/base/buttons/button';
import { useSip } from '@/providers/sip-provider';
import { sipCallStateAtom, sipCallerNumberAtom, sipCallUcidAtom } from '@/state/sip-state';

25
src/components/call-desk/incoming-call-card.tsx
View File

@@ -1,5 +1,6 @@
import { useMemo } from 'react';
import { Phone01, PhoneIncoming01, CheckCircle, Mail01, Clock, Stars02 } from '@untitledui/icons';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faPhone, faPhoneArrowDown, faCircleCheck, faEnvelope, faClock, faStars } from '@fortawesome/pro-duotone-svg-icons';
import { Avatar } from '@/components/base/avatar/avatar';
import { Badge } from '@/components/base/badges/badges';
import { SourceTag } from '@/components/shared/source-tag';
@@ -41,11 +42,11 @@ const ActivityIcon = ({ type }: { type: string }) => {
const iconType = activityTypeIcons[type] ?? 'note';
const baseClass = 'size-3.5 shrink-0 text-fg-quaternary';
if (iconType === 'phone') return <Phone01 className={baseClass} />;
if (iconType === 'email') return <Mail01 className={baseClass} />;
if (iconType === 'clock') return <Clock className={baseClass} />;
if (iconType === 'check') return <CheckCircle className={baseClass} />;
return <Clock className={baseClass} />;
if (iconType === 'phone') return <FontAwesomeIcon icon={faPhone} className={baseClass} />;
if (iconType === 'email') return <FontAwesomeIcon icon={faEnvelope} className={baseClass} />;
if (iconType === 'clock') return <FontAwesomeIcon icon={faClock} className={baseClass} />;
if (iconType === 'check') return <FontAwesomeIcon icon={faCircleCheck} className={baseClass} />;
return <FontAwesomeIcon icon={faClock} className={baseClass} />;
};
const dispositionLabels: Record<CallDisposition, string> = {
@@ -80,7 +81,7 @@ export const IncomingCallCard = ({ callState, lead, activities, campaigns, onDis
const IdleState = () => (
<div className="flex flex-col items-center justify-center rounded-2xl border border-secondary bg-secondary p-12 text-center">
<div className="mb-4 animate-pulse">
<Phone01 className="size-12 text-fg-quaternary" />
<FontAwesomeIcon icon={faPhone} className="size-12 text-fg-quaternary" />
</div>
<p className="text-lg text-tertiary">Waiting for incoming call...</p>
</div>
@@ -96,7 +97,7 @@ const RingingState = ({ lead }: { lead: Lead | null }) => {
<div className="relative mb-4">
<div className="absolute inset-0 animate-ping rounded-full bg-brand-solid opacity-20" />
<div className="relative animate-bounce">
<PhoneIncoming01 className="size-12 text-fg-brand-primary" />
<FontAwesomeIcon icon={faPhoneArrowDown} className="size-12 text-fg-brand-primary" />
</div>
</div>
<span className="mb-1 text-xs font-bold uppercase tracking-wider text-brand-secondary">
@@ -158,12 +159,12 @@ const ActiveState = ({
<div className="min-w-0 flex-1">
<h3 className="text-lg font-bold text-primary">{fullName}</h3>
<div className="mt-1 flex items-center gap-1.5">
<Phone01 className="size-3.5 shrink-0 text-fg-quaternary" />
<FontAwesomeIcon icon={faPhone} className="size-3.5 shrink-0 text-fg-quaternary" />
<span className="text-md text-secondary">{phoneDisplay}</span>
</div>
{emailDisplay !== null && (
<div className="mt-0.5 flex items-center gap-1.5">
<Mail01 className="size-3.5 shrink-0 text-fg-quaternary" />
<FontAwesomeIcon icon={faEnvelope} className="size-3.5 shrink-0 text-fg-quaternary" />
<span className="text-sm text-tertiary">{emailDisplay}</span>
</div>
)}
@@ -192,7 +193,7 @@ const ActiveState = ({
{/* AI Insight panel */}
<div className="mt-4 rounded-xl bg-brand-primary p-4">
<div className="mb-2 flex items-center gap-1.5">
<Stars02 className="size-4 text-fg-brand-primary" />
<FontAwesomeIcon icon={faStars} className="size-4 text-fg-brand-primary" />
<span className="text-xs font-bold uppercase tracking-wider text-brand-secondary">
AI Insight
</span>
@@ -252,7 +253,7 @@ const CompletedState = ({ disposition }: { disposition: CallDisposition | null }
return (
<div className="flex flex-col items-center justify-center rounded-2xl bg-success-primary p-8 text-center">
<CheckCircle className="mb-3 size-12 text-fg-success-primary" />
<FontAwesomeIcon icon={faCircleCheck} className="mb-3 size-12 text-fg-success-primary" />
<h3 className="text-lg font-bold text-success-primary">Call Logged</h3>
{disposition !== null && (
<Badge size="md" color="success" className="mt-2">{label}</Badge>

4
src/components/call-desk/worklist-panel.tsx
View File

@@ -4,8 +4,10 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import {
faPhoneArrowDown,
faPhoneArrowUp,
faMagnifyingGlass,
} from '@fortawesome/pro-duotone-svg-icons';
import { SearchLg } from '@untitledui/icons';
const SearchLg: FC<{ className?: string }> = ({ className }) => <FontAwesomeIcon icon={faMagnifyingGlass} className={className} />;
import { Table } from '@/components/application/table/table';
import { Badge } from '@/components/base/badges/badges';
import { Input } from '@/components/base/input/input';