improve offline indicators styling

src/components/styled/Board.styled.jsx

@@ -30,12 +30,6 @@ export const NavBar = styled.div`
     #board-nav-mobile {
       display: none;
     }
-
-    .offline-nav {
-      width: 12px;
-      position: relative;
-      margin: 2px 2px -2px -2px;
-    }
   }
 
   @media (max-width: 480px) {
@@ -244,13 +238,14 @@ export const Header = styled.div`
           margin: 5px auto;
           width: 300px;
           height: 100px;
+          
+          img {
+            border: none;
+            width: 300px;
+            height: 100px;
+          }
         }
 
-        img {
-          border: none;
-          width: 300px;
-          height: 100px;
-        }
 
         .board-title {
           font-family: Tahoma, sans-serif;
@@ -276,13 +271,14 @@ export const Header = styled.div`
           margin: 5px auto;
           width: 300px;
           height: 100px;
+          
+          img {
+            border: none;
+            width: 300px;
+            height: 100px;
+          }
         }
 
-        img {
-          border: none;
-          width: 300px;
-          height: 100px;
-        }
 
         .board-title {
           font-family: Tahoma, sans-serif;
@@ -307,13 +303,14 @@ export const Header = styled.div`
           margin: 5px auto;
           width: 300px;
           height: 100px;
+          
+          img {
+            border: none;
+            width: 300px;
+            height: 100px;
+          }
         }
 
-        img {
-          border: none;
-          width: 300px;
-          height: 100px;
-        }
 
         .board-title {
           font-size: 24pt;
@@ -336,13 +333,14 @@ export const Header = styled.div`
           margin: 5px auto;
           width: 300px;
           height: 100px;
+          
+          img {
+            border: none;
+            width: 300px;
+            height: 100px;
+          }
         }
 
-        img {
-          border: none;
-          width: 300px;
-          height: 100px;
-        }
 
         .board-title {
           font-size: 24pt;
@@ -366,12 +364,12 @@ export const Header = styled.div`
           width: 300px;
           height: 100px;
           max-width: 100%;
-        }
 
-        img {
+          img {
-          border: none;
+            border: none;
-          width: 300px;
+            width: 300px;
-          height: 100px;
+            height: 100px;
+          }
         }
 
         .board-title {
@@ -397,13 +395,14 @@ export const Header = styled.div`
           margin: 5px auto;
           width: 300px;
           height: 100px;
+          
+          img {
+            border: none;
+            width: 300px;
+            height: 100px;
+          }
         }
 
-        img {
-          border: none;
-          width: 300px;
-          height: 100px;
-        }
 
         .board-title {
           font-family: Tahoma, sans-serif;
@@ -424,6 +423,12 @@ export const Header = styled.div`
           return '';
       }
   }}
+
+  .offline {
+    width: 16px; 
+    position: relative;
+    margin: 2px 2px -4px 2px;
+  }
 `;
 
 export const Break = styled.hr`
@@ -1626,7 +1631,14 @@ export const BoardForm = styled.div`
     .offline-sub {
       width: 13px;
       margin-right: -5px;
-      margin-bottom: -2px;
+      margin-bottom: -3px;
+      position: relative;
+    }
+
+    .offline-reply {
+      width: 13px;
+      margin-right: 2px;
+      margin-bottom: -3px;
       position: relative;
     }
 
@@ -2981,12 +2993,14 @@ export const BoardForm = styled.div`
     margin-bottom: 335px;
 
     .offline-mobile-sub {
-      width: 18px;
+      width: 13px;
+      margin-top: 3px;
       margin-right: 5px;
     }
 
     .offline-mobile-sub-reply {
-      width: 15px;
+      width: 13px;
+      margin-top: 3px;
     }
 
     .thread {

src/components/styled/Home.styled.jsx

@@ -240,14 +240,11 @@ export const BoardsContent = styled.div`
     object-fit: cover;
   }
 
-  .board-avatar-container img.offline {
-    filter: brightness(50%);
-  }
-
   .offline-indicator {
     position: absolute;
     top: 5px;
     right: 5px;
+    width: 16px;
   }
 
   .board-text {

src/components/views/Board.jsx

@@ -370,10 +370,6 @@ const Board = () => {
                   {index === 0 ? null : "\u00a0"}
                   <Link to={`/p/${subplebbit.address}`} key={`a-${subplebbit.address}`} onClick={() => handleClickTitle(subplebbit.title, subplebbit.address)}
                   >{subplebbit.title ? subplebbit.title : subplebbit.address}</Link>
-                  <OfflineIndicator 
-                  address={subplebbit.address} 
-                  className="offline-nav"
-                  tooltipPlace="bottom" />
                   {index !== defaultSubplebbits.length - 1 ? " /" : null}
                 </span>
               ))}
@@ -428,10 +424,13 @@ const Board = () => {
             <div className="banner">
               <ImageBanner />
             </div>
-              <>
+            <div className="board-title">{selectedTitle}</div>
-              <div className="board-title">{selectedTitle}</div>
+            <div className="board-address">p/{selectedAddress}
-              <div className="board-address">p/{selectedAddress}</div>
+              <OfflineIndicator 
-              </>
+              address={selectedAddress} 
+              className="offline"
+              tooltipPlace="top" />
+            </div>
           </>
         </Header>
         <Break selectedStyle={selectedStyle} />

src/components/views/Subscriptions.jsx

@@ -172,10 +172,6 @@ const Subscriptions = () => {
                 {index === 0 ? null : "\u00a0"}
                 <Link to={`/p/${subplebbit.address}`} key={`a-${subplebbit.address}`} onClick={() => handleClickTitle(subplebbit.title, subplebbit.address)}
                 >{subplebbit.title ? subplebbit.title : subplebbit.address}</Link>
-                <OfflineIndicator 
-                address={subplebbit.address} 
-                className="offline-nav"
-                tooltipPlace="bottom" />
                 {index !== defaultSubplebbits.length - 1 ? " /" : null}
                 </span>
               ))}
@@ -523,12 +519,27 @@ const Subscriptions = () => {
                                 )}
                                 &nbsp;p/
                                 <Link key={`p-t-${index}`} to={`/p/${thread.subplebbitAddress}`} id="reply-button" title="Visit this board">
-                                {thread.subplebbitAddress.includes(".eth") ? thread.subplebbitAddress : (
+                                {thread.subplebbitAddress.includes(".eth") ? 
-                                  <span key={`short-add${index}`}
+                                (
-                                  data-tooltip-id="tooltip"
+                                  <>
-                                  data-tooltip-content={thread.subplebbitAddress}
+                                    {thread.subplebbitAddress}
-                                  data-tooltip-place="top"
+                                    <OfflineIndicator key={`offline-reply-${index}`} 
-                                  >{thread.subplebbitAddress.slice(0, 10) + "(...)"}</span>
+                                    address={thread.subplebbitAddress}
+                                    tooltipPlace="top"
+                                    className="offline-reply" />
+                                  </>
+                                ) : (
+                                  <>
+                                    <span key={`short-add${index}`}
+                                    data-tooltip-id="tooltip"
+                                    data-tooltip-content={thread.subplebbitAddress}
+                                    data-tooltip-place="top"
+                                    >{thread.subplebbitAddress.slice(0, 10) + "(...)"}</span>
+                                    <OfflineIndicator key={`offline-reply-${index}`}
+                                    address={thread.subplebbitAddress}
+                                    tooltipPlace="top"
+                                    className="offline-reply" />
+                                  </>
                                   )}
                               </Link>
                               </span>&nbsp;