Revert "feat: medal promotion on servers page (#4117)"

This reverts commit 14eac46.

Author: Prospector

apps/app-frontend/src/components/ui/PromotionWrapper.vue

@@ -34,17 +34,17 @@ function updateAdPosition() {
 <template>
 	<div ref="adsWrapper" class="ad-parent relative flex w-full justify-center cursor-pointer bg-bg">
 		<a
-			href="https://modrinth.gg/medal?app"
+			href="https://modrinth.gg?from=app-placeholder"
 			target="_blank"
 			class="flex max-h-[250px] min-h-[250px] min-w-[300px] max-w-[300px] flex-col gap-4 rounded-[inherit]"
 		>
 			<img
-				src="https://cdn-raw.modrinth.com/medal-modrinth-servers-light.webp"
+				src="https://cdn-raw.modrinth.com/modrinth-servers-placeholder-light.webp"
 				alt="Host your next server with Modrinth Servers"
 				class="hidden light-image rounded-[inherit]"
 			/>
 			<img
-				src="https://cdn-raw.modrinth.com/medal-modrinth-servers-dark.webp"
+				src="https://cdn-raw.modrinth.com/modrinth-servers-placeholder-dark.webp"
 				alt="Host your next server with Modrinth Servers"
 				class="dark-image rounded-[inherit]"
 			/>

apps/frontend/src/assets/images/illustrations/medal_promo_background.svg

@@ -131,11 +131,6 @@ html {
 
 	--landing-raw-bg: #fff;
 
-	--medal-promotion-bg: #fff;
-	--medal-promotion-bg-orange: #f0b051;
-	--medal-promotion-text-orange: #faa624;
-	--medal-promotion-bg-gradient: linear-gradient(90deg, rgba(255, 200, 118, 0.15) 0%, #fff 100%);
-
 	--banner-error-bg: #fee2e2;
 	--banner-error-text: #991b1b;
 	--banner-error-border: #ef4444;
@@ -242,11 +237,6 @@ html {
 
 	--landing-raw-bg: #000;
 
-	--medal-promotion-bg: #000;
-	--medal-promotion-bg-orange: #ffb84b54;
-	--medal-promotion-text-orange: #ffb84b;
-	--medal-promotion-bg-gradient: linear-gradient(90deg, #ffb74b21, transparent 50%, #000 100%);
-
 	--hover-filter: brightness(120%);
 	--active-filter: brightness(140%);
 

apps/frontend/src/assets/images/servers/medal_server_icon.svg

@@ -1,16 +1,16 @@
 <template>
 	<div class="ad-parent relative mb-3 flex w-full justify-center rounded-2xl bg-bg-raised">
 		<nuxt-link
-			to="/servers?plan&ref=medal"
+			to="/servers"
 			class="flex max-h-[250px] min-h-[250px] min-w-[300px] max-w-[300px] flex-col gap-4 rounded-[inherit]"
 		>
 			<img
-				src="https://cdn-raw.modrinth.com/medal-modrinth-servers-light.webp"
+				src="https://cdn-raw.modrinth.com/modrinth-servers-placeholder-light.webp"
 				alt="Host your next server with Modrinth Servers"
 				class="light-image hidden rounded-[inherit]"
 			/>
 			<img
-				src="https://cdn-raw.modrinth.com/medal-modrinth-servers-dark.webp"
+				src="https://cdn-raw.modrinth.com/modrinth-servers-placeholder-dark.webp"
 				alt="Host your next server with Modrinth Servers"
 				class="dark-image rounded-[inherit]"
 			/>

apps/frontend/src/assets/styles/global.scss

@@ -1,6 +1,6 @@
 <template>
 	<div
-		class="experimental-styles-within flex size-16 shrink-0 overflow-hidden rounded-xl border-[1px] border-solid border-button-border bg-button-bg shadow-sm"
+		class="experimental-styles-within flex size-24 shrink-0 overflow-hidden rounded-xl border-[1px] border-solid border-button-border bg-button-bg shadow-sm"
 	>
 		<client-only>
 			<img

apps/frontend/src/components/ui/AdPlaceholder.vue

@@ -4,23 +4,26 @@
 		:to="status === 'suspended' ? '' : `/servers/manage/${props.server_id}`"
 	>
 		<div
-			class="-mb-2 flex flex-row items-center overflow-x-hidden rounded-2xl border-[1px] border-solid border-button-bg bg-bg-raised p-4 transition-transform duration-100"
-			:class="{
-				'!rounded-b-none border-b-0': status === 'suspended' || !!pendingChange,
-				'opacity-75': status === 'suspended',
-				'active:scale-95': status !== 'suspended' && !pendingChange,
-			}"
+			v-tooltip="
+				status === 'suspended'
+					? suspension_reason === 'upgrading'
+						? 'This server is being transferred to a new node. It will be unavailable until this process finishes.'
+						: 'This server has been suspended. Please visit your billing settings or contact Modrinth Support for more information.'
+					: ''
+			"
+			class="flex cursor-pointer flex-row items-center overflow-x-hidden rounded-3xl bg-bg-raised p-4 transition-transform duration-100"
+			:class="status === 'suspended' ? '!rounded-b-none opacity-75' : 'active:scale-95'"
 			data-pyro-server-listing
 			:data-pyro-server-listing-id="server_id"
 		>
 			<ServerIcon v-if="status !== 'suspended'" :image="image" />
 			<div
 				v-else
-				class="bg-bg-secondary flex size-16 items-center justify-center rounded-xl border-[1px] border-solid border-button-border bg-button-bg shadow-sm"
+				class="bg-bg-secondary flex size-24 items-center justify-center rounded-xl border-[1px] border-solid border-button-border bg-button-bg shadow-sm"
 			>
-				<LockIcon class="size-12 text-secondary" />
+				<LockIcon class="size-20 text-secondary" />
 			</div>
-			<div class="ml-4 flex flex-col gap-2.5">
+			<div class="ml-8 flex flex-col gap-2.5">
 				<div class="flex flex-row items-center gap-2">
 					<h2 class="m-0 text-xl font-bold text-contrast">{{ name }}</h2>
 					<ChevronRightIcon />
@@ -38,6 +41,7 @@
 					/>
 					Using {{ projectData?.title || 'Unknown' }}
 				</div>
+				<div v-else class="min-h-[20px]"></div>
 
 				<div
 					v-if="isConfiguring"
@@ -55,67 +59,50 @@
 				/>
 			</div>
 		</div>
-	</NuxtLink>
-	<div
-		v-if="status === 'suspended' && suspension_reason === 'upgrading'"
-		class="relative -mt-2 flex w-full flex-row items-center gap-2 rounded-b-2xl border-[1px] border-t-0 border-solid border-bg-blue bg-bg-blue p-4 text-sm font-bold text-contrast"
-	>
-		<PanelSpinner />
-		Your server's hardware is currently being upgraded and will be back online shortly.
-	</div>
-	<div
-		v-else-if="status === 'suspended' && suspension_reason === 'cancelled'"
-		class="relative -mt-2 flex w-full flex-col gap-2 rounded-b-2xl border-[1px] border-t-0 border-solid border-bg-red bg-bg-red p-4 text-sm font-bold text-contrast"
-	>
-		<div class="flex flex-row gap-2">
-			<PanelErrorIcon class="!size-5" /> Your server has been cancelled. Please update your billing
-			information or contact Modrinth Support for more information.
+		<div
+			v-if="status === 'suspended' && suspension_reason === 'upgrading'"
+			class="relative -mt-4 flex w-full flex-row items-center gap-2 rounded-b-3xl bg-bg-blue p-4 text-sm font-bold text-contrast"
+		>
+			<PanelSpinner />
+			Your server's hardware is currently being upgraded and will be back online shortly.
 		</div>
-		<CopyCode :text="`${props.server_id}`" class="ml-auto" />
-	</div>
-	<div
-		v-else-if="status === 'suspended' && suspension_reason"
-		class="relative -mt-2 flex w-full flex-col gap-2 rounded-b-2xl border-[1px] border-t-0 border-solid border-bg-red bg-bg-red p-4 text-sm font-bold text-contrast"
-	>
-		<div class="flex flex-row gap-2">
-			<PanelErrorIcon class="!size-5" /> Your server has been suspended: {{ suspension_reason }}.
-			Please update your billing information or contact Modrinth Support for more information.
+		<div
+			v-else-if="status === 'suspended' && suspension_reason === 'cancelled'"
+			class="relative -mt-4 flex w-full flex-col gap-2 rounded-b-3xl bg-bg-red p-4 text-sm font-bold text-contrast"
+		>
+			<div class="flex flex-row gap-2">
+				<PanelErrorIcon class="!size-5" /> Your server has been cancelled. Please update your
+				billing information or contact Modrinth Support for more information.
+			</div>
+			<CopyCode :text="`${props.server_id}`" class="ml-auto" />
 		</div>
-		<CopyCode :text="`${props.server_id}`" class="ml-auto" />
-	</div>
-	<div
-		v-else-if="status === 'suspended'"
-		class="-mt-2flex relative w-full flex-col gap-2 rounded-b-2xl border-[1px] border-t-0 border-solid border-bg-red bg-bg-red p-4 text-sm font-bold text-contrast"
-	>
-		<div class="flex flex-row gap-2">
-			<PanelErrorIcon class="!size-5" /> Your server has been suspended. Please update your billing
-			information or contact Modrinth Support for more information.
+		<div
+			v-else-if="status === 'suspended' && suspension_reason"
+			class="relative -mt-4 flex w-full flex-col gap-2 rounded-b-3xl bg-bg-red p-4 text-sm font-bold text-contrast"
+		>
+			<div class="flex flex-row gap-2">
+				<PanelErrorIcon class="!size-5" /> Your server has been suspended: {{ suspension_reason }}.
+				Please update your billing information or contact Modrinth Support for more information.
+			</div>
+			<CopyCode :text="`${props.server_id}`" class="ml-auto" />
 		</div>
-		<CopyCode :text="`${props.server_id}`" class="ml-auto" />
-	</div>
-	<div
-		v-if="pendingChange && status !== 'suspended'"
-		class="relative -mt-2 flex w-full flex-col gap-2 rounded-b-2xl border-[1px] border-t-0 border-solid border-orange bg-bg-orange p-4 text-sm font-bold text-contrast"
-	>
-		<div>
-			Your server will {{ pendingChange.verb.toLowerCase() }} to the "{{ pendingChange.planSize }}"
-			plan on {{ formatDate(pendingChange.date) }}.
+		<div
+			v-else-if="status === 'suspended'"
+			class="relative -mt-4 flex w-full flex-col gap-2 rounded-b-3xl bg-bg-red p-4 text-sm font-bold text-contrast"
+		>
+			<div class="flex flex-row gap-2">
+				<PanelErrorIcon class="!size-5" /> Your server has been suspended. Please update your
+				billing information or contact Modrinth Support for more information.
+			</div>
+			<CopyCode :text="`${props.server_id}`" class="ml-auto" />
 		</div>
-		<ServersSpecs
-			class="!font-normal !text-contrast"
-			:ram="Math.round((pendingChange.ramGb ?? 0) * 1024)"
-			:storage="Math.round((pendingChange.storageGb ?? 0) * 1024)"
-			:cpus="pendingChange.cpuBurst"
-			bursting-link="https://docs.modrinth.com/servers/bursting"
-		/>
-	</div>
+	</NuxtLink>
 </template>
 
 <script setup lang="ts">
 import { ChevronRightIcon, LockIcon, SparklesIcon } from '@modrinth/assets'
-import { Avatar, CopyCode, ServersSpecs } from '@modrinth/ui'
+import { Avatar, CopyCode } from '@modrinth/ui'
 import type { Project, Server } from '@modrinth/utils'
-import dayjs from 'dayjs'
 
 import { useModrinthServers } from '~/composables/servers/modrinth-servers.ts'
 
@@ -124,19 +111,7 @@ import PanelSpinner from './PanelSpinner.vue'
 import ServerIcon from './ServerIcon.vue'
 import ServerInfoLabels from './ServerInfoLabels.vue'
 
-type PendingChange = {
-	planSize: string
-	cpu: number
-	cpuBurst: number
-	ramGb: number
-	swapGb?: number
-	storageGb?: number
-	date: string | number | Date
-	intervalChange?: string | null
-	verb: string
-}
-
-const props = defineProps<Partial<Server> & { pendingChange?: PendingChange }>()
+const props = defineProps<Partial<Server>>()
 
 if (props.server_id && props.status === 'available') {
 	// Necessary only to get server icon
@@ -163,12 +138,4 @@ if (props.upstream) {
 const image = useState<string | undefined>(`server-icon-${props.server_id}`, () => undefined)
 const iconUrl = computed(() => projectData.value?.icon_url || undefined)
 const isConfiguring = computed(() => props.flows?.intro)
-
-const formatDate = (d: unknown) => {
-	try {
-		return dayjs(d as any).format('MMMM D, YYYY')
-	} catch {
-		return ''
-	}
-}
 </script>