Creating Discord 39 - https://www.youtube.com/watch?v=I_7_iZz21-w

backend/src/rest/functions/apply-middleware.ts

@@ -34,11 +34,6 @@ function setupMulter(app: Application) {
   const upload = multer({
     storage,
     fileFilter: (req, file, callback) => {
-      const ext = extname(file.originalname);
-      const allowedTypes = ['.png', '.jpg', '.gif', '.jpeg', '.webp', '.svg'];
-      if (!allowedTypes.includes(ext))
-        return callback(new Error('This image file type is not allowed'));
-
       const fileSize = parseInt(req.headers['content-length'] as string);
       if (fileSize > 1024 * 1024)
         return callback(new Error('File size must be less than 1MB'));

backend/src/ws/modules/ws-guard.ts

@@ -41,7 +41,9 @@ export class WSGuard {
 
   public async canInChannel(permission: PermissionTypes.PermissionString, channelId: string, userId: string) {
     const channel = await deps.channels.get(channelId);
-    const member = await deps.guildMembers.getInGuild(channel.guildId, userId);
+    const [member, guild] = await Promise.all([
+      deps.guildMembers.getInGuild(channel.guildId, userId),
+      deps.guilds.get(channel.guildId)]);
 
     const overrides = channel.overrides?.filter(o => member.roleIds.includes(o.roleId)) ?? [];
     const cumulativeAllowPerms = overrides.reduce((prev, curr) => prev | curr.allow, 0);
@@ -49,7 +51,8 @@ export class WSGuard {
 
     const has = (totalPerms: number, permission: number) =>
       Boolean(totalPerms & permission)
-      || Boolean(totalPerms & PermissionTypes.General.ADMINISTRATOR);
+      || Boolean(totalPerms & PermissionTypes.General.ADMINISTRATOR)
+      || (guild.ownerId == userId);
 
     const permInteger = PermissionTypes.All[permission] as any as number;
     const canInherently = await this.can(permission, channel.guildId, userId);

frontend/package-lock.json

@@ -78,7 +78,7 @@
         "gh-pages": "^4.0.0",
         "postcss": "^8.4.5",
         "sazerac": "^2.0.0",
-        "tailwindcss": "^3.2.4"
+        "tailwindcss": "^3.3.2"
       },
       "optionalDependencies": {
         "@material-ui/core": "^4.12.3",
@@ -115,6 +115,17 @@
       "resolved": "src/types",
       "link": true
     },
+    "node_modules/@alloc/quick-lru": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/@alloc/quick-lru/-/quick-lru-5.2.0.tgz",
+      "integrity": "sha512-UrcABB+4bUrFABwbluTIBErXwvbsU/V7TZWfmbgJfbkwiBuziS9gxdODUyuiecfdGQ85jglMW6juS3+z5TsKLw==",
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/@babel/code-frame": {
       "version": "7.18.6",
       "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.18.6.tgz",
@@ -4916,16 +4927,6 @@
         "acorn": "^6.0.0 || ^7.0.0 || ^8.0.0"
       }
     },
-    "node_modules/acorn-node": {
-      "version": "1.8.2",
-      "resolved": "https://registry.npmjs.org/acorn-node/-/acorn-node-1.8.2.tgz",
-      "integrity": "sha512-8mt+fslDufLYntIoPAaIMUe/lrbrehIiwmR3t2k9LljIzoigEPF27eLk2hy8zSGzmR/ogr7zbRKINMo1u0yh5A==",
-      "dependencies": {
-        "acorn": "^7.0.0",
-        "acorn-walk": "^7.0.0",
-        "xtend": "^4.0.2"
-      }
-    },
     "node_modules/acorn-walk": {
       "version": "7.2.0",
       "resolved": "https://registry.npmjs.org/acorn-walk/-/acorn-walk-7.2.0.tgz",
@@ -5101,6 +5102,11 @@
         "url": "https://github.com/chalk/ansi-styles?sponsor=1"
       }
     },
+    "node_modules/any-promise": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/any-promise/-/any-promise-1.3.0.tgz",
+      "integrity": "sha512-7UvmKalWRt1wgjL1RrGxoSJW/0QZFIegpeGvZG9kjp8vrRu55XTHbwnqq2GpXm9uLbcuhxm3IqX9OB4MZR1b2A=="
+    },
     "node_modules/anymatch": {
       "version": "3.1.2",
       "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.2.tgz",
@@ -8537,11 +8543,6 @@
         "node": ">=0.10.0"
       }
     },
-    "node_modules/defined": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/defined/-/defined-1.0.0.tgz",
-      "integrity": "sha1-yY2bzvdWdBiOEQlpFRGZ45sfppM="
-    },
     "node_modules/delayed-stream": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
@@ -8626,22 +8627,6 @@
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
       "integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A=="
     },
-    "node_modules/detective": {
-      "version": "5.2.1",
-      "resolved": "https://registry.npmjs.org/detective/-/detective-5.2.1.tgz",
-      "integrity": "sha512-v9XE1zRnz1wRtgurGu0Bs8uHKFSTdteYZNbIPFVhUZ39L/S79ppMpdmVOZAnoz1jfEFodc48n6MX483Xo3t1yw==",
-      "dependencies": {
-        "acorn-node": "^1.8.2",
-        "defined": "^1.0.0",
-        "minimist": "^1.2.6"
-      },
-      "bin": {
-        "detective": "bin/detective.js"
-      },
-      "engines": {
-        "node": ">=0.8.0"
-      }
-    },
     "node_modules/didyoumean": {
       "version": "1.2.2",
       "resolved": "https://registry.npmjs.org/didyoumean/-/didyoumean-1.2.2.tgz",
@@ -13371,6 +13356,14 @@
         "url": "https://github.com/chalk/supports-color?sponsor=1"
       }
     },
