matrix-art

commit b09e301e96561b8e79d7550f65b06499235d9416
parent deea3abc590d08920e1e1112352f24795743681b
Author: MTRNord <mtrnord1@gmail.com>
Date:   Tue,  8 Feb 2022 01:12:16 +0100

Sweitch header logic to make it work easier and move skeleton of page up in the tree to make it render more efficently

Diffstat:
M
components/Header.tsx
 | 
64
++++++++++++++++++++++++++++++++++++++++++++++++++++------------
M
helpers/matrix_client.ts
 | 
43
++++++++++++++++++-------------------------
M
helpers/storage.ts
 | 
4
++--
M
package-lock.json
 | 
1489
+++++++++++++++++++++++++++++++++++++++++--------------------------------------
M
package.json
 | 
5
++---
M
pages/_app.tsx
 | 
16
++++++++++++++--
M
pages/_document.tsx
 | 
4
++--
M
pages/index.tsx
 | 
30
++++++++++++------------------
M
pages/login.tsx
 | 
143
+++++++++++++++++++++++++++++++++++--------------------------------------------
M
pages/post/[id].tsx
 | 
66
++++++++++++++++++++++++------------------------------------------
M
pages/profile/[userid].tsx
 | 
245
++++++++++++++++++++++++++++++++++++++-----------------------------------------
M
pages/submit.tsx
 | 
8
++------

12 files changed, 1085 insertions(+), 1032 deletions(-)
diff --git a/components/Header.tsx b/components/Header.tsx
@@ -4,6 +4,7 @@ import User from "../helpers/db/Users";
 import { ClientContext } from "./ClientContext";
 import { i18n } from 'next-i18next';
 import { toast } from "react-toastify";
+import dynamic from "next/dynamic";
 
 type Props = {
 };
