update offline indicator

src/components/BoardAvatar.jsx

@@ -16,7 +16,7 @@ const BoardAvatar = ({ address }) => {
   return (
     <div className="board-avatar-container">
       <img
-        className={isOnline ? "board-avatar" : "board-avatar offline"}
+        className="board-avatar"
         alt="board logo"
         src={avatarUrl}
       />

src/components/BoardSubscription.jsx

@@ -10,7 +10,7 @@ const BoardSubscription = ({ address }) => {
   return (
     <>
       &nbsp;{address}{!isOnline && (
-        <img className="disconnected" alt="offline" src="assets/disconnected.png" />
+        <img className="disconnected" alt="offline" src="assets/offline.png" />
       )}
     </>
   );

src/components/styled/Home.styled.jsx

@@ -246,11 +246,8 @@ export const BoardsContent = styled.div`
 
   .offline-indicator {
     position: absolute;
-    top: calc(50% - 10px);
-    left: 0;
-    width: 100%;
-    object-fit: cover;
-    z-index: 1;
+    top: 5px;
+    right: 5px;
   }
 
   .board-text {
@@ -298,7 +295,7 @@ export const BoardsContent = styled.div`
   }
 
   .disconnected {
-    width: 15px;
+    width: 13px;
     position: absolute;
   }
 `;

src/components/views/Home.jsx

@@ -125,9 +125,7 @@ const Home = () => {
                       setSelectedTitle(subplebbit.title);
                       setSelectedAddress(subplebbit.address);
                     }} >
-                      <div className="board-avatar-container">
-                        <BoardAvatar address={subplebbit.address} />
-                      </div>
+                      <BoardAvatar address={subplebbit.address} />
                     </Link>
                     <div className="board-text">
                       <b>{subplebbit.address}</b>