From ecc4b13c8f85057cebfe7ab90e7b8377e47060a2 Mon Sep 17 00:00:00 2001
From: Chowdhury Foysal Ahamed <foysal@blueskyweb.xyz>
Date: Fri, 18 Aug 2023 11:37:41 +0200
Subject: [PATCH] :lipstick: Move offline indicator on desktop and mobile web

---
 src/view/com/util/OfflineIndicator.tsx | 18 ++++++++++--------
 src/view/shell/desktop/LeftNav.tsx     |  2 ++
 src/view/shell/index.web.tsx           |  9 +++++++--
 3 files changed, 19 insertions(+), 10 deletions(-)

diff --git a/src/view/com/util/OfflineIndicator.tsx b/src/view/com/util/OfflineIndicator.tsx
index 5fbdb77654..6c07aed9d0 100644
--- a/src/view/com/util/OfflineIndicator.tsx
+++ b/src/view/com/util/OfflineIndicator.tsx
@@ -9,8 +9,7 @@ import {
 import {usePalette} from 'lib/hooks/usePalette'
 import {Text} from 'view/com/util/text/Text'
 import {s} from 'lib/styles'
-import {isNative} from 'platform/detection'
-import {CenteredView} from './Views.web'
+import {isDesktopWeb, isNative} from 'platform/detection'
 
 const Indicator = () => {
   const pal = usePalette('error')
@@ -19,12 +18,9 @@ const Indicator = () => {
     styles.container,
     s.flexRow,
     s.alignCenter,
+    pal.view,
   ]
 
-  if (!isNative) {
-    containerStyles.push(pal.view)
-  }
-
   return (
     <View style={containerStyles}>
       <FontAwesomeIcon icon="wifi" style={s.white as FontAwesomeIconStyle} />
@@ -50,9 +46,9 @@ export const OfflineIndicator = () => {
   }
 
   return (
-    <CenteredView>
+    <View style={isDesktopWeb ? undefined : styles.mobileWrapper}>
       <Indicator />
-    </CenteredView>
+    </View>
   )
 }
 
@@ -62,4 +58,10 @@ const styles = StyleSheet.create({
     justifyContent: 'center',
     height: 20,
   },
+  mobileWrapper: {
+    position: 'absolute',
+    left: 0,
+    bottom: 0,
+    width: '100%',
+  },
 })
diff --git a/src/view/shell/desktop/LeftNav.tsx b/src/view/shell/desktop/LeftNav.tsx
index 700857bbed..0b82d518c4 100644
--- a/src/view/shell/desktop/LeftNav.tsx
+++ b/src/view/shell/desktop/LeftNav.tsx
@@ -37,6 +37,7 @@ import {getCurrentRoute, isTab, isStateAtTabRoot} from 'lib/routes/helpers'
 import {NavigationProp, CommonNavigatorParams} from 'lib/routes/types'
 import {router} from '../../../routes'
 import {makeProfileLink} from 'lib/routes/links'
+import {OfflineIndicator} from 'view/com/util/OfflineIndicator'
 
 const ProfileCard = observer(() => {
   const store = useStores()
@@ -179,6 +180,7 @@ export const DesktopLeftNav = observer(function DesktopLeftNav() {
 
   return (
     <View style={[styles.leftNav, pal.view]}>
+      <OfflineIndicator />
       {store.session.hasSession && <ProfileCard />}
       <BackBtn />
       <NavItem
diff --git a/src/view/shell/index.web.tsx b/src/view/shell/index.web.tsx
index 35bfd1a1a7..9e0e8bfcc8 100644
--- a/src/view/shell/index.web.tsx
+++ b/src/view/shell/index.web.tsx
@@ -33,13 +33,13 @@ const ShellInner = observer(() => {
   return (
     <>
       <View style={s.hContentRegion}>
-        <OfflineIndicator />
         <ErrorBoundary>
           <FlatNavigator />
         </ErrorBoundary>
       </View>
       {isDesktop && store.session.hasSession && (
         <>
+          <OfflineIndicator />
           <DesktopLeftNav />
           <DesktopRightNav />
         </>
@@ -52,7 +52,12 @@ const ShellInner = observer(() => {
         quote={store.shell.composerOpts?.quote}
         onPost={store.shell.composerOpts?.onPost}
       />
-      {!isDesktop && <BottomBarWeb />}
+      {!isDesktop && (
+        <>
+          <BottomBarWeb />
+          <OfflineIndicator />
+        </>
+      )}
       <ModalsContainer />
       <Lightbox />
       {!isDesktop && store.shell.isDrawerOpen && (