@@ -47,8 +48,6 @@ export default class Header extends PureComponent<Props, State> {
         if (this.state.loading) {
             return <></>;
         }
-        const loggedIn = (typeof window === "undefined") ? undefined : !this.context.client.isGuest;
-        console.log("loggedIn:", loggedIn);
         return (
             <>
                 <header className='bg-[#f8f8f8] dark:bg-[#06070D] flex fixed top-0 left-0 right-0 lg:h-20 h-auto z-[100] items-center lg:flex-row flex-col shadow-black drop-shadow-xl'>
@@ -80,20 +79,61 @@ export default class Header extends PureComponent<Props, State> {
                         </div>
 
                         <nav className='flex lg:flex-shrink-0 my-4'>
-                            {loggedIn !== undefined && !loggedIn ? <span className='px-4 h-auto min-w-[1.5rem] flex items-center whitespace-nowrap cursor-pointer text-gray-900 dark:text-gray-200 font-medium brightness-100 hover:brightness-75 duration-200 ease-in-out transition-all'><Link href="/register">{i18n?.t('Join')}</Link></span> : undefined}
-                            {loggedIn !== undefined && !loggedIn ? <span className='px-4 h-auto min-w-[1.5rem] flex items-center whitespace-nowrap cursor-pointer text-gray-900 dark:text-gray-200 font-medium brightness-100 hover:brightness-75 duration-200 ease-in-out transition-all'><Link href="/login">{i18n?.t('Log in')}</Link></span> : undefined}
-                            {loggedIn !== undefined && loggedIn && this.state.directory_data.some(thing => thing.mxid == this.context.client.userId) ? <span className='px-4 h-auto min-w-[1.5rem] flex items-center whitespace-nowrap cursor-pointer text-gray-900 dark:text-gray-200 font-medium brightness-100 hover:brightness-75 duration-200 ease-in-out transition-all'><Link href={"/profile/" + encodeURIComponent(this.context.client.userId!)}>{i18n?.t('Profile')}</Link></span> : undefined}
-                            {loggedIn !== undefined && loggedIn ? <span className='px-4 h-auto min-w-[1.5rem] flex items-center whitespace-nowrap cursor-pointer text-gray-900 dark:text-gray-200 font-medium brightness-100 hover:brightness-75 duration-200 ease-in-out transition-all'><Link href="/logout/">{i18n?.t('Logout')}</Link></span> : undefined}
+                            <ClientContext.Consumer>
+                                {value => {
+                                    const isGuest = value.client.isGuest === null || value.client.isGuest === undefined ? true : value.client.isGuest;
+                                    console.log("isGuest1:", isGuest);
+                                    if (typeof window !== "undefined" && isGuest) {
+                                        return (
+                                            <>
+                                                <span className='px-4 h-auto min-w-[1.5rem] flex items-center whitespace-nowrap cursor-pointer text-gray-900 dark:text-gray-200 font-medium brightness-100 hover:brightness-75 duration-200 ease-in-out transition-all'><Link href="/register">{i18n?.t('Join')}</Link></span>
+                                                <span className='px-4 h-auto min-w-[1.5rem] flex items-center whitespace-nowrap cursor-pointer text-gray-900 dark:text-gray-200 font-medium brightness-100 hover:brightness-75 duration-200 ease-in-out transition-all'><Link href="/login">{i18n?.t('Log in')}</Link></span>
+                                            </>
+                                        );
+                                    } else if (typeof window !== "undefined") {
+                                        if (this.state.directory_data.some(thing => thing.mxid == this.context.client.userId)) {
+                                            return (
+                                                <>
+                                                    <span className='px-4 h-auto min-w-[1.5rem] flex items-center whitespace-nowrap cursor-pointer text-gray-900 dark:text-gray-200 font-medium brightness-100 hover:brightness-75 duration-200 ease-in-out transition-all'><Link href={"/profile/" + encodeURIComponent(this.context.client.userId!)}>{i18n?.t('Profile')}</Link></span>
+                                                    <span className='px-4 h-auto min-w-[1.5rem] flex items-center whitespace-nowrap cursor-pointer text-gray-900 dark:text-gray-200 font-medium brightness-100 hover:brightness-75 duration-200 ease-in-out transition-all'><Link href="/logout/">{i18n?.t('Logout')}</Link></span>
+                                                </>
+                                            );
+                                        }
+                                        return <span className='px-4 h-auto min-w-[1.5rem] flex items-center whitespace-nowrap cursor-pointer text-gray-900 dark:text-gray-200 font-medium brightness-100 hover:brightness-75 duration-200 ease-in-out transition-all'><Link href="/logout/">{i18n?.t('Logout')}</Link></span>;
+
+                                    }
+                                }}
+                            </ClientContext.Consumer>
                         </nav>
                     </div>
-                    {loggedIn !== undefined && loggedIn ? <span className='lg:opacity-100 opacity-0 inline-block bg-gray-900 dark:bg-gray-200 w-[1px] lg:h-7 h-0'></span> : <span className="mr-4"></span>}
+
+                    <ClientContext.Consumer>
+                        {value => {
+                            const isGuest = value.client.isGuest === null || value.client.isGuest === undefined ? true : value.client.isGuest;
+                            console.log("isGuest2:", isGuest);
+                            if (typeof window !== "undefined" && !isGuest) {
+                                return (<span className='lg:opacity-100 opacity-0 inline-block bg-gray-900 dark:bg-gray-200 w-[1px] lg:h-7 h-0'></span>);
+                            } else {
+                                return (<span className="mr-4"></span>);
+                            }
+                        }}
+                    </ClientContext.Consumer>
+
                     <div className='relative lg:m-0'>
                         <div className='flex'>
-                            {
-                                this.state.directory_data.some(thing => thing.mxid == this.context.client.userId) ?
-                                    (loggedIn !== undefined && loggedIn ? <Link href="/submit"><a className='inline-flex justify-center items-center text-teal-400 hover:text-teal-200 bg-transparent relative h-14 min-w-[9.25rem] z-[2] cursor-pointer font-bold'>{i18n?.t('Submit')}</a></Link> : undefined) :
-                                    (loggedIn !== undefined && loggedIn ? <a className='inline-flex justify-center items-center text-teal-400 hover:text-teal-200 bg-transparent relative h-14 min-w-[9.25rem] z-[2] cursor-pointer font-bold'>{i18n?.t('Setup Account')}</a> : undefined)
-                            }
+                            <ClientContext.Consumer>
+                                {value => {
+                                    const isGuest = value.client.isGuest === null || value.client.isGuest === undefined ? true : value.client.isGuest;
+                                    console.log("isGuest3:", isGuest);
+                                    if (typeof window !== "undefined" && !isGuest) {
+                                        if (this.state.directory_data.some(thing => thing.mxid == this.context.client.userId)) {
+                                            return <Link href="/submit"><a className='inline-flex justify-center items-center text-teal-400 hover:text-teal-200 bg-transparent relative h-14 min-w-[9.25rem] z-[2] cursor-pointer font-bold'>{i18n?.t('Submit')}</a></Link>;
+                                        } else {
+                                            return <a className='inline-flex justify-center items-center text-teal-400 hover:text-teal-200 bg-transparent relative h-14 min-w-[9.25rem] z-[2] cursor-pointer font-bold'>{i18n?.t('Setup Account')}</a>;
+                                        }
+                                    }
+                                }}
+                            </ClientContext.Consumer>
                         </div>
                     </div>
                 </header>
diff --git a/helpers/matrix_client.ts b/helpers/matrix_client.ts
@@ -5,9 +5,8 @@ import Storage from './storage';
 export const constMatrixArtServer = process.env.NEXT_PUBLIC_DEFAULT_SERVER_URL || "https://matrix.art.midnightthoughts.space";
 
 export default class MatrixClient {
-    private joinedRooms: Map<string, string>;
-    private userProfileCache: Map<string, any>;
-    private storage!: Storage;
+    private joinedRooms: Map<string, string> = new Map<string, string>(); // room alias -> room ID
+    private userProfileCache: Map<string, { displayname?: string; avatar_url?: string; }> = new Map(); // user_id -> {display_name; avatar;}
     private serverUrl?: string;
     private _userId?: string;
     private _accessToken?: string;
@@ -20,27 +19,21 @@ export default class MatrixClient {
     get accessToken(): string | undefined {
         return this._accessToken;
     }
-    get isGuest(): boolean {
-        return this._isGuest === undefined ? true : this._isGuest;
+    get isGuest(): boolean | undefined {
+        return this._isGuest;
     }
 
     get profileRoomId(): string | undefined {
         return this.joinedRooms.get(`#${this.userId}`) || this._profileRoomId;
     }
 
-    constructor(storage: Storage) {
-        this.joinedRooms = new Map(); // room alias -> room ID
-        this.userProfileCache = new Map(); // user_id -> {display_name; avatar;}
-        if (!storage) {
-            return;
-        }
-        this.storage = storage;
-        this.serverUrl = storage.getItem("serverUrl");
-        this._userId = storage.getItem("userId");
-        this._accessToken = storage.getItem("accessToken");
-        this._isGuest = storage.getItem("isGuest");
-        this.serverName = storage.getItem("serverName");
-        this._profileRoomId = storage.getItem("profileRoomId");
+    constructor(private storage: Storage) {
+        this.serverUrl = this.storage.getItem("serverUrl");
+        this._userId = this.storage.getItem("userId");
+        this._accessToken = this.storage.getItem("accessToken");
+        this._isGuest = this.storage.getItem("isGuest");
+        this.serverName = this.storage.getItem("serverName");
+        this._profileRoomId = this.storage.getItem("profileRoomId");
     }
 
     private saveAuthState() {
@@ -213,7 +206,7 @@ export default class MatrixClient {
     async setDisplayname(newDisplayname: string) {
         if (process.env.NEXT_PUBLIC_ENV === "test") {
             if (this.userProfileCache.has(this.userId!)) {
-                const old = this.userProfileCache.get(this.userId!);
+                const old = this.userProfileCache.get(this.userId!)!;
                 old.displayname = newDisplayname;
                 this.userProfileCache.set(this.userId!, old);
             } else {
@@ -231,7 +224,7 @@ export default class MatrixClient {
             }
         );
         if (this.userProfileCache.has(this.userId!)) {
-            const old = this.userProfileCache.get(this.userId!);
+            const old = this.userProfileCache.get(this.userId!)!;
             old.displayname = newDisplayname;
             this.userProfileCache.set(this.userId!, old);
         } else {
@@ -242,7 +235,7 @@ export default class MatrixClient {
     async setAvatarUrl(newAvatarUrl: string) {
         if (process.env.NEXT_PUBLIC_ENV === "test") {
             if (this.userProfileCache.has(this.userId!)) {
-                const old = this.userProfileCache.get(this.userId!);
+                const old = this.userProfileCache.get(this.userId!)!;
                 old.avatar_url = newAvatarUrl;
                 this.userProfileCache.set(this.userId!, old);
             } else {
@@ -260,7 +253,7 @@ export default class MatrixClient {
             }
         );
         if (this.userProfileCache.has(this.userId!)) {
-            const old = this.userProfileCache.get(this.userId!);
+            const old = this.userProfileCache.get(this.userId!)!;
             old.avatar_url = newAvatarUrl;
             this.userProfileCache.set(this.userId!, old);
         } else {
@@ -278,7 +271,7 @@ export default class MatrixClient {
         }
         if (this.userProfileCache.has(userId)) {
             console.debug(`Returning cached copy of ${userId}'s profile`);
-            return this.userProfileCache.get(userId);
+            return this.userProfileCache.get(userId)!;
         }
         console.debug(`Fetching fresh copy of ${userId}'s profile`);
         const data = await this.fetchJson(
@@ -318,7 +311,7 @@ export default class MatrixClient {
                 }
             );
             if (isMyself) {
-                this.storage.setOrDelete("profileRoomId", data.room_id);
+                this.storage?.setOrDelete("profileRoomId", data.room_id);
             }
             this.joinedRooms.set(roomAlias, data.room_id);
             return data.room_id;
@@ -362,7 +355,7 @@ export default class MatrixClient {
                 );
                 this.joinedRooms.set(roomAlias, data.room_id);
 
-                this.storage.setOrDelete("profileRoomId", data.room_id);
+                this.storage?.setOrDelete("profileRoomId", data.room_id);
                 return data.room_id;
             } else {
                 throw error;
diff --git a/helpers/storage.ts b/helpers/storage.ts
@@ -1,4 +1,4 @@
-const STORAGE_VERSION = 3;
+const STORAGE_VERSION = 4;
 export default class Storage {
     private prefix;
     private nodeLocalStorage?: any;
@@ -63,7 +63,7 @@ export default class Storage {
     }
 
     setOrDelete(key: string, value: any) {
-        if (value) {
+        if (value !== null || value !== undefined) {
             this.setItem(key, value);
         } else {
             this.removeItem(key);
diff --git a/package-lock.json b/package-lock.json
@@ -14,7 +14,7 @@
         "next": "12.0.10",
         "next-i18next": "10.2.0",
         "node-localstorage": "2.2.1",
-        "png-chunks-extract": "^1.0.0",
+        "png-chunks-extract": "1.0.0",
         "prop-types": "15.8.1",
         "react": "17.0.2",
         "react-blurhash": "0.1.3",
@@ -24,7 +24,7 @@
         "reflect-metadata": "0.1.13",
         "sequelize": "6.15.1",
         "sequelize-typescript": "2.1.2",
-        "sqlite3": "5.0.2"
+        "sqlite3": "^5.0.2"
       },
       "devDependencies": {
         "@babel/plugin-transform-typescript": "7.16.8",
@@ -53,6 +53,18 @@
         "fsevents": "2.3.2"
       }
     },
+    "node_modules/@ampproject/remapping": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/@ampproject/remapping/-/remapping-2.1.0.tgz",
+      "integrity": "sha512-d5RysTlJ7hmw5Tw4UxgxcY3lkMe92n8sXCcuLPAyIAHK6j8DefDwtGnVVDgOnv+RnEosulDJ9NPKQL27bDId0g==",
+      "dev": true,
+      "dependencies": {
+        "@jridgewell/trace-mapping": "^0.3.0"
+      },
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
     "node_modules/@babel/code-frame": {
       "version": "7.16.7",
       "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.16.7.tgz",
@@ -66,35 +78,35 @@
       }
     },
     "node_modules/@babel/compat-data": {
-      "version": "7.16.8",
-      "resolved": "https://registry.npmjs.org/@babel/compat-data/-/compat-data-7.16.8.tgz",
-      "integrity": "sha512-m7OkX0IdKLKPpBlJtF561YJal5y/jyI5fNfWbPxh2D/nbzzGI4qRyrD8xO2jB24u7l+5I2a43scCG2IrfjC50Q==",
+      "version": "7.17.0",
+      "resolved": "https://registry.npmjs.org/@babel/compat-data/-/compat-data-7.17.0.tgz",
+      "integrity": "sha512-392byTlpGWXMv4FbyWw3sAZ/FrW/DrwqLGXpy0mbyNe9Taqv1mg9yON5/o0cnr8XYCkFTZbC1eV+c+LAROgrng==",
       "dev": true,
       "engines": {
         "node": ">=6.9.0"
       }
     },
     "node_modules/@babel/core": {
-      "version": "7.16.10",
-      "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.16.10.tgz",
-      "integrity": "sha512-pbiIdZbCiMx/MM6toR+OfXarYix3uz0oVsnNtfdAGTcCTu3w/JGF8JhirevXLBJUu0WguSZI12qpKnx7EeMyLA==",
+      "version": "7.17.0",
+      "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.17.0.tgz",
+      "integrity": "sha512-x/5Ea+RO5MvF9ize5DeVICJoVrNv0Mi2RnIABrZEKYvPEpldXwauPkgvYA17cKa6WpU3LoYvYbuEMFtSNFsarA==",
       "dev": true,
       "dependencies": {
+        "@ampproject/remapping": "^2.0.0",
         "@babel/code-frame": "^7.16.7",
-        "@babel/generator": "^7.16.8",
+        "@babel/generator": "^7.17.0",
         "@babel/helper-compilation-targets": "^7.16.7",
         "@babel/helper-module-transforms": "^7.16.7",
-        "@babel/helpers": "^7.16.7",
-        "@babel/parser": "^7.16.10",
+        "@babel/helpers": "^7.17.0",
+        "@babel/parser": "^7.17.0",
         "@babel/template": "^7.16.7",
-        "@babel/traverse": "^7.16.10",
-        "@babel/types": "^7.16.8",
+        "@babel/traverse": "^7.17.0",
+        "@babel/types": "^7.17.0",
         "convert-source-map": "^1.7.0",
         "debug": "^4.1.0",
         "gensync": "^1.0.0-beta.2",
         "json5": "^2.1.2",
-        "semver": "^6.3.0",
-        "source-map": "^0.5.0"
+        "semver": "^6.3.0"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -105,12 +117,12 @@
       }
     },
     "node_modules/@babel/generator": {
-      "version": "7.16.8",
-      "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.16.8.tgz",
-      "integrity": "sha512-1ojZwE9+lOXzcWdWmO6TbUzDfqLD39CmEhN8+2cX9XkDo5yW1OpgfejfliysR2AWLpMamTiOiAp/mtroaymhpw==",
+      "version": "7.17.0",
+      "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.17.0.tgz",
+      "integrity": "sha512-I3Omiv6FGOC29dtlZhkfXO6pgkmukJSlT26QjVvS1DGZe/NzSVCPG41X0tS21oZkJYlovfj9qDWgKP+Cn4bXxw==",
       "dev": true,
       "dependencies": {
-        "@babel/types": "^7.16.8",
+        "@babel/types": "^7.17.0",
         "jsesc": "^2.5.1",
         "source-map": "^0.5.0"
       },
@@ -149,9 +161,9 @@
       }
     },
     "node_modules/@babel/helper-create-class-features-plugin": {
-      "version": "7.16.10",
-      "resolved": "https://registry.npmjs.org/@babel/helper-create-class-features-plugin/-/helper-create-class-features-plugin-7.16.10.tgz",
-      "integrity": "sha512-wDeej0pu3WN/ffTxMNCPW5UCiOav8IcLRxSIyp/9+IF2xJUM9h/OYjg0IJLHaL6F8oU8kqMz9nc1vryXhMsgXg==",
+      "version": "7.17.1",
+      "resolved": "https://registry.npmjs.org/@babel/helper-create-class-features-plugin/-/helper-create-class-features-plugin-7.17.1.tgz",
+      "integrity": "sha512-JBdSr/LtyYIno/pNnJ75lBcqc3Z1XXujzPanHqjvvrhOA+DTceTFuJi8XjmWTZh4r3fsdfqaCMN0iZemdkxZHQ==",
       "dev": true,
       "dependencies": {
         "@babel/helper-annotate-as-pure": "^7.16.7",
@@ -354,14 +366,14 @@
       }
     },
     "node_modules/@babel/helpers": {
-      "version": "7.16.7",
-      "resolved": "https://registry.npmjs.org/@babel/helpers/-/helpers-7.16.7.tgz",
-      "integrity": "sha512-9ZDoqtfY7AuEOt3cxchfii6C7GDyyMBffktR5B2jvWv8u2+efwvpnVKXMWzNehqy68tKgAfSwfdw/lWpthS2bw==",
+      "version": "7.17.0",
+      "resolved": "https://registry.npmjs.org/@babel/helpers/-/helpers-7.17.0.tgz",
+      "integrity": "sha512-Xe/9NFxjPwELUvW2dsukcMZIp6XwPSbI4ojFBJuX5ramHuVE22SVcZIwqzdWo5uCgeTXW8qV97lMvSOjq+1+nQ==",
       "dev": true,
       "dependencies": {
         "@babel/template": "^7.16.7",
-        "@babel/traverse": "^7.16.7",
-        "@babel/types": "^7.16.7"
+        "@babel/traverse": "^7.17.0",
+        "@babel/types": "^7.17.0"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -382,9 +394,9 @@
       }
     },
     "node_modules/@babel/parser": {
-      "version": "7.16.10",
-      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.16.10.tgz",
-      "integrity": "sha512-Sm/S9Or6nN8uiFsQU1yodyDW3MWXQhFeqzMPM+t8MJjM+pLsnFVxFZzkpXKvUXh+Gz9cbMoYYs484+Jw/NTEFQ==",
+      "version": "7.17.0",
+      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.17.0.tgz",
+      "integrity": "sha512-VKXSCQx5D8S04ej+Dqsr1CzYvvWgf20jIw2D+YhQCrIlr2UZGaDds23Y0xg75/skOxpLCRpUZvk/1EAVkGoDOw==",
       "dev": true,
       "bin": {
         "parser": "bin/babel-parser.js"
@@ -588,6 +600,21 @@
         "@babel/core": "^7.0.0-0"
       }
     },
+    "node_modules/@babel/plugin-syntax-jsx": {
+      "version": "7.16.7",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-jsx/-/plugin-syntax-jsx-7.16.7.tgz",
+      "integrity": "sha512-Esxmk7YjA8QysKeT3VhTXvF6y77f/a91SIs4pWb4H2eWGQkCKFgQaG6hdoEVZtGsrAcb2K5BW66XsOErD4WU3Q==",
+      "dev": true,
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.16.7"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
     "node_modules/@babel/plugin-syntax-logical-assignment-operators": {
       "version": "7.10.4",
       "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-logical-assignment-operators/-/plugin-syntax-logical-assignment-operators-7.10.4.tgz",
@@ -727,21 +754,6 @@
         "@babel/core": "^7.0.0-0"
       }
     },
-    "node_modules/@babel/plugin-transform-react-jsx/node_modules/@babel/plugin-syntax-jsx": {
-      "version": "7.16.7",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-jsx/-/plugin-syntax-jsx-7.16.7.tgz",
-      "integrity": "sha512-Esxmk7YjA8QysKeT3VhTXvF6y77f/a91SIs4pWb4H2eWGQkCKFgQaG6hdoEVZtGsrAcb2K5BW66XsOErD4WU3Q==",
-      "dev": true,
-      "dependencies": {
-        "@babel/helper-plugin-utils": "^7.16.7"
-      },
-      "engines": {
-        "node": ">=6.9.0"
-      },
-      "peerDependencies": {
-        "@babel/core": "^7.0.0-0"
-      }
-    },
     "node_modules/@babel/plugin-transform-typescript": {
       "version": "7.16.8",
       "resolved": "https://registry.npmjs.org/@babel/plugin-transform-typescript/-/plugin-transform-typescript-7.16.8.tgz",
@@ -777,9 +789,9 @@
       }
     },
     "node_modules/@babel/runtime": {
-      "version": "7.16.7",
-      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.16.7.tgz",
-      "integrity": "sha512-9E9FJowqAsytyOY6LG+1KuueckRL+aQW+mKvXRXnuFGyRAyepJPmEo9vgMfXUA6O9u3IeEdv9MAkppFcaQwogQ==",
+      "version": "7.17.0",
+      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.17.0.tgz",
+      "integrity": "sha512-etcO/ohMNaNA2UBdaXBBSX/3aEzFMRrVfaPv8Ptc0k+cWpWW0QFiGZ2XnVqQZI1Cf734LbPGmqBKWESfW4x/dQ==",
       "dependencies": {
         "regenerator-runtime": "^0.13.4"
       },
@@ -788,9 +800,9 @@
       }
     },
     "node_modules/@babel/runtime-corejs3": {
-      "version": "7.16.8",
-      "resolved": "https://registry.npmjs.org/@babel/runtime-corejs3/-/runtime-corejs3-7.16.8.tgz",
-      "integrity": "sha512-3fKhuICS1lMz0plI5ktOE/yEtBRMVxplzRkdn6mJQ197XiY0JnrzYV0+Mxozq3JZ8SBV9Ecurmw1XsGbwOf+Sg==",
+      "version": "7.17.0",
+      "resolved": "https://registry.npmjs.org/@babel/runtime-corejs3/-/runtime-corejs3-7.17.0.tgz",
+      "integrity": "sha512-qeydncU80ravKzovVncW3EYaC1ji3GpntdPgNcJy9g7hHSY6KX+ne1cbV3ov7Zzm4F1z0+QreZPCuw1ynkmYNg==",
       "dev": true,
       "dependencies": {
         "core-js-pure": "^3.20.2",
@@ -815,19 +827,19 @@
       }
     },
     "node_modules/@babel/traverse": {
-      "version": "7.16.10",
-      "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.16.10.tgz",
-      "integrity": "sha512-yzuaYXoRJBGMlBhsMJoUW7G1UmSb/eXr/JHYM/MsOJgavJibLwASijW7oXBdw3NQ6T0bW7Ty5P/VarOs9cHmqw==",
+      "version": "7.17.0",
+      "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.17.0.tgz",
+      "integrity": "sha512-fpFIXvqD6kC7c7PUNnZ0Z8cQXlarCLtCUpt2S1Dx7PjoRtCFffvOkHHSom+m5HIxMZn5bIBVb71lhabcmjEsqg==",
       "dev": true,
       "dependencies": {
         "@babel/code-frame": "^7.16.7",
-        "@babel/generator": "^7.16.8",
+        "@babel/generator": "^7.17.0",
         "@babel/helper-environment-visitor": "^7.16.7",
         "@babel/helper-function-name": "^7.16.7",
         "@babel/helper-hoist-variables": "^7.16.7",
         "@babel/helper-split-export-declaration": "^7.16.7",
-        "@babel/parser": "^7.16.10",
-        "@babel/types": "^7.16.8",
+        "@babel/parser": "^7.17.0",
+        "@babel/types": "^7.17.0",
         "debug": "^4.1.0",
         "globals": "^11.1.0"
       },
@@ -836,9 +848,9 @@
       }
     },
     "node_modules/@babel/types": {
-      "version": "7.16.8",
-      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.16.8.tgz",
-      "integrity": "sha512-smN2DQc5s4M7fntyjGtyIPbRJv6wW4rU/94fmYJ7PKQuZkC0qGMHXJbg6sNGt12JmVr4k5YaptI/XtiLJBnmIg==",
+      "version": "7.17.0",
+      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.17.0.tgz",
+      "integrity": "sha512-TmKSNO4D5rzhL5bjWFcVHHLETzfQ/AmbKpKPOSjlP0WoHZ6L911fgoOKY4Alp/emzG4cHJdyN49zpgkbXFEHHw==",
       "dev": true,
       "dependencies": {
         "@babel/helper-validator-identifier": "^7.16.7",
@@ -869,9 +881,9 @@
       }
     },
     "node_modules/@eslint/eslintrc/node_modules/globals": {
-      "version": "13.12.0",
-      "resolved": "https://registry.npmjs.org/globals/-/globals-13.12.0.tgz",
-      "integrity": "sha512-uS8X6lSKN2JumVoXrbUz+uG4BYG+eiawqm3qFcT7ammfbUHeCBoJMlHcec/S3krSk73/AE/f0szYFmgAA3kYZg==",
+      "version": "13.12.1",
+      "resolved": "https://registry.npmjs.org/globals/-/globals-13.12.1.tgz",
+      "integrity": "sha512-317dFlgY2pdJZ9rspXDks7073GpDmXdfbM3vYYp0HAMKGDh1FfWPleI2ljVNLQX5M5lXcAslTcPTrOrMEFOjyw==",
       "dev": true,
       "dependencies": {
         "type-fest": "^0.20.2"
@@ -883,6 +895,15 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/@eslint/eslintrc/node_modules/ignore": {
+      "version": "4.0.6",
+      "resolved": "https://registry.npmjs.org/ignore/-/ignore-4.0.6.tgz",
+      "integrity": "sha512-cyFDKrqc/YdcWFniJhzI42+AzS+gNwmUzOSFcRCQYwySuBBBy/KjuxWLZ/FHEH6Moq1NizMOBWyTcv8O4OZIMg==",
+      "dev": true,
+      "engines": {
+        "node": ">= 4"
+      }
+    },
     "node_modules/@eslint/eslintrc/node_modules/type-fest": {
       "version": "0.20.2",
       "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.20.2.tgz",
@@ -896,9 +917,9 @@
       }
     },
     "node_modules/@humanwhocodes/config-array": {
-      "version": "0.9.2",
-      "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.9.2.tgz",
-      "integrity": "sha512-UXOuFCGcwciWckOpmfKDq/GyhlTf9pN/BzG//x8p8zTOFEcGuA68ANXheFS0AGvy3qgZqLBUkMs7hqzqCKOVwA==",
+      "version": "0.9.3",
+      "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.9.3.tgz",
+      "integrity": "sha512-3xSMlXHh03hCcCmFc0rbKp3Ivt2PFEJnQUJDDMTJQ2wkECZWdq4GePs2ctc5H8zV+cHPaq8k2vU8mrQjA6iHdQ==",
       "dev": true,
       "dependencies": {
         "@humanwhocodes/object-schema": "^1.2.1",
@@ -916,9 +937,9 @@
       "dev": true
     },
     "node_modules/@jest/types": {
-      "version": "27.4.2",
-      "resolved": "https://registry.npmjs.org/@jest/types/-/types-27.4.2.tgz",
-      "integrity": "sha512-j35yw0PMTPpZsUoOBiuHzr1zTYoad1cVIE0ajEjcrJONxxrko/IRGKkXx3os0Nsi4Hu3+5VmDbVfq5WhG/pWAg==",
+      "version": "27.5.0",
+      "resolved": "https://registry.npmjs.org/@jest/types/-/types-27.5.0.tgz",
+      "integrity": "sha512-oDHEp7gwSgA82RZ6pzUL3ugM2njP/lVB1MsxRZNOBk+CoNvh9SpH1lQixPFc/kDlV50v59csiW4HLixWmhmgPQ==",
       "dev": true,
       "dependencies": {
         "@types/istanbul-lib-coverage": "^2.0.0",
@@ -1001,6 +1022,31 @@
         "node": ">=8"
       }
     },
+    "node_modules/@jridgewell/resolve-uri": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.0.4.tgz",
+      "integrity": "sha512-cz8HFjOFfUBtvN+NXYSFMHYRdxZMaEl0XypVrhzxBgadKIXhIkRd8aMeHhmF56Sl7SuS8OnUpQ73/k9LE4VnLg==",
+      "dev": true,
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
+    "node_modules/@jridgewell/sourcemap-codec": {
+      "version": "1.4.10",
+      "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.10.tgz",
+      "integrity": "sha512-Ht8wIW5v165atIX1p+JvKR5ONzUyF4Ac8DZIQ5kZs9zrb6M8SJNXpx1zn04rn65VjBMygRoMXcyYwNK0fT7bEg==",
+      "dev": true
+    },
+    "node_modules/@jridgewell/trace-mapping": {
+      "version": "0.3.2",
+      "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.2.tgz",
+      "integrity": "sha512-9KzzH4kMjA2XmBRHfqG2/Vtl7s92l6uNDd0wW7frDE+EUvQFGqNXhWp0UGJjSkt3v2AYjzOZn1QO9XaTNJIt1Q==",
+      "dev": true,
+      "dependencies": {
+        "@jridgewell/resolve-uri": "^3.0.3",
+        "@jridgewell/sourcemap-codec": "^1.4.10"
+      }
+    },
     "node_modules/@next/env": {
       "version": "12.0.10",
       "resolved": "https://registry.npmjs.org/@next/env/-/env-12.0.10.tgz",
@@ -1015,6 +1061,26 @@
         "glob": "7.1.7"
       }
     },
+    "node_modules/@next/eslint-plugin-next/node_modules/glob": {
+      "version": "7.1.7",
+      "resolved": "https://registry.npmjs.org/glob/-/glob-7.1.7.tgz",
+      "integrity": "sha512-OvD9ENzPLbegENnYP5UUfJIirTg4+XwMWGaQfQTY0JenxNvvIKP3U3/tAQSPIu/lHxXYSZmpXlUHeqAIdKzBLQ==",
+      "dev": true,
+      "dependencies": {
+        "fs.realpath": "^1.0.0",
+        "inflight": "^1.0.4",
+        "inherits": "2",
+        "minimatch": "^3.0.4",
+        "once": "^1.3.0",
+        "path-is-absolute": "^1.0.0"
+      },
+      "engines": {
+        "node": "*"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
     "node_modules/@next/swc-android-arm64": {
       "version": "12.0.10",
       "resolved": "https://registry.npmjs.org/@next/swc-android-arm64/-/swc-android-arm64-12.0.10.tgz",
@@ -1438,14 +1504,14 @@
       }
     },
     "node_modules/@typescript-eslint/parser": {
-      "version": "5.10.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-5.10.0.tgz",
-      "integrity": "sha512-pJB2CCeHWtwOAeIxv8CHVGJhI5FNyJAIpx5Pt72YkK3QfEzt6qAlXZuyaBmyfOdM62qU0rbxJzNToPTVeJGrQw==",
+      "version": "5.11.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-5.11.0.tgz",
+      "integrity": "sha512-x0DCjetHZYBRovJdr3U0zG9OOdNXUaFLJ82ehr1AlkArljJuwEsgnud+Q7umlGDFLFrs8tU8ybQDFocp/eX8mQ==",
       "dev": true,
       "dependencies": {
-        "@typescript-eslint/scope-manager": "5.10.0",
-        "@typescript-eslint/types": "5.10.0",
-        "@typescript-eslint/typescript-estree": "5.10.0",
+        "@typescript-eslint/scope-manager": "5.11.0",
+        "@typescript-eslint/types": "5.11.0",
+        "@typescript-eslint/typescript-estree": "5.11.0",
         "debug": "^4.3.2"
       },
       "engines": {
@@ -1465,13 +1531,13 @@
       }
     },
     "node_modules/@typescript-eslint/scope-manager": {
-      "version": "5.10.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-5.10.0.tgz",
-      "integrity": "sha512-tgNgUgb4MhqK6DoKn3RBhyZ9aJga7EQrw+2/OiDk5hKf3pTVZWyqBi7ukP+Z0iEEDMF5FDa64LqODzlfE4O/Dg==",
+      "version": "5.11.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-5.11.0.tgz",
+      "integrity": "sha512-z+K4LlahDFVMww20t/0zcA7gq/NgOawaLuxgqGRVKS0PiZlCTIUtX0EJbC0BK1JtR4CelmkPK67zuCgpdlF4EA==",
       "dev": true,
       "dependencies": {
-        "@typescript-eslint/types": "5.10.0",
-        "@typescript-eslint/visitor-keys": "5.10.0"
+        "@typescript-eslint/types": "5.11.0",
+        "@typescript-eslint/visitor-keys": "5.11.0"
       },
       "engines": {
         "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
@@ -1482,9 +1548,9 @@
       }
     },
     "node_modules/@typescript-eslint/types": {
-      "version": "5.10.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-5.10.0.tgz",
-      "integrity": "sha512-wUljCgkqHsMZbw60IbOqT/puLfyqqD5PquGiBo1u1IS3PLxdi3RDGlyf032IJyh+eQoGhz9kzhtZa+VC4eWTlQ==",
+      "version": "5.11.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-5.11.0.tgz",
+      "integrity": "sha512-cxgBFGSRCoBEhvSVLkKw39+kMzUKHlJGVwwMbPcTZX3qEhuXhrjwaZXWMxVfxDgyMm+b5Q5b29Llo2yow8Y7xQ==",
       "dev": true,
       "engines": {
         "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
@@ -1495,13 +1561,13 @@
       }
     },
     "node_modules/@typescript-eslint/typescript-estree": {
-      "version": "5.10.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-5.10.0.tgz",
-      "integrity": "sha512-x+7e5IqfwLwsxTdliHRtlIYkgdtYXzE0CkFeV6ytAqq431ZyxCFzNMNR5sr3WOlIG/ihVZr9K/y71VHTF/DUQA==",
+      "version": "5.11.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-5.11.0.tgz",
+      "integrity": "sha512-yVH9hKIv3ZN3lw8m/Jy5I4oXO4ZBMqijcXCdA4mY8ull6TPTAoQnKKrcZ0HDXg7Bsl0Unwwx7jcXMuNZc0m4lg==",
       "dev": true,
       "dependencies": {
-        "@typescript-eslint/types": "5.10.0",
-        "@typescript-eslint/visitor-keys": "5.10.0",
+        "@typescript-eslint/types": "5.11.0",
+        "@typescript-eslint/visitor-keys": "5.11.0",
         "debug": "^4.3.2",
         "globby": "^11.0.4",
         "is-glob": "^4.0.3",
@@ -1537,12 +1603,12 @@
       }
     },
     "node_modules/@typescript-eslint/visitor-keys": {
-      "version": "5.10.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-5.10.0.tgz",
-      "integrity": "sha512-GMxj0K1uyrFLPKASLmZzCuSddmjZVbVj3Ouy5QVuIGKZopxvOr24JsS7gruz6C3GExE01mublZ3mIBOaon9zuQ==",
+      "version": "5.11.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-5.11.0.tgz",
+      "integrity": "sha512-E8w/vJReMGuloGxJDkpPlGwhxocxOpSVgSvjiLO5IxZPmxZF30weOeJYyPSEACwM+X4NziYS9q+WkN/2DHYQwA==",
       "dev": true,
       "dependencies": {
-        "@typescript-eslint/types": "5.10.0",
+        "@typescript-eslint/types": "5.11.0",
         "eslint-visitor-keys": "^3.0.0"
       },
       "engines": {
@@ -1889,9 +1955,9 @@
       "optional": true
     },
     "node_modules/axe-core": {
-      "version": "4.3.5",
-      "resolved": "https://registry.npmjs.org/axe-core/-/axe-core-4.3.5.tgz",
-      "integrity": "sha512-WKTW1+xAzhMS5dJsxWkliixlO/PqC4VhmO9T4juNYcaTg9jzWiJsou6m5pxWYGfigWbwzJWeFY6z47a+4neRXA==",
+      "version": "4.4.1",
+      "resolved": "https://registry.npmjs.org/axe-core/-/axe-core-4.4.1.tgz",
+      "integrity": "sha512-gd1kmb21kwNuWr6BQz8fv6GNECPBnUasepcoLbekws23NVBLODdsClRZ+bQ8+9Uomf3Sm3+Vwn0oYG9NvwnJCw==",
       "dev": true,
       "engines": {
         "node": ">=4"
@@ -2165,9 +2231,9 @@
       }
     },
     "node_modules/caniuse-lite": {
-      "version": "1.0.30001300",
-      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001300.tgz",
-      "integrity": "sha512-cVjiJHWGcNlJi8TZVKNMnvMid3Z3TTdDHmLDzlOdIiZq138Exvo0G+G0wTdVYolxKb4AYwC+38pxodiInVtJSA==",
+      "version": "1.0.30001309",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001309.tgz",
+      "integrity": "sha512-Pl8vfigmBXXq+/yUz1jUwULeq9xhMJznzdc/xwl4WclDAuebcTHVefpz8lE/bMI+UN7TOkSSe7B7RnZd6+dzjA==",
       "funding": {
         "type": "opencollective",
         "url": "https://opencollective.com/browserslist"
@@ -2230,11 +2296,44 @@
         "url": "https://github.com/sponsors/fb55"
       }
     },
-    "node_modules/cheerio/node_modules/tslib": {
-      "version": "2.3.1",
-      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.3.1.tgz",
-      "integrity": "sha512-77EbyPPpMz+FRFRuAFlWMtmgUWGe9UOG2Z25NqCwiIjRhOf5iKGuzSe5P2w1laq+FkRy4p+PCuVkJSGkzTEKVw==",
-      "dev": true
+    "node_modules/chokidar": {
+      "version": "3.5.3",
+      "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.5.3.tgz",
+      "integrity": "sha512-Dr3sfKRP6oTcjf2JmUmFJfeVMvXBdegxB0iVQ5eb2V10uFJUCAS8OByZdVAyVb8xXNz3GjjTgj9kLWsZTqE6kw==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "individual",
+          "url": "https://paulmillr.com/funding/"
+        }
+      ],
+      "dependencies": {
+        "anymatch": "~3.1.2",
+        "braces": "~3.0.2",
+        "glob-parent": "~5.1.2",
+        "is-binary-path": "~2.1.0",
+        "is-glob": "~4.0.1",
+        "normalize-path": "~3.0.0",
+        "readdirp": "~3.6.0"
+      },
+      "engines": {
+        "node": ">= 8.10.0"
+      },
+      "optionalDependencies": {
+        "fsevents": "~2.3.2"
+      }
+    },
+    "node_modules/chokidar/node_modules/glob-parent": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
+      "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
+      "dev": true,
+      "dependencies": {
+        "is-glob": "^4.0.1"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
     },
     "node_modules/chownr": {
       "version": "1.1.4",
@@ -2414,9 +2513,9 @@
       }
     },
     "node_modules/core-js": {
-      "version": "3.20.3",
-      "resolved": "https://registry.npmjs.org/core-js/-/core-js-3.20.3.tgz",
-      "integrity": "sha512-vVl8j8ph6tRS3B8qir40H7yw7voy17xL0piAjlbBUsH7WIfzoedL/ZOr1OV9FyZQLWXsayOJyV4tnRyXR85/ag==",
+      "version": "3.21.0",
+      "resolved": "https://registry.npmjs.org/core-js/-/core-js-3.21.0.tgz",
+      "integrity": "sha512-YUdI3fFu4TF/2WykQ2xzSiTQdldLB4KVuL9WeAy5XONZYt5Cun/fpQvctoKbCgvPhmzADeesTk/j2Rdx77AcKQ==",
       "hasInstallScript": true,
       "funding": {
         "type": "opencollective",
@@ -2424,9 +2523,9 @@
       }
     },
     "node_modules/core-js-pure": {
-      "version": "3.20.3",
-      "resolved": "https://registry.npmjs.org/core-js-pure/-/core-js-pure-3.20.3.tgz",
-      "integrity": "sha512-Q2H6tQ5MtPtcC7f3HxJ48i4Q7T9ybPKgvWyuH7JXIoNa2pm0KuBnycsET/qw1SLLZYfbsbrZQNMeIOClb+6WIA==",
+      "version": "3.21.0",
+      "resolved": "https://registry.npmjs.org/core-js-pure/-/core-js-pure-3.21.0.tgz",
+      "integrity": "sha512-VaJUunCZLnxuDbo1rNOzwbet9E1K9joiXS5+DQMPtgxd24wfsZbJZMMfQLGYMlCUvSxLfsRUUhoOR2x28mFfeg==",
       "dev": true,
       "hasInstallScript": true,
       "funding": {
@@ -2695,9 +2794,9 @@
       "dev": true
     },
     "node_modules/diff-sequences": {
-      "version": "27.4.0",
-      "resolved": "https://registry.npmjs.org/diff-sequences/-/diff-sequences-27.4.0.tgz",
-      "integrity": "sha512-YqiQzkrsmHMH5uuh8OdQFU9/ZpADnwzml8z0O5HvRNda+5UZsaX/xN+AAxfR2hWq1Y7HZnAzO9J5lJXOuDz2Ww==",
+      "version": "27.5.0",
+      "resolved": "https://registry.npmjs.org/diff-sequences/-/diff-sequences-27.5.0.tgz",
+      "integrity": "sha512-ZsOBWnhXiH+Zn0DcBNX/tiQsqrREHs/6oQsEVy2VJJjrTblykPima11pyHMSA/7PGmD+fwclTnKVKL/qtNREDQ==",
       "dev": true,
       "engines": {
         "node": "^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0"
@@ -2840,9 +2939,9 @@
       }
     },
     "node_modules/electron-to-chromium": {
-      "version": "1.4.49",
-      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.49.tgz",
-      "integrity": "sha512-k/0t1TRfonHIp8TJKfjBu2cKj8MqYTiEpOhci+q7CVEE5xnCQnx1pTa+V8b/sdhe4S3PR4p4iceEQWhGrKQORQ==",
+      "version": "1.4.66",
+      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.66.tgz",
+      "integrity": "sha512-f1RXFMsvwufWLwYUxTiP7HmjprKXrqEWHiQkjAYa9DJeVIlZk5v8gBGcaV+FhtXLly6C1OTVzQY+2UQrACiLlg==",
       "dev": true
     },
     "node_modules/emoji-regex": {
@@ -3078,9 +3177,9 @@
       }
     },
     "node_modules/eslint-module-utils": {
-      "version": "2.7.2",
-      "resolved": "https://registry.npmjs.org/eslint-module-utils/-/eslint-module-utils-2.7.2.tgz",
-      "integrity": "sha512-zquepFnWCY2ISMFwD/DqzaM++H+7PDzOpUvotJWm/y1BAFt5R4oeULgdrTejKqLkz7MA/tgstsUMNYc7wNdTrg==",
+      "version": "2.7.3",
+      "resolved": "https://registry.npmjs.org/eslint-module-utils/-/eslint-module-utils-2.7.3.tgz",
+      "integrity": "sha512-088JEC7O3lDZM9xGe0RerkOMd0EjFl+Yvd1jPWIkMT5u3H9+HC34mWWPnqPrN13gieT9pBOO+Qt07Nb/6TresQ==",
       "dev": true,
       "dependencies": {
         "debug": "^3.2.7",
@@ -3401,9 +3500,9 @@
       }
     },
     "node_modules/eslint/node_modules/globals": {
-      "version": "13.12.0",
-      "resolved": "https://registry.npmjs.org/globals/-/globals-13.12.0.tgz",
-      "integrity": "sha512-uS8X6lSKN2JumVoXrbUz+uG4BYG+eiawqm3qFcT7ammfbUHeCBoJMlHcec/S3krSk73/AE/f0szYFmgAA3kYZg==",
+      "version": "13.12.1",
+      "resolved": "https://registry.npmjs.org/globals/-/globals-13.12.1.tgz",
+      "integrity": "sha512-317dFlgY2pdJZ9rspXDks7073GpDmXdfbM3vYYp0HAMKGDh1FfWPleI2ljVNLQX5M5lXcAslTcPTrOrMEFOjyw==",
       "dev": true,
       "dependencies": {
         "type-fest": "^0.20.2"
@@ -3424,15 +3523,6 @@
         "node": ">=8"
       }
     },
-    "node_modules/eslint/node_modules/ignore": {
-      "version": "5.2.0",
-      "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.2.0.tgz",
-      "integrity": "sha512-CmxgYGiEPCLhfLnpPp1MoRmifwEIOgjcHXxOBjv7mY96c+eWScsOP9c112ZyLdWHi0FxHjI+4uVhKYp/gcdRmQ==",
-      "dev": true,
-      "engines": {
-        "node": ">= 4"
-      }
-    },
     "node_modules/eslint/node_modules/supports-color": {
       "version": "7.2.0",
       "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
@@ -3676,11 +3766,6 @@
         "node": ">= 10"
       }
     },
-    "node_modules/file-selector/node_modules/tslib": {
-      "version": "2.3.1",
-      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.3.1.tgz",
-      "integrity": "sha512-77EbyPPpMz+FRFRuAFlWMtmgUWGe9UOG2Z25NqCwiIjRhOf5iKGuzSe5P2w1laq+FkRy4p+PCuVkJSGkzTEKVw=="
-    },
     "node_modules/fill-range": {
       "version": "7.0.1",
       "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz",
@@ -3741,9 +3826,9 @@
       }
     },
     "node_modules/flatted": {
-      "version": "3.2.4",
-      "resolved": "https://registry.npmjs.org/flatted/-/flatted-3.2.4.tgz",
-      "integrity": "sha512-8/sOawo8tJ4QOBX8YlQBMxL8+RLZfxMQOif9o0KUKTNTjMYElWPE0r/m5VNFxTRd0NSw8qSy8dajrwX4RYI1Hw==",
+      "version": "3.2.5",
+      "resolved": "https://registry.npmjs.org/flatted/-/flatted-3.2.5.tgz",
+      "integrity": "sha512-WIWGi2L3DyTUvUrwRKgGi9TwxQMUEqPOPQBVi71R96jZXJdFskXEmf54BoZaS1kknGODoIGASGEzBUYdyMCBJg==",
       "dev": true
     },
     "node_modules/flush-write-stream": {
@@ -3804,9 +3889,9 @@
       }
     },
     "node_modules/fraction.js": {
-      "version": "4.1.2",
-      "resolved": "https://registry.npmjs.org/fraction.js/-/fraction.js-4.1.2.tgz",
-      "integrity": "sha512-o2RiJQ6DZaR/5+Si0qJUIy637QMRudSi9kU/FFzx9EZazrIdnBgpU+3sEWCxAVhH2RtxW2Oz+T4p2o8uOPVcgA==",
+      "version": "4.1.3",
+      "resolved": "https://registry.npmjs.org/fraction.js/-/fraction.js-4.1.3.tgz",
+      "integrity": "sha512-pUHWWt6vHzZZiQJcM6S/0PXfS+g6FM4BF5rj9wZyreivhQPdsh5PpE25VtSNxq80wHS5RfY51Ii+8Z0Zl/pmzg==",
       "dev": true,
       "engines": {
         "node": "*"
@@ -4101,9 +4186,9 @@
       }
     },
     "node_modules/glob": {
-      "version": "7.1.7",
-      "resolved": "https://registry.npmjs.org/glob/-/glob-7.1.7.tgz",
-      "integrity": "sha512-OvD9ENzPLbegENnYP5UUfJIirTg4+XwMWGaQfQTY0JenxNvvIKP3U3/tAQSPIu/lHxXYSZmpXlUHeqAIdKzBLQ==",
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/glob/-/glob-7.2.0.tgz",
+      "integrity": "sha512-lmLf6gtyrPq8tTjSmrO94wBeQbFR3HbLHbuyD69wuyQkImp2hWqMGB47OX65FBkPffO641IP9jWa1z4ivqG26Q==",
       "dependencies": {
         "fs.realpath": "^1.0.0",
         "inflight": "^1.0.4",
@@ -4227,15 +4312,6 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
-    "node_modules/globby/node_modules/ignore": {
-      "version": "5.2.0",
-      "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.2.0.tgz",
-      "integrity": "sha512-CmxgYGiEPCLhfLnpPp1MoRmifwEIOgjcHXxOBjv7mY96c+eWScsOP9c112ZyLdWHi0FxHjI+4uVhKYp/gcdRmQ==",
-      "dev": true,
-      "engines": {
-        "node": ">= 4"
-      }
-    },
     "node_modules/graceful-fs": {
       "version": "4.2.9",
       "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.9.tgz",
@@ -4426,11 +4502,6 @@
         "react-is": "^16.7.0"
       }
     },
-    "node_modules/hoist-non-react-statics/node_modules/react-is": {
-      "version": "16.13.1",
-      "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
-      "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
-    },
     "node_modules/hosted-git-info": {
       "version": "2.8.9",
       "resolved": "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-2.8.9.tgz",
@@ -4498,9 +4569,9 @@
       }
     },
     "node_modules/i18next": {
-      "version": "21.6.10",
-      "resolved": "https://registry.npmjs.org/i18next/-/i18next-21.6.10.tgz",
-      "integrity": "sha512-Xw+tEGQ61BF6SXtBlFffhM/YhJKHZf2cyDrcNK/l2dE6yVbkPkSasC3VhkAsHXX30vUJ0yG04WIUtf7UvwjOxg==",
+      "version": "21.6.11",
+      "resolved": "https://registry.npmjs.org/i18next/-/i18next-21.6.11.tgz",
+      "integrity": "sha512-tJ2+o0lVO+fhi8bPkCpBAeY1SgkqmQm5NzgPWCQssBrywJw98/o+Kombhty5nxQOpHtvMmsxcOopczUiH6bJxQ==",
       "funding": [
         {
           "type": "individual",
@@ -4570,9 +4641,9 @@
       }
     },
     "node_modules/ignore": {
-      "version": "4.0.6",
-      "resolved": "https://registry.npmjs.org/ignore/-/ignore-4.0.6.tgz",
-      "integrity": "sha512-cyFDKrqc/YdcWFniJhzI42+AzS+gNwmUzOSFcRCQYwySuBBBy/KjuxWLZ/FHEH6Moq1NizMOBWyTcv8O4OZIMg==",
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.2.0.tgz",
+      "integrity": "sha512-CmxgYGiEPCLhfLnpPp1MoRmifwEIOgjcHXxOBjv7mY96c+eWScsOP9c112ZyLdWHi0FxHjI+4uVhKYp/gcdRmQ==",
       "dev": true,
       "engines": {
         "node": ">= 4"
@@ -4620,9 +4691,9 @@
       }
     },
     "node_modules/inflection": {
-      "version": "1.13.1",
-      "resolved": "https://registry.npmjs.org/inflection/-/inflection-1.13.1.tgz",
-      "integrity": "sha512-dldYtl2WlN0QDkIDtg8+xFwOS2Tbmp12t1cHa5/YClU6ZQjTFm7B66UcVbh9NQB+HvT5BAd2t5+yKsBkw5pcqA==",
+      "version": "1.13.2",
+      "resolved": "https://registry.npmjs.org/inflection/-/inflection-1.13.2.tgz",
+      "integrity": "sha512-cmZlljCRTBFouT8UzMzrGcVEvkv6D/wBdcdKG7J1QH5cXjtU75Dm+P27v9EKu/Y43UYyCJd1WC4zLebRrC8NBw==",
       "engines": [
         "node >= 0.4.0"
       ]
@@ -5034,15 +5105,15 @@
       "optional": true
     },
     "node_modules/jest-diff": {
-      "version": "27.4.6",
-      "resolved": "https://registry.npmjs.org/jest-diff/-/jest-diff-27.4.6.tgz",
-      "integrity": "sha512-zjaB0sh0Lb13VyPsd92V7HkqF6yKRH9vm33rwBt7rPYrpQvS1nCvlIy2pICbKta+ZjWngYLNn4cCK4nyZkjS/w==",
+      "version": "27.5.0",
+      "resolved": "https://registry.npmjs.org/jest-diff/-/jest-diff-27.5.0.tgz",
+      "integrity": "sha512-zztvHDCq/QcAVv+o6rts0reupSOxyrX+KLQEOMWCW2trZgcBFgp/oTK7hJCGpXvEIqKrQzyQlaPKn9W04+IMQg==",
       "dev": true,
       "dependencies": {
         "chalk": "^4.0.0",
-        "diff-sequences": "^27.4.0",
-        "jest-get-type": "^27.4.0",
-        "pretty-format": "^27.4.6"
+        "diff-sequences": "^27.5.0",
+        "jest-get-type": "^27.5.0",
+        "pretty-format": "^27.5.0"
       },
       "engines": {
         "node": "^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0"
@@ -5119,9 +5190,9 @@
       }
     },
     "node_modules/jest-get-type": {
-      "version": "27.4.0",
-      "resolved": "https://registry.npmjs.org/jest-get-type/-/jest-get-type-27.4.0.tgz",
-      "integrity": "sha512-tk9o+ld5TWq41DkK14L4wox4s2D9MtTpKaAVzXfr5CUKm5ZK2ExcaFE0qls2W71zE/6R2TxxrK9w2r6svAFDBQ==",
+      "version": "27.5.0",
+      "resolved": "https://registry.npmjs.org/jest-get-type/-/jest-get-type-27.5.0.tgz",
+      "integrity": "sha512-Vp6O8a52M/dahXRG/E0EJuWQROps2mDQ0sJYPgO8HskhdLwj9ajgngy2OAqZgV6e/RcU67WUHq6TgfvJb8flbA==",
       "dev": true,
       "engines": {
         "node": "^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0"
@@ -5213,18 +5284,18 @@
       }
     },
     "node_modules/jest-message-util": {
-      "version": "27.4.6",
-      "resolved": "https://registry.npmjs.org/jest-message-util/-/jest-message-util-27.4.6.tgz",
-      "integrity": "sha512-0p5szriFU0U74czRSFjH6RyS7UYIAkn/ntwMuOwTGWrQIOh5NzXXrq72LOqIkJKKvFbPq+byZKuBz78fjBERBA==",
+      "version": "27.5.0",
+      "resolved": "https://registry.npmjs.org/jest-message-util/-/jest-message-util-27.5.0.tgz",
+      "integrity": "sha512-lfbWRhTtmZMEHPAtl0SrvNzK1F4UnVNMHOliRQT2BJ4sBFzIb0gBCHA4ebWD4o6l1fUyvDPxM01K9OIMQTAdQw==",
       "dev": true,
       "dependencies": {
         "@babel/code-frame": "^7.12.13",
-        "@jest/types": "^27.4.2",
+        "@jest/types": "^27.5.0",
         "@types/stack-utils": "^2.0.0",
         "chalk": "^4.0.0",
-        "graceful-fs": "^4.2.4",
+        "graceful-fs": "^4.2.9",
         "micromatch": "^4.0.4",
-        "pretty-format": "^27.4.6",
+        "pretty-format": "^27.5.0",
         "slash": "^3.0.0",
         "stack-utils": "^2.0.3"
       },
@@ -5303,9 +5374,9 @@
       }
     },
     "node_modules/jest-regex-util": {
-      "version": "27.4.0",
-      "resolved": "https://registry.npmjs.org/jest-regex-util/-/jest-regex-util-27.4.0.tgz",
-      "integrity": "sha512-WeCpMpNnqJYMQoOjm1nTtsgbR4XHAk1u00qDoNBQoykM280+/TmgA5Qh5giC1ecy6a5d4hbSsHzpBtu5yvlbEg==",
+      "version": "27.5.0",
+      "resolved": "https://registry.npmjs.org/jest-regex-util/-/jest-regex-util-27.5.0.tgz",
+      "integrity": "sha512-e9LqSd6HsDsqd7KS3rNyYwmQAaG9jq4U3LbnwVxN/y3nNlDzm2OFs596uo9zrUY+AV1opXq6ome78tRDUCRWfA==",
       "dev": true,
       "engines": {
         "node": "^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0"
@@ -5457,7 +5528,6 @@
       "resolved": "https://registry.npmjs.org/lazystream/-/lazystream-1.0.1.tgz",
       "integrity": "sha512-b94GiNHQNy6JNTrt5w6zNyffMrNkXZb3KTkCZJb2V1xaEGCk093vkZ2jk3tpaeP33/OiXC+WvK9AxUebnf5nbw==",
       "dev": true,
-      "license": "MIT",
       "dependencies": {
         "readable-stream": "^2.0.5"
       },
@@ -5669,9 +5739,9 @@
       }
     },
     "node_modules/minimatch": {
-      "version": "3.0.4",
-      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.0.4.tgz",
-      "integrity": "sha512-yJHVQEhyqPLUTgt9B83PXu6W3rx4MvvHvSUvToogpwoGDOUQ+yDrR0HRot+yOCdCO7u4hX3pWft6kWBBcqh0UA==",
+      "version": "3.0.5",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.0.5.tgz",
+      "integrity": "sha512-tUpxzX0VAzJHjLu0xUfFv1gwVp9ba3IOuRAVH2EGuRW8a5emA2FlACLqiT/lDVtS1W+TGNwqz3sWaNyLgDJWuw==",
       "dependencies": {
         "brace-expansion": "^1.1.7"
       },
@@ -5865,6 +5935,28 @@
         "react": ">= 16.8.0"
       }
     },
+    "node_modules/next-i18next/node_modules/react-i18next": {
+      "version": "11.15.3",
+      "resolved": "https://registry.npmjs.org/react-i18next/-/react-i18next-11.15.3.tgz",
+      "integrity": "sha512-RSUEM4So3Tu2JHV0JsZ5Yje+4nz66YViMfPZoywxOy0xyn3L7tE2CHvJ7Y9LUsrTU7vGmZ5bwb8PpjnkatdIxg==",
+      "dependencies": {
+        "@babel/runtime": "^7.14.5",
+        "html-escaper": "^2.0.2",
+        "html-parse-stringify": "^3.0.1"
+      },
+      "peerDependencies": {
+        "i18next": ">= 19.0.0",
+        "react": ">= 16.8.0"
+      },
+      "peerDependenciesMeta": {
+        "react-dom": {
+          "optional": true
+        },
+        "react-native": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/next/node_modules/postcss": {
       "version": "8.4.5",
       "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.5.tgz",
@@ -5882,6 +5974,36 @@
         "url": "https://opencollective.com/postcss/"
       }
     },
+    "node_modules/next/node_modules/styled-jsx": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/styled-jsx/-/styled-jsx-5.0.0.tgz",
+      "integrity": "sha512-qUqsWoBquEdERe10EW8vLp3jT25s/ssG1/qX5gZ4wu15OZpmSMFI2v+fWlRhLfykA5rFtlJ1ME8A8pm/peV4WA==",
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "peerDependencies": {
+        "react": ">= 16.8.0 || 17.x.x || 18.x.x"
+      },
+      "peerDependenciesMeta": {
+        "@babel/core": {
+          "optional": true
+        },
+        "babel-plugin-macros": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/next/node_modules/use-subscription": {
+      "version": "1.5.1",
+      "resolved": "https://registry.npmjs.org/use-subscription/-/use-subscription-1.5.1.tgz",
+      "integrity": "sha512-Xv2a1P/yReAjAbhylMfFplFKj9GssgTwN7RlcTxBujFQcloStWNDQdc4g4NRWH9xS4i/FDk04vQBptAXoF3VcA==",
+      "dependencies": {
+        "object-assign": "^4.1.1"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0"
+      }
+    },
     "node_modules/node-addon-api": {
       "version": "3.2.1",
       "resolved": "https://registry.npmjs.org/node-addon-api/-/node-addon-api-3.2.1.tgz",
@@ -6416,27 +6538,15 @@
       }
     },
     "node_modules/p-limit": {
-      "version": "2.3.0",
-      "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-2.3.0.tgz",
-      "integrity": "sha512-//88mFWSJx8lxCzwdAABTJL2MyWB12+eIY7MDL2SqLmAkeKU9qxRvWuSyTjm3FUmpBEMuFfckAIqEaVGUDxb6w==",
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-1.3.0.tgz",
+      "integrity": "sha512-vvcXsLAJ9Dr5rQOPk7toZQZJApBl2K4J6dANSsEuh6QI41JYcsS/qhTGa9ErIUUgK3WNQoJYvylxvjqmiqEA9Q==",
       "dev": true,
       "dependencies": {
-        "p-try": "^2.0.0"
-      },
-      "engines": {
-        "node": ">=6"
+        "p-try": "^1.0.0"
       },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
-    "node_modules/p-limit/node_modules/p-try": {
-      "version": "2.2.0",
-      "resolved": "https://registry.npmjs.org/p-try/-/p-try-2.2.0.tgz",
-      "integrity": "sha512-R4nPAVTAU0B9D35/Gk3uJf/7XYbQcyohSKdvAxIRSNghFl4e71hVoGnBNQz9cWaXxO2I10KTC+3jMdvvoKw6dQ==",
-      "dev": true,
       "engines": {
-        "node": ">=6"
+        "node": ">=4"
       }
     },
     "node_modules/p-locate": {
@@ -6451,18 +6561,6 @@
         "node": ">=4"
       }
     },
-    "node_modules/p-locate/node_modules/p-limit": {
-      "version": "1.3.0",
-      "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-1.3.0.tgz",
-      "integrity": "sha512-vvcXsLAJ9Dr5rQOPk7toZQZJApBl2K4J6dANSsEuh6QI41JYcsS/qhTGa9ErIUUgK3WNQoJYvylxvjqmiqEA9Q==",
-      "dev": true,
-      "dependencies": {
-        "p-try": "^1.0.0"
-      },
-      "engines": {
-        "node": ">=4"
-      }
-    },
     "node_modules/p-try": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/p-try/-/p-try-1.0.0.tgz",
@@ -6605,9 +6703,9 @@
       }
     },
     "node_modules/pirates": {
-      "version": "4.0.4",
-      "resolved": "https://registry.npmjs.org/pirates/-/pirates-4.0.4.tgz",
-      "integrity": "sha512-ZIrVPH+A52Dw84R0L3/VS9Op04PuQ2SEoJL6bkshmiTic/HldyW9Tf7oH5mhJZBK7NmDx27vSMrYEXPXclpDKw==",
+      "version": "4.0.5",
+      "resolved": "https://registry.npmjs.org/pirates/-/pirates-4.0.5.tgz",
+      "integrity": "sha512-8V9+HQPupnaXMA23c5hvl69zXvTwTzyAYasnkb0Tts4XvO4CliqONMOnvlq26rkhLC3nWDFBJf73LU1e1VZLaQ==",
       "dev": true,
       "engines": {
         "node": ">= 6"
@@ -6671,6 +6769,21 @@
         "node": ">=6"
       }
     },
+    "node_modules/pkg-up/node_modules/p-limit": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-2.3.0.tgz",
+      "integrity": "sha512-//88mFWSJx8lxCzwdAABTJL2MyWB12+eIY7MDL2SqLmAkeKU9qxRvWuSyTjm3FUmpBEMuFfckAIqEaVGUDxb6w==",
+      "dev": true,
+      "dependencies": {
+        "p-try": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/pkg-up/node_modules/p-locate": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-3.0.0.tgz",
@@ -6683,6 +6796,15 @@
         "node": ">=6"
       }
     },
+    "node_modules/pkg-up/node_modules/p-try": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/p-try/-/p-try-2.2.0.tgz",
+      "integrity": "sha512-R4nPAVTAU0B9D35/Gk3uJf/7XYbQcyohSKdvAxIRSNghFl4e71hVoGnBNQz9cWaXxO2I10KTC+3jMdvvoKw6dQ==",
+      "dev": true,
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/playwright-core": {
       "version": "1.18.1",
       "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.18.1.tgz",
@@ -6849,9 +6971,9 @@
       }
     },
     "node_modules/pretty-format": {
-      "version": "27.4.6",
-      "resolved": "https://registry.npmjs.org/pretty-format/-/pretty-format-27.4.6.tgz",
-      "integrity": "sha512-NblstegA1y/RJW2VyML+3LlpFjzx62cUrtBIKIWDXEDkjNeleA7Od7nrzcs/VLQvAeV4CgSYhrN39DRN88Qi/g==",
+      "version": "27.5.0",
+      "resolved": "https://registry.npmjs.org/pretty-format/-/pretty-format-27.5.0.tgz",
+      "integrity": "sha512-xEi6BRPZ+J1AIS4BAtFC/+rh5jXlXObGZjx5+OSpM95vR/PGla78bFVHMy5GdZjP9wk3AHAMHROXq/r69zXltw==",
       "dev": true,
       "dependencies": {
         "ansi-regex": "^5.0.1",
@@ -6874,6 +6996,12 @@
         "url": "https://github.com/chalk/ansi-styles?sponsor=1"
       }
     },
+    "node_modules/pretty-format/node_modules/react-is": {
+      "version": "17.0.2",
+      "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
+      "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==",
+      "dev": true
+    },
     "node_modules/process-nextick-args": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/process-nextick-args/-/process-nextick-args-2.0.1.tgz",
@@ -6907,11 +7035,6 @@
         "react-is": "^16.13.1"
       }
     },
-    "node_modules/prop-types/node_modules/react-is": {
-      "version": "16.13.1",
-      "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
-      "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
-    },
     "node_modules/proper-lockfile": {
       "version": "4.1.2",
       "resolved": "https://registry.npmjs.org/proper-lockfile/-/proper-lockfile-4.1.2.tgz",
@@ -7111,33 +7234,10 @@
         "react": ">= 16.8"
       }
     },
