From e6b2cc32d4c0df24c8dc804b20197d4e89de60cf Mon Sep 17 00:00:00 2001
From: "plebeius.eth" <mottoes_recap0u@icloud.com>
Date: Mon, 20 Nov 2023 16:53:12 +0100
Subject: [PATCH] feat(sidebar): add moderators list

---
 src/components/sidebar/sidebar.module.css | 32 +++++++++++++++++++++++
 src/components/sidebar/sidebar.tsx        |  5 ++--
 2 files changed, 35 insertions(+), 2 deletions(-)

diff --git a/src/components/sidebar/sidebar.module.css b/src/components/sidebar/sidebar.module.css
index 2444b092..f57c0f41 100644
--- a/src/components/sidebar/sidebar.module.css
+++ b/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;
 }
\ No newline at end of file
diff --git a/src/components/sidebar/sidebar.tsx b/src/components/sidebar/sidebar.tsx
index 82bda66c..926fb59d 100644
--- a/src/components/sidebar/sidebar.tsx
+++ b/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>
   )