From 42d40f082d89e6c8ef737d34bfdaa6ee78a43f93 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bar=C4=B1=C5=9F=20Soner=20U=C5=9Fakl=C4=B1?=
 <barisusakli@gmail.com>
Date: Mon, 29 Apr 2024 10:30:37 -0400
Subject: [PATCH] https://github.com/NodeBB/NodeBB/issues/12454

---
 templates/account/info.tpl | 37 +++++++++++++++++++++++++------------
 1 file changed, 25 insertions(+), 12 deletions(-)

diff --git a/templates/account/info.tpl b/templates/account/info.tpl
index f24eecd..c3b6eef 100644
--- a/templates/account/info.tpl
+++ b/templates/account/info.tpl
@@ -29,13 +29,20 @@
 				[[user:info.username-history]]
 			</h5>
 			<div class="card-body">
-				<ul class="list-group">
-					{{{each usernames}}}
-					<li class="list-group-item">
-						{../value}
-						<small class="float-end"><span class="timeago" title="{../timestampISO}"></span></small>
+				<ul class="list-unstyled mb-0">
+					{{{ each usernames }}}
+					<li class="d-flex justify-content-between mb-1">
+						<span class="text-sm">{./value}</span>
+
+						<div>
+							{{{ if ./byUid }}}
+							<a class="lh-1" href="{{{ if ./byUser.userslug }}}{config.relative_path}/user/{./byUser.userslug}{{{ else }}}#{{{ end }}}">
+							{buildAvatar(./byUser, "18px", true)}</a>
+							{{{ end }}}
+							<span class="timeago text-sm lh-1 align-middle" title="{./timestampISO}"></span>
+						</div>
 					</li>
-					{{{end}}}
+					{{{ end }}}
 				</ul>
 			</div>
 		</div>
@@ -45,13 +52,19 @@
 				[[user:info.email-history]]
 			</h5>
 			<div class="card-body">
-				<ul class="list-group">
-					{{{each emails}}}
-					<li class="list-group-item">
-						{../value}
-						<small class="float-end"><span class="timeago" title="{../timestampISO}"></span></small>
+				<ul class="list-unstyled mb-0">
+					{{{ each emails }}}
+					<li class="d-flex justify-content-between mb-1">
+						<span class="text-sm">{./value}</span>
+						<div>
+							{{{ if ./byUid }}}
+							<a class="lh-1" href="{{{ if ./byUser.userslug }}}{config.relative_path}/user/{./byUser.userslug}{{{ else }}}#{{{ end }}}">
+							{buildAvatar(./byUser, "18px", true)}</a>
+							{{{ end }}}
+							<span class="timeago text-sm lh-1 align-middle" title="{./timestampISO}"></span>
+						</div>
 					</li>
-					{{{end}}}
+					{{{ end }}}
 				</ul>
 			</div>
 		</div>