From ff5cc27acdeab6bef0f476fee39a1ce98265fbf4 Mon Sep 17 00:00:00 2001
From: Thomas Kaul <4159106+dtslvr@users.noreply.github.com>
Date: Mon, 2 Nov 2026 17:36:28 +0100
Subject: [PATCH] Task/improve style of promotion badges (#8386)

Improve style of promotion badges
---
 apps/client/src/app/components/header/header.component.html | 6 +++---
 apps/client/src/app/pages/pricing/pricing-page.html         | 6 ++++--
 apps/client/src/styles.scss                                 | 4 ++++
 3 files changed, 11 insertions(+), 5 deletions(-)

diff --git a/apps/client/src/app/components/header/header.component.html b/apps/client/src/app/components/header/header.component.html
index 88ab9f09fc..05dacf8d37 100644
--- a/apps/client/src/app/components/header/header.component.html
+++ b/apps/client/src/app/components/header/header.component.html
@@ -103,7 +103,7 @@
             <span class="align-items-center d-flex">
               <span i18n>Pricing</span>
               @if (currentRoute() !== routePricing && hasPromotion()) {
-                <span class="badge bg-warning ms-1 text-dark">%</span>
+                <span class="badge gf-promotion-badge ms-1 text-dark">%</span>
               }
             </span>
           </a>
@@ -305,7 +305,7 @@
               <span class="align-items-center d-flex">
                 <span i18n>Pricing</span>
                 @if (currentRoute() !== routePricing && hasPromotion()) {
-                  <span class="badge bg-warning ms-1 text-dark">%</span>
+                  <span class="badge gf-promotion-badge ms-1 text-dark">%</span>
                 }
               </span>
             </a>
@@ -380,7 +380,7 @@
             <span class="align-items-center d-flex">
               <span i18n>Pricing</span>
               @if (currentRoute() !== routePricing && hasPromotion()) {
-                <span class="badge bg-warning ms-1 text-dark">%</span>
+                <span class="badge gf-promotion-badge ms-1 text-dark">%</span>
               }
             </span>
           </a>
diff --git a/apps/client/src/app/pages/pricing/pricing-page.html b/apps/client/src/app/pages/pricing/pricing-page.html
index c9202ce38e..a8b36ea0e8 100644
--- a/apps/client/src/app/pages/pricing/pricing-page.html
+++ b/apps/client/src/app/pages/pricing/pricing-page.html
@@ -178,7 +178,7 @@
             <mat-card-content class="d-flex flex-column h-100">
               @if (label) {
                 <div class="badge-container position-absolute text-end">
-                  <span class="badge bg-warning m-1 text-dark">{{
+                  <span class="badge gf-promotion-badge m-1 text-dark">{{
                     label
                   }}</span>
                 </div>
@@ -300,7 +300,9 @@
               }
               @if (durationExtension) {
                 <div class="mt-3">
-                  <div class="badge bg-warning fw-normal p-3 text-dark w-100">
+                  <div
+                    class="badge fw-normal gf-promotion-badge p-3 text-dark w-100"
+                  >
                     <strong i18n>Limited Offer!</strong>
                     <ng-container>&nbsp;</ng-container>
                     <ng-container i18n
diff --git a/apps/client/src/styles.scss b/apps/client/src/styles.scss
index f5ff40f138..d734d0d447 100644
--- a/apps/client/src/styles.scss
+++ b/apps/client/src/styles.scss
@@ -349,6 +349,10 @@ ngx-skeleton-loader {
   cursor: pointer;
 }
 
+.gf-promotion-badge {
+  background-color: var(--oc-orange-5);
+}
+
 .gf-spacer {
   flex: 1 1 auto;
 }