feat: gay

apps/frontend/src/composables/featureFlags.ts

@@ -29,7 +29,7 @@ export const DEFAULT_FEATURE_FLAGS = validateValues({
 	projectTypesPrimaryNav: false,
 	enableMedalPromotion: true,
 	hidePlusPromoInUserMenu: false,
-	projectBackground: false,
+	projectSearchBackground: false,
 	searchBackground: false,
 	advancedDebugInfo: false,
 	FilesRefreshButton: false,

apps/frontend/src/pages/[type]/[project].vue

@@ -1,7 +1,10 @@
 <template>
 	<template v-if="project && projectV3Loaded">
-		<Teleport v-if="flags.projectBackground" to="#fixed-background-teleport">
-			<ProjectBackgroundGradient :project="project" />
+		<Teleport
+			v-if="flags.projectSearchBackground && !isSettings"
+			to="#absolute-background-teleport"
+		>
+			<div class="search-background" :style="{ '--search-background-image': `url(${PrideBG})` }"></div>
 		</Teleport>
 		<template v-if="isSettings">
 			<div v-if="canAccessSettings" class="normal-page no-sidebar">
@@ -1059,6 +1062,7 @@ import {
 	MoreVerticalIcon,
 	PlayIcon,
 	PlusIcon,
+	PrideBG,
 	ReportIcon,
 	ScaleIcon,
 	ScanEyeIcon,
@@ -1086,7 +1090,6 @@ import {
 	OverflowMenu,
 	PopoutMenu,
 	PROJECT_DEP_MARKER_QUERY,
-	ProjectBackgroundGradient,
 	ProjectEnvironmentModal,
 	ProjectHeader,
 	ProjectSidebarCompatibility,
@@ -2821,6 +2824,17 @@ provideProjectPageContext({
 	display: none;
 }
 
+.search-background {
+	width: 100%;
+	height: 20rem;
+	background-image: var(--search-background-image);
+	background-size: cover;
+	background-position: 50% 25%;
+	pointer-events: none;
+	mask-image: linear-gradient(to bottom, black, transparent);
+	opacity: 0.25;
+}
+
 :deep(.accordion-with-bg) {
 	@apply rounded-2xl bg-bg p-2;
 	--scrollable-pane-bg: var(--color-bg);

packages/assets/index.ts

@@ -64,11 +64,12 @@ import _YouTubeIcon from './external/youtube.svg?component'
 import _YouTubeGaming from './external/youtubegaming.svg?component'
 import _YouTubeShortsIcon from './external/youtubeshorts.svg?component'
 // Tag icon helpers - import maps from generated-icons
+import _PrideBG from './branding/illustrations/pride-bg.png?url'
 import type { IconComponent } from './generated-icons'
 import { categoryIconMap, loaderIconMap } from './generated-icons'
 import _DoneIllustration from './illustrations/done.svg?component'
-import _EmptyIllustration from './illustrations/empty.svg?component'
 import _EmptyInboxIllustration from './illustrations/empty-inbox.svg?component'
+import _EmptyIllustration from './illustrations/empty.svg?component'
 import _ErrorIllustration from './illustrations/error.svg?component'
 import _NoConnectionIllustration from './illustrations/no-connection.svg?component'
 import _NoCreditCardIllustration from './illustrations/no-credit-card.svg?component'
@@ -133,6 +134,7 @@ export const PolygonIcon = _PolygonIcon
 export const USDCColorIcon = _USDCColorIcon
 export const VisaIcon = _VisaIcon
 export const MinecraftServerIcon = _MinecraftServerIcon
+export const PrideBG = _PrideBG
 
 export * from './generated-icons'
 export { default as ClassicPlayerModel } from './models/classic-player.gltf?url'