fix ui style

features/profile/components/organizer-stats-panel.tsx

@@ -1,3 +1,4 @@
+import { BadgeCheck, Star } from "lucide-react";
 import type { OrganizerTrust } from "@/server/services/trust.service";
 
 interface OrganizerStatsPanelProps {
@@ -47,7 +48,8 @@ export function OrganizerStatsPanel({ trust }: OrganizerStatsPanelProps) {
               className="inline-flex items-center gap-1 rounded-full bg-primary-100 px-2.5 py-0.5 text-[11px] font-bold uppercase tracking-wide text-primary-800"
               title="Identitas organizer telah diverifikasi (KTP & rekening)"
             >
-              ✅ Verified Organizer
+              <BadgeCheck size={12} strokeWidth={2} aria-hidden />
+              Verified Organizer
             </span>
           )}
           {isTripLeader && (
@@ -83,7 +85,21 @@ export function OrganizerStatsPanel({ trust }: OrganizerStatsPanelProps) {
         />
         <Stat
           label="Rating"
-          value={avgRating != null ? `${avgRating} ★` : "—"}
+          value={
+            avgRating != null ? (
+              <span className="inline-flex items-center gap-1">
+                {avgRating}
+                <Star
+                  size={14}
+                  strokeWidth={2}
+                  fill="currentColor"
+                  aria-hidden
+                />
+              </span>
+            ) : (
+              "—"
+            )
+          }
           subtitle={
             reviewCount > 0
               ? `${reviewCount} ulasan`
@@ -107,8 +123,15 @@ export function OrganizerStatsPanel({ trust }: OrganizerStatsPanelProps) {
                   key={star}
                   className="flex items-center gap-2 text-xs"
                 >
-                  <span className="w-8 shrink-0 font-medium text-neutral-600">
-                    {star} ★
+                  <span className="flex w-8 shrink-0 items-center gap-0.5 font-medium text-neutral-600">
+                    {star}
+                    <Star
+                      size={11}
+                      strokeWidth={2}
+                      fill="currentColor"
+                      aria-hidden
+                      className="text-amber-500"
+                    />
                   </span>
                   <div className="h-2 flex-1 overflow-hidden rounded-full bg-neutral-100">
                     <div
@@ -138,7 +161,7 @@ const TONE_CLASSES = {
 
 interface StatProps {
   label: string;
-  value: string;
+  value: React.ReactNode;
   subtitle?: string;
   tone: keyof typeof TONE_CLASSES;
 }

features/profile/components/profile-editor.tsx

@@ -2,6 +2,7 @@
 
 import { useState } from "react";
 import { useRouter } from "next/navigation";
+import { ArrowUpRight } from "lucide-react";
 import { updateProfileAction } from "@/features/profile/actions";
 import { LIMITS } from "@/lib/limits";
 import { VIBES, vibeMeta } from "@/lib/vibe";
@@ -102,9 +103,10 @@ export function ProfileEditor({ userId, initial }: ProfileEditorProps) {
               href={`/u/${userId}`}
               target="_blank"
               rel="noopener noreferrer"
-              className="rounded-lg border border-neutral-200 px-3 py-1.5 text-xs font-medium text-neutral-600 hover:bg-neutral-50"
+              className="inline-flex items-center gap-1 rounded-lg border border-neutral-200 px-3 py-1.5 text-xs font-medium text-neutral-600 hover:bg-neutral-50"
             >
-              Lihat publik ↗
+              Lihat publik
+              <ArrowUpRight size={13} strokeWidth={1.75} aria-hidden />
             </a>
             <button
               type="button"
@@ -324,9 +326,10 @@ export function ProfileEditor({ userId, initial }: ProfileEditorProps) {
             href={`/u/${userId}`}
             target="_blank"
             rel="noopener noreferrer"
-            className="rounded-xl border border-neutral-200 px-4 py-2.5 text-sm font-medium text-neutral-700 hover:bg-neutral-50"
+            className="inline-flex items-center gap-1 rounded-xl border border-neutral-200 px-4 py-2.5 text-sm font-medium text-neutral-700 hover:bg-neutral-50"
           >
-            Lihat publik ↗
+            Lihat publik
+            <ArrowUpRight size={14} strokeWidth={1.75} aria-hidden />
           </a>
         </div>
       </form>

features/profile/components/user-card.tsx

@@ -1,5 +1,6 @@
 import Image from "next/image";
 import Link from "next/link";
+import { MapPin, BadgeCheck } from "lucide-react";
 import { vibeMeta } from "@/lib/vibe";
 import type { Vibe } from "@/app/generated/prisma/enums";
 
@@ -48,17 +49,19 @@ export function UserCard({
             {name}
           </p>
           {profile?.city && (
-            <p className="truncate text-[11px] text-neutral-500 sm:text-xs">
-              📍 {profile.city}
+            <p className="flex items-center gap-1 truncate text-[11px] text-neutral-500 sm:text-xs">
+              <MapPin size={11} strokeWidth={1.75} aria-hidden className="shrink-0" />
+              {profile.city}
             </p>
           )}
           <div className="mt-1 flex flex-wrap gap-1">
             {isVerifiedOrganizer && (
               <span
-                className="inline-flex items-center gap-0.5 rounded-full bg-primary-100 px-1.5 py-0.5 text-[10px] font-bold uppercase tracking-wide text-primary-800"
+                className="inline-flex items-center gap-1 rounded-full bg-primary-100 px-1.5 py-0.5 text-[10px] font-bold uppercase tracking-wide text-primary-800"
                 title="Organizer terverifikasi"
               >
-                ✅ Organizer
+                <BadgeCheck size={11} strokeWidth={2} aria-hidden />
+                Organizer
               </span>
             )}
             {profile?.vibe && (