grey out notifications

src/App.js

@@ -58,26 +58,14 @@ class App extends React.Component {
       this.state.chats.map(c => {
         if (c === socketId) {
           const messages = this.state.messages.concat(
-            this.formatMessage(
-              `${oldNick} disconnected`,
-              socketId,
-              '[server]',
-              c,
-              c === this.state.namespace ? true : false
-            )
+            this.addNotification(`${oldNick} disconnected`, c)
           )
           this.setState({ messages })
         }
         this.state.allNamespaces.map(n => {
           if (n.namespace === c && n.sockets.find(s => s === socketId)) {
             const messages = this.state.messages.concat(
-              this.formatMessage(
-                `${oldNick} disconnected`,
-                socketId,
-                '[server]',
-                c,
-                c === this.state.namespace ? true : false
-              )
+              this.addNotification(`${oldNick} disconnected`, c)
             )
             this.setState({ messages })
           }
@@ -92,13 +80,7 @@ class App extends React.Component {
       const user = this.state.allUsers.find(u => u.socketId === socketId)
       console.log(`${user.nick} joined ${namespace}`)
       const messages = this.state.messages.concat(
-        this.formatMessage(
-          `${user.nick} joined ${namespace}`,
-          socketId,
-          '[server]',
-          namespace,
-          namespace === this.state.namespace ? true : false
-        )
+        this.addNotification(`${user.nick} joined ${namespace}`, namespace)
       )
       this.setState({ messages })
     })
@@ -108,13 +90,7 @@ class App extends React.Component {
       const user = this.state.allUsers.find(u => u.socketId === socketId)
       console.log(`${user.nick} left ${namespace}`)
       const messages = this.state.messages.concat(
-        this.formatMessage(
-          `${user.nick} left ${namespace}`,
-          socketId,
-          '[server]',
-          namespace,
-          namespace === this.state.namespace ? true : false
-        )
+        this.addNotification(`${user.nick} left ${namespace}`, namespace)
       )
       this.setState({ messages })
     })
@@ -128,26 +104,14 @@ class App extends React.Component {
       this.state.chats.map(c => {
         if (c === user.socketId) {
           const messages = this.state.messages.concat(
-            this.formatMessage(
-              `${oldNick} is now known as ${user.nick}`,
-              user.socketId,
-              '[server]',
-              c,
-              c === this.state.namespace ? true : false
-            )
+            this.addNotification(`${oldNick} is now known as ${user.nick}`, c)
           )
           this.setState({ messages })
         }
         this.state.allNamespaces.map(n => {
           if (n.namespace === c && n.sockets.find(s => s === user.socketId)) {
             const messages = this.state.messages.concat(
-              this.formatMessage(
-                `${oldNick} is now known as ${user.nick}`,
-                user.socketId,
-                '[server]',
-                c,
-                c === this.state.namespace ? true : false
-              )
+              this.addNotification(`${oldNick} is now known as ${user.nick}`, c)
             )
             this.setState({ messages })
           }
@@ -222,6 +186,16 @@ class App extends React.Component {
     }
     this.setState({ message: '' })
   }
+
+  addNotification(text, namespace) {
+    return this.formatMessage(
+      text,
+      'server',
+      'server',
+      namespace,
+      namespace === this.state.namespace ? true : false
+    )
+  }
   formatMessage(text, from, nick, to, read) {
     if (!text || !from || !to || !nick) {
       console.log(
@@ -457,13 +431,18 @@ class App extends React.Component {
                       (m.from === this.state.user.socketId &&
                         m.to === this.state.namespace)
                   )
-                  .map(m => (
-                    <div className="d-flex" key={m.id}>
-                      <div className="p-2 text-nowrap">{m.date}</div>
-                      <div className="p-2">{m.nick}</div>
-                      <div className="p-2 flex-grow-1">{m.text}</div>
-                    </div>
-                  ))}
+                  .map(m => {
+                    const rowColor = m.from === 'server' ? 'text-secondary' : ''
+                    return (
+                      <div className={`d-flex ${rowColor}`} key={m.id}>
+                        <div className="pr-3 text-nowrap">{m.date}</div>
+                        {m.from === 'server' ? null : (
+                          <div className="pr-3 text-nowrap">{m.nick}:</div>
+                        )}
+                        <div className="pr-3 flex-grow-1">{m.text}</div>
+                      </div>
+                    )
+                  })}
               </div>
               <form onSubmit={this.submitMessage}>
                 <input