diff --git a/public/assets/offline.png b/public/assets/offline.png
index 72220cf8..edc01146 100644
Binary files a/public/assets/offline.png and b/public/assets/offline.png differ
diff --git a/src/components/OfflineIndicator.jsx b/src/components/OfflineIndicator.jsx
index 6596c4bf..3146385b 100644
--- a/src/components/OfflineIndicator.jsx
+++ b/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 && (
<>
- {" "}
-
+ {isText ? (
+
+ (OFFLINE)
+
+ ) : (
+
+ )}
>
)}
>
diff --git a/src/components/styled/views/Board.styled.jsx b/src/components/styled/views/Board.styled.jsx
index 598fc068..520ddfc4 100644
--- a/src/components/styled/views/Board.styled.jsx
+++ b/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;
}
diff --git a/src/components/styled/views/Home.styled.jsx b/src/components/styled/views/Home.styled.jsx
index 199d83a9..af60eeee 100644
--- a/src/components/styled/views/Home.styled.jsx
+++ b/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;
}
}
diff --git a/src/components/views/Home.jsx b/src/components/views/Home.jsx
index 45e14ff6..90ddabcc 100644
--- a/src/components/views/Home.jsx
+++ b/src/components/views/Home.jsx
@@ -124,8 +124,8 @@ const Home = () => {
+ className="offline-text"
+ isText={true} />
))}