SF-3067 Fix offline indicator not displaying

sillsdev · Nov 1, 2024 · 27446cf · 27446cf
1 parent 9215e04
commit 27446cf
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 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
@@ -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
@@ -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;