-    "node_modules/react-i18next": {
-      "version": "11.15.3",
-      "resolved": "https://registry.npmjs.org/react-i18next/-/react-i18next-11.15.3.tgz",
-      "integrity": "sha512-RSUEM4So3Tu2JHV0JsZ5Yje+4nz66YViMfPZoywxOy0xyn3L7tE2CHvJ7Y9LUsrTU7vGmZ5bwb8PpjnkatdIxg==",
-      "dependencies": {
-        "@babel/runtime": "^7.14.5",
-        "html-escaper": "^2.0.2",
-        "html-parse-stringify": "^3.0.1"
-      },
-      "peerDependencies": {
-        "i18next": ">= 19.0.0",
-        "react": ">= 16.8.0"
-      },
-      "peerDependenciesMeta": {
-        "react-dom": {
-          "optional": true
-        },
-        "react-native": {
-          "optional": true
-        }
-      }
-    },
     "node_modules/react-is": {
-      "version": "17.0.2",
-      "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
-      "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==",
-      "dev": true
+      "version": "16.13.1",
+      "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
+      "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
     },
     "node_modules/react-toastify": {
       "version": "8.1.1",
@@ -7208,6 +7308,21 @@
         "node": ">=8"
       }
     },
+    "node_modules/read-pkg-up/node_modules/p-limit": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-2.3.0.tgz",
+      "integrity": "sha512-//88mFWSJx8lxCzwdAABTJL2MyWB12+eIY7MDL2SqLmAkeKU9qxRvWuSyTjm3FUmpBEMuFfckAIqEaVGUDxb6w==",
+      "dev": true,
+      "dependencies": {
+        "p-try": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/read-pkg-up/node_modules/p-locate": {
       "version": "4.1.0",
       "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-4.1.0.tgz",
@@ -7220,6 +7335,15 @@
         "node": ">=8"
       }
     },
+    "node_modules/read-pkg-up/node_modules/p-try": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/p-try/-/p-try-2.2.0.tgz",
+      "integrity": "sha512-R4nPAVTAU0B9D35/Gk3uJf/7XYbQcyohSKdvAxIRSNghFl4e71hVoGnBNQz9cWaXxO2I10KTC+3jMdvvoKw6dQ==",
+      "dev": true,
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/read-pkg-up/node_modules/path-exists": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-4.0.0.tgz",
@@ -7252,6 +7376,18 @@
         "node": ">= 6"
       }
     },
+    "node_modules/readdirp": {
+      "version": "3.6.0",
+      "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz",
+      "integrity": "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==",
+      "dev": true,
+      "dependencies": {
+        "picomatch": "^2.2.1"
+      },
+      "engines": {
+        "node": ">=8.10.0"
+      }
+    },
     "node_modules/reflect-metadata": {
       "version": "0.1.13",
       "resolved": "https://registry.npmjs.org/reflect-metadata/-/reflect-metadata-0.1.13.tgz",
@@ -7407,6 +7543,16 @@
         "node": ">= 6"
       }
     },
+    "node_modules/request/node_modules/uuid": {
+      "version": "3.4.0",
+      "resolved": "https://registry.npmjs.org/uuid/-/uuid-3.4.0.tgz",
+      "integrity": "sha512-HjSDRw6gZE5JMggctHBcjVak08+KEVhSIiDzFnT9S9aegmp85S/bReBVTb4QTFaRNptJ9kuYaNhnbNEOkbKb/A==",
+      "deprecated": "Please upgrade  to version 7 or higher.  Older versions may use Math.random() in certain circumstances, which is known to be problematic.  See https://v8.dev/blog/math-random for details.",
+      "optional": true,
+      "bin": {
+        "uuid": "bin/uuid"
+      }
+    },
     "node_modules/reselect": {
       "version": "4.1.5",
       "resolved": "https://registry.npmjs.org/reselect/-/reselect-4.1.5.tgz",
@@ -7414,12 +7560,12 @@
       "dev": true
     },
     "node_modules/resolve": {
-      "version": "1.21.0",
-      "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.21.0.tgz",
-      "integrity": "sha512-3wCbTpk5WJlyE4mSOtDLhqQmGFi0/TD9VPwmiolnk8U0wRgMEktqCXd3vy5buTO3tljvalNvKrjHEfrd2WpEKA==",
+      "version": "1.22.0",
+      "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.0.tgz",
+      "integrity": "sha512-Hhtrw0nLeSrFQ7phPp4OOcVjLPIeMnRlr5mcnVuMe7M/7eBn98A3hmFRLoFo3DLZkivSYwhRUJTyPyWAk56WLw==",
       "dev": true,
       "dependencies": {
-        "is-core-module": "^2.8.0",
+        "is-core-module": "^2.8.1",
         "path-parse": "^1.0.7",
         "supports-preserve-symlinks-flag": "^1.0.0"
       },
@@ -7646,25 +7792,6 @@
         "sequelize": ">=6.8.0"
       }
     },
