Task/improve style of promotion badges (#8386)

Improve style of promotion badges

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>

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

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;
 }