From 785f20c7dcffcea2d2aeb9eb0f79fed09e31a1e2 Mon Sep 17 00:00:00 2001
From: Tulir Asokan <tulir@maunium.net>
Date: Thu, 5 Dec 2024 16:07:14 +0200
Subject: [PATCH] web/rightpanel: improve error style in user view

---
 web/src/ui/rightpanel/RightPanel.css | 21 +++++++++++++++++++++
 web/src/ui/rightpanel/UserInfo.tsx   |  7 ++++++-
 2 files changed, 27 insertions(+), 1 deletion(-)

diff --git a/web/src/ui/rightpanel/RightPanel.css b/web/src/ui/rightpanel/RightPanel.css
index d0aa31f..e66c244 100644
--- a/web/src/ui/rightpanel/RightPanel.css
+++ b/web/src/ui/rightpanel/RightPanel.css
@@ -167,6 +167,27 @@ div.right-panel-content.user {
 			}
 		}
 	}
+
+	div.errors {
+		display: flex;
+		flex-direction: column;
+		gap: .5rem;
+
+		> div.error {
+			display: flex;
+			gap: .25rem;
+
+			> p {
+				margin: 0;
+			}
+
+			> div.icon {
+				margin-top: .125rem;
+				color: var(--error-color);
+				flex-shrink: 0;
+			}
+		}
+	}
 }
 
 div.right-panel-content.members {
diff --git a/web/src/ui/rightpanel/UserInfo.tsx b/web/src/ui/rightpanel/UserInfo.tsx
index 2bdeb9f..aca64b3 100644
--- a/web/src/ui/rightpanel/UserInfo.tsx
+++ b/web/src/ui/rightpanel/UserInfo.tsx
@@ -27,6 +27,7 @@ import { RoomContext } from "../roomview/roomcontext.ts"
 import EncryptedOffIcon from "@/icons/encrypted-off.svg?react"
 import EncryptedQuestionIcon from "@/icons/encrypted-question.svg?react"
 import EncryptedIcon from "@/icons/encrypted.svg?react"
+import ErrorIcon from "@/icons/error.svg?react"
 
 interface UserInfoProps {
 	userID: UserID
@@ -79,7 +80,10 @@ function renderErrors(errors: string[]) {
 	if (!errors.length) {
 		return null
 	}
-	return <div className="error">{errors.map((err, i) => <p key={i}>{err}</p>)}</div>
+	return <div className="errors">{errors.map((err, i) => <div className="error" key={i}>
+		<div className="icon"><ErrorIcon /></div>
+		<p>{err}</p>
+	</div>)}</div>
 }
 
 function renderFullInfo(
@@ -156,6 +160,7 @@ const DeviceList = ({ view, room }: DeviceListProps) => {
 			<h4>Security</h4>
 			<p>{encryptionMessage}</p>
 			<p>This user's device list is not being tracked.</p>
+			<hr/>
 		</div>
 	}
 	let verifiedMessage = null