Uprade app components to react md2 (#604)

Signed-off-by: Carl Gieringer <78054+carlgieringer@users.noreply.github.com>

package.json

@@ -93,5 +93,8 @@
     "react-native@^0.66": "patch:react-native@npm%3A0.66.5#./.yarn/patches/react-native-npm-0.66.5-22e5dd8ec5.patch",
     "react-material-symbols@^4.1.1": "patch:react-material-symbols@npm%3A4.1.1#./.yarn/patches/react-material-symbols-npm-4.1.1-d06ca7bff7.patch",
     "jsdom@^21.1.2": "patch:jsdom@npm%3A21.1.2#./.yarn/patches/jsdom-npm-21.1.2-4916b89bf1.patch"
+  },
+  "dependencies": {
+    "@react-md/alert": "^2"
   }
 }

premiser-ui/package.json

@@ -118,6 +118,7 @@
   "dependencies": {
     "@babel/runtime-corejs3": "^7.22.6",
     "@grrr/cookie-consent": "^1.0.4",
+    "@react-md/app-bar": "^2",
     "@react-md/autocomplete": "Howdju/react-md#workspace=@react-md/autocomplete&commit=739fcf8b359727d958d6befe46014fe8b3dfe11c",
     "@react-md/avatar": "^2",
     "@react-md/button": "^2",
@@ -130,7 +131,9 @@
     "@react-md/list": "^2",
     "@react-md/menu": "^2",
     "@react-md/progress": "^2",
+    "@react-md/sheet": "^2",
     "@react-md/states": "^2",
+    "@react-md/tabs": "^2",
     "@react-md/theme": "^2",
     "@react-md/typography": "^2",
     "@react-md/utils": "^2",

premiser-ui/src/AddMessageCapturer.tsx

@@ -0,0 +1,23 @@
+import { useAddMessage } from "@react-md/alert";
+import { useEffect } from "react";
+import app from "./app/appSlice";
+import { useAppDispatch } from "./hooks";
+
+/**
+ * This component is a hack to work around react-md's Toast/Snackbar/Alert design
+ * where it is only possible to add messages from a functional component. Since
+ * we want to add messages from sagas, we need to capture the addMessage function.
+ *
+ * TODO(#605) figure out a better approach to app toasts.
+ */
+export function AddMessageCapturer() {
+  const addMessage = useAddMessage();
+  const dispatch = useAppDispatch();
+  // Only capture addMessage once.
+  useEffect(() => {
+    if (addMessage) {
+      dispatch(app.captureAddMessage(addMessage));
+    }
+  }, [addMessage, dispatch]);
+  return null;
+}

premiser-ui/src/App.scss

@@ -113,6 +113,7 @@ strong {
 
 // Tabs that appear to be contiguous with the toolbar.  But to avoid handling the navigate ourselves, they are actually not in the toolbar
 .toolbarTabs {
+  background-color: $primary-color;
   * {
     color: $light-text-color;
   }