Fix NextJS 13 errors and now using new font compontent

2022-10-26 10:11:39 +01:00 · 2022-10-26 10:11:39 +01:00 · 647aa5fbce
commit 647aa5fbce
parent 7c25832862
11 changed files with 10613 additions and 9255 deletions
--- a/.env.development
+++ b/.env.development
@ -0,0 +1,12 @@
+NEXT_PUBLIC_HTTP_PROXY="https://proxy.fascinated.cc"
+
+NEXT_PUBLIC_SITE_NAME="BeatSaber Overlay"
+NEXT_PUBLIC_SITE_TITLE="BeatSaber Overlay - Simple and easy to use BeatSaber overlay"
+NEXT_PUBLIC_SITE_DESCRIPTION="Free, simple, and easy to use beat saber overlay for OBS"
+NEXT_PUBLIC_SITE_COLOR="#0EBFE9"
+NEXT_PUBLIC_SITE_URL="https://bs-overlay.fascinated.cc"
+
+REDIS_PORT="6379"
+REDIS_HOST="195.154.220.97"
+REDIS_PASSWORD="zgrq2L7TmhRLvwrBcosaSLi3pMjq6x7Arz4W2M3zDHt4"
+REDIS_DATABASE="0"
--- a/next.config.js
+++ b/next.config.js
@ -1,10 +1,11 @@
 module.exports = {
-  reactStrictMode: true,
+	// reactStrictMode: true,
 	images: {
-    domains: [
-        'cdn.scoresaber.com',
-        'bs-overlay.fascinated.cc',
-        'localhost:3000'
+		remotePatterns: [
+			{
+				protocol: "https",
+				hostname: "**.scoresaber.com",
+			},
 		],
-  }
-}
+	},
+};
--- a/package-lock.json
+++ b/package-lock.json
@ -10,7 +10,7 @@
 				"@emotion/server": "^11.10.0",
 				"@nextui-org/react": "^1.0.0-beta.10",
 				"ioredis": "^5.2.3",
-        "next": "13",
+				"next": "^13.0.0",
 				"next-seo": "^5.8.0",
 				"next-themes": "^0.2.1",
 				"node-fetch": "^3.2.10",
@ -19,16 +19,209 @@
 				"react-country-flag": "^3.0.2",
 				"react-dom": "^18.2.0",
 				"react-toastify": "^9.0.8",
-        "sharp": "^0.31.1"
+				"sharp": "^0.31.1",
+				"styled-components": "^5.3.6"
 			},
 			"devDependencies": {
 				"@types/node": "^18.11.5",
 				"@types/react": "^18.0.23",
 				"eslint": "8.26.0",
-        "eslint-config-next": "13.0.0",
+				"eslint-config-next": "^13.0.0",
 				"typescript": "^4.8.4"
 			}
 		},
+		"node_modules/@babel/code-frame": {
+			"version": "7.18.6",
+			"resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.18.6.tgz",
+			"integrity": "sha512-TDCmlK5eOvH+eH7cdAFlNXeVJqWIQ7gW9tY1GJIpUtFb6CmjVyq2VM3u71bOyR8CRihcCgMUYoDNyLXao3+70Q==",
+			"dependencies": {
+				"@babel/highlight": "^7.18.6"
+			},
+			"engines": {
+				"node": ">=6.9.0"
+			}
+		},
+		"node_modules/@babel/generator": {
+			"version": "7.19.6",
+			"resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.19.6.tgz",
+			"integrity": "sha512-oHGRUQeoX1QrKeJIKVe0hwjGqNnVYsM5Nep5zo0uE0m42sLH+Fsd2pStJ5sRM1bNyTUUoz0pe2lTeMJrb/taTA==",
+			"dependencies": {
+				"@babel/types": "^7.19.4",
+				"@jridgewell/gen-mapping": "^0.3.2",
+				"jsesc": "^2.5.1"
+			},
+			"engines": {
+				"node": ">=6.9.0"
+			}
+		},
+		"node_modules/@babel/helper-annotate-as-pure": {
+			"version": "7.18.6",
+			"resolved": "https://registry.npmjs.org/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.18.6.tgz",
+			"integrity": "sha512-duORpUiYrEpzKIop6iNbjnwKLAKnJ47csTyRACyEmWj0QdUrm5aqNJGHSSEQSUAvNW0ojX0dOmK9dZduvkfeXA==",
+			"dependencies": {
+				"@babel/types": "^7.18.6"
+			},
+			"engines": {
+				"node": ">=6.9.0"
+			}
+		},
+		"node_modules/@babel/helper-environment-visitor": {
+			"version": "7.18.9",
+			"resolved": "https://registry.npmjs.org/@babel/helper-environment-visitor/-/helper-environment-visitor-7.18.9.tgz",
+			"integrity": "sha512-3r/aACDJ3fhQ/EVgFy0hpj8oHyHpQc+LPtJoY9SzTThAsStm4Ptegq92vqKoE3vD706ZVFWITnMnxucw+S9Ipg==",
+			"engines": {
+				"node": ">=6.9.0"
+			}
+		},
+		"node_modules/@babel/helper-function-name": {
+			"version": "7.19.0",
+			"resolved": "https://registry.npmjs.org/@babel/helper-function-name/-/helper-function-name-7.19.0.tgz",
+			"integrity": "sha512-WAwHBINyrpqywkUH0nTnNgI5ina5TFn85HKS0pbPDfxFfhyR/aNQEn4hGi1P1JyT//I0t4OgXUlofzWILRvS5w==",
+			"dependencies": {
+				"@babel/template": "^7.18.10",
+				"@babel/types": "^7.19.0"
+			},
+			"engines": {
+				"node": ">=6.9.0"
+			}
+		},
+		"node_modules/@babel/helper-hoist-variables": {
+			"version": "7.18.6",
+			"resolved": "https://registry.npmjs.org/@babel/helper-hoist-variables/-/helper-hoist-variables-7.18.6.tgz",
+			"integrity": "sha512-UlJQPkFqFULIcyW5sbzgbkxn2FKRgwWiRexcuaR8RNJRy8+LLveqPjwZV/bwrLZCN0eUHD/x8D0heK1ozuoo6Q==",
+			"dependencies": {
+				"@babel/types": "^7.18.6"
+			},
+			"engines": {
+				"node": ">=6.9.0"
+			}
+		},
+		"node_modules/@babel/helper-module-imports": {
+			"version": "7.18.6",
+			"resolved": "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.18.6.tgz",
+			"integrity": "sha512-0NFvs3VkuSYbFi1x2Vd6tKrywq+z/cLeYC/RJNFrIX/30Bf5aiGYbtvGXolEktzJH8o5E5KJ3tT+nkxuuZFVlA==",
+			"dependencies": {
+				"@babel/types": "^7.18.6"
+			},
+			"engines": {
+				"node": ">=6.9.0"
+			}
+		},
+		"node_modules/@babel/helper-split-export-declaration": {
+			"version": "7.18.6",
+			"resolved": "https://registry.npmjs.org/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.18.6.tgz",
+			"integrity": "sha512-bde1etTx6ZyTmobl9LLMMQsaizFVZrquTEHOqKeQESMKo4PlObf+8+JA25ZsIpZhT/WEd39+vOdLXAFG/nELpA==",
+			"dependencies": {
+				"@babel/types": "^7.18.6"
+			},
+			"engines": {
+				"node": ">=6.9.0"
+			}
+		},
+		"node_modules/@babel/helper-string-parser": {
+			"version": "7.19.4",
+			"resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.19.4.tgz",
+			"integrity": "sha512-nHtDoQcuqFmwYNYPz3Rah5ph2p8PFeFCsZk9A/48dPc/rGocJ5J3hAAZ7pb76VWX3fZKu+uEr/FhH5jLx7umrw==",
+			"engines": {
+				"node": ">=6.9.0"
+			}
+		},
+		"node_modules/@babel/helper-validator-identifier": {
+			"version": "7.19.1",
+			"resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.19.1.tgz",
+			"integrity": "sha512-awrNfaMtnHUr653GgGEs++LlAvW6w+DcPrOliSMXWCKo597CwL5Acf/wWdNkf/tfEQE3mjkeD1YOVZOUV/od1w==",
+			"engines": {
+				"node": ">=6.9.0"
+			}
+		},
+		"node_modules/@babel/highlight": {
+			"version": "7.18.6",
+			"resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.18.6.tgz",
+			"integrity": "sha512-u7stbOuYjaPezCuLj29hNW1v64M2Md2qupEKP1fHc7WdOA3DgLh37suiSrZYY7haUB7iBeQZ9P1uiRF359do3g==",
+			"dependencies": {
+				"@babel/helper-validator-identifier": "^7.18.6",
+				"chalk": "^2.0.0",
+				"js-tokens": "^4.0.0"
+			},
+			"engines": {
+				"node": ">=6.9.0"
+			}
+		},
+		"node_modules/@babel/highlight/node_modules/ansi-styles": {
+			"version": "3.2.1",
+			"resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz",
+			"integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==",
+			"dependencies": {
+				"color-convert": "^1.9.0"
+			},
+			"engines": {
+				"node": ">=4"
+			}
+		},
+		"node_modules/@babel/highlight/node_modules/chalk": {
+			"version": "2.4.2",
+			"resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz",
+			"integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==",
+			"dependencies": {
+				"ansi-styles": "^3.2.1",
+				"escape-string-regexp": "^1.0.5",
+				"supports-color": "^5.3.0"
+			},
+			"engines": {
+				"node": ">=4"
+			}
+		},
+		"node_modules/@babel/highlight/node_modules/color-convert": {
+			"version": "1.9.3",
+			"resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
+			"integrity": "sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==",
+			"dependencies": {
+				"color-name": "1.1.3"
+			}
+		},
+		"node_modules/@babel/highlight/node_modules/color-name": {
+			"version": "1.1.3",
+			"resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz",
+			"integrity": "sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw=="
+		},
+		"node_modules/@babel/highlight/node_modules/escape-string-regexp": {
+			"version": "1.0.5",
+			"resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz",
+			"integrity": "sha512-vbRorB5FUQWvla16U8R/qgaFIya2qGzwDrNmCZuYKrbdSUMG6I1ZCGQRefkRVhuOkIGVne7BQ35DSfo1qvJqFg==",
+			"engines": {
+				"node": ">=0.8.0"
+			}
+		},
+		"node_modules/@babel/highlight/node_modules/has-flag": {
+			"version": "3.0.0",
+			"resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
+			"integrity": "sha512-sKJf1+ceQBr4SMkvQnBDNDtf4TXpVhVGateu0t918bl30FnbE2m4vNLX+VWe/dpjlb+HugGYzW7uQXH98HPEYw==",
+			"engines": {
+				"node": ">=4"
+			}
+		},
+		"node_modules/@babel/highlight/node_modules/supports-color": {
+			"version": "5.5.0",
+			"resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
+			"integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
+			"dependencies": {
+				"has-flag": "^3.0.0"
+			},
+			"engines": {
+				"node": ">=4"
+			}
+		},
+		"node_modules/@babel/parser": {
+			"version": "7.19.6",
+			"resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.19.6.tgz",
+			"integrity": "sha512-h1IUp81s2JYJ3mRkdxJgs4UvmSsRvDrx5ICSJbPvtWYv5i1nTBGcBpnog+89rAFMwvvru6E5NUHdBe01UeSzYA==",
+			"bin": {
+				"parser": "bin/babel-parser.js"
+			},
+			"engines": {
+				"node": ">=6.0.0"
+			}
+		},
 		"node_modules/@babel/runtime": {
 			"version": "7.17.2",
 			"resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.17.2.tgz",
@ -53,6 +246,60 @@
 				"node": ">=6.9.0"
 			}
 		},
