diff options
Diffstat (limited to 'web/source/settings')
| -rw-r--r-- | web/source/settings/components/profile.tsx | 22 | ||||
| -rw-r--r-- | web/source/settings/style.css | 30 | ||||
| -rw-r--r-- | web/source/settings/views/user/profile.tsx | 15 |
3 files changed, 51 insertions, 16 deletions
diff --git a/web/source/settings/components/profile.tsx b/web/source/settings/components/profile.tsx index 24cb3c4c2..ee50a6d33 100644 --- a/web/source/settings/components/profile.tsx +++ b/web/source/settings/components/profile.tsx @@ -19,7 +19,7 @@ import React from "react"; -export default function FakeProfile({ avatar, header, display_name, username, role }) { +export default function FakeProfile({ avatar, header, display_name, bot, username, role }) { return ( // Keep in sync with web/template/profile.tmpl <div className="profile"> <div className="profile-header"> @@ -35,8 +35,24 @@ export default function FakeProfile({ avatar, header, display_name, username, ro <dl className="namerole"> <dt className="sr-only">Display name</dt> <dd className="displayname text-cutoff">{display_name.trim().length > 0 ? display_name : username}</dd> - <dt className="sr-only">Username</dt> - <dd className="username text-cutoff">@{username}</dd> + <div className="bot-username-wrapper"> + { bot && <> + <dt className="sr-only">Bot account</dt> + <dd> + <span className="sr-only">true</span> + <div + className="bot-legend-wrapper" + aria-hidden="true" + title="This is a bot account." + > + <i className="bot-icon fa fa-microchip"></i> + <span className="bot-legend">bot</span> + </div> + </dd> + </>} + <dt className="sr-only">Username</dt> + <dd className="username text-cutoff">@{username}</dd> + </div> <dt className="sr-only">Role</dt> { (role && role.name != "user") ? diff --git a/web/source/settings/style.css b/web/source/settings/style.css index 1cf723754..9650f7466 100644 --- a/web/source/settings/style.css +++ b/web/source/settings/style.css @@ -445,22 +445,34 @@ section.with-sidebar > form { } } - .fields { + .theme, .form-field.radio { display: flex; flex-direction: column; gap: 0.5rem; - - .entry { + } + + fieldset { + margin: 0; + padding: 0.5rem 1rem 1rem 1rem; + max-width: fit-content; + border: 0.1rem solid var(--gray1); + border-radius: 0.1rem; + + >legend { + font-weight: bold; + } + + .fields { display: flex; + flex-direction: column; gap: 0.5rem; + + .entry { + display: flex; + gap: 0.5rem; + } } } - - .theme, .form-field.radio { - display: flex; - flex-direction: column; - gap: 0.5rem; - } } .migration-details { diff --git a/web/source/settings/views/user/profile.tsx b/web/source/settings/views/user/profile.tsx index f4088b353..6d476f80f 100644 --- a/web/source/settings/views/user/profile.tsx +++ b/web/source/settings/views/user/profile.tsx @@ -130,6 +130,7 @@ function UserProfileForm({ data: profile }) { avatar={form.avatar.previewValue ?? profile.avatar} header={form.header.previewValue ?? profile.header} display_name={form.displayName.value ?? profile.username} + bot={profile.bot} username={profile.username} role={profile.role} /> @@ -186,6 +187,10 @@ function UserProfileForm({ data: profile }) { Learn more about these settings (opens in a new tab) </a> </div> + <Checkbox + field={form.bot} + label="Mark as bot account; this indicates to other users that this is an automated account" + /> <TextInput field={form.displayName} label="Display name" @@ -200,10 +205,12 @@ function UserProfileForm({ data: profile }) { autoCapitalize="sentences" rows={8} /> - <b>Profile fields</b> - <ProfileFields - field={form.fields} - /> + <fieldset> + <legend>Profile fields</legend> + <ProfileFields + field={form.fields} + /> + </fieldset> <div className="form-section-docs"> <h3>Visibility and privacy</h3> |