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

fluxer_app/src/features/app/components/dialogs/shared/MobileSettingsComponents.module.css

@@ -230,7 +230,7 @@
 	background-color: var(--settings-border-color, var(--background-modifier-accent));
 }
 
-.additionalContent {
+.extraContent {
 	margin-top: 2rem;
 }
 

fluxer_app/src/features/app/components/dialogs/shared/MobileSettingsComponents.tsx

@@ -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}

fluxer_app/src/features/app/components/layout/FavoritesChannelListContent.module.css

@@ -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;
 }

fluxer_app/src/features/app/components/layout/FavoritesChannelListContent.tsx

@@ -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>

fluxer_app/src/features/app/components/layout/GuildsLayout.module.css

@@ -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
+		.createGuildButton:hover
-		.addGuildButtonIcon,
+		.createGuildButtonIcon,
 	:global(:where(html.window-focused, html.unfocused-fully-interactive):not(.window-focus-activation-guard))
-		.addGuildButtonIcon:hover,
+		.createGuildButtonIcon:hover,
-	.addGuildButton.contextMenuHover .addGuildButtonIcon {
+	.createGuildButton.contextMenuHover .createGuildButtonIcon {
 		border-color: var(--text-primary);
 	}
 }

fluxer_app/src/features/app/components/layout/sidebar_nav/AddGuildButton.tsx

@@ -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'}}

fluxer_app/src/features/app/components/layout/sidebar_nav/DiscoveryButton.tsx

@@ -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'}}

fluxer_app/src/features/app/components/layout/sidebar_nav/DownloadButton.tsx

@@ -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'}}

fluxer_app/src/features/app/components/layout/sidebar_nav/HelpButton.tsx

@@ -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'}}

fluxer_app/src/features/app/components/setup/SelfHostedSetupWizardGate.module.css

@@ -163,11 +163,11 @@
 	line-height: 1.55;
 }
 