+		"node_modules/@babel/template": {
+			"version": "7.18.10",
+			"resolved": "https://registry.npmjs.org/@babel/template/-/template-7.18.10.tgz",
+			"integrity": "sha512-TI+rCtooWHr3QJ27kJxfjutghu44DLnasDMwpDqCXVTal9RLp3RSYNh4NdBrRP2cQAoG9A8juOQl6P6oZG4JxA==",
+			"dependencies": {
+				"@babel/code-frame": "^7.18.6",
+				"@babel/parser": "^7.18.10",
+				"@babel/types": "^7.18.10"
+			},
+			"engines": {
+				"node": ">=6.9.0"
+			}
+		},
+		"node_modules/@babel/traverse": {
+			"version": "7.19.6",
+			"resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.19.6.tgz",
+			"integrity": "sha512-6l5HrUCzFM04mfbG09AagtYyR2P0B71B1wN7PfSPiksDPz2k5H9CBC1tcZpz2M8OxbKTPccByoOJ22rUKbpmQQ==",
+			"dependencies": {
+				"@babel/code-frame": "^7.18.6",
+				"@babel/generator": "^7.19.6",
+				"@babel/helper-environment-visitor": "^7.18.9",
+				"@babel/helper-function-name": "^7.19.0",
+				"@babel/helper-hoist-variables": "^7.18.6",
+				"@babel/helper-split-export-declaration": "^7.18.6",
+				"@babel/parser": "^7.19.6",
+				"@babel/types": "^7.19.4",
+				"debug": "^4.1.0",
+				"globals": "^11.1.0"
+			},
+			"engines": {
+				"node": ">=6.9.0"
+			}
+		},
+		"node_modules/@babel/traverse/node_modules/globals": {
+			"version": "11.12.0",
+			"resolved": "https://registry.npmjs.org/globals/-/globals-11.12.0.tgz",
+			"integrity": "sha512-WOBp/EEGUiIsJSp7wcv/y6MO+lV9UoncWqxuFfm8eBwzWNgyfBd6Gz+IeKQ9jCmyhoH99g15M3T+QaVHFjizVA==",
+			"engines": {
+				"node": ">=4"
+			}
+		},
+		"node_modules/@babel/types": {
+			"version": "7.19.4",
+			"resolved": "https://registry.npmjs.org/@babel/types/-/types-7.19.4.tgz",
+			"integrity": "sha512-M5LK7nAeS6+9j7hAq+b3fQs+pNfUtTGq+yFFfHnauFA8zQtLRfmuipmsKDKKLuyG+wC8ABW43A153YNawNTEtw==",
+			"dependencies": {
+				"@babel/helper-string-parser": "^7.19.4",
+				"@babel/helper-validator-identifier": "^7.19.1",
+				"to-fast-properties": "^2.0.0"
+			},
+			"engines": {
+				"node": ">=6.9.0"
+			}
+		},
 		"node_modules/@emotion/cache": {
 			"version": "11.10.3",
 			"resolved": "https://registry.npmjs.org/@emotion/cache/-/cache-11.10.3.tgz",
@ -65,6 +312,14 @@
 				"stylis": "4.0.13"
 			}
 		},
