From ef6837d49e30f32fd9718ad9d534c5e2a78ef815 Mon Sep 17 00:00:00 2001
From: tdgao <mr.trumgao@gmail.com>
Date: Mon, 23 Mar 2026 13:41:27 -0600
Subject: [PATCH] update pending change stage

---
 packages/ui/src/components/servers/ServerListing.vue  |  4 +++-
 .../ui/src/stories/servers/ServerListing.stories.ts   | 11 +++++++++--
 2 files changed, 12 insertions(+), 3 deletions(-)

diff --git a/packages/ui/src/components/servers/ServerListing.vue b/packages/ui/src/components/servers/ServerListing.vue
index 11c8daf81f..16e21f7ace 100644
--- a/packages/ui/src/components/servers/ServerListing.vue
+++ b/packages/ui/src/components/servers/ServerListing.vue
@@ -239,7 +239,9 @@
 			<div>
 				Your server will {{ pendingChange.verb.toLowerCase() }} to the "{{
 					pendingChange.planSize
-				}}" plan on {{ formatDate(pendingChange.date) }}.
+				}}" plan on
+				<span class="font-medium text-contrast">{{ formatDate(pendingChange.date) }}</span
+				>.
 			</div>
 			<ServersSpecs
 				class="!font-normal !text-primary"
diff --git a/packages/ui/src/stories/servers/ServerListing.stories.ts b/packages/ui/src/stories/servers/ServerListing.stories.ts
index 15392dacda..1c428ce108 100644
--- a/packages/ui/src/stories/servers/ServerListing.stories.ts
+++ b/packages/ui/src/stories/servers/ServerListing.stories.ts
@@ -61,11 +61,18 @@ export const ConfiguringNewServer: Story = {
 	},
 }
 
-export const WithPendingChange: Story = {
+export const WithPendingDowngrade: Story = {
 	args: {
 		...baseServer,
 		name: 'Competitive UHC',
-		pendingChange,
+		pendingChange: {
+			...pendingChange,
+			planSize: 'Small',
+			ramGb: 4,
+			storageGb: 40,
+			cpuBurst: 4,
+			verb: 'Downgrade',
+		},
 	},
 }