+    "node_modules/jiti": {
+      "version": "1.18.2",
+      "resolved": "https://registry.npmjs.org/jiti/-/jiti-1.18.2.tgz",
+      "integrity": "sha512-QAdOptna2NYiSSpv0O/BwoHBSmz4YhpzJHyi+fnMRTXFjp7B8i/YG5Z8IfusxB1ufjcD2Sre1F3R+nX3fvy7gg==",
+      "bin": {
+        "jiti": "bin/jiti.js"
+      }
+    },
     "node_modules/js-sdsl": {
       "version": "4.2.0",
       "resolved": "https://registry.npmjs.org/js-sdsl/-/js-sdsl-4.2.0.tgz",
@@ -13773,9 +13766,9 @@
       }
     },
     "node_modules/lilconfig": {
-      "version": "2.0.6",
-      "resolved": "https://registry.npmjs.org/lilconfig/-/lilconfig-2.0.6.tgz",
-      "integrity": "sha512-9JROoBW7pobfsx+Sq2JsASvCo6Pfo6WWoUW79HuB1BCoBXD4PLWJPqDF6fNj67pqBYTbAHkE57M1kS/+L1neOg==",
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/lilconfig/-/lilconfig-2.1.0.tgz",
+      "integrity": "sha512-utWOt/GHzuUxnLKxB6dk81RoOeoNeHgbrXiuGk4yyF5qlRz+iIVWu56E2fqGHFrXz0QNUhLB/8nKqvRH66JKGQ==",
       "engines": {
         "node": ">=10"
       }
@@ -14611,6 +14604,16 @@
         "multicast-dns": "cli.js"
       }
     },
+    "node_modules/mz": {
+      "version": "2.7.0",
+      "resolved": "https://registry.npmjs.org/mz/-/mz-2.7.0.tgz",
+      "integrity": "sha512-z81GNO7nnYMEhrGh9LeymoE4+Yr0Wn5McHIZMK5cfQCl+NDX08sCZgUc9/6MHni9IWuFLm1Z3HTCXu2z9fN62Q==",
+      "dependencies": {
+        "any-promise": "^1.0.0",
+        "object-assign": "^4.0.1",
+        "thenify-all": "^1.0.0"
+      }
+    },
     "node_modules/nan": {
       "version": "2.17.0",
       "resolved": "https://registry.npmjs.org/nan/-/nan-2.17.0.tgz",
@@ -14618,9 +14621,15 @@
       "optional": true
     },
     "node_modules/nanoid": {
-      "version": "3.3.4",
-      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.4.tgz",
-      "integrity": "sha512-MqBkQh/OHTS2egovRtLk45wEyNXwF+cokD+1YPf9u5VfJiRdAiRwB2froX5Co9Rh20xs4siNPm8naNotSD6RBw==",
+      "version": "3.3.6",
+      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.6.tgz",
+      "integrity": "sha512-BGcqMMJuToF7i1rt+2PWSNVnWIkGCU78jBG3RxO/bZlnZPK2Cmi2QaffxGO/2RvWi9sL+FAiRiXMgsyxQ1DIDA==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
       "bin": {
         "nanoid": "bin/nanoid.cjs"
       },
@@ -15584,9 +15593,9 @@
       }
     },
     "node_modules/postcss": {
-      "version": "8.4.20",
-      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.20.tgz",
-      "integrity": "sha512-6Q04AXR1212bXr5fh03u8aAwbLxAQNGQ/Q1LNa0VfOI06ZAlhPHtQvE4OIdpj4kLThXilalPnmDSOD65DcHt+g==",
+      "version": "8.4.24",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.24.tgz",
+      "integrity": "sha512-M0RzbcI0sO/XJNucsGjvWU9ERWxb/ytp1w6dKtxTKgixdtQDq4rmx/g8W1hnaheq9jgwL/oyEdH5Bc4WwJKMqg==",
       "funding": [
         {
           "type": "opencollective",
@@ -15595,10 +15604,14 @@
         {
           "type": "tidelift",
           "url": "https://tidelift.com/funding/github/npm/postcss"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
         }
       ],
       "dependencies": {
-        "nanoid": "^3.3.4",
+        "nanoid": "^3.3.6",
         "picocolors": "^1.0.0",
         "source-map-js": "^1.0.2"
       },
@@ -16082,16 +16095,16 @@
       }
     },
     "node_modules/postcss-import": {
-      "version": "14.1.0",
-      "resolved": "https://registry.npmjs.org/postcss-import/-/postcss-import-14.1.0.tgz",
-      "integrity": "sha512-flwI+Vgm4SElObFVPpTIT7SU7R3qk2L7PyduMcokiaVKuWv9d/U+Gm/QAd8NDLuykTWTkcrjOeD2Pp1rMeBTGw==",
+      "version": "15.1.0",
+      "resolved": "https://registry.npmjs.org/postcss-import/-/postcss-import-15.1.0.tgz",
+      "integrity": "sha512-hpr+J05B2FVYUAXHeK1YyI267J/dDDhMU6B6civm8hSY1jYJnBXxzKDKDswzJmtLHryrjhnDjqqp/49t8FALew==",
       "dependencies": {
         "postcss-value-parser": "^4.0.0",
         "read-cache": "^1.0.0",
         "resolve": "^1.1.7"
       },
       "engines": {
-        "node": ">=10.0.0"
+        "node": ">=14.0.0"
       },
       "peerDependencies": {
         "postcss": "^8.0.0"
@@ -16106,9 +16119,9 @@
       }
     },
     "node_modules/postcss-js": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/postcss-js/-/postcss-js-4.0.0.tgz",
-      "integrity": "sha512-77QESFBwgX4irogGVPgQ5s07vLvFqWr228qZY+w6lW599cRlK/HmnlivnnVUxkjHnCu4J16PDMHcH+e+2HbvTQ==",
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/postcss-js/-/postcss-js-4.0.1.tgz",
+      "integrity": "sha512-dDLF8pEO191hJMtlHFPRa8xsizHaM82MLfNkUHdUtVEV3tgTp5oj+8qbEqYM57SLfc74KSbw//4SeJma2LRVIw==",
       "dependencies": {
         "camelcase-css": "^2.0.1"
       },
