fix ui style

features/trip/components/create-trip-form.tsx

@@ -2,6 +2,14 @@
 
 import { useMemo, useState } from "react";
 import { useRouter } from "next/navigation";
+import {
+  ArrowLeft,
+  ArrowRight,
+  Check,
+  X,
+  CircleAlert,
+  Users,
+} from "lucide-react";
 import { DateRangeField, TimeField } from "@/components/shared/date-picker";
 import { createTripAction } from "@/features/trip/actions";
 import { ImageUrlInput } from "@/features/trip/components/image-url-input";
@@ -367,9 +375,10 @@ export function CreateTripForm({ isVerifiedOrganizer }: CreateTripFormProps) {
             type="button"
             onClick={goBack}
             disabled={step === 1 || loading}
-            className="rounded-xl border border-neutral-200 bg-white px-4 py-2.5 text-sm font-semibold text-neutral-700 transition-colors hover:bg-neutral-50 disabled:cursor-not-allowed disabled:opacity-40"
+            className="inline-flex items-center gap-1 rounded-xl border border-neutral-200 bg-white px-4 py-2.5 text-sm font-semibold text-neutral-700 transition-colors hover:bg-neutral-50 disabled:cursor-not-allowed disabled:opacity-40"
           >
-            ← Kembali
+            <ArrowLeft size={15} strokeWidth={2} aria-hidden />
+            Kembali
           </button>
 
           {isLastStep ? (
@@ -388,9 +397,10 @@ export function CreateTripForm({ isVerifiedOrganizer }: CreateTripFormProps) {
             <button
               type="button"
               onClick={goNext}
-              className="rounded-xl bg-primary-600 px-5 py-2.5 text-sm font-bold text-white shadow-lg shadow-primary-600/20 transition-colors hover:bg-primary-700"
+              className="inline-flex items-center gap-1 rounded-xl bg-primary-600 px-5 py-2.5 text-sm font-bold text-white shadow-lg shadow-primary-600/20 transition-colors hover:bg-primary-700"
             >
-              Lanjut →
+              Lanjut
+              <ArrowRight size={15} strokeWidth={2} aria-hidden />
             </button>
           )}
         </div>
@@ -442,7 +452,11 @@ function Stepper({
                     : "cursor-not-allowed"
                 }`}
               >
-                {isCompleted ? "✓" : s.id}
+                {isCompleted ? (
+                  <Check size={14} strokeWidth={3} aria-hidden />
+                ) : (
+                  s.id
+                )}
               </button>
               <span
                 className={`ml-2 hidden text-xs font-semibold sm:inline ${
@@ -942,7 +956,7 @@ function ItineraryBuilder({
                           aria-label="Hapus aktivitas"
                           className="self-end rounded-lg px-2 py-1.5 text-neutral-400 hover:bg-red-50 hover:text-red-500 sm:self-center"
                         >
-                          ✕
+                          <X size={16} strokeWidth={2} aria-hidden />
                         </button>
                       </div>
                     </li>
@@ -1032,14 +1046,7 @@ function StepSchedule({
           </label>
           <div className="relative">
             <span className="absolute left-3 top-1/2 -translate-y-1/2 text-neutral-400">
-              <svg
-                xmlns="http://www.w3.org/2000/svg"
-                viewBox="0 0 20 20"
-                fill="currentColor"
-                className="h-4 w-4"
-              >
-                <path d="M7 8a3 3 0 100-6 3 3 0 000 6zM14.5 9a2.5 2.5 0 100-5 2.5 2.5 0 000 5zM1.615 16.428a1.224 1.224 0 01-.569-1.175 6.002 6.002 0 0111.908 0c.058.467-.172.92-.57 1.174A9.953 9.953 0 017 18a9.953 9.953 0 01-5.385-1.572zM14.5 16h-.106c.07-.297.088-.611.048-.933a7.47 7.47 0 00-1.588-3.755 4.502 4.502 0 015.874 2.636.818.818 0 01-.36.98A7.465 7.465 0 0114.5 16z" />
-              </svg>
+              <Users size={16} strokeWidth={1.75} aria-hidden />
             </span>
             <input
               id="maxParticipants"
@@ -1084,8 +1091,9 @@ function StepSchedule({
           />
         </div>
         {blockedByVerification && (
-          <p className="mt-2 text-xs font-medium text-amber-700">
-            ⚠️ Trip berbayar butuh verifikasi organizer terlebih dahulu.
+          <p className="mt-2 flex items-center gap-1.5 text-xs font-medium text-amber-700">
+            <CircleAlert size={14} strokeWidth={2} aria-hidden />
+            Trip berbayar butuh verifikasi organizer terlebih dahulu.
           </p>
         )}
       </div>