@mundogamernetwork/shared-ui 1.1.66 → 1.1.68

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (14) hide show
  1. package/components/keys/KeyCampaignsCarousel.vue +190 -0
  2. package/locales/de.json +181 -0
  3. package/locales/en.json +181 -0
  4. package/locales/pt-BR.json +181 -0
  5. package/locales/ro.json +181 -0
  6. package/nuxt.config.ts +3 -0
  7. package/package.json +2 -1
  8. package/pages/key-campaign/[slug].vue +15 -0
  9. package/pages/key-campaigns/[slug].vue +18 -12
  10. package/pages/key-campaigns/redeem-key-approved.vue +311 -0
  11. package/pages/key-campaigns/redeem-key.vue +320 -0
  12. package/pages/presskit/game/[slug].vue +0 -1
  13. package/plugins/auth.client.ts +9 -3
  14. package/services/campaignService.ts +12 -4
package/locales/pt-BR.json ADDED
@@ -0,0 +1,181 @@
1
+ {
2
+ "keys": {
3
+ "notif_prompt_title": "Quer receber alertas de novas campanhas de chaves?",
4
+ "notif_prompt_desc": "Te avisamos por email e push sempre que uma nova campanha de chaves abrir.",
5
+ "notif_prompt_enable": "Ativar",
6
+ "notif_prompt_dismiss": "Agora não",
7
+ "browser": {
8
+ "tab_available": "Disponíveis",
9
+ "tab_mine": "Minhas solicitações",
10
+ "select_platform": "Selecione a plataforma",
11
+ "description_label": "Por que você merece esta chave?",
12
+ "description_placeholder": "Ex: Tenho um canal no YouTube com 5k inscritos focado em reviews de games. Quero fazer uma análise completa do jogo para minha audiência.",
13
+ "request_btn": "Pedir chave",
14
+ "already_requested": "Solicitação enviada",
15
+ "reveal_btn": "Revelar chave",
16
+ "revealed": "Chave revelada",
17
+ "pending_approval": "Aguardando aprovação",
18
+ "login_required": "Faça login para solicitar esta chave",
19
+ "login_btn": "Entrar",
20
+ "no_keys": "Nenhuma chave disponível no momento",
21
+ "no_pools": "Nenhuma campanha ativa",
22
+ "no_requests": "Você ainda não solicitou nenhuma chave"
23
+ },
24
+ "campaigns": {
25
+ "title": "Key Campaigns",
26
+ "my_requests": "My Requests",
27
+ "all": "All",
28
+ "details": "Details",
29
+ "see_campaign": "See campaign",
30
+ "see_content": "See content",
31
+ "redeem": "Redeem",
32
+ "load_more": "Load more",
33
+ "no_results": "No campaigns found",
34
+ "days": "days",
35
+ "creators": "creators",
36
+ "upgrade_plan": "Upgrade plan",
37
+ "exclusive": "Exclusive",
38
+ "exclusive_upgrade": "Upgrade to access",
39
+ "exclusive_upgrade_cta": "Upgrade your plan to request this key",
40
+ "exclusive_lock_title": "Exclusive campaign",
41
+ "early_access": "Early access",
42
+ "early_access_lock_title": "Early access",
43
+ "early_access_opens_in": "Opens in",
44
+ "unavailable": "Unavailable",
45
+ "upcoming": "Coming soon",
46
+ "back": "Back",
47
+ "search_placeholder": "Search campaigns...",
48
+ "seo": {
49
+ "title_generic": "Key Campaigns"
50
+ },
51
+ "restriction": {
52
+ "exclusive_official": "Official streamers only",
53
+ "level_official": "Official",
54
+ "level_affiliate": "Affiliate"
55
+ },
56
+ "status_key": {
57
+ "see_key": "View key",
58
+ "of": "of",
59
+ "title_0": "Campaign",
60
+ "title_span_0": "ended",
61
+ "obs_0": "The redemption period for the key has expired.",
62
+ "title_1": "Now you need to",
63
+ "title_span_1": "redeem the key",
64
+ "obs_1": "Check the campaign requirements before requesting your key(s)",
65
+ "title_2": "Now just",
66
+ "title_span_2": "wait",
67
+ "obs_2": "Your request is being reviewed. After approval, you will receive a confirmation email.",
68
+ "title_approved": "Your request has been ",
69
+ "title_span_approved": "approved!",
70
+ "obs_approved": "Your key is ready. Click to reveal it.",
71
+ "reveal_key": "Reveal key",
72
+ "view_code": "View code",
73
+ "title_3": "Now you just need to",
74
+ "title_span_3": "send the material",
75
+ "title_3_2": "developed",
76
+ "obs_3": "You have 14 days to send the developed material",
77
+ "complete": "Completed",
78
+ "title_span_4": "Nice!",
79
+ "title_4": "If you have more materials, feel free to add them",
80
+ "obs_4": "If you want to add more, you still have 6 days to send it.",
81
+ "title_5": "Your request was",
82
+ "title_span_5": "rejected",
83
+ "obs_5": "Unfortunately, your key request was not approved. Please check the campaign requirements and try again in the future.",
84
+ "title_6": "Request",
85
+ "title_span_6": "cancelled",
86
+ "obs_6": "You canceled this request. If you want to try again, just start a new request according to the campaign rules.",
87
+ "title_7": "Request",
88
+ "title_span_7": "expired",
89
+ "obs_7": "The deadline for submitting the material or using the key has expired. Keep an eye on deadlines in future campaigns!",
90
+ "title_8": "Key",
91
+ "title_span_8": "revoked",
92
+ "obs_8": "Your key has been revoked by the administration. If you have any questions, contact support or review the campaign rules.",
93
+ "title_exhausted": "Keys",
94
+ "title_span_exhausted": "exhausted",
95
+ "obs_exhausted": "All keys for this campaign have already been distributed.",
96
+ "title_locked": "This campaign is",
97
+ "title_span_locked": "exclusive",
98
+ "obs_locked_exclusive": "Available only to higher tiers. Upgrade to take part.",
99
+ "obs_locked_early": "Your plan doesn't have access to this campaign yet. Upgrade to unlock.",
100
+ "obs_locked_tier": "Available only to {tier} plan subscribers or higher. Upgrade to take part.",
101
+ "title_level": "This campaign is for",
102
+ "title_span_level_official": "official streamers",
103
+ "title_span_level_affiliate": "affiliates",
104
+ "obs_level_official": "Available only to official MG streamers.",
105
+ "obs_level_affiliate": "Available only to affiliate creators (casting). Join the casting to take part."
106
+ },
107
+ "campaign": {
108
+ "available": "available",
109
+ "keys": "keys",
110
+ "start": "Start",
111
+ "end": "End",
112
+ "launch": "Launch",
113
+ "status": "Status",
114
+ "status_active": "Active",
115
+ "status_closed": "Closed",
116
+ "status_ending": "Ending soon",
117
+ "status_exhausted": "Keys exhausted",
118
+ "days": "days",
119
+ "hours": "hours",
120
+ "minutes": "min",
121
+ "seconds": "sec",
122
+ "days_hours": "days and hours",
123
+ "redeem": "Redeem key",
124
+ "actions": "Complementary actions",
125
+ "no_actions": "No actions configured",
126
+ "requirements": "Requirements",
127
+ "requirement": {
128
+ "all": "Open to all",
129
+ "official": "Official streamers",
130
+ "affiliate": "Affiliate or above"
131
+ },
132
+ "rp_label": "Redeemed by",
133
+ "who_redeem": "Who redeemed",
134
+ "created_by": "Published by",
135
+ "no_data": "Campaign not found"
136
+ },
137
+ "other_campaigns": "Outras campanhas",
138
+ "available": "disponível",
139
+ "closed": "Encerrada",
140
+ "platform": "Plataforma",
141
+ "region": "Região",
142
+ "description_optional": "Descrição (opcional)",
143
+ "description_placeholder": "Conte um pouco sobre seu canal ou planos de conteúdo...",
144
+ "sending": "Enviando...",
145
+ "request_sent": "Solicitação enviada! Redirecionando...",
146
+ "error_loading": "Falha ao carregar dados da campanha.",
147
+ "error_request": "Não foi possível enviar a solicitação. Tente novamente.",
148
+ "error_reveal": "Não foi possível revelar a chave. Tente novamente.",
149
+ "redeem_title": "Solicitar uma Chave",
150
+ "reveal_hint": "Clique no botão abaixo para revelar o código da sua chave.",
151
+ "your_key": "Sua Chave",
152
+ "copy": "Copiar",
153
+ "copied": "Copiado!",
154
+ "redeem_on_platform": "Resgate esta chave na plataforma correspondente.",
155
+ "revealing": "Revelando...",
156
+ "status": "Status"
157
+ },
158
+ "materials": {
159
+ "title": "Submit material",
160
+ "subtitle": "Send the link to your content about this game",
161
+ "back": "Back",
162
+ "link": "Content link",
163
+ "description": "Description (optional)",
164
+ "date": "Publication date",
165
+ "type": "Content type",
166
+ "type_stream": "Live stream",
167
+ "type_video": "Video",
168
+ "type_article": "Article / Review",
169
+ "type_web": "Website / Blog",
170
+ "type_print": "Screenshot / Print",
171
+ "required_fields": "Fill in all required fields",
172
+ "url_error": "Invalid URL",
173
+ "submit_error": "Error submitting. Try again.",
174
+ "sending": "Sending...",
175
+ "finish": "Submit",
176
+ "submitted_title": "Material submitted!",
177
+ "success_message": "Your material was sent for review. Thank you!",
178
+ "success_close": "Close"
179
+ }
180
+ }
181
+ }
package/locales/ro.json ADDED
@@ -0,0 +1,181 @@
1
+ {
2
+ "keys": {
3
+ "notif_prompt_title": "Vrei alerte pentru campanii noi de chei?",
4
+ "notif_prompt_desc": "Te notificăm prin email și push când o nouă campanie de chei se deschide.",
5
+ "notif_prompt_enable": "Activează",
6
+ "notif_prompt_dismiss": "Acum nu",
7
+ "browser": {
8
+ "tab_available": "Disponibile",
9
+ "tab_mine": "Cererile mele",
10
+ "select_platform": "Selectează platforma",
11
+ "description_label": "De ce meriți această cheie?",
12
+ "description_placeholder": "Ex: Am un canal YouTube cu 5k abonați axat pe recenzii de jocuri. Vreau să public o recenzie completă pentru publicul meu.",
13
+ "request_btn": "Solicită cheia",
14
+ "already_requested": "Cerere trimisă",
15
+ "reveal_btn": "Afișează cheia",
16
+ "revealed": "Cheie afișată",
17
+ "pending_approval": "În așteptarea aprobării",
18
+ "login_required": "Autentifică-te pentru a solicita această cheie",
19
+ "login_btn": "Autentificare",
20
+ "no_keys": "Nicio cheie disponibilă momentan",
21
+ "no_pools": "Nicio campanie activă",
22
+ "no_requests": "Nu ai solicitat nicio cheie încă"
23
+ },
24
+ "campaigns": {
25
+ "title": "Key Campaigns",
26
+ "my_requests": "My Requests",
27
+ "all": "All",
28
+ "details": "Details",
29
+ "see_campaign": "See campaign",
30
+ "see_content": "See content",
31
+ "redeem": "Redeem",
32
+ "load_more": "Load more",
33
+ "no_results": "No campaigns found",
34
+ "days": "days",
35
+ "creators": "creators",
36
+ "upgrade_plan": "Upgrade plan",
37
+ "exclusive": "Exclusive",
38
+ "exclusive_upgrade": "Upgrade to access",
39
+ "exclusive_upgrade_cta": "Upgrade your plan to request this key",
40
+ "exclusive_lock_title": "Exclusive campaign",
41
+ "early_access": "Early access",
42
+ "early_access_lock_title": "Early access",
43
+ "early_access_opens_in": "Opens in",
44
+ "unavailable": "Unavailable",
45
+ "upcoming": "Coming soon",
46
+ "back": "Back",
47
+ "search_placeholder": "Search campaigns...",
48
+ "seo": {
49
+ "title_generic": "Key Campaigns"
50
+ },
51
+ "restriction": {
52
+ "exclusive_official": "Official streamers only",
53
+ "level_official": "Official",
54
+ "level_affiliate": "Affiliate"
55
+ },
56
+ "status_key": {
57
+ "see_key": "View key",
58
+ "of": "of",
59
+ "title_0": "Campaign",
60
+ "title_span_0": "ended",
61
+ "obs_0": "The redemption period for the key has expired.",
62
+ "title_1": "Now you need to",
63
+ "title_span_1": "redeem the key",
64
+ "obs_1": "Check the campaign requirements before requesting your key(s)",
65
+ "title_2": "Now just",
66
+ "title_span_2": "wait",
67
+ "obs_2": "Your request is being reviewed. After approval, you will receive a confirmation email.",
68
+ "title_approved": "Your request has been ",
69
+ "title_span_approved": "approved!",
70
+ "obs_approved": "Your key is ready. Click to reveal it.",
71
+ "reveal_key": "Reveal key",
72
+ "view_code": "View code",
73
+ "title_3": "Now you just need to",
74
+ "title_span_3": "send the material",
75
+ "title_3_2": "developed",
76
+ "obs_3": "You have 14 days to send the developed material",
77
+ "complete": "Completed",
78
+ "title_span_4": "Nice!",
79
+ "title_4": "If you have more materials, feel free to add them",
80
+ "obs_4": "If you want to add more, you still have 6 days to send it.",
81
+ "title_5": "Your request was",
82
+ "title_span_5": "rejected",
83
+ "obs_5": "Unfortunately, your key request was not approved. Please check the campaign requirements and try again in the future.",
84
+ "title_6": "Request",
85
+ "title_span_6": "cancelled",
86
+ "obs_6": "You canceled this request. If you want to try again, just start a new request according to the campaign rules.",
87
+ "title_7": "Request",
88
+ "title_span_7": "expired",
89
+ "obs_7": "The deadline for submitting the material or using the key has expired. Keep an eye on deadlines in future campaigns!",
90
+ "title_8": "Key",
91
+ "title_span_8": "revoked",
92
+ "obs_8": "Your key has been revoked by the administration. If you have any questions, contact support or review the campaign rules.",
93
+ "title_exhausted": "Keys",
94
+ "title_span_exhausted": "exhausted",
95
+ "obs_exhausted": "All keys for this campaign have already been distributed.",
96
+ "title_locked": "This campaign is",
97
+ "title_span_locked": "exclusive",
98
+ "obs_locked_exclusive": "Available only to higher tiers. Upgrade to take part.",
99
+ "obs_locked_early": "Your plan doesn't have access to this campaign yet. Upgrade to unlock.",
100
+ "obs_locked_tier": "Available only to {tier} plan subscribers or higher. Upgrade to take part.",
101
+ "title_level": "This campaign is for",
102
+ "title_span_level_official": "official streamers",
103
+ "title_span_level_affiliate": "affiliates",
104
+ "obs_level_official": "Available only to official MG streamers.",
105
+ "obs_level_affiliate": "Available only to affiliate creators (casting). Join the casting to take part."
106
+ },
107
+ "campaign": {
108
+ "available": "available",
109
+ "keys": "keys",
110
+ "start": "Start",
111
+ "end": "End",
112
+ "launch": "Launch",
113
+ "status": "Status",
114
+ "status_active": "Active",
115
+ "status_closed": "Closed",
116
+ "status_ending": "Ending soon",
117
+ "status_exhausted": "Keys exhausted",
118
+ "days": "days",
119
+ "hours": "hours",
120
+ "minutes": "min",
121
+ "seconds": "sec",
122
+ "days_hours": "days and hours",
123
+ "redeem": "Redeem key",
124
+ "actions": "Complementary actions",
125
+ "no_actions": "No actions configured",
126
+ "requirements": "Requirements",
127
+ "requirement": {
128
+ "all": "Open to all",
129
+ "official": "Official streamers",
130
+ "affiliate": "Affiliate or above"
131
+ },
132
+ "rp_label": "Redeemed by",
133
+ "who_redeem": "Who redeemed",
134
+ "created_by": "Published by",
135
+ "no_data": "Campaign not found"
136
+ },
137
+ "other_campaigns": "Alte campanii",
138
+ "available": "disponibil",
139
+ "closed": "Închis",
140
+ "platform": "Platformă",
141
+ "region": "Regiune",
142
+ "description_optional": "Descriere (opțional)",
143
+ "description_placeholder": "Spune-ne puțin despre canalul tău...",
144
+ "sending": "Se trimite...",
145
+ "request_sent": "Cerere trimisă! Redirecționare...",
146
+ "error_loading": "Eroare la încărcarea datelor campaniei.",
147
+ "error_request": "Nu s-a putut trimite cererea. Încearcă din nou.",
148
+ "error_reveal": "Nu s-a putut dezvălui cheia.",
149
+ "redeem_title": "Solicită o Cheie",
150
+ "reveal_hint": "Apasă butonul de mai jos pentru a dezvălui codul cheii.",
151
+ "your_key": "Cheia Ta",
152
+ "copy": "Copiază",
153
+ "copied": "Copiat!",
154
+ "redeem_on_platform": "Activează această cheie pe platforma corespunzătoare.",
155
+ "revealing": "Se dezvăluie...",
156
+ "status": "Status"
157
+ },
158
+ "materials": {
159
+ "title": "Submit material",
160
+ "subtitle": "Send the link to your content about this game",
161
+ "back": "Back",
162
+ "link": "Content link",
163
+ "description": "Description (optional)",
164
+ "date": "Publication date",
165
+ "type": "Content type",
166
+ "type_stream": "Live stream",
167
+ "type_video": "Video",
168
+ "type_article": "Article / Review",
169
+ "type_web": "Website / Blog",
170
+ "type_print": "Screenshot / Print",
171
+ "required_fields": "Fill in all required fields",
172
+ "url_error": "Invalid URL",
173
+ "submit_error": "Error submitting. Try again.",
174
+ "sending": "Sending...",
175
+ "finish": "Submit",
176
+ "submitted_title": "Material submitted!",
177
+ "success_message": "Your material was sent for review. Thank you!",
178
+ "success_close": "Close"
179
+ }
180
+ }
181
+ }
package/nuxt.config.ts CHANGED
@@ -1,4 +1,7 @@
1
1
  export default defineNuxtConfig({
2
+ components: [
3
+ { path: "~/components", pathPrefix: false },
4
+ ],
2
5
  css: [
3
6
  "@mundogamernetwork/shared-ui/assets/kit/kit-base.css",
4
7
  "@mundogamernetwork/shared-ui/assets/kit/kit-theme.css",
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@mundogamernetwork/shared-ui",
3
- "version": "1.1.66",
3
+ "version": "1.1.68",
4
4
  "description": "Mundo Gamer Network - Shared UI Layer (Nuxt 3)",
5
5
  "type": "module",
6
6
  "main": "./nuxt.config.ts",
@@ -8,6 +8,7 @@
8
8
  "assets",
9
9
  "components",
10
10
  "composables",
11
+ "locales",
11
12
  "middleware",
12
13
  "pages",
13
14
  "plugins",
package/pages/key-campaign/[slug].vue CHANGED
@@ -41,6 +41,19 @@ const key = computed(() => keyData.value?.data || null);
41
41
  const loading = pending;
42
42
  const error = computed(() => !!fetchError.value || (!pending.value && !key.value));
43
43
 
44
+ const { $i18n } = useNuxtApp()
45
+ const t = $i18n.t.bind($i18n)
46
+
47
+ useSeoMeta({
48
+ title: () => key.value?.name ? t('keys.campaigns.seo.title', { game: key.value.name }) : t('keys.campaigns.seo.title_generic'),
49
+ description: () => key.value?.name ? t('keys.campaigns.seo.description', { game: key.value.name }) : t('keys.campaigns.seo.title_generic'),
50
+ ogTitle: () => key.value?.name ? t('keys.campaigns.seo.title', { game: key.value.name }) : t('keys.campaigns.seo.title_generic'),
51
+ ogDescription: () => key.value?.name ? t('keys.campaigns.seo.description', { game: key.value.name }) : t('keys.campaigns.seo.title_generic'),
52
+ ogImage: () => key.value?.cover_src || key.value?.cover || undefined,
53
+ ogType: 'website',
54
+ twitterCard: 'summary_large_image',
55
+ })
56
+
44
57
  const restriction = computed(() => {
45
58
  const k = key.value;
46
59
  if (!k) return '';
@@ -76,6 +89,8 @@ const restriction = computed(() => {
76
89
  :game-id="key.game?.id || key.game_id"
77
90
  />
78
91
  </div>
92
+
93
+ <KeyCampaignsCarousel :exclude-id="key.id ?? null" />
79
94
  </template>
80
95
  </div>
81
96
  </template>
package/pages/key-campaigns/[slug].vue CHANGED
@@ -681,8 +681,9 @@ onMounted(async () => {
681
681
  <img
682
682
  v-for="(u, index) in redeemedUsers?.users?.slice(0, 4)"
683
683
  :key="index"
684
- :src="u.avatar_url"
684
+ :src="u.avatar_url || '/imgs/avatar-default.jpg'"
685
685
  :alt="u.nickname"
686
+ @error="(e: Event) => { const t = e.target as HTMLImageElement; if (t && t.src !== '/imgs/avatar-default.jpg') t.src = '/imgs/avatar-default.jpg' }"
686
687
  />
687
688
  </div>
688
689
  <div class="text">
@@ -719,6 +720,11 @@ onMounted(async () => {
719
720
  </div>
720
721
  </div>
721
722
  </div>
723
+ <KeyCampaignsCarousel
724
+ :exclude-id="campaign?.id ?? null"
725
+ :mg-platform="mgPlatform"
726
+ class="container"
727
+ />
722
728
  </div>
723
729
  </template>
724
730
 
@@ -761,7 +767,7 @@ onMounted(async () => {
761
767
  justify-content: space-between;
762
768
 
763
769
  .btn {
764
- background: var(--key-accent, #D297FF);
770
+ background: var(--key-accent, var(--primary, #D297FF));
765
771
  display: flex;
766
772
  height: 44px;
767
773
  padding: 0 14px;
@@ -787,7 +793,7 @@ onMounted(async () => {
787
793
  align-items: center;
788
794
  gap: 6px;
789
795
  font-size: 13px;
790
- color: var(--key-accent, #D297FF);
796
+ color: var(--key-accent, var(--primary, #D297FF));
791
797
  cursor: pointer;
792
798
  text-decoration: none;
793
799
  white-space: nowrap;
@@ -806,7 +812,7 @@ onMounted(async () => {
806
812
  font-size: 14px;
807
813
  font-weight: 600;
808
814
  color: var(--card-article-title);
809
- span { color: var(--key-accent, #d297ff); }
815
+ span { color: var(--key-accent, var(--primary, #D297FF)); }
810
816
  .yellow { color: #FFD600; }
811
817
  .red { color: #ff4800; }
812
818
  }
@@ -819,7 +825,7 @@ onMounted(async () => {
819
825
 
820
826
  .progress {
821
827
  height: 24px;
822
- background-color: var(--key-accent, #d297ff);
828
+ background-color: var(--key-accent, var(--primary, #D297FF));
823
829
  span {
824
830
  position: absolute;
825
831
  right: 5px;
@@ -835,7 +841,7 @@ onMounted(async () => {
835
841
  .info {
836
842
  font-size: 12px;
837
843
  color: var(--secondary-info-fg);
838
- i { color: var(--key-accent, #d297ff); }
844
+ i { color: var(--key-accent, var(--primary, #D297FF)); }
839
845
  .yellow { color: #FFD600; }
840
846
  .red { color: #ff4800; }
841
847
  }
@@ -882,7 +888,7 @@ onMounted(async () => {
882
888
  padding: 4px 10px;
883
889
  font-size: 12px;
884
890
  font-weight: 600;
885
- color: var(--key-accent, #D297FF);
891
+ color: var(--key-accent, var(--primary, #D297FF));
886
892
  background: rgba(210, 151, 255, 0.12);
887
893
  border: 1px solid rgba(210, 151, 255, 0.35);
888
894
  i { font-size: 13px; }
@@ -981,7 +987,7 @@ onMounted(async () => {
981
987
  gap: 6px;
982
988
  background-color: var(--button-secondary-default-bg);
983
989
  font-size: 28px;
984
- color: var(--key-accent, #D297FF);
990
+ color: var(--key-accent, var(--primary, #D297FF));
985
991
  font-weight: 700;
986
992
  width: -webkit-fill-available;
987
993
  span { font-size: 10px; color: var(--secondary-info-fg); font-weight: 400; }
@@ -1015,7 +1021,7 @@ onMounted(async () => {
1015
1021
  width: -webkit-fill-available;
1016
1022
  cursor: pointer;
1017
1023
  &:hover, &.active {
1018
- background-color: var(--key-accent, #D297FF);
1024
+ background-color: var(--key-accent, var(--primary, #D297FF));
1019
1025
  color: #1C1C1C;
1020
1026
  i { color: #1C1C1C; }
1021
1027
  }
@@ -1060,7 +1066,7 @@ onMounted(async () => {
1060
1066
  flex-shrink: 0;
1061
1067
  border-radius: 100%;
1062
1068
  text-align-last: center;
1063
- i { color: var(--key-accent, #D297FF); }
1069
+ i { color: var(--key-accent, var(--primary, #D297FF)); }
1064
1070
  }
1065
1071
  .texts {
1066
1072
  display: flex;
@@ -1081,7 +1087,7 @@ onMounted(async () => {
1081
1087
  width: 100%;
1082
1088
  }
1083
1089
 
1084
- .reward span { color: var(--key-accent, #D297FF); }
1090
+ .reward span { color: var(--key-accent, var(--primary, #D297FF)); }
1085
1091
 
1086
1092
  .data {
1087
1093
  display: flex;
@@ -1114,7 +1120,7 @@ onMounted(async () => {
1114
1120
  font-size: 12px;
1115
1121
  color: var(--secondary-info-fg);
1116
1122
  width: -webkit-fill-available;
1117
- span { font-size: 16px; color: var(--key-accent, #D297FF); font-weight: 600; }
1123
+ span { font-size: 16px; color: var(--key-accent, var(--primary, #D297FF)); font-weight: 600; }
1118
1124
  }
1119
1125
  }
1120
1126