feat(settings): use forked rjsf bootstrap5 theme

package.json

@@ -38,6 +38,7 @@
         "@types/d3-zoom": "^3.0.1",
         "@types/events": "^3.0.0",
         "@types/file-saver": "^2.0.5",
+        "@types/json-schema": "^7.0.11",
         "@types/lodash": "^4.14.178",
         "@types/react": "^17.0.39",
         "@types/react-dom": "^17.0.11",
@@ -79,6 +80,7 @@
         "react": "^17.0.1",
         "react-ace": "^9.5.0",
         "react-app-polyfill": "^3.0.0",
+        "react-bootstrap": "^2.4.0",
         "react-css-theme-switcher": "^0.3.0",
         "react-dom": "^17.0.1",
         "react-i18next": "^11.16.6",
@@ -112,5 +114,8 @@
     },
     "bugs": {
         "url": "https://github.com/nurikk/zigbee2mqtt-frontend/issues"
+    },
+    "dependencies": {
+        "@rjsf/bootstrap-5": "https://github.com/nurikk/fileshare/blob/main/rjsf-bootstrap-5-4.2.0.tgz?raw=true"
     }
 }

src/components/device-page/settings.tsx

@@ -1,9 +1,12 @@
 import React, { Component, ReactNode } from "react";
 import { Device, KVP } from "../../types";
 import { DeviceApi } from "../../actions/DeviceApi";
-import Form from "@rjsf/core";
+
 import { JSONSchema7 } from "json-schema"
-import { ISubmitEvent, UiSchema } from "@rjsf/core";
+import { ISubmitEvent, UiSchema, withTheme } from "@rjsf/core";
+import { Theme as Bootstrap5Theme } from '@rjsf/bootstrap-5';
+
+const Form = withTheme(Bootstrap5Theme);
 
 import customFields from "./../../i18n/rjsf-translation-fields";
 import merge from "lodash/merge";

src/components/logs-page/log-level-config.tsx

@@ -1,11 +1,13 @@
 import React from "react";
 
-import Form from "@rjsf/core";
+import { ISubmitEvent, withTheme } from "@rjsf/core";
+import { Theme as Bootstrap5Theme } from '@rjsf/bootstrap-5';
+
+const Form = withTheme(Bootstrap5Theme);
 import { JSONSchema7 } from "json-schema"
 import { KVP, Z2MConfig } from "../../types";
 import get from "lodash/get";
 import set from "lodash/set";
-import { ISubmitEvent } from "@rjsf/core";
 import styles from "./log-level-config.module.css";
 
 

src/components/settings/index.tsx

@@ -4,7 +4,11 @@ import actions, { UtilsApi } from "../../actions/actions";
 import { GlobalState } from "../../store";
 import { NavLink, Redirect, RouteComponentProps, withRouter } from "react-router-dom";
 import Button from "../button";
-import Form, { ISubmitEvent, UiSchema } from "@rjsf/core";
+import { ISubmitEvent, UiSchema, withTheme } from "@rjsf/core";
+import { Theme as Bootstrap5Theme } from '@rjsf/bootstrap-5';
+
+const Form = withTheme(Bootstrap5Theme);
+
 import cx from "classnames";
 import { JSONSchema7 } from "json-schema";
 import cloneDeep from "lodash/cloneDeep";