-    "node_modules/sequelize-typescript/node_modules/glob": {
-      "version": "7.2.0",
-      "resolved": "https://registry.npmjs.org/glob/-/glob-7.2.0.tgz",
-      "integrity": "sha512-lmLf6gtyrPq8tTjSmrO94wBeQbFR3HbLHbuyD69wuyQkImp2hWqMGB47OX65FBkPffO641IP9jWa1z4ivqG26Q==",
-      "dependencies": {
-        "fs.realpath": "^1.0.0",
-        "inflight": "^1.0.4",
-        "inherits": "2",
-        "minimatch": "^3.0.4",
-        "once": "^1.3.0",
-        "path-is-absolute": "^1.0.0"
-      },
-      "engines": {
-        "node": "*"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/isaacs"
-      }
-    },
     "node_modules/sequelize/node_modules/semver": {
       "version": "7.3.5",
       "resolved": "https://registry.npmjs.org/semver/-/semver-7.3.5.tgz",
@@ -7679,14 +7806,6 @@
         "node": ">=10"
       }
     },
-    "node_modules/sequelize/node_modules/uuid": {
-      "version": "8.3.2",
-      "resolved": "https://registry.npmjs.org/uuid/-/uuid-8.3.2.tgz",
-      "integrity": "sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==",
-      "bin": {
-        "uuid": "dist/bin/uuid"
-      }
-    },
     "node_modules/set-blocking": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/set-blocking/-/set-blocking-2.0.0.tgz",
@@ -7728,9 +7847,9 @@
       }
     },
     "node_modules/signal-exit": {
-      "version": "3.0.6",
-      "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-3.0.6.tgz",
-      "integrity": "sha512-sDl4qMFpijcGw22U5w63KmD3cZJfBuFlVNbVMKje2keoKML7X2UzWbc4XrmEbDwg0NXJc3yv4/ox7b+JWb57kQ=="
+      "version": "3.0.7",
+      "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-3.0.7.tgz",
+      "integrity": "sha512-wnD2ZE+l+SPC/uoS0vXeE9L1+0wuaMqKlfz9AMUo38JsyLSBWSFcHR1Rri62LZc12vLr1gb3jl7iwQhgwpAbGQ=="
     },
     "node_modules/slash": {
       "version": "3.0.0",
@@ -7760,13 +7879,13 @@
       }
     },
     "node_modules/socks": {
-      "version": "2.6.1",
-      "resolved": "https://registry.npmjs.org/socks/-/socks-2.6.1.tgz",
-      "integrity": "sha512-kLQ9N5ucj8uIcxrDwjm0Jsqk06xdpBjGNQtpXy4Q8/QY2k+fY7nZH8CARy+hkbG+SGAovmzzuauCpBlb8FrnBA==",
+      "version": "2.6.2",
+      "resolved": "https://registry.npmjs.org/socks/-/socks-2.6.2.tgz",
+      "integrity": "sha512-zDZhHhZRY9PxRruRMR7kMhnf3I8hDs4S3f9RecfnGxvcBHQcKcIH/oUcEWffsfl1XxdYlA7nnlGbbTvPz9D8gA==",
       "dev": true,
       "dependencies": {
         "ip": "^1.1.5",
-        "smart-buffer": "^4.1.0"
+        "smart-buffer": "^4.2.0"
       },
       "engines": {
         "node": ">= 10.13.0",
@@ -8090,25 +8209,6 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
-    "node_modules/styled-jsx": {
-      "version": "5.0.0",
-      "resolved": "https://registry.npmjs.org/styled-jsx/-/styled-jsx-5.0.0.tgz",
-      "integrity": "sha512-qUqsWoBquEdERe10EW8vLp3jT25s/ssG1/qX5gZ4wu15OZpmSMFI2v+fWlRhLfykA5rFtlJ1ME8A8pm/peV4WA==",
-      "engines": {
-        "node": ">= 12.0.0"
-      },
-      "peerDependencies": {
-        "react": ">= 16.8.0 || 17.x.x || 18.x.x"
-      },
-      "peerDependenciesMeta": {
-        "@babel/core": {
-          "optional": true
-        },
-        "babel-plugin-macros": {
-          "optional": true
-        }
-      }
-    },
     "node_modules/supports-color": {
       "version": "5.5.0",
       "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
@@ -8209,45 +8309,6 @@
         "url": "https://github.com/chalk/chalk?sponsor=1"
       }
     },
-    "node_modules/tailwindcss/node_modules/chokidar": {
-      "version": "3.5.3",
-      "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.5.3.tgz",
-      "integrity": "sha512-Dr3sfKRP6oTcjf2JmUmFJfeVMvXBdegxB0iVQ5eb2V10uFJUCAS8OByZdVAyVb8xXNz3GjjTgj9kLWsZTqE6kw==",
-      "dev": true,
-      "funding": [
-        {
-          "type": "individual",
-          "url": "https://paulmillr.com/funding/"
-        }
-      ],
-      "dependencies": {
-        "anymatch": "~3.1.2",
-        "braces": "~3.0.2",
-        "glob-parent": "~5.1.2",
-        "is-binary-path": "~2.1.0",
-        "is-glob": "~4.0.1",
-        "normalize-path": "~3.0.0",
-        "readdirp": "~3.6.0"
-      },
-      "engines": {
-        "node": ">= 8.10.0"
-      },
-      "optionalDependencies": {
-        "fsevents": "~2.3.2"
-      }
-    },
-    "node_modules/tailwindcss/node_modules/chokidar/node_modules/glob-parent": {
-      "version": "5.1.2",
-      "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
-      "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
-      "dev": true,
-      "dependencies": {
-        "is-glob": "^4.0.1"
-      },
-      "engines": {
-        "node": ">= 6"
-      }
-    },
     "node_modules/tailwindcss/node_modules/color-convert": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
@@ -8275,18 +8336,6 @@
         "node": ">=8"
       }
     },
-    "node_modules/tailwindcss/node_modules/readdirp": {
-      "version": "3.6.0",
-      "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz",
-      "integrity": "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==",
-      "dev": true,
-      "dependencies": {
-        "picomatch": "^2.2.1"
-      },
-      "engines": {
-        "node": ">=8.10.0"
-      }
-    },
     "node_modules/tailwindcss/node_modules/supports-color": {
       "version": "7.2.0",
       "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
@@ -8498,10 +8547,9 @@
       }
     },
     "node_modules/tslib": {
-      "version": "1.14.1",
-      "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz",
-      "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==",
-      "dev": true
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.3.1.tgz",
+      "integrity": "sha512-77EbyPPpMz+FRFRuAFlWMtmgUWGe9UOG2Z25NqCwiIjRhOf5iKGuzSe5P2w1laq+FkRy4p+PCuVkJSGkzTEKVw=="
     },
     "node_modules/tsutils": {
       "version": "3.21.0",
@@ -8518,6 +8566,12 @@
         "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"
       }
     },
+    "node_modules/tsutils/node_modules/tslib": {
+      "version": "1.14.1",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz",
+      "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==",
+      "dev": true
+    },
     "node_modules/tunnel-agent": {
       "version": "0.6.0",
       "resolved": "https://registry.npmjs.org/tunnel-agent/-/tunnel-agent-0.6.0.tgz",
@@ -8641,30 +8695,17 @@
         "punycode": "^2.1.0"
       }
     },
-    "node_modules/use-subscription": {
-      "version": "1.5.1",
-      "resolved": "https://registry.npmjs.org/use-subscription/-/use-subscription-1.5.1.tgz",
-      "integrity": "sha512-Xv2a1P/yReAjAbhylMfFplFKj9GssgTwN7RlcTxBujFQcloStWNDQdc4g4NRWH9xS4i/FDk04vQBptAXoF3VcA==",
-      "dependencies": {
-        "object-assign": "^4.1.1"
-      },
-      "peerDependencies": {
-        "react": "^16.8.0 || ^17.0.0"
-      }
-    },
     "node_modules/util-deprecate": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
       "integrity": "sha1-RQ1Nyfpw3nMnYvvS1KKJgUGaDM8="
     },
     "node_modules/uuid": {
-      "version": "3.4.0",
-      "resolved": "https://registry.npmjs.org/uuid/-/uuid-3.4.0.tgz",
-      "integrity": "sha512-HjSDRw6gZE5JMggctHBcjVak08+KEVhSIiDzFnT9S9aegmp85S/bReBVTb4QTFaRNptJ9kuYaNhnbNEOkbKb/A==",
-      "deprecated": "Please upgrade  to version 7 or higher.  Older versions may use Math.random() in certain circumstances, which is known to be problematic.  See https://v8.dev/blog/math-random for details.",
-      "optional": true,
+      "version": "8.3.2",
+      "resolved": "https://registry.npmjs.org/uuid/-/uuid-8.3.2.tgz",
+      "integrity": "sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==",
       "bin": {
-        "uuid": "bin/uuid"
+        "uuid": "dist/bin/uuid"
       }
     },
     "node_modules/v8-compile-cache": {
@@ -8950,9 +8991,9 @@
       }
     },
     "node_modules/ws": {
-      "version": "7.5.6",
-      "resolved": "https://registry.npmjs.org/ws/-/ws-7.5.6.tgz",
-      "integrity": "sha512-6GLgCqo2cy2A2rjCNFlxQS6ZljG/coZfZXclldI8FB/1G3CCI36Zd8xy2HrFVACi8tfk5XrgLQEk+P0Tnz9UcA==",
+      "version": "7.5.7",
+      "resolved": "https://registry.npmjs.org/ws/-/ws-7.5.7.tgz",
+      "integrity": "sha512-KMvVuFzpKBuiIXW3E4u3mySRO2/mCHSyZDJQM5NQ9Q9KHWHWh0NHgfbRMLLrceUK5qAL4ytALJbpRMjixFZh8A==",
       "dev": true,
       "engines": {
         "node": ">=8.3.0"
@@ -9025,6 +9066,15 @@
     }
   },
   "dependencies": {
+    "@ampproject/remapping": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/@ampproject/remapping/-/remapping-2.1.0.tgz",
+      "integrity": "sha512-d5RysTlJ7hmw5Tw4UxgxcY3lkMe92n8sXCcuLPAyIAHK6j8DefDwtGnVVDgOnv+RnEosulDJ9NPKQL27bDId0g==",
+      "dev": true,
+      "requires": {
+        "@jridgewell/trace-mapping": "^0.3.0"
+      }
+    },
     "@babel/code-frame": {
       "version": "7.16.7",
       "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.16.7.tgz",
@@ -9035,41 +9085,41 @@
       }
     },
     "@babel/compat-data": {
-      "version": "7.16.8",
-      "resolved": "https://registry.npmjs.org/@babel/compat-data/-/compat-data-7.16.8.tgz",
-      "integrity": "sha512-m7OkX0IdKLKPpBlJtF561YJal5y/jyI5fNfWbPxh2D/nbzzGI4qRyrD8xO2jB24u7l+5I2a43scCG2IrfjC50Q==",
+      "version": "7.17.0",
+      "resolved": "https://registry.npmjs.org/@babel/compat-data/-/compat-data-7.17.0.tgz",
+      "integrity": "sha512-392byTlpGWXMv4FbyWw3sAZ/FrW/DrwqLGXpy0mbyNe9Taqv1mg9yON5/o0cnr8XYCkFTZbC1eV+c+LAROgrng==",
       "dev": true
     },
     "@babel/core": {
-      "version": "7.16.10",
-      "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.16.10.tgz",
-      "integrity": "sha512-pbiIdZbCiMx/MM6toR+OfXarYix3uz0oVsnNtfdAGTcCTu3w/JGF8JhirevXLBJUu0WguSZI12qpKnx7EeMyLA==",
+      "version": "7.17.0",
+      "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.17.0.tgz",
+      "integrity": "sha512-x/5Ea+RO5MvF9ize5DeVICJoVrNv0Mi2RnIABrZEKYvPEpldXwauPkgvYA17cKa6WpU3LoYvYbuEMFtSNFsarA==",
       "dev": true,
       "requires": {
+        "@ampproject/remapping": "^2.0.0",
         "@babel/code-frame": "^7.16.7",
-        "@babel/generator": "^7.16.8",
+        "@babel/generator": "^7.17.0",
         "@babel/helper-compilation-targets": "^7.16.7",
         "@babel/helper-module-transforms": "^7.16.7",
-        "@babel/helpers": "^7.16.7",
-        "@babel/parser": "^7.16.10",
+        "@babel/helpers": "^7.17.0",
+        "@babel/parser": "^7.17.0",
         "@babel/template": "^7.16.7",
-        "@babel/traverse": "^7.16.10",
-        "@babel/types": "^7.16.8",
+        "@babel/traverse": "^7.17.0",
+        "@babel/types": "^7.17.0",
         "convert-source-map": "^1.7.0",
         "debug": "^4.1.0",
         "gensync": "^1.0.0-beta.2",
         "json5": "^2.1.2",
-        "semver": "^6.3.0",
-        "source-map": "^0.5.0"
+        "semver": "^6.3.0"
       }
     },
     "@babel/generator": {
-      "version": "7.16.8",
-      "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.16.8.tgz",
-      "integrity": "sha512-1ojZwE9+lOXzcWdWmO6TbUzDfqLD39CmEhN8+2cX9XkDo5yW1OpgfejfliysR2AWLpMamTiOiAp/mtroaymhpw==",
+      "version": "7.17.0",
+      "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.17.0.tgz",
+      "integrity": "sha512-I3Omiv6FGOC29dtlZhkfXO6pgkmukJSlT26QjVvS1DGZe/NzSVCPG41X0tS21oZkJYlovfj9qDWgKP+Cn4bXxw==",
       "dev": true,
       "requires": {
-        "@babel/types": "^7.16.8",
+        "@babel/types": "^7.17.0",
         "jsesc": "^2.5.1",
         "source-map": "^0.5.0"
       }
@@ -9096,9 +9146,9 @@
       }
     },
     "@babel/helper-create-class-features-plugin": {
-      "version": "7.16.10",
-      "resolved": "https://registry.npmjs.org/@babel/helper-create-class-features-plugin/-/helper-create-class-features-plugin-7.16.10.tgz",
-      "integrity": "sha512-wDeej0pu3WN/ffTxMNCPW5UCiOav8IcLRxSIyp/9+IF2xJUM9h/OYjg0IJLHaL6F8oU8kqMz9nc1vryXhMsgXg==",
+      "version": "7.17.1",
+      "resolved": "https://registry.npmjs.org/@babel/helper-create-class-features-plugin/-/helper-create-class-features-plugin-7.17.1.tgz",
+      "integrity": "sha512-JBdSr/LtyYIno/pNnJ75lBcqc3Z1XXujzPanHqjvvrhOA+DTceTFuJi8XjmWTZh4r3fsdfqaCMN0iZemdkxZHQ==",
       "dev": true,
       "requires": {
         "@babel/helper-annotate-as-pure": "^7.16.7",
@@ -9250,14 +9300,14 @@
       "dev": true
     },
     "@babel/helpers": {
-      "version": "7.16.7",
-      "resolved": "https://registry.npmjs.org/@babel/helpers/-/helpers-7.16.7.tgz",
-      "integrity": "sha512-9ZDoqtfY7AuEOt3cxchfii6C7GDyyMBffktR5B2jvWv8u2+efwvpnVKXMWzNehqy68tKgAfSwfdw/lWpthS2bw==",
+      "version": "7.17.0",
+      "resolved": "https://registry.npmjs.org/@babel/helpers/-/helpers-7.17.0.tgz",
+      "integrity": "sha512-Xe/9NFxjPwELUvW2dsukcMZIp6XwPSbI4ojFBJuX5ramHuVE22SVcZIwqzdWo5uCgeTXW8qV97lMvSOjq+1+nQ==",
       "dev": true,
       "requires": {
         "@babel/template": "^7.16.7",
-        "@babel/traverse": "^7.16.7",
-        "@babel/types": "^7.16.7"
+        "@babel/traverse": "^7.17.0",
+        "@babel/types": "^7.17.0"
       }
     },
     "@babel/highlight": {
@@ -9272,9 +9322,9 @@
       }
     },
     "@babel/parser": {
-      "version": "7.16.10",
-      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.16.10.tgz",
-      "integrity": "sha512-Sm/S9Or6nN8uiFsQU1yodyDW3MWXQhFeqzMPM+t8MJjM+pLsnFVxFZzkpXKvUXh+Gz9cbMoYYs484+Jw/NTEFQ==",
+      "version": "7.17.0",
+      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.17.0.tgz",
+      "integrity": "sha512-VKXSCQx5D8S04ej+Dqsr1CzYvvWgf20jIw2D+YhQCrIlr2UZGaDds23Y0xg75/skOxpLCRpUZvk/1EAVkGoDOw==",
       "dev": true
     },
     "@babel/plugin-proposal-class-properties": {
@@ -9406,6 +9456,15 @@
         "@babel/helper-plugin-utils": "^7.8.0"
       }
     },
+    "@babel/plugin-syntax-jsx": {
+      "version": "7.16.7",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-jsx/-/plugin-syntax-jsx-7.16.7.tgz",
+      "integrity": "sha512-Esxmk7YjA8QysKeT3VhTXvF6y77f/a91SIs4pWb4H2eWGQkCKFgQaG6hdoEVZtGsrAcb2K5BW66XsOErD4WU3Q==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.16.7"
+      }
+    },
     "@babel/plugin-syntax-logical-assignment-operators": {
       "version": "7.10.4",
       "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-logical-assignment-operators/-/plugin-syntax-logical-assignment-operators-7.10.4.tgz",
@@ -9501,17 +9560,6 @@
         "@babel/helper-plugin-utils": "^7.16.7",
         "@babel/plugin-syntax-jsx": "^7.16.7",
         "@babel/types": "^7.16.7"
-      },
-      "dependencies": {
-        "@babel/plugin-syntax-jsx": {
-          "version": "7.16.7",
-          "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-jsx/-/plugin-syntax-jsx-7.16.7.tgz",
-          "integrity": "sha512-Esxmk7YjA8QysKeT3VhTXvF6y77f/a91SIs4pWb4H2eWGQkCKFgQaG6hdoEVZtGsrAcb2K5BW66XsOErD4WU3Q==",
-          "dev": true,
-          "requires": {
-            "@babel/helper-plugin-utils": "^7.16.7"
-          }
-        }
       }
     },
     "@babel/plugin-transform-typescript": {
@@ -9537,17 +9585,17 @@
       }
     },
     "@babel/runtime": {
-      "version": "7.16.7",
-      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.16.7.tgz",
-      "integrity": "sha512-9E9FJowqAsytyOY6LG+1KuueckRL+aQW+mKvXRXnuFGyRAyepJPmEo9vgMfXUA6O9u3IeEdv9MAkppFcaQwogQ==",
+      "version": "7.17.0",
+      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.17.0.tgz",
+      "integrity": "sha512-etcO/ohMNaNA2UBdaXBBSX/3aEzFMRrVfaPv8Ptc0k+cWpWW0QFiGZ2XnVqQZI1Cf734LbPGmqBKWESfW4x/dQ==",
       "requires": {
         "regenerator-runtime": "^0.13.4"
       }
     },
     "@babel/runtime-corejs3": {
-      "version": "7.16.8",
-      "resolved": "https://registry.npmjs.org/@babel/runtime-corejs3/-/runtime-corejs3-7.16.8.tgz",
-      "integrity": "sha512-3fKhuICS1lMz0plI5ktOE/yEtBRMVxplzRkdn6mJQ197XiY0JnrzYV0+Mxozq3JZ8SBV9Ecurmw1XsGbwOf+Sg==",
+      "version": "7.17.0",
+      "resolved": "https://registry.npmjs.org/@babel/runtime-corejs3/-/runtime-corejs3-7.17.0.tgz",
+      "integrity": "sha512-qeydncU80ravKzovVncW3EYaC1ji3GpntdPgNcJy9g7hHSY6KX+ne1cbV3ov7Zzm4F1z0+QreZPCuw1ynkmYNg==",
       "dev": true,
       "requires": {
         "core-js-pure": "^3.20.2",
@@ -9566,27 +9614,27 @@
       }
     },
     "@babel/traverse": {
-      "version": "7.16.10",
-      "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.16.10.tgz",
-      "integrity": "sha512-yzuaYXoRJBGMlBhsMJoUW7G1UmSb/eXr/JHYM/MsOJgavJibLwASijW7oXBdw3NQ6T0bW7Ty5P/VarOs9cHmqw==",
+      "version": "7.17.0",
+      "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.17.0.tgz",
+      "integrity": "sha512-fpFIXvqD6kC7c7PUNnZ0Z8cQXlarCLtCUpt2S1Dx7PjoRtCFffvOkHHSom+m5HIxMZn5bIBVb71lhabcmjEsqg==",
       "dev": true,
       "requires": {
         "@babel/code-frame": "^7.16.7",
-        "@babel/generator": "^7.16.8",
+        "@babel/generator": "^7.17.0",
         "@babel/helper-environment-visitor": "^7.16.7",
         "@babel/helper-function-name": "^7.16.7",
         "@babel/helper-hoist-variables": "^7.16.7",
         "@babel/helper-split-export-declaration": "^7.16.7",
-        "@babel/parser": "^7.16.10",
-        "@babel/types": "^7.16.8",
+        "@babel/parser": "^7.17.0",
+        "@babel/types": "^7.17.0",
         "debug": "^4.1.0",
         "globals": "^11.1.0"
       }
     },
     "@babel/types": {
-      "version": "7.16.8",
-      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.16.8.tgz",
-      "integrity": "sha512-smN2DQc5s4M7fntyjGtyIPbRJv6wW4rU/94fmYJ7PKQuZkC0qGMHXJbg6sNGt12JmVr4k5YaptI/XtiLJBnmIg==",
+      "version": "7.17.0",
+      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.17.0.tgz",
+      "integrity": "sha512-TmKSNO4D5rzhL5bjWFcVHHLETzfQ/AmbKpKPOSjlP0WoHZ6L911fgoOKY4Alp/emzG4cHJdyN49zpgkbXFEHHw==",
       "dev": true,
       "requires": {
         "@babel/helper-validator-identifier": "^7.16.7",
@@ -9611,14 +9659,20 @@
       },
       "dependencies": {
         "globals": {
-          "version": "13.12.0",
-          "resolved": "https://registry.npmjs.org/globals/-/globals-13.12.0.tgz",
-          "integrity": "sha512-uS8X6lSKN2JumVoXrbUz+uG4BYG+eiawqm3qFcT7ammfbUHeCBoJMlHcec/S3krSk73/AE/f0szYFmgAA3kYZg==",
+          "version": "13.12.1",
+          "resolved": "https://registry.npmjs.org/globals/-/globals-13.12.1.tgz",
+          "integrity": "sha512-317dFlgY2pdJZ9rspXDks7073GpDmXdfbM3vYYp0HAMKGDh1FfWPleI2ljVNLQX5M5lXcAslTcPTrOrMEFOjyw==",
           "dev": true,
           "requires": {
             "type-fest": "^0.20.2"
           }
         },
+        "ignore": {
+          "version": "4.0.6",
+          "resolved": "https://registry.npmjs.org/ignore/-/ignore-4.0.6.tgz",
+          "integrity": "sha512-cyFDKrqc/YdcWFniJhzI42+AzS+gNwmUzOSFcRCQYwySuBBBy/KjuxWLZ/FHEH6Moq1NizMOBWyTcv8O4OZIMg==",
+          "dev": true
+        },
         "type-fest": {
           "version": "0.20.2",
           "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.20.2.tgz",
@@ -9628,9 +9682,9 @@
       }
     },
     "@humanwhocodes/config-array": {
-      "version": "0.9.2",
-      "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.9.2.tgz",
-      "integrity": "sha512-UXOuFCGcwciWckOpmfKDq/GyhlTf9pN/BzG//x8p8zTOFEcGuA68ANXheFS0AGvy3qgZqLBUkMs7hqzqCKOVwA==",
+      "version": "0.9.3",
+      "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.9.3.tgz",
+      "integrity": "sha512-3xSMlXHh03hCcCmFc0rbKp3Ivt2PFEJnQUJDDMTJQ2wkECZWdq4GePs2ctc5H8zV+cHPaq8k2vU8mrQjA6iHdQ==",
       "dev": true,
       "requires": {
         "@humanwhocodes/object-schema": "^1.2.1",
@@ -9645,9 +9699,9 @@
       "dev": true
     },
     "@jest/types": {
-      "version": "27.4.2",
-      "resolved": "https://registry.npmjs.org/@jest/types/-/types-27.4.2.tgz",
-      "integrity": "sha512-j35yw0PMTPpZsUoOBiuHzr1zTYoad1cVIE0ajEjcrJONxxrko/IRGKkXx3os0Nsi4Hu3+5VmDbVfq5WhG/pWAg==",
+      "version": "27.5.0",
+      "resolved": "https://registry.npmjs.org/@jest/types/-/types-27.5.0.tgz",
+      "integrity": "sha512-oDHEp7gwSgA82RZ6pzUL3ugM2njP/lVB1MsxRZNOBk+CoNvh9SpH1lQixPFc/kDlV50v59csiW4HLixWmhmgPQ==",
       "dev": true,
       "requires": {
         "@types/istanbul-lib-coverage": "^2.0.0",
@@ -9708,6 +9762,28 @@
         }
       }
     },
+    "@jridgewell/resolve-uri": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.0.4.tgz",
+      "integrity": "sha512-cz8HFjOFfUBtvN+NXYSFMHYRdxZMaEl0XypVrhzxBgadKIXhIkRd8aMeHhmF56Sl7SuS8OnUpQ73/k9LE4VnLg==",
+      "dev": true
+    },
+    "@jridgewell/sourcemap-codec": {
+      "version": "1.4.10",
+      "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.10.tgz",
+      "integrity": "sha512-Ht8wIW5v165atIX1p+JvKR5ONzUyF4Ac8DZIQ5kZs9zrb6M8SJNXpx1zn04rn65VjBMygRoMXcyYwNK0fT7bEg==",
+      "dev": true
+    },
+    "@jridgewell/trace-mapping": {
+      "version": "0.3.2",
+      "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.2.tgz",
+      "integrity": "sha512-9KzzH4kMjA2XmBRHfqG2/Vtl7s92l6uNDd0wW7frDE+EUvQFGqNXhWp0UGJjSkt3v2AYjzOZn1QO9XaTNJIt1Q==",
+      "dev": true,
+      "requires": {
+        "@jridgewell/resolve-uri": "^3.0.3",
+        "@jridgewell/sourcemap-codec": "^1.4.10"
+      }
+    },
     "@next/env": {
       "version": "12.0.10",
       "resolved": "https://registry.npmjs.org/@next/env/-/env-12.0.10.tgz",
@@ -9720,6 +9796,22 @@
       "dev": true,
       "requires": {
         "glob": "7.1.7"
+      },
+      "dependencies": {
+        "glob": {
+          "version": "7.1.7",
+          "resolved": "https://registry.npmjs.org/glob/-/glob-7.1.7.tgz",
+          "integrity": "sha512-OvD9ENzPLbegENnYP5UUfJIirTg4+XwMWGaQfQTY0JenxNvvIKP3U3/tAQSPIu/lHxXYSZmpXlUHeqAIdKzBLQ==",
+          "dev": true,
+          "requires": {
+            "fs.realpath": "^1.0.0",
+            "inflight": "^1.0.4",
+            "inherits": "2",
+            "minimatch": "^3.0.4",
+            "once": "^1.3.0",
+            "path-is-absolute": "^1.0.0"
+          }
+        }
       }
     },
     "@next/swc-android-arm64": {
@@ -10031,41 +10123,41 @@
       }
     },
     "@typescript-eslint/parser": {
-      "version": "5.10.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-5.10.0.tgz",
-      "integrity": "sha512-pJB2CCeHWtwOAeIxv8CHVGJhI5FNyJAIpx5Pt72YkK3QfEzt6qAlXZuyaBmyfOdM62qU0rbxJzNToPTVeJGrQw==",
+      "version": "5.11.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-5.11.0.tgz",
+      "integrity": "sha512-x0DCjetHZYBRovJdr3U0zG9OOdNXUaFLJ82ehr1AlkArljJuwEsgnud+Q7umlGDFLFrs8tU8ybQDFocp/eX8mQ==",
       "dev": true,
       "requires": {
-        "@typescript-eslint/scope-manager": "5.10.0",
-        "@typescript-eslint/types": "5.10.0",
-        "@typescript-eslint/typescript-estree": "5.10.0",
+        "@typescript-eslint/scope-manager": "5.11.0",
+        "@typescript-eslint/types": "5.11.0",
+        "@typescript-eslint/typescript-estree": "5.11.0",
         "debug": "^4.3.2"
       }
     },
     "@typescript-eslint/scope-manager": {
-      "version": "5.10.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-5.10.0.tgz",
-      "integrity": "sha512-tgNgUgb4MhqK6DoKn3RBhyZ9aJga7EQrw+2/OiDk5hKf3pTVZWyqBi7ukP+Z0iEEDMF5FDa64LqODzlfE4O/Dg==",
+      "version": "5.11.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-5.11.0.tgz",
+      "integrity": "sha512-z+K4LlahDFVMww20t/0zcA7gq/NgOawaLuxgqGRVKS0PiZlCTIUtX0EJbC0BK1JtR4CelmkPK67zuCgpdlF4EA==",
       "dev": true,
       "requires": {
-        "@typescript-eslint/types": "5.10.0",
-        "@typescript-eslint/visitor-keys": "5.10.0"
+        "@typescript-eslint/types": "5.11.0",
+        "@typescript-eslint/visitor-keys": "5.11.0"
       }
     },
     "@typescript-eslint/types": {
-      "version": "5.10.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-5.10.0.tgz",
-      "integrity": "sha512-wUljCgkqHsMZbw60IbOqT/puLfyqqD5PquGiBo1u1IS3PLxdi3RDGlyf032IJyh+eQoGhz9kzhtZa+VC4eWTlQ==",
+      "version": "5.11.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-5.11.0.tgz",
+      "integrity": "sha512-cxgBFGSRCoBEhvSVLkKw39+kMzUKHlJGVwwMbPcTZX3qEhuXhrjwaZXWMxVfxDgyMm+b5Q5b29Llo2yow8Y7xQ==",
       "dev": true
     },
     "@typescript-eslint/typescript-estree": {
-      "version": "5.10.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-5.10.0.tgz",
-      "integrity": "sha512-x+7e5IqfwLwsxTdliHRtlIYkgdtYXzE0CkFeV6ytAqq431ZyxCFzNMNR5sr3WOlIG/ihVZr9K/y71VHTF/DUQA==",
+      "version": "5.11.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-5.11.0.tgz",
+      "integrity": "sha512-yVH9hKIv3ZN3lw8m/Jy5I4oXO4ZBMqijcXCdA4mY8ull6TPTAoQnKKrcZ0HDXg7Bsl0Unwwx7jcXMuNZc0m4lg==",
       "dev": true,
       "requires": {
-        "@typescript-eslint/types": "5.10.0",
-        "@typescript-eslint/visitor-keys": "5.10.0",
+        "@typescript-eslint/types": "5.11.0",
+        "@typescript-eslint/visitor-keys": "5.11.0",
         "debug": "^4.3.2",
         "globby": "^11.0.4",
         "is-glob": "^4.0.3",
@@ -10085,12 +10177,12 @@
       }
     },
     "@typescript-eslint/visitor-keys": {
-      "version": "5.10.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-5.10.0.tgz",
-      "integrity": "sha512-GMxj0K1uyrFLPKASLmZzCuSddmjZVbVj3Ouy5QVuIGKZopxvOr24JsS7gruz6C3GExE01mublZ3mIBOaon9zuQ==",
+      "version": "5.11.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-5.11.0.tgz",
+      "integrity": "sha512-E8w/vJReMGuloGxJDkpPlGwhxocxOpSVgSvjiLO5IxZPmxZF30weOeJYyPSEACwM+X4NziYS9q+WkN/2DHYQwA==",
       "dev": true,
       "requires": {
-        "@typescript-eslint/types": "5.10.0",
+        "@typescript-eslint/types": "5.11.0",
         "eslint-visitor-keys": "^3.0.0"
       }
     },
