Making Widgets Look Nice 1.0

3 years ago · 131e34ca84
parent c249a077cc
commit 131e34ca84
19 changed files with 349 additions and 177 deletions
--- a/package-lock.json
+++ b/package-lock.json
@ -21,6 +21,7 @@
        "bootstrap": "^5.2.3",
        "react": "^18.2.0",
        "react-bootstrap": "^2.7.2",
+        "react-bootstrap-validation": "^0.1.11",
        "react-dom": "^18.2.0",
        "react-pro-sidebar": "^1.0.0",
        "react-scripts": "5.0.1",
@ -2431,6 +2432,21 @@
        "url": "https://opencollective.com/eslint"
      }
    },
+    "node_modules/@eslint/eslintrc/node_modules/ajv": {
+      "version": "6.12.6",
+      "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
+      "integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==",
+      "dependencies": {
+        "fast-deep-equal": "^3.1.1",
+        "fast-json-stable-stringify": "^2.0.0",
+        "json-schema-traverse": "^0.4.1",
+        "uri-js": "^4.2.2"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/epoberezkin"
+      }
+    },
    "node_modules/@eslint/eslintrc/node_modules/argparse": {
      "version": "2.0.1",
      "resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz",
@ -2461,6 +2477,11 @@
        "js-yaml": "bin/js-yaml.js"
      }
    },
+    "node_modules/@eslint/eslintrc/node_modules/json-schema-traverse": {
+      "version": "0.4.1",
+      "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz",
+      "integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg=="
+    },
    "node_modules/@eslint/eslintrc/node_modules/type-fest": {
      "version": "0.20.2",
      "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.20.2.tgz",
@ -4081,6 +4102,21 @@
        "react-dom": ">=16.14.0"
      }
    },
+    "node_modules/@restart/ui/node_modules/@types/react": {
+      "version": "18.0.34",
+      "resolved": "https://registry.npmjs.org/@types/react/-/react-18.0.34.tgz",
+      "integrity": "sha512-NO1UO8941541CJl1BeOXi8a9dNKFK09Gnru5ZJqkm4Q3/WoQJtHvmwt0VX0SB9YCEwe7TfSSxDuaNmx6H2BAIQ==",
+      "dependencies": {
+        "@types/prop-types": "*",
+        "@types/scheduler": "*",
+        "csstype": "^3.0.2"
+      }
+    },
+    "node_modules/@restart/ui/node_modules/csstype": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.2.tgz",
+      "integrity": "sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ=="
+    },
    "node_modules/@restart/ui/node_modules/uncontrollable": {
      "version": "8.0.0",
      "resolved": "https://registry.npmjs.org/uncontrollable/-/uncontrollable-8.0.0.tgz",
@ -4771,9 +4807,9 @@
      "integrity": "sha512-EEhsLsD6UsDM1yFhAvy0Cjr6VwmpMWqFBCb9w07wVugF7w9nfajxLuVmngTIpgS6svCnm6Vaw+MZhoDCKnOfsw=="
    },
    "node_modules/@types/react": {
-      "version": "18.0.30",
-      "resolved": "https://registry.npmjs.org/@types/react/-/react-18.0.30.tgz",
-      "integrity": "sha512-AnME2cHDH11Pxt/yYX6r0w448BfTwQOLEhQEjCdwB7QskEI7EKtxhGUsExTQe/MsY3D9D5rMtu62WRocw9A8FA==",
+      "version": "17.0.57",
+      "resolved": "https://registry.npmjs.org/@types/react/-/react-17.0.57.tgz",
+      "integrity": "sha512-e4msYpu5QDxzNrXDHunU/VPyv2M1XemGG/p7kfCjUiPtlLDCWLGQfgAMng6YyisWYxZ09mYdQlmMnyS0NfZdEg==",
      "dependencies": {
        "@types/prop-types": "*",
        "@types/scheduler": "*",
@ -5385,13 +5421,13 @@
      }
    },
    "node_modules/ajv": {
-      "version": "6.12.6",
-      "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
-      "integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==",
+      "version": "8.12.0",
+      "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.12.0.tgz",
+      "integrity": "sha512-sRu1kpcO9yLtYxBKvqfTeh9KzZEwO3STyX1HT+4CaDzC6HpTGYhIhPIzj9XuKU7KYDwnaeh5hcOwjy1QuJzBPA==",
      "dependencies": {
        "fast-deep-equal": "^3.1.1",
-        "fast-json-stable-stringify": "^2.0.0",
-        "json-schema-traverse": "^0.4.1",
+        "json-schema-traverse": "^1.0.0",
+        "require-from-string": "^2.0.2",
        "uri-js": "^4.2.2"
      },
      "funding": {
@ -5415,34 +5451,6 @@
        }
      }
    },
