Merge branch 'master' into sophie-ai-images

1 files changed, 19 insertions, 5 deletions

diff --git a/src/client/util/ServerStats.tsx b/src/client/util/ServerStats.tsx
index f84ad8598..6a6ec158e 100644
--- a/src/client/util/ServerStats.tsx
+++ b/src/client/util/ServerStats.tsx
@@ -3,6 +3,9 @@ import { observer } from 'mobx-react';
 import * as React from 'react';
 import { MainViewModal } from '../views/MainViewModal';
 import './SharingManager.scss';
+import { PingManager } from './PingManager';
+import { StrCast } from '../../fields/Types';
+import { Doc } from '../../fields/Doc';
 
 @observer
 export class ServerStats extends React.Component<{}> {
@@ -39,11 +42,22 @@ export class ServerStats extends React.Component<{}> {
      */
     @computed get sharingInterface() {
         return (
-            <div>
-                <span>Active users:{this._stats?.socketMap.length}</span>
-                {this._stats?.socketMap.map((user: any) => (
-                    <p>{user.username}</p>
-                ))}
+            <div style={{
+                display: "flex",
+                height: 300,
+                width: 400,
+                background: StrCast(Doc.UserDoc().userBackgroundColor),
+                opacity: 0.6}}>
+                    <div style={{width: 300,height: 100,margin: "auto",display: "flex",flexDirection: "column"}}>
+                        {PingManager.Instance.IsBeating ? 'The server connection is active' :
+                            'The server connection has been interrupted.NOTE: Any changes made will appear to persist but will be lost after a browser refreshes.'}
+                          
+                    <br/>
+                    <span>Active users:{this._stats?.socketMap.length}</span>
+                    {this._stats?.socketMap.map((user: any) => (
+                        <p>{user.username}</p>
+                    ))}  
+                </div>
             </div>
         );
     }