@@ -16120,7 +16133,7 @@
         "url": "https://opencollective.com/postcss/"
       },
       "peerDependencies": {
-        "postcss": "^8.3.3"
+        "postcss": "^8.4.21"
       }
     },
     "node_modules/postcss-lab-function": {
@@ -16391,11 +16404,11 @@
       }
     },
     "node_modules/postcss-nested": {
-      "version": "6.0.0",
-      "resolved": "https://registry.npmjs.org/postcss-nested/-/postcss-nested-6.0.0.tgz",
-      "integrity": "sha512-0DkamqrPcmkBDsLn+vQDIrtkSbNkv5AD/M322ySo9kqFkCIYklym2xEmWkwo+Y3/qZo34tzEPNUw4y7yMCdv5w==",
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/postcss-nested/-/postcss-nested-6.0.1.tgz",
+      "integrity": "sha512-mEp4xPMi5bSWiMbsgoPfcP74lsWLHkQbZc3sY+jWYd65CUwXrUaTp0fmNpa01ZcETKlIgUdFN/MpS2xZtqL9dQ==",
       "dependencies": {
-        "postcss-selector-parser": "^6.0.10"
+        "postcss-selector-parser": "^6.0.11"
       },
       "engines": {
         "node": ">=12.0"
@@ -17189,6 +17202,7 @@
       "version": "5.1.1",
       "resolved": "https://registry.npmjs.org/quick-lru/-/quick-lru-5.1.1.tgz",
       "integrity": "sha512-WuyALRjWPDGtt/wzJiadO5AXY+8hZ80hVpe6MyivgraREW751X3SbhRvG3eLKOYN+8VEvqLcf3wdnt44Z4S4SA==",
+      "dev": true,
       "engines": {
         "node": ">=10"
       },
@@ -18161,11 +18175,11 @@
       "integrity": "sha512-LwZrotdHOo12nQuZlHEmtuXdqGoOD0OhaxopaNFxWzInpEgaLWoVuAMbTzixuosCx2nEG58ngzW3vxdWoxIgdg=="
     },
     "node_modules/resolve": {
-      "version": "1.22.1",
-      "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.1.tgz",
-      "integrity": "sha512-nBpuuYuY5jFsli/JIs1oldw6fOQCBioohqWZg/2hiaOybXOft4lonv85uDOKXdf8rhyK159cxU5cDcK/NKk8zw==",
+      "version": "1.22.2",
+      "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.2.tgz",
+      "integrity": "sha512-Sb+mjNHOULsBv818T40qSPeRiuWLyaGMa5ewydRLFimneixmVy2zdivRl+AF6jaYPC8ERxGDmFSiqui6SfPd+g==",
       "dependencies": {
-        "is-core-module": "^2.9.0",
+        "is-core-module": "^2.11.0",
         "path-parse": "^1.0.7",
         "supports-preserve-symlinks-flag": "^1.0.0"
       },
@@ -19525,6 +19539,54 @@
       "resolved": "https://registry.npmjs.org/stylis/-/stylis-4.0.10.tgz",
       "integrity": "sha512-m3k+dk7QeJw660eIKRRn3xPF6uuvHs/FFzjX3HQ5ove0qYsiygoAhwn5a3IYKaZPo5LrYD0rfVmtv1gNY1uYwg=="
     },
+    "node_modules/sucrase": {
+      "version": "3.32.0",
+      "resolved": "https://registry.npmjs.org/sucrase/-/sucrase-3.32.0.tgz",
+      "integrity": "sha512-ydQOU34rpSyj2TGyz4D2p8rbktIOZ8QY9s+DGLvFU1i5pWJE8vkpruCjGCMHsdXwnD7JDcS+noSwM/a7zyNFDQ==",
+      "dependencies": {
+        "@jridgewell/gen-mapping": "^0.3.2",
+        "commander": "^4.0.0",
+        "glob": "7.1.6",
+        "lines-and-columns": "^1.1.6",
+        "mz": "^2.7.0",
+        "pirates": "^4.0.1",
+        "ts-interface-checker": "^0.1.9"
+      },
+      "bin": {
+        "sucrase": "bin/sucrase",
+        "sucrase-node": "bin/sucrase-node"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/sucrase/node_modules/commander": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/commander/-/commander-4.1.1.tgz",
+      "integrity": "sha512-NOKm8xhkzAjzFx8B2v5OAHT+u5pRQc2UCa2Vq9jYL/31o2wi9mxBA7LIFs3sV5VSC49z6pEhfbMULvShKj26WA==",
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/sucrase/node_modules/glob": {
+      "version": "7.1.6",
+      "resolved": "https://registry.npmjs.org/glob/-/glob-7.1.6.tgz",
+      "integrity": "sha512-LwaxwyZ72Lk7vZINtNNrywX0ZuLyStrdDtabefZKAY5ZGJhVtgdznluResxNmPitE0SAO+O26sWTHeKSI2wMBA==",
+      "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/supports-color": {
       "version": "7.2.0",
       "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
@@ -19706,43 +19768,40 @@
       "integrity": "sha512-9QNk5KwDF+Bvz+PyObkmSYjI5ksVUYtjW7AU22r2NKcfLJcXp96hkDWU3+XndOsUb+AQ9QhfzfCT2O+CNWT5Tw=="
     },
     "node_modules/tailwindcss": {
-      "version": "3.2.4",
-      "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.2.4.tgz",
-      "integrity": "sha512-AhwtHCKMtR71JgeYDaswmZXhPcW9iuI9Sp2LvZPo9upDZ7231ZJ7eA9RaURbhpXGVlrjX4cFNlB4ieTetEb7hQ==",
+      "version": "3.3.2",
+      "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.3.2.tgz",
+      "integrity": "sha512-9jPkMiIBXvPc2KywkraqsUfbfj+dHDb+JPWtSJa9MLFdrPyazI7q6WX2sUrm7R9eVR7qqv3Pas7EvQFzxKnI6w==",
       "dependencies": {
+        "@alloc/quick-lru": "^5.2.0",
         "arg": "^5.0.2",
         "chokidar": "^3.5.3",
-        "color-name": "^1.1.4",
-        "detective": "^5.2.1",
         "didyoumean": "^1.2.2",
         "dlv": "^1.1.3",
         "fast-glob": "^3.2.12",
         "glob-parent": "^6.0.2",
         "is-glob": "^4.0.3",
-        "lilconfig": "^2.0.6",
+        "jiti": "^1.18.2",
+        "lilconfig": "^2.1.0",
         "micromatch": "^4.0.5",
         "normalize-path": "^3.0.0",
         "object-hash": "^3.0.0",
         "picocolors": "^1.0.0",
-        "postcss": "^8.4.18",
-        "postcss-import": "^14.1.0",
-        "postcss-js": "^4.0.0",
-        "postcss-load-config": "^3.1.4",
-        "postcss-nested": "6.0.0",
-        "postcss-selector-parser": "^6.0.10",
+        "postcss": "^8.4.23",
+        "postcss-import": "^15.1.0",
+        "postcss-js": "^4.0.1",
+        "postcss-load-config": "^4.0.1",
+        "postcss-nested": "^6.0.1",
+        "postcss-selector-parser": "^6.0.11",
         "postcss-value-parser": "^4.2.0",
-        "quick-lru": "^5.1.1",
-        "resolve": "^1.22.1"
+        "resolve": "^1.22.2",
+        "sucrase": "^3.32.0"
       },
       "bin": {
         "tailwind": "lib/cli.js",
         "tailwindcss": "lib/cli.js"
       },
       "engines": {
-        "node": ">=12.13.0"
-      },
-      "peerDependencies": {
-        "postcss": "^8.0.9"
+        "node": ">=14.0.0"
       }
     },
     "node_modules/tailwindcss/node_modules/glob-parent": {
@@ -19764,6 +19823,42 @@
         "node": ">= 6"
       }
     },
+    "node_modules/tailwindcss/node_modules/postcss-load-config": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/postcss-load-config/-/postcss-load-config-4.0.1.tgz",
+      "integrity": "sha512-vEJIc8RdiBRu3oRAI0ymerOn+7rPuMvRXslTvZUKZonDHFIczxztIyJ1urxM1x9JXEikvpWWTUUqal5j/8QgvA==",
+      "dependencies": {
+        "lilconfig": "^2.0.5",
+        "yaml": "^2.1.1"
+      },
+      "engines": {
+        "node": ">= 14"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/postcss/"
+      },
+      "peerDependencies": {
+        "postcss": ">=8.0.9",
+        "ts-node": ">=9.0.0"
+      },
+      "peerDependenciesMeta": {
+        "postcss": {
+          "optional": true
+        },
+        "ts-node": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/tailwindcss/node_modules/yaml": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/yaml/-/yaml-2.3.1.tgz",
+      "integrity": "sha512-2eHWfjaoXgTBC2jNM1LRef62VQa0umtvRiDSk6HSzW7RvS5YtkabJrwYLLEKWBc8a5U2PTSCs+dJjUTJdlHsWQ==",
+      "engines": {
+        "node": ">= 14"
+      }
+    },
     "node_modules/tapable": {
       "version": "1.1.3",
       "resolved": "https://registry.npmjs.org/tapable/-/tapable-1.1.3.tgz",
@@ -19912,6 +20007,25 @@
       "resolved": "https://registry.npmjs.org/thenby/-/thenby-1.3.4.tgz",
       "integrity": "sha512-89Gi5raiWA3QZ4b2ePcEwswC3me9JIg+ToSgtE0JWeCynLnLxNr/f9G+xfo9K+Oj4AFdom8YNJjibIARTJmapQ=="
     },
+    "node_modules/thenify": {
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/thenify/-/thenify-3.3.1.tgz",
+      "integrity": "sha512-RVZSIV5IG10Hk3enotrhvz0T9em6cyHBLkH/YAZuKqd8hRkKhSfCGIcP2KUY0EPxndzANBmNllzWPwak+bheSw==",
+      "dependencies": {
+        "any-promise": "^1.0.0"
+      }
+    },
+    "node_modules/thenify-all": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/thenify-all/-/thenify-all-1.6.0.tgz",
+      "integrity": "sha512-RNxQH/qI8/t3thXJDwcstUO4zeqo64+Uy/+sNVRBx4Xn2OX+OZ9oP+iJnNFqplFra2ZUVeKCSa2oVWi3T4uVmA==",
+      "dependencies": {
+        "thenify": ">= 3.1.0 < 4"
+      },
+      "engines": {
+        "node": ">=0.8"
+      }
+    },
     "node_modules/throat": {
       "version": "6.0.1",
       "resolved": "https://registry.npmjs.org/throat/-/throat-6.0.1.tgz",
@@ -20157,6 +20271,11 @@
       "resolved": "https://registry.npmjs.org/tryer/-/tryer-1.0.1.tgz",
       "integrity": "sha512-c3zayb8/kWWpycWYg87P71E1S1ZL6b6IJxfb5fvsUgsf0S2MVGaDhDXXjDMpdCpfWXqptc+4mXwmiy1ypXqRAA=="
     },
+    "node_modules/ts-interface-checker": {
+      "version": "0.1.13",
+      "resolved": "https://registry.npmjs.org/ts-interface-checker/-/ts-interface-checker-0.1.13.tgz",
+      "integrity": "sha512-Y/arvbn+rrz3JCKl9C4kVNfTfSm2/mEp5FSz5EsZSANGPSlQrpRI5M4PKF+mJnE52jOO90PnPSc3Ur3bTQw0gA=="
+    },
     "node_modules/ts-mocha": {
       "version": "10.0.0",
       "resolved": "https://registry.npmjs.org/ts-mocha/-/ts-mocha-10.0.0.tgz",
@@ -22652,6 +22771,11 @@
         "typescript": "^4.9.4"
       }
     },
