4 files changed, 30 insertions, 11 deletions
diff --git a/src/client/util/PingManager.ts b/src/client/util/PingManager.ts
index 9f4bd3642..0c41a1ea7 100644
--- a/src/client/util/PingManager.ts
+++ b/src/client/util/PingManager.ts
@@ -7,16 +7,23 @@ export class PingManager {
         return PingManager._instance;
     }
 
-    @observable IsBeating: boolean = true;
-    private setIsBeating = action((status: boolean) => (this.IsBeating = status));
+    @observable IsBeating = true;
+    private setIsBeating = action((status: boolean) => {
+        this.IsBeating = status;
+        setTimeout(this.showAlert, 100);
+    });
 
+    showAlert = () => {
+        alert(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.');
+    };
     sendPing = async (): Promise<void> => {
         try {
             await Networking.PostToServer('/ping', { date: new Date() });
             !this.IsBeating && this.setIsBeating(true);
         } catch {
-            console.error('ping error');
-            this.IsBeating && this.setIsBeating(false);
+            if (this.IsBeating) {
+                this.setIsBeating(false);
+            }
         }
     };
 
diff --git a/src/client/views/topbar/TopBar.scss b/src/client/views/topbar/TopBar.scss
index a0f803da5..ede59a910 100644
--- a/src/client/views/topbar/TopBar.scss
+++ b/src/client/views/topbar/TopBar.scss
@@ -9,8 +9,11 @@
 }
 .topbarHeart-red {
     .iconButton-container.primary {
+        .iconButton-content {
+            color: red;
+        }
         .iconButton-background {
-            background: red;
+            background: black;
         }
     }
 }
diff --git a/src/client/views/topbar/TopBar.tsx b/src/client/views/topbar/TopBar.tsx
index 157d7c04a..20cf563c1 100644
--- a/src/client/views/topbar/TopBar.tsx
+++ b/src/client/views/topbar/TopBar.tsx
@@ -1,4 +1,5 @@
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { Tooltip } from '@mui/material';
 import { Button, FontSize, IconButton, Size } from 'browndash-components';
 import { action, computed, observable, reaction } from 'mobx';
 import { observer } from 'mobx-react';
@@ -36,7 +37,9 @@ export class TopBar extends React.Component {
     };
 
     @observable textColor: string = Colors.LIGHT_GRAY;
-    @observable backgroundColor: string = Colors.DARK_GRAY;
+    @computed get backgroundColor() {
+        return PingManager.Instance.IsBeating ? Colors.DARK_GRAY : Colors.MEDIUM_GRAY;
+    }
 
     @observable happyHeart: boolean = PingManager.Instance.IsBeating;
     setHappyHeart = action((status: boolean) => (this.happyHeart = status));
@@ -146,9 +149,17 @@ export class TopBar extends React.Component {
                 <IconButton size={Size.SMALL} color={Colors.LIGHT_GRAY} onClick={ReportManager.Instance.open} icon={<FaBug />} />
                 <IconButton size={Size.SMALL} color={Colors.LIGHT_GRAY} onClick={() => window.open('https://brown-dash.github.io/Dash-Documentation/', '_blank')} icon={<FontAwesomeIcon icon="question-circle" />} />
                 <IconButton size={Size.SMALL} color={Colors.LIGHT_GRAY} onClick={SettingsManager.Instance.open} icon={<FontAwesomeIcon icon="cog" />} />
-                <div className={'topbarHeart' + (this.happyHeart ? '' : '-red')}>
-                    <IconButton size={Size.SMALL} color={this.happyHeart ? Colors.LIGHT_BLUE : Colors.ERROR_RED} icon={<FontAwesomeIcon icon={this.happyHeart ? 'heart' : 'heart-broken'} />} />
-                </div>
+                <Tooltip title={<div className="dash-tooltip">{'Server connection ' + (PingManager.Instance.IsBeating ? 'active' : 'broken')}</div>}>
+                    <div className={'topbarHeart' + (this.happyHeart ? '' : '-red')}>
+                        <IconButton
+                            size={Size.SMALL}
+                            onClick={PingManager.Instance.showAlert}
+                            tooltip={'Server is ' + (PingManager.Instance.IsBeating ? '' : 'NOT ') + 'running'}
+                            color={this.happyHeart ? Colors.LIGHT_BLUE : Colors.ERROR_RED}
+                            icon={<FontAwesomeIcon icon={this.happyHeart ? 'heart' : 'heart-broken'} />}
+                        />
+                    </div>
+                </Tooltip>
                 {/* <Button text={'Logout'} borderRadius={5} hoverStyle={'gray'} backgroundColor={Colors.DARK_GRAY} color={this.textColor} fontSize={FontSize.SECONDARY} onClick={() => window.location.assign(Utils.prepend('/logout'))} /> */}
             </div>
         );
diff --git a/src/server/ApiManagers/UploadManager.ts b/src/server/ApiManagers/UploadManager.ts
index de1661ed6..820e815d8 100644
--- a/src/server/ApiManagers/UploadManager.ts
+++ b/src/server/ApiManagers/UploadManager.ts
@@ -45,8 +45,6 @@ export default class UploadManager extends ApiManager {
             method: Method.POST,
             subscription: '/ping',
             secureHandler: async ({ req, res }) => {
-                // req.body contains the array of server paths to the videos
-                // console.log('ping', req.body);
                 _success(res, { message: 'pong', date: new Date() });
             },
         });