fix online counter parsing

change styling of OnlineBox and CanvasSwitchButton

src/components/OnlineBox.jsx

@@ -31,36 +31,35 @@ const OnlineBox = () => {
   const onlineUsers = (onlineCanvas) ? online[canvasId] : online.total;
 
   return (
-    <div>
+    <div
-      {(onlineUsers || name)
+      className="onlinebox"
+      role="button"
+      tabIndex="0"
+      onClick={() => dispatch(toggleOnlineCanvas())}
+    >
+      {(onlineCanvas)
         ? (
-          <div
+          <span
-            className="onlinebox"
+            title={t`Online Users on Canvas`}
-            role="button"
-            tabIndex="0"
-            onClick={() => dispatch(toggleOnlineCanvas())}
           >
-            {(onlineUsers)
+            {online[canvasId] || 0}<FaUser /><FaFlipboard />
-              && (
+          </span>
-              <span
+        )
-                title={(onlineCanvas)
+        : (
-                  ? t`Online Users on Canvas`
+          <span
-                  : t`Total Online Users`}
+            title={t`Total Online Users`}
-              >
+          >
-                {onlineUsers}
+            {online.total}<FaUser />
-                <FaUser />
+          </span>
-                {(onlineCanvas) && <FaFlipboard />}
+        )
-                 &nbsp;
+      }
-              </span>
+       &nbsp;
-              )}
+      {(name != null)
-            {(name != null)
+          && (
-                && (
+          <span title={t`Pixels placed`}>
-                <span title={t`Pixels placed`}>
+            {numberToString(totalPixels)} <FaPaintBrush />
-                  {numberToString(totalPixels)} <FaPaintBrush />
+          </span>
-                </span>
+      )}
-                )}
-          </div>
-        ) : null}
     </div>
   );
 };

src/components/buttons/CanvasSwitchButton.jsx

@@ -1,11 +1,10 @@
 /**
  *
- * @flow
  */
 
 import React from 'react';
 import { useDispatch } from 'react-redux';
-import { FaGlobe } from 'react-icons/fa';
+import { FaFlipboard } from 'react-icons/fa';
 import { t } from 'ttag';
 
 import { showCanvasSelectionModal } from '../../actions';
@@ -23,7 +22,7 @@ const CanvasSwitchButton = () => {
       title={t`Canvas Selection`}
       tabIndex={-1}
     >
-      <FaGlobe />
+      <FaFlipboard />
     </div>
   );
 };

src/socket/packets/OnlineCounter.js

@@ -31,7 +31,7 @@ export default {
   dehydrate(online) {
     // SERVER (sender)
     if (!process.env.BROWSER) {
-      const canvasIds = Object.keys(online);
+      const canvasIds = Object.keys(online).filter((id) => id !== 'total');
 
       const buffer = Buffer.allocUnsafe(3 + canvasIds.length * (1 + 2));
       buffer.writeUInt8(OP_CODE, 0);