From ec935a16a319b14e819ead828d1d9875280d9259 Mon Sep 17 00:00:00 2001
From: Gusted <postmaster@gusted.xyz>
Date: Sun, 10 Sep 2023 04:03:15 +0200
Subject: [PATCH] [MODERATION] Modernize frontend (squash)

- Unify blocked users list.
- Use the new flex list classes for blocked users list to avoid using
the CSS helper classes and thereby be consistent in the design.
- Fix the modal by using the new modal class.
- Remove the icon in the modal as looks too big in the new design.
- Fix avatar not displaying as it was passing the context where the user
should've been passed.
- Don't use italics for 'Blocked since' text.
- Use namelink template to display the user's name and homelink.
---
 templates/org/settings/blocked_users.tmpl  | 25 ++-------------
 templates/shared/blocked_users_list.tmpl   | 28 ++++++++++++++++
 templates/user/profile.tmpl                | 12 +++----
 templates/user/settings/blocked_users.tmpl | 37 +++++-----------------
 web_src/css/org.css                        |  9 ++----
 5 files changed, 48 insertions(+), 63 deletions(-)
 create mode 100644 templates/shared/blocked_users_list.tmpl

diff --git a/templates/org/settings/blocked_users.tmpl b/templates/org/settings/blocked_users.tmpl
index cc95b047d7..4133a43c69 100644
--- a/templates/org/settings/blocked_users.tmpl
+++ b/templates/org/settings/blocked_users.tmpl
@@ -14,27 +14,8 @@
 			<button type="submit" class="ui red button">{{.locale.Tr "user.block"}}</button>
 		</form>
 	</div>
-	<div class="ui bottom attached table segment blocked-users">
-		{{range .BlockedUsers}}
-			<div class="item gt-df gt-ac gt-fw">
-				{{ctx.AvatarUtils.Avatar $.Context . 48 "gt-mr-3 gt-mb-0"}}
-					<div class="gt-df gt-fc">
-						<a href="{{.HomeLink}}">{{.Name}}</a>
-						<i class="gt-mt-2">{{$.locale.Tr "settings.blocked_since" (DateTime "short" .CreatedUnix) | Safe}}</i>
-					</div>
-					<div class="gt-ml-auto content">
-						<form action="{{$.Link}}/unblock" method="post">
-							{{$.CsrfTokenHtml}}
-							<input type="hidden" name="user_id" value="{{.ID}}">
-							<button class="ui red button">{{$.locale.Tr "user.unblock"}}</button>
-						</form>
-					</div>
-				</div>
-			{{else}}
-				<div class="item">
-					<span class="text grey italic">{{$.locale.Tr "settings.blocked_users_none"}}</span>
-				</div>
-			{{end}}
-		</div>
+	<div class="ui attached segment">
+		{{template "shared/blocked_users_list" dict "locale" .locale "BlockedUsers" .BlockedUsers}}
+	</div>
 </div>
 {{template "org/settings/layout_footer" .}}
diff --git a/templates/shared/blocked_users_list.tmpl b/templates/shared/blocked_users_list.tmpl
new file mode 100644
index 0000000000..ba399159e3
--- /dev/null
+++ b/templates/shared/blocked_users_list.tmpl
@@ -0,0 +1,28 @@
+<div class="flex-list">
+	{{range .BlockedUsers}}
+		<div class="flex-item flex-item-center">
+			<div class="flex-item-leading">
+				{{ctx.AvatarUtils.Avatar . 48}}
+			</div>
+			<div class="flex-item-main">
+				<div class="flex-item-title">
+					{{template "shared/user/name" .}}
+				</div>
+				<div class="flex-item-body">
+					<span>{{$.locale.Tr "settings.blocked_since" (DateTime "short" .CreatedUnix) | Safe}}</span>
+				</div>
+			</div>
+			<div class="flex-item-trailing">
+				<form action="{{$.Link}}/unblock" method="post">
+					{{$.CsrfTokenHtml}}
+					<input type="hidden" name="user_id" value="{{.ID}}">
+					<button class="ui red button">{{$.locale.Tr "user.unblock"}}</button>
+				</form>
+			</div>
+		</div>
+	{{else}}
+		<div class="flex-item">
+			<span class="text grey italic">{{$.locale.Tr "settings.blocked_users_none"}}</span>
+		</div>
+	{{end}}
+</div>
diff --git a/templates/user/profile.tmpl b/templates/user/profile.tmpl
index 23fe5bda82..fafeaee3ec 100644
--- a/templates/user/profile.tmpl
+++ b/templates/user/profile.tmpl
@@ -40,17 +40,17 @@
 		</div>
 	</div>
 </div>
