From 868df44d2a9b44f372796b6a86970a47b4d2aa23 Mon Sep 17 00:00:00 2001
From: infinite-persistence <inf.persistence@gmail.com>
Date: Fri, 10 Sep 2021 12:37:27 +0800
Subject: [PATCH] Improve 'moderator-block' list visuals

- Added "Blocked on behalf of" to make things clearer.
- Use smaller ClaimPreview for delegators to save space (there might be lots of delegators)
---
 ui/page/listBlocked/view.jsx       | 11 +++++++----
 ui/scss/component/_block-list.scss | 27 +++++++++++++++++++++++++++
 2 files changed, 34 insertions(+), 4 deletions(-)

diff --git a/ui/page/listBlocked/view.jsx b/ui/page/listBlocked/view.jsx
index bee5ce11a..7e25a665b 100644
--- a/ui/page/listBlocked/view.jsx
+++ b/ui/page/listBlocked/view.jsx
@@ -133,11 +133,14 @@ function ListBlocked(props: Props) {
             {delegatorUrisForBlockedUri.map((delegatorUri) => {
               return (
                 <div className="block-list--delegator" key={delegatorUri}>
-                  <ul className="section content__non-clickable">
-                    <ClaimPreview uri={delegatorUri} hideMenu hideActions type="small" />
+                  <label>{__('Blocked on behalf of:')}</label>
+                  <ul className="section">
+                    <div className="content__non-clickable">
+                      <ClaimPreview uri={delegatorUri} hideMenu hideActions type="inline" properties={false} />
+                      {moderatorTimeoutMap[uri] && getBanInfoElem(moderatorTimeoutMap[uri])}
+                    </div>
+                    <ChannelBlockButton uri={uri} blockLevel={BLOCK_LEVEL.MODERATOR} creatorUri={delegatorUri} />
                   </ul>
-                  <ChannelBlockButton uri={uri} blockLevel={BLOCK_LEVEL.MODERATOR} creatorUri={delegatorUri} />
-                  {moderatorTimeoutMap[uri] && getBanInfoElem(moderatorTimeoutMap[uri])}
                 </div>
               );
             })}
diff --git a/ui/scss/component/_block-list.scss b/ui/scss/component/_block-list.scss
index bf46aed68..b7178d820 100644
--- a/ui/scss/component/_block-list.scss
+++ b/ui/scss/component/_block-list.scss
@@ -15,6 +15,33 @@
   .button--secondary {
     margin-top: var(--spacing-xxs);
   }
+
+  .claim-preview__wrapper {
+    border-bottom: none !important;
+    margin-bottom: var(--spacing-xs);
+  }
+
+  .claim-preview--inline {
+    .channel-thumbnail {
+      @include handleChannelGif(3rem);
+    }
+  }
+
+  .claim-preview__title {
+    font-size: var(--font-small);
+  }
+
+  .channel-name {
+    font-size: var(--font-xsmall);
+  }
+
+  .section {
+    margin-left: var(--spacing-m);
+  }
+
+  label {
+    font-style: italic;
+  }
 }
 
 .block-modal--values {