-.adminForm {
+.accountSetupForm {
 	width: 100%;
 }
 
-.adminForm > form {
+.accountSetupForm > form {
 	margin-top: 0;
 	gap: 0.875rem;
 }

fluxer_app/src/features/app/components/setup/SetupWizardSteps.tsx

@@ -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,

fluxer_app/src/features/channel/components/MessageReactions.module.css

@@ -143,7 +143,7 @@
 	border-color: color-mix(in srgb, var(--brand-primary) 45%, transparent 55%);
 }
 
-.addReactionButton {
+.reactionPickerButton {
 	display: flex;
 	align-items: center;
 	justify-content: center;
@@ -159,8 +159,8 @@
 		color 0.1s ease;
 }
 
-.addReactionButton:hover,
+.reactionPickerButton:hover,
-.addReactionButtonActive {
+.reactionPickerButtonActive {
 	background-color: var(--background-modifier-hover);
 	color: var(--text-primary);
 }

fluxer_app/src/features/channel/components/MessageReactions.tsx

@@ -334,7 +334,7 @@ export const MessageReactions = observer(
 								<button
 									ref={addReactionButtonRef}
 									type="button"
-									className={clsx(styles.addReactionButton, emojiPickerOpen && styles.addReactionButtonActive)}
+									className={clsx(styles.reactionPickerButton, emojiPickerOpen && styles.reactionPickerButtonActive)}
 									aria-label={i18n._(ADD_REACTION_DESCRIPTOR)}
 									aria-haspopup="dialog"
 									aria-expanded={emojiPickerOpen}
@@ -376,7 +376,7 @@ export const MessageReactions = observer(
 								<button
 									ref={addReactionButtonRef}
 									type="button"
-									className={clsx(styles.addReactionButton, emojiPickerOpen && styles.addReactionButtonActive)}
+									className={clsx(styles.reactionPickerButton, emojiPickerOpen && styles.reactionPickerButtonActive)}
 									aria-label={i18n._(ADD_REACTION_DESCRIPTOR)}
 									aria-haspopup="dialog"
 									aria-expanded={emojiPickerOpen}

fluxer_app/src/features/channel/components/direct_message/AddFriendView.module.css

@@ -1,6 +1,6 @@
 /* SPDX-License-Identifier: AGPL-3.0-or-later */
 
-.addFriendContainer {
+.friendRequestContainer {
 	position: relative;
 	display: flex;
 	flex-direction: column;
@@ -58,7 +58,7 @@
 }
 
 @media (max-width: 480px) {
-	.addFriendContainer {
+	.friendRequestContainer {
 		padding: 1rem;
 		padding-bottom: calc(1rem + 3rem);
 	}

fluxer_app/src/features/channel/components/direct_message/AddFriendView.tsx

@@ -12,7 +12,10 @@ export const AddFriendView = observer(() => {
 	const {i18n} = useLingui();
 	const showVerificationSlateOnly = Users.currentUser?.verified === false;
 	return (
-		<div className={styles.addFriendContainer} data-flx="channel.direct-message.add-friend-view.add-friend-container">
+		<div
+			className={styles.friendRequestContainer}
+			data-flx="channel.direct-message.add-friend-view.add-friend-container"
+		>
 			<div className={styles.card} data-flx="channel.direct-message.add-friend-view.card">
 				{showVerificationSlateOnly ? (
 					<AddFriendForm data-flx="channel.direct-message.add-friend-view.add-friend-form" />

fluxer_app/src/features/guild/components/RoleManagement.module.css

@@ -68,12 +68,12 @@
 	gap: 0.25rem;
 }
 
-.addRoleButton {
+.assignRoleButton {
 	cursor: pointer;
 	transition: color 150ms cubic-bezier(0.4, 0, 0.2, 1);
 }
 
-.addRoleButtonIcon {
+.assignRoleButtonIcon {
 	display: flex;
 	height: 1rem;
 	width: 1rem;
@@ -83,8 +83,8 @@
 	cursor: pointer;
 }
 
-.addRoleButtonIcon:hover,
+.assignRoleButtonIcon:hover,
-.addRoleButtonIcon[data-context-menu-open='true'] {
+.assignRoleButtonIcon[data-context-menu-open='true'] {
 	color: var(--text-primary);
 }
 

fluxer_app/src/features/guild/components/RoleManagement.tsx

@@ -449,7 +449,7 @@ export const AddRoleButton: React.FC<{
 				<FocusRing offset={-2} data-flx="guild.role-management.add-role-button.focus-ring">
 					<button
 						type="button"
-						className={clsx(styles.addRoleButton, styles.addRoleButtonIcon)}
+						className={clsx(styles.assignRoleButton, styles.assignRoleButtonIcon)}
 						onClick={handleClick}
 						aria-label={i18n._(ADD_ROLE_DESCRIPTOR)}
 						data-flx="guild.role-management.add-role-button.add-role-button.click"

fluxer_app/src/features/invite/components/modals/InviteModal.module.css

@@ -121,7 +121,7 @@
 	text-decoration: underline;
 }
 
-.advancedView {
+.detailedView {
 	display: flex;
 	flex-direction: column;
 	gap: var(--spacing-4);

fluxer_app/src/features/invite/components/modals/InviteModal.tsx

@@ -394,7 +394,7 @@ const InviteModalContent = observer(function InviteModalContent({
 								data-flx="invite.invite-modal.recipient-list"
 							/>
 						) : (
-							<div className={styles.advancedView} data-flx="invite.invite-modal.advanced-view">
+							<div className={styles.detailedView} data-flx="invite.invite-modal.advanced-view">
 								<Combobox
 									label={i18n._(EXPIRE_AFTER_DESCRIPTOR)}
 									options={maxAgeOptions}

fluxer_app/src/features/user/components/modals/tabs/applications_tab/application_detail/ApplicationDetail.module.css

@@ -306,7 +306,7 @@
 	cursor: not-allowed;
 }
 
-.addRedirectButton {
+.createRedirectButton {
 	align-self: flex-start;
 }
 

fluxer_app/src/features/user/components/modals/tabs/applications_tab/application_detail/ApplicationInfoSection.tsx

@@ -159,7 +159,7 @@ export const ApplicationInfoSection: React.FC<ApplicationInfoSectionProps> = ({
 					<Button
 						variant="primary"
 						fitContent
-						className={styles.addRedirectButton}
+						className={styles.createRedirectButton}
 						onClick={onAddRedirect}
 						data-flx="user.applications-tab.application-detail.application-info-section.add-redirect-button"
 					>

fluxer_app/src/features/user/components/modals/tabs/chat_settings_tab/SearchEnginesTab.module.css

@@ -51,7 +51,7 @@
 	color: var(--status-danger);
 }
 
-.addButtonContainer {
+.newEngineButtonContainer {
 	margin-top: 0.75rem;
 }
 

fluxer_app/src/features/user/components/modals/tabs/chat_settings_tab/SearchEnginesTab.tsx

@@ -338,7 +338,7 @@ const EngineSection: React.FC<EngineSectionProps> = observer(
 						</SwitchGroup>
 					)}
 					<div
-						className={styles.addButtonContainer}
+						className={styles.newEngineButtonContainer}
 						data-flx="user.chat-settings-tab.search-engines-tab.engine-section.add-button-container"
 					>
 						<Button

fluxer_app/src/features/voice/components/VoiceConnectionStatus.module.css

@@ -364,7 +364,7 @@
 	min-width: 0;
 }
 
-.advancedStatsAccordion {
+.detailedStatsAccordion {
 	display: flex;
 	flex-direction: column;
 	gap: var(--spacing-2);
@@ -373,7 +373,7 @@
 	border-top: 0.0625rem solid var(--background-modifier-accent);
 }
 
-.advancedStatsButton {
+.detailedStatsButton {
 	display: flex;
 	align-items: center;
 	justify-content: space-between;
@@ -389,11 +389,11 @@
 }
 
 :global(:where(html.window-focused, html.unfocused-fully-interactive):not(.window-focus-activation-guard))
-	.advancedStatsButton:hover {
+	.detailedStatsButton:hover {
 	color: var(--text-secondary);
 }
 
-.advancedStatsButtonText {
+.detailedStatsButtonText {
 	min-width: 0;
 	overflow: hidden;
 	text-overflow: ellipsis;
@@ -405,7 +405,7 @@
 	color: inherit;
 }
 
-.advancedStatsCaret {
+.detailedStatsCaret {
 	display: flex;
 	align-items: center;
 	justify-content: center;
@@ -413,12 +413,12 @@
 	color: inherit;
 }
 
-.advancedStatsContent {
+.detailedStatsContent {
 	min-width: 0;
 	overflow: hidden;
 }
 
-.advancedStatsInner {
+.detailedStatsInner {
 	display: flex;
 	flex-direction: column;
 	gap: var(--spacing-3);

fluxer_app/src/features/voice/components/voice_connection_status/VoiceDetailsPopout.tsx

@@ -137,26 +137,26 @@ const AdvancedStatsAccordion = observer(function AdvancedStatsAccordion({
 	const transition = Accessibility.useReducedMotion ? INSTANT_TRANSITION : ADVANCED_STATS_TRANSITION;
 	return (
 		<div
-			className={styles.advancedStatsAccordion}
+			className={styles.detailedStatsAccordion}
 			data-flx="voice.voice-connection-status.advanced-stats-accordion.advanced-stats-accordion"
 		>
 			<FocusRing offset={-2} data-flx="voice.voice-connection-status.advanced-stats-accordion.focus-ring">
 				<button
 					type="button"
-					className={styles.advancedStatsButton}
+					className={styles.detailedStatsButton}
 					aria-expanded={expanded}
 					aria-controls={contentId}
 					onClick={() => setExpanded((current) => !current)}
 					data-flx="voice.voice-connection-status.advanced-stats-accordion.advanced-stats-button"
 				>
 					<span
-						className={styles.advancedStatsButtonText}
+						className={styles.detailedStatsButtonText}
 						data-flx="voice.voice-connection-status.advanced-stats-accordion.advanced-stats-button-text"
 					>
 						{title}
 					</span>
 					<motion.span
-						className={styles.advancedStatsCaret}
+						className={styles.detailedStatsCaret}
 						aria-hidden
 						animate={{rotate: expanded ? 180 : 0}}
 						transition={transition}
@@ -178,7 +178,7 @@ const AdvancedStatsAccordion = observer(function AdvancedStatsAccordion({
 					<motion.div
 						key="advanced-stats"
 						id={contentId}
-						className={styles.advancedStatsContent}
+						className={styles.detailedStatsContent}
 						initial={Accessibility.useReducedMotion ? {height: 'auto', opacity: 1} : {height: 0, opacity: 0}}
 						animate={{height: 'auto', opacity: 1}}
 						exit={Accessibility.useReducedMotion ? {height: 'auto', opacity: 1} : {height: 0, opacity: 0}}
@@ -186,7 +186,7 @@ const AdvancedStatsAccordion = observer(function AdvancedStatsAccordion({
 						data-flx="voice.voice-connection-status.advanced-stats-accordion.advanced-stats-content"
 					>
 						<div
-							className={styles.advancedStatsInner}
+							className={styles.detailedStatsInner}
 							data-flx="voice.voice-connection-status.advanced-stats-accordion.advanced-stats-inner"
 						>
 							{children}