ui improvemnt

apps/edr-freight-web/backoffice/src/components/bookings/NextStepBanner.tsx

@@ -1,32 +1,29 @@
 import { ArrowRight } from "lucide-react";
+import { Alert, Text } from "@mantine/core";
 
 import type { BookingNextStep } from "@/types/booking";
-import { bookingGlass } from "./booking-ui.styles";
-import { cn } from "@/lib/utils";
 
 interface NextStepBannerProps {
   nextStep: BookingNextStep;
-  className?: string;
 }
 
-export function NextStepBanner({ nextStep, className }: NextStepBannerProps) {
+export function NextStepBanner({ nextStep }: NextStepBannerProps) {
   return (
-    <div
-      className={cn(
-        "flex items-start gap-3 rounded-xl px-4 py-3 text-sm",
-        bookingGlass.activeTab,
-        className,
-      )}
-      role="status"
-    >
-      <ArrowRight className="mt-0.5 size-4 shrink-0 text-black" aria-hidden />
-      <div className="min-w-0 space-y-0.5">
-        <p className="font-semibold text-black">
+    <Alert
+      variant="light"
+      color="green"
+      radius="md"
+      icon={<ArrowRight size={16} />}
+      title={
+        <Text size="sm" fw={600}>
           Next: {nextStep.action.replace(/_/g, " ")}
           {nextStep.requiredRole ? ` (${nextStep.requiredRole})` : ""}
-        </p>
-        <p className="text-muted-foreground">{nextStep.description}</p>
-      </div>
-    </div>
+        </Text>
+      }
+    >
+      <Text size="sm" c="dimmed">
+        {nextStep.description}
+      </Text>
+    </Alert>
   );
 }