+    "@alloc/quick-lru": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/@alloc/quick-lru/-/quick-lru-5.2.0.tgz",
+      "integrity": "sha512-UrcABB+4bUrFABwbluTIBErXwvbsU/V7TZWfmbgJfbkwiBuziS9gxdODUyuiecfdGQ85jglMW6juS3+z5TsKLw=="
+    },
     "@babel/code-frame": {
       "version": "7.18.6",
       "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.18.6.tgz",
@@ -26101,16 +26225,6 @@
       "integrity": "sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==",
       "requires": {}
     },
-    "acorn-node": {
-      "version": "1.8.2",
-      "resolved": "https://registry.npmjs.org/acorn-node/-/acorn-node-1.8.2.tgz",
-      "integrity": "sha512-8mt+fslDufLYntIoPAaIMUe/lrbrehIiwmR3t2k9LljIzoigEPF27eLk2hy8zSGzmR/ogr7zbRKINMo1u0yh5A==",
-      "requires": {
-        "acorn": "^7.0.0",
-        "acorn-walk": "^7.0.0",
-        "xtend": "^4.0.2"
-      }
-    },
     "acorn-walk": {
       "version": "7.2.0",
       "resolved": "https://registry.npmjs.org/acorn-walk/-/acorn-walk-7.2.0.tgz",
@@ -26229,6 +26343,11 @@
         "color-convert": "^2.0.1"
       }
     },
+    "any-promise": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/any-promise/-/any-promise-1.3.0.tgz",
+      "integrity": "sha512-7UvmKalWRt1wgjL1RrGxoSJW/0QZFIegpeGvZG9kjp8vrRu55XTHbwnqq2GpXm9uLbcuhxm3IqX9OB4MZR1b2A=="
+    },
     "anymatch": {
       "version": "3.1.2",
       "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.2.tgz",
@@ -28862,11 +28981,6 @@
         "is-descriptor": "^0.1.0"
       }
     },
-    "defined": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/defined/-/defined-1.0.0.tgz",
-      "integrity": "sha1-yY2bzvdWdBiOEQlpFRGZ45sfppM="
-    },
     "delayed-stream": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
@@ -28930,16 +29044,6 @@
         }
       }
     },
