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

@@ -426,9 +426,9 @@ export const Header = styled.div`
   }}
 
   .offline {
-    width: 16px; 
+    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;
-      margin-right: -5px;
-      margin-bottom: -1px;
+      width: 16px;
+      margin: -5px -4px -4px 3px;
       position: relative;
     }
 
     .offline-reply {
-      width: 13px;
-      margin-right: 2px;
-      margin-bottom: -1px;
+      width: 16px;
+      margin: -5px -4px -4px 3px;
       position: relative;
     }
 

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

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

src/components/views/Home.jsx

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