feat(ui): enable DarkMode in UI (#365)

Details: * upgrade to bulma 1.0.0 * adds DarkModeSwitcher to Navbar * uses MediaQuery to check for prefers-color-scheme
f-eld-ch · May 14, 2024 · c0bdb9c · c0bdb9c
1 parent f1bd614
commit c0bdb9c
Show file tree

Hide file tree

Showing 7 changed files with 1,086 additions and 877 deletions.
diff --git a/ui/index.html b/ui/index.html
@@ -1,5 +1,5 @@
 <!doctype html>
-<html lang="en">
+<html lang="en" class="has-navbar-fixed-top">
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
@@ -15,7 +15,7 @@
     <title>Sitrep</title>
   </head>
 
-  <body class="has-navbar-fixed-top">
+  <body>
     <div id="root"></div>
     <script type="module" src="/src/index.tsx"></script>
   </body>

diff --git a/ui/package.json b/ui/package.json
@@ -14,13 +14,13 @@
     "@turf/center": "^6.5.0",
     "@turf/helpers": "^6.5.0",
     "@watergis/maplibre-gl-export": "~2.0.1",
-    "bulma": "^0.9.4",
+    "bulma": "^1.0.0",
     "classnames": "^2.5.1",
     "dayjs": "^1.11.11",
     "graphql": "^16.8.1",
     "hat": "^0.0.3",
     "i18next": "^23.11.4",
-    "i18next-browser-languagedetector": "^7.2.1",
+    "i18next-browser-languagedetector": "^8.0.0",
     "lodash": "^4.17.21",
     "mapbox-gl-style-switcher": "^1.0.11",
     "maplibre-gl": "^2.4.0",
@@ -30,9 +30,9 @@
     "react-dom": "^18.3.1",
     "react-i18next": "^14.1.1",
     "react-map-gl": "~7.1.7",
-    "react-markdown": "^8.0.7",
-    "react-router-dom": "^6.23.0",
-    "usehooks-ts": "^2.15.0",
+    "react-markdown": "^9.0.1",
+    "react-router-dom": "^6.23.1",
+    "usehooks-ts": "^3.1.0",
     "uuid": "^9.0.1",
     "web-vitals": "^3.5.2"
   },
@@ -66,39 +66,39 @@
     ]
   },
   "devDependencies": {
-    "@testing-library/dom": "^9.3.4",
+    "@testing-library/dom": "^10.1.0",
     "@testing-library/jest-dom": "^6.4.5",
-    "@testing-library/react": "^14.3.1",
+    "@testing-library/react": "^15.0.7",
     "@testing-library/user-event": "^14.5.2",
     "@types/hat": "^0.0.4",
     "@types/jest": "^29.5.12",
     "@types/lodash": "^4.17.1",
     "@types/mapbox-gl": "^2.7.21",
     "@types/mapbox__mapbox-gl-draw": "~1.4.6",
     "@types/node": "^20.12.11",
-    "@types/react": "^18.3.1",
+    "@types/react": "^18.3.2",
     "@types/react-color": "^3.0.12",
     "@types/react-dom": "^18.3.0",
     "@types/react-router-dom": "^5.3.3",
     "@types/semver": "^7.5.8",
     "@types/uuid": "^9.0.8",
-    "@typescript-eslint/eslint-plugin": "^6.21.0",
-    "@typescript-eslint/parser": "^6.21.0",
+    "@typescript-eslint/eslint-plugin": "^7.9.0",
+    "@typescript-eslint/parser": "^7.9.0",
     "@vite-pwa/assets-generator": "^0.2.4",
     "@vitejs/plugin-react-swc": "^3.6.0",
     "@vitest/coverage-v8": "^1.6.0",
     "eslint": "^8.57.0",
     "eslint-config-react-app": "^7.0.1",
-    "husky": "^8.0.3",
+    "husky": "^9.0.11",
     "jest": "^29.7.0",
     "jsdom": "^24.0.0",
     "lint-staged": "^15.2.2",
     "prettier": "^3.2.5",
-    "sass": "^1.77.0",
+    "sass": "^1.77.1",
     "semver": "^7.6.2",
     "source-map-explorer": "^2.5.3",
     "ts-jest": "^29.1.2",
-    "typescript": "^4.9.5",
+    "typescript": "^5.4.5",
     "vite": "^5.2.11",
     "vite-plugin-checker": "^0.6.4",
     "vite-plugin-eslint": "^1.8.1",