+		"node_modules/@emotion/is-prop-valid": {
+			"version": "1.2.0",
+			"resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-1.2.0.tgz",
+			"integrity": "sha512-3aDpDprjM0AwaxGE09bOPkNxHpBd+kA6jty3RnaEXdweX1DF1U3VQpPYb0g1IStAuK7SVQ1cy+bNBBKp4W3Fjg==",
+			"dependencies": {
+				"@emotion/memoize": "^0.8.0"
+			}
+		},
 		"node_modules/@emotion/memoize": {
 			"version": "0.8.0",
 			"resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.8.0.tgz",
@ -94,6 +349,16 @@
 			"resolved": "https://registry.npmjs.org/@emotion/sheet/-/sheet-1.2.0.tgz",
 			"integrity": "sha512-OiTkRgpxescko+M51tZsMq7Puu/KP55wMT8BgpcXVG2hqXc0Vo0mfymJ/Uj24Hp0i083ji/o0aLddh08UEjq8w=="
 		},
+		"node_modules/@emotion/stylis": {
+			"version": "0.8.5",
+			"resolved": "https://registry.npmjs.org/@emotion/stylis/-/stylis-0.8.5.tgz",
+			"integrity": "sha512-h6KtPihKFn3T9fuIrwvXXUOwlx3rfUvfZIcP5a6rh8Y7zjE3O06hT5Ss4S/YI1AYhuZ1kjaE/5EaOOI2NqSylQ=="
+		},
+		"node_modules/@emotion/unitless": {
+			"version": "0.7.5",
+			"resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.7.5.tgz",
+			"integrity": "sha512-OWORNpfjMsSSUBVrRBVGECkhWcULOAJz9ZW8uK9qgxD+87M7jHRcvh/A96XXNhXTLmKcoYSQtBEX7lHMO7YRwg=="
+		},
 		"node_modules/@emotion/utils": {
 			"version": "1.2.0",
 			"resolved": "https://registry.npmjs.org/@emotion/utils/-/utils-1.2.0.tgz",
@ -267,6 +532,49 @@
 			"resolved": "https://registry.npmjs.org/@ioredis/commands/-/commands-1.2.0.tgz",
 			"integrity": "sha512-Sx1pU8EM64o2BrqNpEO1CNLtKQwyhuXuqyfH7oGKCk+1a33d2r5saW8zNwm3j6BTExtjrv2BxTgzzkMwts6vGg=="
 		},
+		"node_modules/@jridgewell/gen-mapping": {
+			"version": "0.3.2",
+			"resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.2.tgz",
+			"integrity": "sha512-mh65xKQAzI6iBcFzwv28KVWSmCkdRBWoOh+bYQGW3+6OZvbbN3TqMGo5hqYxQniRcH9F2VZIoJCm4pa3BPDK/A==",
+			"dependencies": {
+				"@jridgewell/set-array": "^1.0.1",
+				"@jridgewell/sourcemap-codec": "^1.4.10",
+				"@jridgewell/trace-mapping": "^0.3.9"
+			},
+			"engines": {
+				"node": ">=6.0.0"
+			}
+		},
+		"node_modules/@jridgewell/resolve-uri": {
+			"version": "3.1.0",
+			"resolved": "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.1.0.tgz",
+			"integrity": "sha512-F2msla3tad+Mfht5cJq7LSXcdudKTWCVYUgw6pLFOOHSTtZlj6SWNYAp+AhuqLmWdBO2X5hPrLcu8cVP8fy28w==",
+			"engines": {
+				"node": ">=6.0.0"
+			}
+		},
+		"node_modules/@jridgewell/set-array": {
+			"version": "1.1.2",
+			"resolved": "https://registry.npmjs.org/@jridgewell/set-array/-/set-array-1.1.2.tgz",
+			"integrity": "sha512-xnkseuNADM0gt2bs+BvhO0p78Mk762YnZdsuzFV018NoG1Sj1SCQvpSqa7XUaTam5vAGasABV9qXASMKnFMwMw==",
+			"engines": {
+				"node": ">=6.0.0"
+			}
+		},
+		"node_modules/@jridgewell/sourcemap-codec": {
+			"version": "1.4.14",
+			"resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.14.tgz",
+			"integrity": "sha512-XPSJHWmi394fuUuzDnGz1wiKqWfo1yXecHQMRf2l6hztTO+nPru658AyDngaBe7isIxEkRsPR3FZh+s7iVa4Uw=="
+		},
+		"node_modules/@jridgewell/trace-mapping": {
+			"version": "0.3.17",
+			"resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.17.tgz",
+			"integrity": "sha512-MCNzAp77qzKca9+W/+I0+sEpaUnZoeasnghNeVc41VZCEKaCH73Vq3BZZ/SzWIgrqE4H4ceI+p+b6C0mHf9T4g==",
+			"dependencies": {
+				"@jridgewell/resolve-uri": "3.1.0",
+				"@jridgewell/sourcemap-codec": "1.4.14"
+			}
+		},
 		"node_modules/@next/env": {
 			"version": "13.0.0",
 			"resolved": "https://registry.npmjs.org/@next/env/-/env-13.0.0.tgz",
@ -1970,6 +2278,26 @@
 			"integrity": "sha512-Td525n+iPOOyUQIeBfcASuG6uJsDOITl7Mds5gFyerkWiX7qhUTdYUBlSgNMyVqtSJqwpt1kXGLdUt6SykLMRA==",
 			"dev": true
 		},
+		"node_modules/babel-plugin-styled-components": {
+			"version": "2.0.7",
+			"resolved": "https://registry.npmjs.org/babel-plugin-styled-components/-/babel-plugin-styled-components-2.0.7.tgz",
+			"integrity": "sha512-i7YhvPgVqRKfoQ66toiZ06jPNA3p6ierpfUuEWxNF+fV27Uv5gxBkf8KZLHUCc1nFA9j6+80pYoIpqCeyW3/bA==",
+			"dependencies": {
+				"@babel/helper-annotate-as-pure": "^7.16.0",
+				"@babel/helper-module-imports": "^7.16.0",
+				"babel-plugin-syntax-jsx": "^6.18.0",
+				"lodash": "^4.17.11",
+				"picomatch": "^2.3.0"
+			},
+			"peerDependencies": {
+				"styled-components": ">= 2"
+			}
+		},
+		"node_modules/babel-plugin-syntax-jsx": {
+			"version": "6.18.0",
+			"resolved": "https://registry.npmjs.org/babel-plugin-syntax-jsx/-/babel-plugin-syntax-jsx-6.18.0.tgz",
+			"integrity": "sha512-qrPaCSo9c8RHNRHIotaufGbuOBN8rtdC4QrrFFc43vyWCCz7Kl7GL1PGaXtMGQZUXrkCjNEgxDfmAuAabr/rlw=="
+		},
 		"node_modules/balanced-match": {
 			"version": "1.0.2",
 			"resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
@ -2117,6 +2445,14 @@
 				"node": ">=6"
 			}
 		},
+		"node_modules/camelize": {
+			"version": "1.0.1",
+			"resolved": "https://registry.npmjs.org/camelize/-/camelize-1.0.1.tgz",
+			"integrity": "sha512-dU+Tx2fsypxTgtLoE36npi3UqcjSSMNYfkqgmoEhtZrraP5VWq0K7FkWVTYa8eMPtnU/G2txVsfdCJTn9uzpuQ==",
+			"funding": {
+				"url": "https://github.com/sponsors/ljharb"
+			}
+		},
 		"node_modules/caniuse-lite": {
 			"version": "1.0.30001422",
 			"resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001422.tgz",
@ -2247,6 +2583,24 @@
 				"node": ">= 8"
 			}
 		},