-    "detective": {
-      "version": "5.2.1",
-      "resolved": "https://registry.npmjs.org/detective/-/detective-5.2.1.tgz",
-      "integrity": "sha512-v9XE1zRnz1wRtgurGu0Bs8uHKFSTdteYZNbIPFVhUZ39L/S79ppMpdmVOZAnoz1jfEFodc48n6MX483Xo3t1yw==",
-      "requires": {
-        "acorn-node": "^1.8.2",
-        "defined": "^1.0.0",
-        "minimist": "^1.2.6"
-      }
-    },
     "didyoumean": {
       "version": "1.2.2",
       "resolved": "https://registry.npmjs.org/didyoumean/-/didyoumean-1.2.2.tgz",
@@ -32457,6 +32561,11 @@
         }
       }
     },
+    "jiti": {
+      "version": "1.18.2",
+      "resolved": "https://registry.npmjs.org/jiti/-/jiti-1.18.2.tgz",
+      "integrity": "sha512-QAdOptna2NYiSSpv0O/BwoHBSmz4YhpzJHyi+fnMRTXFjp7B8i/YG5Z8IfusxB1ufjcD2Sre1F3R+nX3fvy7gg=="
+    },
     "js-sdsl": {
       "version": "4.2.0",
       "resolved": "https://registry.npmjs.org/js-sdsl/-/js-sdsl-4.2.0.tgz",
@@ -32771,9 +32880,9 @@
       }
     },
     "lilconfig": {
-      "version": "2.0.6",
-      "resolved": "https://registry.npmjs.org/lilconfig/-/lilconfig-2.0.6.tgz",
-      "integrity": "sha512-9JROoBW7pobfsx+Sq2JsASvCo6Pfo6WWoUW79HuB1BCoBXD4PLWJPqDF6fNj67pqBYTbAHkE57M1kS/+L1neOg=="
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/lilconfig/-/lilconfig-2.1.0.tgz",
+      "integrity": "sha512-utWOt/GHzuUxnLKxB6dk81RoOeoNeHgbrXiuGk4yyF5qlRz+iIVWu56E2fqGHFrXz0QNUhLB/8nKqvRH66JKGQ=="
     },
     "lines-and-columns": {
       "version": "1.1.6",
@@ -33435,6 +33544,16 @@
         "thunky": "^1.0.2"
       }
     },
