feat(sidebar): add moderators list

src/components/sidebar/sidebar.module.css

@@ -124,4 +124,36 @@ a {
 
 .createSub:hover .nub {
   background-image: var(--button-large-hover-nub);
+}
+
+.modListTitle {
+  display: inline;
+  text-transform: uppercase;
+  margin: 0;
+  color: gray;
+  font-size: 13px;
+  font-weight: normal;
+}
+
+.modListContent {
+  margin: 0;
+  padding: 5px;
+  border: 1px solid gray;
+  font-size: larger;
+  list-style: none;
+}
+
+.modListContent li {
+  font-size: 12px;
+  list-style: none;
+  text-decoration: none;
+  color: var(--text-primary);
+
+}
+
+.modListMore {
+  color: var(--text-info) !important;
+  text-align: right;
+  font-size: 10px !important;
+  cursor: pointer;
 }

src/components/sidebar/sidebar.tsx

@@ -30,10 +30,11 @@ const Sidebar = ({ address, createdAt, description, roles, shortAddress, title,
   const rolesList = roles ? Object.entries(roles).map(([address, { role }]) => ({ address, role })) : [];
 
   const moderatorsList = (
-    <ul>
+    <ul className={styles.modListContent}>
       {rolesList.map(({ address }, index) => (
-        <li key={index}>u/{address}</li>
+        <li key={index}>u/{getShortAddress(address)}</li>
       ))}
+      <li className={styles.modListMore}>about moderation team »</li>
     </ul>
   )