-    "node_modules/ajv-formats/node_modules/ajv": {
-      "version": "8.12.0",
-      "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.12.0.tgz",
-      "integrity": "sha512-sRu1kpcO9yLtYxBKvqfTeh9KzZEwO3STyX1HT+4CaDzC6HpTGYhIhPIzj9XuKU7KYDwnaeh5hcOwjy1QuJzBPA==",
-      "dependencies": {
-        "fast-deep-equal": "^3.1.1",
-        "json-schema-traverse": "^1.0.0",
-        "require-from-string": "^2.0.2",
-        "uri-js": "^4.2.2"
-      },
-      "funding": {
-        "type": "github",
-        "url": "https://github.com/sponsors/epoberezkin"
-      }
-    },
-    "node_modules/ajv-formats/node_modules/json-schema-traverse": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-1.0.0.tgz",
-      "integrity": "sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug=="
-    },
-    "node_modules/ajv-keywords": {
-      "version": "3.5.2",
-      "resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-3.5.2.tgz",
-      "integrity": "sha512-5p6WTN0DdTGVQk6VjcEju19IgaHudalcfabD7yhDGeA6bcQnmL+CpveLJq/3hvfwd1aof6L386Ougkx6RfyMIQ==",
-      "peerDependencies": {
-        "ajv": "^6.9.1"
-      }
-    },
    "node_modules/ansi-escapes": {
      "version": "4.3.2",
      "resolved": "https://registry.npmjs.org/ansi-escapes/-/ansi-escapes-4.3.2.tgz",
@ -5794,6 +5802,34 @@
        "webpack": ">=2"
      }
    },
+    "node_modules/babel-loader/node_modules/ajv": {
+      "version": "6.12.6",
+      "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
+      "integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==",
+      "dependencies": {
+        "fast-deep-equal": "^3.1.1",
+        "fast-json-stable-stringify": "^2.0.0",
+        "json-schema-traverse": "^0.4.1",
+        "uri-js": "^4.2.2"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/epoberezkin"
+      }
+    },
+    "node_modules/babel-loader/node_modules/ajv-keywords": {
+      "version": "3.5.2",
+      "resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-3.5.2.tgz",
+      "integrity": "sha512-5p6WTN0DdTGVQk6VjcEju19IgaHudalcfabD7yhDGeA6bcQnmL+CpveLJq/3hvfwd1aof6L386Ougkx6RfyMIQ==",
+      "peerDependencies": {
+        "ajv": "^6.9.1"
+      }
+    },
+    "node_modules/babel-loader/node_modules/json-schema-traverse": {
+      "version": "0.4.1",
+      "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz",
+      "integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg=="
+    },
    "node_modules/babel-loader/node_modules/schema-utils": {
      "version": "2.7.1",
      "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-2.7.1.tgz",
@ -5991,6 +6027,20 @@
        "babel-plugin-transform-react-remove-prop-types": "^0.4.24"
      }
    },
+    "node_modules/babel-runtime": {
+      "version": "5.8.38",
+      "resolved": "https://registry.npmjs.org/babel-runtime/-/babel-runtime-5.8.38.tgz",
+      "integrity": "sha512-KpgoA8VE/pMmNCrnEeeXqFG24TIH11Z3ZaimIhJWsin8EbfZy3WzFKUTIan10ZIDgRVvi9EkLbruJElJC9dRlg==",
+      "dependencies": {
+        "core-js": "^1.0.0"
+      }
+    },
+    "node_modules/babel-runtime/node_modules/core-js": {
+      "version": "1.2.7",
+      "resolved": "https://registry.npmjs.org/core-js/-/core-js-1.2.7.tgz",
+      "integrity": "sha512-ZiPp9pZlgxpWRu0M+YWbm6+aQ84XEfH1JRXvfOc/fILWI0VKhLC2LX13X1NYq4fULzLMq7Hfh43CSo2/aIaUPA==",
+      "deprecated": "core-js@<3.23.3 is no longer maintained and not recommended for usage due to the number of issues. Because of the V8 engine whims, feature detection in old core-js versions could cause a slowdown up to 100x even if nothing is polyfilled. Some versions have web compatibility issues. Please, upgrade your dependencies to the actual version of core-js."
+    },
    "node_modules/balanced-match": {
      "version": "1.0.2",
      "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
@ -6873,21 +6923,6 @@
        }
      }
    },