+    "mz": {
+      "version": "2.7.0",
+      "resolved": "https://registry.npmjs.org/mz/-/mz-2.7.0.tgz",
+      "integrity": "sha512-z81GNO7nnYMEhrGh9LeymoE4+Yr0Wn5McHIZMK5cfQCl+NDX08sCZgUc9/6MHni9IWuFLm1Z3HTCXu2z9fN62Q==",
+      "requires": {
+        "any-promise": "^1.0.0",
+        "object-assign": "^4.0.1",
+        "thenify-all": "^1.0.0"
+      }
+    },
     "nan": {
       "version": "2.17.0",
       "resolved": "https://registry.npmjs.org/nan/-/nan-2.17.0.tgz",
@@ -33442,9 +33561,9 @@
       "optional": true
     },
     "nanoid": {
-      "version": "3.3.4",
-      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.4.tgz",
-      "integrity": "sha512-MqBkQh/OHTS2egovRtLk45wEyNXwF+cokD+1YPf9u5VfJiRdAiRwB2froX5Co9Rh20xs4siNPm8naNotSD6RBw=="
+      "version": "3.3.6",
+      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.6.tgz",
+      "integrity": "sha512-BGcqMMJuToF7i1rt+2PWSNVnWIkGCU78jBG3RxO/bZlnZPK2Cmi2QaffxGO/2RvWi9sL+FAiRiXMgsyxQ1DIDA=="
     },
     "nanomatch": {
       "version": "1.2.13",
@@ -34163,11 +34282,11 @@
       "integrity": "sha512-xTgYBc3fuo7Yt7JbiuFxSYGToMoz8fLoE6TC9Wx1P/u+LfeThMOAqmuyECnlBaaJb+u1m9hHiXUEtwW4OzfUJg=="
     },
     "postcss": {
-      "version": "8.4.20",
-      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.20.tgz",
-      "integrity": "sha512-6Q04AXR1212bXr5fh03u8aAwbLxAQNGQ/Q1LNa0VfOI06ZAlhPHtQvE4OIdpj4kLThXilalPnmDSOD65DcHt+g==",
+      "version": "8.4.24",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.24.tgz",
+      "integrity": "sha512-M0RzbcI0sO/XJNucsGjvWU9ERWxb/ytp1w6dKtxTKgixdtQDq4rmx/g8W1hnaheq9jgwL/oyEdH5Bc4WwJKMqg==",
       "requires": {
-        "nanoid": "^3.3.4",
+        "nanoid": "^3.3.6",
         "picocolors": "^1.0.0",
         "source-map-js": "^1.0.2"
       }
@@ -34436,9 +34555,9 @@
       }
     },
     "postcss-import": {
-      "version": "14.1.0",
-      "resolved": "https://registry.npmjs.org/postcss-import/-/postcss-import-14.1.0.tgz",
-      "integrity": "sha512-flwI+Vgm4SElObFVPpTIT7SU7R3qk2L7PyduMcokiaVKuWv9d/U+Gm/QAd8NDLuykTWTkcrjOeD2Pp1rMeBTGw==",
+      "version": "15.1.0",
+      "resolved": "https://registry.npmjs.org/postcss-import/-/postcss-import-15.1.0.tgz",
+      "integrity": "sha512-hpr+J05B2FVYUAXHeK1YyI267J/dDDhMU6B6civm8hSY1jYJnBXxzKDKDswzJmtLHryrjhnDjqqp/49t8FALew==",
       "requires": {
         "postcss-value-parser": "^4.0.0",
         "read-cache": "^1.0.0",
@@ -34452,9 +34571,9 @@
       "requires": {}
     },
     "postcss-js": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/postcss-js/-/postcss-js-4.0.0.tgz",
-      "integrity": "sha512-77QESFBwgX4irogGVPgQ5s07vLvFqWr228qZY+w6lW599cRlK/HmnlivnnVUxkjHnCu4J16PDMHcH+e+2HbvTQ==",
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/postcss-js/-/postcss-js-4.0.1.tgz",
+      "integrity": "sha512-dDLF8pEO191hJMtlHFPRa8xsizHaM82MLfNkUHdUtVEV3tgTp5oj+8qbEqYM57SLfc74KSbw//4SeJma2LRVIw==",
       "requires": {
         "camelcase-css": "^2.0.1"
       }
@@ -34611,11 +34730,11 @@
       }
     },
     "postcss-nested": {
-      "version": "6.0.0",
-      "resolved": "https://registry.npmjs.org/postcss-nested/-/postcss-nested-6.0.0.tgz",
-      "integrity": "sha512-0DkamqrPcmkBDsLn+vQDIrtkSbNkv5AD/M322ySo9kqFkCIYklym2xEmWkwo+Y3/qZo34tzEPNUw4y7yMCdv5w==",
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/postcss-nested/-/postcss-nested-6.0.1.tgz",
+      "integrity": "sha512-mEp4xPMi5bSWiMbsgoPfcP74lsWLHkQbZc3sY+jWYd65CUwXrUaTp0fmNpa01ZcETKlIgUdFN/MpS2xZtqL9dQ==",
       "requires": {
-        "postcss-selector-parser": "^6.0.10"
+        "postcss-selector-parser": "^6.0.11"
       }
     },
     "postcss-nesting": {
@@ -35145,7 +35264,8 @@
     "quick-lru": {
       "version": "5.1.1",
       "resolved": "https://registry.npmjs.org/quick-lru/-/quick-lru-5.1.1.tgz",
-      "integrity": "sha512-WuyALRjWPDGtt/wzJiadO5AXY+8hZ80hVpe6MyivgraREW751X3SbhRvG3eLKOYN+8VEvqLcf3wdnt44Z4S4SA=="
+      "integrity": "sha512-WuyALRjWPDGtt/wzJiadO5AXY+8hZ80hVpe6MyivgraREW751X3SbhRvG3eLKOYN+8VEvqLcf3wdnt44Z4S4SA==",
+      "dev": true
     },
     "raf": {
       "version": "3.4.1",
@@ -35884,11 +36004,11 @@
       "integrity": "sha512-LwZrotdHOo12nQuZlHEmtuXdqGoOD0OhaxopaNFxWzInpEgaLWoVuAMbTzixuosCx2nEG58ngzW3vxdWoxIgdg=="
     },
     "resolve": {
-      "version": "1.22.1",
-      "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.1.tgz",
-      "integrity": "sha512-nBpuuYuY5jFsli/JIs1oldw6fOQCBioohqWZg/2hiaOybXOft4lonv85uDOKXdf8rhyK159cxU5cDcK/NKk8zw==",
+      "version": "1.22.2",
+      "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.2.tgz",
+      "integrity": "sha512-Sb+mjNHOULsBv818T40qSPeRiuWLyaGMa5ewydRLFimneixmVy2zdivRl+AF6jaYPC8ERxGDmFSiqui6SfPd+g==",
       "requires": {
-        "is-core-module": "^2.9.0",
+        "is-core-module": "^2.11.0",
         "path-parse": "^1.0.7",
         "supports-preserve-symlinks-flag": "^1.0.0"
       }
@@ -36946,6 +37066,40 @@
       "resolved": "https://registry.npmjs.org/stylis/-/stylis-4.0.10.tgz",
       "integrity": "sha512-m3k+dk7QeJw660eIKRRn3xPF6uuvHs/FFzjX3HQ5ove0qYsiygoAhwn5a3IYKaZPo5LrYD0rfVmtv1gNY1uYwg=="
     },
+    "sucrase": {
+      "version": "3.32.0",
+      "resolved": "https://registry.npmjs.org/sucrase/-/sucrase-3.32.0.tgz",
+      "integrity": "sha512-ydQOU34rpSyj2TGyz4D2p8rbktIOZ8QY9s+DGLvFU1i5pWJE8vkpruCjGCMHsdXwnD7JDcS+noSwM/a7zyNFDQ==",
+      "requires": {
+        "@jridgewell/gen-mapping": "^0.3.2",
+        "commander": "^4.0.0",
+        "glob": "7.1.6",
+        "lines-and-columns": "^1.1.6",
+        "mz": "^2.7.0",
+        "pirates": "^4.0.1",
+        "ts-interface-checker": "^0.1.9"
+      },
+      "dependencies": {
+        "commander": {
+          "version": "4.1.1",
+          "resolved": "https://registry.npmjs.org/commander/-/commander-4.1.1.tgz",
+          "integrity": "sha512-NOKm8xhkzAjzFx8B2v5OAHT+u5pRQc2UCa2Vq9jYL/31o2wi9mxBA7LIFs3sV5VSC49z6pEhfbMULvShKj26WA=="
+        },
+        "glob": {
+          "version": "7.1.6",
+          "resolved": "https://registry.npmjs.org/glob/-/glob-7.1.6.tgz",
+          "integrity": "sha512-LwaxwyZ72Lk7vZINtNNrywX0ZuLyStrdDtabefZKAY5ZGJhVtgdznluResxNmPitE0SAO+O26sWTHeKSI2wMBA==",
+          "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"
+          }
+        }
+      }
+    },
     "supports-color": {
       "version": "7.2.0",
       "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
@@ -37094,33 +37248,33 @@
       "integrity": "sha512-9QNk5KwDF+Bvz+PyObkmSYjI5ksVUYtjW7AU22r2NKcfLJcXp96hkDWU3+XndOsUb+AQ9QhfzfCT2O+CNWT5Tw=="
     },
     "tailwindcss": {
-      "version": "3.2.4",
-      "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.2.4.tgz",
-      "integrity": "sha512-AhwtHCKMtR71JgeYDaswmZXhPcW9iuI9Sp2LvZPo9upDZ7231ZJ7eA9RaURbhpXGVlrjX4cFNlB4ieTetEb7hQ==",
+      "version": "3.3.2",
+      "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.3.2.tgz",
+      "integrity": "sha512-9jPkMiIBXvPc2KywkraqsUfbfj+dHDb+JPWtSJa9MLFdrPyazI7q6WX2sUrm7R9eVR7qqv3Pas7EvQFzxKnI6w==",
       "requires": {
+        "@alloc/quick-lru": "^5.2.0",
         "arg": "^5.0.2",
         "chokidar": "^3.5.3",
-        "color-name": "^1.1.4",
-        "detective": "^5.2.1",
         "didyoumean": "^1.2.2",
         "dlv": "^1.1.3",
         "fast-glob": "^3.2.12",
         "glob-parent": "^6.0.2",
         "is-glob": "^4.0.3",
-        "lilconfig": "^2.0.6",
+        "jiti": "^1.18.2",
+        "lilconfig": "^2.1.0",
         "micromatch": "^4.0.5",
         "normalize-path": "^3.0.0",
         "object-hash": "^3.0.0",
         "picocolors": "^1.0.0",
-        "postcss": "^8.4.18",
-        "postcss-import": "^14.1.0",
-        "postcss-js": "^4.0.0",
-        "postcss-load-config": "^3.1.4",
-        "postcss-nested": "6.0.0",
-        "postcss-selector-parser": "^6.0.10",
+        "postcss": "^8.4.23",
+        "postcss-import": "^15.1.0",
+        "postcss-js": "^4.0.1",
+        "postcss-load-config": "^4.0.1",
+        "postcss-nested": "^6.0.1",
+        "postcss-selector-parser": "^6.0.11",
         "postcss-value-parser": "^4.2.0",
-        "quick-lru": "^5.1.1",
-        "resolve": "^1.22.1"
+        "resolve": "^1.22.2",
+        "sucrase": "^3.32.0"
       },
       "dependencies": {
         "glob-parent": {
@@ -37135,6 +37289,20 @@
           "version": "3.0.0",
           "resolved": "https://registry.npmjs.org/object-hash/-/object-hash-3.0.0.tgz",
           "integrity": "sha512-RSn9F68PjH9HqtltsSnqYC1XXoWe9Bju5+213R98cNGttag9q9yAOTzdbsqvIa7aNm5WffBZFpWYr2aWrklWAw=="
+        },
+        "postcss-load-config": {
+          "version": "4.0.1",
+          "resolved": "https://registry.npmjs.org/postcss-load-config/-/postcss-load-config-4.0.1.tgz",
+          "integrity": "sha512-vEJIc8RdiBRu3oRAI0ymerOn+7rPuMvRXslTvZUKZonDHFIczxztIyJ1urxM1x9JXEikvpWWTUUqal5j/8QgvA==",
+          "requires": {
+            "lilconfig": "^2.0.5",
+            "yaml": "^2.1.1"
+          }
+        },
+        "yaml": {
+          "version": "2.3.1",
+          "resolved": "https://registry.npmjs.org/yaml/-/yaml-2.3.1.tgz",
+          "integrity": "sha512-2eHWfjaoXgTBC2jNM1LRef62VQa0umtvRiDSk6HSzW7RvS5YtkabJrwYLLEKWBc8a5U2PTSCs+dJjUTJdlHsWQ=="
         }
       }
     },