+		"node_modules/css-color-keywords": {
+			"version": "1.0.0",
+			"resolved": "https://registry.npmjs.org/css-color-keywords/-/css-color-keywords-1.0.0.tgz",
+			"integrity": "sha512-FyyrDHZKEjXDpNJYvVsV960FiqQyXc/LlYmsxl2BcdMb2WPx0OGRVgTg55rPSyLSNMqP52R9r8geSp7apN3Ofg==",
+			"engines": {
+				"node": ">=4"
+			}
+		},
+		"node_modules/css-to-react-native": {
+			"version": "3.0.0",
+			"resolved": "https://registry.npmjs.org/css-to-react-native/-/css-to-react-native-3.0.0.tgz",
+			"integrity": "sha512-Ro1yETZA813eoyUp2GDBhG2j+YggidUmzO1/v9eYBKR2EHVEniE2MI/NqpTQ954BMpTPZFsGNPm46qFB9dpaPQ==",
+			"dependencies": {
+				"camelize": "^1.0.0",
+				"css-color-keywords": "^1.0.0",
+				"postcss-value-parser": "^4.0.2"
+			}
+		},
 		"node_modules/csstype": {
 			"version": "3.1.1",
 			"resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.1.tgz",
@ -3355,6 +3709,14 @@
 				"url": "https://github.com/sponsors/ljharb"
 			}
 		},
+		"node_modules/hoist-non-react-statics": {
+			"version": "3.3.2",
+			"resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz",
+			"integrity": "sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==",
+			"dependencies": {
+				"react-is": "^16.7.0"
+			}
+		},
 		"node_modules/html-tokenize": {
 			"version": "2.0.1",
 			"resolved": "https://registry.npmjs.org/html-tokenize/-/html-tokenize-2.0.1.tgz",
@ -3738,6 +4100,17 @@
 				"js-yaml": "bin/js-yaml.js"
 			}
 		},
+		"node_modules/jsesc": {
+			"version": "2.5.2",
+			"resolved": "https://registry.npmjs.org/jsesc/-/jsesc-2.5.2.tgz",
+			"integrity": "sha512-OYu7XEzjkCQ3C5Ps3QIZsQfNpqoJyZZA99wd9aWd05NCtC5pWOkShK2mkL6HXQR6/Cy2lbNdPlZBpuQHXE63gA==",
+			"bin": {
+				"jsesc": "bin/jsesc"
+			},
+			"engines": {
+				"node": ">=4"
+			}
+		},
 		"node_modules/json-schema-traverse": {
 			"version": "0.4.1",
 			"resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz",
@ -3803,6 +4176,11 @@
 				"node": ">= 0.8.0"
 			}
 		},
+		"node_modules/lodash": {
+			"version": "4.17.21",
+			"resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
+			"integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg=="
+		},
 		"node_modules/lodash.defaults": {
 			"version": "4.2.0",
 			"resolved": "https://registry.npmjs.org/lodash.defaults/-/lodash.defaults-4.2.0.tgz",
@ -4242,7 +4620,6 @@
 			"version": "2.3.1",
 			"resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
 			"integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
-      "dev": true,
 			"engines": {
 				"node": ">=8.6"
 			},
@ -4273,6 +4650,11 @@
 				"node": "^10 || ^12 || >=14"
 			}
 		},
+		"node_modules/postcss-value-parser": {
+			"version": "4.2.0",
+			"resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz",
+			"integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ=="
+		},
 		"node_modules/prebuild-install": {
 			"version": "7.1.1",
 			"resolved": "https://registry.npmjs.org/prebuild-install/-/prebuild-install-7.1.1.tgz",
@ -4612,6 +4994,11 @@
 				"node": ">=10"
 			}
 		},
+		"node_modules/shallowequal": {
+			"version": "1.1.0",
+			"resolved": "https://registry.npmjs.org/shallowequal/-/shallowequal-1.1.0.tgz",
+			"integrity": "sha512-y0m1JoUZSlPAjXVtPPW70aZWfIL/dSP7AFkRnniLCrK/8MDKog3TySTBmckD+RObVxH0v4Tox67+F14PdED2oQ=="
+		},
 		"node_modules/sharp": {
 			"version": "0.31.1",
 			"resolved": "https://registry.npmjs.org/sharp/-/sharp-0.31.1.tgz",
@ -4827,6 +5214,55 @@
 				"url": "https://github.com/sponsors/sindresorhus"
 			}
 		},
+		"node_modules/styled-components": {
+			"version": "5.3.6",
+			"resolved": "https://registry.npmjs.org/styled-components/-/styled-components-5.3.6.tgz",
+			"integrity": "sha512-hGTZquGAaTqhGWldX7hhfzjnIYBZ0IXQXkCYdvF1Sq3DsUaLx6+NTHC5Jj1ooM2F68sBiVz3lvhfwQs/S3l6qg==",
+			"hasInstallScript": true,
+			"dependencies": {
+				"@babel/helper-module-imports": "^7.0.0",
+				"@babel/traverse": "^7.4.5",
+				"@emotion/is-prop-valid": "^1.1.0",
+				"@emotion/stylis": "^0.8.4",
+				"@emotion/unitless": "^0.7.4",
+				"babel-plugin-styled-components": ">= 1.12.0",
+				"css-to-react-native": "^3.0.0",
+				"hoist-non-react-statics": "^3.0.0",
+				"shallowequal": "^1.1.0",
+				"supports-color": "^5.5.0"
+			},
+			"engines": {
+				"node": ">=10"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/styled-components"
+			},
+			"peerDependencies": {
+				"react": ">= 16.8.0",
+				"react-dom": ">= 16.8.0",
+				"react-is": ">= 16.8.0"
+			}
+		},
+		"node_modules/styled-components/node_modules/has-flag": {
+			"version": "3.0.0",
+			"resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
+			"integrity": "sha512-sKJf1+ceQBr4SMkvQnBDNDtf4TXpVhVGateu0t918bl30FnbE2m4vNLX+VWe/dpjlb+HugGYzW7uQXH98HPEYw==",
+			"engines": {
+				"node": ">=4"
+			}
+		},
+		"node_modules/styled-components/node_modules/supports-color": {
+			"version": "5.5.0",
+			"resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
+			"integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
+			"dependencies": {
+				"has-flag": "^3.0.0"
+			},
+			"engines": {
+				"node": ">=4"
+			}
+		},
 		"node_modules/styled-jsx": {
 			"version": "5.1.0",
 			"resolved": "https://registry.npmjs.org/styled-jsx/-/styled-jsx-5.1.0.tgz",
@ -4964,6 +5400,14 @@
 				"xtend": "~2.1.1"
 			}
 		},