-    "node_modules/css-minimizer-webpack-plugin/node_modules/ajv": {
-      "version": "8.12.0",
-      "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.12.0.tgz",
-      "integrity": "sha512-sRu1kpcO9yLtYxBKvqfTeh9KzZEwO3STyX1HT+4CaDzC6HpTGYhIhPIzj9XuKU7KYDwnaeh5hcOwjy1QuJzBPA==",
-      "dependencies": {
-        "fast-deep-equal": "^3.1.1",
-        "json-schema-traverse": "^1.0.0",
-        "require-from-string": "^2.0.2",
-        "uri-js": "^4.2.2"
-      },
-      "funding": {
-        "type": "github",
-        "url": "https://github.com/sponsors/epoberezkin"
-      }
-    },
    "node_modules/css-minimizer-webpack-plugin/node_modules/ajv-keywords": {
      "version": "5.1.0",
      "resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-5.1.0.tgz",
@ -6899,11 +6934,6 @@
        "ajv": "^8.8.2"
      }
    },
-    "node_modules/css-minimizer-webpack-plugin/node_modules/json-schema-traverse": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-1.0.0.tgz",
-      "integrity": "sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug=="
-    },
    "node_modules/css-minimizer-webpack-plugin/node_modules/schema-utils": {
      "version": "4.0.0",
      "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-4.0.0.tgz",
@ -8269,21 +8299,6 @@
        "webpack": "^5.0.0"
      }
    },
-    "node_modules/eslint-webpack-plugin/node_modules/ajv": {
-      "version": "8.12.0",
-      "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.12.0.tgz",
-      "integrity": "sha512-sRu1kpcO9yLtYxBKvqfTeh9KzZEwO3STyX1HT+4CaDzC6HpTGYhIhPIzj9XuKU7KYDwnaeh5hcOwjy1QuJzBPA==",
-      "dependencies": {
-        "fast-deep-equal": "^3.1.1",
-        "json-schema-traverse": "^1.0.0",
-        "require-from-string": "^2.0.2",
-        "uri-js": "^4.2.2"
-      },
-      "funding": {
-        "type": "github",
-        "url": "https://github.com/sponsors/epoberezkin"
-      }
-    },
    "node_modules/eslint-webpack-plugin/node_modules/ajv-keywords": {
      "version": "5.1.0",
      "resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-5.1.0.tgz",
@ -8308,11 +8323,6 @@
        "node": "^12.13.0 || ^14.15.0 || ^16.10.0 || >=17.0.0"
      }
    },
-    "node_modules/eslint-webpack-plugin/node_modules/json-schema-traverse": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-1.0.0.tgz",
-      "integrity": "sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug=="
-    },
    "node_modules/eslint-webpack-plugin/node_modules/schema-utils": {
      "version": "4.0.0",
      "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-4.0.0.tgz",
@ -8345,6 +8355,21 @@
        "url": "https://github.com/chalk/supports-color?sponsor=1"
      }
    },
+    "node_modules/eslint/node_modules/ajv": {
+      "version": "6.12.6",
+      "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
+      "integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==",
+      "dependencies": {
+        "fast-deep-equal": "^3.1.1",
+        "fast-json-stable-stringify": "^2.0.0",
+        "json-schema-traverse": "^0.4.1",
+        "uri-js": "^4.2.2"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/epoberezkin"
+      }
+    },
    "node_modules/eslint/node_modules/argparse": {
      "version": "2.0.1",
      "resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz",
@ -8390,6 +8415,11 @@
        "js-yaml": "bin/js-yaml.js"
      }
    },
+    "node_modules/eslint/node_modules/json-schema-traverse": {
+      "version": "0.4.1",
+      "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz",
+      "integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg=="
+    },
    "node_modules/eslint/node_modules/type-fest": {
      "version": "0.20.2",
      "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.20.2.tgz",
@ -8889,6 +8919,29 @@
        }
      }
    },
