feat: refresh workbench visual layout

src/features/map/core/components/notice-presentation.tsx

@@ -9,11 +9,11 @@ import {
 import type { MapNoticeOptions, MapNoticeTone } from "./notice-types";
 
 const toneClassNames: Record<MapNoticeTone, string> = {
-  info: "acrylic-panel text-slate-900",
-  success: "acrylic-panel text-slate-900",
-  warning: "acrylic-panel text-slate-900",
-  error: "acrylic-panel text-slate-900",
-  loading: "acrylic-panel text-slate-900"
+  info: "glass-transient text-slate-900",
+  success: "glass-transient text-slate-900",
+  warning: "glass-transient text-slate-900",
+  error: "glass-transient text-slate-900",
+  loading: "glass-transient text-slate-900"
 };
 
 const iconClassNames: Record<MapNoticeTone, string> = {
@@ -55,7 +55,11 @@ export function MapNoticeContent({
       <MapNoticeBody
         title={title}
         message={message}
-        action={actionLabel && onAction ? <MapNoticeAction label={actionLabel} onClick={onAction} /> : null}
+        action={
+          actionLabel && onAction ? (
+            <MapNoticeAction label={actionLabel} onClick={onAction} />
+          ) : null
+        }
       />
     </MapNoticeFrame>
   );
@@ -80,13 +84,22 @@ function MapNoticeFrame({ tone, children }: { tone: MapNoticeTone; children: Rea
         toneClassNames[tone]
       )}
     >
-      <span className={cn("absolute bottom-0 left-0 top-0 w-1", noticeAccentClassNames[tone])} aria-hidden="true" />
+      <span
+        className={cn("absolute bottom-0 left-0 top-0 w-1", noticeAccentClassNames[tone])}
+        aria-hidden="true"
+      />
       {children}
     </div>
   );
 }
 
-function MapNoticeIcon({ tone, icon: Icon }: { tone: MapNoticeTone; icon: ReturnType<typeof getNoticeIcon> }) {
+function MapNoticeIcon({
+  tone,
+  icon: Icon
+}: {
+  tone: MapNoticeTone;
+  icon: ReturnType<typeof getNoticeIcon>;
+}) {
   return (
     <span
       className={cn(
@@ -96,7 +109,11 @@ function MapNoticeIcon({ tone, icon: Icon }: { tone: MapNoticeTone; icon: Return
         noticeIconSurfaceClassNames[tone]
       )}
     >
-      <Icon size={17} aria-hidden="true" className={tone === "loading" ? "animate-spin" : undefined} />
+      <Icon
+        size={17}
+        aria-hidden="true"
+        className={tone === "loading" ? "animate-spin" : undefined}
+      />
     </span>
   );
 }
@@ -112,8 +129,12 @@ function MapNoticeBody({
 }) {
   return (
     <span className="min-w-0 flex-1">
-      {title ? <span className="block text-sm font-semibold leading-5 text-slate-950">{title}</span> : null}
-      <span className={cn("block text-sm leading-5 text-slate-600", title && "mt-0.5")}>{message}</span>
+      {title ? (
+        <span className="block text-sm font-semibold leading-5 text-slate-950">{title}</span>
+      ) : null}
+      <span className={cn("block text-sm leading-5 text-slate-600", title && "mt-0.5")}>
+        {message}
+      </span>
       {action}
     </span>
   );
@@ -124,7 +145,10 @@ function MapNoticeAction({ label, onClick }: { label: string; onClick: () => voi
     <button
       type="button"
       onClick={onClick}
-      className={cn("mt-2 inline-flex h-7 items-center justify-center border border-blue-100 bg-blue-50 px-2.5 text-xs font-semibold text-blue-700 transition hover:bg-blue-100", MAP_COMPACT_RADIUS_CLASS_NAME)}
+      className={cn(
+        "mt-2 inline-flex h-7 items-center justify-center border border-blue-100 bg-blue-50 px-2.5 text-xs font-semibold text-blue-700 transition hover:bg-blue-100",
+        MAP_COMPACT_RADIUS_CLASS_NAME
+      )}
     >
       {label}
     </button>