+		"node_modules/to-fast-properties": {
+			"version": "2.0.0",
+			"resolved": "https://registry.npmjs.org/to-fast-properties/-/to-fast-properties-2.0.0.tgz",
+			"integrity": "sha512-/OaKK0xYrs3DmxRYqL/yDc+FxFUVYhDlXMhRmv3z915w2HF1tnN1omB354j8VUGO/hbRzyD6Y3sA7v7GS/ceog==",
+			"engines": {
+				"node": ">=4"
+			}
+		},
 		"node_modules/to-regex-range": {
 			"version": "5.0.1",
 			"resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
@ -5182,6 +5626,146 @@
 		}
 	},
 	"dependencies": {
+		"@babel/code-frame": {
+			"version": "7.18.6",
+			"resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.18.6.tgz",
+			"integrity": "sha512-TDCmlK5eOvH+eH7cdAFlNXeVJqWIQ7gW9tY1GJIpUtFb6CmjVyq2VM3u71bOyR8CRihcCgMUYoDNyLXao3+70Q==",
+			"requires": {
+				"@babel/highlight": "^7.18.6"
+			}
+		},
+		"@babel/generator": {
+			"version": "7.19.6",
+			"resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.19.6.tgz",
+			"integrity": "sha512-oHGRUQeoX1QrKeJIKVe0hwjGqNnVYsM5Nep5zo0uE0m42sLH+Fsd2pStJ5sRM1bNyTUUoz0pe2lTeMJrb/taTA==",
+			"requires": {
+				"@babel/types": "^7.19.4",
+				"@jridgewell/gen-mapping": "^0.3.2",
+				"jsesc": "^2.5.1"
+			}
+		},
+		"@babel/helper-annotate-as-pure": {
+			"version": "7.18.6",
+			"resolved": "https://registry.npmjs.org/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.18.6.tgz",
+			"integrity": "sha512-duORpUiYrEpzKIop6iNbjnwKLAKnJ47csTyRACyEmWj0QdUrm5aqNJGHSSEQSUAvNW0ojX0dOmK9dZduvkfeXA==",
+			"requires": {
+				"@babel/types": "^7.18.6"
+			}
+		},
+		"@babel/helper-environment-visitor": {
+			"version": "7.18.9",
+			"resolved": "https://registry.npmjs.org/@babel/helper-environment-visitor/-/helper-environment-visitor-7.18.9.tgz",
+			"integrity": "sha512-3r/aACDJ3fhQ/EVgFy0hpj8oHyHpQc+LPtJoY9SzTThAsStm4Ptegq92vqKoE3vD706ZVFWITnMnxucw+S9Ipg=="
+		},
+		"@babel/helper-function-name": {
+			"version": "7.19.0",
+			"resolved": "https://registry.npmjs.org/@babel/helper-function-name/-/helper-function-name-7.19.0.tgz",
+			"integrity": "sha512-WAwHBINyrpqywkUH0nTnNgI5ina5TFn85HKS0pbPDfxFfhyR/aNQEn4hGi1P1JyT//I0t4OgXUlofzWILRvS5w==",
+			"requires": {
+				"@babel/template": "^7.18.10",
+				"@babel/types": "^7.19.0"
+			}
+		},
+		"@babel/helper-hoist-variables": {
+			"version": "7.18.6",
+			"resolved": "https://registry.npmjs.org/@babel/helper-hoist-variables/-/helper-hoist-variables-7.18.6.tgz",
+			"integrity": "sha512-UlJQPkFqFULIcyW5sbzgbkxn2FKRgwWiRexcuaR8RNJRy8+LLveqPjwZV/bwrLZCN0eUHD/x8D0heK1ozuoo6Q==",
+			"requires": {
+				"@babel/types": "^7.18.6"
+			}
+		},
+		"@babel/helper-module-imports": {
+			"version": "7.18.6",
+			"resolved": "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.18.6.tgz",
+			"integrity": "sha512-0NFvs3VkuSYbFi1x2Vd6tKrywq+z/cLeYC/RJNFrIX/30Bf5aiGYbtvGXolEktzJH8o5E5KJ3tT+nkxuuZFVlA==",
+			"requires": {
+				"@babel/types": "^7.18.6"
+			}
+		},
+		"@babel/helper-split-export-declaration": {
+			"version": "7.18.6",
+			"resolved": "https://registry.npmjs.org/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.18.6.tgz",
+			"integrity": "sha512-bde1etTx6ZyTmobl9LLMMQsaizFVZrquTEHOqKeQESMKo4PlObf+8+JA25ZsIpZhT/WEd39+vOdLXAFG/nELpA==",
+			"requires": {
+				"@babel/types": "^7.18.6"
+			}
+		},
+		"@babel/helper-string-parser": {
+			"version": "7.19.4",
+			"resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.19.4.tgz",
+			"integrity": "sha512-nHtDoQcuqFmwYNYPz3Rah5ph2p8PFeFCsZk9A/48dPc/rGocJ5J3hAAZ7pb76VWX3fZKu+uEr/FhH5jLx7umrw=="
+		},
+		"@babel/helper-validator-identifier": {
+			"version": "7.19.1",
+			"resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.19.1.tgz",
+			"integrity": "sha512-awrNfaMtnHUr653GgGEs++LlAvW6w+DcPrOliSMXWCKo597CwL5Acf/wWdNkf/tfEQE3mjkeD1YOVZOUV/od1w=="
+		},
+		"@babel/highlight": {
+			"version": "7.18.6",
+			"resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.18.6.tgz",
+			"integrity": "sha512-u7stbOuYjaPezCuLj29hNW1v64M2Md2qupEKP1fHc7WdOA3DgLh37suiSrZYY7haUB7iBeQZ9P1uiRF359do3g==",
+			"requires": {
+				"@babel/helper-validator-identifier": "^7.18.6",
+				"chalk": "^2.0.0",
+				"js-tokens": "^4.0.0"
+			},
+			"dependencies": {
+				"ansi-styles": {
+					"version": "3.2.1",
+					"resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz",
+					"integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==",
+					"requires": {
+						"color-convert": "^1.9.0"
+					}
+				},
+				"chalk": {
+					"version": "2.4.2",
+					"resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz",
+					"integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==",
+					"requires": {
+						"ansi-styles": "^3.2.1",
+						"escape-string-regexp": "^1.0.5",
+						"supports-color": "^5.3.0"
+					}
+				},
+				"color-convert": {
+					"version": "1.9.3",
+					"resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
+					"integrity": "sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==",
+					"requires": {
+						"color-name": "1.1.3"
+					}
+				},
+				"color-name": {
+					"version": "1.1.3",
+					"resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz",
+					"integrity": "sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw=="
+				},
+				"escape-string-regexp": {
+					"version": "1.0.5",
+					"resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz",
+					"integrity": "sha512-vbRorB5FUQWvla16U8R/qgaFIya2qGzwDrNmCZuYKrbdSUMG6I1ZCGQRefkRVhuOkIGVne7BQ35DSfo1qvJqFg=="
+				},
+				"has-flag": {
+					"version": "3.0.0",
+					"resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
+					"integrity": "sha512-sKJf1+ceQBr4SMkvQnBDNDtf4TXpVhVGateu0t918bl30FnbE2m4vNLX+VWe/dpjlb+HugGYzW7uQXH98HPEYw=="
+				},
+				"supports-color": {
+					"version": "5.5.0",
+					"resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
+					"integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
+					"requires": {
+						"has-flag": "^3.0.0"
+					}
+				}
+			}
+		},
+		"@babel/parser": {
+			"version": "7.19.6",
+			"resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.19.6.tgz",
+			"integrity": "sha512-h1IUp81s2JYJ3mRkdxJgs4UvmSsRvDrx5ICSJbPvtWYv5i1nTBGcBpnog+89rAFMwvvru6E5NUHdBe01UeSzYA=="
+		},
 		"@babel/runtime": {
 			"version": "7.17.2",
 			"resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.17.2.tgz",
@ -5200,6 +5784,50 @@
 				"regenerator-runtime": "^0.13.4"
 			}
 		},