+    "node_modules/fork-ts-checker-webpack-plugin/node_modules/ajv": {
+      "version": "6.12.6",
+      "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
+      "integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==",
+      "dependencies": {
+        "fast-deep-equal": "^3.1.1",
+        "fast-json-stable-stringify": "^2.0.0",
+        "json-schema-traverse": "^0.4.1",
+        "uri-js": "^4.2.2"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/epoberezkin"
+      }
+    },
+    "node_modules/fork-ts-checker-webpack-plugin/node_modules/ajv-keywords": {
+      "version": "3.5.2",
+      "resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-3.5.2.tgz",
+      "integrity": "sha512-5p6WTN0DdTGVQk6VjcEju19IgaHudalcfabD7yhDGeA6bcQnmL+CpveLJq/3hvfwd1aof6L386Ougkx6RfyMIQ==",
+      "peerDependencies": {
+        "ajv": "^6.9.1"
+      }
+    },
    "node_modules/fork-ts-checker-webpack-plugin/node_modules/chalk": {
      "version": "4.1.2",
      "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
@ -8933,6 +8986,11 @@
        "node": ">=10"
      }
    },
+    "node_modules/fork-ts-checker-webpack-plugin/node_modules/json-schema-traverse": {
+      "version": "0.4.1",
+      "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz",
+      "integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg=="
+    },
    "node_modules/fork-ts-checker-webpack-plugin/node_modules/schema-utils": {
      "version": "2.7.0",
      "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-2.7.0.tgz",
@ -12549,9 +12607,9 @@
      "integrity": "sha512-es94M3nTIfsEPisRafak+HDLfHXnKBhV3vU5eqPcS3flIWqcxJWgXHXiey3YrpaNsanY5ei1VoYEbOzijuq9BA=="
    },
    "node_modules/json-schema-traverse": {
-      "version": "0.4.1",
-      "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz",
-      "integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg=="
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-1.0.0.tgz",
+      "integrity": "sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug=="
    },
    "node_modules/json-stable-stringify-without-jsonify": {
      "version": "1.0.1",
@ -13030,21 +13088,6 @@
        "webpack": "^5.0.0"
      }
    },
-    "node_modules/mini-css-extract-plugin/node_modules/ajv": {
-      "version": "8.12.0",
-      "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.12.0.tgz",
-      "integrity": "sha512-sRu1kpcO9yLtYxBKvqfTeh9KzZEwO3STyX1HT+4CaDzC6HpTGYhIhPIzj9XuKU7KYDwnaeh5hcOwjy1QuJzBPA==",
-      "dependencies": {
-        "fast-deep-equal": "^3.1.1",
-        "json-schema-traverse": "^1.0.0",
-        "require-from-string": "^2.0.2",
-        "uri-js": "^4.2.2"
-      },
-      "funding": {
-        "type": "github",
-        "url": "https://github.com/sponsors/epoberezkin"
-      }
-    },
    "node_modules/mini-css-extract-plugin/node_modules/ajv-keywords": {
      "version": "5.1.0",
      "resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-5.1.0.tgz",
@ -13056,11 +13099,6 @@
        "ajv": "^8.8.2"
      }
    },
-    "node_modules/mini-css-extract-plugin/node_modules/json-schema-traverse": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-1.0.0.tgz",
-      "integrity": "sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug=="
-    },
    "node_modules/mini-css-extract-plugin/node_modules/schema-utils": {
      "version": "4.0.0",
      "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-4.0.0.tgz",
@ -15265,6 +15303,20 @@
        }
      }
    },
+    "node_modules/react-bootstrap-validation": {
+      "version": "0.1.11",
+      "resolved": "https://registry.npmjs.org/react-bootstrap-validation/-/react-bootstrap-validation-0.1.11.tgz",
+      "integrity": "sha512-AQqQThMh/eBr7XPSMoCHxmf3wj5MLIWW8D+6Asz10f30Mlma+WrK+CJ6RTFjmVWiIU/uVthQMg44w3Q6aqr89g==",
+      "dependencies": {
+        "babel-runtime": "^5.1.10",
+        "classnames": "^2.0.0",
+        "react-bootstrap": ">=0.23.0",
+        "validator": "^3.41.3"
+      },
+      "peerDependencies": {
+        "react": ">=0.13"
+      }
+    },
    "node_modules/react-dev-utils": {
      "version": "12.0.1",
      "resolved": "https://registry.npmjs.org/react-dev-utils/-/react-dev-utils-12.0.1.tgz",
@ -15962,6 +16014,34 @@
        "url": "https://opencollective.com/webpack"
      }
    },
