From db25770a31fe164b44a2a5489bbf62816f8502db Mon Sep 17 00:00:00 2001
From: Lim Chee Aun <cheeaun@gmail.com>
Date: Mon, 19 Dec 2022 17:02:47 +0800
Subject: [PATCH] Add "verified" state for profile fields

---
 src/components/account.jsx | 35 +++++++++++++++++++++++------------
 1 file changed, 23 insertions(+), 12 deletions(-)

diff --git a/src/components/account.jsx b/src/components/account.jsx
index 3ec94240..4b66e7a6 100644
--- a/src/components/account.jsx
+++ b/src/components/account.jsx
@@ -7,6 +7,7 @@ import shortenNumber from '../utils/shorten-number';
 import store from '../utils/store';
 
 import Avatar from './avatar';
+import Icon from './icon';
 import NameText from './name-text';
 
 function Account({ account }) {
@@ -129,18 +130,28 @@ function Account({ account }) {
               __html: enhanceContent(note, { emojis }),
             }}
           />
-          <div class="profile-metadata">
-            {fields.map(({ name, value }) => (
-              <div class="profile-field" key={name}>
-                <b>{name}</b>
-                <p
-                  dangerouslySetInnerHTML={{
-                    __html: value,
-                  }}
-                />
-              </div>
-            ))}
-          </div>
+          {fields?.length > 0 && (
+            <div class="profile-metadata">
+              {fields.map(({ name, value, verifiedAt }) => (
+                <div
+                  class={`profile-field ${
+                    verifiedAt ? 'profile-verified' : ''
+                  }`}
+                  key={name}
+                >
+                  <b>
+                    {name}{' '}
+                    {!!verifiedAt && <Icon icon="check-circle" size="s" />}
+                  </b>
+                  <p
+                    dangerouslySetInnerHTML={{
+                      __html: value,
+                    }}
+                  />
+                </div>
+              ))}
+            </div>
+          )}
           <p class="stats">
             <span>
               <b title={statusesCount}>{shortenNumber(statusesCount)}</b> Posts