fix(app): unify guild acronyms and shrink them to fit (#3462)

This commit is contained in:
Hampus authored and GitHub committed 2026-10-14 16:02:18 +02:00
1 parent 069b13c382
commit d7bbe933fa
22 files changed
+267 -311

No files matched your search

@@ -203,8 +203,7 @@
border: 0.0625rem solid var(--entrance-sound-border);
background: color-mix(in srgb, #0f1014 80%, var(--background-header-secondary) 20%);
color: white;
font-size: 0.75rem;
font-weight: 700;
overflow: hidden;
}
.scopeTileText {
@@ -3,6 +3,7 @@
import RuntimeConfig from '@app/features/app/state/RuntimeConfig';
import {LimitResolver} from '@app/features/app/utils/LimitResolverAdapter';
import {isLimitToggleEnabled} from '@app/features/app/utils/LimitUtils';
import {GuildAcronym} from '@app/features/guild/components/GuildAcronym';
import Guilds from '@app/features/guild/state/Guilds';
import {DIRECT_MESSAGES_DESCRIPTOR, GET_PREMIUM_DESCRIPTOR} from '@app/features/i18n/utils/CommonMessageDescriptors';
import {getCachedNumberFormat} from '@app/features/i18n/utils/IntlCache';
@@ -186,7 +187,6 @@ interface ScopeArtworkProps {
function ScopeArtwork({option, selected, compact}: ScopeArtworkProps): React.ReactElement {
if (option.guildId) {
const iconUrl = option.guildIcon ? AvatarUtils.getGuildIconURL({id: option.guildId, icon: option.guildIcon}) : null;
const initial = option.label.trim().charAt(0).toUpperCase() || '?';
return iconUrl ? (
<span
className={clsx(styles.scopeAvatar, compact && styles.scopeAvatarCompact)}
@@ -200,7 +200,10 @@ function ScopeArtwork({option, selected, compact}: ScopeArtworkProps): React.Rea
aria-hidden
data-flx="user.entrance-sound-section.scope-artwork.scope-avatar-placeholder"
>
{initial}
<GuildAcronym
name={option.label}
data-flx="user.entrance-sound-section.scope-artwork.scope-avatar-placeholder-acronym"
/>
</span>
);
}
@@ -48,8 +48,7 @@
align-items: center;
justify-content: center;
color: white;
font-weight: 700;
font-size: 0.85rem;
overflow: hidden;
border: 0.0625rem solid var(--background-modifier-accent);
}
@@ -1,6 +1,7 @@
// SPDX-License-Identifier: AGPL-3.0-or-later
import type {GuildComboboxOption} from '@app/features/app/components/dialogs/shared/GuildComboboxRenderers';
import {GuildAcronym} from '@app/features/guild/components/GuildAcronym';
import Guilds from '@app/features/guild/state/Guilds';
import {Combobox} from '@app/features/ui/components/form/FormCombobox';
import styles from '@app/features/user/components/modals/tabs/my_profile_tab/ProfileTypeSelector.module.css';
@@ -31,7 +32,6 @@ export const ProfileTypeSelector = observer(({selectedGuildId, onChange, disable
const renderGuildRow = useCallback((option: GuildComboboxOption) => {
const isGlobal = !option.value;
const iconUrl = option.icon ? AvatarUtils.getGuildIconURL({id: option.value, icon: option.icon}) : null;
const initial = option.label.charAt(0).toUpperCase();
return (
<div
className={clsx(styles.guildOption, isGlobal && styles.guildOptionGlobal)}
@@ -51,7 +51,10 @@ export const ProfileTypeSelector = observer(({selectedGuildId, onChange, disable
aria-hidden
data-flx="user.my-profile-tab.profile-type-selector.render-guild-row.guild-avatar-placeholder"
>
{initial}
<GuildAcronym
name={option.label}
data-flx="user.my-profile-tab.profile-type-selector.render-guild-row.guild-avatar-placeholder-acronym"
/>
</div>
))}
<span