@mundogamernetwork/shared-ui 1.1.64 → 1.1.66

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mundogamernetwork/shared-ui",
-  "version": "1.1.64",
+  "version": "1.1.66",
   "description": "Mundo Gamer Network - Shared UI Layer (Nuxt 3)",
   "type": "module",
   "main": "./nuxt.config.ts",

package/pages/key-campaigns/[slug].vue

@@ -761,7 +761,7 @@ onMounted(async () => {
 		justify-content: space-between;
 
 		.btn {
-			background: #D297FF;
+			background: var(--key-accent, #D297FF);
 			display: flex;
 			height: 44px;
 			padding: 0 14px;
@@ -787,7 +787,7 @@ onMounted(async () => {
 			align-items: center;
 			gap: 6px;
 			font-size: 13px;
-			color: #D297FF;
+			color: var(--key-accent, #D297FF);
 			cursor: pointer;
 			text-decoration: none;
 			white-space: nowrap;
@@ -806,7 +806,7 @@ onMounted(async () => {
 				font-size: 14px;
 				font-weight: 600;
 				color: var(--card-article-title);
-				span { color: #d297ff; }
+				span { color: var(--key-accent, #d297ff); }
 				.yellow { color: #FFD600; }
 				.red { color: #ff4800; }
 			}
@@ -819,7 +819,7 @@ onMounted(async () => {
 
 				.progress {
 					height: 24px;
-					background-color: #d297ff;
+					background-color: var(--key-accent, #d297ff);
 					span {
 						position: absolute;
 						right: 5px;
@@ -835,7 +835,7 @@ onMounted(async () => {
 			.info {
 				font-size: 12px;
 				color: var(--secondary-info-fg);
-				i { color: #d297ff; }
+				i { color: var(--key-accent, #d297ff); }
 				.yellow { color: #FFD600; }
 				.red { color: #ff4800; }
 			}
@@ -882,7 +882,7 @@ onMounted(async () => {
 					padding: 4px 10px;
 					font-size: 12px;
 					font-weight: 600;
-					color: #D297FF;
+					color: var(--key-accent, #D297FF);
 					background: rgba(210, 151, 255, 0.12);
 					border: 1px solid rgba(210, 151, 255, 0.35);
 					i { font-size: 13px; }
@@ -981,7 +981,7 @@ onMounted(async () => {
 						gap: 6px;
 						background-color: var(--button-secondary-default-bg);
 						font-size: 28px;
-						color: #D297FF;
+						color: var(--key-accent, #D297FF);
 						font-weight: 700;
 						width: -webkit-fill-available;
 						span { font-size: 10px; color: var(--secondary-info-fg); font-weight: 400; }
@@ -1015,7 +1015,7 @@ onMounted(async () => {
 							width: -webkit-fill-available;
 							cursor: pointer;
 							&:hover, &.active {
-								background-color: #D297FF;
+								background-color: var(--key-accent, #D297FF);
 								color: #1C1C1C;
 								i { color: #1C1C1C; }
 							}
@@ -1060,7 +1060,7 @@ onMounted(async () => {
 							flex-shrink: 0;
 							border-radius: 100%;
 							text-align-last: center;
-							i { color: #D297FF; }
+							i { color: var(--key-accent, #D297FF); }
 						}
 						.texts {
 							display: flex;
@@ -1081,7 +1081,7 @@ onMounted(async () => {
 						width: 100%;
 					}
 
-					.reward span { color: #D297FF; }
+					.reward span { color: var(--key-accent, #D297FF); }
 
 					.data {
 						display: flex;
@@ -1114,7 +1114,7 @@ onMounted(async () => {
 							font-size: 12px;
 							color: var(--secondary-info-fg);
 							width: -webkit-fill-available;
-							span { font-size: 16px; color: #D297FF; font-weight: 600; }
+							span { font-size: 16px; color: var(--key-accent, #D297FF); font-weight: 600; }
 						}
 					}
 

package/pages/key-campaigns/index.vue

@@ -108,6 +108,7 @@
 												class="img-content"
 												:class="{ unavailable: card.isExpired || (!card.isUpcoming && card.available_count < 1) }"
 											>
+
 												<img
 													:src="card.cover"
 													:alt="card.text"
@@ -180,19 +181,19 @@
 												</div>
 											</div>
 										</nuxt-link>
+									</div>
 
-										<div class="title">
-											<div class="days" v-if="card.time > 0 && card.user_can_access">
-												<span>{{ card.time }}</span> {{ $t("keys.campaigns.days") }}
-											</div>
-											<div class="days" v-else></div>
-											<span>
-												<svg xmlns="http://www.w3.org/2000/svg" width="16" height="17" viewBox="0 0 16 17" fill="none">
-													<path d="M13.3333 4.1112L12.8666 3.64453L11.9333 4.57786L10.9333 3.64453L8.33329 4.1112L2.66663 9.77786L7.19996 14.3112L12.8666 8.64453L13.3333 6.04453L12.4 5.1112L13.3333 4.1112ZM12.6 6.24453L12.2666 8.3112L7.19996 13.3779L3.59996 9.77786L8.66663 4.7112L10.7333 4.3112L11.4666 5.04453L11 5.5112L10.5333 5.04453L9.99996 5.57786L11.4 6.97786L11.8666 6.5112L11.4 6.04453L11.8666 5.57786L12.6 6.24453Z" fill="#D297FF" />
-												</svg>
-												{{ card.type }}
-											</span>
+									<div class="title">
+										<div class="days" v-if="card.time > 0 && card.user_can_access">
+											<span>{{ card.time }}</span> {{ $t("keys.campaigns.days") }}
 										</div>
+										<div class="days" v-else></div>
+										<span>
+											<svg xmlns="http://www.w3.org/2000/svg" width="16" height="17" viewBox="0 0 16 17" fill="none">
+												<path d="M13.3333 4.1112L12.8666 3.64453L11.9333 4.57786L10.9333 3.64453L8.33329 4.1112L2.66663 9.77786L7.19996 14.3112L12.8666 8.64453L13.3333 6.04453L12.4 5.1112L13.3333 4.1112ZM12.6 6.24453L12.2666 8.3112L7.19996 13.3779L3.59996 9.77786L8.66663 4.7112L10.7333 4.3112L11.4666 5.04453L11 5.5112L10.5333 5.04453L9.99996 5.57786L11.4 6.97786L11.8666 6.5112L11.4 6.04453L11.8666 5.57786L12.6 6.24453Z" fill="var(--key-accent, #D297FF)" />
+											</svg>
+											{{ card.type }}
+										</span>
 									</div>
 
 									<div class="text">
@@ -736,7 +737,7 @@ onUnmounted(() => {
 	display: inline-block;
 	width: 20px;
 	height: 20px;
-	border: 2px solid #d297ff;
+	border: 2px solid var(--key-accent, #d297ff);
 	border-radius: 50%;
 	border-top-color: #fff;
 	animation: spin 1s ease-in-out infinite;
@@ -774,7 +775,7 @@ onUnmounted(() => {
 	position: absolute;
 	bottom: 8px;
 	right: 8px;
-	background: rgba(107, 21, 172, 0.9);
+	background: var(--key-accent-dark, rgba(107, 21, 172, 0.9));
 	color: #fff;
 	font-size: 12px;
 	font-weight: 600;
@@ -813,7 +814,7 @@ onUnmounted(() => {
 	position: absolute;
 	top: 8px;
 	left: 8px;
-	background: rgba(107, 21, 172, 0.9);
+	background: var(--key-accent-dark, rgba(107, 21, 172, 0.9));
 	color: #fff;
 	font-size: 10px;
 	font-weight: 700;
@@ -841,9 +842,9 @@ onUnmounted(() => {
 	padding: 12px;
 	text-align: center;
 
-	i { font-size: 24px; color: #D297FF; }
+	i { font-size: 24px; color: var(--key-accent, #D297FF); }
 	.lock-label { color: #fff; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; }
-	.lock-countdown { color: #D297FF; font-size: 12px; font-weight: 600; }
+	.lock-countdown { color: var(--key-accent, #D297FF); font-size: 12px; font-weight: 600; }
 	.lock-cta { color: #EAB308; font-size: 11px; font-weight: 600; }
 }
 
@@ -951,7 +952,7 @@ onUnmounted(() => {
 				cursor: pointer;
 			}
 
-			span.active { background: #6b15ac; }
+			span.active { background: var(--key-accent, #6b15ac); }
 		}
 	}
 
@@ -996,7 +997,7 @@ onUnmounted(() => {
 				}
 
 				.header-left .btn.tertiary.active {
-					background-color: #D297FF;
+					background-color: var(--key-accent, #D297FF);
 					color: #1C1C1C;
 				}
 
@@ -1015,7 +1016,7 @@ onUnmounted(() => {
 						color: var(--title-fg);
 					}
 
-					&:focus { outline: none; border-color: #D297FF; }
+					&:focus { outline: none; border-color: var(--key-accent, #D297FF); }
 				}
 
 				.filter-divider {
@@ -1082,40 +1083,12 @@ onUnmounted(() => {
 
 					.card-header {
 						display: flex;
-						align-items: center;
-						gap: 16px;
+						flex-direction: column;
+						align-items: stretch;
 						border: 0;
 						padding: 0;
 						background-color: transparent;
 
-						.title {
-							display: flex;
-							padding: 8px 16px;
-							align-items: center;
-							position: absolute;
-							background: rgba(13, 13, 13, 0.9);
-							top: 0;
-							width: 100%;
-							justify-content: space-between;
-
-							.days {
-								font-size: 12px;
-								color: var(--title-fg);
-								display: flex;
-								align-items: center;
-								gap: 4px;
-								span { color: #d297ff; font-size: 16px; font-weight: 600; }
-							}
-
-							span {
-								font-size: 12px;
-								color: var(--secondary-info-fg);
-								display: flex;
-								align-items: center;
-								gap: 4px;
-							}
-						}
-
 						a {
 							width: 100%;
 							.img-content {
@@ -1129,6 +1102,32 @@ onUnmounted(() => {
 						}
 					}
 
+					.title {
+						display: flex;
+						padding: 8px 16px;
+						align-items: center;
+						background: rgba(13, 13, 13, 0.9);
+						width: 100%;
+						justify-content: space-between;
+
+						.days {
+							font-size: 12px;
+							color: var(--title-fg);
+							display: flex;
+							align-items: center;
+							gap: 4px;
+							span { color: var(--key-accent, #d297ff); font-size: 16px; font-weight: 600; }
+						}
+
+						span {
+							font-size: 12px;
+							color: var(--secondary-info-fg);
+							display: flex;
+							align-items: center;
+							gap: 4px;
+						}
+					}
+
 					.text {
 						color: var(--title-fg);
 						font-size: 16px;
@@ -1169,7 +1168,7 @@ onUnmounted(() => {
 								justify-content: center;
 								cursor: pointer;
 								flex-shrink: 0;
-								&:hover { border-color: #D297FF; color: #D297FF; }
+								&:hover { border-color: var(--key-accent, #D297FF); color: var(--key-accent, #D297FF); }
 								i { font-size: 14px; }
 							}
 						}
@@ -1188,7 +1187,7 @@ onUnmounted(() => {
 						font-size: 12px;
 						color: var(--title-fg);
 						font-weight: 400;
-						span { color: #d297ff; }
+						span { color: var(--key-accent, #d297ff); }
 					}
 				}
 			}

package/services/campaignService.ts

@@ -209,6 +209,7 @@ export const fetchCampaigns = (
 					...(params.filter || {}),
 					include_early_access_locked: true,
 					mg_platform: mgPlatform,
+					status: 1,
 				},
 				page: params.page || 1,
 				per_page: params.per_page || 15,
@@ -233,6 +234,7 @@ export const fetchFeaturedCampaigns = (mgPlatform = "MGTV") => {
 			filter: {
 				is_public: true,
 				status: 1,
+				is_featured: true,
 				mg_platform: mgPlatform,
 			},
 			sort: "id",