@@ -37230,6 +37398,22 @@
       "resolved": "https://registry.npmjs.org/thenby/-/thenby-1.3.4.tgz",
       "integrity": "sha512-89Gi5raiWA3QZ4b2ePcEwswC3me9JIg+ToSgtE0JWeCynLnLxNr/f9G+xfo9K+Oj4AFdom8YNJjibIARTJmapQ=="
     },
+    "thenify": {
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/thenify/-/thenify-3.3.1.tgz",
+      "integrity": "sha512-RVZSIV5IG10Hk3enotrhvz0T9em6cyHBLkH/YAZuKqd8hRkKhSfCGIcP2KUY0EPxndzANBmNllzWPwak+bheSw==",
+      "requires": {
+        "any-promise": "^1.0.0"
+      }
+    },
+    "thenify-all": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/thenify-all/-/thenify-all-1.6.0.tgz",
+      "integrity": "sha512-RNxQH/qI8/t3thXJDwcstUO4zeqo64+Uy/+sNVRBx4Xn2OX+OZ9oP+iJnNFqplFra2ZUVeKCSa2oVWi3T4uVmA==",
+      "requires": {
+        "thenify": ">= 3.1.0 < 4"
+      }
+    },
     "throat": {
       "version": "6.0.1",
       "resolved": "https://registry.npmjs.org/throat/-/throat-6.0.1.tgz",
@@ -37426,6 +37610,11 @@
       "resolved": "https://registry.npmjs.org/tryer/-/tryer-1.0.1.tgz",
       "integrity": "sha512-c3zayb8/kWWpycWYg87P71E1S1ZL6b6IJxfb5fvsUgsf0S2MVGaDhDXXjDMpdCpfWXqptc+4mXwmiy1ypXqRAA=="
     },
+    "ts-interface-checker": {
+      "version": "0.1.13",
+      "resolved": "https://registry.npmjs.org/ts-interface-checker/-/ts-interface-checker-0.1.13.tgz",
+      "integrity": "sha512-Y/arvbn+rrz3JCKl9C4kVNfTfSm2/mEp5FSz5EsZSANGPSlQrpRI5M4PKF+mJnE52jOO90PnPSc3Ur3bTQw0gA=="
+    },
     "ts-mocha": {
       "version": "10.0.0",
       "resolved": "https://registry.npmjs.org/ts-mocha/-/ts-mocha-10.0.0.tgz",

frontend/package.json

@@ -106,10 +106,10 @@
     "gh-pages": "^4.0.0",
     "postcss": "^8.4.5",
     "sazerac": "^2.0.0",
-    "tailwindcss": "^3.2.4"
+    "tailwindcss": "^3.3.2"
   },
   "optionalDependencies": {
     "@material-ui/core": "^4.12.3",
     "fsevents": "^2.3.2"
   }
-}
+}

frontend/public/index.html

@@ -25,7 +25,7 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
-  <title>Accord | Discord Clone With the Essentials</title>
+  <title>Accord | Messaging made simple.</title>
 
   <!-- External -->
   <link rel="preconnect" href="https://fonts.googleapis.com">

frontend/src/components/channel/message-box/message-box-left-side.tsx