+    "node_modules/schema-utils/node_modules/ajv": {
+      "version": "6.12.6",
+      "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
+      "integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==",
+      "dependencies": {
+        "fast-deep-equal": "^3.1.1",
+        "fast-json-stable-stringify": "^2.0.0",
+        "json-schema-traverse": "^0.4.1",
+        "uri-js": "^4.2.2"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/epoberezkin"
+      }
+    },
+    "node_modules/schema-utils/node_modules/ajv-keywords": {
+      "version": "3.5.2",
+      "resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-3.5.2.tgz",
+      "integrity": "sha512-5p6WTN0DdTGVQk6VjcEju19IgaHudalcfabD7yhDGeA6bcQnmL+CpveLJq/3hvfwd1aof6L386Ougkx6RfyMIQ==",
+      "peerDependencies": {
+        "ajv": "^6.9.1"
+      }
+    },
+    "node_modules/schema-utils/node_modules/json-schema-traverse": {
+      "version": "0.4.1",
+      "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz",
+      "integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg=="
+    },
    "node_modules/select-hose": {
      "version": "2.0.0",
      "resolved": "https://registry.npmjs.org/select-hose/-/select-hose-2.0.0.tgz",
@ -17183,6 +17263,19 @@
        "is-typedarray": "^1.0.0"
      }
    },
+    "node_modules/typescript": {
+      "version": "4.9.5",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.9.5.tgz",
+      "integrity": "sha512-1FXk9E2Hm+QzZQ7z+McJiHL4NW1F2EzMu9Nq9i3zAaGqibafqYwCVU6WyWAuyQRRzOlxou8xZSyXLEN8oKj24g==",
+      "peer": true,
+      "bin": {
+        "tsc": "bin/tsc",
+        "tsserver": "bin/tsserver"
+      },
+      "engines": {
+        "node": ">=4.2.0"
+      }
+    },
    "node_modules/unbox-primitive": {
      "version": "1.0.2",
      "resolved": "https://registry.npmjs.org/unbox-primitive/-/unbox-primitive-1.0.2.tgz",
@ -17383,6 +17476,14 @@
        "node": ">=10.12.0"
      }
    },
+    "node_modules/validator": {
+      "version": "3.43.0",
+      "resolved": "https://registry.npmjs.org/validator/-/validator-3.43.0.tgz",
+      "integrity": "sha512-H9RMa5elH0361QGFKeZiIWxN0YJDKL9rblzaXVFEKrKkL9hROcg/4f5rJ90SLTjai0IPmN18v9LkH//wwN93bA==",
+      "engines": {
+        "node": ">= 0.10"
+      }
+    },
    "node_modules/vary": {
      "version": "1.1.2",
      "resolved": "https://registry.npmjs.org/vary/-/vary-1.1.2.tgz",
@ -17528,21 +17629,6 @@
        "webpack": "^4.0.0 || ^5.0.0"
      }
    },
-    "node_modules/webpack-dev-middleware/node_modules/ajv": {
-      "version": "8.12.0",
-      "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.12.0.tgz",
-      "integrity": "sha512-sRu1kpcO9yLtYxBKvqfTeh9KzZEwO3STyX1HT+4CaDzC6HpTGYhIhPIzj9XuKU7KYDwnaeh5hcOwjy1QuJzBPA==",
-      "dependencies": {
-        "fast-deep-equal": "^3.1.1",
-        "json-schema-traverse": "^1.0.0",
-        "require-from-string": "^2.0.2",
-        "uri-js": "^4.2.2"
-      },
-      "funding": {
-        "type": "github",
-        "url": "https://github.com/sponsors/epoberezkin"
-      }
-    },
    "node_modules/webpack-dev-middleware/node_modules/ajv-keywords": {
      "version": "5.1.0",
      "resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-5.1.0.tgz",
@ -17554,11 +17640,6 @@
        "ajv": "^8.8.2"
      }
    },
-    "node_modules/webpack-dev-middleware/node_modules/json-schema-traverse": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-1.0.0.tgz",
-      "integrity": "sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug=="
-    },
    "node_modules/webpack-dev-middleware/node_modules/schema-utils": {
      "version": "4.0.0",
      "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-4.0.0.tgz",
@ -17635,21 +17716,6 @@
        }
      }
    },
