refactor(frontend): update tailwind and daisyui (#34)

* removed daiyui from config

* updated to tailwind4 and daisyui 5

* changed embedded mode handling

* tailwind config

* fix linting

package.json

@@ -12,6 +12,7 @@
   "dependencies": {
     "@directus/sdk": "^17.0.2",
     "@heroicons/react": "^2.1.1",
+    "@tailwindcss/vite": "^4.0.15",
     "@types/geojson": "^7946.0.10",
     "axios": "^1.6.5",
     "date-fns": "^3.3.1",
@@ -19,7 +20,7 @@
     "react-dom": "^18.2.0",
     "react-rnd": "^10.4.1",
     "react-router-dom": "^6.23.0",
-    "utopia-ui": "^3.0.78"
+    "utopia-ui": "^3.0.81"
   },
   "devDependencies": {
     "@eslint-community/eslint-plugin-eslint-comments": "^4.4.1",
@@ -28,8 +29,7 @@
     "@typescript-eslint/eslint-plugin": "^5.62.0",
     "@typescript-eslint/parser": "^5.62.0",
     "@vitejs/plugin-react": "^4.0.0",
-    "autoprefixer": "^10.4.16",
+    "daisyui": "^5.0.6",
-    "daisyui": "^4.12.23",
     "eslint": "^8.24.0",
     "eslint-config-prettier": "^9.1.0",
     "eslint-config-standard": "^17.1.0",
@@ -46,7 +46,7 @@
     "eslint-plugin-security": "^3.0.1",
     "eslint-plugin-yml": "^1.14.0",
     "postcss": "^8.4.30",
-    "tailwindcss": "^3.3.3",
+    "tailwindcss": "^4.0.15",
     "typescript": "^5.0.2",
     "vite": "^6.2.0",
     "vite-plugin-pwa": "^0.21.1"

src/App.css

@@ -4,7 +4,7 @@
 }
 
 #app-content {
-  height: calc(100dvh - 64px);
+  height: 100%;
 }
 
 .fadeable-div {

src/App.tsx

@@ -64,6 +64,14 @@ function App() {
   const [layerPageRoutes, setLayerPageRoutes] = useState<any>()
   const [loading, setLoading] = useState<boolean>(true)
 
+  const [embedded, setEmbedded] = useState<boolean>(true)
+
+  useEffect(() => {
+    const params = new URLSearchParams(location.search)
+    const embedded = params.get('embedded')
+    embedded !== 'true' && setEmbedded(false)
+  }, [location])
+
   useEffect(() => {
     setPermissionsApiInstance(new permissionsApi())
     setMapApiInstance(new mapApi(window.location.origin))
@@ -134,6 +142,7 @@ function App() {
           <AppShell
             assetsApi={new assetsApi('https://api.utopia-lab.org/assets/')}
             appName={map.name}
+            embedded={embedded}
           >
             <Permissions
               api={permissionsApiInstance}

src/ModalContent.tsx

@@ -35,7 +35,7 @@ export function Welcome1({ clickAction1, map }: ChapterProps) {
           </p>
           <p className='py-1'>Create your personal profile and place it on the map.</p>
           <div className='grid'>
-            <label className='btn place-self-end mt-4' onClick={() => clickAction1!()}>
+            <label className='btn btn-primary place-self-end mt-4' onClick={() => clickAction1!()}>
               Close
             </label>
           </div>

src/index.css

@@ -1,3 +1,8 @@
-@tailwind base;
+@import 'tailwindcss';
-@tailwind components;
+@plugin "daisyui" {
-@tailwind utilities;
+  themes: light --default, dark --prefersdark, valentine, retro, aqua, cyberpunk, caramellatte, abyss, silk;
+}
+
+@theme {
+  --animate-fade: fadeOut 1s ease-in-out;
+}

src/pages/Calendar.tsx

@@ -80,7 +80,7 @@ export const Calendar = () => {
                 className={`cursor-pointer flex items-center justify-center font-semibold h-8 w-8 rounded-full  hover:text-white ${
                   isSameMonth(day, today) ? 'text-current' : 'text-gray-500'
                 } ${!isToday(day) && 'hover:bg-primary-content'} ${
-                  isToday(day) && 'bg-primary !text-white'
+                  isToday(day) && 'bg-primary text-white!'
                 }`}
               >
                 {format(day, 'd')}

src/pages/Landingpage.tsx

@@ -70,7 +70,7 @@ export const Landingpage = () => {
 
   return (
     <MapOverlayPage
-      className={`!rounded-none overflow-y-auto !p-0 fadeable-div flex-none ${isLandingpageVisible ? '' : 'div-hidden'}`}
+      className={`rounded-none! overflow-y-auto p-0! fadeable-div flex-none ${isLandingpageVisible ? '' : 'div-hidden'}`}
       card={false}
     >
       <div className='hero min-h-full text-base'>
@@ -81,7 +81,7 @@ export const Landingpage = () => {
           >
             <div className='min-h-[calc(100vh-60px)] flex flex-row items-center justify-center '>
               <div
-                className={`max-w-md text-center bg-black p-8 m-8 bg-opacity-50 text-white backdrop-blur-sm rounded-xl movable-div ${isBoxVisible ? '' : 'move-out-left'}`}
+                className={`max-w-md text-center bg-black p-8 m-8 bg-opacity-50 text-white backdrop-blur-xs rounded-xl movable-div ${isBoxVisible ? '' : 'move-out-left'}`}
               >
                 <h1 className='text-5xl font-bold'>Utopia Game</h1>
                 <p className='py-6'>
@@ -90,7 +90,7 @@ export const Landingpage = () => {
                   erkunden, Fähigkeiten zu entwickeln und die Welt um sie herum zu gestalten. Bist
                   du bereit, Teil dieser Revolution zu werden?{' '}
                 </p>
-                <div className='btn !text-white btn-primary' onClick={startGame}>
+                <div className='btn text-white! btn-primary' onClick={startGame}>
                   Play ▶
                 </div>
               </div>
@@ -112,7 +112,7 @@ export const Landingpage = () => {
             <ul className='my-8 grid gap-y-8 gap-x-12 sm:grid-cols-2 lg:grid-cols-3'>
               {features?.map((item, idx) => (
                 <li key={idx} className='space-y-3'>
-                  <div className='w-12tw-card tw-card-body h-12 mx-auto !bg-transparent text-indigo-600 rounded-full flex items-center justify-center text-5xl'>
+                  <div className='w-12tw-card tw-card-body h-12 mx-auto bg-transparent! text-indigo-600 rounded-full flex items-center justify-center text-5xl'>
                     {item.symbol}
                   </div>
                   <h4 className='text-lg  font-semibold'>{item.heading}</h4>
@@ -123,7 +123,7 @@ export const Landingpage = () => {
           </section>
 
           <section className='py-14 min-h-[40em] p-8 flex h-full items-center justify-center mb-28'>
-            <div className='max-w-screen-xl mx-auto text-center'>
+            <div className='max-w-(--breakpoint-xl) mx-auto text-center'>
               <div className='max-w-xl mx-auto'>
                 <h3 className='text-3xl font-semibold sm:text-4xl'>Meet our team</h3>
                 <p className='mt-3'>

src/pages/MapContainer.tsx

@@ -69,6 +69,7 @@ function MapContainer({ layers, map }: { layers: LayerProps[]; map: any }) {
   useEffect(() => {}, [apis])
 
   return (
+    <>
       <UtopiaMap
         geo={map.geo}
         zoom={map.zoom || 5}
@@ -141,6 +142,7 @@ function MapContainer({ layers, map }: { layers: LayerProps[]; map: any }) {
             </Layer>
           ))}
       </UtopiaMap>
+    </>
   )
 }
 

tailwind.config.js

@@ -9,8 +9,4 @@ export default {
       },
     },
   },
-  plugins: [import('daisyui')],
-  daisyui: {
-    themes: ['light', 'dark', 'cupcake', 'retro', 'cyberpunk', 'aqua'],
-  },
 }

vite.config.ts

@@ -1,7 +1,6 @@
 import { defineConfig } from 'vite'
 import react from '@vitejs/plugin-react'
-// vite.config.js
+import tailwindcss from '@tailwindcss/vite'
-import { VitePWA } from 'vite-plugin-pwa'
 
 
 // https://vitejs.dev/config/
@@ -10,7 +9,8 @@ export default defineConfig({
     port: 5174
   },
   plugins: [
-    react()
+    react(),
+    tailwindcss(),
   ]
 })