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