feat: medal promotion on servers page

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?from=app-placeholder"
+			href="https://modrinth.gg/medal?app"
 			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/modrinth-servers-placeholder-light.webp"
+				src="https://cdn-raw.modrinth.com/medal-modrinth-servers-light.webp"
 				alt="Host your next server with Modrinth Servers"
 				class="hidden light-image rounded-[inherit]"
 			/>
 			<img
-				src="https://cdn-raw.modrinth.com/modrinth-servers-placeholder-dark.webp"
+				src="https://cdn-raw.modrinth.com/medal-modrinth-servers-dark.webp"
 				alt="Host your next server with Modrinth Servers"
 				class="dark-image rounded-[inherit]"
 			/>

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

@@ -131,6 +131,11 @@ 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;
@@ -237,6 +242,11 @@ 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/components/ui/AdPlaceholder.vue

@@ -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"
+			to="/servers?plan&ref=medal"
 			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/modrinth-servers-placeholder-light.webp"
+				src="https://cdn-raw.modrinth.com/medal-modrinth-servers-light.webp"
 				alt="Host your next server with Modrinth Servers"
 				class="light-image hidden rounded-[inherit]"
 			/>
 			<img
-				src="https://cdn-raw.modrinth.com/modrinth-servers-placeholder-dark.webp"
+				src="https://cdn-raw.modrinth.com/medal-modrinth-servers-dark.webp"
 				alt="Host your next server with Modrinth Servers"
 				class="dark-image rounded-[inherit]"
 			/>

apps/frontend/src/components/ui/servers/ServerIcon.vue

@@ -1,6 +1,6 @@
 <template>
 	<div
-		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"
+		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"
 	>
 		<client-only>
 			<img

apps/frontend/src/components/ui/servers/ServerListing.vue

@@ -4,26 +4,23 @@
 		:to="status === 'suspended' ? '' : `/servers/manage/${props.server_id}`"
 	>
 		<div
-			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'"
+			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,
+			}"
 			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-24 items-center justify-center rounded-xl border-[1px] border-solid border-button-border bg-button-bg shadow-sm"
+				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"
 			>
-				<LockIcon class="size-20 text-secondary" />
+				<LockIcon class="size-12 text-secondary" />
 			</div>
-			<div class="ml-8 flex flex-col gap-2.5">
+			<div class="ml-4 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 />
@@ -41,7 +38,6 @@
 					/>
 					Using {{ projectData?.title || 'Unknown' }}
 				</div>
-				<div v-else class="min-h-[20px]"></div>
 
 				<div
 					v-if="isConfiguring"
@@ -59,50 +55,67 @@
 				/>
 			</div>
 		</div>
-		<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.
+	</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>
-		<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" />
+		<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>
-		<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" />
+		<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>
-		<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" />
+		<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>
-	</NuxtLink>
+		<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>
 </template>
 
 <script setup lang="ts">
 import { ChevronRightIcon, LockIcon, SparklesIcon } from '@modrinth/assets'
-import { Avatar, CopyCode } from '@modrinth/ui'
+import { Avatar, CopyCode, ServersSpecs } from '@modrinth/ui'
 import type { Project, Server } from '@modrinth/utils'
+import dayjs from 'dayjs'
 
 import { useModrinthServers } from '~/composables/servers/modrinth-servers.ts'
 
@@ -111,7 +124,19 @@ import PanelSpinner from './PanelSpinner.vue'
 import ServerIcon from './ServerIcon.vue'
 import ServerInfoLabels from './ServerInfoLabels.vue'
 
-const props = defineProps<Partial<Server>>()
+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 }>()
 
 if (props.server_id && props.status === 'available') {
 	// Necessary only to get server icon
@@ -138,4 +163,12 @@ 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>