-<div class="ui small basic delete modal" id="block-user">
-	<div class="ui icon header">
-		{{svg "octicon-blocked" 16 "blocked inside"}}
+
+<div class="ui g-modal-confirm delete modal" id="block-user">
+	<div class="header">
 		{{$.locale.Tr "user.block_user"}}
 	</div>
 	<div class="content">
 		<p>{{$.locale.Tr "user.block_user.detail"}}</p>
 		<ul>
-				<li>{{$.locale.Tr "user.block_user.detail_1"}}</li>
-				<li>{{$.locale.Tr "user.block_user.detail_2"}}</li>
-				<li>{{$.locale.Tr "user.block_user.detail_3"}}</li>
+			<li>{{$.locale.Tr "user.block_user.detail_1"}}</li>
+			<li>{{$.locale.Tr "user.block_user.detail_2"}}</li>
+			<li>{{$.locale.Tr "user.block_user.detail_3"}}</li>
 		</ul>
 	</div>
 	{{template "base/modal_actions_confirm" .}}
diff --git a/templates/user/settings/blocked_users.tmpl b/templates/user/settings/blocked_users.tmpl
index ebfd70eefc..b7a35311c5 100644
--- a/templates/user/settings/blocked_users.tmpl
+++ b/templates/user/settings/blocked_users.tmpl
@@ -1,31 +1,10 @@
-{{template "user/settings/layout_head" (dict "ctxData" . "pageClass" "user settings blocked_users")}}
-	<div class="user-setting-content">
-		<h4 class="ui top attached header">
-			{{.locale.Tr "settings.blocked_users"}}
-		</h4>
-		<div class="ui attached segment">
-			<div class="ui blocked-user list gt-mt-0">
-				{{range .BlockedUsers}}
-					<div class="item gt-df gt-ac">
-						{{ctx.AvatarUtils.Avatar $.Context . 28 "gt-mr-3"}}
-						<div class="gt-df gt-fc">
-							<a href="{{.HomeLink}}">{{.Name}}</a>
-							<i class="gt-mt-2">{{$.locale.Tr "settings.blocked_since" (DateTime "short" .CreatedUnix) | Safe}}</i>
-						</div>
-						<div class="gt-ml-auto content">
-							<form action="{{$.Link}}/unblock" method="post">
-								{{$.CsrfTokenHtml}}
-								<input type="hidden" name="user_id" value="{{.ID}}">
-								<button class="ui red button">{{$.locale.Tr "user.unblock"}}</button>
-							</form>
-						</div>
-					</div>
-				{{else}}
-					<div class="item">
-						<span class="text grey italic">{{$.locale.Tr "settings.blocked_users_none"}}</span>
-					</div>
-				{{end}}
-			</div>
-		</div>
+{{template "user/settings/layout_head" (dict "ctxData" . "pageClass" "user settings blocked-users")}}
+<div class="user-setting-content">
+	<h4 class="ui top attached header">
+		{{.locale.Tr "settings.blocked_users"}}
+	</h4>
+	<div class="ui attached segment">
+		{{template "shared/blocked_users_list" dict "locale" .locale "BlockedUsers" .BlockedUsers}}
 	</div>
+</div>
 {{template "user/settings/layout_footer" .}}
diff --git a/web_src/css/org.css b/web_src/css/org.css
index aa54e948c3..037acd596a 100644
--- a/web_src/css/org.css
+++ b/web_src/css/org.css
@@ -167,20 +167,17 @@
 }
 
 .organization.teams .repositories .item,
-.organization.teams .members .item,
-.organization.settings .blocked-users .item {
+.organization.teams .members .item {
   padding: 10px 19px;
 }
 
 .organization.teams .repositories .item:not(:last-child),
-.organization.teams .members .item:not(:last-child),
-.organization.settings .blocked-users .item:not(:last-child) {
+.organization.teams .members .item:not(:last-child) {
   border-bottom: 1px solid var(--color-secondary);
 }
 
 .organization.teams .repositories .item .button,
-.organization.teams .members .item .button,
-.organization.settings .blocked-users .item button {
+.organization.teams .members .item .button {
   padding: 9px 10px;
   margin: 0;
 }