Switch UI to daisy

Build.fs

@@ -23,7 +23,7 @@ Target.create "InstallClient" (fun _ -> run npm "install" ".")
 
 Target.create "Bundle" (fun _ ->
     [ "server", dotnet $"publish -c Release -o \"{deployPath}\"" serverPath
-      "client", dotnet "fable -o output --run npm run build" clientPath ]
+      "client", dotnet "fable -o output --run npm vite build" clientPath ]
     |> runParallel
 )
 
@@ -98,7 +98,7 @@ Target.create "Azure" (fun _ ->
 Target.create "Run" (fun _ ->
     run dotnet "build" sharedPath
     [ "server", dotnet "watch run" serverPath
-      "client", dotnet "fable watch -o output --run npm run start" clientPath ]
+      "client", dotnet "fable watch -o output --run npx vite" clientPath ]
     |> runParallel
 )
 

package.json

@@ -4,19 +4,17 @@
         "node": "~18 || ~20",
         "npm": "~9 || ~10"
     },
-    "scripts": {
-        "start": "npx vite src/Client",
-        "build": "npx vite build src/Client"
-    },
+    "scripts": {},
     "devDependencies": {
         "@types/node": "^20.9.1",
         "@vitejs/plugin-react": "^4.2.0",
         "autoprefixer": "^10.4.16",
+        "daisyui": "^4.6.0",
         "mocha": "^8.3.2",
-        "postcss": "^8.4.31",
+        "postcss": "^8.4.33",
         "remotedev": "^0.2.9",
         "sass": "^1.69.5",
-        "tailwindcss": "^3.3.5",
+        "tailwindcss": "^3.4.1",
         "vite": "^5.0.5"
     },
     "dependencies": {

paket.dependencies

@@ -5,6 +5,7 @@ storage: none
 nuget Azure.Data.Tables
 nuget Azure.Search.Documents
 nuget Azure.Storage.Blobs
+nuget Feliz.DaisyUI
 nuget FSharp.Control.AsyncSeq
 nuget FSharp.Data
 nuget Fulma

paket.lock

@@ -171,6 +171,9 @@ NUGET
     Feliz.CompilerPlugins (2.2)
       Fable.AST (>= 4.2.1)
       FSharp.Core (>= 4.7.2)
+    Feliz.DaisyUI (4.2)
+      Feliz (>= 2.7)
+      FSharp.Core (>= 4.7.2)
     Feliz.PigeonMaps (3.0)
       Feliz (>= 2.0)
       FSharp.Core (>= 4.7.2)

src/Client/Client.fsproj

@@ -5,6 +5,8 @@
         <DefineConstants>FABLE_COMPILER</DefineConstants>
     </PropertyGroup>
     <ItemGroup>
+        <None Include="postcss.config.js" />
+        <None Include="tailwind.config.js" />
         <None Include="index.html" />
         <None Include="paket.references" />
         <Compile Include="Helpers.fs" />

src/Client/Index.fs

@@ -391,21 +391,21 @@ open Fable.Core.JsInterop
 open Feliz.Recharts
 open Feliz.ReactLoadingSkeleton
 open Feliz.UseElmish
-
-importAll "./styles.scss"
+open Feliz.DaisyUI
 
 module Heading =
     let title =
-        Bulma.title.h3 [
-            Bulma.icon [
-                prop.classes [ "has-text-info" ]
-                prop.children [ Html.i [ prop.className "fas fa-home" ] ]
+        Html.h3 [
+            color.textPrimary
+            prop.className "text-lg"
+            prop.children [
+                Html.i [ prop.className "fas fa-home" ]
+                Html.span [ Html.text " SAFE Search" ]
             ]
-            Html.span [ Html.text " SAFE Search" ]
         ]
 
     let subtitle =
-        Bulma.subtitle.h5 [ Html.text "Find your unaffordable property in the UK!" ]
+        Html.h5 [ Html.text "Find your unaffordable property in the UK!" ]
 
 module Facets =
     let fromPluralToSingular =

src/Client/paket.references

@@ -14,4 +14,5 @@ Feliz.Bulma.Slider
 Feliz.ReactLoadingSkeleton
 Feliz.Recharts
 Feliz.UseElmish
-Fulma
+Fulma
+Feliz.DaisyUI

src/Client/postcss.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+    plugins: {
+        tailwindcss: {},
+        autoprefixer: {},
+    },
+}

src/Client/styles.scss

@@ -1,3 +1,7 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
 @import "bulma-quickview";
 
 .suggestion:hover {