diff --git a/web/assets/themes/soft.css b/web/assets/themes/soft.css index 6507fa701..2eb641e35 100644 --- a/web/assets/themes/soft.css +++ b/web/assets/themes/soft.css @@ -51,7 +51,9 @@ html, body { border: var(--boxshadow-border); } -.profile .profile-header .basic-info .namerole .role { +/* Role and bot badge borders */ +.profile .profile-header .basic-info .namerole .role, +.profile .profile-header .basic-info .namerole .bot-username-wrapper .bot-legend-wrapper { border: var(--boxshadow-border); } diff --git a/web/assets/themes/sunset-light.css b/web/assets/themes/sunset-light.css index d6c33d720..25bf1fad7 100644 --- a/web/assets/themes/sunset-light.css +++ b/web/assets/themes/sunset-light.css @@ -55,8 +55,9 @@ html, body { color: var(--eggshell); } -/* Role badge background */ -.profile .profile-header .basic-info .namerole .role { +/* Role and bot badge backgrounds */ +.profile .profile-header .basic-info .namerole .role, +.profile .profile-header .basic-info .namerole .bot-username-wrapper .bot-legend-wrapper { background: var(--eggshell); } diff --git a/web/source/css/profile.css b/web/source/css/profile.css index 3f7f43d0d..c8a948a49 100644 --- a/web/source/css/profile.css +++ b/web/source/css/profile.css @@ -134,16 +134,47 @@ font-size: 1.5rem; font-weight: bold; } - - .username { - min-width: 0; + + .bot-username-wrapper { + display: flex; + gap: 0.5rem; grid-area: username; - line-height: $username-size; - - font-size: 1rem; - font-weight: bold; - color: $fg-accent; - user-select: all; + align-items: center; + + .bot-legend-wrapper { + display: flex; + gap: 0.25rem; + align-items: center; + + background: $bg; + color: $fg; + + border-radius: $br; + padding: 0.1rem 0.4rem 0.2rem 0.4rem; + + font-variant: small-caps; + font-weight: bold; + + cursor: default; + + .bot-icon { + /* + FA icon is weirdly + aligned so tweak it + */ + margin-top: 0.25rem; + } + } + + .username { + min-width: 0; + line-height: $username-size; + + font-size: 1rem; + font-weight: bold; + color: $fg-accent; + user-select: all; + } } .role { 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
@@ -35,8 +35,24 @@ export default function FakeProfile({ avatar, header, display_name, username, ro
Display name
{display_name.trim().length > 0 ? display_name : username}
-
Username
-
@{username}
+
+ { bot && <> +
Bot account
+
+ true + +
+ } +
Username
+
@{username}
+
Role
{ (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 { - 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; } + + 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; + } + } + } } .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)
+ - Profile fields - +
+ Profile fields + +

Visibility and privacy

diff --git a/web/template/profile.tmpl b/web/template/profile.tmpl index a06c842ab..adeb83f3e 100644 --- a/web/template/profile.tmpl +++ b/web/template/profile.tmpl @@ -155,8 +155,24 @@ {{- .account.Username -}} {{- end -}} -
Username
-
@{{- .account.Username -}}@{{- .instance.AccountDomain -}}
+
+ {{- if .account.Bot }} +
Bot account
+
+ true + +
+ {{- end }} +
Username
+
@{{- .account.Username -}}@{{- .instance.AccountDomain -}}
+
{{- if and (.account.Role) (ne .account.Role.Name "user") }}
Role
{{- .account.Role.Name -}}