Light theme improvements, upgrade dependencies, upgrade to apollo server 3, v0.0.100

Author: yayvery

electron/package.json

@@ -1,7 +1,7 @@
 {
   "name": "electron",
   "description": "All-in-one chat and forums for communities.",
-  "version": "0.0.99",
+  "version": "0.0.100",
   "private": true,
   "repository": "github:joincomet/comet",
   "homepage": "https://joincomet.app",

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "comet",
-	"version": "0.0.99",
+	"version": "0.0.100",
 	"private": true,
 	"license": "MPL-2.0",
 	"author": {
@@ -32,12 +32,12 @@
 		"@graphql-codegen/typescript": "^1.23.0",
 		"@graphql-codegen/typescript-operations": "^1.18.4",
 		"@graphql-codegen/typescript-react-apollo": "^2.3.1",
-		"@types/node": "^16.3.2",
-		"@typescript-eslint/eslint-plugin": "^4.28.3",
-		"@typescript-eslint/parser": "^4.28.3",
+		"@types/node": "^16.4.0",
+		"@typescript-eslint/eslint-plugin": "^4.28.4",
+		"@typescript-eslint/parser": "^4.28.4",
 		"concurrently": "^6.2.0",
 		"cross-env": "^7.0.3",
-		"eslint": "^7.30.0",
+		"eslint": "^7.31.0",
 		"eslint-config-prettier": "^8.3.0",
 		"eslint-plugin-prettier": "^3.4.0",
 		"prettier": "^2.3.2",

server/package.json

@@ -1,6 +1,6 @@
 {
   "name": "server",
-  "version": "0.0.99",
+  "version": "0.0.100",
   "private": true,
   "engines": {
     "node": "16.x.x"
@@ -18,17 +18,17 @@
     "@n1ru4l/graphql-live-query": "^0.7.1",
     "@n1ru4l/in-memory-live-query-store": "^0.6.5",
     "add": "^2.0.6",
-    "apollo-server-express": "^2.25.2",
+    "apollo-server-express": "^3.0.2",
     "argon2": "^0.28.2",
-    "aws-sdk": "^2.947.0",
+    "aws-sdk": "^2.951.0",
     "class-validator": "^0.13.1",
     "cors": "^2.8.5",
     "cross-env": "^7.0.3",
     "dataloader": "^2.0.0",
     "dayjs": "^1.10.6",
     "express": "^4.17.1",
     "faker": "^5.5.3",
-    "file-type": "^16.5.1",
+    "file-type": "^16.5.2",
     "got": "^11.8.2",
     "graphql": "^15.4.0-experimental-stream-defer.1",
     "graphql-redis-subscriptions": "^2.4.0",
@@ -38,17 +38,17 @@
     "graphql-ws": "^5.3.0",
     "ioredis": "^4.27.6",
     "jsonwebtoken": "^8.5.1",
-    "metascraper": "^5.22.10",
-    "metascraper-author": "^5.22.10",
-    "metascraper-clearbit": "^5.22.9",
-    "metascraper-date": "^5.22.9",
-    "metascraper-description": "^5.22.9",
-    "metascraper-image": "^5.22.9",
-    "metascraper-logo": "^5.22.9",
-    "metascraper-publisher": "^5.22.10",
-    "metascraper-title": "^5.22.9",
-    "metascraper-url": "^5.22.9",
-    "metascraper-youtube": "^5.22.9",
+    "metascraper": "^5.22.11",
+    "metascraper-author": "^5.22.11",
+    "metascraper-clearbit": "^5.22.11",
+    "metascraper-date": "^5.22.11",
+    "metascraper-description": "^5.22.11",
+    "metascraper-image": "^5.22.11",
+    "metascraper-logo": "^5.22.11",
+    "metascraper-publisher": "^5.22.11",
+    "metascraper-title": "^5.22.11",
+    "metascraper-url": "^5.22.11",
+    "metascraper-youtube": "^5.22.11",
     "mikro-orm-cache-adapter-redis": "^1.1.1",
     "mime": "^2.5.2",
     "mudder": "^1.0.10",
@@ -59,7 +59,7 @@
     "sharp": "^0.28.3",
     "type-graphql": "^1.1.1",
     "typescript": "^4.3.5",
-    "user-agents": "^1.0.713",
+    "user-agents": "^1.0.719",
     "validator": "^13.6.0",
     "ws": "^7.5.3",
     "xss": "^1.0.9"
@@ -70,7 +70,7 @@
     "@types/express": "^4.17.13",
     "@types/faker": "^5.5.7",
     "@types/graphql-upload": "^8.0.6",
-    "@types/ioredis": "^4.26.5",
+    "@types/ioredis": "^4.26.6",
     "@types/jsonwebtoken": "^8.5.4",
     "@types/mime": "^2.0.3",
     "@types/sanitize-html": "^2.3.2",

server/src/bootstrap.ts

@@ -16,10 +16,11 @@ import cors from 'cors'
 import { InMemoryLiveQueryStore } from '@n1ru4l/in-memory-live-query-store'
 import { Disposable } from 'graphql-ws'
 import { seed } from '@/seed/seed'
+import { createServer } from 'http'
 
 const validationRules = [...specifiedRules, NoLiveMixedWithDeferStreamRule]
 
-const RESET = true // set TRUE to WIPE AND RESET DATABASE in dev
+const RESET = false // set TRUE to WIPE AND RESET DATABASE in dev
 
 export async function bootstrap() {
   console.log(`Initializing database connection...`)
@@ -43,7 +44,7 @@ export async function bootstrap() {
   const schema = await buildSchema(typeGraphQLConf)
 
   const app = express()
-
+  const httpServer = createServer(app)
   app.use(cors({ origin: true }))
   app.use(
     graphqlUploadExpress({
@@ -52,7 +53,6 @@ export async function bootstrap() {
     })
   )
   const apolloServer = new ApolloServer({
-    uploads: false,
     schema,
     validationRules,
     context: ({ req }) => {
@@ -69,12 +69,13 @@ export async function bootstrap() {
       } as Context
     }
   })
+  await apolloServer.start()
   apolloServer.applyMiddleware({ app })
 
   const port = +process.env.PORT || 4000
 
   let graphqlWs: Disposable
-  const server = app.listen(port, () => {
+  const server = httpServer.listen(port, () => {
     console.log(`Listening on port ${port}`)
     // create and use the websocket server
     const wsServer = new ws.Server({
@@ -118,11 +119,13 @@ export async function bootstrap() {
     )
   })
 
-  process.once('SIGINT', () => {
-    console.log('Received SIGINT. Shutting down HTTP and Websocket server.')
-    graphqlWs?.dispose()
-    server.close()
-    orm.close()
+  ;['SIGINT', 'SIGTERM'].forEach(signal => {
+    process.on(signal, () => {
+      console.log('Received SIGINT. Shutting down HTTP and Websocket server.')
+      graphqlWs?.dispose()
+      server.close()
+      orm.close()
+    })
   })
 
   await seed(orm.em.fork())

web/package.json

@@ -1,7 +1,7 @@
 {
   "name": "web",
   "description": "All-in-one chat and forums for communities.",
-  "version": "0.0.99",
+  "version": "0.0.100",
   "private": true,
   "repository": "github:joincomet/comet",
   "homepage": "https://joincomet.app",
@@ -45,17 +45,17 @@
     "fuse.js": "^6.4.6",
     "graphql": "^15.4.0-experimental-stream-defer.1",
     "graphql-ws": "^5.3.0",
-    "i18next": "^20.3.3",
+    "i18next": "^20.3.4",
     "i18next-browser-languagedetector": "^6.1.2",
     "react-contenteditable": "^3.3.5",
     "react-dnd": "^14.0.2",
     "react-dnd-html5-backend": "^14.0.0",
     "react-dnd-touch-backend": "^14.0.0",
     "react-dropzone": "^11.3.4",
     "react-helmet-async": "^1.0.9",
-    "react-hook-form": "^7.11.0",
+    "react-hook-form": "^7.11.1",
     "react-hot-toast": "^2.0.0",
-    "react-i18next": "^11.11.2",
+    "react-i18next": "^11.11.3",
     "react-icons": "^4.2.0",
     "react-intersection-observer": "^8.32.0",
     "react-player": "^2.9.0",
@@ -66,7 +66,7 @@
     "react-twitter-widgets": "^1.10.0",
     "react-use": "^17.2.4",
     "react-virtual": "^2.8.0",
-    "react-virtuoso": "^1.9.3",
+    "react-virtuoso": "^1.9.6",
     "react-youtube": "^7.13.1",
     "tippy.js": "^6.3.1",
     "twemoji": "^13.1.0",
@@ -91,14 +91,14 @@
     "graphiql": "^1.4.2",
     "graphql-tag": "^2.12.5",
     "meros": "^1.1.4",
-    "postcss": "^8.3.5",
+    "postcss": "^8.3.6",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "sass": "^1.35.2",
     "string-hash": "^1.1.3",
     "tailwind-scrollbar": "^1.3.1",
-    "tailwindcss": "^2.2.4",
-    "vite": "^2.4.2",
+    "tailwindcss": "^2.2.6",
+    "vite": "^2.4.3",
     "vite-plugin-pwa": "^0.8.1"
   },
   "resolutions": {

web/src/components/BottomBar.jsx

@@ -172,13 +172,13 @@ export default function BottomBar() {
             <>
               <Tippy content="Notifications" offset={offset}>
                 <Link to="/inbox">
-                  <IconBell className="w-4.5 h-4.5 cursor-pointer" />
+                  <IconBell className="w-4.5 h-4.5 cursor-pointer text-tertiary" />
                 </Link>
               </Tippy>
 
               <Tippy content="Settings" offset={offset}>
                 <div onClick={() => setOpen(true)}>
-                  <IconSettings className="w-4.5 h-4.5 cursor-pointer" />
+                  <IconSettings className="w-4.5 h-4.5 cursor-pointer text-tertiary" />
                 </div>
               </Tippy>
             </>

web/src/components/comment/Comment.jsx

@@ -46,11 +46,11 @@ export default function Comment({
   ])
   const isReplying = replyingCommentId === comment.id
 
-  if(comment.isDeleted && !comment.childCount) return null
+  if (comment.isDeleted && !comment.childCount) return null
 
   return (
     <div
-      className={`relative md:rounded dark:bg-gray-800 bg-white ${
+      className={`relative md:rounded dark:bg-gray-800 bg-gray-200 ${
         level === 0 ? '' : 'pl-4'
       }`}
     >
@@ -66,15 +66,19 @@ export default function Comment({
             <UserPopup user={comment.author} role={comment.serverUser?.role}>
               <UserAvatar
                 size={7}
-                className={`cursor-pointer transition ${!comment.author ? 'opacity-40 dark:bg-gray-700' : 'hover:opacity-90'}`}
+                className={`cursor-pointer transition ${
+                  !comment.author
+                    ? 'opacity-40 dark:bg-gray-700'
+                    : 'hover:opacity-90'
+                }`}
                 user={comment.author}
               />
             </UserPopup>
           </ContextMenuTrigger>
 
           <div
             className={`pl-3 pb-3 w-full ${
-              (!!comment.childCount) && !collapse
+              !!comment.childCount && !collapse
                 ? 'border-b dark:border-gray-750'
                 : ''
             }`}
@@ -93,7 +97,9 @@ export default function Comment({
                     }`}
                     style={{ color: comment.serverUser?.role?.color }}
                   >
-                    {comment.author?.username ?? <span className="text-mid">[deleted]</span>}
+                    {comment.author?.username ?? (
+                      <span className="text-mid">[deleted]</span>
+                    )}
                   </div>
                 </UserPopup>
               </ContextMenuTrigger>
@@ -265,7 +271,7 @@ export default function Comment({
 
       <div className="pl-3">
         {!collapse &&
-          comment.childComments.map((childComment) => (
+          comment.childComments.map(childComment => (
             <Comment
               key={childComment.id}
               comment={childComment}

web/src/components/comment/CreateCommentCard.jsx

@@ -14,7 +14,7 @@ export default function CreateCommentCard({ postId }) {
       {!open ? (
         <div
           onClick={() => setOpen(true)}
-          className="dark:bg-gray-700 h-13 flex items-center rounded transition dark:hover:bg-gray-650 cursor-pointer bg-gray-50"
+          className="dark:bg-gray-700 h-13 flex items-center rounded transition dark:hover:bg-gray-650 cursor-pointer bg-gray-200"
         >
           <div className="px-3 border-r dark:border-gray-650 h-7">
             <UserAvatar user={user} size={7} />
@@ -24,7 +24,7 @@ export default function CreateCommentCard({ postId }) {
           </div>
         </div>
       ) : (
-        <div className="dark:bg-gray-800 pt-3 pb-3 px-3 rounded flex">
+        <div className="dark:bg-gray-800 bg-gray-200 pt-3 pb-3 px-3 rounded flex">
           <div className="pr-3 mr-3 border-r dark:border-gray-750 inline-block h-7">
             <UserAvatar user={user} size={7} />
           </div>

web/src/components/message/Message.jsx

@@ -39,11 +39,6 @@ export default memo(function Message({
     [message]
   )
 
-  const showUser =
-    index === 0 ||
-    (prevMessage &&
-      (!prevMessage.text || prevMessage.author.id !== message.author.id))
-
   const day = Math.floor(
     new Date(message.createdAt).getTime() / (1000 * 60 * 60 * 24)
   )
@@ -54,6 +49,12 @@ export default memo(function Message({
       )
     : null
 
+  const showUser =
+    index === 0 ||
+    (prevMessage &&
+      (!prevMessage.text || prevMessage.author.id !== message.author.id)) ||
+    day > prevDay
+
   if (message.type === MessageType.Initial) {
     return <MessagesStart channel={channel} group={group} user={user} />
   }
@@ -92,7 +93,7 @@ export default memo(function Message({
               }}
             >
               <UserPopup user={message.author} role={message.serverUser?.role}>
-                <span className="ml-2 text-white cursor-pointer hover:underline">
+                <span className="ml-2 text-primary font-medium cursor-pointer hover:underline">
                   {message.author.username}
                 </span>
               </UserPopup>
@@ -111,9 +112,9 @@ export default memo(function Message({
     return (
       <div className={`${showUser ? 'pt-4' : ''}`}>
         {day > prevDay && (
-          <div className="pt-1 pb-4">
-            <div className="text-mid text-xs font-medium h-0 border-t border-gray-700 flex items-center justify-center">
-              <span className="dark:bg-gray-750 px-1 py-0.5">
+          <div className="pt-1 pb-4 px-4">
+            <div className="text-mid text-xs font-medium h-0 border-t dark:border-gray-700 border-gray-200 flex items-center justify-center">
+              <span className="dark:bg-gray-750 bg-white px-1 py-0.5">
                 {format(new Date(message.createdAt), 'MMMM d, y')}
               </span>
             </div>

web/src/components/message/input/MessageInput.jsx

@@ -210,7 +210,13 @@ export default function MessageInput({ channel, server, group, user, users }) {
     return () => {
       instance.destroy()
     }
-  }, [canSendMessage, placeholder, variables?.channelId, variables?.groupId, variables?.userId])
+  }, [
+    canSendMessage,
+    placeholder,
+    variables?.channelId,
+    variables?.groupId,
+    variables?.userId
+  ])
 
   // const editor = useEditor(editorOptions)
 
@@ -394,11 +400,9 @@ export default function MessageInput({ channel, server, group, user, users }) {
             }}
             className={`${canSendMessage ? 'px-14' : 'px-4 opacity-50'} ${
               currentUser ? '' : 'cursor-pointer'
-            } min-h-[3rem] max-h-[20rem] overflow-y-auto scrollbar-light dark:bg-gray-700 py-3 w-full rounded-lg text-base focus:outline-none text-secondary border-none bg-gray-100`}
+            } min-h-[3rem] max-h-[20rem] overflow-y-auto scrollbar-light dark:bg-gray-700 py-3 w-full rounded-lg text-base focus:outline-none text-secondary border-none bg-gray-200`}
           >
-            {!editor?.isDestroyed && (
-              <EditorContent editor={editor} />
-            )}
+            {!editor?.isDestroyed && <EditorContent editor={editor} />}
           </div>
         </div>