From 80d7c4ff4bac4df576f4f40c4898b23c70f98be8 Mon Sep 17 00:00:00 2001
From: Tom <mottoes_recap0u@icloud.com>
Date: Mon, 29 May 2023 12:20:45 +0200
Subject: [PATCH] update offline indicator design and styling

---
 public/assets/offline.png                    | Bin 1240 -> 1270 bytes
 src/components/OfflineIndicator.jsx          |  28 +++++++++++--------
 src/components/styled/views/Board.styled.jsx |  14 ++++------
 src/components/styled/views/Home.styled.jsx  |  19 ++++++-------
 src/components/views/Home.jsx                |   4 +--
 5 files changed, 33 insertions(+), 32 deletions(-)

diff --git a/public/assets/offline.png b/public/assets/offline.png
index 72220cf8e2629c6e10383c2ab68aefe4779ae2af..edc011460fc8ca35f9a120740a2159573c15ab1c 100644
GIT binary patch
delta 686
zcmcb?`HfStGr-TCmrII^fq{Y7)59eQNDF{42OE%-|NK93qN06pMQVg+ny)W|7Ep|X
zfrU|sff>kR1VRQzDF#+Bn}NZOQ5w#6YtLk0fr|S9X%O%LVxSHPJ+WI-PhbHvToK4p
zhTEs_y8<cB0*}aI1_o|n5N2eUHAjMhfoamjy_Y8+XH=QIg;99&1V)u4J1zwnuqnw*
zOS6g$N-fUMDJ{v&&$BZ(veCy7MAs03O#_nP<ZdR5$vRAuEQV$_`jZWqL?_2FSx)}W
zD9U7LHkpq}Zt`I!z4|-upZ)>;<>l$(7-AvV8*J;};vg{ha&~X8`<LSpftO>dpR75@
z@8#r}Sjo!zkUc`OsCBCD#s~5ldu}xyV-n6>XSU0zc;DXC$ATVZ=`$+dzn!fr@YUwr
z)zy!#GB4bCw`Y+D$IoNSpMIHg&u+iQ|H#!pKYA_5oYm*kC&pmN!L+LW^{h|T!fsD?
z>2Vb?w74{!ER^9^@SJ47fWPU;CLPsTPC7<xk}ew7-208KU#;!BVtYQ>QI&574};rD
z^P&a!0@(Xb?&@rD^u4@d)v76*BUbNT&M&(5o~nMA)5j(Oi@DxUst;(m{J+n*=5VK2
zf@`tJ^P+8=ErP0!h;3VaxJ~xvvy3OtBKr^Q%$1$f$E;^$z~j6~XYuXhGau;n$(`7?
zFT6oI()-@I8C-e0`8V)|9#Q;%i19$#lk+>~%)9vKPm9I&-xc?@7x3+GR5ZSRRPp4K
fU#=ft9sb9pD7D<W<!Pu4C{1{}`njxgN@xNAtzGb$

delta 688
zcmeyyd4p52Gr-TCmrII^fq{Y7)59eQNQ(in2nQRG?5sI!Fj3JyHXt>^GtJkRK?^9x
z!N9~Q#J~(>F#;h&dnN-5n9abT2BaAnm=`c2WEU{OWyKaS!`UJrg(WtADhv!v1`~f>
zp3K6eGWjE;@Z__MDw8#scqZ#Ii}D*8*yyKLWTsgKWLBi+L{5IiBsKXolK_*E(d4^K
z0h6aO=}b;y)~k11aC#2VEvG$Q978Mw_f9eNKNKKve7%!Ti^rp;&dG~AxhL<k5In|L
zTI4XdAVH;ugZ<En11d)j9&A}yyuV>`cjs)s2?iaLB&3;E{#hUMIW9Wq@q_4l)#d+x
z-+g`ewegGT7jw*Pcl^G*YS}KGJ0JI5&61queA7jSsd-t@$_qyi*XvyjDvi3eti0Us
zy#9Tc(<OU13tILGFF546>5<@q)X1bo2NO2LgrBszwXpx@oVV4#XPeZ_HQW-T$A0T+
z(|$i81BnY&d(SQMTQ1z8sC8|XjDSRVx2VDgO;4L2n;Oidc(b<OmQj*CykJMI$7xTW
z%Pm(P3o}az8M1r+o?qyp^y5msMCw^irL)Xzjxz%DUz_<q+Zdm0lK)6=$FZ!>A{vJ(
zSk4MFFR0r4b+ww+osNRoqwSH*%u?&hXFc<by*fENA*JieZ4N2^?e<}2tRjL(uSGoi
z$hvoZv5{EhTlSAe#k)@3KW-M2biHY*&brr^PM!_<V)K2C;L{?@O}W*&HbGod6|%~!
z?_9mlvi!k)snFl~ueUA@@DJEicWIXKyJ<p?%|aaR?27oju;MNs|F#IFZ5DfP2ptr7
zR64owy6#yIRzGI0Y@vg3X^!6>t8_^3JIk?c$;2Bh4F4|ekq<~Z#&zSC?p#np@pScb
JS?83{1OV+d5Ig_?

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 && (
         <>
-          {" "}
-          <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}
+            />
+          )}
         </>
       )}
     </>
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 = () => {
                       <OfflineIndicator 
                         key={`offline-${index}`}
                         address={subscription} 
-                        className="disconnected"
-                        tooltipPlace="top" />
+                        className="offline-text"
+                        isText={true} />
                       <br key={`br-${index}`} />
                     </Fragment>
                   ))}