@@ -10352,9 +10444,9 @@
       "optional": true
     },
     "axe-core": {
-      "version": "4.3.5",
-      "resolved": "https://registry.npmjs.org/axe-core/-/axe-core-4.3.5.tgz",
-      "integrity": "sha512-WKTW1+xAzhMS5dJsxWkliixlO/PqC4VhmO9T4juNYcaTg9jzWiJsou6m5pxWYGfigWbwzJWeFY6z47a+4neRXA==",
+      "version": "4.4.1",
+      "resolved": "https://registry.npmjs.org/axe-core/-/axe-core-4.4.1.tgz",
+      "integrity": "sha512-gd1kmb21kwNuWr6BQz8fv6GNECPBnUasepcoLbekws23NVBLODdsClRZ+bQ8+9Uomf3Sm3+Vwn0oYG9NvwnJCw==",
       "dev": true
     },
     "axobject-query": {
@@ -10569,9 +10661,9 @@
       "dev": true
     },
     "caniuse-lite": {
-      "version": "1.0.30001300",
-      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001300.tgz",
-      "integrity": "sha512-cVjiJHWGcNlJi8TZVKNMnvMid3Z3TTdDHmLDzlOdIiZq138Exvo0G+G0wTdVYolxKb4AYwC+38pxodiInVtJSA=="
+      "version": "1.0.30001309",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001309.tgz",
+      "integrity": "sha512-Pl8vfigmBXXq+/yUz1jUwULeq9xhMJznzdc/xwl4WclDAuebcTHVefpz8lE/bMI+UN7TOkSSe7B7RnZd6+dzjA=="
     },
     "caseless": {
       "version": "0.12.0",
@@ -10603,14 +10695,6 @@
         "parse5": "^6.0.1",
         "parse5-htmlparser2-tree-adapter": "^6.0.1",
         "tslib": "^2.2.0"
-      },
-      "dependencies": {
-        "tslib": {
-          "version": "2.3.1",
-          "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.3.1.tgz",
-          "integrity": "sha512-77EbyPPpMz+FRFRuAFlWMtmgUWGe9UOG2Z25NqCwiIjRhOf5iKGuzSe5P2w1laq+FkRy4p+PCuVkJSGkzTEKVw==",
-          "dev": true
-        }
       }
     },
     "cheerio-select": {
@@ -10626,6 +10710,33 @@
         "domutils": "^2.7.0"
       }
     },
+    "chokidar": {
+      "version": "3.5.3",
+      "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.5.3.tgz",
+      "integrity": "sha512-Dr3sfKRP6oTcjf2JmUmFJfeVMvXBdegxB0iVQ5eb2V10uFJUCAS8OByZdVAyVb8xXNz3GjjTgj9kLWsZTqE6kw==",
+      "dev": true,
+      "requires": {
+        "anymatch": "~3.1.2",
+        "braces": "~3.0.2",
+        "fsevents": "~2.3.2",
+        "glob-parent": "~5.1.2",
+        "is-binary-path": "~2.1.0",
+        "is-glob": "~4.0.1",
+        "normalize-path": "~3.0.0",
+        "readdirp": "~3.6.0"
+      },
+      "dependencies": {
+        "glob-parent": {
+          "version": "5.1.2",
+          "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
+          "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
+          "dev": true,
+          "requires": {
+            "is-glob": "^4.0.1"
+          }
+        }
+      }
+    },
     "chownr": {
       "version": "1.1.4",
       "resolved": "https://registry.npmjs.org/chownr/-/chownr-1.1.4.tgz",
@@ -10779,14 +10890,14 @@
       }
     },
     "core-js": {
-      "version": "3.20.3",
-      "resolved": "https://registry.npmjs.org/core-js/-/core-js-3.20.3.tgz",
-      "integrity": "sha512-vVl8j8ph6tRS3B8qir40H7yw7voy17xL0piAjlbBUsH7WIfzoedL/ZOr1OV9FyZQLWXsayOJyV4tnRyXR85/ag=="
+      "version": "3.21.0",
+      "resolved": "https://registry.npmjs.org/core-js/-/core-js-3.21.0.tgz",
+      "integrity": "sha512-YUdI3fFu4TF/2WykQ2xzSiTQdldLB4KVuL9WeAy5XONZYt5Cun/fpQvctoKbCgvPhmzADeesTk/j2Rdx77AcKQ=="
     },
     "core-js-pure": {
-      "version": "3.20.3",
-      "resolved": "https://registry.npmjs.org/core-js-pure/-/core-js-pure-3.20.3.tgz",
-      "integrity": "sha512-Q2H6tQ5MtPtcC7f3HxJ48i4Q7T9ybPKgvWyuH7JXIoNa2pm0KuBnycsET/qw1SLLZYfbsbrZQNMeIOClb+6WIA==",
+      "version": "3.21.0",
+      "resolved": "https://registry.npmjs.org/core-js-pure/-/core-js-pure-3.21.0.tgz",
+      "integrity": "sha512-VaJUunCZLnxuDbo1rNOzwbet9E1K9joiXS5+DQMPtgxd24wfsZbJZMMfQLGYMlCUvSxLfsRUUhoOR2x28mFfeg==",
       "dev": true
     },
     "core-util-is": {
@@ -10981,9 +11092,9 @@
       "dev": true
     },
     "diff-sequences": {
-      "version": "27.4.0",
-      "resolved": "https://registry.npmjs.org/diff-sequences/-/diff-sequences-27.4.0.tgz",
-      "integrity": "sha512-YqiQzkrsmHMH5uuh8OdQFU9/ZpADnwzml8z0O5HvRNda+5UZsaX/xN+AAxfR2hWq1Y7HZnAzO9J5lJXOuDz2Ww==",
+      "version": "27.5.0",
+      "resolved": "https://registry.npmjs.org/diff-sequences/-/diff-sequences-27.5.0.tgz",
+      "integrity": "sha512-ZsOBWnhXiH+Zn0DcBNX/tiQsqrREHs/6oQsEVy2VJJjrTblykPima11pyHMSA/7PGmD+fwclTnKVKL/qtNREDQ==",
       "dev": true
     },
     "dir-glob": {
@@ -11101,9 +11212,9 @@
       }
     },
     "electron-to-chromium": {
-      "version": "1.4.49",
-      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.49.tgz",
-      "integrity": "sha512-k/0t1TRfonHIp8TJKfjBu2cKj8MqYTiEpOhci+q7CVEE5xnCQnx1pTa+V8b/sdhe4S3PR4p4iceEQWhGrKQORQ==",
+      "version": "1.4.66",
+      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.66.tgz",
+      "integrity": "sha512-f1RXFMsvwufWLwYUxTiP7HmjprKXrqEWHiQkjAYa9DJeVIlZk5v8gBGcaV+FhtXLly6C1OTVzQY+2UQrACiLlg==",
       "dev": true
     },
     "emoji-regex": {
@@ -11283,9 +11394,9 @@
           "dev": true
         },
         "globals": {
-          "version": "13.12.0",
-          "resolved": "https://registry.npmjs.org/globals/-/globals-13.12.0.tgz",
-          "integrity": "sha512-uS8X6lSKN2JumVoXrbUz+uG4BYG+eiawqm3qFcT7ammfbUHeCBoJMlHcec/S3krSk73/AE/f0szYFmgAA3kYZg==",
+          "version": "13.12.1",
+          "resolved": "https://registry.npmjs.org/globals/-/globals-13.12.1.tgz",
+          "integrity": "sha512-317dFlgY2pdJZ9rspXDks7073GpDmXdfbM3vYYp0HAMKGDh1FfWPleI2ljVNLQX5M5lXcAslTcPTrOrMEFOjyw==",
           "dev": true,
           "requires": {
             "type-fest": "^0.20.2"
@@ -11297,12 +11408,6 @@
           "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
           "dev": true
         },
-        "ignore": {
-          "version": "5.2.0",
-          "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.2.0.tgz",
-          "integrity": "sha512-CmxgYGiEPCLhfLnpPp1MoRmifwEIOgjcHXxOBjv7mY96c+eWScsOP9c112ZyLdWHi0FxHjI+4uVhKYp/gcdRmQ==",
-          "dev": true
-        },
         "supports-color": {
           "version": "7.2.0",
           "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
@@ -11372,9 +11477,9 @@
       }
     },
     "eslint-module-utils": {
-      "version": "2.7.2",
-      "resolved": "https://registry.npmjs.org/eslint-module-utils/-/eslint-module-utils-2.7.2.tgz",
-      "integrity": "sha512-zquepFnWCY2ISMFwD/DqzaM++H+7PDzOpUvotJWm/y1BAFt5R4oeULgdrTejKqLkz7MA/tgstsUMNYc7wNdTrg==",
+      "version": "2.7.3",
+      "resolved": "https://registry.npmjs.org/eslint-module-utils/-/eslint-module-utils-2.7.3.tgz",
+      "integrity": "sha512-088JEC7O3lDZM9xGe0RerkOMd0EjFl+Yvd1jPWIkMT5u3H9+HC34mWWPnqPrN13gieT9pBOO+Qt07Nb/6TresQ==",
       "dev": true,
       "requires": {
         "debug": "^3.2.7",
@@ -11745,13 +11850,6 @@
       "integrity": "sha512-iACCiXeMYOvZqlF1kTiYINzgepRBymz1wwjiuup9u9nayhb6g4fSwiyJ/6adli+EPwrWtpgQAh2PoS7HukEGEg==",
       "requires": {
         "tslib": "^2.0.3"
-      },
-      "dependencies": {
-        "tslib": {
-          "version": "2.3.1",
-          "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.3.1.tgz",
-          "integrity": "sha512-77EbyPPpMz+FRFRuAFlWMtmgUWGe9UOG2Z25NqCwiIjRhOf5iKGuzSe5P2w1laq+FkRy4p+PCuVkJSGkzTEKVw=="
-        }
       }
     },
     "fill-range": {
@@ -11801,9 +11899,9 @@
       }
     },
     "flatted": {
-      "version": "3.2.4",
-      "resolved": "https://registry.npmjs.org/flatted/-/flatted-3.2.4.tgz",
-      "integrity": "sha512-8/sOawo8tJ4QOBX8YlQBMxL8+RLZfxMQOif9o0KUKTNTjMYElWPE0r/m5VNFxTRd0NSw8qSy8dajrwX4RYI1Hw==",
+      "version": "3.2.5",
+      "resolved": "https://registry.npmjs.org/flatted/-/flatted-3.2.5.tgz",
+      "integrity": "sha512-WIWGi2L3DyTUvUrwRKgGi9TwxQMUEqPOPQBVi71R96jZXJdFskXEmf54BoZaS1kknGODoIGASGEzBUYdyMCBJg==",
       "dev": true
     },
     "flush-write-stream": {
@@ -11860,9 +11958,9 @@
       }
     },
     "fraction.js": {
-      "version": "4.1.2",
-      "resolved": "https://registry.npmjs.org/fraction.js/-/fraction.js-4.1.2.tgz",
-      "integrity": "sha512-o2RiJQ6DZaR/5+Si0qJUIy637QMRudSi9kU/FFzx9EZazrIdnBgpU+3sEWCxAVhH2RtxW2Oz+T4p2o8uOPVcgA==",
+      "version": "4.1.3",
+      "resolved": "https://registry.npmjs.org/fraction.js/-/fraction.js-4.1.3.tgz",
+      "integrity": "sha512-pUHWWt6vHzZZiQJcM6S/0PXfS+g6FM4BF5rj9wZyreivhQPdsh5PpE25VtSNxq80wHS5RfY51Ii+8Z0Zl/pmzg==",
       "dev": true
     },
     "fs-extra": {
@@ -12106,9 +12204,9 @@
       }
     },
     "glob": {
-      "version": "7.1.7",
-      "resolved": "https://registry.npmjs.org/glob/-/glob-7.1.7.tgz",
-      "integrity": "sha512-OvD9ENzPLbegENnYP5UUfJIirTg4+XwMWGaQfQTY0JenxNvvIKP3U3/tAQSPIu/lHxXYSZmpXlUHeqAIdKzBLQ==",
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/glob/-/glob-7.2.0.tgz",
+      "integrity": "sha512-lmLf6gtyrPq8tTjSmrO94wBeQbFR3HbLHbuyD69wuyQkImp2hWqMGB47OX65FBkPffO641IP9jWa1z4ivqG26Q==",
       "requires": {
         "fs.realpath": "^1.0.0",
         "inflight": "^1.0.4",
@@ -12208,14 +12306,6 @@
         "ignore": "^5.2.0",
         "merge2": "^1.4.1",
         "slash": "^3.0.0"
-      },
-      "dependencies": {
-        "ignore": {
-          "version": "5.2.0",
-          "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.2.0.tgz",
-          "integrity": "sha512-CmxgYGiEPCLhfLnpPp1MoRmifwEIOgjcHXxOBjv7mY96c+eWScsOP9c112ZyLdWHi0FxHjI+4uVhKYp/gcdRmQ==",
-          "dev": true
-        }
       }
     },
     "graceful-fs": {
@@ -12381,13 +12471,6 @@
       "integrity": "sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==",
       "requires": {
         "react-is": "^16.7.0"
-      },
-      "dependencies": {
-        "react-is": {
-          "version": "16.13.1",
-          "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
-          "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
-        }
       }
     },
     "hosted-git-info": {
@@ -12443,9 +12526,9 @@
       }
     },
     "i18next": {
-      "version": "21.6.10",
-      "resolved": "https://registry.npmjs.org/i18next/-/i18next-21.6.10.tgz",
-      "integrity": "sha512-Xw+tEGQ61BF6SXtBlFffhM/YhJKHZf2cyDrcNK/l2dE6yVbkPkSasC3VhkAsHXX30vUJ0yG04WIUtf7UvwjOxg==",
+      "version": "21.6.11",
+      "resolved": "https://registry.npmjs.org/i18next/-/i18next-21.6.11.tgz",
+      "integrity": "sha512-tJ2+o0lVO+fhi8bPkCpBAeY1SgkqmQm5NzgPWCQssBrywJw98/o+Kombhty5nxQOpHtvMmsxcOopczUiH6bJxQ==",
       "requires": {
         "@babel/runtime": "^7.12.0"
       }
@@ -12490,9 +12573,9 @@
       }
     },
     "ignore": {
-      "version": "4.0.6",
-      "resolved": "https://registry.npmjs.org/ignore/-/ignore-4.0.6.tgz",
-      "integrity": "sha512-cyFDKrqc/YdcWFniJhzI42+AzS+gNwmUzOSFcRCQYwySuBBBy/KjuxWLZ/FHEH6Moq1NizMOBWyTcv8O4OZIMg==",
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.2.0.tgz",
+      "integrity": "sha512-CmxgYGiEPCLhfLnpPp1MoRmifwEIOgjcHXxOBjv7mY96c+eWScsOP9c112ZyLdWHi0FxHjI+4uVhKYp/gcdRmQ==",
       "dev": true
     },
     "ignore-walk": {
@@ -12525,9 +12608,9 @@
       "dev": true
     },
     "inflection": {
-      "version": "1.13.1",
-      "resolved": "https://registry.npmjs.org/inflection/-/inflection-1.13.1.tgz",
-      "integrity": "sha512-dldYtl2WlN0QDkIDtg8+xFwOS2Tbmp12t1cHa5/YClU6ZQjTFm7B66UcVbh9NQB+HvT5BAd2t5+yKsBkw5pcqA=="
+      "version": "1.13.2",
+      "resolved": "https://registry.npmjs.org/inflection/-/inflection-1.13.2.tgz",
+      "integrity": "sha512-cmZlljCRTBFouT8UzMzrGcVEvkv6D/wBdcdKG7J1QH5cXjtU75Dm+P27v9EKu/Y43UYyCJd1WC4zLebRrC8NBw=="
     },
     "inflight": {
       "version": "1.0.6",
@@ -12822,15 +12905,15 @@
       "optional": true
     },
     "jest-diff": {
-      "version": "27.4.6",
-      "resolved": "https://registry.npmjs.org/jest-diff/-/jest-diff-27.4.6.tgz",
-      "integrity": "sha512-zjaB0sh0Lb13VyPsd92V7HkqF6yKRH9vm33rwBt7rPYrpQvS1nCvlIy2pICbKta+ZjWngYLNn4cCK4nyZkjS/w==",
+      "version": "27.5.0",
+      "resolved": "https://registry.npmjs.org/jest-diff/-/jest-diff-27.5.0.tgz",
+      "integrity": "sha512-zztvHDCq/QcAVv+o6rts0reupSOxyrX+KLQEOMWCW2trZgcBFgp/oTK7hJCGpXvEIqKrQzyQlaPKn9W04+IMQg==",
       "dev": true,
       "requires": {
         "chalk": "^4.0.0",
-        "diff-sequences": "^27.4.0",
-        "jest-get-type": "^27.4.0",
-        "pretty-format": "^27.4.6"
+        "diff-sequences": "^27.5.0",
+        "jest-get-type": "^27.5.0",
+        "pretty-format": "^27.5.0"
       },
       "dependencies": {
         "ansi-styles": {
@@ -12885,9 +12968,9 @@
       }
     },
     "jest-get-type": {
-      "version": "27.4.0",
-      "resolved": "https://registry.npmjs.org/jest-get-type/-/jest-get-type-27.4.0.tgz",
-      "integrity": "sha512-tk9o+ld5TWq41DkK14L4wox4s2D9MtTpKaAVzXfr5CUKm5ZK2ExcaFE0qls2W71zE/6R2TxxrK9w2r6svAFDBQ==",
+      "version": "27.5.0",
+      "resolved": "https://registry.npmjs.org/jest-get-type/-/jest-get-type-27.5.0.tgz",
+      "integrity": "sha512-Vp6O8a52M/dahXRG/E0EJuWQROps2mDQ0sJYPgO8HskhdLwj9ajgngy2OAqZgV6e/RcU67WUHq6TgfvJb8flbA==",
       "dev": true
     },
     "jest-matcher-utils": {
@@ -12954,18 +13037,18 @@
       }
     },
     "jest-message-util": {
-      "version": "27.4.6",
-      "resolved": "https://registry.npmjs.org/jest-message-util/-/jest-message-util-27.4.6.tgz",
-      "integrity": "sha512-0p5szriFU0U74czRSFjH6RyS7UYIAkn/ntwMuOwTGWrQIOh5NzXXrq72LOqIkJKKvFbPq+byZKuBz78fjBERBA==",
+      "version": "27.5.0",
+      "resolved": "https://registry.npmjs.org/jest-message-util/-/jest-message-util-27.5.0.tgz",
+      "integrity": "sha512-lfbWRhTtmZMEHPAtl0SrvNzK1F4UnVNMHOliRQT2BJ4sBFzIb0gBCHA4ebWD4o6l1fUyvDPxM01K9OIMQTAdQw==",
       "dev": true,
       "requires": {
         "@babel/code-frame": "^7.12.13",
-        "@jest/types": "^27.4.2",
+        "@jest/types": "^27.5.0",
         "@types/stack-utils": "^2.0.0",
         "chalk": "^4.0.0",
-        "graceful-fs": "^4.2.4",
+        "graceful-fs": "^4.2.9",
         "micromatch": "^4.0.4",
-        "pretty-format": "^27.4.6",
+        "pretty-format": "^27.5.0",
         "slash": "^3.0.0",
         "stack-utils": "^2.0.3"
       },
@@ -13022,9 +13105,9 @@
       }
     },
     "jest-regex-util": {
-      "version": "27.4.0",
-      "resolved": "https://registry.npmjs.org/jest-regex-util/-/jest-regex-util-27.4.0.tgz",
-      "integrity": "sha512-WeCpMpNnqJYMQoOjm1nTtsgbR4XHAk1u00qDoNBQoykM280+/TmgA5Qh5giC1ecy6a5d4hbSsHzpBtu5yvlbEg==",
+      "version": "27.5.0",
+      "resolved": "https://registry.npmjs.org/jest-regex-util/-/jest-regex-util-27.5.0.tgz",
+      "integrity": "sha512-e9LqSd6HsDsqd7KS3rNyYwmQAaG9jq4U3LbnwVxN/y3nNlDzm2OFs596uo9zrUY+AV1opXq6ome78tRDUCRWfA==",
       "dev": true
     },
     "jpeg-js": {
@@ -13315,9 +13398,9 @@
       "dev": true
     },
     "minimatch": {
-      "version": "3.0.4",
-      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.0.4.tgz",
-      "integrity": "sha512-yJHVQEhyqPLUTgt9B83PXu6W3rx4MvvHvSUvToogpwoGDOUQ+yDrR0HRot+yOCdCO7u4hX3pWft6kWBBcqh0UA==",
+      "version": "3.0.5",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.0.5.tgz",
+      "integrity": "sha512-tUpxzX0VAzJHjLu0xUfFv1gwVp9ba3IOuRAVH2EGuRW8a5emA2FlACLqiT/lDVtS1W+TGNwqz3sWaNyLgDJWuw==",
       "requires": {
         "brace-expansion": "^1.1.7"
       }
@@ -13446,6 +13529,20 @@
             "picocolors": "^1.0.0",
             "source-map-js": "^1.0.1"
           }