+		"@babel/template": {
+			"version": "7.18.10",
+			"resolved": "https://registry.npmjs.org/@babel/template/-/template-7.18.10.tgz",
+			"integrity": "sha512-TI+rCtooWHr3QJ27kJxfjutghu44DLnasDMwpDqCXVTal9RLp3RSYNh4NdBrRP2cQAoG9A8juOQl6P6oZG4JxA==",
+			"requires": {
+				"@babel/code-frame": "^7.18.6",
+				"@babel/parser": "^7.18.10",
+				"@babel/types": "^7.18.10"
+			}
+		},
+		"@babel/traverse": {
+			"version": "7.19.6",
+			"resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.19.6.tgz",
+			"integrity": "sha512-6l5HrUCzFM04mfbG09AagtYyR2P0B71B1wN7PfSPiksDPz2k5H9CBC1tcZpz2M8OxbKTPccByoOJ22rUKbpmQQ==",
+			"requires": {
+				"@babel/code-frame": "^7.18.6",
+				"@babel/generator": "^7.19.6",
+				"@babel/helper-environment-visitor": "^7.18.9",
+				"@babel/helper-function-name": "^7.19.0",
+				"@babel/helper-hoist-variables": "^7.18.6",
+				"@babel/helper-split-export-declaration": "^7.18.6",
+				"@babel/parser": "^7.19.6",
+				"@babel/types": "^7.19.4",
+				"debug": "^4.1.0",
+				"globals": "^11.1.0"
+			},
+			"dependencies": {
+				"globals": {
+					"version": "11.12.0",
+					"resolved": "https://registry.npmjs.org/globals/-/globals-11.12.0.tgz",
+					"integrity": "sha512-WOBp/EEGUiIsJSp7wcv/y6MO+lV9UoncWqxuFfm8eBwzWNgyfBd6Gz+IeKQ9jCmyhoH99g15M3T+QaVHFjizVA=="
+				}
+			}
+		},
+		"@babel/types": {
+			"version": "7.19.4",
+			"resolved": "https://registry.npmjs.org/@babel/types/-/types-7.19.4.tgz",
+			"integrity": "sha512-M5LK7nAeS6+9j7hAq+b3fQs+pNfUtTGq+yFFfHnauFA8zQtLRfmuipmsKDKKLuyG+wC8ABW43A153YNawNTEtw==",
+			"requires": {
+				"@babel/helper-string-parser": "^7.19.4",
+				"@babel/helper-validator-identifier": "^7.19.1",
+				"to-fast-properties": "^2.0.0"
+			}
+		},
 		"@emotion/cache": {
 			"version": "11.10.3",
 			"resolved": "https://registry.npmjs.org/@emotion/cache/-/cache-11.10.3.tgz",
@ -5212,6 +5840,14 @@
 				"stylis": "4.0.13"
 			}
 		},
+		"@emotion/is-prop-valid": {
+			"version": "1.2.0",
+			"resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-1.2.0.tgz",
+			"integrity": "sha512-3aDpDprjM0AwaxGE09bOPkNxHpBd+kA6jty3RnaEXdweX1DF1U3VQpPYb0g1IStAuK7SVQ1cy+bNBBKp4W3Fjg==",
+			"requires": {
+				"@emotion/memoize": "^0.8.0"
+			}
+		},
 		"@emotion/memoize": {
 			"version": "0.8.0",
 			"resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.8.0.tgz",
@ -5233,6 +5869,16 @@
 			"resolved": "https://registry.npmjs.org/@emotion/sheet/-/sheet-1.2.0.tgz",
 			"integrity": "sha512-OiTkRgpxescko+M51tZsMq7Puu/KP55wMT8BgpcXVG2hqXc0Vo0mfymJ/Uj24Hp0i083ji/o0aLddh08UEjq8w=="
 		},
+		"@emotion/stylis": {
+			"version": "0.8.5",
+			"resolved": "https://registry.npmjs.org/@emotion/stylis/-/stylis-0.8.5.tgz",
+			"integrity": "sha512-h6KtPihKFn3T9fuIrwvXXUOwlx3rfUvfZIcP5a6rh8Y7zjE3O06hT5Ss4S/YI1AYhuZ1kjaE/5EaOOI2NqSylQ=="
+		},
+		"@emotion/unitless": {
+			"version": "0.7.5",
+			"resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.7.5.tgz",
+			"integrity": "sha512-OWORNpfjMsSSUBVrRBVGECkhWcULOAJz9ZW8uK9qgxD+87M7jHRcvh/A96XXNhXTLmKcoYSQtBEX7lHMO7YRwg=="
+		},
 		"@emotion/utils": {
 			"version": "1.2.0",
 			"resolved": "https://registry.npmjs.org/@emotion/utils/-/utils-1.2.0.tgz",
@ -5400,6 +6046,40 @@
 			"resolved": "https://registry.npmjs.org/@ioredis/commands/-/commands-1.2.0.tgz",
 			"integrity": "sha512-Sx1pU8EM64o2BrqNpEO1CNLtKQwyhuXuqyfH7oGKCk+1a33d2r5saW8zNwm3j6BTExtjrv2BxTgzzkMwts6vGg=="
 		},
+		"@jridgewell/gen-mapping": {
+			"version": "0.3.2",
+			"resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.2.tgz",
+			"integrity": "sha512-mh65xKQAzI6iBcFzwv28KVWSmCkdRBWoOh+bYQGW3+6OZvbbN3TqMGo5hqYxQniRcH9F2VZIoJCm4pa3BPDK/A==",
+			"requires": {
+				"@jridgewell/set-array": "^1.0.1",
+				"@jridgewell/sourcemap-codec": "^1.4.10",
+				"@jridgewell/trace-mapping": "^0.3.9"
+			}
+		},
+		"@jridgewell/resolve-uri": {
+			"version": "3.1.0",
+			"resolved": "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.1.0.tgz",
+			"integrity": "sha512-F2msla3tad+Mfht5cJq7LSXcdudKTWCVYUgw6pLFOOHSTtZlj6SWNYAp+AhuqLmWdBO2X5hPrLcu8cVP8fy28w=="
+		},
+		"@jridgewell/set-array": {
+			"version": "1.1.2",
+			"resolved": "https://registry.npmjs.org/@jridgewell/set-array/-/set-array-1.1.2.tgz",
+			"integrity": "sha512-xnkseuNADM0gt2bs+BvhO0p78Mk762YnZdsuzFV018NoG1Sj1SCQvpSqa7XUaTam5vAGasABV9qXASMKnFMwMw=="
+		},
+		"@jridgewell/sourcemap-codec": {
+			"version": "1.4.14",
+			"resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.14.tgz",
+			"integrity": "sha512-XPSJHWmi394fuUuzDnGz1wiKqWfo1yXecHQMRf2l6hztTO+nPru658AyDngaBe7isIxEkRsPR3FZh+s7iVa4Uw=="
+		},
+		"@jridgewell/trace-mapping": {
+			"version": "0.3.17",
+			"resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.17.tgz",
+			"integrity": "sha512-MCNzAp77qzKca9+W/+I0+sEpaUnZoeasnghNeVc41VZCEKaCH73Vq3BZZ/SzWIgrqE4H4ceI+p+b6C0mHf9T4g==",
+			"requires": {
+				"@jridgewell/resolve-uri": "3.1.0",
+				"@jridgewell/sourcemap-codec": "1.4.14"
+			}
+		},
 		"@next/env": {
 			"version": "13.0.0",
 			"resolved": "https://registry.npmjs.org/@next/env/-/env-13.0.0.tgz",
@ -6670,6 +7350,23 @@
 			"integrity": "sha512-Td525n+iPOOyUQIeBfcASuG6uJsDOITl7Mds5gFyerkWiX7qhUTdYUBlSgNMyVqtSJqwpt1kXGLdUt6SykLMRA==",
 			"dev": true
 		},
