From 168d6161aaa0e7ea2c5bc93cddecc3de5da23d48 Mon Sep 17 00:00:00 2001
From: "Tom (plebeius.eth)" <tom@plebbit.com>
Date: Thu, 6 Feb 2025 16:38:02 +0100
Subject: [PATCH] style(subplebbits list): improve design

---
 public/assets/moderator.png                  | Bin 0 -> 1374 bytes
 public/assets/private.png                    | Bin 0 -> 1442 bytes
 src/components/post/label/label.tsx          |   5 +--
 src/views/subplebbits/subplebbits.module.css |  34 ++++++++-----------
 src/views/subplebbits/subplebbits.tsx        |  25 +++++---------
 5 files changed, 27 insertions(+), 37 deletions(-)
 create mode 100644 public/assets/moderator.png
 create mode 100644 public/assets/private.png

diff --git a/public/assets/moderator.png b/public/assets/moderator.png
new file mode 100644
index 0000000000000000000000000000000000000000..59f22a5ac5402f0eb751cf2accab8659dd431b32
GIT binary patch
literal 1374
zcmc&zU1%It6rQ*>bb|?6h?v%gVIpE7^Se8logr(R>};Ebops$z=)TxycIIw&NM`PI
z=EmJkG>t_cT9m3)sZ=R~g7{FVidd@Ff&^2A*y@84@$aD+>OW!#n8Z7qZ1f=%@x@_g
z?!D)p@0{=a9n0tTx3}$VBM72BGpH8uN`~L|2>z=tAD_ib7fKh=5G<pr;RB-If+av^
z9Agv|fML}S&w)OIh}3Moh>BWPF`>g4p$=1XJd7rYzCAV1FvkEQOJLM?lhn@_E>fgz
zC8-0V#%W#(RP4b?9}G?AbaQgdlr3t{y<}fa!3G?F46^2oyMa<mQVqKb-iKnAA{#1b
zEJ>}CDr$K$1${t@OfPM6e4LbIh8KG!S?VDLd}g@>D{wR?D`HIH1ajk{us7c-D+P7m
zhA(_dQWb<eg=MSNDpQRy&>v-aS(aH&U<HB38gx*1kx`@Fpu1^71%c_?9<rfJh8B$y
zoIptmGhGkC@icAIup4Y73a5;%86L|s9P2n?Tn+626~Ny#w$u*vx(C<-2;hWo;(C<3
zn_!%~8#@XWF&pJR-^N8T##LxeIKV|2HA&$c#<DGiljD{IfJh6bVbO6hA<-qH6sILA
z#`C3ESr!uIrk$<uqR7Vv5`qvD`qMn076&jc6^jX6EFF&vy{RTP;|9oZP0;jhW8WKC
z{)Sj3<pTpjUx#qK*#-FuL@=m8k4&W+RVVM!4AXW);qI_d>v5~Vw;u%7J|8+{Bh!k#
z1&e=|fpxs~Uo*&JQf$~R|7f442=`>T-5dsd*c>O|;u-Ssu;`a>S-^ufozLoNysoXS
zO<h(0m-qbq$t-5D8x?Xx1kn<ScHGu^d)M8mtfn8VK6K>R@h6@>b^68k-oNzm{8!&y
z`+o8IuS+Yd-U<US=-rIkuO~kG@zVnxkCJz68|l38`4lX^y>@d|^I9I;^}{<)Egu|Q
zy<Z<5uIzmva;^UCo!-vJckOR`^VV-+{?%y9_SUSh?VD(}*mG*Gu=nKAw+@{n$G+Y%
z^U89h<Av8(?;3gTk>_V}t;$V)*N4#=frx%09lp4@bm^H=ewDf0IsH3YoExU{ykx&r
zJ<;<=WkvdB`Hd529{%&o^z70XQ;946*SmLU^QV8B{_TT>_|=uymOgv(>_TpqKX-oO
Y2yv*@tao3jx8p#FOgg8Y9T++K7o5)M5&!@I

literal 0
HcmV?d00001

diff --git a/public/assets/private.png b/public/assets/private.png
new file mode 100644
index 0000000000000000000000000000000000000000..73311cee40d6e3e983d070a740626f2729b6ecba
GIT binary patch
literal 1442
zcmbVMeM}o=7{7Ab66Okl;xa6HJKR<i+H0?0^g^MfEu&;b)>T){{@}h!Z?t#a-65qq
zR@jGZDqD;phNx?1O-7b1%*+|1hPsf*Hq9{8WieBd>JrV8IdMyxNW`~5(LcyyyyWhE
zpZ9%!&+~h}?pSx%j*S&{6%Yh%^mllJU`2{=xe|P(RO&uhHp{-SyjzIK1Ek18ZbqP3
z#2+Vn*&s_YgZnSD%@719xlmXR2X+#)5I2xT9YZpn0B8tmZcQdgx{s9+itXiiC;Ho`
z(<s6*PIQkoU<@QYY?SLriR|uFSBOsa(GCV}Z9$ro1TYY1WfDooW4uHpo#?V%0_=;&
z7>X>b$bC+9g;Y4ujd%o+MXUy!o;I2+h}~f@S#5TQy%E8Ij2W9S+^9D?2&<Ve;>hZQ
z0&gM{A%foaRbN1IqET5+5EwQvFkl!k8w9ZzGdUa%%!p$+t_K==X^@x6q@I@=N*27V
zM2lQP<^&!oS|ll<Uv{E^=}HLkL?Ezcn3q-)1yY73$pmIH7_oS~7}v74BnR1lXsoL(
zg$5HW7Gx!%U!*}jA`K-l$lb#o6%_#+;#rXcMImEef$op9yzKWnQE+2mIEFAfER3CH
zt$Lg$8NJ2YWY<$9WzpO1W|N6BM;v%lq-1A3yw73xdE9QF8FyPuCZDwp;5=qCZZ!KW
z7To43Vg0-$lRV9qd~?9}D%Sf@Ea4GZQWnIJAjC>t&>a<IL5d0q#N%16I-(1ZG{+YY
zpD7k<C2lV(axbw=yC}qw<xCUYIxPNM23GLQ|IHu<NMXfx`B(dtjzCWqw`;=ygtc*E
zc`!pF7#7FXJ1GcK<osTDDEU3LxU|#?x8!DLM=$MpZ|Uf!j;)IGSXCcns;rtW%U^eW
zrXBtG$AHFd(wwS)J=+9D2Q?=rpqbOj3-3IVPi7kU>Yt!(N>nkofFmDiE-$?7ij~i3
zkqyIzr$V>1qbK0+o~Wh`yS6}<uWDy+9obf^x__H`TE&mFZ+NU(NyRf0*EC0<xt@~~
zLyf`Kxx)N6g%4eO+h<>)PUqA=*EHs9U0)t+tLG}Si|5by52c{(JzFj*?l#T5kuGeW
z8?n1yEPJ)igxH|G^w!~Yv!b%2Y7X1MX{L<b%A30WTunv&y|;rZZ8o=n74oOTsu;Z0
zhSyJ(ht-SOS%nK8f+wr-#)GPvz_&V;YYci0uklZ5L%Ji-gU_?a;mnvWJsz7b*BvOI
zIp=!t=j8L7GPPfKy7s|Ucc@)0@aSvl@q^nh5)sr&4IiC9bmMUNEG1u^eEiW1W$&vq
z7vaCuS=a{ueq~t9JsJJtkG_l++9#i>Wa_FE`2)GOP8PYI+m8%cCX~P2PEW({Dz6L|
zeocR%=-E532&y~AZtmpkkWZZH8@BFYTTs0B!q_!+8iJv-o#Su*aH8RE@vrIkb$QRV
H^^E)t&j9OQ

literal 0
HcmV?d00001

diff --git a/src/components/post/label/label.tsx b/src/components/post/label/label.tsx
index 1c907a87..7a296d4f 100644
--- a/src/components/post/label/label.tsx
+++ b/src/components/post/label/label.tsx
@@ -5,13 +5,14 @@ interface LabelProps {
   color: string;
   text: string;
   isFirstInLine?: boolean;
+  title?: string;
 }
 
-const Label = ({ color, text, isFirstInLine = false }: LabelProps) => {
+const Label = ({ color, text, isFirstInLine = false, title = '' }: LabelProps) => {
   const { t } = useTranslation();
 
   return (
-    <span className={`${styles.label} ${isFirstInLine ? styles.firstInLine : ''}`}>
+    <span title={title} className={`${styles.label} ${isFirstInLine ? styles.firstInLine : ''}`}>
       <span className={`${styles.stamp} ${styles[color]}`}>{t(text)}</span>
     </span>
   );
diff --git a/src/views/subplebbits/subplebbits.module.css b/src/views/subplebbits/subplebbits.module.css
index 8539019f..0648913f 100644
--- a/src/views/subplebbits/subplebbits.module.css
+++ b/src/views/subplebbits/subplebbits.module.css
@@ -130,22 +130,29 @@
   color: var(--link);
 }
 
-.subscribeButton {
-  margin-left: 5px;
-}
-
 .tagline {
   text-transform: lowercase;
   margin-top: 2px;
 }
 
+.moderatorIcon {
+  background-image: url('/public/assets/moderator.png');
+  background-size: 100%;
+  background-repeat: no-repeat;
+  height: 16px;
+  width: 16px;
+  display: inline-block;
+  margin-left: 5px;
+  vertical-align: bottom;
+}
+
 .expandButton {
   background-size: cover;
   height: 23px;
   width: 23px;
   float: left;
   margin-right: 5px;
-  margin-top: 2px;
+  margin-top: 5px;
 }
 
 .textButton {
@@ -179,24 +186,13 @@
   font-size: 14px;
 }
 
-.subplebbitPreferences {
-  padding: 0 1px;
+.taglineSecondLine {
+  padding-left: 1px;
   line-height: 1.6em;
-  margin-top: 1px;
+  margin-top: 2px;
   margin-left: 28px;
 }
 
-.subplebbitPreferences a {
-  color: var(--gray-contrast);
-  font-weight: bold;
-  margin-left: 1px;
-} 
-
-.subplebbitPreferences a:hover {
-  text-decoration: underline;
-  cursor: pointer;
-}
-
 .subplebbitsTabs {
   border-bottom: 1px dotted gray;
   padding: 5px 10px;
diff --git a/src/views/subplebbits/subplebbits.tsx b/src/views/subplebbits/subplebbits.tsx
index fd129894..0fa8367f 100644
--- a/src/views/subplebbits/subplebbits.tsx
+++ b/src/views/subplebbits/subplebbits.tsx
@@ -131,7 +131,7 @@ const Subplebbit = ({ subplebbit }: SubplebbitProps) => {
 
   const postScore = upvoteCount === 0 && downvoteCount === 0 ? '•' : upvoteCount - downvoteCount || '•';
   const { allActiveUserCount } = useSubplebbitStats({ subplebbitAddress: address });
-  const { isOffline, isOnlineStatusLoading } = useIsSubplebbitOffline(subplebbit);
+  const { isOffline, isOnlineStatusLoading, offlineTitle } = useIsSubplebbitOffline(subplebbit);
 
   return (
     <div className={styles.subplebbit}>
@@ -158,25 +158,18 @@ const Subplebbit = ({ subplebbit }: SubplebbitProps) => {
               p/{address?.includes('.') ? address : shortAddress}
               {title && `: ${title}`}
             </Link>
-            <span className={styles.subscribeButton}>
-              <SubscribeButton address={address} />
-            </span>
           </div>
         </div>
         <div className={styles.tagline}>
           {description && <span className={`${styles.expandButton} ${styles[buttonType]}`} onClick={toggleExpanded} />}
-          <span>
-            {t('members_count', { count: allActiveUserCount })}, {t('community_for', { date: getFormattedTimeDuration(createdAt) })}
-            <div className={styles.subplebbitPreferences}>
-              {isOffline && !isOnlineStatusLoading && <Label color='red' text={t('offline')} />}
-              {(userRole || isUserOwner) && (
-                <span className={styles.label}>
-                  <Label color='green' text={userRole || 'owner'} />
-                </span>
-              )}
-              <Link to={`/p/${address}/settings`}>{t('settings')}</Link>
-            </div>
-          </span>
+          {t('members_count', { count: allActiveUserCount })}, {t('community_for', { date: getFormattedTimeDuration(createdAt) })}
+          <div className={styles.taglineSecondLine}>
+            <span className={styles.subscribeButton}>
+              <SubscribeButton address={address} />
+            </span>
+            {(userRole || isUserOwner) && <span className={styles.moderatorIcon} title={userRole || 'owner'} />}
+            {isOffline && !isOnlineStatusLoading && <Label color='red' title={offlineTitle} text={t('offline')} />}
+          </div>
         </div>
         {description && showDescription && (
           <div className={styles.description}>