From 27446cf0154bb6c47324d4a5f92963b75bfecbdb Mon Sep 17 00:00:00 2001
From: Kyle Buss <kyle_buss@sil.org>
Date: Fri, 1 Nov 2024 12:19:37 -0500
Subject: [PATCH] SF-3067 Fix offline indicator not displaying

---
 .../ClientApp/src/app/app.component.html      | 11 ++++----
 .../ClientApp/src/app/app.component.scss      | 27 ++++++++++---------
 2 files changed, 19 insertions(+), 19 deletions(-)

diff --git a/src/SIL.XForge.Scripture/ClientApp/src/app/app.component.html b/src/SIL.XForge.Scripture/ClientApp/src/app/app.component.html
index e0ffbb1661..9a3062617d 100644
--- a/src/SIL.XForge.Scripture/ClientApp/src/app/app.component.html
+++ b/src/SIL.XForge.Scripture/ClientApp/src/app/app.component.html
@@ -96,13 +96,12 @@
             class="user-menu-btn"
           >
             @if (showInstallIconOnAvatar$ | async) {
-              <mat-icon class="install-badge">install_mobile</mat-icon>
+              <mat-icon class="user-icon-badge install-badge">install_mobile</mat-icon>
+            }
+            <app-avatar id="avatarId" [user]="currentUser"> </app-avatar>
+            @if (!isAppOnline) {
+              <mat-icon class="user-icon-badge offline-indicator">cloud_off</mat-icon>
             }
-            <app-avatar id="avatarId" [user]="currentUser">
-              @if (!isAppOnline) {
-                <mat-icon class="offline-indicator"> cloud_off</mat-icon>
-              }
-            </app-avatar>
           </button>
         }
         <mat-menu #userMenu="matMenu" class="user-menu">
diff --git a/src/SIL.XForge.Scripture/ClientApp/src/app/app.component.scss b/src/SIL.XForge.Scripture/ClientApp/src/app/app.component.scss
index b8376d0f83..51ecb40d85 100644
--- a/src/SIL.XForge.Scripture/ClientApp/src/app/app.component.scss
+++ b/src/SIL.XForge.Scripture/ClientApp/src/app/app.component.scss
@@ -171,17 +171,26 @@ header {
   &.user-menu-btn {
     padding: 0 !important;
 
-    .install-badge {
+    .user-icon-badge {
       position: absolute;
-      left: 3px;
       bottom: 3px;
       font-size: 12px;
-      color: variables.$purpleLight;
-      background: #fff;
-      border-radius: 50%;
       height: 16px;
       width: 16px;
       line-height: 1.4;
+      direction: inherit;
+
+      &.offline-indicator {
+        color: white;
+        inset-inline-end: 3px;
+      }
+
+      &.install-badge {
+        color: variables.$purpleLight;
+        background: #fff;
+        border-radius: 50%;
+        inset-inline-start: 3px;
+      }
     }
   }
 
@@ -191,14 +200,6 @@ header {
   }
 }
 
-.offline-indicator {
-  position: absolute;
-  inset-inline-end: 0;
-  direction: inherit; // needed to override direction: rtl from .material-icons
-  font-size: 12px;
-  color: white;
-}
-
 .online-status {
   display: flex;
   column-gap: 10px;