diff --git a/src/components/account.css b/src/components/account.css index 7f57af99..ca155333 100644 --- a/src/components/account.css +++ b/src/components/account.css @@ -31,3 +31,27 @@ #account-container .actions button { align-self: flex-end; } + +#account-container .profile-metadata { + display: flex; + flex-wrap: wrap; + gap: 12px; +} +#account-container .profile-field { + flex-grow: 1; + font-size: 90%; + background-color: var(--bg-faded-color); + padding: 12px; + border-radius: 8px; + filter: saturate(0.75); + line-height: 1.25; +} + +#account-container .profile-field b { + font-size: 90%; + color: var(--text-insignificant-color); + text-transform: uppercase; +} +#account-container .profile-field p { + margin: 0; +} diff --git a/src/components/account.jsx b/src/components/account.jsx index ad7c77bd..3ec94240 100644 --- a/src/components/account.jsx +++ b/src/components/account.jsx @@ -129,6 +129,18 @@ function Account({ account }) { __html: enhanceContent(note, { emojis }), }} /> +
+ {fields.map(({ name, value }) => ( +
+ {name} +

+

+ ))} +

{shortenNumber(statusesCount)} Posts