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 && ( <> - {" "} - offline + {isText ? ( + + (OFFLINE) + + ) : ( + 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} />
))}