package-lock.json

@@ -3485,6 +3485,7 @@
       "version": "8.19.0",
       "resolved": "https://registry.npmjs.org/@testing-library/dom/-/dom-8.19.0.tgz",
       "integrity": "sha512-6YWYPPpxG3e/xOo6HIWwB/58HukkwIVTOaZ0VwdMVjhRUX/01E4FtQbck9GazOOj7MXHc5RBzMrU86iBJHbI+A==",
+      "dev": true,
       "dependencies": {
         "@babel/code-frame": "^7.10.4",
         "@babel/runtime": "^7.12.5",
@@ -3503,6 +3504,7 @@
       "version": "7.14.0",
       "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.14.0.tgz",
       "integrity": "sha512-JELkvo/DlpNdJ7dlyw/eY7E0suy5i5GQH+Vlxaq1nsNJ+H7f4Vtv3jMeCEgRhZZQFXTjldYfQgv2qmM6M1v5wA==",
+      "dev": true,
       "dependencies": {
         "regenerator-runtime": "^0.13.4"
       }
@@ -3511,6 +3513,7 @@
       "version": "4.3.0",
       "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
       "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+      "dev": true,
       "dependencies": {
         "color-convert": "^2.0.1"
       },
@@ -3525,6 +3528,7 @@
       "version": "5.1.1",
       "resolved": "https://registry.npmjs.org/aria-query/-/aria-query-5.1.1.tgz",
       "integrity": "sha512-4cPQjOYM2mqq7mZG8CSxkUvL2Yv/x29VhGq5LKehTsxRnoVQps1YGt9NyjcNQsznEsD4rr8a6zGxqeNTqJWjpA==",
+      "dev": true,
       "dependencies": {
         "deep-equal": "^2.0.5"
       }
@@ -3533,6 +3537,7 @@
       "version": "4.1.1",
       "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.1.tgz",
       "integrity": "sha512-diHzdDKxcU+bAsUboHLPEDQiw0qEe0qd7SYUn3HgcFlWgbDcfLGswOHYeGrHKzG9z6UYf01d9VFMfZxPM1xZSg==",
+      "dev": true,
       "dependencies": {
         "ansi-styles": "^4.1.0",
         "supports-color": "^7.1.0"
@@ -3548,6 +3553,7 @@
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
       "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+      "dev": true,
       "dependencies": {
         "color-name": "~1.1.4"
       },
@@ -3558,12 +3564,14 @@
     "node_modules/@testing-library/dom/node_modules/color-name": {
       "version": "1.1.4",
       "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
-      "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA=="
+      "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
+      "dev": true
     },
     "node_modules/@testing-library/dom/node_modules/deep-equal": {
       "version": "2.0.5",
       "resolved": "https://registry.npmjs.org/deep-equal/-/deep-equal-2.0.5.tgz",
       "integrity": "sha512-nPiRgmbAtm1a3JsnLCf6/SLfXcjyN5v8L1TXzdCmHrXJ4hx+gW/w1YCcn7z8gJtSiDArZCgYtbao3QqLm/N1Sw==",
+      "dev": true,
       "dependencies": {
         "call-bind": "^1.0.0",
         "es-get-iterator": "^1.1.1",
@@ -3589,6 +3597,7 @@
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
       "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+      "dev": true,
       "engines": {
         "node": ">=8"
       }
@@ -3596,12 +3605,14 @@
     "node_modules/@testing-library/dom/node_modules/isarray": {
       "version": "2.0.5",
       "resolved": "https://registry.npmjs.org/isarray/-/isarray-2.0.5.tgz",
-      "integrity": "sha512-xHjhDr3cNBK0BzdUJSPXZntQUx/mwMS5Rw4A7lPJ90XGAO6ISP/ePDNuo0vhqOZU+UD5JoodwCAAoZQd3FeAKw=="
+      "integrity": "sha512-xHjhDr3cNBK0BzdUJSPXZntQUx/mwMS5Rw4A7lPJ90XGAO6ISP/ePDNuo0vhqOZU+UD5JoodwCAAoZQd3FeAKw==",
+      "dev": true
     },
     "node_modules/@testing-library/dom/node_modules/pretty-format": {
       "version": "27.5.1",
       "resolved": "https://registry.npmjs.org/pretty-format/-/pretty-format-27.5.1.tgz",
       "integrity": "sha512-Qb1gy5OrP5+zDf2Bvnzdl3jsTf1qXVMazbvCoKhtKqVs4/YK4ozX4gKQJJVyNe+cajNPn0KoC0MC3FUmaHWEmQ==",
+      "dev": true,
       "dependencies": {
         "ansi-regex": "^5.0.1",
         "ansi-styles": "^5.0.0",
@@ -3615,6 +3626,7 @@
       "version": "5.2.0",
       "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-5.2.0.tgz",
       "integrity": "sha512-Cxwpt2SfTzTtXcfOlzGEee8O+c+MmUgGrNiBcXnuWxuFJHe6a5Hz7qwhwe5OgaSYI0IJvkLqWX1ASG+cJOkEiA==",
+      "dev": true,
       "engines": {
         "node": ">=10"
       },
@@ -3626,6 +3638,7 @@
       "version": "7.2.0",
       "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
       "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+      "dev": true,
       "dependencies": {
         "has-flag": "^4.0.0"
       },
@@ -3803,7 +3816,8 @@
     "node_modules/@types/aria-query": {
       "version": "4.2.1",
       "resolved": "https://registry.npmjs.org/@types/aria-query/-/aria-query-4.2.1.tgz",
-      "integrity": "sha512-S6oPal772qJZHoRZLFc/XoZW2gFvwXusYUmXPXkgxJLuEk2vOt7jc4Yo6z/vtI0EBkbPBVrJJ0B+prLIKiWqHg=="
+      "integrity": "sha512-S6oPal772qJZHoRZLFc/XoZW2gFvwXusYUmXPXkgxJLuEk2vOt7jc4Yo6z/vtI0EBkbPBVrJJ0B+prLIKiWqHg==",
+      "dev": true
     },
     "node_modules/@types/babel__core": {
       "version": "7.1.14",
@@ -4961,6 +4975,7 @@
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/available-typed-arrays/-/available-typed-arrays-1.0.5.tgz",
       "integrity": "sha512-DMD0KiN46eipeziST1LPP/STfDU0sufISXmjSgvVsoU2tqxctQeASejWcfNtxYKqETM1UxQ8sp2OrSBWpHY6sw==",
+      "dev": true,
       "engines": {
         "node": ">= 0.4"
       },
@@ -7909,7 +7924,8 @@
     "node_modules/dom-accessibility-api": {
       "version": "0.5.14",
       "resolved": "https://registry.npmjs.org/dom-accessibility-api/-/dom-accessibility-api-0.5.14.tgz",
-      "integrity": "sha512-NMt+m9zFMPZe0JcY9gN224Qvk6qLIdqex29clBvc/y75ZBX9YA9wNK3frsYvu2DI1xcCIwxwnX+TlsJ2DSOADg=="
+      "integrity": "sha512-NMt+m9zFMPZe0JcY9gN224Qvk6qLIdqex29clBvc/y75ZBX9YA9wNK3frsYvu2DI1xcCIwxwnX+TlsJ2DSOADg==",
+      "dev": true
     },
     "node_modules/dom-converter": {
       "version": "0.2.0",
@@ -8314,6 +8330,7 @@
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/es-get-iterator/-/es-get-iterator-1.1.2.tgz",
       "integrity": "sha512-+DTO8GYwbMCwbywjimwZMHp8AuYXOS2JZFWoi2AlPOS3ebnII9w/NLpNZtA7A0YLaVDw+O7KFCeoIV7OPvM7hQ==",
+      "dev": true,
       "dependencies": {
         "call-bind": "^1.0.2",
         "get-intrinsic": "^1.1.0",
@@ -8331,7 +8348,8 @@
     "node_modules/es-get-iterator/node_modules/isarray": {
       "version": "2.0.5",
       "resolved": "https://registry.npmjs.org/isarray/-/isarray-2.0.5.tgz",
-      "integrity": "sha512-xHjhDr3cNBK0BzdUJSPXZntQUx/mwMS5Rw4A7lPJ90XGAO6ISP/ePDNuo0vhqOZU+UD5JoodwCAAoZQd3FeAKw=="
+      "integrity": "sha512-xHjhDr3cNBK0BzdUJSPXZntQUx/mwMS5Rw4A7lPJ90XGAO6ISP/ePDNuo0vhqOZU+UD5JoodwCAAoZQd3FeAKw==",
+      "dev": true
     },
     "node_modules/es-to-primitive": {
       "version": "1.2.1",
@@ -10092,6 +10110,7 @@
       "version": "0.3.3",
       "resolved": "https://registry.npmjs.org/for-each/-/for-each-0.3.3.tgz",
       "integrity": "sha512-jqYfLp7mo9vIyQf8ykW2v7A+2N4QjeCeI5+Dz9XraiO1ign81wjiH7Fb9vSOWvQfNtmSa4H2RoQTrrXivdUZmw==",
+      "dev": true,
       "dependencies": {
         "is-callable": "^1.1.3"
       }
@@ -11872,6 +11891,7 @@
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/is-map/-/is-map-2.0.2.tgz",
       "integrity": "sha512-cOZFQQozTha1f4MxLFzlgKYPTyj26picdZTx82hbc/Xf4K/tZOOXSCkMvU4pKioRXGDLJRn0GM7Upe7kR721yg==",
+      "dev": true,
       "funding": {
         "url": "https://github.com/sponsors/ljharb"
       }
@@ -12029,6 +12049,7 @@
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/is-set/-/is-set-2.0.2.tgz",
       "integrity": "sha512-+2cnTEZeY5z/iXGbLhPrOAaK/Mau5k5eXq9j14CpRTftq0pAJu2MwVRSZhyZWBzx3o6X795Lz6Bpb6R0GKf37g==",
+      "dev": true,
       "funding": {
         "url": "https://github.com/sponsors/ljharb"
       }
@@ -12087,6 +12108,7 @@
       "version": "1.1.9",
       "resolved": "https://registry.npmjs.org/is-typed-array/-/is-typed-array-1.1.9.tgz",
       "integrity": "sha512-kfrlnTTn8pZkfpJMUgYD7YZ3qzeJgWUn8XfVYBARc4wnmNOmLbmuuaAs3q5fvB0UJOn6yHAKaGTPM7d6ezoD/A==",
+      "dev": true,
       "dependencies": {
         "available-typed-arrays": "^1.0.5",
         "call-bind": "^1.0.2",
@@ -12110,6 +12132,7 @@
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/is-weakmap/-/is-weakmap-2.0.1.tgz",
       "integrity": "sha512-NSBR4kH5oVj1Uwvv970ruUkCV7O1mzgVFO4/rev2cLRda9Tm9HrL70ZPut4rOHgY0FNrUu9BCbXA2sdQ+x0chA==",
+      "dev": true,
       "funding": {
         "url": "https://github.com/sponsors/ljharb"
       }
@@ -12129,6 +12152,7 @@
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/is-weakset/-/is-weakset-2.0.2.tgz",
       "integrity": "sha512-t2yVvttHkQktwnNNmBQ98AhENLdPUTDTE21uPqAQ0ARwQfGeQKRVS0NNurH7bTf7RrvcVn1OOge45CnBeHCSmg==",
+      "dev": true,
       "dependencies": {
         "call-bind": "^1.0.2",
         "get-intrinsic": "^1.1.1"
@@ -14945,6 +14969,7 @@
       "version": "1.4.4",
       "resolved": "https://registry.npmjs.org/lz-string/-/lz-string-1.4.4.tgz",
       "integrity": "sha1-wNjq82BZ9wV5bh40SBHPTEmNOiY=",
+      "dev": true,
       "bin": {
         "lz-string": "bin/bin.js"
       }
@@ -17846,6 +17871,7 @@
       "version": "2.3.1",
       "resolved": "https://registry.npmjs.org/prettier/-/prettier-2.3.1.tgz",
       "integrity": "sha512-p+vNbgpLjif/+D+DwAZAbndtRrR0md0MwfmOVN9N+2RgyACMT+7tfaRnT+WDPkqnuVwleyuBIG2XBxKDme3hPA==",
+      "dev": true,
       "bin": {
         "prettier": "bin-prettier.js"
       },
@@ -21863,19 +21889,6 @@
         "node": ">=4"
       }
     },
-    "node_modules/type-fest": {
-      "version": "0.13.1",
-      "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.13.1.tgz",
-      "integrity": "sha512-34R7HTnG0XIJcBSn5XhDd7nNFPRcXYRZrBB2O2jdKqYODldSzBAqzsWoZYYvduky73toYS/ESqxPvkDf/F0XMg==",
-      "optional": true,
-      "peer": true,
-      "engines": {
-        "node": ">=10"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
     "node_modules/type-is": {
       "version": "1.6.18",
       "resolved": "https://registry.npmjs.org/type-is/-/type-is-1.6.18.tgz",
@@ -21901,19 +21914,6 @@
         "is-typedarray": "^1.0.0"
       }
     },
-    "node_modules/typescript": {
-      "version": "4.8.4",
-      "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.8.4.tgz",
-      "integrity": "sha512-QCh+85mCy+h0IGff8r5XWzOVSbBO+KfeYrMQh7NJ58QujwcE22u+NUSmUxqF+un70P9GXKxa2HCNiTTMJknyjQ==",
-      "peer": true,
-      "bin": {
-        "tsc": "bin/tsc",
-        "tsserver": "bin/tsserver"
-      },
-      "engines": {
-        "node": ">=4.2.0"
-      }
-    },
     "node_modules/typescript-compare": {
       "version": "0.0.2",
       "resolved": "https://registry.npmjs.org/typescript-compare/-/typescript-compare-0.0.2.tgz",
@@ -23946,6 +23946,7 @@
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/which-collection/-/which-collection-1.0.1.tgz",
       "integrity": "sha512-W8xeTUwaln8i3K/cY1nGXzdnVZlidBcagyNFtBdD5kxnb4TvGKR7FfSIS3mYpwWS1QUCutfKz8IY8RjftB0+1A==",
+      "dev": true,
       "dependencies": {
         "is-map": "^2.0.1",
         "is-set": "^2.0.1",
@@ -23965,6 +23966,7 @@
       "version": "1.1.8",
       "resolved": "https://registry.npmjs.org/which-typed-array/-/which-typed-array-1.1.8.tgz",
       "integrity": "sha512-Jn4e5PItbcAHyLoRDwvPj1ypu27DJbtdYXUa5zsinrUx77Uvfb0cXwwnGMTn7cjUfhhqgVQnVJCwF+7cgU7tpw==",
+      "dev": true,
       "dependencies": {
         "available-typed-arrays": "^1.0.5",
         "call-bind": "^1.0.2",
@@ -25794,8 +25796,7 @@
     "@emotion/use-insertion-effect-with-fallbacks": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/@emotion/use-insertion-effect-with-fallbacks/-/use-insertion-effect-with-fallbacks-1.0.0.tgz",
-      "integrity": "sha512-1eEgUGmkaljiBnRMTdksDV1W4kUnmwgp7X9G8B++9GYwl1lUdqSndSriIrTJ0N7LQaoauY9JJ2yhiOYK5+NI4A==",
-      "requires": {}
+      "integrity": "sha512-1eEgUGmkaljiBnRMTdksDV1W4kUnmwgp7X9G8B++9GYwl1lUdqSndSriIrTJ0N7LQaoauY9JJ2yhiOYK5+NI4A=="
     },
     "@emotion/utils": {
       "version": "1.2.0",
@@ -26586,8 +26587,7 @@
     "@mui/types": {
       "version": "7.2.0",
       "resolved": "https://registry.npmjs.org/@mui/types/-/types-7.2.0.tgz",
-      "integrity": "sha512-lGXtFKe5lp3UxTBGqKI1l7G8sE2xBik8qCfrLHD5olwP/YU0/ReWoWT7Lp1//ri32dK39oPMrJN8TgbkCSbsNA==",
-      "requires": {}
+      "integrity": "sha512-lGXtFKe5lp3UxTBGqKI1l7G8sE2xBik8qCfrLHD5olwP/YU0/ReWoWT7Lp1//ri32dK39oPMrJN8TgbkCSbsNA=="
     },
     "@mui/utils": {
       "version": "5.10.9",
@@ -26956,6 +26956,7 @@
       "version": "8.19.0",
       "resolved": "https://registry.npmjs.org/@testing-library/dom/-/dom-8.19.0.tgz",
       "integrity": "sha512-6YWYPPpxG3e/xOo6HIWwB/58HukkwIVTOaZ0VwdMVjhRUX/01E4FtQbck9GazOOj7MXHc5RBzMrU86iBJHbI+A==",
+      "dev": true,
       "requires": {
         "@babel/code-frame": "^7.10.4",
         "@babel/runtime": "^7.12.5",
@@ -26971,6 +26972,7 @@
           "version": "7.14.0",
           "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.14.0.tgz",
           "integrity": "sha512-JELkvo/DlpNdJ7dlyw/eY7E0suy5i5GQH+Vlxaq1nsNJ+H7f4Vtv3jMeCEgRhZZQFXTjldYfQgv2qmM6M1v5wA==",
+          "dev": true,
           "requires": {
             "regenerator-runtime": "^0.13.4"
           }
@@ -26979,6 +26981,7 @@
           "version": "4.3.0",
           "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
           "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+          "dev": true,
           "requires": {
             "color-convert": "^2.0.1"
           }
@@ -26987,6 +26990,7 @@
           "version": "5.1.1",
           "resolved": "https://registry.npmjs.org/aria-query/-/aria-query-5.1.1.tgz",
           "integrity": "sha512-4cPQjOYM2mqq7mZG8CSxkUvL2Yv/x29VhGq5LKehTsxRnoVQps1YGt9NyjcNQsznEsD4rr8a6zGxqeNTqJWjpA==",
+          "dev": true,
           "requires": {
             "deep-equal": "^2.0.5"
           }
@@ -26995,6 +26999,7 @@
           "version": "4.1.1",
           "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.1.tgz",
           "integrity": "sha512-diHzdDKxcU+bAsUboHLPEDQiw0qEe0qd7SYUn3HgcFlWgbDcfLGswOHYeGrHKzG9z6UYf01d9VFMfZxPM1xZSg==",
+          "dev": true,
           "requires": {
             "ansi-styles": "^4.1.0",
             "supports-color": "^7.1.0"
@@ -27004,6 +27009,7 @@
           "version": "2.0.1",
           "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
           "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+          "dev": true,
           "requires": {
             "color-name": "~1.1.4"
           }
@@ -27011,12 +27017,14 @@
         "color-name": {
           "version": "1.1.4",
           "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
-          "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA=="
+          "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
+          "dev": true
         },
         "deep-equal": {
           "version": "2.0.5",
           "resolved": "https://registry.npmjs.org/deep-equal/-/deep-equal-2.0.5.tgz",
           "integrity": "sha512-nPiRgmbAtm1a3JsnLCf6/SLfXcjyN5v8L1TXzdCmHrXJ4hx+gW/w1YCcn7z8gJtSiDArZCgYtbao3QqLm/N1Sw==",
+          "dev": true,
           "requires": {
             "call-bind": "^1.0.0",
             "es-get-iterator": "^1.1.1",
@@ -27038,17 +27046,20 @@
         "has-flag": {
           "version": "4.0.0",
           "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
-          "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ=="
+          "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+          "dev": true
         },
         "isarray": {
           "version": "2.0.5",
           "resolved": "https://registry.npmjs.org/isarray/-/isarray-2.0.5.tgz",
-          "integrity": "sha512-xHjhDr3cNBK0BzdUJSPXZntQUx/mwMS5Rw4A7lPJ90XGAO6ISP/ePDNuo0vhqOZU+UD5JoodwCAAoZQd3FeAKw=="
+          "integrity": "sha512-xHjhDr3cNBK0BzdUJSPXZntQUx/mwMS5Rw4A7lPJ90XGAO6ISP/ePDNuo0vhqOZU+UD5JoodwCAAoZQd3FeAKw==",
+          "dev": true
         },
         "pretty-format": {
           "version": "27.5.1",
           "resolved": "https://registry.npmjs.org/pretty-format/-/pretty-format-27.5.1.tgz",
           "integrity": "sha512-Qb1gy5OrP5+zDf2Bvnzdl3jsTf1qXVMazbvCoKhtKqVs4/YK4ozX4gKQJJVyNe+cajNPn0KoC0MC3FUmaHWEmQ==",
+          "dev": true,
           "requires": {
             "ansi-regex": "^5.0.1",
             "ansi-styles": "^5.0.0",
@@ -27058,7 +27069,8 @@
             "ansi-styles": {
               "version": "5.2.0",
               "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-5.2.0.tgz",
-              "integrity": "sha512-Cxwpt2SfTzTtXcfOlzGEee8O+c+MmUgGrNiBcXnuWxuFJHe6a5Hz7qwhwe5OgaSYI0IJvkLqWX1ASG+cJOkEiA=="
+              "integrity": "sha512-Cxwpt2SfTzTtXcfOlzGEee8O+c+MmUgGrNiBcXnuWxuFJHe6a5Hz7qwhwe5OgaSYI0IJvkLqWX1ASG+cJOkEiA==",
+              "dev": true
             }
           }
         },
@@ -27066,6 +27078,7 @@
           "version": "7.2.0",
           "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
           "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+          "dev": true,
           "requires": {
             "has-flag": "^4.0.0"
           }
@@ -27204,7 +27217,8 @@
     "@types/aria-query": {
       "version": "4.2.1",
       "resolved": "https://registry.npmjs.org/@types/aria-query/-/aria-query-4.2.1.tgz",
-      "integrity": "sha512-S6oPal772qJZHoRZLFc/XoZW2gFvwXusYUmXPXkgxJLuEk2vOt7jc4Yo6z/vtI0EBkbPBVrJJ0B+prLIKiWqHg=="
+      "integrity": "sha512-S6oPal772qJZHoRZLFc/XoZW2gFvwXusYUmXPXkgxJLuEk2vOt7jc4Yo6z/vtI0EBkbPBVrJJ0B+prLIKiWqHg==",
+      "dev": true
     },
     "@types/babel__core": {
       "version": "7.1.14",
@@ -27822,8 +27836,7 @@
     "acorn-jsx": {
       "version": "5.3.2",
       "resolved": "https://registry.npmjs.org/acorn-jsx/-/acorn-jsx-5.3.2.tgz",
-      "integrity": "sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==",
-      "requires": {}
+      "integrity": "sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ=="
     },
     "acorn-walk": {
       "version": "7.2.0",
@@ -27875,14 +27888,12 @@
     "ajv-errors": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/ajv-errors/-/ajv-errors-1.0.1.tgz",
-      "integrity": "sha512-DCRfO/4nQ+89p/RK43i8Ezd41EqdGIU4ld7nGF8OQ14oc/we5rEntLCUa7+jrn3nn83BosfwZA0wb4pon2o8iQ==",
-      "requires": {}
+      "integrity": "sha512-DCRfO/4nQ+89p/RK43i8Ezd41EqdGIU4ld7nGF8OQ14oc/we5rEntLCUa7+jrn3nn83BosfwZA0wb4pon2o8iQ=="
     },
     "ajv-keywords": {
       "version": "3.5.2",
       "resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-3.5.2.tgz",
-      "integrity": "sha512-5p6WTN0DdTGVQk6VjcEju19IgaHudalcfabD7yhDGeA6bcQnmL+CpveLJq/3hvfwd1aof6L386Ougkx6RfyMIQ==",
-      "requires": {}
+      "integrity": "sha512-5p6WTN0DdTGVQk6VjcEju19IgaHudalcfabD7yhDGeA6bcQnmL+CpveLJq/3hvfwd1aof6L386Ougkx6RfyMIQ=="
     },
     "alphanum-sort": {
       "version": "1.0.2",
@@ -28156,7 +28167,8 @@
     "available-typed-arrays": {
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/available-typed-arrays/-/available-typed-arrays-1.0.5.tgz",
-      "integrity": "sha512-DMD0KiN46eipeziST1LPP/STfDU0sufISXmjSgvVsoU2tqxctQeASejWcfNtxYKqETM1UxQ8sp2OrSBWpHY6sw=="
+      "integrity": "sha512-DMD0KiN46eipeziST1LPP/STfDU0sufISXmjSgvVsoU2tqxctQeASejWcfNtxYKqETM1UxQ8sp2OrSBWpHY6sw==",
+      "dev": true
     },
     "axe-core": {
       "version": "4.2.2",
@@ -28354,8 +28366,7 @@
     "babel-plugin-named-asset-import": {
       "version": "0.3.7",
       "resolved": "https://registry.npmjs.org/babel-plugin-named-asset-import/-/babel-plugin-named-asset-import-0.3.7.tgz",
-      "integrity": "sha512-squySRkf+6JGnvjoUtDEjSREJEBirnXi9NqP6rjSYsylxQxqBTz+pkmf395i9E2zsvmYUaI40BHo6SqZUdydlw==",
-      "requires": {}
+      "integrity": "sha512-squySRkf+6JGnvjoUtDEjSREJEBirnXi9NqP6rjSYsylxQxqBTz+pkmf395i9E2zsvmYUaI40BHo6SqZUdydlw=="
     },
     "babel-plugin-polyfill-corejs2": {
       "version": "0.2.2",
@@ -30490,7 +30501,8 @@
     "dom-accessibility-api": {
       "version": "0.5.14",
       "resolved": "https://registry.npmjs.org/dom-accessibility-api/-/dom-accessibility-api-0.5.14.tgz",
-      "integrity": "sha512-NMt+m9zFMPZe0JcY9gN224Qvk6qLIdqex29clBvc/y75ZBX9YA9wNK3frsYvu2DI1xcCIwxwnX+TlsJ2DSOADg=="
+      "integrity": "sha512-NMt+m9zFMPZe0JcY9gN224Qvk6qLIdqex29clBvc/y75ZBX9YA9wNK3frsYvu2DI1xcCIwxwnX+TlsJ2DSOADg==",
+      "dev": true
     },
     "dom-converter": {
       "version": "0.2.0",
@@ -30842,6 +30854,7 @@
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/es-get-iterator/-/es-get-iterator-1.1.2.tgz",
       "integrity": "sha512-+DTO8GYwbMCwbywjimwZMHp8AuYXOS2JZFWoi2AlPOS3ebnII9w/NLpNZtA7A0YLaVDw+O7KFCeoIV7OPvM7hQ==",
+      "dev": true,
       "requires": {
         "call-bind": "^1.0.2",
         "get-intrinsic": "^1.1.0",
@@ -30856,7 +30869,8 @@
         "isarray": {
           "version": "2.0.5",
           "resolved": "https://registry.npmjs.org/isarray/-/isarray-2.0.5.tgz",
-          "integrity": "sha512-xHjhDr3cNBK0BzdUJSPXZntQUx/mwMS5Rw4A7lPJ90XGAO6ISP/ePDNuo0vhqOZU+UD5JoodwCAAoZQd3FeAKw=="
+          "integrity": "sha512-xHjhDr3cNBK0BzdUJSPXZntQUx/mwMS5Rw4A7lPJ90XGAO6ISP/ePDNuo0vhqOZU+UD5JoodwCAAoZQd3FeAKw==",
+          "dev": true
         }
       }
     },
@@ -31138,8 +31152,7 @@
       "version": "8.3.0",
       "resolved": "https://registry.npmjs.org/eslint-config-prettier/-/eslint-config-prettier-8.3.0.tgz",
       "integrity": "sha512-BgZuLUSeKzvlL/VUjx/Yb787VQ26RU3gGjA3iiFvdsp/2bMfVIWUVP7tjxtjS0e+HP409cPlPvNkQloz8C91ew==",
-      "dev": true,
-      "requires": {}
+      "dev": true
     },
     "eslint-config-react-app": {
       "version": "6.0.0",
@@ -31373,8 +31386,7 @@
     "eslint-plugin-react-hooks": {
       "version": "4.2.0",
       "resolved": "https://registry.npmjs.org/eslint-plugin-react-hooks/-/eslint-plugin-react-hooks-4.2.0.tgz",
-      "integrity": "sha512-623WEiZJqxR7VdxFCKLI6d6LLpwJkGPYKODnkH3D7WpOG5KM8yWueBd8TLsNAetEJNF5iJmolaAKO3F8yzyVBQ==",
-      "requires": {}
+      "integrity": "sha512-623WEiZJqxR7VdxFCKLI6d6LLpwJkGPYKODnkH3D7WpOG5KM8yWueBd8TLsNAetEJNF5iJmolaAKO3F8yzyVBQ=="
     },
     "eslint-plugin-security": {
       "version": "1.4.0",
@@ -32168,6 +32180,7 @@
       "version": "0.3.3",
       "resolved": "https://registry.npmjs.org/for-each/-/for-each-0.3.3.tgz",
       "integrity": "sha512-jqYfLp7mo9vIyQf8ykW2v7A+2N4QjeCeI5+Dz9XraiO1ign81wjiH7Fb9vSOWvQfNtmSa4H2RoQTrrXivdUZmw==",
+      "dev": true,
       "requires": {
         "is-callable": "^1.1.3"
       }
@@ -33547,7 +33560,8 @@
     "is-map": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/is-map/-/is-map-2.0.2.tgz",
-      "integrity": "sha512-cOZFQQozTha1f4MxLFzlgKYPTyj26picdZTx82hbc/Xf4K/tZOOXSCkMvU4pKioRXGDLJRn0GM7Upe7kR721yg=="
+      "integrity": "sha512-cOZFQQozTha1f4MxLFzlgKYPTyj26picdZTx82hbc/Xf4K/tZOOXSCkMvU4pKioRXGDLJRn0GM7Upe7kR721yg==",
+      "dev": true
     },
     "is-module": {
       "version": "1.0.0",
@@ -33650,7 +33664,8 @@
     "is-set": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/is-set/-/is-set-2.0.2.tgz",
-      "integrity": "sha512-+2cnTEZeY5z/iXGbLhPrOAaK/Mau5k5eXq9j14CpRTftq0pAJu2MwVRSZhyZWBzx3o6X795Lz6Bpb6R0GKf37g=="
+      "integrity": "sha512-+2cnTEZeY5z/iXGbLhPrOAaK/Mau5k5eXq9j14CpRTftq0pAJu2MwVRSZhyZWBzx3o6X795Lz6Bpb6R0GKf37g==",
+      "dev": true
     },
     "is-shared-array-buffer": {
       "version": "1.0.2",
@@ -33685,6 +33700,7 @@
       "version": "1.1.9",
       "resolved": "https://registry.npmjs.org/is-typed-array/-/is-typed-array-1.1.9.tgz",
       "integrity": "sha512-kfrlnTTn8pZkfpJMUgYD7YZ3qzeJgWUn8XfVYBARc4wnmNOmLbmuuaAs3q5fvB0UJOn6yHAKaGTPM7d6ezoD/A==",
+      "dev": true,
       "requires": {
         "available-typed-arrays": "^1.0.5",
         "call-bind": "^1.0.2",
@@ -33701,7 +33717,8 @@
     "is-weakmap": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/is-weakmap/-/is-weakmap-2.0.1.tgz",
-      "integrity": "sha512-NSBR4kH5oVj1Uwvv970ruUkCV7O1mzgVFO4/rev2cLRda9Tm9HrL70ZPut4rOHgY0FNrUu9BCbXA2sdQ+x0chA=="
+      "integrity": "sha512-NSBR4kH5oVj1Uwvv970ruUkCV7O1mzgVFO4/rev2cLRda9Tm9HrL70ZPut4rOHgY0FNrUu9BCbXA2sdQ+x0chA==",
+      "dev": true
     },
     "is-weakref": {
       "version": "1.0.2",
@@ -33715,6 +33732,7 @@
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/is-weakset/-/is-weakset-2.0.2.tgz",
       "integrity": "sha512-t2yVvttHkQktwnNNmBQ98AhENLdPUTDTE21uPqAQ0ARwQfGeQKRVS0NNurH7bTf7RrvcVn1OOge45CnBeHCSmg==",
+      "dev": true,
       "requires": {
         "call-bind": "^1.0.2",
         "get-intrinsic": "^1.1.1"
@@ -34504,8 +34522,7 @@
     "jest-pnp-resolver": {
       "version": "1.2.2",
       "resolved": "https://registry.npmjs.org/jest-pnp-resolver/-/jest-pnp-resolver-1.2.2.tgz",
-      "integrity": "sha512-olV41bKSMm8BdnuMsewT4jqlZ8+3TCARAXjZGT9jcoSnrfUnRCqnMoF9XEeoWjbzObpqF9dRhHQj0Xb9QdF6/w==",
-      "requires": {}
+      "integrity": "sha512-olV41bKSMm8BdnuMsewT4jqlZ8+3TCARAXjZGT9jcoSnrfUnRCqnMoF9XEeoWjbzObpqF9dRhHQj0Xb9QdF6/w=="
     },
     "jest-regex-util": {
       "version": "26.0.0",
@@ -35837,7 +35854,8 @@
     "lz-string": {
       "version": "1.4.4",
       "resolved": "https://registry.npmjs.org/lz-string/-/lz-string-1.4.4.tgz",
-      "integrity": "sha1-wNjq82BZ9wV5bh40SBHPTEmNOiY="
+      "integrity": "sha1-wNjq82BZ9wV5bh40SBHPTEmNOiY=",
+      "dev": true
     },
     "magic-string": {
       "version": "0.25.7",
@@ -38168,7 +38186,8 @@
     "prettier": {
       "version": "2.3.1",
       "resolved": "https://registry.npmjs.org/prettier/-/prettier-2.3.1.tgz",
-      "integrity": "sha512-p+vNbgpLjif/+D+DwAZAbndtRrR0md0MwfmOVN9N+2RgyACMT+7tfaRnT+WDPkqnuVwleyuBIG2XBxKDme3hPA=="
+      "integrity": "sha512-p+vNbgpLjif/+D+DwAZAbndtRrR0md0MwfmOVN9N+2RgyACMT+7tfaRnT+WDPkqnuVwleyuBIG2XBxKDme3hPA==",
+      "dev": true
     },
     "prettier-linter-helpers": {
       "version": "1.0.0",
@@ -39078,8 +39097,7 @@
     "redux-thunk": {
       "version": "2.4.1",
       "resolved": "https://registry.npmjs.org/redux-thunk/-/redux-thunk-2.4.1.tgz",
-      "integrity": "sha512-OOYGNY5Jy2TWvTL1KgAlVy6dcx3siPJ1wTq741EPyUKfn6W6nChdICjZwCd0p8AZBs5kWpZlbkXW2nE/zjUa+Q==",
-      "requires": {}
+      "integrity": "sha512-OOYGNY5Jy2TWvTL1KgAlVy6dcx3siPJ1wTq741EPyUKfn6W6nChdICjZwCd0p8AZBs5kWpZlbkXW2nE/zjUa+Q=="
     },
     "regenerate": {
       "version": "1.4.2",
@@ -41355,13 +41373,6 @@
       "resolved": "https://registry.npmjs.org/type-detect/-/type-detect-4.0.8.tgz",
       "integrity": "sha512-0fr/mIH1dlO+x7TlcMy+bIDqKPsw/70tVyeHW787goQjhmqaZe10uwLujubK9q9Lg6Fiho1KUKDYz0Z7k7g5/g=="
     },
-    "type-fest": {
-      "version": "0.13.1",
-      "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.13.1.tgz",
-      "integrity": "sha512-34R7HTnG0XIJcBSn5XhDd7nNFPRcXYRZrBB2O2jdKqYODldSzBAqzsWoZYYvduky73toYS/ESqxPvkDf/F0XMg==",
-      "optional": true,
-      "peer": true
-    },
     "type-is": {
       "version": "1.6.18",
       "resolved": "https://registry.npmjs.org/type-is/-/type-is-1.6.18.tgz",
@@ -41384,12 +41395,6 @@
         "is-typedarray": "^1.0.0"
       }
     },
-    "typescript": {
-      "version": "4.8.4",
-      "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.8.4.tgz",
-      "integrity": "sha512-QCh+85mCy+h0IGff8r5XWzOVSbBO+KfeYrMQh7NJ58QujwcE22u+NUSmUxqF+un70P9GXKxa2HCNiTTMJknyjQ==",
-      "peer": true
-    },
     "typescript-compare": {
       "version": "0.0.2",
       "resolved": "https://registry.npmjs.org/typescript-compare/-/typescript-compare-0.0.2.tgz",
@@ -43011,6 +43016,7 @@
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/which-collection/-/which-collection-1.0.1.tgz",
       "integrity": "sha512-W8xeTUwaln8i3K/cY1nGXzdnVZlidBcagyNFtBdD5kxnb4TvGKR7FfSIS3mYpwWS1QUCutfKz8IY8RjftB0+1A==",
+      "dev": true,
       "requires": {
         "is-map": "^2.0.1",
         "is-set": "^2.0.1",
@@ -43027,6 +43033,7 @@
       "version": "1.1.8",
       "resolved": "https://registry.npmjs.org/which-typed-array/-/which-typed-array-1.1.8.tgz",
       "integrity": "sha512-Jn4e5PItbcAHyLoRDwvPj1ypu27DJbtdYXUa5zsinrUx77Uvfb0cXwwnGMTn7cjUfhhqgVQnVJCwF+7cgU7tpw==",
+      "dev": true,
       "requires": {
         "available-typed-arrays": "^1.0.5",
         "call-bind": "^1.0.2",
@@ -43314,8 +43321,7 @@
     "ws": {
       "version": "7.4.6",
       "resolved": "https://registry.npmjs.org/ws/-/ws-7.4.6.tgz",
-      "integrity": "sha512-YmhHDO4MzaDLB+M9ym/mDA5z0naX8j7SIlT8f8z+I0VtzsRbekxEutHSme7NPS2qE8StCYQNUnfWdXta/Yu85A==",
-      "requires": {}
+      "integrity": "sha512-YmhHDO4MzaDLB+M9ym/mDA5z0naX8j7SIlT8f8z+I0VtzsRbekxEutHSme7NPS2qE8StCYQNUnfWdXta/Yu85A=="
     },
     "xdg-basedir": {
       "version": "4.0.0",

src/assets/styles/components/_nav.scss

@@ -1,6 +1,6 @@
 .full-rounded{
-    height: 40px;
-    width: 40px;
+    height: 40px !important;
+    width: 40px !important;
     font-size: 16px;
     @include flex-center;
     border-radius: 50%;

src/assets/styles/components/_user-profile.scss

@@ -0,0 +1,31 @@
+.user-view {
+  position: absolute;
+  width: 342px;
+  height: 317px;
+  background-color: red;
+  top: calc($navHeight + 1rem);
+  z-index: 1000;
+  right: -360px;
+  background: #ffffff;
+  /* Main Shadow 12% */
+  transition: .35s;
+  opacity: .25;
+
+  box-shadow: 4px 4px 18px rgba(29, 29, 29, 0.12);
+  border-radius: 18px;
+  animation: userView .35s !important;
+}
+
+.user-view.active{
+  right: 1rem;
+  opacity: 1;
+}
+
+@keyframes userView {
+    0%{
+        opacity: 0;
+    }
+    100%{
+        opacity: 1;
+    }
+}

src/components/MUI/NavbarComponent.js

@@ -1,4 +1,4 @@
-import React, { useState, useMemo } from "react";
+import React, { useState, useMemo, useRef, useEffect } from "react";
 import {
   AppBar,
   // Badge,
@@ -29,6 +29,9 @@ import Drawer from "./DrawerComponent";
 import { useTranslation } from "react-i18next";
 import CloseIcon from "@mui/icons-material/Close";
 import LogoutIcon from "@mui/icons-material/Logout";
+import UserProfile from "../Profile/UserProfile";
+import { useSelector } from "react-redux";
+import { userSelector } from "../../store/selectors/userSelectors";
 
 const NavbarComponent = () => {
   const navItems = [
@@ -39,18 +42,46 @@ const NavbarComponent = () => {
     "patterns",
     "stats",
     "users",
+    // "signOut"
   ];
   const [openDrawer, setOpenDrawer] = useState(false);
+  const [preview, setPreview] = useState(false);
   const theme = useTheme();
   const matches = useMediaQuery(theme.breakpoints.down("sm"));
   // const toggleColorMode = useContext(ColorModeContext);
 
+  let userRef = useRef();
+  let btnRef = useRef();
+
+  // get authenticated user
+  const user = useSelector(userSelector)
+
   const { t } = useTranslation();
 
   const handleToggleDrawer = () => {
     setOpenDrawer(!openDrawer);
   };
 
+  const userPreviewHandler = () => {
+    setPreview(!preview);
+  };
+
+  useEffect(() => {
+    let handler = (e) => {
+      if (userRef.current) {
+        if (!userRef.current.contains(e.target) && !btnRef.current.contains(e.target)) {
+          setPreview(false);
+        }
+      }
+    };
+
+    document.addEventListener("mousedown", handler, { capture: true });
+
+    return () => {
+      document.removeEventListener("mousedown", handler, { capture: true });
+    };
+  }, []);
+
   const drawerContent = useMemo(
     () => (
       <div style={{ width: "100vw", padding: "36px" }}>
@@ -72,10 +103,10 @@ const NavbarComponent = () => {
           <img src={avatarLogo} width="64px" height="64px" />
           <Typography
             variant="h5"
-            sx={{ fontSize: "18px", marginTop: "15px", }}
+            sx={{ fontSize: "18px", marginTop: "15px" }}
             className="text-blue"
           >
-            Danijela Ranđelović
+            {user.firstName + " " + user.lastName}
           </Typography>
           <Typography
             variant="body1"
@@ -130,7 +161,7 @@ const NavbarComponent = () => {
               borderRadius: "9px",
               background: "white",
               width: "90%",
-              marginTop: '50px'
+              marginTop: "50px",
             }}
             startIcon={<LogoutIcon />}
           >
@@ -181,7 +212,10 @@ const NavbarComponent = () => {
           >
             {matches ? (
               <Box>
-                <IconButton sx={{marginLeft: '15px'}} onClick={handleToggleDrawer}>
+                <IconButton
+                  sx={{ marginLeft: "15px" }}
+                  onClick={handleToggleDrawer}
+                >
                   <MenuOutlinedIcon />
                 </IconButton>
               </Box>
@@ -239,9 +273,17 @@ const NavbarComponent = () => {
               <div className="search-Icon">
                 <img src={searchIcon} />
               </div>
-              <div className="full-rounded">DR</div>
+              <div
+                onClick={userPreviewHandler}
+                className="full-rounded user-avatar"
+                ref={btnRef}
+              >
+                {/* user.profilePic ? user.profilePic : */}
+                {user.firstName[0] + "" + user.lastName[0]}
+              </div>
             </Box>
           )}
+          {!matches && <UserProfile innerRef={userRef}  show={preview}/>}
           {/* <Box>
             <MenuList />
           </Box> */}

src/components/Profile/UserProfile.js

@@ -0,0 +1,61 @@
+import { Button, Typography } from "@mui/material";
+import { Box } from "@mui/system";
+import LogoutIcon from "@mui/icons-material/Logout";
+import React from "react";
+import { useTranslation } from "react-i18next";
+import avatarLogo from "../../assets/images/Avatar.png";
+import PropTypes from "prop-types";
+import { userSelector } from "../../store/selectors/userSelectors";
+import { useSelector } from "react-redux";
+
+const UserProfile = ({ show, innerRef }) => {
+  const { t } = useTranslation();
+  //   const theme = useTheme();
+  //   const matches = useMediaQuery(theme.breakpoints.down("sm"));
+  const user = useSelector(userSelector);
+  return (
+    <Box className={`user-view flex-center ${show && "active"}`}>
+      <div
+        ref={innerRef}
+        className="flex-center flex-col"
+        style={{ width: "90%" }}
+      >
+        <img src={avatarLogo} width="64px" height="64px" />
+        <Typography
+          variant="h5"
+          sx={{ fontSize: "18px", marginTop: "15px" }}
+          className="text-blue"
+        >
+          {user.firstName + " " + user.lastName}
+        </Typography>
+        <Typography
+          variant="body1"
+          sx={{ fontSize: "14px", marginTop: "8px" }}
+          className="text-grey9d"
+        >
+          HR Specialist
+        </Typography>
+        {/* <div className="hr" style={{ width: "90%", marginTop: "18px" }}></div> */}
+
+        <Button
+          sx={{
+            padding: "18px 72px",
+            border: "1px solid #226cb0",
+            borderRadius: "9px",
+            background: "white",
+            width: "90%",
+            marginTop: "50px",
+          }}
+          startIcon={<LogoutIcon />}
+        >
+          {t("nav.signOut")}
+        </Button>
+      </div>
+    </Box>
+  );
+};
+UserProfile.propTypes = {
+  show: PropTypes.any,
+  innerRef: PropTypes.any,
+};
+export default UserProfile;

src/i18n/resources/en.js

@@ -99,6 +99,7 @@ export default {
     planer: 'Planer',
     patterns: 'Patterns',
     stats: 'Stats',
-    users: 'Users' 
+    users: 'Users',
+    signOut: 'Sign Out'
   }
 };

src/i18n/resources/rs.js

@@ -1,110 +1,110 @@
 export default {
-    app: {
-      title: 'HR Centar'
-    },
-    refresh: {
-    //   title: 'Are you active?',
-    //   cta:
-    //     "You were registered as not active, please confirm that you are active in the next minute, if you don't you will be logged out.",
-    },
-    common: {
-    //   close: 'Close',
-    //   trademark: 'TM',
-    //   search: 'Search',
-    //   error: 'Error',
-    //   continue: 'Continue',
-      labelUsername: 'Korisničko ime',
-      labelPassword: 'Šifra',
-      or: 'ili',
-    //   next: 'Next',
-    //   nextPage: 'Next page',
-    //   previousPage: 'Previous page',
-    //   back: 'Back',
-    //   goBack: 'Go Back',
-    //   ok: 'Ok',
-    //   done: 'Done',
-    //   confirm: 'Confirm',
-    //   printDownload: 'Print/Download',
-    //   cancel: 'Cancel',
-    //   remove: 'Remove',
-    //   invite: 'Invite',
-    //   save: 'Save',
-    //   complete: 'Complete',
-    //   download: 'Download',
-    //   yes: 'Yes',
-    //   no: 'No',
-    //   to: 'to',
-    //   select: 'Select...',
-    //   none: 'None',
-    //   date: {
-    //     range: '{{start}} to {{end}}',
-    //   },
-    },
-    login: {
-      welcome: 'Dobrodošli!',
-    //   dontHaveAccount: "Don't have an account? ",
-    //   emailFormat: 'Invalid email address format.',
-    //   emailRequired: 'An email or username is required.',
-    //   noUsers: 'There are no users with that email.',
-    //   passwordStrength: 'Your password is {{strength}}.',
-    //   passwordLength: 'Your password contain between 8 and 50 characters.',
-    //   signUpRecommendation: 'Sign up',
-    //   email: 'Please enter your email address or username to log in:',
-      logInTitle: 'Prijavi se',
-      logIn: 'Prijavi se',
-    //   signUp: 'Sign Up',
-      usernameRequired: 'Potrebno je uneti korisničko ime.',
-      passwordRequired: 'Potrebno je uneti šifru.',
-      forgotYourPassword: 'Zaboravio/la si šifru?',
-    //   _useDifferentEmail: 'Use different email address or username',
-    //   get useDifferentEmail() {
-    //       return this._useDifferentEmail;
-    //   },
-    //   set useDifferentEmail(value) {
-    //       this._useDifferentEmail = value;
-    //   },
-      signInWithGoogle: 'Prijava putem Google-a'
-    },
-    // password: {
-    //   weak: 'weak',
-    //   average: 'average',
-    //   good: 'good',
-    //   strong: 'strong',
-    // },
-    // forgotPassword: {
-    //   title: 'Forgot Password',
-    //   label: 'Send email',
-    //   emailRequired: 'An email is required.',
-    //   emailFormat: 'Invalid email address format.',
-    //   forgotPassword: {
-    //     title: 'Forgot Password',
-    //     subtitle:
-    //       'Please answer the security question to gain access to your account:',
-    //     label: 'Reset Password',
-    //   },
-    // },
-    // notFound: {
-    //   text: "We're sorry but we couldn't find the page you were looking for.",
-    //   goBack: 'Go back to homepage',
-    // },
-    // errorPage: {
-    //   text:
-    //     "We're sorry, an internal server error came up. Please be patient or try again later.",
-    //   goBack: 'Go back to homepage',
-    //   logout: 'Logout',
-    // },
-    // apiErrors:{
-    //   ClientIpAddressIsNullOrEmpty:"Client Ip address is null or empty",
-    //   UsernameDoesNotExist: "Username does not exist"
-    // },
-  nav:{
-    ads: 'Oglasi',
-    selectionFlow: 'Tok Selekcije',
-    candidates: 'Kandidati',
-    planer: 'Planer',
-    patterns: 'Šabloni',
-    stats: 'Statistika',
-    users: 'Korisnici' 
-  }
-  };
-  
+  app: {
+    title: 'HR Centar'
+  },
+  refresh: {
+  //   title: 'Are you active?',
+  //   cta:
+  //     "You were registered as not active, please confirm that you are active in the next minute, if you don't you will be logged out.",
+  },
+  common: {
+  //   close: 'Close',
+  //   trademark: 'TM',
+  //   search: 'Search',
+  //   error: 'Error',
+  //   continue: 'Continue',
+    labelUsername: 'Korisničko ime',
+    labelPassword: 'Šifra',
+    or: 'ili',
+  //   next: 'Next',
+  //   nextPage: 'Next page',
+  //   previousPage: 'Previous page',
+  //   back: 'Back',
+  //   goBack: 'Go Back',
+  //   ok: 'Ok',
+  //   done: 'Done',
+  //   confirm: 'Confirm',
+  //   printDownload: 'Print/Download',
+  //   cancel: 'Cancel',
+  //   remove: 'Remove',
+  //   invite: 'Invite',
+  //   save: 'Save',
+  //   complete: 'Complete',
+  //   download: 'Download',
+  //   yes: 'Yes',
+  //   no: 'No',
+  //   to: 'to',
+  //   select: 'Select...',
+  //   none: 'None',
+  //   date: {
+  //     range: '{{start}} to {{end}}',
+  //   },
+  },
+  login: {
+    welcome: 'Dobrodošli!',
+  //   dontHaveAccount: "Don't have an account? ",
+  //   emailFormat: 'Invalid email address format.',
+  //   emailRequired: 'An email or username is required.',
+  //   noUsers: 'There are no users with that email.',
+  //   passwordStrength: 'Your password is {{strength}}.',
+  //   passwordLength: 'Your password contain between 8 and 50 characters.',
+  //   signUpRecommendation: 'Sign up',
+  //   email: 'Please enter your email address or username to log in:',
+    logInTitle: 'Prijavi se',
+    logIn: 'Prijavi se',
+  //   signUp: 'Sign Up',
+    usernameRequired: 'Potrebno je uneti korisničko ime.',
+    passwordRequired: 'Potrebno je uneti šifru.',
+    forgotYourPassword: 'Zaboravio/la si šifru?',
+  //   _useDifferentEmail: 'Use different email address or username',
+  //   get useDifferentEmail() {
+  //       return this._useDifferentEmail;
+  //   },
+  //   set useDifferentEmail(value) {
+  //       this._useDifferentEmail = value;
+  //   },
+    signInWithGoogle: 'Prijava putem Google-a'
+  },
+  // password: {
+  //   weak: 'weak',
+  //   average: 'average',
+  //   good: 'good',
+  //   strong: 'strong',
+  // },
+  // forgotPassword: {
+  //   title: 'Forgot Password',
+  //   label: 'Send email',
+  //   emailRequired: 'An email is required.',
+  //   emailFormat: 'Invalid email address format.',
+  //   forgotPassword: {
+  //     title: 'Forgot Password',
+  //     subtitle:
+  //       'Please answer the security question to gain access to your account:',
+  //     label: 'Reset Password',
+  //   },
+  // },
+  // notFound: {
+  //   text: "We're sorry but we couldn't find the page you were looking for.",
+  //   goBack: 'Go back to homepage',
+  // },
+  // errorPage: {
+  //   text:
+  //     "We're sorry, an internal server error came up. Please be patient or try again later.",
+  //   goBack: 'Go back to homepage',
+  //   logout: 'Logout',
+  // },
+  // apiErrors:{
+  //   ClientIpAddressIsNullOrEmpty:"Client Ip address is null or empty",
+  //   UsernameDoesNotExist: "Username does not exist"
+  // },
+nav:{
+  ads: 'Oglasi',
+  selectionFlow: 'Tok Selekcije',
+  candidates: 'Kandidati',
+  planer: 'Planer',
+  patterns: 'Šabloni',
+  stats: 'Statistika',
+  users: 'Korisnici',
+  signOut: 'Izloguj se'
+}
+};

src/main.scss

@@ -11,6 +11,7 @@
 @import './assets/styles/components/radio';
 @import './assets/styles/components/modal';
 @import './assets/styles/components/auth-card';
+@import './assets/styles/components/user-profile';
 @import './assets/styles/components/auth';
 @import './assets/styles/components/login';
 @import './assets/styles/components/login-card';

src/pages/ErrorPages/NotFoundPage.js

@@ -7,6 +7,7 @@ const NotFoundPage = () => {
   const { t } = useTranslation();
 
   return (
+    // <div className="c-error-page"> to be FIXED LATER!!!!
     <div className="c-error-page">
       <Section className="c-error-page__content-container">
         <div className="c-error-page__content">

yarn.lock

@@ -28,7 +28,7 @@
   "resolved" "https://registry.npmjs.org/@babel/compat-data/-/compat-data-7.14.4.tgz"
   "version" "7.14.4"
 
-"@babel/core@^7.0.0", "@babel/core@^7.0.0-0", "@babel/core@^7.1.0", "@babel/core@^7.12.0", "@babel/core@^7.12.3", "@babel/core@^7.13.0", "@babel/core@^7.4.0-0", "@babel/core@^7.7.5", "@babel/core@^7.8.4", "@babel/core@7 || ^7.0.0-rc.2":
+"@babel/core@^7.1.0", "@babel/core@^7.12.3", "@babel/core@^7.7.5", "@babel/core@^7.8.4":
   "integrity" "sha512-jB5AmTKOCSJIZ72sd78ECEhuPiDMKlQdDI/4QRI6lzYATx5SSogS1oQA2AoPecRCknm30gHi2l+QVvNUu3wZAg=="
   "resolved" "https://registry.npmjs.org/@babel/core/-/core-7.14.3.tgz"
   "version" "7.14.3"
@@ -1306,7 +1306,7 @@
   "resolved" "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.8.0.tgz"
   "version" "0.8.0"
 
-"@emotion/react@^11.0.0-rc.0", "@emotion/react@^11.1.1", "@emotion/react@^11.4.1", "@emotion/react@^11.5.0":
+"@emotion/react@^11.1.1", "@emotion/react@^11.5.0":
   "integrity" "sha512-j0AkMpr6BL8gldJZ6XQsQ8DnS9TxEQu1R+OGmDZiWjBAJtCcbt0tS3I/YffoqHXxH6MjgI7KdMbYKw3MEiU9eA=="
   "resolved" "https://registry.npmjs.org/@emotion/react/-/react-11.10.4.tgz"
   "version" "11.10.4"
@@ -1642,7 +1642,7 @@
   dependencies:
     "@babel/runtime" "^7.19.0"
 
-"@mui/material@^5.0.0", "@mui/material@^5.0.6", "@mui/material@^5.4.1":
+"@mui/material@^5.0.6":
   "integrity" "sha512-ioLvqY7VvcePz9dnEIRhpiVvtJmAFmvG6rtLXXzVdMmAVbSaelr5Io07mPz/mCyqE+Uv8/4EuJV276DWO7etzA=="
   "resolved" "https://registry.npmjs.org/@mui/material/-/material-5.10.10.tgz"
   "version" "5.10.10"
@@ -1679,7 +1679,7 @@
     "csstype" "^3.1.1"
     "prop-types" "^15.8.1"
 
-"@mui/system@^5.10.10", "@mui/system@^5.4.1":
+"@mui/system@^5.10.10":
   "integrity" "sha512-TXwtKN0adKpBrZmO+eilQWoPf2veh050HLYrN78Kps9OhlvO70v/2Kya0+mORFhu9yhpAwjHXO8JII/R4a5ZLA=="
   "resolved" "https://registry.npmjs.org/@mui/system/-/system-5.10.10.tgz"
   "version" "5.10.10"
@@ -1985,7 +1985,7 @@
   dependencies:
     "defer-to-connect" "^1.0.1"
 
-"@testing-library/dom@^8.0.0", "@testing-library/dom@>=7.21.4":
+"@testing-library/dom@^8.0.0":
   "integrity" "sha512-6YWYPPpxG3e/xOo6HIWwB/58HukkwIVTOaZ0VwdMVjhRUX/01E4FtQbck9GazOOj7MXHc5RBzMrU86iBJHbI+A=="
   "resolved" "https://registry.npmjs.org/@testing-library/dom/-/dom-8.19.0.tgz"
   "version" "8.19.0"
@@ -2226,7 +2226,7 @@
   dependencies:
     "@types/react" "*"
 
-"@types/react@*", "@types/react@^17.0.0 || ^18.0.0":
+"@types/react@*":
   "integrity" "sha512-7QUCOxvFgnD5Jk8ZKlUAhVcRj7GuJRjnjjiY/IUBWKgOlnvDvTMLD4RTF7NPyVmbRhNrbomZiOepg7M/2Kj1mA=="
   "resolved" "https://registry.npmjs.org/@types/react/-/react-18.0.21.tgz"
   "version" "18.0.21"
@@ -2294,7 +2294,7 @@
     "@types/source-list-map" "*"
     "source-map" "^0.7.3"
 
-"@types/webpack@^4.41.8", "@types/webpack@4.x":
+"@types/webpack@^4.41.8":
   "integrity" "sha512-6pLaORaVNZxiB3FSHbyBiWM7QdazAWda1zvAq4SbZObZqHSDbWLi62iFdblVea6SK9eyBIVp5yHhKt/yNQdR7Q=="
   "resolved" "https://registry.npmjs.org/@types/webpack/-/webpack-4.41.29.tgz"
   "version" "4.41.29"
@@ -2318,7 +2318,7 @@
   dependencies:
     "@types/yargs-parser" "*"
 
-"@typescript-eslint/eslint-plugin@^4.0.0", "@typescript-eslint/eslint-plugin@^4.5.0", "@typescript-eslint/eslint-plugin@>= 4":
+"@typescript-eslint/eslint-plugin@^4.5.0":
   "integrity" "sha512-yA7IWp+5Qqf+TLbd8b35ySFOFzUfL7i+4If50EqvjT6w35X8Lv0eBHb6rATeWmucks37w+zV+tWnOXI9JlG6Eg=="
   "resolved" "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-4.26.0.tgz"
   "version" "4.26.0"
@@ -2355,7 +2355,7 @@
     "eslint-scope" "^5.1.1"
     "eslint-utils" "^3.0.0"
 
-"@typescript-eslint/parser@^4.0.0", "@typescript-eslint/parser@^4.5.0":
+"@typescript-eslint/parser@^4.5.0":
   "integrity" "sha512-b4jekVJG9FfmjUfmM4VoOItQhPlnt6MPOBUL0AQbiTmm+SSpSdhHYlwayOm4IW9KLI/4/cRKtQCmDl1oE2OlPg=="
   "resolved" "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-4.26.0.tgz"
   "version" "4.26.0"
@@ -2611,16 +2611,16 @@
   "resolved" "https://registry.npmjs.org/acorn-walk/-/acorn-walk-7.2.0.tgz"
   "version" "7.2.0"
 
-"acorn@^6.0.0 || ^7.0.0 || ^8.0.0", "acorn@^7.1.0", "acorn@^7.1.1", "acorn@^7.4.0":
-  "integrity" "sha512-nQyp0o1/mNdbTO1PO6kHkwSrmgZ0MT/jCCpNiwbUjGoRN4dlBhqJtoQuCnEOKzgTVwg0ZWiCoQy6SxMebQVh8A=="
-  "resolved" "https://registry.npmjs.org/acorn/-/acorn-7.4.1.tgz"
-  "version" "7.4.1"
-
 "acorn@^6.4.1":
   "integrity" "sha512-XtGIhXwF8YM8bJhGxG5kXgjkEuNGLTkoYqVE+KMR+aspr4KGYmKYg7yUe3KghyQ9yheNwLnjmzh/7+gfDBmHCQ=="
   "resolved" "https://registry.npmjs.org/acorn/-/acorn-6.4.2.tgz"
   "version" "6.4.2"
 
+"acorn@^7.1.0", "acorn@^7.1.1", "acorn@^7.4.0":
+  "integrity" "sha512-nQyp0o1/mNdbTO1PO6kHkwSrmgZ0MT/jCCpNiwbUjGoRN4dlBhqJtoQuCnEOKzgTVwg0ZWiCoQy6SxMebQVh8A=="
+  "resolved" "https://registry.npmjs.org/acorn/-/acorn-7.4.1.tgz"
+  "version" "7.4.1"
+
 "acorn@^8.2.4":
   "integrity" "sha512-tqPKHZ5CaBJw0Xmy0ZZvLs1qTV+BNFSyvn77ASXkpBNfIRk8ev26fKrD9iLGwGA9zedPao52GSHzq8lyZG0NUw=="
   "resolved" "https://registry.npmjs.org/acorn/-/acorn-8.3.0.tgz"
@@ -2664,7 +2664,7 @@
   "resolved" "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-3.5.2.tgz"
   "version" "3.5.2"
 
-"ajv@^6.1.0", "ajv@^6.10.0", "ajv@^6.10.2", "ajv@^6.12.4", "ajv@^6.12.5", "ajv@^6.9.1", "ajv@>=5.0.0":
+"ajv@^6.1.0", "ajv@^6.10.0", "ajv@^6.10.2", "ajv@^6.12.4", "ajv@^6.12.5":
   "integrity" "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g=="
   "resolved" "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz"
   "version" "6.12.6"
@@ -2987,7 +2987,7 @@
   "resolved" "https://registry.npmjs.org/axobject-query/-/axobject-query-2.2.0.tgz"
   "version" "2.2.0"
 
-"babel-eslint@^10.0.0", "babel-eslint@^10.1.0":
+"babel-eslint@^10.1.0":
   "integrity" "sha512-ifWaTHQ0ce+448CYop8AdrQiBsGrnC+bMgfyKFdi6EsPLTAWG+QfyDeM6OH+FmWnKvEq5NnBMLvlBUPKQZoDSg=="
   "resolved" "https://registry.npmjs.org/babel-eslint/-/babel-eslint-10.1.0.tgz"
   "version" "10.1.0"
@@ -3418,7 +3418,7 @@
   dependencies:
     "pako" "~1.0.5"
 
-"browserslist@^4", "browserslist@^4.0.0", "browserslist@^4.12.0", "browserslist@^4.16.6", "browserslist@^4.6.2", "browserslist@^4.6.4":
+"browserslist@^4.0.0", "browserslist@^4.12.0", "browserslist@^4.16.6", "browserslist@^4.6.2", "browserslist@^4.6.4":
   "integrity" "sha512-Wspk/PqO+4W9qp5iUTJsa1B/QrYn1keNCcEP5OvP7WBwT4KaDly0uONYmC6Xa3Z5IqnUgS0KcgLYu1l74x0ZXQ=="
   "resolved" "https://registry.npmjs.org/browserslist/-/browserslist-4.16.6.tgz"
   "version" "4.16.6"
@@ -5204,7 +5204,7 @@
     "lodash" "^4.17.15"
     "string-natural-compare" "^3.0.1"
 
-"eslint-plugin-import@^2.22.0", "eslint-plugin-import@^2.22.1", "eslint-plugin-import@^2.23.4":
+"eslint-plugin-import@^2.22.1", "eslint-plugin-import@^2.23.4":
   "integrity" "sha512-6/wP8zZRsnQFiR3iaPFgh5ImVRM1WN5NUWfTIRqwOdeiGJlBcSk82o1FEVq8yXmy4lkIzTo7YhHCIxlU/2HyEQ=="
   "resolved" "https://registry.npmjs.org/eslint-plugin-import/-/eslint-plugin-import-2.23.4.tgz"
   "version" "2.23.4"
@@ -5225,7 +5225,7 @@
     "resolve" "^1.20.0"
     "tsconfig-paths" "^3.9.0"
 
-"eslint-plugin-jest@^24.0.0", "eslint-plugin-jest@^24.1.0":
+"eslint-plugin-jest@^24.1.0":
   "integrity" "sha512-WOVH4TIaBLIeCX576rLcOgjNXqP+jNlCiEmRgFTfQtJ52DpwnIQKAVGlGPAN7CZ33bW6eNfHD6s8ZbEUTQubJg=="
   "resolved" "https://registry.npmjs.org/eslint-plugin-jest/-/eslint-plugin-jest-24.3.6.tgz"
   "version" "24.3.6"
@@ -5256,12 +5256,12 @@
   dependencies:
     "prettier-linter-helpers" "^1.0.0"
 
-"eslint-plugin-react-hooks@^4 || ^3 || ^2.3.0 || ^1.7.0", "eslint-plugin-react-hooks@^4.0.8", "eslint-plugin-react-hooks@^4.2.0":
+"eslint-plugin-react-hooks@^4.2.0":
   "integrity" "sha512-623WEiZJqxR7VdxFCKLI6d6LLpwJkGPYKODnkH3D7WpOG5KM8yWueBd8TLsNAetEJNF5iJmolaAKO3F8yzyVBQ=="
   "resolved" "https://registry.npmjs.org/eslint-plugin-react-hooks/-/eslint-plugin-react-hooks-4.2.0.tgz"
   "version" "4.2.0"
 
-"eslint-plugin-react@^7.20.3", "eslint-plugin-react@^7.21.5", "eslint-plugin-react@^7.24.0":
+"eslint-plugin-react@^7.21.5", "eslint-plugin-react@^7.24.0":
   "integrity" "sha512-KJJIx2SYx7PBx3ONe/mEeMz4YE0Lcr7feJTCMyyKb/341NcjuAgim3Acgan89GfPv7nxXK2+0slu0CWXYM4x+Q=="
   "resolved" "https://registry.npmjs.org/eslint-plugin-react/-/eslint-plugin-react-7.24.0.tgz"
   "version" "7.24.0"
@@ -5286,7 +5286,7 @@
   dependencies:
     "safe-regex" "^1.1.0"
 
-"eslint-plugin-testing-library@^3.9.0", "eslint-plugin-testing-library@^3.9.2":
+"eslint-plugin-testing-library@^3.9.2":
   "integrity" "sha512-WAmOCt7EbF1XM8XfbCKAEzAPnShkNSwcIsAD2jHdsMUT9mZJPjLCG7pMzbcC8kK366NOuGip8HKLDC+Xk4yIdA=="
   "resolved" "https://registry.npmjs.org/eslint-plugin-testing-library/-/eslint-plugin-testing-library-3.10.2.tgz"
   "version" "3.10.2"
@@ -5362,7 +5362,7 @@
     "normalize-path" "^3.0.0"
     "schema-utils" "^3.0.0"
 
-"eslint@*", "eslint@^2 || ^3 || ^4 || ^5 || ^6 || ^7.2.0", "eslint@^3 || ^4 || ^5 || ^6 || ^7", "eslint@^3.0.0 || ^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0", "eslint@^5 || ^6 || ^7", "eslint@^5.0.0 || ^6.0.0 || ^7.0.0", "eslint@^5.16.0 || ^6.8.0 || ^7.2.0", "eslint@^7.0.0", "eslint@^7.1.0", "eslint@^7.11.0", "eslint@^7.28.0", "eslint@^7.5.0", "eslint@>= 4.12.1", "eslint@>=5", "eslint@>=5.0.0", "eslint@>=7.0.0":
+"eslint@^7.11.0", "eslint@^7.28.0":
   "integrity" "sha512-VHZ8gX+EDfz+97jGcgyGCyRia/dPOd6Xh9yPv8Bl1+SoaIwD+a/vlrOmGRUyOYu7MwUhc7CxqeaDZU13S4+EpA=="
   "resolved" "https://registry.npmjs.org/eslint/-/eslint-7.32.0.tgz"
   "version" "7.32.0"
@@ -5709,7 +5709,7 @@
   dependencies:
     "flat-cache" "^3.0.4"
 
-"file-loader@*", "file-loader@6.1.1":
+"file-loader@6.1.1":
   "integrity" "sha512-Klt8C4BjWSXYQAfhpYYkG4qHNTna4toMHEbWrI5IuVoxbU6uiDKeKAP99R8mmbJi3lvewn/jQBOgU4+NS3tDQw=="
   "resolved" "https://registry.npmjs.org/file-loader/-/file-loader-6.1.1.tgz"
   "version" "6.1.1"
@@ -6507,7 +6507,7 @@
   "resolved" "https://registry.npmjs.org/human-signals/-/human-signals-1.1.1.tgz"
   "version" "1.1.1"
 
-"i18next@^20.3.1", "i18next@>= 19.0.0":
+"i18next@^20.3.1":
   "integrity" "sha512-yCMYTMEJ9ihCwEQQ3phLo7I/Pwycf8uAx+sRHwwk5U9Aui/IZYgQRyMqXafQOw5QQ7DM1Z+WyEXWIqSuJHhG2A=="
   "resolved" "https://registry.npmjs.org/i18next/-/i18next-20.6.1.tgz"
   "version" "20.6.1"
@@ -7452,20 +7452,6 @@
     "jest-regex-util" "^26.0.0"
     "jest-snapshot" "^26.6.2"
 
-"jest-resolve@*", "jest-resolve@26.6.0":
-  "integrity" "sha512-tRAz2bwraHufNp+CCmAD8ciyCpXCs1NQxB5EJAmtCFy6BN81loFEGWKzYu26Y62lAJJe4X4jg36Kf+NsQyiStQ=="
-  "resolved" "https://registry.npmjs.org/jest-resolve/-/jest-resolve-26.6.0.tgz"
-  "version" "26.6.0"
-  dependencies:
-    "@jest/types" "^26.6.0"
-    "chalk" "^4.0.0"
-    "graceful-fs" "^4.2.4"
-    "jest-pnp-resolver" "^1.2.2"
-    "jest-util" "^26.6.0"
-    "read-pkg-up" "^7.0.1"
-    "resolve" "^1.17.0"
-    "slash" "^3.0.0"
-
 "jest-resolve@^26.6.2":
   "integrity" "sha512-sOxsZOq25mT1wRsfHcbtkInS+Ek7Q8jCHUB0ZUTP0tc/c41QHriU/NunqMfCUWsL4H3MHpvQD4QR9kSYhS7UvQ=="
   "resolved" "https://registry.npmjs.org/jest-resolve/-/jest-resolve-26.6.2.tgz"
@@ -7480,6 +7466,20 @@
     "resolve" "^1.18.1"
     "slash" "^3.0.0"
 
+"jest-resolve@26.6.0":
+  "integrity" "sha512-tRAz2bwraHufNp+CCmAD8ciyCpXCs1NQxB5EJAmtCFy6BN81loFEGWKzYu26Y62lAJJe4X4jg36Kf+NsQyiStQ=="
+  "resolved" "https://registry.npmjs.org/jest-resolve/-/jest-resolve-26.6.0.tgz"
+  "version" "26.6.0"
+  dependencies:
+    "@jest/types" "^26.6.0"
+    "chalk" "^4.0.0"
+    "graceful-fs" "^4.2.4"
+    "jest-pnp-resolver" "^1.2.2"
+    "jest-util" "^26.6.0"
+    "read-pkg-up" "^7.0.1"
+    "resolve" "^1.17.0"
+    "slash" "^3.0.0"
+
 "jest-runner@^26.6.0", "jest-runner@^26.6.3":
   "integrity" "sha512-atgKpRHnaA2OvByG/HpGA4g6CSPS/1LK0jK3gATJAoptC1ojltpmVlYC3TYgdmGp+GLuhzpH30Gvs36szSL2JQ=="
   "resolved" "https://registry.npmjs.org/jest-runner/-/jest-runner-26.6.3.tgz"
@@ -7636,7 +7636,7 @@
     "merge-stream" "^2.0.0"
     "supports-color" "^7.0.0"
 
-"jest@^26.0.0", "jest@^26.6.0", "jest@26.6.0":
+"jest@^26.6.0", "jest@26.6.0":
   "integrity" "sha512-jxTmrvuecVISvKFFhOkjsWRZV7sFqdSUAd1ajOKY+/QE/aLBVstsJ/dX8GczLzwiT6ZEwwmZqtCUHLHHQVzcfA=="
   "resolved" "https://registry.npmjs.org/jest/-/jest-26.6.0.tgz"
   "version" "26.6.0"
@@ -10038,7 +10038,7 @@
   dependencies:
     "fast-diff" "^1.1.2"
 
-"prettier@>=1.13.0", "prettier@2.3.1":
+"prettier@2.3.1":
   "integrity" "sha512-p+vNbgpLjif/+D+DwAZAbndtRrR0md0MwfmOVN9N+2RgyACMT+7tfaRnT+WDPkqnuVwleyuBIG2XBxKDme3hPA=="
   "resolved" "https://registry.npmjs.org/prettier/-/prettier-2.3.1.tgz"
   "version" "2.3.1"
@@ -10333,7 +10333,7 @@
     "strip-ansi" "6.0.0"
     "text-table" "0.2.0"
 
-"react-dom@^16.6.0 || ^17.0.0 || ^18.0.0", "react-dom@^16.8.0 || ^17.0.0", "react-dom@^17.0.0 || ^18.0.0", "react-dom@^17.0.2", "react-dom@^17.0.2 || ^18.0.0", "react-dom@<18.0.0", "react-dom@>=16.6.0":
+"react-dom@^17.0.2":
   "integrity" "sha512-s4h96KtLDUQlsENhMn1ar8t2bEa+q/YAtj8pPPdIjPDGBDIVNsrD9aXNWqspUe6AzKCIG0C1HZZLqLV7qpOBGA=="
   "resolved" "https://registry.npmjs.org/react-dom/-/react-dom-17.0.2.tgz"
   "version" "17.0.2"
@@ -10408,7 +10408,7 @@
   "resolved" "https://registry.npmjs.org/react-is/-/react-is-18.2.0.tgz"
   "version" "18.2.0"
 
-"react-redux@^7.2.1 || ^8.0.2", "react-redux@^7.2.4":
+"react-redux@^7.2.4":
   "integrity" "sha512-Gx4L3uM182jEEayZfRbI/G11ZpYdNAnBs70lFVMNdHJI76XYtR+7m0MN+eAs7UHBPhWXcnFPaS+9owSCJQHNpQ=="
   "resolved" "https://registry.npmjs.org/react-redux/-/react-redux-7.2.9.tgz"
   "version" "7.2.9"
@@ -10420,7 +10420,7 @@
     "prop-types" "^15.7.2"
     "react-is" "^17.0.2"
 
-"react-refresh@^0.8.3", "react-refresh@>=0.8.3 <0.10.0":
+"react-refresh@^0.8.3":
   "integrity" "sha512-X8jZHc7nCMjaCqoU+V2I0cOhNW+QMBwSUkeXnTi8IPe6zaRWfn60ZzvFDZqWPfmSJfjub7dDW1SP0jaHWLu/hg=="
   "resolved" "https://registry.npmjs.org/react-refresh/-/react-refresh-0.8.3.tgz"
   "version" "0.8.3"
@@ -10559,7 +10559,7 @@
     "loose-envify" "^1.4.0"
     "prop-types" "^15.6.2"
 
-"react@^16.0.0 || ^17.0.0 || ^18.0.0", "react@^16.3.0 || ^17.0.0", "react@^16.6.0 || ^17.0.0 || ^18.0.0", "react@^16.8.0 || ^17.0.0", "react@^16.8.3 || ^17 || ^18", "react@^16.9.0 || ^17.0.0 || ^18", "react@^17.0.0 || ^18.0.0", "react@^17.0.2", "react@^17.0.2 || ^18.0.0", "react@^18.2.0", "react@<18.0.0", "react@>= 16", "react@>= 16.8.0", "react@>=15", "react@>=16.6.0", "react@>=16.8.0", "react@17.0.2":
+"react@^17.0.2":
   "integrity" "sha512-gnhPt75i/dq/z3/6q/0asP78D0u592D5L1pd7M8P+dck6Fu/jJeL6iVVK23fptSUZj8Vjf++7wXA8UNclGQcbA=="
   "resolved" "https://registry.npmjs.org/react/-/react-17.0.2.tgz"
   "version" "17.0.2"
@@ -10772,7 +10772,7 @@
   "resolved" "https://registry.npmjs.org/redux-thunk/-/redux-thunk-2.4.1.tgz"
   "version" "2.4.1"
 
-"redux@^4", "redux@^4.0.0", "redux@^4.0.4", "redux@^4.1.0", "redux@^4.1.2":
+"redux@^4.0.0", "redux@^4.0.4", "redux@^4.1.0", "redux@^4.1.2":
   "integrity" "sha512-oSBmcKKIuIR4ME29/AeNUnl5L+hvBq7OaJWzaptTQJAntaPvxIJqfnjbaEiCzzaIz+XmVILfqAM3Ob0aXLPfjA=="
   "resolved" "https://registry.npmjs.org/redux/-/redux-4.2.0.tgz"
   "version" "4.2.0"
@@ -11117,7 +11117,7 @@
   dependencies:
     "estree-walker" "^0.6.1"
 
-"rollup@^1.20.0 || ^2.0.0", "rollup@^1.20.0||^2.0.0", "rollup@^1.31.1", "rollup@>=0.60.0 <3", "rollup@>=0.66.0 <3":
+"rollup@^1.31.1":
   "integrity" "sha512-/2HA0Ec70TvQnXdzynFffkjA6XN+1e2pEv/uKS5Ulca40g2L7KuOE3riasHoNVHOsFD5KKZgDsMk1CP3Tw9s+A=="
   "resolved" "https://registry.npmjs.org/rollup/-/rollup-1.32.1.tgz"
   "version" "1.32.1"
@@ -11212,7 +11212,7 @@
     "schema-utils" "^3.0.0"
     "semver" "^7.3.2"
 
-"sass@^1.3.0", "sass@^1.34.1":
+"sass@^1.34.1":
   "integrity" "sha512-Pk+PMy7OGLs9WaxZGJMn7S96dvlyVBwwtToX895WmCpAOr5YiJYEUJfiJidMuKb613z2xNWcXCHEuOvjZbqC6A=="
   "resolved" "https://registry.npmjs.org/sass/-/sass-1.55.0.tgz"
   "version" "1.55.0"
@@ -11576,7 +11576,7 @@
     "source-map-resolve" "^0.5.0"
     "use" "^3.1.0"
 
-"sockjs-client@^1.4.0", "sockjs-client@^1.5.0":
+"sockjs-client@^1.5.0":
   "integrity" "sha512-VnVAb663fosipI/m6pqRXakEOw7nvd7TUgdr3PlR/8V2I95QIdwT8L4nMxhyU8SmDBHYXU1TOElaKOmKLfYzeQ=="
   "resolved" "https://registry.npmjs.org/sockjs-client/-/sockjs-client-1.5.1.tgz"
   "version" "1.5.1"
@@ -12404,11 +12404,6 @@
   "resolved" "https://registry.npmjs.org/type-detect/-/type-detect-4.0.8.tgz"
   "version" "4.0.8"
 
-"type-fest@^0.13.1":
-  "integrity" "sha512-34R7HTnG0XIJcBSn5XhDd7nNFPRcXYRZrBB2O2jdKqYODldSzBAqzsWoZYYvduky73toYS/ESqxPvkDf/F0XMg=="
-  "resolved" "https://registry.npmjs.org/type-fest/-/type-fest-0.13.1.tgz"
-  "version" "0.13.1"
-
 "type-fest@^0.20.2":
   "integrity" "sha512-Ne+eE4r0/iWnpAxD852z3A+N0Bt5RN//NjJwRd2VFHEmrywxf5vsZlh4R6lixl6B+wz/8d+maTSAkN1FIkI3LQ=="
   "resolved" "https://registry.npmjs.org/type-fest/-/type-fest-0.20.2.tgz"
@@ -12483,11 +12478,6 @@
   dependencies:
     "typescript-compare" "^0.0.2"
 
-"typescript@^3.2.1 || ^4", "typescript@>=2.8.0 || >= 3.2.0-dev || >= 3.3.0-dev || >= 3.4.0-dev || >= 3.5.0-dev || >= 3.6.0-dev || >= 3.6.0-beta || >= 3.7.0-dev || >= 3.7.0-beta":
-  "integrity" "sha512-QCh+85mCy+h0IGff8r5XWzOVSbBO+KfeYrMQh7NJ58QujwcE22u+NUSmUxqF+un70P9GXKxa2HCNiTTMJknyjQ=="
-  "resolved" "https://registry.npmjs.org/typescript/-/typescript-4.8.4.tgz"
-  "version" "4.8.4"
-
 "unbox-primitive@^1.0.2":
   "integrity" "sha512-61pPlCD9h51VoreyJ0BReideM3MDKMKnh6+V9L08331ipq6Q8OFXZYiqP6n/tbHx4s5I9uRhcye6BrbkizkBDw=="
   "resolved" "https://registry.npmjs.org/unbox-primitive/-/unbox-primitive-1.0.2.tgz"
@@ -12847,7 +12837,7 @@
     "range-parser" "^1.2.1"
     "webpack-log" "^2.0.0"
 
-"webpack-dev-server@3.11.1", "webpack-dev-server@3.x":
+"webpack-dev-server@3.11.1":
   "integrity" "sha512-u4R3mRzZkbxQVa+MBWi2uVpB5W59H3ekZAJsQlKUTdl7Elcah2EhygTPLmeFXybQkf9i2+L0kn7ik9SnXa6ihQ=="
   "resolved" "https://registry.npmjs.org/webpack-dev-server/-/webpack-dev-server-3.11.1.tgz"
   "version" "3.11.1"
@@ -12912,7 +12902,7 @@
     "source-list-map" "^2.0.0"
     "source-map" "~0.6.1"
 
-"webpack@^4.0.0", "webpack@^4.0.0 || ^5.0.0", "webpack@^4.27.0 || ^5.0.0", "webpack@^4.36.0 || ^5.0.0", "webpack@^4.4.0 || ^5.0.0", "webpack@>=2", "webpack@>=4.43.0 <6.0.0", "webpack@2 || 3 || 4", "webpack@4.44.2":
+"webpack@4.44.2":
   "integrity" "sha512-6KJVGlCxYdISyurpQ0IPTklv+DULv05rs2hseIXer6D7KrUicRDLFb4IUM1S6LUAKypPM/nSiVSuv8jHu1m3/Q=="
   "resolved" "https://registry.npmjs.org/webpack/-/webpack-4.44.2.tgz"
   "version" "4.44.2"