fix(app): rename class names that content blockers treat as ads (#1621)

This commit is contained in:
Hampus authored and GitHub committed 2026-08-15 13:16:44 +02:00
1 parent 2106102fc5
commit 6ef0f1fbe1
25 files changed
+59 -56

No files matched your search

@@ -230,7 +230,7 @@
background-color: var(--settings-border-color, var(--background-modifier-accent));
}
.additionalContent {
.extraContent {
margin-top: 2rem;
}
@@ -366,7 +366,7 @@ export const MobileSettingsList = observer(function MobileSettingsList<T extends
)}
{additionalContent && (
<div
className={styles.additionalContent}
className={styles.extraContent}
data-flx="app.mobile-settings-components.mobile-settings-list.additional-content"
>
{additionalContent}
@@ -198,7 +198,7 @@
display: none;
}
.addButton {
.categoryAddButton {
display: flex;
height: 1rem;
width: 1rem;
@@ -216,11 +216,11 @@
}
:global(:where(html.window-focused, html.unfocused-fully-interactive):not(.window-focus-activation-guard))
.addButton:hover {
.categoryAddButton:hover {
color: var(--text-primary);
}
.addButtonIcon {
.categoryAddButtonIcon {
height: 1rem;
width: 1rem;
}
@@ -581,7 +581,7 @@ const FavoriteCategoryItem = observer(
>
<button
type="button"
className={favoritesChannelListStyles.addButton}
className={favoritesChannelListStyles.categoryAddButton}
aria-label={i18n._(ADD_CHANNEL_DESCRIPTOR)}
onClick={(e) => {
e.stopPropagation();
@@ -591,7 +591,7 @@ const FavoriteCategoryItem = observer(
>
<PlusIcon
weight="bold"
className={favoritesChannelListStyles.addButtonIcon}
className={favoritesChannelListStyles.categoryAddButtonIcon}
data-flx="app.favorites-channel-list-content.favorite-category-item.plus-icon"
/>
</button>
@@ -455,11 +455,11 @@
}
}
.addGuildButton {
.createGuildButton {
composes: guildListItem;
}
.addGuildButtonIcon {
.createGuildButtonIcon {
display: flex;
align-items: center;
justify-content: center;
@@ -478,11 +478,11 @@
@media (hover: hover) and (pointer: fine) {
:global(:where(html.window-focused, html.unfocused-fully-interactive):not(.window-focus-activation-guard))
.addGuildButton:hover
.addGuildButtonIcon,
.createGuildButton:hover
.createGuildButtonIcon,
:global(:where(html.window-focused, html.unfocused-fully-interactive):not(.window-focus-activation-guard))
.addGuildButtonIcon:hover,
.addGuildButton.contextMenuHover .addGuildButtonIcon {
.createGuildButtonIcon:hover,
.createGuildButton.contextMenuHover .createGuildButtonIcon {
border-color: var(--text-primary);
}
}
@@ -97,7 +97,7 @@ export const AddGuildButton = observer(() => {
}
return (
<div
className={clsx(guildStyles.addGuildButton, contextMenuOpen && guildStyles.contextMenuHover)}
className={clsx(guildStyles.createGuildButton, contextMenuOpen && guildStyles.contextMenuHover)}
data-flx="app.sidebar-nav.add-guild-button.div"
>
<Tooltip
@@ -131,7 +131,7 @@ export const AddGuildButton = observer(() => {
>
<motion.div
ref={iconRef}
className={guildStyles.addGuildButtonIcon}
className={guildStyles.createGuildButtonIcon}
animate={{borderRadius: shouldShowHoverState ? '30%' : '50%'}}
initial={{borderRadius: shouldShowHoverState ? '30%' : '50%'}}
transition={{duration: Accessibility.useReducedMotion ? 0 : 0.07, ease: 'easeOut'}}
@@ -37,7 +37,7 @@ export const DiscoveryButton = observer(() => {
return null;
}
return (
<div className={guildStyles.addGuildButton} data-flx="app.sidebar-nav.discovery-button.div">
<div className={guildStyles.createGuildButton} data-flx="app.sidebar-nav.discovery-button.div">
<Tooltip
position="right"
size="large"
@@ -62,7 +62,7 @@ export const DiscoveryButton = observer(() => {
>
<motion.div
ref={iconRef}
className={guildStyles.addGuildButtonIcon}
className={guildStyles.createGuildButtonIcon}
animate={{borderRadius: isHovering || isSelected ? '30%' : '50%'}}
initial={{borderRadius: isHovering || isSelected ? '30%' : '50%'}}
transition={{duration: Accessibility.useReducedMotion ? 0 : 0.07, ease: 'easeOut'}}
@@ -67,7 +67,7 @@ export const DownloadButton = observer(() => {
const shouldShowHoverState = isHovering || contextMenuOpen;
return (
<div
className={clsx(guildStyles.addGuildButton, contextMenuOpen && guildStyles.contextMenuHover)}
className={clsx(guildStyles.createGuildButton, contextMenuOpen && guildStyles.contextMenuHover)}
data-flx="app.sidebar-nav.download-button.div"
>
<Tooltip
@@ -94,7 +94,7 @@ export const DownloadButton = observer(() => {
>
<motion.div
ref={iconRef}
className={guildStyles.addGuildButtonIcon}
className={guildStyles.createGuildButtonIcon}
animate={{borderRadius: shouldShowHoverState ? '30%' : '50%'}}
initial={{borderRadius: shouldShowHoverState ? '30%' : '50%'}}
transition={{duration: Accessibility.useReducedMotion ? 0 : 0.07, ease: 'easeOut'}}
@@ -68,7 +68,7 @@ export const HelpButton = observer(() => {
const shouldShowHoverState = isHovering || contextMenuOpen;
return (
<div
className={clsx(guildStyles.addGuildButton, contextMenuOpen && guildStyles.contextMenuHover)}
className={clsx(guildStyles.createGuildButton, contextMenuOpen && guildStyles.contextMenuHover)}
data-flx="app.sidebar-nav.help-button.div"
>
<Tooltip
@@ -101,7 +101,7 @@ export const HelpButton = observer(() => {
>
<motion.div
ref={iconRef}
className={guildStyles.addGuildButtonIcon}
className={guildStyles.createGuildButtonIcon}
animate={{borderRadius: shouldShowHoverState ? '30%' : '50%'}}
initial={{borderRadius: shouldShowHoverState ? '30%' : '50%'}}
transition={{duration: Accessibility.useReducedMotion ? 0 : 0.07, ease: 'easeOut'}}
@@ -163,11 +163,11 @@
line-height: 1.55;
}
.adminForm {
.accountSetupForm {
width: 100%;
}
.adminForm > form {
.accountSetupForm > form {
margin-top: 0;
gap: 0.875rem;
}
@@ -559,7 +559,7 @@ export const AdminAccountStep = observer(({theme}: {theme: ThemeType}) => {
const {i18n} = useLingui();
return (
<section className={styles.step} data-flx="app.self-hosted-setup-wizard-gate.admin-account-step">
<div className={styles.adminForm} data-flx="app.self-hosted-setup-wizard-gate.admin-form">
<div className={styles.accountSetupForm} data-flx="app.self-hosted-setup-wizard-gate.admin-form">
<AuthRegisterFormCore
fields={{
showEmail: true,