From b497c944a069339ad99a74eee2aaf6b5e8265a72 Mon Sep 17 00:00:00 2001
From: "Calum H." <hendersoncal117@gmail.com>
Date: Tue, 5 Aug 2025 16:55:30 +0100
Subject: [PATCH] feat: use same gradient as promo

---
 .../ui/servers/marketing/MedalPlanPromotion.vue        |  3 ++-
 .../ui/servers/marketing/MedalServerCountdown.vue      | 10 +++-------
 .../ui/servers/marketing/MedalServerListing.vue        |  9 +++------
 3 files changed, 8 insertions(+), 14 deletions(-)

diff --git a/apps/frontend/src/components/ui/servers/marketing/MedalPlanPromotion.vue b/apps/frontend/src/components/ui/servers/marketing/MedalPlanPromotion.vue
index 8455f91de..5ccb2808b 100644
--- a/apps/frontend/src/components/ui/servers/marketing/MedalPlanPromotion.vue
+++ b/apps/frontend/src/components/ui/servers/marketing/MedalPlanPromotion.vue
@@ -4,7 +4,7 @@
     class="medal-promotion flex w-full flex-row justify-between rounded-xl p-6 shadow-xl"
   >
     <div class="overlay"></div>
-    <MedalPromoBackground class="background-pattern" />
+    <MedalPromoBackground class="background-pattern shadow-xl" />
     <div class="z-10 flex flex-col gap-2">
       <div class="flex items-center gap-2 text-2xl font-semibold text-contrast">
         <ClockIcon class="clock-glow size-6 text-orange" /><span>
@@ -35,6 +35,7 @@ import MedalPromoBackground from "~/assets/images/illustrations/medal_promo_back
 .medal-promotion {
   position: relative;
   border: 1px solid var(--medal-promotion-bg-orange);
+  overflow: hidden;
 }
 
 .overlay {
diff --git a/apps/frontend/src/components/ui/servers/marketing/MedalServerCountdown.vue b/apps/frontend/src/components/ui/servers/marketing/MedalServerCountdown.vue
index e6b1c9f41..5881810cc 100644
--- a/apps/frontend/src/components/ui/servers/marketing/MedalServerCountdown.vue
+++ b/apps/frontend/src/components/ui/servers/marketing/MedalServerCountdown.vue
@@ -86,7 +86,8 @@ onUnmounted(() => {
 .medal-promotion {
   position: relative;
   border: 1px solid var(--medal-promotion-bg-orange);
-  background: inherit;
+  background: inherit; // allows overlay + pattern to take over
+  overflow: hidden;
 }
 
 .overlay {
@@ -95,12 +96,7 @@ onUnmounted(() => {
   left: 0;
   width: 100%;
   height: 100%;
-  background: linear-gradient(
-    90deg,
-    var(--medal-promotion-bg) 10%,
-    transparent 30%,
-    var(--medal-promotion-bg) 100%
-  );
+  background: var(--medal-promotion-bg-gradient);
   z-index: 1;
   border-radius: inherit;
 }
diff --git a/apps/frontend/src/components/ui/servers/marketing/MedalServerListing.vue b/apps/frontend/src/components/ui/servers/marketing/MedalServerListing.vue
index c880ea196..a79de17af 100644
--- a/apps/frontend/src/components/ui/servers/marketing/MedalServerListing.vue
+++ b/apps/frontend/src/components/ui/servers/marketing/MedalServerListing.vue
@@ -207,21 +207,18 @@ onUnmounted(() => {
   border: 1px solid var(--medal-promotion-bg-orange);
   background: inherit; // allows overlay + pattern to take over
 }
+
 .overlay {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
-  background: linear-gradient(
-    90deg,
-    var(--medal-promotion-bg) 10%,
-    transparent 30%,
-    var(--medal-promotion-bg) 100%
-  );
+  background: var(--medal-promotion-bg-gradient);
   z-index: 1;
   border-radius: inherit;
 }
+
 .background-pattern {
   position: absolute;
   top: 0;