feat(settings,admin): every tab and popup in the planner's design

client/src/components/Settings/MapboxPreview.tsx

@@ -1,6 +1,7 @@
 import { useEffect, useRef } from 'react'
 import { isStandardFamily, supportsCustom3d, addCustom3dBuildings, addTerrainAndSky } from '../Map/mapboxSetup'
 import { MAPBOX_DEFAULT_STYLE, normalizeStyleForProvider, type GlMapProvider } from '../Map/glProviders'
+import { fs } from '../shared/DialogShell'
 
 interface Props {
   provider?: GlMapProvider
@@ -83,11 +84,11 @@ export default function GlMapPreview({ provider = 'mapbox-gl', token = '', style
 
   if (!isMapLibre && !token) {
     return (
-      <div className="flex items-center justify-center h-full bg-slate-100 dark:bg-slate-800 text-xs text-slate-500 rounded-lg border border-slate-200 dark:border-slate-700">
+      <div className="flex h-full items-center justify-center bg-surface-tertiary px-4 text-center font-medium text-content-muted" style={fs(12)}>
         Enter a Mapbox access token to preview
       </div>
     )
   }
 
-  return <div ref={containerRef} style={{ width: '100%', height: '100%', borderRadius: '8px', overflow: 'hidden' }} />
+  return <div ref={containerRef} className="h-full w-full overflow-hidden" />
 }