+        },
+        "styled-jsx": {
+          "version": "5.0.0",
+          "resolved": "https://registry.npmjs.org/styled-jsx/-/styled-jsx-5.0.0.tgz",
+          "integrity": "sha512-qUqsWoBquEdERe10EW8vLp3jT25s/ssG1/qX5gZ4wu15OZpmSMFI2v+fWlRhLfykA5rFtlJ1ME8A8pm/peV4WA==",
+          "requires": {}
+        },
+        "use-subscription": {
+          "version": "1.5.1",
+          "resolved": "https://registry.npmjs.org/use-subscription/-/use-subscription-1.5.1.tgz",
+          "integrity": "sha512-Xv2a1P/yReAjAbhylMfFplFKj9GssgTwN7RlcTxBujFQcloStWNDQdc4g4NRWH9xS4i/FDk04vQBptAXoF3VcA==",
+          "requires": {
+            "object-assign": "^4.1.1"
+          }
         }
       }
     },
@@ -13461,6 +13558,18 @@
         "i18next": "^21.5.3",
         "i18next-fs-backend": "^1.0.7",
         "react-i18next": "^11.8.13"
+      },
+      "dependencies": {
+        "react-i18next": {
+          "version": "11.15.3",
+          "resolved": "https://registry.npmjs.org/react-i18next/-/react-i18next-11.15.3.tgz",
+          "integrity": "sha512-RSUEM4So3Tu2JHV0JsZ5Yje+4nz66YViMfPZoywxOy0xyn3L7tE2CHvJ7Y9LUsrTU7vGmZ5bwb8PpjnkatdIxg==",
+          "requires": {
+            "@babel/runtime": "^7.14.5",
+            "html-escaper": "^2.0.2",
+            "html-parse-stringify": "^3.0.1"
+          }
+        }
       }
     },
     "node-addon-api": {
@@ -13871,20 +13980,12 @@
       }
     },
     "p-limit": {
-      "version": "2.3.0",
-      "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-2.3.0.tgz",
-      "integrity": "sha512-//88mFWSJx8lxCzwdAABTJL2MyWB12+eIY7MDL2SqLmAkeKU9qxRvWuSyTjm3FUmpBEMuFfckAIqEaVGUDxb6w==",
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-1.3.0.tgz",
+      "integrity": "sha512-vvcXsLAJ9Dr5rQOPk7toZQZJApBl2K4J6dANSsEuh6QI41JYcsS/qhTGa9ErIUUgK3WNQoJYvylxvjqmiqEA9Q==",
       "dev": true,
       "requires": {
-        "p-try": "^2.0.0"
-      },
-      "dependencies": {
-        "p-try": {
-          "version": "2.2.0",
-          "resolved": "https://registry.npmjs.org/p-try/-/p-try-2.2.0.tgz",
-          "integrity": "sha512-R4nPAVTAU0B9D35/Gk3uJf/7XYbQcyohSKdvAxIRSNghFl4e71hVoGnBNQz9cWaXxO2I10KTC+3jMdvvoKw6dQ==",
-          "dev": true
-        }
+        "p-try": "^1.0.0"
       }
     },
     "p-locate": {
@@ -13894,17 +13995,6 @@
       "dev": true,
       "requires": {
         "p-limit": "^1.1.0"
-      },
-      "dependencies": {
-        "p-limit": {
-          "version": "1.3.0",
-          "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-1.3.0.tgz",
-          "integrity": "sha512-vvcXsLAJ9Dr5rQOPk7toZQZJApBl2K4J6dANSsEuh6QI41JYcsS/qhTGa9ErIUUgK3WNQoJYvylxvjqmiqEA9Q==",
-          "dev": true,
-          "requires": {
-            "p-try": "^1.0.0"
-          }
-        }
       }
     },
     "p-try": {
@@ -14019,9 +14109,9 @@
       "dev": true
     },
     "pirates": {
-      "version": "4.0.4",
-      "resolved": "https://registry.npmjs.org/pirates/-/pirates-4.0.4.tgz",
-      "integrity": "sha512-ZIrVPH+A52Dw84R0L3/VS9Op04PuQ2SEoJL6bkshmiTic/HldyW9Tf7oH5mhJZBK7NmDx27vSMrYEXPXclpDKw==",
+      "version": "4.0.5",
+      "resolved": "https://registry.npmjs.org/pirates/-/pirates-4.0.5.tgz",
+      "integrity": "sha512-8V9+HQPupnaXMA23c5hvl69zXvTwTzyAYasnkb0Tts4XvO4CliqONMOnvlq26rkhLC3nWDFBJf73LU1e1VZLaQ==",
       "dev": true
     },
     "pixelmatch": {
@@ -14069,6 +14159,15 @@
             "path-exists": "^3.0.0"
           }
         },
+        "p-limit": {
+          "version": "2.3.0",
+          "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-2.3.0.tgz",
+          "integrity": "sha512-//88mFWSJx8lxCzwdAABTJL2MyWB12+eIY7MDL2SqLmAkeKU9qxRvWuSyTjm3FUmpBEMuFfckAIqEaVGUDxb6w==",
+          "dev": true,
+          "requires": {
+            "p-try": "^2.0.0"
+          }
+        },
         "p-locate": {
           "version": "3.0.0",
           "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-3.0.0.tgz",
@@ -14077,6 +14176,12 @@
           "requires": {
             "p-limit": "^2.0.0"
           }
+        },
+        "p-try": {
+          "version": "2.2.0",
+          "resolved": "https://registry.npmjs.org/p-try/-/p-try-2.2.0.tgz",
+          "integrity": "sha512-R4nPAVTAU0B9D35/Gk3uJf/7XYbQcyohSKdvAxIRSNghFl4e71hVoGnBNQz9cWaXxO2I10KTC+3jMdvvoKw6dQ==",
+          "dev": true
         }
       }
     },
@@ -14186,9 +14291,9 @@
       "dev": true
     },
     "pretty-format": {
-      "version": "27.4.6",
-      "resolved": "https://registry.npmjs.org/pretty-format/-/pretty-format-27.4.6.tgz",
-      "integrity": "sha512-NblstegA1y/RJW2VyML+3LlpFjzx62cUrtBIKIWDXEDkjNeleA7Od7nrzcs/VLQvAeV4CgSYhrN39DRN88Qi/g==",
+      "version": "27.5.0",
+      "resolved": "https://registry.npmjs.org/pretty-format/-/pretty-format-27.5.0.tgz",
+      "integrity": "sha512-xEi6BRPZ+J1AIS4BAtFC/+rh5jXlXObGZjx5+OSpM95vR/PGla78bFVHMy5GdZjP9wk3AHAMHROXq/r69zXltw==",
       "dev": true,
       "requires": {
         "ansi-regex": "^5.0.1",
@@ -14201,6 +14306,12 @@
           "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-5.2.0.tgz",
           "integrity": "sha512-Cxwpt2SfTzTtXcfOlzGEee8O+c+MmUgGrNiBcXnuWxuFJHe6a5Hz7qwhwe5OgaSYI0IJvkLqWX1ASG+cJOkEiA==",
           "dev": true
+        },
+        "react-is": {
+          "version": "17.0.2",
+          "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
+          "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==",
+          "dev": true
         }
       }
     },
@@ -14229,13 +14340,6 @@
         "loose-envify": "^1.4.0",
         "object-assign": "^4.1.1",
         "react-is": "^16.13.1"
-      },
-      "dependencies": {
-        "react-is": {
-          "version": "16.13.1",
-          "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
-          "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
-        }
       }
     },
     "proper-lockfile": {
@@ -14393,21 +14497,10 @@
         "prop-types": "^15.8.1"
       }
     },
-    "react-i18next": {
-      "version": "11.15.3",
-      "resolved": "https://registry.npmjs.org/react-i18next/-/react-i18next-11.15.3.tgz",
-      "integrity": "sha512-RSUEM4So3Tu2JHV0JsZ5Yje+4nz66YViMfPZoywxOy0xyn3L7tE2CHvJ7Y9LUsrTU7vGmZ5bwb8PpjnkatdIxg==",
-      "requires": {
-        "@babel/runtime": "^7.14.5",
-        "html-escaper": "^2.0.2",
-        "html-parse-stringify": "^3.0.1"
-      }
-    },
     "react-is": {
-      "version": "17.0.2",
-      "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
-      "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==",
-      "dev": true
+      "version": "16.13.1",
+      "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
+      "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
     },
     "react-toastify": {
       "version": "8.1.1",
@@ -14467,6 +14560,15 @@
             "p-locate": "^4.1.0"
           }
         },
+        "p-limit": {
+          "version": "2.3.0",
+          "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-2.3.0.tgz",
+          "integrity": "sha512-//88mFWSJx8lxCzwdAABTJL2MyWB12+eIY7MDL2SqLmAkeKU9qxRvWuSyTjm3FUmpBEMuFfckAIqEaVGUDxb6w==",
+          "dev": true,
+          "requires": {
+            "p-try": "^2.0.0"
+          }
+        },
         "p-locate": {
           "version": "4.1.0",
           "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-4.1.0.tgz",
@@ -14476,6 +14578,12 @@
             "p-limit": "^2.2.0"
           }
         },
+        "p-try": {
+          "version": "2.2.0",
+          "resolved": "https://registry.npmjs.org/p-try/-/p-try-2.2.0.tgz",
+          "integrity": "sha512-R4nPAVTAU0B9D35/Gk3uJf/7XYbQcyohSKdvAxIRSNghFl4e71hVoGnBNQz9cWaXxO2I10KTC+3jMdvvoKw6dQ==",
+          "dev": true
+        },
         "path-exists": {
           "version": "4.0.0",
           "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-4.0.0.tgz",
@@ -14495,6 +14603,15 @@
         "util-deprecate": "^1.0.1"
       }
     },
+    "readdirp": {
+      "version": "3.6.0",
+      "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz",
+      "integrity": "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==",
+      "dev": true,
+      "requires": {
+        "picomatch": "^2.2.1"
+      }
+    },
     "reflect-metadata": {
       "version": "0.1.13",
       "resolved": "https://registry.npmjs.org/reflect-metadata/-/reflect-metadata-0.1.13.tgz",
@@ -14622,6 +14739,14 @@
         "tough-cookie": "~2.5.0",
         "tunnel-agent": "^0.6.0",
         "uuid": "^3.3.2"
+      },
+      "dependencies": {
+        "uuid": {
+          "version": "3.4.0",
+          "resolved": "https://registry.npmjs.org/uuid/-/uuid-3.4.0.tgz",
+          "integrity": "sha512-HjSDRw6gZE5JMggctHBcjVak08+KEVhSIiDzFnT9S9aegmp85S/bReBVTb4QTFaRNptJ9kuYaNhnbNEOkbKb/A==",
+          "optional": true
+        }
       }
     },
     "reselect": {
@@ -14631,12 +14756,12 @@
       "dev": true
     },
     "resolve": {
-      "version": "1.21.0",
-      "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.21.0.tgz",
-      "integrity": "sha512-3wCbTpk5WJlyE4mSOtDLhqQmGFi0/TD9VPwmiolnk8U0wRgMEktqCXd3vy5buTO3tljvalNvKrjHEfrd2WpEKA==",
+      "version": "1.22.0",
+      "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.0.tgz",
+      "integrity": "sha512-Hhtrw0nLeSrFQ7phPp4OOcVjLPIeMnRlr5mcnVuMe7M/7eBn98A3hmFRLoFo3DLZkivSYwhRUJTyPyWAk56WLw==",
       "dev": true,
       "requires": {
-        "is-core-module": "^2.8.0",
+        "is-core-module": "^2.8.1",
         "path-parse": "^1.0.7",
         "supports-preserve-symlinks-flag": "^1.0.0"
       }
@@ -14765,11 +14890,6 @@
           "requires": {
             "lru-cache": "^6.0.0"
           }
-        },
-        "uuid": {
-          "version": "8.3.2",
-          "resolved": "https://registry.npmjs.org/uuid/-/uuid-8.3.2.tgz",
-          "integrity": "sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg=="
         }
       }
     },
@@ -14784,21 +14904,6 @@
       "integrity": "sha512-+vhugJk1LLq5EVeLWi/UrkpGLrJGVD0R3UpEGHYouf6qeLRBL1V7QCIZr0pHZA57+nJPoK4PPTD+sGHS11uvvw==",
       "requires": {
         "glob": "7.2.0"
-      },
-      "dependencies": {
-        "glob": {
-          "version": "7.2.0",
-          "resolved": "https://registry.npmjs.org/glob/-/glob-7.2.0.tgz",
-          "integrity": "sha512-lmLf6gtyrPq8tTjSmrO94wBeQbFR3HbLHbuyD69wuyQkImp2hWqMGB47OX65FBkPffO641IP9jWa1z4ivqG26Q==",
-          "requires": {
-            "fs.realpath": "^1.0.0",
-            "inflight": "^1.0.4",
-            "inherits": "2",
-            "minimatch": "^3.0.4",
-            "once": "^1.3.0",
-            "path-is-absolute": "^1.0.0"
-          }
-        }
       }
     },
     "set-blocking": {
@@ -14833,9 +14938,9 @@
       }
     },
     "signal-exit": {
-      "version": "3.0.6",
-      "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-3.0.6.tgz",
-      "integrity": "sha512-sDl4qMFpijcGw22U5w63KmD3cZJfBuFlVNbVMKje2keoKML7X2UzWbc4XrmEbDwg0NXJc3yv4/ox7b+JWb57kQ=="
+      "version": "3.0.7",
+      "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-3.0.7.tgz",
+      "integrity": "sha512-wnD2ZE+l+SPC/uoS0vXeE9L1+0wuaMqKlfz9AMUo38JsyLSBWSFcHR1Rri62LZc12vLr1gb3jl7iwQhgwpAbGQ=="
     },
     "slash": {
       "version": "3.0.0",
@@ -14855,13 +14960,13 @@
       "dev": true
     },
     "socks": {
-      "version": "2.6.1",
-      "resolved": "https://registry.npmjs.org/socks/-/socks-2.6.1.tgz",
-      "integrity": "sha512-kLQ9N5ucj8uIcxrDwjm0Jsqk06xdpBjGNQtpXy4Q8/QY2k+fY7nZH8CARy+hkbG+SGAovmzzuauCpBlb8FrnBA==",
+      "version": "2.6.2",
+      "resolved": "https://registry.npmjs.org/socks/-/socks-2.6.2.tgz",
+      "integrity": "sha512-zDZhHhZRY9PxRruRMR7kMhnf3I8hDs4S3f9RecfnGxvcBHQcKcIH/oUcEWffsfl1XxdYlA7nnlGbbTvPz9D8gA==",
       "dev": true,
       "requires": {
         "ip": "^1.1.5",
-        "smart-buffer": "^4.1.0"
+        "smart-buffer": "^4.2.0"
       }
     },
     "socks-proxy-agent": {
@@ -15100,12 +15205,6 @@
       "integrity": "sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==",
       "dev": true
     },
-    "styled-jsx": {
-      "version": "5.0.0",
-      "resolved": "https://registry.npmjs.org/styled-jsx/-/styled-jsx-5.0.0.tgz",
-      "integrity": "sha512-qUqsWoBquEdERe10EW8vLp3jT25s/ssG1/qX5gZ4wu15OZpmSMFI2v+fWlRhLfykA5rFtlJ1ME8A8pm/peV4WA==",
-      "requires": {}
-    },
     "supports-color": {
       "version": "5.5.0",
       "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
@@ -15174,33 +15273,6 @@
             "supports-color": "^7.1.0"
           }
         },
-        "chokidar": {
-          "version": "3.5.3",
-          "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.5.3.tgz",
-          "integrity": "sha512-Dr3sfKRP6oTcjf2JmUmFJfeVMvXBdegxB0iVQ5eb2V10uFJUCAS8OByZdVAyVb8xXNz3GjjTgj9kLWsZTqE6kw==",
-          "dev": true,
-          "requires": {
-            "anymatch": "~3.1.2",
-            "braces": "~3.0.2",
-            "fsevents": "~2.3.2",
-            "glob-parent": "~5.1.2",
-            "is-binary-path": "~2.1.0",
-            "is-glob": "~4.0.1",
-            "normalize-path": "~3.0.0",
-            "readdirp": "~3.6.0"
-          },
-          "dependencies": {
-            "glob-parent": {
-              "version": "5.1.2",
-              "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
-              "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
-              "dev": true,
-              "requires": {
-                "is-glob": "^4.0.1"
-              }
-            }
-          }
-        },
         "color-convert": {
           "version": "2.0.1",
           "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
@@ -15222,15 +15294,6 @@
           "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
           "dev": true
         },
-        "readdirp": {
-          "version": "3.6.0",
-          "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz",
-          "integrity": "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==",
-          "dev": true,
-          "requires": {
-            "picomatch": "^2.2.1"
-          }
-        },
         "supports-color": {
           "version": "7.2.0",
           "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
@@ -15428,10 +15491,9 @@
       }
     },
     "tslib": {
-      "version": "1.14.1",
-      "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz",
-      "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==",
-      "dev": true
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.3.1.tgz",
+      "integrity": "sha512-77EbyPPpMz+FRFRuAFlWMtmgUWGe9UOG2Z25NqCwiIjRhOf5iKGuzSe5P2w1laq+FkRy4p+PCuVkJSGkzTEKVw=="
     },
     "tsutils": {
       "version": "3.21.0",
@@ -15440,6 +15502,14 @@
       "dev": true,
       "requires": {
         "tslib": "^1.8.1"
+      },
+      "dependencies": {
+        "tslib": {
+          "version": "1.14.1",
+          "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz",
+          "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==",
+          "dev": true
+        }
       }
     },
     "tunnel-agent": {
@@ -15537,24 +15607,15 @@
         "punycode": "^2.1.0"
       }
     },
-    "use-subscription": {
-      "version": "1.5.1",
-      "resolved": "https://registry.npmjs.org/use-subscription/-/use-subscription-1.5.1.tgz",
-      "integrity": "sha512-Xv2a1P/yReAjAbhylMfFplFKj9GssgTwN7RlcTxBujFQcloStWNDQdc4g4NRWH9xS4i/FDk04vQBptAXoF3VcA==",
-      "requires": {
-        "object-assign": "^4.1.1"
-      }
-    },
     "util-deprecate": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
       "integrity": "sha1-RQ1Nyfpw3nMnYvvS1KKJgUGaDM8="
     },
     "uuid": {
-      "version": "3.4.0",
-      "resolved": "https://registry.npmjs.org/uuid/-/uuid-3.4.0.tgz",
-      "integrity": "sha512-HjSDRw6gZE5JMggctHBcjVak08+KEVhSIiDzFnT9S9aegmp85S/bReBVTb4QTFaRNptJ9kuYaNhnbNEOkbKb/A==",
-      "optional": true
+      "version": "8.3.2",
+      "resolved": "https://registry.npmjs.org/uuid/-/uuid-8.3.2.tgz",
+      "integrity": "sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg=="
     },
     "v8-compile-cache": {
       "version": "2.3.0",
@@ -15801,9 +15862,9 @@
       }
     },
     "ws": {
-      "version": "7.5.6",
-      "resolved": "https://registry.npmjs.org/ws/-/ws-7.5.6.tgz",
-      "integrity": "sha512-6GLgCqo2cy2A2rjCNFlxQS6ZljG/coZfZXclldI8FB/1G3CCI36Zd8xy2HrFVACi8tfk5XrgLQEk+P0Tnz9UcA==",
+      "version": "7.5.7",
+      "resolved": "https://registry.npmjs.org/ws/-/ws-7.5.7.tgz",
+      "integrity": "sha512-KMvVuFzpKBuiIXW3E4u3mySRO2/mCHSyZDJQM5NQ9Q9KHWHWh0NHgfbRMLLrceUK5qAL4ytALJbpRMjixFZh8A==",
       "dev": true,
       "requires": {}
     },
diff --git a/package.json b/package.json
@@ -25,7 +25,7 @@
     "next": "12.0.10",
     "next-i18next": "10.2.0",
     "node-localstorage": "2.2.1",
-    "png-chunks-extract": "^1.0.0",
+    "png-chunks-extract": "1.0.0",
     "prop-types": "15.8.1",
     "react": "17.0.2",
     "react-blurhash": "0.1.3",
@@ -60,4 +60,4 @@
   "optionalDependencies": {
     "fsevents": "2.3.2"
   }
-}
-\ No newline at end of file
+}
diff --git a/pages/_app.tsx b/pages/_app.tsx
@@ -6,6 +6,13 @@ import React from 'react';
 import Head from 'next/head';
 import { ToastContainer } from 'react-toastify';
 import { appWithTranslation } from 'next-i18next';