@@ -32,7 +32,7 @@ const MessageBoxLeftSide: React.FunctionComponent<MessageBoxLeftSideProps> = (pr
           ref={uploadInput}
           type="file"
           name="file"
-          accept="image/*"
+          // accept="image/*"
           onChange={onChange}
           hidden />
         <FontAwesomeIcon

frontend/src/components/channel/message/message-content.tsx

@@ -24,21 +24,29 @@ const MessageContent: FunctionComponent<MessageContentProps> = ({ message }) =>
           title="${message.updatedAt}">(edited)</span>`
       : '');
 
-  const Attachments: React.FunctionComponent = () => (
-    <>
-      {message.attachmentURLs?.map(imageURL =>
-        <img
-          key={imageURL}
-          style={{ maxWidth: '384px', maxHeight: '384px' }}
-          className="my-2 cursor-pointer"
-          onClick={() => dispatch(previewImage(imageURL))}
-          src={process.env.REACT_APP_CDN_URL + imageURL}
-          onError={(e) => {
-            e.currentTarget.onerror = null;
-            e.currentTarget.src = `${process.env.REACT_APP_CDN_URL}/images/image-not-found.png`;
-          }} />)}
-    </>
-  );
+  const imageTypes = ['.png', '.jpg', '.gif', '.jpeg', '.webp', '.svg'];
+  const Attachments: React.FunctionComponent = () => 
+    message.attachmentURLs?.some(url => !imageTypes.some(ext => url.endsWith(ext)))
+      ? <>{message.attachmentURLs?.map(fileURL =>
+          <a key={fileURL}
+            target='_blank'
+            href={process.env.REACT_APP_CDN_URL + fileURL}
+            className='rounded-lg bg-bg-tertiary p-1 w-24'>
+              {fileURL.replace(/\/upload\/[0-9A-Za-z]{23,27}/, '')}
+          </a>)}
+        </>
+      : <>{message.attachmentURLs?.map(imageURL =>
+          <img
+            key={imageURL}
+            style={{ maxWidth: '384px', maxHeight: '384px' }}
+            className="my-2 cursor-pointer"
+            onClick={() => dispatch(previewImage(imageURL))}
+            src={process.env.REACT_APP_CDN_URL + imageURL}
+            onError={(e) => {
+              e.currentTarget.onerror = null;
+              e.currentTarget.src = `${process.env.REACT_APP_CDN_URL}/images/image-not-found.png`;
+            }} />)}
+        </>;
 
   return (editingMessageId === message.id)
     ? <MessageBox content={message.content} />

frontend/src/components/modals/channel-settings/channel-settings.tsx

@@ -20,7 +20,7 @@ const ChannelSettings: React.FunctionComponent = () => {
 
   return (channel) ? (
     <Modal typeName={'ChannelSettings'} size="full">
-      <div className="grid grid-cols-12 h-full">
+      <div className="overflow-hidden grid grid-cols-12 h-full">
         <div className="col-span-4 bg-bg-secondary">
           <nav className="float-right flex-grow py-14 w-1/2 my-1 mr-4">
             <Category

frontend/src/components/modals/guild-settings/guild-settings.tsx

@@ -35,9 +35,9 @@ const GuildSettings: React.FunctionComponent = () => {
         </div>
 
         <div className="col-span-6 h-full">
-          {tab === 'overview' && <GuildSettingsOverview />}
+          {tab === 'overview' && <div className="overflow-hidden"><GuildSettingsOverview /></div>}
           {tab === 'roles' && <GuildSettingsRoles />}
-          {tab === 'invites' && <GuildSettingsInvites />}
+          {tab === 'invites' && <div className="overflow-hidden"><GuildSettingsInvites /></div>}
         </div>
 
         <div className="col-span-2 h-full">

frontend/src/components/modals/user-profile.tsx

@@ -113,6 +113,7 @@ const UserProfile: FunctionComponent = () => {
                 childClasses="bg-bg-tertiary"
                 imageURL={guild.iconURL}
                 name={guild.name}
+                tooltip={guild.name}
                 disableHoverEffect />
             </div>
             : null

frontend/src/components/modals/user-settings/user-settings-themes.tsx

@@ -37,13 +37,13 @@ const UserSettingsThemes: React.FunctionComponent = () => {
           onClick={() => {
             enableAddMode(false);
             setTab(t.id);
-          }}
-          title={t.name}>
+          }}>
           <SidebarIcon
             childClasses={classNames('border-2 h-[3.1rem] bg-bg-secondary', {
               'border-primary': t.id === themeId,
               'border-transparent': t.id !== themeId,
             })}
+            tooltip={t.name}
             imageURL={t.iconURL}
             name={t.name}
             disableHoverEffect />
@@ -59,7 +59,7 @@ const UserSettingsThemes: React.FunctionComponent = () => {
   const ThemeDetails: React.FunctionComponent = () => {
     const { register, setValue, handleSubmit } = useForm();
     const theme = themes.find(t => t.id === themeId);
-    const creatorUser: Entity.User = useSelector(getUser(theme.creatorId));
+    const creatorUser: Entity.User = useSelector(getUser(theme?.creatorId));
     if (!theme) return null;
 
     const onApply = () => dispatch(updateSelf({ activeThemeId: themeId }));
@@ -165,7 +165,7 @@ const UserSettingsThemes: React.FunctionComponent = () => {
               register={register}
               options={{ value: theme.name }} />
 
-            <div className="bg-bg-secondary w-1/2 h-10 rounded-md p-2">
+            <div className="w-1/2 h-10 rounded-md p-2">
               <label className="uppercase text-xs font-semibold">Share URL</label>
               <div className='mt-1.5'>
                 <CircleButton
@@ -199,7 +199,7 @@ const UserSettingsThemes: React.FunctionComponent = () => {
               id="styles"
               disabled={!selfIsManager}
               rows={20}
-              className="p-2 rounded bg-bg-secondary outline-none  w-full mt-2"
+              className="p-2 rounded bg-bg-secondary outline-none w-full mt-2"
               defaultValue={theme.styles}
               {...register('styles', { value: theme.styles })} />
           </div>

frontend/src/components/modals/user-settings/user-settings.tsx

@@ -20,7 +20,7 @@ const UserSettings: React.FunctionComponent = () => {
     <Modal
       typeName={'UserSettings'}
       size="full">
-      <div className="grid grid-cols-12 h-full">
+      <div className="overflow-hidden grid grid-cols-12 h-full">
         <div className="col-span-4 bg-bg-secondary">
           <nav className="float-right flex-grow py-14 w-1/2 my-1 mr-4">
             <Category

frontend/src/components/navigation/sidebar/sidebar-content.tsx

@@ -10,7 +10,7 @@ const SidebarContent: React.FunctionComponent = () => {
   const guild = useSelector((s: Store.AppState) => s.ui.activeGuild);
 
   return (
-    <div className="flex flex-col bg-bg-secondary w-60">
+    <div className="w-60 flex flex-col bg-bg-secondary">
       <div
         id="sidebarHeader"
         className="items-center shadow-elevation cursor-pointer h-12 pl-2.5 pr-4"

frontend/src/components/utils/dropdown.tsx

@@ -12,7 +12,7 @@ const Dropdown: React.FunctionComponent<DropdownProps> = (props) => {
   const dropdown = useSelector((s: Store.AppState) => s.ui.openDropdown);
 
   return (
-    <div className="dropdown bg-bg-tertiary w-full pt-3">
+    <div className="dropdown bg-bg-secondary w-full pt-3">
       <div className="flex justify-between items-center">
         <h1 className="flex-grow font-bold pl-2">{props.title}</h1>
         <FontAwesomeIcon icon={faChevronDown} />

frontend/src/styles/theme/new-stars-theme.css

@@ -86,4 +86,9 @@ div.ReactModal__Overlay {
   to {
     opacity: 1;
   }
+}
+
+.react-contextmenu,
+[data-id="tooltip"] {
+  background-color: var(--bg-floating);
 }