3 files changed, 21 insertions, 12 deletions
diff --git a/src/client/util/ServerStats.tsx b/src/client/util/ServerStats.tsx
index f84ad8598..b6aa4d95a 100644
--- a/src/client/util/ServerStats.tsx
+++ b/src/client/util/ServerStats.tsx
@@ -3,6 +3,7 @@ import { observer } from 'mobx-react';
 import * as React from 'react';
 import { MainViewModal } from '../views/MainViewModal';
 import './SharingManager.scss';
+import { PingManager } from './PingManager';
 
 @observer
 export class ServerStats extends React.Component<{}> {
@@ -39,11 +40,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: "black",
+                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>
         );
     }
diff --git a/src/client/views/GestureOverlay.tsx b/src/client/views/GestureOverlay.tsx
index 9d4ac6c96..35d6d73e4 100644
--- a/src/client/views/GestureOverlay.tsx
+++ b/src/client/views/GestureOverlay.tsx
@@ -30,7 +30,6 @@ import {
     SetActiveInkColor,
     SetActiveInkWidth,
 } from './InkingStroke';
-import { InkTranscription } from './InkTranscription';
 import TouchScrollableMenu, { TouchScrollableMenuItem } from './TouchScrollableMenu';
 import { Touchable } from './Touchable';
 import { checkInksToGroup } from './global/globalScripts';
diff --git a/src/client/views/topbar/TopBar.tsx b/src/client/views/topbar/TopBar.tsx
index 5c5547180..130e47a41 100644
--- a/src/client/views/topbar/TopBar.tsx
+++ b/src/client/views/topbar/TopBar.tsx
@@ -1,7 +1,6 @@
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { Button, IconButton, FontSize, Size, Type, isDark } from 'browndash-components';
+import { Button, IconButton, Size, Type, isDark } from 'browndash-components';
 import { action, computed, observable, reaction } from 'mobx';
-import { Tooltip } from '@mui/material';
 import { observer } from 'mobx-react';
 import * as React from 'react';
 import { FaBug, FaCamera, FaStamp } from 'react-icons/fa';
@@ -16,11 +15,11 @@ import { ServerStats } from '../../util/ServerStats';
 import { SettingsManager } from '../../util/SettingsManager';
 import { SharingManager } from '../../util/SharingManager';
 import { UndoManager } from '../../util/UndoManager';
-import { CollectionDockingView } from '../collections/CollectionDockingView';
 import { ContextMenu } from '../ContextMenu';
 import { DashboardView } from '../DashboardView';
-import { Colors } from '../global/globalEnums';
 import { MainView } from '../MainView';
+import { CollectionDockingView } from '../collections/CollectionDockingView';
+import { Colors } from '../global/globalEnums';
 import './TopBar.scss';
 
 /**
@@ -152,13 +151,12 @@ export class TopBar extends React.Component {
                         SharingManager.Instance.open(undefined, Doc.ActiveDashboard);
                     }}
                 />
-                <IconButton tooltip={"Server ⌘⇧S"} size={Size.SMALL} color={this.color} onClick={ServerStats.Instance.open} icon={<FaStamp />} />
                 <IconButton tooltip={"Issue Reporter ⌘I"} size={Size.SMALL} color={this.color} onClick={ReportManager.Instance.open} icon={<FaBug />} />
                 <IconButton tooltip={"Documentation ⌘D"} size={Size.SMALL} color={this.color} onClick={() => window.open('https://brown-dash.github.io/Dash-Documentation/', '_blank')} icon={<FontAwesomeIcon icon="question-circle" />} />
                 <IconButton tooltip={"Settings ⌘⇧S"} size={Size.SMALL} color={this.color} onClick={SettingsManager.Instance.open} icon={<FontAwesomeIcon icon="cog" />} />
                 <IconButton
                     size={Size.SMALL}
-                    onClick={PingManager.Instance.showAlert}
+                    onClick={ServerStats.Instance.open}
                     type={Type.TERT}
                     tooltip={'Server is ' + (PingManager.Instance.IsBeating ? '' : 'NOT ') + 'running'}
                     color={this.happyHeart ? Colors.LIGHT_BLUE : Colors.ERROR_RED}