+import Footer from '../components/Footer';
+import dynamic from 'next/dynamic';
+
+const HeaderNoSSR = dynamic(
+  () => import('../components/Header'),
+  { ssr: false }
+);
 
 function MyApp({ Component, pageProps }: AppProps) {
   return (
@@ -23,8 +30,13 @@ function MyApp({ Component, pageProps }: AppProps) {
             guest_client: guest_client,
             is_generating_guest: false,
           }}
-        >
-          <Component {...pageProps} />
+        ><div className='min-h-full flex flex-col justify-between bg-[#f8f8f8] dark:bg-[#06070D]'>
+            <HeaderNoSSR></HeaderNoSSR>
+            <main className='mb-auto lg:pt-20 pt-52 z-0'>
+              <Component {...pageProps} />
+            </main>
+            <Footer></Footer>
+          </div>
         </ClientContext.Provider>
       </React.StrictMode>
       <ToastContainer
diff --git a/pages/_document.tsx b/pages/_document.tsx
@@ -22,4 +22,4 @@ class MyDocument extends Document {
     }
 }
 
-export default MyDocument;;
-\ No newline at end of file
+export default MyDocument;
+\ No newline at end of file
diff --git a/pages/index.tsx b/pages/index.tsx
@@ -1,10 +1,8 @@
 import React, { PureComponent } from 'react';
 import { MatrixEventBase, MatrixImageEvents } from '../helpers/event_types';
 import Head from 'next/head';
-import Header from '../components/Header';
 import { client, ClientContext } from '../components/ClientContext';
 import FrontPageImage, { isImageGalleryEvent } from '../components/FrontPageImage';
-import Footer from '../components/Footer';
 import { GetServerSideProps, InferGetServerSidePropsType, } from 'next';
 import { get_data } from './api/directory';
 import { constMatrixArtServer } from '../helpers/matrix_client';
@@ -95,7 +93,7 @@ class Home extends PureComponent<Props, State>{
       }
     });
     return (
-      <div className='min-h-full flex flex-col justify-between bg-[#f8f8f8] dark:bg-[#06070D]'>
+      <>
         <Head>
           <title key="title">Matrix Art | {i18n?.t("Home")}</title>
           <meta property="og:title" content="Matrix Art | Home" key="og-title" />
@@ -103,22 +101,18 @@ class Home extends PureComponent<Props, State>{
           <script type="application/ld+json" dangerouslySetInnerHTML={{ __html: JSON.stringify(metadata) }} />
           <meta name="description" content="Matrix-Art is a Deviantart style application for posting media based on Matrix."></meta>
         </Head>
-        <Header></Header>
-        <main className='mb-auto lg:pt-20 pt-52 z-0'>
-          <div className='z-[100] sticky lg:top-20 top-[12.5rem] bg-[#fefefe]/[.95] dark:bg-[#12161D]'>
-            <div className='h-16 px-10 w-full relative grid grid-cols-[1fr_auto_1fr] items-center' id='section-grid'>
-              <h1 className='text-xl text-gray-900 dark:text-gray-200 font-bold'>{i18n?.t("Home")}</h1>
-            </div>
+        <div className='z-[100] sticky lg:top-20 top-[12.5rem] bg-[#fefefe]/[.95] dark:bg-[#12161D]'>
+          <div className='h-16 px-10 w-full relative grid grid-cols-[1fr_auto_1fr] items-center' id='section-grid'>
+            <h1 className='text-xl text-gray-900 dark:text-gray-200 font-bold'>{i18n?.t("Home")}</h1>
           </div>
-          <div className='m-10'>
-            <ul className='flex flex-wrap gap-1'>
-              {image_events.map(event => <FrontPageImage show_nsfw={false} event={event} key={(event as MatrixEventBase).event_id} />)}
-              <li className='grow-[10]'></li>
-            </ul>
-          </div>
-        </main>
-        <Footer></Footer>
-      </div>
+        </div>
+        <div className='m-10'>
+          <ul className='flex flex-wrap gap-1'>
+            {image_events.map(event => <FrontPageImage show_nsfw={false} event={event} key={(event as MatrixEventBase).event_id} />)}
+            <li className='grow-[10]'></li>
+          </ul>
+        </div>
+      </>
     );
   }
 
diff --git a/pages/login.tsx b/pages/login.tsx
@@ -7,8 +7,6 @@ import { NextRouter, withRouter } from "next/router";
 import { PureComponent, ReactNode } from "react";
 import { toast } from "react-toastify";
 import { ClientContext } from "../components/ClientContext";
