emojis are gross

Author: izadoesdev

apps/dashboard/components/charts/annotation-modal.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import { EyeIcon, EyeSlashIcon, PlusIcon, XIcon } from "@phosphor-icons/react";
+import { Loader2 } from "lucide-react";
 import { useEffect, useState } from "react";
 import { useHotkeys } from "react-hotkeys-hook";
 import { Badge } from "@/components/ui/badge";
@@ -373,9 +374,7 @@ export function AnnotationModal(props: AnnotationModalProps) {
 						disabled={!text.trim() || loading}
 						onClick={handleSubmit}
 					>
-						{loading && (
-							<div className="mr-2 size-4 animate-spin rounded-full border-2 border-current border-t-transparent" />
-						)}
+						{loading ? <Loader2 className="mr-2 size-4 animate-spin" /> : null}
 						{isCreate ? "Create annotation" : "Save changes"}
 					</Button>
 				</DialogFooter>

apps/dashboard/components/charts/metrics-chart-with-annotations.tsx

@@ -151,7 +151,7 @@ export function MetricsChartWithAnnotations({
 			loading: "Creating annotation...",
 			success: () => {
 				refetchAnnotations();
-				return "Annotation created successfully! 🎉";
+				return "Annotation created successfully!";
 			},
 			error: (err) => {
 				console.error("Failed to create annotation:", err);
@@ -228,7 +228,7 @@ export function MetricsChartWithAnnotations({
 			/>
 
 			{/* Edit Annotation Modal */}
-			{editingAnnotation && (
+			{editingAnnotation ? (
 				<AnnotationModal
 					annotation={editingAnnotation}
 					isOpen={true}
@@ -237,7 +237,7 @@ export function MetricsChartWithAnnotations({
 					onClose={closeEditModal}
 					onSubmit={handleSaveAnnotation}
 				/>
-			)}
+			) : null}
 		</>
 	);
 }

apps/dashboard/components/ui/checkbox.tsx

@@ -13,7 +13,7 @@ function Checkbox({
 	return (
 		<CheckboxPrimitive.Root
 			className={cn(
-				'peer size-4 shrink-0 rounded-[4px] border border-input outline-none transition-shadow focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 data-[state=checked]:border-primary data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground dark:bg-input/30 dark:data-[state=checked]:bg-primary dark:aria-invalid:ring-destructive/40',
+				'peer cursor-pointer size-4 shrink-0 overflow-hidden disabled:data-[state=checked]:border-foreground rounded-sm data-[state=checked]:border-blue-700 data-[state=unchecked]:badge-angled-rectangle-gradient data-[state=checked]:blue-angled-rectangle-gradient border border-accent-brighter outline-none transition-all focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground data-[state=unchecked]:bg-input dark:data-[state=unchecked]:bg-input/80 dark:aria-invalid:ring-destructive/40',
 				className
 			)}
 			data-slot="checkbox"

apps/dashboard/components/ui/input.tsx

@@ -50,10 +50,10 @@ const Input = forwardRef<HTMLInputElement, InputProps>(
 				<input
 					ref={ref}
 					className={cn(
-						'peer flex h-9 text-[13px] placeholder:text-[13px] w-full min-w-0 rounded border px-3 py-1 text-sm outline-none transition-all selection:bg-primary selection:text-primary-foreground file:inline-flex file:h-7 file:border-0 file:bg-transparent file:font-medium file:text-foreground file:text-sm placeholder:text-muted disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50',
-						'bg-accent/40 dark:bg-input/30',
-						'focus-visible:bg-background focus-visible:border-primary/50 focus-visible:blue-angled-rectangle-gradient',
-						'aria-invalid:border-destructive aria-invalid:red-angled-rectangle-gradient',
+						'peer flex h-9 text-[13px] placeholder:text-[13px] w-full min-w-0 rounded-sm border border-accent-brighter px-3 py-1 text-sm outline-none transition-all selection:bg-primary selection:text-primary-foreground file:inline-flex file:h-7 file:border-0 file:bg-transparent file:font-medium file:text-foreground file:text-sm placeholder:text-muted disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50',
+						'bg-input dark:bg-input/80',
+						'focus-visible:bg-background focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:blue-angled-rectangle-gradient',
+						'aria-invalid:border-destructive aria-invalid:ring-destructive/20 aria-invalid:red-angled-rectangle-gradient dark:aria-invalid:ring-destructive/40',
 						variant === 'ghost' &&
 							'border-transparent bg-transparent hover:bg-accent/30 focus-visible:bg-accent/50',
 						className
@@ -64,7 +64,6 @@ const Input = forwardRef<HTMLInputElement, InputProps>(
 					onBlur={handleBlur}
 					{...props}
 				/>
-				{/* Animated focus indicator line */}
 				{showFocusIndicator && (
 					<motion.span
 						className={cn(