+		"babel-plugin-styled-components": {
+			"version": "2.0.7",
+			"resolved": "https://registry.npmjs.org/babel-plugin-styled-components/-/babel-plugin-styled-components-2.0.7.tgz",
+			"integrity": "sha512-i7YhvPgVqRKfoQ66toiZ06jPNA3p6ierpfUuEWxNF+fV27Uv5gxBkf8KZLHUCc1nFA9j6+80pYoIpqCeyW3/bA==",
+			"requires": {
+				"@babel/helper-annotate-as-pure": "^7.16.0",
+				"@babel/helper-module-imports": "^7.16.0",
+				"babel-plugin-syntax-jsx": "^6.18.0",
+				"lodash": "^4.17.11",
+				"picomatch": "^2.3.0"
+			}
+		},
+		"babel-plugin-syntax-jsx": {
+			"version": "6.18.0",
+			"resolved": "https://registry.npmjs.org/babel-plugin-syntax-jsx/-/babel-plugin-syntax-jsx-6.18.0.tgz",
+			"integrity": "sha512-qrPaCSo9c8RHNRHIotaufGbuOBN8rtdC4QrrFFc43vyWCCz7Kl7GL1PGaXtMGQZUXrkCjNEgxDfmAuAabr/rlw=="
+		},
 		"balanced-match": {
 			"version": "1.0.2",
 			"resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
@ -6765,6 +7462,11 @@
 			"integrity": "sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==",
 			"dev": true
 		},
+		"camelize": {
+			"version": "1.0.1",
+			"resolved": "https://registry.npmjs.org/camelize/-/camelize-1.0.1.tgz",
+			"integrity": "sha512-dU+Tx2fsypxTgtLoE36npi3UqcjSSMNYfkqgmoEhtZrraP5VWq0K7FkWVTYa8eMPtnU/G2txVsfdCJTn9uzpuQ=="
+		},
 		"caniuse-lite": {
 			"version": "1.0.30001422",
 			"resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001422.tgz",
@ -6859,6 +7561,21 @@
 				"which": "^2.0.1"
 			}
 		},
+		"css-color-keywords": {
+			"version": "1.0.0",
+			"resolved": "https://registry.npmjs.org/css-color-keywords/-/css-color-keywords-1.0.0.tgz",
+			"integrity": "sha512-FyyrDHZKEjXDpNJYvVsV960FiqQyXc/LlYmsxl2BcdMb2WPx0OGRVgTg55rPSyLSNMqP52R9r8geSp7apN3Ofg=="
+		},
+		"css-to-react-native": {
+			"version": "3.0.0",
+			"resolved": "https://registry.npmjs.org/css-to-react-native/-/css-to-react-native-3.0.0.tgz",
+			"integrity": "sha512-Ro1yETZA813eoyUp2GDBhG2j+YggidUmzO1/v9eYBKR2EHVEniE2MI/NqpTQ954BMpTPZFsGNPm46qFB9dpaPQ==",
+			"requires": {
+				"camelize": "^1.0.0",
+				"css-color-keywords": "^1.0.0",
+				"postcss-value-parser": "^4.0.2"
+			}
+		},
 		"csstype": {
 			"version": "3.1.1",
 			"resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.1.tgz",
@ -7692,6 +8409,14 @@
 				"has-symbols": "^1.0.2"
 			}
 		},
+		"hoist-non-react-statics": {
+			"version": "3.3.2",
+			"resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz",
+			"integrity": "sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==",
+			"requires": {
+				"react-is": "^16.7.0"
+			}
+		},
 		"html-tokenize": {
 			"version": "2.0.1",
 			"resolved": "https://registry.npmjs.org/html-tokenize/-/html-tokenize-2.0.1.tgz",
@ -7963,6 +8688,11 @@
 				"argparse": "^2.0.1"
 			}
 		},
+		"jsesc": {
+			"version": "2.5.2",
+			"resolved": "https://registry.npmjs.org/jsesc/-/jsesc-2.5.2.tgz",
+			"integrity": "sha512-OYu7XEzjkCQ3C5Ps3QIZsQfNpqoJyZZA99wd9aWd05NCtC5pWOkShK2mkL6HXQR6/Cy2lbNdPlZBpuQHXE63gA=="
+		},
 		"json-schema-traverse": {
 			"version": "0.4.1",
 			"resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz",
@ -8019,6 +8749,11 @@
 				"type-check": "~0.4.0"
 			}
 		},
+		"lodash": {
+			"version": "4.17.21",
+			"resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
+			"integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg=="
+		},
 		"lodash.defaults": {
 			"version": "4.2.0",
 			"resolved": "https://registry.npmjs.org/lodash.defaults/-/lodash.defaults-4.2.0.tgz",
@ -8322,8 +9057,7 @@
 		"picomatch": {
 			"version": "2.3.1",
 			"resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
-      "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
-      "dev": true
+			"integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA=="
 		},
 		"postcss": {
 			"version": "8.4.14",
@ -8335,6 +9069,11 @@
 				"source-map-js": "^1.0.2"
 			}
 		},
+		"postcss-value-parser": {
+			"version": "4.2.0",
+			"resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz",
+			"integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ=="
+		},
 		"prebuild-install": {
 			"version": "7.1.1",
 			"resolved": "https://registry.npmjs.org/prebuild-install/-/prebuild-install-7.1.1.tgz",
@ -8569,6 +9308,11 @@
 				"lru-cache": "^6.0.0"
 			}
 		},
+		"shallowequal": {
+			"version": "1.1.0",
+			"resolved": "https://registry.npmjs.org/shallowequal/-/shallowequal-1.1.0.tgz",
+			"integrity": "sha512-y0m1JoUZSlPAjXVtPPW70aZWfIL/dSP7AFkRnniLCrK/8MDKog3TySTBmckD+RObVxH0v4Tox67+F14PdED2oQ=="
+		},
 		"sharp": {
 			"version": "0.31.1",
 			"resolved": "https://registry.npmjs.org/sharp/-/sharp-0.31.1.tgz",
@ -8713,6 +9457,38 @@
 			"integrity": "sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==",
 			"dev": true
 		},
