From 42a2451990b7b619094e34bb26d5ec6a55946073 Mon Sep 17 00:00:00 2001
From: "Calum H." <hendersoncal117@gmail.com>
Date: Tue, 5 Aug 2025 17:38:33 +0100
Subject: [PATCH] fix: border around server icon

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

diff --git a/apps/frontend/src/components/ui/servers/marketing/MedalPlanPromotion.vue b/apps/frontend/src/components/ui/servers/marketing/MedalPlanPromotion.vue
index 5ccb2808b..4d1101389 100644
--- a/apps/frontend/src/components/ui/servers/marketing/MedalPlanPromotion.vue
+++ b/apps/frontend/src/components/ui/servers/marketing/MedalPlanPromotion.vue
@@ -7,10 +7,10 @@
     <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>
+        <ClockIcon class="clock-glow text-medal-orange size-6" /><span>
           Try a free
-          <span class="text-orange">3GB server</span> for 5 days powered by
-          <span class="text-orange">Medal</span>
+          <span class="text-medal-orange">3GB server</span> for 5 days powered by
+          <span class="text-medal-orange">Medal</span>
         </span>
       </div>
       <div class="flex items-center">
@@ -66,7 +66,7 @@ import MedalPromoBackground from "~/assets/images/illustrations/medal_promo_back
     drop-shadow(0 0 18px var(--color-orange));
 }
 
-.text-orange {
+.text-medal-orange {
   color: var(--medal-promotion-text-orange);
 }
 </style>
diff --git a/apps/frontend/src/components/ui/servers/marketing/MedalServerCountdown.vue b/apps/frontend/src/components/ui/servers/marketing/MedalServerCountdown.vue
index 90a5b3c5a..fb0b06131 100644
--- a/apps/frontend/src/components/ui/servers/marketing/MedalServerCountdown.vue
+++ b/apps/frontend/src/components/ui/servers/marketing/MedalServerCountdown.vue
@@ -7,13 +7,13 @@
 
     <div class="z-10 flex flex-col gap-1">
       <div class="flex items-center gap-2 text-lg font-semibold text-contrast">
-        <ClockIcon class="clock-glow size-5 text-orange" />
+        <ClockIcon class="clock-glow text-medal-orange size-5" />
         <span>
-          Your <span class="text-orange">Medal</span> powered Modrinth Server will expire in
-          <span class="font-bold text-orange">{{ timeLeftCountdown.days }}</span> days
-          <span class="font-bold text-orange">{{ timeLeftCountdown.hours }}</span> hours
-          <span class="font-bold text-orange">{{ timeLeftCountdown.minutes }}</span> minutes
-          <span class="font-bold text-orange">{{ timeLeftCountdown.seconds }}</span> seconds.
+          Your <span class="text-medal-orange">Medal</span> powered Modrinth Server will expire in
+          <span class="text-medal-orange font-bold">{{ timeLeftCountdown.days }}</span> days
+          <span class="text-medal-orange font-bold">{{ timeLeftCountdown.hours }}</span> hours
+          <span class="text-medal-orange font-bold">{{ timeLeftCountdown.minutes }}</span> minutes
+          <span class="text-medal-orange font-bold">{{ timeLeftCountdown.seconds }}</span> seconds.
         </span>
       </div>
     </div>
@@ -118,7 +118,7 @@ onUnmounted(() => {
     drop-shadow(0 0 18px var(--color-orange));
 }
 
-.text-orange {
+.text-medal-orange {
   color: var(--medal-promotion-text-orange);
   font-weight: bold;
 }
diff --git a/apps/frontend/src/components/ui/servers/marketing/MedalServerListing.vue b/apps/frontend/src/components/ui/servers/marketing/MedalServerListing.vue
index 61e011abd..d25b3eb62 100644
--- a/apps/frontend/src/components/ui/servers/marketing/MedalServerListing.vue
+++ b/apps/frontend/src/components/ui/servers/marketing/MedalServerListing.vue
@@ -16,7 +16,7 @@
       >
         <MedalServerIcon
           v-if="status !== 'suspended'"
-          class="z-10 size-16 shrink-0 rounded-xl bg-bg text-orange"
+          class="border-medal-orange z-10 size-16 shrink-0 rounded-xl border-[1px] border-solid bg-bg text-orange"
         />
         <div
           v-else
@@ -236,4 +236,8 @@ onUnmounted(() => {
   color: var(--medal-promotion-text-orange);
   font-weight: bold;
 }
+
+.border-medal-orange {
+  border-color: var(--medal-promotion-bg-orange);
+}
 </style>