-    "node_modules/webpack-dev-server/node_modules/ajv": {
-      "version": "8.12.0",
-      "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.12.0.tgz",
-      "integrity": "sha512-sRu1kpcO9yLtYxBKvqfTeh9KzZEwO3STyX1HT+4CaDzC6HpTGYhIhPIzj9XuKU7KYDwnaeh5hcOwjy1QuJzBPA==",
-      "dependencies": {
-        "fast-deep-equal": "^3.1.1",
-        "json-schema-traverse": "^1.0.0",
-        "require-from-string": "^2.0.2",
-        "uri-js": "^4.2.2"
-      },
-      "funding": {
-        "type": "github",
-        "url": "https://github.com/sponsors/epoberezkin"
-      }
-    },
    "node_modules/webpack-dev-server/node_modules/ajv-keywords": {
      "version": "5.1.0",
      "resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-5.1.0.tgz",
@ -17661,11 +17727,6 @@
        "ajv": "^8.8.2"
      }
    },
-    "node_modules/webpack-dev-server/node_modules/json-schema-traverse": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-1.0.0.tgz",
-      "integrity": "sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug=="
-    },
    "node_modules/webpack-dev-server/node_modules/schema-utils": {
      "version": "4.0.0",
      "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-4.0.0.tgz",
@ -17969,21 +18030,6 @@
        "node": ">=10.0.0"
      }
    },
-    "node_modules/workbox-build/node_modules/ajv": {
-      "version": "8.12.0",
-      "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.12.0.tgz",
-      "integrity": "sha512-sRu1kpcO9yLtYxBKvqfTeh9KzZEwO3STyX1HT+4CaDzC6HpTGYhIhPIzj9XuKU7KYDwnaeh5hcOwjy1QuJzBPA==",
-      "dependencies": {
-        "fast-deep-equal": "^3.1.1",
-        "json-schema-traverse": "^1.0.0",
-        "require-from-string": "^2.0.2",
-        "uri-js": "^4.2.2"
-      },
-      "funding": {
-        "type": "github",
-        "url": "https://github.com/sponsors/epoberezkin"
-      }
-    },
    "node_modules/workbox-build/node_modules/fs-extra": {
      "version": "9.1.0",
      "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-9.1.0.tgz",
@ -17998,11 +18044,6 @@
        "node": ">=10"
      }
    },
