From 70e533a1c9cc0f08ee605c62b5dd9df10bfb672e Mon Sep 17 00:00:00 2001
From: Rexogamer <beartechtalks@gmail.com>
Date: Fri, 10 Nov 2023 15:02:22 +0000
Subject: [PATCH] feat(NetworkIndicator): make it less ugly/hideable

---
 src/components/NetworkIndicator.tsx | 26 +++++++++++++++++++-------
 1 file changed, 19 insertions(+), 7 deletions(-)

diff --git a/src/components/NetworkIndicator.tsx b/src/components/NetworkIndicator.tsx
index 141b5ec..7d0f227 100644
--- a/src/components/NetworkIndicator.tsx
+++ b/src/components/NetworkIndicator.tsx
@@ -1,5 +1,5 @@
-import React from 'react';
-import {View} from 'react-native';
+import React, {useState} from 'react';
+import {TouchableOpacity, View} from 'react-native';
 import {observer} from 'mobx-react-lite';
 
 import {Client} from 'revolt.js';
@@ -8,7 +8,8 @@ import {currentTheme} from '../Theme';
 import {Text} from './common/atoms';
 
 export const NetworkIndicator = observer(({client}: {client: Client}) => {
-  if (!client.user?.online && client.user?.status?.presence) {
+  const [collapsed, setCollapsed] = useState(false);
+  if (!client.user?.online && client.user?.status?.presence && !collapsed) {
     return (
       <View
         style={{
@@ -16,19 +17,30 @@ export const NetworkIndicator = observer(({client}: {client: Client}) => {
           top: 0,
           left: 0,
           width: '100%',
-          height: 32,
+          height: 50,
           alignItems: 'center',
           justifyContent: 'center',
-          backgroundColor: currentTheme.accentColor,
+          backgroundColor: currentTheme.background,
+          flexDirection: 'row',
         }}>
         <Text
-          colour={currentTheme.accentColorForeground}
+          colour={currentTheme.accentColor}
           style={{
             fontSize: 16,
             fontWeight: 'bold',
           }}>
-          Connection lost
+          Connection lost{' '}
         </Text>
+        <TouchableOpacity onPress={() => setCollapsed(true)}>
+          <Text
+            colour={currentTheme.accentColor}
+            style={{
+              fontSize: 16,
+              fontWeight: 'bold',
+            }}>
+            (hide)
+          </Text>
+        </TouchableOpacity>
       </View>
     );
   }