style(subplebbits list): improve design

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>
   );

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;

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}>