-    "node_modules/workbox-build/node_modules/json-schema-traverse": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-1.0.0.tgz",
-      "integrity": "sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug=="
-    },
    "node_modules/workbox-build/node_modules/source-map": {
      "version": "0.8.0-beta.0",
      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.8.0-beta.0.tgz",
--- a/package.json
+++ b/package.json
@ -16,6 +16,7 @@
    "bootstrap": "^5.2.3",
    "react": "^18.2.0",
    "react-bootstrap": "^2.7.2",
+    "react-bootstrap-validation": "^0.1.11",
    "react-dom": "^18.2.0",
    "react-pro-sidebar": "^1.0.0",
    "react-scripts": "5.0.1",
--- a/src/components/AddExpenseForm.css
+++ b/src/components/AddExpenseForm.css
@ -0,0 +1,41 @@
+/* Dropdown Button */
+.dropbtn {
+    background-color: #04AA6D;
+    color: white;
+    padding: 16px;
+    font-size: 16px;
+    border: none;
+  }
+  
+  /* The container <div> - needed to position the dropdown content */
+  .dropdown {
+    position: relative;
+    display: inline-block;
+  }
+  
+  /* Dropdown Content (Hidden by Default) */
+  .dropdown-content {
+    display: none;
+    position: absolute;
+    background-color: #f1f1f1;
+    min-width: 160px;
+    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
+    z-index: 1;
+  }
+  
+  /* Links inside the dropdown */
+  .dropdown-content a {
+    color: black;
+    padding: 12px 16px;
+    text-decoration: none;
+    display: block;
+  }
+  
+  /* Change color of dropdown links on hover */
+  .dropdown-content a:hover {background-color: #ddd;}
+  
+  /* Show the dropdown menu on hover */
+  .dropdown:hover .dropdown-content {display: block;}
+  
+  /* Change the background color of the dropdown button when the dropdown content is shown */
+  .dropdown:hover .dropbtn {background-color: #3e8e41;}
--- a/src/components/AddExpenseForm.js
+++ b/src/components/AddExpenseForm.js
@ -1,6 +1,7 @@
 import React, { useContext, useState } from 'react';
 import { AppContext } from '../context/AppContext';
 import { v4 as uuidv4 } from 'uuid';
+import './AddExpenseForm.css'

 const AddExpenseForm = (props) => {
 	const { dispatch } = useContext(AppContext);
@ -27,7 +28,21 @@ const AddExpenseForm = (props) => {

 	return (
 		<form onSubmit={onSubmit}>
-			<div class='row'>
+			<div class='row alert alert-secondary'>
+				{/* <div class='col-sm col-lg-4'>
+				<form for="name">
+				<label >Choose a category:</label>
+					<select>
+						<option required='required'
+						type='text'
+						class='form-control'
+						id='name'
+						value={name}
+						onChange={(event) => setName(event.target.value)}>Rent</option>
+					</select>
+				</form>
+				</div> */}
+				<h3>Add Expense</h3>
 				<div class='col-sm col-lg-4'>
 					<label for='name'>Name</label>
 					<input
@ -37,7 +52,8 @@ const AddExpenseForm = (props) => {
 						id='name'
 						value={name}
 						onChange={(event) => setName(event.target.value)}
-					/>
+					></input>
+				
 				</div>  
 				<div class='col-sm col-lg-4'>
 					<label for='cost'>Cost</label>
@ -50,14 +66,14 @@ const AddExpenseForm = (props) => {
 						onChange={(event) => setCost(event.target.value)}
 					/>
 				</div>
-			</div>
 			<div class='row mt-3'>
 				<div class='col-sm'>
 					<button type='submit' class='btn btn-primary'>
 						Save
 					</button>
 				</div>
-			</div>
+			</div></div>
+			
 		</form>
 	);
 };
--- a/src/components/AddIncome.js
+++ b/src/components/AddIncome.js
@ -0,0 +1,54 @@
+import React, { useContext, useState } from 'react';
+import { AppContext } from '../context/AppContext';
+import { v4 as uuidv4 } from 'uuid';
+
+const AddExpenseForm = (props) => {
+	const { dispatch } = useContext(AppContext);
+
+	const [name, setName] = useState('');
+	const [cost, setCost] = useState('');
+
+	const onSubmit = (event) => {
+		event.preventDefault();
+		const expense = {
+			id: uuidv4(),
+			name,
+			cost: parseInt(cost),
+		};
+
+		dispatch({
+			type: 'ADD_EXPENSE',
+			payload: expense,
+		});
+
+		setName('');
+		setCost('');
+	};
+
+	return (
+		<form onSubmit={onSubmit}>
+			<div class='row'>
+				<div class='col-lg-3'>
+					<label for='cost'>Income</label>
+					<input
+						required='required'
+						type='number'
+						class='form-control'
+						id='cost'
+						value={cost}
+						onChange={(event) => setCost(event.target.value)}
+					/>
+				</div>
+			</div>
+			<div class='row mt-3'>
+				<div class='col-sm'>
+					<button type='submit' class='btn btn-primary'>
+						Save
+					</button>
+				</div>
+			</div>
+		</form>
+	);
+};
+
+export default AddExpenseForm;
--- a/src/components/ExpenseList.js
+++ b/src/components/ExpenseList.js
@ -20,12 +20,12 @@ const ExpenseList = () => {

 	return (
 		<>
-			<input
+			{/* <input
 				type='text'
 				class='form-control mb-2 mr-sm-2'
 				placeholder='Type to search...'
 				onChange={handleChange}
-			/>
+			/>  */}
 			<ul class='list-group mt-3 mb-3'>
 				{filteredExpenses.map((expense) => (
 					<ExpenseItem
--- a/src/components/ExpenseTotal.js
+++ b/src/components/ExpenseTotal.js
@ -1,5 +1,7 @@
 import React, { useContext } from 'react';
 import { AppContext } from '../context/AppContext';
+import logo from './widget_logos/expenses_logo.png';
+import './css/ExpenseTotal.css'

 const ExpenseTotal = () => {
 	const { expenses } = useContext(AppContext);
@ -10,6 +12,7 @@ const ExpenseTotal = () => {

 	return (
 		<div class='alert alert-secondary p-4'>
+			<img src={logo}></img>
 			<span>This Month's Expenses: ${total}</span>
 		</div>
 	);
--- a/src/components/Remaining.js
+++ b/src/components/Remaining.js
@ -1,5 +1,7 @@
 import React, { useContext } from 'react';
 import { AppContext } from '../context/AppContext';
+import logo from './widget_logos/budget_logo.png';
+import './css/Remaining.css'

 const RemainingBudget = () => {
 	const { expenses, budget } = useContext(AppContext);
@ -12,6 +14,7 @@ const RemainingBudget = () => {

 	return (
 		<div class={`alert p-4 ${alertType}`}>
+			<img src={logo}></img> 
 			<span>Budget Remaining: ${budget - totalExpenses}</span>
 		</div>
 	);
--- a/src/components/ViewBudget.js
+++ b/src/components/ViewBudget.js
@ -1,8 +1,11 @@
 import React from 'react';
+import './css/ViewBudget.css'
+import logo from './widget_logos/current_balance_logo.png';

 const ViewBudget = (props) => {
 	return (
 		<>
+			<img src={logo}></img> 
 			<span>Current Balance: ${props.budget}</span>
 			<button type='button' class='btn btn-primary' onClick={props.handleEditClick}>
 				Edit
--- a/src/components/budget.js
+++ b/src/components/budget.js
@ -20,7 +20,7 @@ const Budget = () => {
 	};

 	return (
-		<div class='alert alert-secondary p-3 d-flex align-items-center justify-content-between'>
+		<div class='alert alert-secondary d-flex align-items-center justify-content-between'>
 			{isEditing ? (
 				<EditBudget handleSaveClick={handleSaveClick} budget={budget} />
 			) : (
--- a/src/components/css/ExpenseTotal.css
+++ b/src/components/css/ExpenseTotal.css
--- a/src/components/css/Remaining.css
+++ b/src/components/css/Remaining.css
@ -0,0 +1,3 @@
+img {
+    width: 50px;
+}
--- a/src/components/css/ViewBudget.css
+++ b/src/components/css/ViewBudget.css
@ -0,0 +1,4 @@
+span {
+    float: right;
+    margin-right: 50px;
+}
--- a/src/components/widget_logos/budget_logo.png
+++ b/src/components/widget_logos/budget_logo.png
--- a/src/components/widget_logos/current_balance_logo.png
+++ b/src/components/widget_logos/current_balance_logo.png
--- a/src/components/widget_logos/expenses_logo.png
+++ b/src/components/widget_logos/expenses_logo.png
--- a/src/components/widget_logos/income_logo.png
+++ b/src/components/widget_logos/income_logo.png
--- a/src/context/AppContext.js
+++ b/src/context/AppContext.js
@ -29,11 +29,8 @@ export const AppReducer = (state, action) => {
 const initialState = {
 	budget: 2000,
 	expenses: [
-		{ id: uuidv4(), name: 'Groceries', cost: 50 },
-		{ id: uuidv4(), name: 'Leisure', cost: 300 },
-		{ id: uuidv4(), name: 'Pet', cost: 70 },
-		{ id: uuidv4(), name: 'Gas', cost: 40 },
-		{ id: uuidv4(), name: 'Rent', cost: 500 },
+		
+		
 	],
 };

--- a/src/pages/Dashboard.jsx
+++ b/src/pages/Dashboard.jsx
@ -7,6 +7,7 @@ import ExpenseTotal from '../components/ExpenseTotal';
 import ExpenseList from '../components/ExpenseList';
 import AddExpenseForm from '../components/AddExpenseForm';
 import RemainingBudget from '../components/Remaining';
+import AddIncome from '../components/AddIncome'

 export default function Dashboard() {
  return (
@ -24,18 +25,23 @@ export default function Dashboard() {
 						<ExpenseTotal />
 					</div>
 				</div>
-				<h3 className='mt-3'>Expenses</h3>
-				<div className='row '>
-					<div className='col-sm'>
-						<ExpenseList />
+				
+				<div className='row mt-3'>
+					<div className='col-sm alert alert-secondary'>
+						<h3 className='mt-3'>Expenses</h3><ExpenseList />
 					</div>
 				</div>
-				<h3 className='mt-3'>Add Expense</h3>
 				<div className='row mt-3'>
 					<div className='col-sm'>
 						<AddExpenseForm />
 					</div>
 				</div>
+				
+				<div className='row mt-3'>
+					<div className='col-sm'>
+						{/*<h3 className='mt-3'>Add Income</h3><AddIncome /> */}
+					</div>
+				</div>
 			</div>
 		</AppProvider>
 	);