update offline indicator design and styling

src/components/OfflineIndicator.jsx

@@ -1,8 +1,7 @@
 import React from "react";
 import { useSubplebbit } from "@plebbit/plebbit-react-hooks";
 
-
+const OfflineIndicator = ({ address, className, tooltipPlace, isText }) => {
-const OfflineIndicator = ({ address, className, tooltipPlace }) => {
   const subplebbit = useSubplebbit({ subplebbitAddress: address });
   const isOnline = subplebbit.updatedAt > Date.now() / 1000 - 60 * 20;
 
@@ -10,15 +9,22 @@ const OfflineIndicator = ({ address, className, tooltipPlace }) => {
     <>
       {!isOnline && (
         <>
-          {" "}
+          {isText ? (
-          <img
+            <span
-            className={className}
+              className={className}
-            alt="offline"
+            >
-            src="assets/offline.png"
+              (OFFLINE)
-            data-tooltip-id="tooltip"
+            </span>
-            data-tooltip-content="Offline"
+          ) : (
-            data-tooltip-place={tooltipPlace}
+            <img
-          />
+              className={className}
+              alt="offline"
+              src="assets/offline.png"
+              data-tooltip-id="tooltip"
+              data-tooltip-content="Offline"
+              data-tooltip-place={tooltipPlace}
+            />
+          )}
         </>
       )}
     </>

src/components/styled/views/Board.styled.jsx

@@ -428,7 +428,7 @@ export const Header = styled.div`
   .offline {
     width: 16px;
     position: relative;
-    margin: 2px 2px -2px 2px;
+    margin: 3px 0 -3px 3px;
   }
 `;
 
@@ -1653,16 +1653,14 @@ export const BoardForm = styled.div`
     }
 
     .offline-sub {
-      width: 13px;
+      width: 16px;
-      margin-right: -5px;
+      margin: -5px -4px -4px 3px;
-      margin-bottom: -1px;
       position: relative;
     }
 
     .offline-reply {
-      width: 13px;
+      width: 16px;
-      margin-right: 2px;
+      margin: -5px -4px -4px 3px;
-      margin-bottom: -1px;
       position: relative;
     }
 

src/components/styled/views/Home.styled.jsx

@@ -242,8 +242,8 @@ export const BoardsContent = styled.div`
 
   .offline-indicator {
     position: absolute;
-    top: 5px;
+    top: 3px;
-    right: 5px;
+    right: 3px;
     width: 16px;
   }
 
@@ -284,10 +284,8 @@ export const BoardsContent = styled.div`
       font-size: 1.2em;
     }
 
-    .disconnected {
+    .offline-text {
-      width: 15px;
+      
-      margin-bottom: -1px;
-      position: absolute;
     }
   }
 
@@ -296,11 +294,10 @@ export const BoardsContent = styled.div`
       display: none;
     }
 
-    .disconnected {
+    .offline-text {
-      width: 11px;
+      font-size: 9px;
-      margin-bottom: -1px;
+      color: red;
-      margin-top: 2px;
+      font-weight: 700;
-      position: absolute;
     }
   }
 

src/components/views/Home.jsx

@@ -124,8 +124,8 @@ const Home = () => {
                       <OfflineIndicator 
                         key={`offline-${index}`}
                         address={subscription} 
-                        className="disconnected"
+                        className="offline-text"
-                        tooltipPlace="top" />
+                        isText={true} />
                       <br key={`br-${index}`} />
                     </Fragment>
                   ))}