+		"styled-components": {
+			"version": "5.3.6",
+			"resolved": "https://registry.npmjs.org/styled-components/-/styled-components-5.3.6.tgz",
+			"integrity": "sha512-hGTZquGAaTqhGWldX7hhfzjnIYBZ0IXQXkCYdvF1Sq3DsUaLx6+NTHC5Jj1ooM2F68sBiVz3lvhfwQs/S3l6qg==",
+			"requires": {
+				"@babel/helper-module-imports": "^7.0.0",
+				"@babel/traverse": "^7.4.5",
+				"@emotion/is-prop-valid": "^1.1.0",
+				"@emotion/stylis": "^0.8.4",
+				"@emotion/unitless": "^0.7.4",
+				"babel-plugin-styled-components": ">= 1.12.0",
+				"css-to-react-native": "^3.0.0",
+				"hoist-non-react-statics": "^3.0.0",
+				"shallowequal": "^1.1.0",
+				"supports-color": "^5.5.0"
+			},
+			"dependencies": {
+				"has-flag": {
+					"version": "3.0.0",
+					"resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
+					"integrity": "sha512-sKJf1+ceQBr4SMkvQnBDNDtf4TXpVhVGateu0t918bl30FnbE2m4vNLX+VWe/dpjlb+HugGYzW7uQXH98HPEYw=="
+				},
+				"supports-color": {
+					"version": "5.5.0",
+					"resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
+					"integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
+					"requires": {
+						"has-flag": "^3.0.0"
+					}
+				}
+			}
+		},
 		"styled-jsx": {
 			"version": "5.1.0",
 			"resolved": "https://registry.npmjs.org/styled-jsx/-/styled-jsx-5.1.0.tgz",
@ -8809,6 +9585,11 @@
 				"xtend": "~2.1.1"
 			}
 		},
+		"to-fast-properties": {
+			"version": "2.0.0",
+			"resolved": "https://registry.npmjs.org/to-fast-properties/-/to-fast-properties-2.0.0.tgz",
+			"integrity": "sha512-/OaKK0xYrs3DmxRYqL/yDc+FxFUVYhDlXMhRmv3z915w2HF1tnN1omB354j8VUGO/hbRzyD6Y3sA7v7GS/ceog=="
+		},
 		"to-regex-range": {
 			"version": "5.0.1",
 			"resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
--- a/package.json
+++ b/package.json
@ -2,17 +2,21 @@
 	"name": "beatsaber-overlay",
 	"private": true,
 	"scripts": {
-    "dev": "next dev",
+		"dev": "set APP_ENV=development && next dev",
 		"build": "next build",
-    "start": "npm i && next build && next start -p 3001",
+		"start": "APP_ENV=production npm i && next build && next start -p 3001",
 		"lint": "next lint"
 	},
 	"dependencies": {
 		"@emotion/cache": "^11.10.3",
 		"@emotion/server": "^11.10.0",
+		"@next/font": "^13.0.0",
 		"@nextui-org/react": "^1.0.0-beta.10",
+		"crypto": "^1.0.1",
+		"events": "^3.3.0",
+		"fs": "^0.0.1-security",
 		"ioredis": "^5.2.3",
-    "next": "13",
+		"next": "^13.0.0",
 		"next-seo": "^5.8.0",
 		"next-themes": "^0.2.1",
 		"node-fetch": "^3.2.10",
@ -21,13 +25,14 @@
 		"react-country-flag": "^3.0.2",
 		"react-dom": "^18.2.0",
 		"react-toastify": "^9.0.8",
-    "sharp": "^0.31.1"
+		"sharp": "^0.31.1",
+		"styled-components": "^5.3.6"
 	},
 	"devDependencies": {
 		"@types/node": "^18.11.5",
 		"@types/react": "^18.0.23",
 		"eslint": "8.26.0",
-    "eslint-config-next": "13.0.0",
+		"eslint-config-next": "^13.0.0",
 		"typescript": "^4.8.4"
 	}
 }
--- a/src/components/PlayerStats.js
+++ b/src/components/PlayerStats.js
@ -7,7 +7,7 @@ const PlayerStats = (props) => {
 	return (
 		<div className={styles.playerStatsContainer}>
 			<div>
-				<Avatar url={props.avatar} />
+				<Avatar url={`https://cdn.scoresaber.com/avatars/${props.id}.jpg`} />
 			</div>
 			<div className={styles.playerStats}>
 				<p>
--- a/src/pages/_app.js
+++ b/src/pages/_app.js
@ -19,7 +19,7 @@ const darkTheme = createTheme({

 function MyApp({ Component, pageProps }) {
 	return (
-		<>
+		<div>
 			<DefaultSeo
 				titleTemplate={`${process.env.NEXT_PUBLIC_SITE_NAME} | %s`}
 				description={process.env.NEXT_PUBLIC_SITE_DESCRIPTION}
@ -52,7 +52,7 @@ function MyApp({ Component, pageProps }) {
 					<Component {...pageProps} />
 				</NextUIProvider>
 			</NextThemesProvider>
-		</>
+		</div>
 	);
 }

--- a/src/pages/_document.js
+++ b/src/pages/_document.js
@ -16,15 +16,6 @@ class MyDocument extends Document {
 			<Html lang="en">
 				<Head>
 					{CssBaseline.flush()}
-
-					<link
-						href="https://fonts.googleapis.com/css2?family=Roboto:wght@300&display=swap"
-						rel="stylesheet"
-					/>
-					<link
-						href="https://fonts.googleapis.com/css2?family=Teko:wght@300&display=swap"
-						rel="stylesheet"
-					/>
 					<link rel="shortcut icon" href="/favicon.ico" />

 					<meta
--- a/src/pages/overlay.js
+++ b/src/pages/overlay.js
@ -1,3 +1,4 @@
+import { Teko } from "@next/font/google";
 import { Link, Spinner } from "@nextui-org/react";
 import { NextSeo } from "next-seo";
 import { Component } from "react";
@ -9,6 +10,11 @@ import Utils from "../../src/utils/utils";

 import styles from "../styles/overlay.module.css";

+const teko = Teko({
+	weight: "300",
+	subsets: ["latin"],
+});
+
 export default class Overlay extends Component {
 	#_beatSaverURL = "";

@ -440,7 +446,7 @@ export default class Overlay extends Component {
 		}

 		return (
-			<>
+			<div className={teko.className}>
 				<NextSeo title="Overlay"></NextSeo>
 				<div className={styles.main}>
 					{!isValidSteamId ? (
@ -454,6 +460,7 @@ export default class Overlay extends Component {
 						<div className={styles.overlay}>
 							{showPlayerStats && !loadingPlayerData ? (
 								<PlayerStats
+									id={id}
 									pp={data.pp.toLocaleString("en-US", {
 										maximumFractionDigits: 2,
 										minimumFractionDigits: 2,
@ -462,7 +469,6 @@ export default class Overlay extends Component {
 									country={data.country}
 									countryRank={data.countryRank.toLocaleString()}
 									websiteType={websiteType}
-									avatar={`https://cdn.scoresaber.com/avatars/${id}.jpg`}
 									loadedDuringSong={this.state.loadedDuringSong}
 								/>
 							) : (
@ -483,7 +489,7 @@ export default class Overlay extends Component {
 						</div>
 					)}
 				</div>
-			</>
+			</div>
 		);
 	}
 }
--- a/src/styles/main.module.css
+++ b/src/styles/main.module.css
@ -1,5 +1,4 @@
 .main {
-	font-family: "Roboto", sans-serif !important;
 	color: white;
 	font-size: xx-large;
 	line-height: 1.4em !important;
--- a/src/styles/overlay.module.css
+++ b/src/styles/overlay.module.css
@ -1,12 +1,12 @@
 .main {
-	font-family: "Teko", sans-serif !important;
+	font-family: inherit !important;
 	color: white;
 	font-size: xx-large;
 	line-height: 1.4em !important;
 }

 .main p {
-	font-family: "Teko", sans-serif !important;
+	font-family: inherit !important;
 	color: white;
 	letter-spacing: normal;
 }
--- a/yarn.lock
+++ b/yarn.lock