3 files changed, 36 insertions, 96 deletions

diff --git a/src/client/components/OfflineBanner.tsx b/src/client/components/OfflineBanner.tsx
index bf94908..b33fc14 100644
--- a/src/client/components/OfflineBanner.tsx
+++ b/src/client/components/OfflineBanner.tsx
@@ -1,3 +1,5 @@
+import { faWifi } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { useSync } from "../stores";
 
 export function OfflineBanner() {
@@ -13,20 +15,11 @@ export function OfflineBanner() {
 			aria-live="polite"
 			className="bg-slate text-white py-2 px-4 text-sm flex items-center justify-center gap-2"
 		>
-			<svg
+			<FontAwesomeIcon
+				icon={faWifi}
 				className="w-4 h-4 text-warning"
-				fill="none"
-				stroke="currentColor"
-				viewBox="0 0 24 24"
 				aria-hidden="true"
-			>
-				<path
-					strokeLinecap="round"
-					strokeLinejoin="round"
-					strokeWidth={2}
-					d="M18.364 5.636a9 9 0 010 12.728m0 0l-2.829-2.829m2.829 2.829L21 21M15.536 8.464a5 5 0 010 7.072m0 0l-2.829-2.829m-4.243 2.829a4.978 4.978 0 01-1.414-2.83m-1.414 5.658a9 9 0 01-2.167-9.238m7.824 2.167a1 1 0 111.414 1.414m-1.414-1.414L3 3m8.293 8.293l1.414 1.414"
-				/>
-			</svg>
+			/>
 			<span>
 				You're offline. Changes will sync when you reconnect.
 				{pendingCount > 0 && (
diff --git a/src/client/components/SyncButton.tsx b/src/client/components/SyncButton.tsx
index 82a6c68..1c214ad 100644
--- a/src/client/components/SyncButton.tsx
+++ b/src/client/components/SyncButton.tsx
@@ -1,3 +1,5 @@
+import { faArrowsRotate, faSpinner } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { useSync } from "../stores";
 
 export function SyncButton() {
@@ -24,44 +26,20 @@ export function SyncButton() {
 		>
 			{isSyncing ? (
 				<>
-					<svg
+					<FontAwesomeIcon
+						icon={faSpinner}
 						className="w-4 h-4 animate-spin"
-						fill="none"
-						viewBox="0 0 24 24"
 						aria-hidden="true"
-					>
-						<circle
-							className="opacity-25"
-							cx="12"
-							cy="12"
-							r="10"
-							stroke="currentColor"
-							strokeWidth="4"
-						/>
-						<path
-							className="opacity-75"
-							fill="currentColor"
-							d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"
-						/>
-					</svg>
+					/>
 					<span>Syncing...</span>
 				</>
 			) : (
 				<>
-					<svg
+					<FontAwesomeIcon
+						icon={faArrowsRotate}
 						className="w-4 h-4"
-						fill="none"
-						stroke="currentColor"
-						viewBox="0 0 24 24"
 						aria-hidden="true"
-					>
-						<path
-							strokeLinecap="round"
-							strokeLinejoin="round"
-							strokeWidth={2}
-							d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"
-						/>
-					</svg>
+					/>
 					<span>Sync</span>
 				</>
 			)}
diff --git a/src/client/components/SyncStatusIndicator.tsx b/src/client/components/SyncStatusIndicator.tsx
index 0f555ca..dd1a77d 100644
--- a/src/client/components/SyncStatusIndicator.tsx
+++ b/src/client/components/SyncStatusIndicator.tsx
@@ -1,3 +1,11 @@
+import {
+	faCircle,
+	faCircleCheck,
+	faCircleXmark,
+	faClock,
+	faSpinner,
+} from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { useSync } from "../stores";
 import { SyncStatus } from "../sync";
 
@@ -39,85 +47,46 @@ export function SyncStatusIndicator() {
 	const getStatusIcon = () => {
 		if (!isOnline) {
 			return (
-				<svg
+				<FontAwesomeIcon
+					icon={faCircle}
 					className="w-3.5 h-3.5"
-					fill="currentColor"
-					viewBox="0 0 20 20"
 					aria-hidden="true"
-				>
-					<circle cx="10" cy="10" r="4" />
-				</svg>
+				/>
 			);
 		}
 		if (isSyncing) {
 			return (
-				<svg
+				<FontAwesomeIcon
+					icon={faSpinner}
 					className="w-3.5 h-3.5 animate-spin"
-					fill="none"
-					viewBox="0 0 24 24"
 					aria-hidden="true"
-				>
-					<circle
-						className="opacity-25"
-						cx="12"
-						cy="12"
-						r="10"
-						stroke="currentColor"
-						strokeWidth="4"
-					/>
-					<path
-						className="opacity-75"
-						fill="currentColor"
-						d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"
-					/>
-				</svg>
+				/>
 			);
 		}
 		if (status === SyncStatus.Error) {
 			return (
-				<svg
+				<FontAwesomeIcon
+					icon={faCircleXmark}
 					className="w-3.5 h-3.5"
-					fill="currentColor"
-					viewBox="0 0 20 20"
 					aria-hidden="true"
-				>
-					<path
-						fillRule="evenodd"
-						d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z"
-						clipRule="evenodd"
-					/>
-				</svg>
+				/>
 			);
 		}
 		if (pendingCount > 0) {
 			return (
-				<svg
+				<FontAwesomeIcon
+					icon={faClock}
 					className="w-3.5 h-3.5"
-					fill="currentColor"
-					viewBox="0 0 20 20"
 					aria-hidden="true"
-				>
-					<path
-						fillRule="evenodd"
-						d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-12a1 1 0 10-2 0v4a1 1 0 00.293.707l2.828 2.829a1 1 0 101.415-1.415L11 9.586V6z"
-						clipRule="evenodd"
-					/>
-				</svg>
+				/>
 			);
 		}
 		return (
-			<svg
+			<FontAwesomeIcon
+				icon={faCircleCheck}
 				className="w-3.5 h-3.5"
-				fill="currentColor"
-				viewBox="0 0 20 20"
 				aria-hidden="true"
-			>
-				<path
-					fillRule="evenodd"
-					d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
-					clipRule="evenodd"
-				/>
-			</svg>
+			/>
 		);
 	};