-import Footer from "../components/Footer";
-import Header from "../components/Header";
 import { constMatrixArtServer } from "../helpers/matrix_client";
 
 type Props = {
@@ -113,24 +111,18 @@ class Login extends PureComponent<Props, State> {
         if (loading) {
             return (
                 <>
-                    <div className='min-h-full bg-[#f8f8f8] dark:bg-[#06070D]'>
-                        <Head>
-                            <title key="title">Matrix Art | {i18n?.t("Login")}</title>
-                            <meta property="og:title" content="Matrix Art | Login" key="og-title" />
-                            <meta property="og:type" content="website" key="og-type" />
-                        </Head>
-                        <Header></Header>
-                        <main className="min-h-full lg:pt-20 pt-56">
-                            <div className='z-[100] sticky lg:top-20 top-56 bg-[#fefefe]/[.95] dark:bg-[#14181E]/[.95]'>
-                                <div className='h-16 px-10 w-full relative grid grid-cols-[1fr_auto_1fr] items-center' id='section-grid'>
-                                    <h1 className='text-xl text-gray-900 dark:text-gray-200 font-bold'>{i18n?.t("Log In")}</h1>
-                                </div>
-                            </div>
-                            <div className="mx-auto w-full">
-                                <div className="loader">{i18n?.t("Loading")}...</div>
-                            </div>
-                        </main>
-                        <Footer></Footer>
+                    <Head>
+                        <title key="title">Matrix Art | {i18n?.t("Login")}</title>
+                        <meta property="og:title" content="Matrix Art | Login" key="og-title" />
+                        <meta property="og:type" content="website" key="og-type" />
+                    </Head>
+                    <div className='z-[100] sticky lg:top-20 top-56 bg-[#fefefe]/[.95] dark:bg-[#14181E]/[.95]'>
+                        <div className='h-16 px-10 w-full relative grid grid-cols-[1fr_auto_1fr] items-center' id='section-grid'>
+                            <h1 className='text-xl text-gray-900 dark:text-gray-200 font-bold'>{i18n?.t("Log In")}</h1>
+                        </div>
+                    </div>
+                    <div className="mx-auto w-full">
+                        <div className="loader">{i18n?.t("Loading")}...</div>
                     </div>
                 </>
             );
@@ -138,70 +130,63 @@ class Login extends PureComponent<Props, State> {
         //TODO make better
         return (
             <>
-                <div className='min-h-full flex flex-col justify-between bg-[#f8f8f8] dark:bg-[#06070D]'>
-                    <Head>
-                        <title key="title">Matrix Art | {i18n?.t("Login")}</title>
-                        <meta property="og:title" content="Matrix Art | Login" key="og-title" />
-                        <meta property="og:type" content="website" key="og-type" />
-                    </Head>
-                    <Header></Header>
-
-                    <main className='mb-auto lg:pt-20 pt-56'>
-                        <div className='z-[100] sticky lg:top-20 top-56 bg-[#fefefe]/[.95] dark:bg-[#14181E]/[.95]'>
-                            <div className='h-16 px-10 w-full relative grid grid-cols-[1fr_auto_1fr] items-center' id='section-grid'>
-                                <h1 className='text-xl text-gray-900 dark:text-gray-200 font-bold'>{i18n?.t("Log In")}</h1>
+                <Head>
+                    <title key="title">Matrix Art | {i18n?.t("Login")}</title>
+                    <meta property="og:title" content="Matrix Art | Login" key="og-title" />
+                    <meta property="og:type" content="website" key="og-type" />
+                </Head>
+                <div className='z-[100] sticky lg:top-20 top-56 bg-[#fefefe]/[.95] dark:bg-[#14181E]/[.95]'>
+                    <div className='h-16 px-10 w-full relative grid grid-cols-[1fr_auto_1fr] items-center' id='section-grid'>
+                        <h1 className='text-xl text-gray-900 dark:text-gray-200 font-bold'>{i18n?.t("Log In")}</h1>
+                    </div>
+                </div>
+                <div className="flex items-center justify-center m-10">
+                    <form onSubmit={this.handleSubmit} className="w-96 grid grid-cols-1 gap-6">
+                        <div className="block">
+                            <div className="mt-2 flex justify-between items-center">
+                                <label className="inline-flex items-center">
+                                    <input className="cursor-pointer h-4 w-4" type="checkbox" name="showServerField" checked={showServerField} onChange={this.handleInputChange} />
+                                    <span className="ml-2 text-gray-700 dark:text-gray-400">{i18n?.t("Use custom Server")}</span>
+                                </label>
+                                <Link href="/resetPassword"><a className="text-gray-900 dark:text-gray-200 hover:text-teal-400">{i18n?.t("Forgot Password")}</a></Link>
                             </div>
                         </div>
-                        <div className="flex items-center justify-center m-10">
-                            <form onSubmit={this.handleSubmit} className="w-96 grid grid-cols-1 gap-6">
-                                <div className="block">
-                                    <div className="mt-2 flex justify-between items-center">
-                                        <label className="inline-flex items-center">
-                                            <input className="cursor-pointer h-4 w-4" type="checkbox" name="showServerField" checked={showServerField} onChange={this.handleInputChange} />
-                                            <span className="ml-2 text-gray-700 dark:text-gray-400">{i18n?.t("Use custom Server")}</span>
-                                        </label>
-                                        <Link href="/resetPassword"><a className="text-gray-900 dark:text-gray-200 hover:text-teal-400">{i18n?.t("Forgot Password")}</a></Link>
-                                    </div>
-                                </div>
-
-                                <label style={{
-                                    transition: 'opacity 0.4s ease',
-                                    opacity: showServerField ? 1 : 0,
-                                    display: showServerField ? 'block' : 'none'
-                                }} id="homeserverField">
-                                    <span className="text-gray-900 dark:text-gray-200 visually-hidden">{i18n?.t("Homeserver:")}</span>
-                                    <div className="mt-1 w-full flex flex-row box-border items-center cursor-text">
-                                        <input placeholder={i18n?.t("Homeserver")} className="rounded py-1.5 px-2 min-w-[1.25rem] flex-[1] border-none placeholder:text-gray-900 text-gray-9000" type="text" name="serverUrl" value={serverUrl} onChange={this.handleInputChange} />
-                                    </div>
-                                </label>
 
-                                <label className="block">
-                                    <span className="text-gray-900 dark:text-gray-200 visually-hidden">{i18n?.t("Username:")}</span>
-                                    <div className="mt-1 w-full flex flex-row box-border items-center cursor-text duration-300">
-                                        <input placeholder={i18n?.t("Username")} autoComplete="username" className="rounded py-1.5 px-2 min-w-[1.25rem] flex-[1] border-none placeholder:text-gray-900 text-gray-900" type="text" name="mxid" value={mxid} onChange={this.handleInputChange} />
-                                    </div>
-                                </label>
-                                <label className="block">
-                                    <span className="text-gray-900 dark:text-gray-200 visually-hidden">{i18n?.t("Password:")}</span>
-                                    <div className="mt-1 w-full flex flex-row box-border items-center cursor-text duration-300">
-                                        <input placeholder={i18n?.t("Password")} autoComplete="current-password" className="rounded py-1.5 px-2 min-w-[1.25rem] flex-[1] border-none placeholder:text-gray-900 text-gray-900" type="password" name="password" value={password} onChange={this.handleInputChange} />
-                                    </div>
-                                </label>
+                        <label style={{
+                            transition: 'opacity 0.4s ease',
+                            opacity: showServerField ? 1 : 0,
+                            display: showServerField ? 'block' : 'none'
+                        }} id="homeserverField">
+                            <span className="text-gray-900 dark:text-gray-200 visually-hidden">{i18n?.t("Homeserver:")}</span>
+                            <div className="mt-1 w-full flex flex-row box-border items-center cursor-text">
+                                <input placeholder={i18n?.t("Homeserver")} className="rounded py-1.5 px-2 min-w-[1.25rem] flex-[1] border-none placeholder:text-gray-900 text-gray-9000" type="text" name="serverUrl" value={serverUrl} onChange={this.handleInputChange} />
+                            </div>
+                        </label>
+
+                        <label className="block">
+                            <span className="text-gray-900 dark:text-gray-200 visually-hidden">{i18n?.t("Username:")}</span>
+                            <div className="mt-1 w-full flex flex-row box-border items-center cursor-text duration-300">
+                                <input placeholder={i18n?.t("Username")} autoComplete="username" className="rounded py-1.5 px-2 min-w-[1.25rem] flex-[1] border-none placeholder:text-gray-900 text-gray-900" type="text" name="mxid" value={mxid} onChange={this.handleInputChange} />
+                            </div>
+                        </label>
+                        <label className="block">
+                            <span className="text-gray-900 dark:text-gray-200 visually-hidden">{i18n?.t("Password:")}</span>
+                            <div className="mt-1 w-full flex flex-row box-border items-center cursor-text duration-300">
+                                <input placeholder={i18n?.t("Password")} autoComplete="current-password" className="rounded py-1.5 px-2 min-w-[1.25rem] flex-[1] border-none placeholder:text-gray-900 text-gray-900" type="password" name="password" value={password} onChange={this.handleInputChange} />
+                            </div>
+                        </label>
 
-                                <div className="block">
-                                    <div className="mt-2 flex justify-between items-center">
-                                        <label className="inline-flex items-center">
-                                            <input className="cursor-pointer h-4 w-4" type="checkbox" name="generateProfile" checked={generateProfile} onChange={this.handleInputChange} />
-                                            <span className="ml-2 text-gray-700 dark:text-gray-400">{i18n?.t("Create a full profile? (Cant be done later currently. This is WIP)")}</span>
-                                        </label>
-                                    </div>
-                                </div>
-
-                                <input className="bg-teal-400 hover:bg-teal-500 cursor-pointer h-10 rounded dark:text-gray-900 text-gray-200" type="submit" value="Log In" />
-                            </form>
+                        <div className="block">
+                            <div className="mt-2 flex justify-between items-center">
+                                <label className="inline-flex items-center">
+                                    <input className="cursor-pointer h-4 w-4" type="checkbox" name="generateProfile" checked={generateProfile} onChange={this.handleInputChange} />
+                                    <span className="ml-2 text-gray-700 dark:text-gray-400">{i18n?.t("Create a full profile? (Cant be done later currently. This is WIP)")}</span>
+                                </label>
+                            </div>
                         </div>
-                    </main>
-                    <Footer></Footer>
+
+                        <input className="bg-teal-400 hover:bg-teal-500 cursor-pointer h-10 rounded dark:text-gray-900 text-gray-200" type="submit" value="Log In" />
+                    </form>
                 </div>
             </>
         );
diff --git a/pages/post/[id].tsx b/pages/post/[id].tsx
@@ -9,13 +9,11 @@ import Head from "next/head";
 import { NextRouter, withRouter } from "next/router";
 import { PureComponent, ReactNode } from "react";
 import { client, ClientContext } from "../../components/ClientContext";
-import Header from "../../components/Header";
 import { ImageEvent, ImageGalleryEvent, MatrixEventBase, MatrixImageEvents } from "../../helpers/event_types";
 import { constMatrixArtServer } from "../../helpers/matrix_client";
 import { get_data } from "../api/directory";
 import { isImageEvent, isImageGalleryEvent } from '../../components/FrontPageImage';
 import Link from 'next/link';
-import Footer from '../../components/Footer';
 import { Blurhash } from 'react-blurhash';
 import { serverSideTranslations } from 'next-i18next/serverSideTranslations';
 import { i18n } from 'next-i18next';
@@ -184,7 +182,7 @@ class Post extends PureComponent<Props, State> {
 
         if (!hasFullyLoaded) {
             return (
-                <div className='min-h-full bg-[#fefefe]/[.95] dark:bg-[#14181E]/[.95]'>
+                <>
                     <Head>
                         <title key="title">Matrix Art | {i18n?.t("Post not Found")}</title>
                         <meta property="og:title" content="Matrix Art | Post not Found" key="og-title" />
@@ -192,19 +190,16 @@ class Post extends PureComponent<Props, State> {
                         <meta name="twitter:title" content="Matrix Art | Post not Found" key="og-twitter-title" />
                         <meta property="og:type" content="website" key="og-type" />
                     </Head>
-                    <Header></Header>
-                    <main className='w-full lg:pt-20 pt-52 z-0'>
-                        <div className="m-0 w-full">
-                            <div className="loader">{i18n?.t("Loading")}...</div>
-                        </div>
-                    </main>
-                </div>
+                    <div className="m-0 w-full">
+                        <div className="loader">{i18n?.t("Loading")}...</div>
+                    </div>
+                </>
             );
         }
 
         if (!this.props.event_id || !this.props.event_id?.startsWith("$")) {
             return (
-                <div className="min-h-full flex flex-col justify-between bg-[#fefefe]/[.95] dark:bg-[#14181E]/[.95]">
+                <>
                     <Head>
                         <title key="title">Matrix Art | {i18n?.t("Post not Found")}</title>
                         <meta property="og:title" content="Matrix Art | Post not Found" key="og-title" />
@@ -212,12 +207,8 @@ class Post extends PureComponent<Props, State> {
                         <meta name="twitter:title" content="Matrix Art | Post not Found" key="og-twitter-title" />
                         <meta property="og:type" content="website" key="og-type" />
                     </Head>
-                    <Header></Header>
-                    <main className='mb-auto lg:pt-20 pt-56 z-0 flex items-center justify-center'>
-                        <h1 className="text-6xl text-gray-900 dark:text-gray-200 font-bold">{i18n?.t("The Post you wanted does not exist!")}</h1>
-                    </main>
-                    <Footer></Footer>
-                </div>
+                    <h1 className="text-6xl text-gray-900 dark:text-gray-200 font-bold">{i18n?.t("The Post you wanted does not exist!")}</h1>
+                </>
             );
         }
 
@@ -232,7 +223,7 @@ class Post extends PureComponent<Props, State> {
                 return (possible_html_caption.body && possible_html_caption.mimetype === "text/html") ? possible_html_caption.body : possible_text_caption["m.text"];
             })[0];
             return (
-                <div className="min-h-full flex flex-col justify-between bg-[#fefefe]/[.95] dark:bg-[#14181E]/[.95]">
+                <>
                     <Head>
                         <title key="title">Matrix Art | {post_title}</title>
                         <meta property="og:title" content={`Matrix Art | ${post_title}`} key="og-title" />
@@ -243,28 +234,23 @@ class Post extends PureComponent<Props, State> {
                         <meta name="citation_authors" content={displayname} />
                         <meta name="citation_journal_title" content="Matrix-Art" />
                     </Head>
-                    <Header></Header>
-
-                    <main className='mb-auto lg:pt-20 pt-56 z-0'>
-                        {isImageGalleryEvent(image_event) ? this.renderImageGalleryEvent(image_event, post_title) : (isImageEvent(image_event) ? this.renderSingleImageEvent(image_event, post_title) : <div key={(image_event as MatrixEventBase).event_id}></div>)}
-                        <div className="grow bg-[#f8f8f8] dark:bg-[#06070D] min-h-[25rem] flex flex-col items-center">
-                            <div className="flex flex-col items-start lg:min-w-[60rem] lg:w-[60rem]">
-                                <h1 className="my-4 text-6xl text-gray-900 dark:text-gray-200 font-bold">{post_title}</h1>
-                                <h3 className="cursor-pointer mt-0 mb-4 text-xl text-gray-900 dark:text-gray-200 font-normal inline-flex">
-                                    {avatar_url ? <span className="block object-cover rounded-full mr-4"> <img className="object-cover rounded-full" src={this.context.client.downloadLink(avatar_url)!} height="24" width="24" alt={displayname} title={displayname} /> </span> : undefined}
-                                    <Link href={"/profile/" + encodeURIComponent(image_event.sender)} passHref><span className='hover:text-teal-400'>{displayname}</span></Link>
-                                </h3>
-                                {isImageEvent(image_event) ? (image_event.content['matrixart.license'] ? <h3 className='cursor-pointer mt-0 mb-4 text-l text-gray-600 dark:text-gray-400 font-normal'>{i18n?.t("License:")} <a href={this.getLicenseUrl(image_event.content['matrixart.license'])} title={this.getLicenseName(image_event.content['matrixart.license'])}>{this.getLicenseName(image_event.content['matrixart.license'])}</a></h3> : undefined) : undefined}
-                                {isImageGalleryEvent(image_event) ? this.renderImageGalleryTags(image_event) : (isImageEvent(image_event) ? this.renderSingleImageTags(image_event) : <div key={(image_event as MatrixEventBase).event_id + "tags"}></div>)}
-                            </div>
+                    {isImageGalleryEvent(image_event) ? this.renderImageGalleryEvent(image_event, post_title) : (isImageEvent(image_event) ? this.renderSingleImageEvent(image_event, post_title) : <div key={(image_event as MatrixEventBase).event_id}></div>)}
+                    <div className="grow bg-[#f8f8f8] dark:bg-[#06070D] min-h-[25rem] flex flex-col items-center">
+                        <div className="flex flex-col items-start lg:min-w-[60rem] lg:w-[60rem]">
+                            <h1 className="my-4 text-6xl text-gray-900 dark:text-gray-200 font-bold">{post_title}</h1>
+                            <h3 className="cursor-pointer mt-0 mb-4 text-xl text-gray-900 dark:text-gray-200 font-normal inline-flex">
+                                {avatar_url ? <span className="block object-cover rounded-full mr-4"> <img className="object-cover rounded-full" src={this.context.client.downloadLink(avatar_url)!} height="24" width="24" alt={displayname} title={displayname} /> </span> : undefined}
+                                <Link href={"/profile/" + encodeURIComponent(image_event.sender)} passHref><span className='hover:text-teal-400'>{displayname}</span></Link>
+                            </h3>
+                            {isImageEvent(image_event) ? (image_event.content['matrixart.license'] ? <h3 className='cursor-pointer mt-0 mb-4 text-l text-gray-600 dark:text-gray-400 font-normal'>{i18n?.t("License:")} <a href={this.getLicenseUrl(image_event.content['matrixart.license'])} title={this.getLicenseName(image_event.content['matrixart.license'])}>{this.getLicenseName(image_event.content['matrixart.license'])}</a></h3> : undefined) : undefined}
+                            {isImageGalleryEvent(image_event) ? this.renderImageGalleryTags(image_event) : (isImageEvent(image_event) ? this.renderSingleImageTags(image_event) : <div key={(image_event as MatrixEventBase).event_id + "tags"}></div>)}
                         </div>
-                    </main>
-                    <Footer></Footer>
-                </div>
+                    </div>
+                </>
             );
         } else {
             return (
-                <div className="min-h-full flex flex-col justify-between bg-[#fefefe]/[.95] dark:bg-[#14181E]/[.95]">
+                <>
                     <Head>
                         <title key="title">Matrix Art | {i18n?.t("Post not Found")}</title>
                         <meta property="og:title" content="Matrix Art | Post not Found" key="og-title" />
@@ -272,12 +258,8 @@ class Post extends PureComponent<Props, State> {
                         <meta name="twitter:title" content="Matrix Art | Post not Found" key="og-twitter-title" />
                         <meta property="og:type" content="website" key="og-type" />
                     </Head>
-                    <Header></Header>
-                    <main className='mb-auto lg:pt-20 pt-56 z-0 flex items-center justify-center'>
-                        <h1 className="text-6xl text-gray-900 dark:text-gray-200 font-bold">{i18n?.t("The Post you wanted does not exist!")}</h1>
-                    </main>
-                    <Footer></Footer>
-                </div>
+                    <h1 className="text-6xl text-gray-900 dark:text-gray-200 font-bold">{i18n?.t("The Post you wanted does not exist!")}</h1>
+                </>
             );
         }
 
diff --git a/pages/profile/[userid].tsx b/pages/profile/[userid].tsx
@@ -8,9 +8,7 @@ import { PureComponent } from "react";
 import { toast } from "react-toastify";
 import { ClientContext } from "../../components/ClientContext";
 import { EditIcon } from "../../components/editIcon";
-import Footer from "../../components/Footer";
 import FrontPageImage from "../../components/FrontPageImage";
-import Header from "../../components/Header";
 import { UploadIcon } from "../../components/uploadIcon";
 import { BannerEvent, MatrixArtProfile, MatrixEvent, MatrixEventBase, MatrixImageEvents } from "../../helpers/event_types";
 import { constMatrixArtServer } from "../../helpers/matrix_client";
@@ -148,7 +146,7 @@ class Profile extends PureComponent<Props, State> {
 
     renderNotFound() {
         return (
-            <div className="min-h-full flex flex-col justify-between bg-[#fefefe]/[.95] dark:bg-[#14181E]/[.95]">
+            <>
                 <Head>
                     <title key="title">Matrix Art | {i18n?.t("User not Found")}</title>
                     <meta property="og:title" content="Matrix Art | User not Found" key="og-title" />
@@ -156,11 +154,8 @@ class Profile extends PureComponent<Props, State> {
                     <meta name="twitter:title" content="Matrix Art | User not Found" key="og-twitter-title" />
                     <meta property="og:type" content="website" key="og-type" />
                 </Head>
-                <Header></Header>
-                <main className='mb-auto lg:pt-20 pt-56 z-0 flex items-center justify-center'>
-                    <h1 className="text-6xl text-gray-900 dark:text-gray-200 font-bold">{i18n?.t("The User you wanted does not exist!")}</h1>
-                </main>
-            </div>
+                <h1 className="text-6xl text-gray-900 dark:text-gray-200 font-bold">{i18n?.t("The User you wanted does not exist!")}</h1>
+            </>
         );
     }
 
@@ -208,7 +203,7 @@ class Profile extends PureComponent<Props, State> {
         const image_events = events.filter((event) => (event.type == "m.image_gallery" || event.type == "m.image") && !event.unsigned?.redacted_because) as MatrixImageEvents[];
         // TODO opengraph shows mxid instead of displayname
         return (
-            <div className="min-h-full flex flex-col justify-between bg-[#f8f8f8] dark:bg-[#06070D]">
+            <>
                 <Head>
                     <title key="title">Matrix Art | {displayname}</title>
                     <meta property="og:title" content={`Matrix Art | ${displayname}`} key="og-title" />
@@ -216,129 +211,126 @@ class Profile extends PureComponent<Props, State> {
                     <meta name="twitter:title" content={`Matrix Art | ${displayname}`} key="og-twitter-title" />
                     <meta property="og:type" content="website" key="og-type" />
                 </Head>
-                <Header></Header>
-                <main className='w-full mb-auto lg:pt-20 pt-56 z-0 bg-[#f8f8f8] dark:bg-[#06070D]'>
-                    {banner_event ? <div style={{
-                        backgroundImage: `url(${this.context.client.thumbnailLink((banner_event as BannerEvent).content["m.file"].url, "scale", (banner_event as BannerEvent).content["m.image"].width - 1, (banner_event as BannerEvent).content["m.image"].height - 1)})`
-                    }}
-                        className="fixed top-14 w-full h-[32.5rem] bg-cover lg:bg-[position:50%]"
-                    ></div> : undefined}
-                    <div className="relative w-full">
-                        <div className="relative mb-0 min-h-[43.75rem]">
-                            <div id="transparent_gradient" className="absolute left-0 right-0 top-[39rem] bottom-0 bg-[#f8f8f8] dark:bg-[#06070D]"></div>
-                            <div className="px-14 relative pt-[8.5rem] lg:pt-[15.5rem] pb-96 ">
-                                <div className="relative mt-0">
-                                    <div className="relative inline-flex z-[1] mb-10">
-                                        <span>
-                                            <div className="block relative">
-                                                {/* TODO fallback*/}
-                                                {
-                                                    isLoggedInUser ?
-                                                        (
-                                                            avatar_url ? (
-                                                                <>
-                                                                    <label htmlFor="avatar-upload" className="rounded-md flex justify-center items-center cursor-pointer grayscale-0 hover:grayscale transition-all ease-in-out duration-300" style={{ height: "100px", width: "100px" }}>
-                                                                        <img className="block object-cover rounded-md" src={this.context.client.downloadLink(avatar_url)!} height="100" width="100" alt={displayname} title={displayname} />
-                                                                        <div className="min-h-[48px] min-w-[48px] absolute left-[20%] rounded-full bg-slate-700/40 p-1 flex justify-center items-center"><EditIcon className="invert-0 duration-300 transition-all ease-in-out hover:invert" /></div>
-                                                                    </label>
-                                                                    <input className="hidden" id="avatar-upload" type="file" accept="image/*" onChange={this.handleAvatarUpload.bind(this)} />
-                                                                </>
-                                                            ) : (
-                                                                <>
-                                                                    <label htmlFor="avatar-upload" className="rounded-md bg-slate-500 flex justify-center items-center cursor-pointer" style={{ height: "100px", width: "100px" }}>
-                                                                        <UploadIcon />
-                                                                    </label>
-                                                                    <input className="hidden" id="avatar-upload" type="file" accept="image/*" onChange={this.handleAvatarUpload.bind(this)} />
-                                                                </>
-                                                            )
+                {banner_event ? <div style={{
+                    backgroundImage: `url(${this.context.client.thumbnailLink((banner_event as BannerEvent).content["m.file"].url, "scale", (banner_event as BannerEvent).content["m.image"].width - 1, (banner_event as BannerEvent).content["m.image"].height - 1)})`
+                }}
+                    className="fixed top-14 w-full h-[32.5rem] bg-cover lg:bg-[position:50%]"
+                ></div> : undefined}
+                <div className="relative w-full">
+                    <div className="relative mb-0 min-h-[43.75rem]">
+                        <div id="transparent_gradient" className="absolute left-0 right-0 top-[39rem] bottom-0 bg-[#f8f8f8] dark:bg-[#06070D]"></div>
+                        <div className="px-14 relative pt-[8.5rem] lg:pt-[15.5rem] pb-96 ">
+                            <div className="relative mt-0">
+                                <div className="relative inline-flex z-[1] mb-10">
+                                    <span>
+                                        <div className="block relative">
+                                            {/* TODO fallback*/}
+                                            {
+                                                isLoggedInUser ?
+                                                    (
+                                                        avatar_url ? (
+                                                            <>
+                                                                <label htmlFor="avatar-upload" className="rounded-md flex justify-center items-center cursor-pointer grayscale-0 hover:grayscale transition-all ease-in-out duration-300" style={{ height: "100px", width: "100px" }}>
+                                                                    <img className="block object-cover rounded-md" src={this.context.client.downloadLink(avatar_url)!} height="100" width="100" alt={displayname} title={displayname} />
+                                                                    <div className="min-h-[48px] min-w-[48px] absolute left-[20%] rounded-full bg-slate-700/40 p-1 flex justify-center items-center"><EditIcon className="invert-0 duration-300 transition-all ease-in-out hover:invert" /></div>
+                                                                </label>
+                                                                <input className="hidden" id="avatar-upload" type="file" accept="image/*" onChange={this.handleAvatarUpload.bind(this)} />
+                                                            </>
+                                                        ) : (
+                                                            <>
+                                                                <label htmlFor="avatar-upload" className="rounded-md bg-slate-500 flex justify-center items-center cursor-pointer" style={{ height: "100px", width: "100px" }}>
+                                                                    <UploadIcon />
+                                                                </label>
+                                                                <input className="hidden" id="avatar-upload" type="file" accept="image/*" onChange={this.handleAvatarUpload.bind(this)} />
+                                                            </>
                                                         )
-                                                        : (avatar_url ?
-                                                            <img className="block object-cover rounded-md" src={this.context.client.downloadLink(avatar_url)!} height="100" width="100" alt={displayname} title={displayname} />
-                                                            :
-                                                            <div className="rounded-md bg-slate-500 flex justify-center items-center" style={{ height: "100px", width: "100px" }}></div>
-                                                        )
-                                                }
-                                            </div>
-                                        </span>
-                                        <div className="ml-5 flex flex-col justify-center">
-                                            <h1 className="font-extrabold text-3xl lg:text-5xl text-gray-200 mt-[-1rem] flex items-center gap-1">{editingUsername ? <input onChange={this.handleUsernameInputChange.bind(this)} className="placeholder:text-gray-900 text-gray-900 rounded py-1.5 px-2" type="text" placeholder={i18n?.t("Set a displayname")} value={displayname}></input> : <span>{displayname}</span>}{isLoggedInUser ? <EditIcon className="cursor-pointer" onClick={this.onClickEditUsername.bind(this)} /> : undefined}</h1>
+                                                    )
+                                                    : (avatar_url ?
+                                                        <img className="block object-cover rounded-md" src={this.context.client.downloadLink(avatar_url)!} height="100" width="100" alt={displayname} title={displayname} />
+                                                        :
+                                                        <div className="rounded-md bg-slate-500 flex justify-center items-center" style={{ height: "100px", width: "100px" }}></div>
+                                                    )
+                                            }
                                         </div>
+                                    </span>
+                                    <div className="ml-5 flex flex-col justify-center">
+                                        <h1 className="font-extrabold text-3xl lg:text-5xl text-gray-200 mt-[-1rem] flex items-center gap-1">{editingUsername ? <input onChange={this.handleUsernameInputChange.bind(this)} className="placeholder:text-gray-900 text-gray-900 rounded py-1.5 px-2" type="text" placeholder={i18n?.t("Set a displayname")} value={displayname}></input> : <span>{displayname}</span>}{isLoggedInUser ? <EditIcon className="cursor-pointer" onClick={this.onClickEditUsername.bind(this)} /> : undefined}</h1>
                                     </div>
                                 </div>
-                                <div className="relative w-full h-14">
-                                    <div className="min-h-0">
-                                        <nav className="w-full h-14 box-border flex items-center bg-[#f8f8f8] dark:bg-[#06070D] overflow-scroll lg:overflow-hidden">
-                                            <span id="magic-spacer"></span>
-                                            <div className="flex items-center w-full h-full overflow-hidden whitespace-nowrap box-border min-w-fit">
-                                                <Link href={`/profile/${encodeURIComponent(mxid)}`} passHref><a className={`text-base font-bold text-gray-900 dark:text-gray-200 capitalize ml-2 px-8 relative box-border inline-flex grow-0 shrink-[1] basis-auto items-center h-full decoration-[none] brightness-100 hover:brightness-75 duration-200 ease-in-out transition-all`}>{i18n?.t("Home")}</a></Link>
-                                                <Link href={`/profile/${encodeURIComponent(mxid)}/gallery`} passHref><a className={`text-base font-bold text-gray-900 dark:text-[#b1b1b9] capitalize px-8 relative box-border inline-flex grow-0 shrink-[1] basis-auto items-center h-full decoration-[none] brightness-100 hover:brightness-75 duration-200 ease-in-out transition-all`}>{i18n?.t("Gallery")}</a></Link>
-                                                <Link href={`/profile/${encodeURIComponent(mxid)}/about`} passHref><a className={`text-base font-bold text-gray-900 dark:text-[#b1b1b9] capitalize px-8 relative box-border inline-flex grow-0 shrink-[1] basis-auto items-center h-full decoration-[none] brightness-100 hover:brightness-75 duration-200 ease-in-out transition-all`}>{i18n?.t("About")}</a></Link>
-                                            </div>
-                                            <div className="pr-4">
-                                                {/*TODO Share menu here*/}
-                                            </div>
-                                            <div>
-                                                <button id="reflection" className="min-w-[7.75rem] h-14 min-h-[2.5rem] box-border m-0 shadow-none rounded-none relative overflow-hidden z-0 border-none outline-none px-5 flex items-center justify-center cursor-pointer bg-teal-400 text-gray-900 text-sm font-bold">{i18n?.t("Follow")}</button>
-                                            </div>
-                                        </nav>
-                                    </div>
+                            </div>
+                            <div className="relative w-full h-14">
+                                <div className="min-h-0">
+                                    <nav className="w-full h-14 box-border flex items-center bg-[#f8f8f8] dark:bg-[#06070D] overflow-scroll lg:overflow-hidden">
+                                        <span id="magic-spacer"></span>
+                                        <div className="flex items-center w-full h-full overflow-hidden whitespace-nowrap box-border min-w-fit">
+                                            <Link href={`/profile/${encodeURIComponent(mxid)}`} passHref><a className={`text-base font-bold text-gray-900 dark:text-gray-200 capitalize ml-2 px-8 relative box-border inline-flex grow-0 shrink-[1] basis-auto items-center h-full decoration-[none] brightness-100 hover:brightness-75 duration-200 ease-in-out transition-all`}>{i18n?.t("Home")}</a></Link>
+                                            <Link href={`/profile/${encodeURIComponent(mxid)}/gallery`} passHref><a className={`text-base font-bold text-gray-900 dark:text-[#b1b1b9] capitalize px-8 relative box-border inline-flex grow-0 shrink-[1] basis-auto items-center h-full decoration-[none] brightness-100 hover:brightness-75 duration-200 ease-in-out transition-all`}>{i18n?.t("Gallery")}</a></Link>
+                                            <Link href={`/profile/${encodeURIComponent(mxid)}/about`} passHref><a className={`text-base font-bold text-gray-900 dark:text-[#b1b1b9] capitalize px-8 relative box-border inline-flex grow-0 shrink-[1] basis-auto items-center h-full decoration-[none] brightness-100 hover:brightness-75 duration-200 ease-in-out transition-all`}>{i18n?.t("About")}</a></Link>
+                                        </div>
+                                        <div className="pr-4">
+                                            {/*TODO Share menu here*/}
+                                        </div>
+                                        <div>
+                                            <button id="reflection" className="min-w-[7.75rem] h-14 min-h-[2.5rem] box-border m-0 shadow-none rounded-none relative overflow-hidden z-0 border-none outline-none px-5 flex items-center justify-center cursor-pointer bg-teal-400 text-gray-900 text-sm font-bold">{i18n?.t("Follow")}</button>
+                                        </div>
+                                    </nav>
                                 </div>
-                                <div className="w-full bg-transparent">
-                                    <div className="pt-5">
-                                        <div className="flex flex-col-reverse lg:flex-row">
-                                            <div className="mr-16 overflow-hidden pb-4 flex-[auto]">
-                                                <div>
-                                                    <section className="pb-4 block">
-                                                        <div className="w-full flex items-center mt-8 mb-4">
-                                                            <h2 className="font-bold text-lg tracking-[.3px] leading-[1.22] text-gray-900 dark:text-gray-200">{i18n?.t("Gallery")}</h2>
-                                                            <div className="ml-4 flex flex-[1] items-center relative justify-end">
-                                                                <Link href={`/profile/${encodeURIComponent(mxid)}/gallery`} passHref><a className={`font-regular text-xs tracking-[1.3px] leading-[1.22] ml-6 uppercase whitespace-nowrap text-gray-900 dark:text-gray-200 hover:opacity-100 opacity-0 transition-opacity duration-[25ms]`}>See All</a></Link>
-                                                            </div>
-                                                        </div>
-                                                        <div>
-                                                            <ul className='flex flex-wrap gap-1'>{image_events.map(event => <FrontPageImage show_nsfw={true} event={event} imageHeight="286px" key={(event as MatrixEventBase).event_id} />)}
-                                                                <li className='grow-[10]'></li>
-                                                            </ul>
+                            </div>
+                            <div className="w-full bg-transparent">
+                                <div className="pt-5">
+                                    <div className="flex flex-col-reverse lg:flex-row">
+                                        <div className="mr-16 overflow-hidden pb-4 flex-[auto]">
+                                            <div>
+                                                <section className="pb-4 block">
+                                                    <div className="w-full flex items-center mt-8 mb-4">
+                                                        <h2 className="font-bold text-lg tracking-[.3px] leading-[1.22] text-gray-900 dark:text-gray-200">{i18n?.t("Gallery")}</h2>
+                                                        <div className="ml-4 flex flex-[1] items-center relative justify-end">
+                                                            <Link href={`/profile/${encodeURIComponent(mxid)}/gallery`} passHref><a className={`font-regular text-xs tracking-[1.3px] leading-[1.22] ml-6 uppercase whitespace-nowrap text-gray-900 dark:text-gray-200 hover:opacity-100 opacity-0 transition-opacity duration-[25ms]`}>See All</a></Link>
                                                         </div>
-                                                    </section>
-                                                </div>
+                                                    </div>
+                                                    <div>
+                                                        <ul className='flex flex-wrap gap-1'>{image_events.map(event => <FrontPageImage show_nsfw={true} event={event} imageHeight="286px" key={(event as MatrixEventBase).event_id} />)}
+                                                            <li className='grow-[10]'></li>
+                                                        </ul>
+                                                    </div>
+                                                </section>
                                             </div>
-                                            <div className="lg:w-[37.5rem] w-full flex-none">
-                                                <div>
-                                                    <section className="pb-4 block">
-                                                        <div className="w-full flex items-center mt-8 mb-4">
-                                                            <h2 className="font-bold text-gray-900 dark:text-gray-200 text-lg tracking--[.3px] leading-[1.22] max-w-[90%] mr-auto overflow-hidden text-ellipsis whitespace-nowrap">{i18n?.t("About {{displayname}}", { displayname: displayname })}</h2>
-                                                            <div className="ml-4 flex flex-[1] items-center relative justify-end">
-                                                                <Link href={`/profile/${encodeURIComponent(mxid)}/about`} passHref><a className={`font-regular text-xs tracking-[1.3px] leading-[1.22] ml-6 uppercase whitespace-nowrap text-gray-900 dark:text-gray-200 hover:opacity-100 opacity-0 transition-opacity duration-[25ms]`}>{i18n?.t("More")}</a></Link>
-                                                            </div>
-                                                        </div>
-                                                        <div className="bg-[#fefefe]/[.95] dark:bg-[#14181E]/[.95] pt-7 w-ull flex flex-col box-border tracking--[.3px] text-gray-900 dark:text-gray-200">
-                                                            {profile_event?.content["matrixart.profile.description"] ? <div className="px-8">
-                                                                <div className="mb-8 font-regular text-base leading-[1.22] whitespace-pre-wrap">
-                                                                    {profile_event ? profile_event.content["matrixart.profile.description"] : undefined}
-                                                                </div>
-                                                            </div> : undefined}
-                                                            {profile_event?.content["matrixart.profile.pronouns"] ? <div className="px-8">
-                                                                <div className="mb-8 flex items-start justify-between flex-wrap w-full">
-                                                                    <div className="h-11 mb-0 text-xs flex items-center uppercase text-gray-700 dark:text-gray-400">{i18n?.t("Pronouns")}</div>
-                                                                    <div className="w-full justify-items-end">{profile_event ? profile_event.content["matrixart.profile.pronouns"] : undefined}</div>
-                                                                </div>
-                                                            </div> : undefined}
-                                                            {profile_event?.content["matrixart.profile.links"] ? <div className="px-8">
-                                                                <div className="mb-8 flex items-start justify-between flex-wrap w-full">
-                                                                    <div className="h-11 mb-0 text-xs flex items-center uppercase text-gray-700 dark:text-gray-400">{i18n?.t("Follow me on")}</div>
-                                                                    <div className="w-full max-w-[21.5rem] grid gap-4 auto-cols-[2.75rem] auto-rows-[2.75rem] grid-flow-col justify-items-end">{/*TODO Social Icons */}</div>
-                                                                </div>
-                                                            </div> : undefined}
-                                                            {profile_event?.content["matrixart.profile.biography"] ? <div className="px-8">
-                                                                <div className="mb-8 font-regular text-base leading-[1.22] whitespace-pre-wrap">
-                                                                    <div className="h-11 mb-0 text-xs flex items-center uppercase text-gray-700 dark:text-gray-400">{i18n?.t("My Bio")}</div>
-                                                                    <div className="text-base font-regular">{profile_event ? profile_event.content["matrixart.profile.biography"] : undefined}</div>
-                                                                </div>
-                                                            </div> : undefined}
+                                        </div>
+                                        <div className="lg:w-[37.5rem] w-full flex-none">
+                                            <div>
+                                                <section className="pb-4 block">
+                                                    <div className="w-full flex items-center mt-8 mb-4">
+                                                        <h2 className="font-bold text-gray-900 dark:text-gray-200 text-lg tracking--[.3px] leading-[1.22] max-w-[90%] mr-auto overflow-hidden text-ellipsis whitespace-nowrap">{i18n?.t("About {{displayname}}", { displayname: displayname })}</h2>
+                                                        <div className="ml-4 flex flex-[1] items-center relative justify-end">
+                                                            <Link href={`/profile/${encodeURIComponent(mxid)}/about`} passHref><a className={`font-regular text-xs tracking-[1.3px] leading-[1.22] ml-6 uppercase whitespace-nowrap text-gray-900 dark:text-gray-200 hover:opacity-100 opacity-0 transition-opacity duration-[25ms]`}>{i18n?.t("More")}</a></Link>
                                                         </div>
-                                                    </section>
-                                                </div>
+                                                    </div>
+                                                    <div className="bg-[#fefefe]/[.95] dark:bg-[#14181E]/[.95] pt-7 w-ull flex flex-col box-border tracking--[.3px] text-gray-900 dark:text-gray-200">
+                                                        {profile_event?.content["matrixart.profile.description"] ? <div className="px-8">
+                                                            <div className="mb-8 font-regular text-base leading-[1.22] whitespace-pre-wrap">
+                                                                {profile_event ? profile_event.content["matrixart.profile.description"] : undefined}
+                                                            </div>
+                                                        </div> : undefined}
+                                                        {profile_event?.content["matrixart.profile.pronouns"] ? <div className="px-8">
+                                                            <div className="mb-8 flex items-start justify-between flex-wrap w-full">
+                                                                <div className="h-11 mb-0 text-xs flex items-center uppercase text-gray-700 dark:text-gray-400">{i18n?.t("Pronouns")}</div>
+                                                                <div className="w-full justify-items-end">{profile_event ? profile_event.content["matrixart.profile.pronouns"] : undefined}</div>
+                                                            </div>
+                                                        </div> : undefined}
+                                                        {profile_event?.content["matrixart.profile.links"] ? <div className="px-8">
+                                                            <div className="mb-8 flex items-start justify-between flex-wrap w-full">
+                                                                <div className="h-11 mb-0 text-xs flex items-center uppercase text-gray-700 dark:text-gray-400">{i18n?.t("Follow me on")}</div>
+                                                                <div className="w-full max-w-[21.5rem] grid gap-4 auto-cols-[2.75rem] auto-rows-[2.75rem] grid-flow-col justify-items-end">{/*TODO Social Icons */}</div>
+                                                            </div>
+                                                        </div> : undefined}
+                                                        {profile_event?.content["matrixart.profile.biography"] ? <div className="px-8">
+                                                            <div className="mb-8 font-regular text-base leading-[1.22] whitespace-pre-wrap">
+                                                                <div className="h-11 mb-0 text-xs flex items-center uppercase text-gray-700 dark:text-gray-400">{i18n?.t("My Bio")}</div>
+                                                                <div className="text-base font-regular">{profile_event ? profile_event.content["matrixart.profile.biography"] : undefined}</div>
+                                                            </div>
+                                                        </div> : undefined}
+                                                    </div>
+                                                </section>
                                             </div>
                                         </div>
                                     </div>
@@ -346,9 +338,8 @@ class Profile extends PureComponent<Props, State> {
                             </div>
                         </div>
                     </div>
-                </main>
-                <Footer></Footer>
-            </div>
+                </div>
+            </>
         );
     }
 
diff --git a/pages/submit.tsx b/pages/submit.tsx
@@ -7,8 +7,6 @@ import { PureComponent, ReactNode } from "react";
 import { FileRejection } from "react-dropzone";
 import { toast } from "react-toastify";
 import { ClientContext } from "../components/ClientContext";
-import Footer from "../components/Footer";
-import Header from "../components/Header";
 import MainSubmissionForm from "../components/submit_page/main";
 import { DropCallbacks, StartSubmit } from "../components/submit_page/start";
 
@@ -95,7 +93,7 @@ class Submit extends PureComponent<Props, State> implements DropCallbacks {
 
     render(): ReactNode {
         return (
-            <div className='min-h-full flex flex-col bg-[#f8f8f8] dark:bg-[#06070D]'>
+            <>
                 <Head>
                     <title key="title">Matrix Art | {i18n?.t("Submit Post")}</title>
                     <meta property="og:title" content="Matrix Art | Submit Post" key="og-title" />
@@ -103,7 +101,6 @@ class Submit extends PureComponent<Props, State> implements DropCallbacks {
                     <meta name="twitter:title" content="Matrix Art | Submit Post" key="og-twitter-title" />
                     <meta property="og:type" content="website" key="og-type" />
                 </Head>
-                <Header></Header>
                 <div className='z-[100] sticky lg:top-[4.9rem] top-[12.5rem] bg-[#fefefe]/[.95] dark:bg-[#12161D]'>
                     <div className='h-16 px-10 w-full relative grid grid-cols-[1fr_auto_1fr] items-center' id='section-grid'>
                         <h1 className='text-xl text-gray-900 dark:text-gray-200 font-bold'>{i18n?.t("Submit Image")}</h1>
@@ -111,8 +108,7 @@ class Submit extends PureComponent<Props, State> implements DropCallbacks {
                 </div>
                 {this.renderStage()}
                 <div className="flex-grow"></div>
-                <Footer></Footer>
-            </div>
+            </>
         );
     }
     renderStage(): ReactNode {