@ludo.ninja/components 2.3.86 → 2.3.88

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 (11) hide show
  1. package/build/dto/common/ItemType/index.d.ts +11 -10
  2. package/build/dto/common/ItemType/index.js +10 -10
  3. package/build/entities/labelCreationType/data.js +5 -0
  4. package/build/entities/labelCreationType/types.d.ts +11 -10
  5. package/build/entities/labelCreationType/types.js +10 -10
  6. package/build/modules/opportunity/OpportunityCard.d.ts +11 -4
  7. package/build/modules/opportunity/OpportunityCard.js +111 -31
  8. package/build/system/Cards/CardContent/CardCategory/index.js +25 -4
  9. package/build/system/Labels/ExperienceLabel/index.d.ts +4 -1
  10. package/build/system/Labels/ExperienceLabel/index.js +2 -2
  11. package/package.json +1 -1
package/build/dto/common/ItemType/index.d.ts CHANGED
@@ -8,24 +8,24 @@ declare enum LabelKeys {
8
8
  airdrop = "TOKEN_AIRDROP"
9
9
  }
10
10
  declare enum LabelBackground {
11
- asset = "#F3D6FD",
11
+ asset = "transparent",
12
12
  collection = "#CDE4FF",
13
13
  event = "#CDF8D9",
14
- gallery = "#FFDFCD",
15
- favorites = "#CDCFF8",
14
+ gallery = "transparent",
15
+ favorites = "transparent",
16
16
  likelist = "#CDCFF8",
17
- opportunity = "#CDF8D9",
18
- airdrop = "#FAB6B6"
17
+ opportunity = "transparent",
18
+ airdrop = "transparent"
19
19
  }
20
20
  declare enum LabelColor {
21
- asset = "#9177B1",
21
+ asset = "#FF7E6A",
22
22
  collection = "#6E86C3",
23
23
  event = "#77B179",
24
- gallery = "#B19077",
25
- favorites = "#7779B1",
24
+ gallery = "#1FCCAF",
25
+ favorites = "#7B76FF",
26
26
  likelist = "#7779B1",
27
- opportunity = "#77B179",
28
- airdrop = "#9B5050"
27
+ opportunity = "#5FD068",
28
+ airdrop = "#CF4CFF"
29
29
  }
30
30
  declare enum LabelText {
31
31
  asset = "nft",
@@ -41,6 +41,7 @@ type LabelType = {
41
41
  backgroundColor: LabelBackground;
42
42
  text: LabelText;
43
43
  color: LabelColor;
44
+ borderColor?: string;
44
45
  };
45
46
  type LabelItem = {
46
47
  [key in LabelKeys]: LabelType;
package/build/dto/common/ItemType/index.js CHANGED
@@ -13,25 +13,25 @@ var LabelKeys;
13
13
  })(LabelKeys || (exports.LabelKeys = LabelKeys = {}));
14
14
  var LabelBackground;
15
15
  (function (LabelBackground) {
16
- LabelBackground["asset"] = "#F3D6FD";
16
+ LabelBackground["asset"] = "transparent";
17
17
  LabelBackground["collection"] = "#CDE4FF";
18
18
  LabelBackground["event"] = "#CDF8D9";
19
- LabelBackground["gallery"] = "#FFDFCD";
20
- LabelBackground["favorites"] = "#CDCFF8";
19
+ LabelBackground["gallery"] = "transparent";
20
+ LabelBackground["favorites"] = "transparent";
21
21
  LabelBackground["likelist"] = "#CDCFF8";
22
- LabelBackground["opportunity"] = "#CDF8D9";
23
- LabelBackground["airdrop"] = "#FAB6B6";
22
+ LabelBackground["opportunity"] = "transparent";
23
+ LabelBackground["airdrop"] = "transparent";
24
24
  })(LabelBackground || (exports.LabelBackground = LabelBackground = {}));
25
25
  var LabelColor;
26
26
  (function (LabelColor) {
27
- LabelColor["asset"] = "#9177B1";
27
+ LabelColor["asset"] = "#FF7E6A";
28
28
  LabelColor["collection"] = "#6E86C3";
29
29
  LabelColor["event"] = "#77B179";
30
- LabelColor["gallery"] = "#B19077";
31
- LabelColor["favorites"] = "#7779B1";
30
+ LabelColor["gallery"] = "#1FCCAF";
31
+ LabelColor["favorites"] = "#7B76FF";
32
32
  LabelColor["likelist"] = "#7779B1";
33
- LabelColor["opportunity"] = "#77B179";
34
- LabelColor["airdrop"] = "#9B5050";
33
+ LabelColor["opportunity"] = "#5FD068";
34
+ LabelColor["airdrop"] = "#CF4CFF";
35
35
  })(LabelColor || (exports.LabelColor = LabelColor = {}));
36
36
  var LabelText;
37
37
  (function (LabelText) {
package/build/entities/labelCreationType/data.js CHANGED
@@ -6,6 +6,7 @@ const labelsData = {
6
6
  backgroundColor: types_1.LabelBackground.asset,
7
7
  color: types_1.LabelColor.asset,
8
8
  text: types_1.LabelText.asset,
9
+ borderColor: types_1.LabelColor.asset,
9
10
  },
10
11
  [types_1.LabelKeys.collection]: {
11
12
  backgroundColor: types_1.LabelBackground.collection,
@@ -16,11 +17,13 @@ const labelsData = {
16
17
  backgroundColor: types_1.LabelBackground.gallery,
17
18
  color: types_1.LabelColor.gallery,
18
19
  text: types_1.LabelText.gallery,
20
+ borderColor: types_1.LabelColor.gallery,
19
21
  },
20
22
  [types_1.LabelKeys.favorites]: {
21
23
  backgroundColor: types_1.LabelBackground.favorites,
22
24
  color: types_1.LabelColor.favorites,
23
25
  text: types_1.LabelText.favorites,
26
+ borderColor: types_1.LabelColor.favorites,
24
27
  },
25
28
  [types_1.LabelKeys.likelist]: {
26
29
  backgroundColor: types_1.LabelBackground.likelist,
@@ -31,11 +34,13 @@ const labelsData = {
31
34
  backgroundColor: types_1.LabelBackground.opportunity,
32
35
  color: types_1.LabelColor.opportunity,
33
36
  text: types_1.LabelText.opportunity,
37
+ borderColor: types_1.LabelColor.opportunity,
34
38
  },
35
39
  [types_1.LabelKeys.airdrop]: {
36
40
  backgroundColor: types_1.LabelBackground.airdrop,
37
41
  color: types_1.LabelColor.airdrop,
38
42
  text: types_1.LabelText.airdrop,
43
+ borderColor: types_1.LabelColor.airdrop,
39
44
  },
40
45
  };
41
46
  exports.default = labelsData;
package/build/entities/labelCreationType/types.d.ts CHANGED
@@ -8,24 +8,24 @@ declare enum LabelKeys {
8
8
  airdrop = "TOKEN_AIRDROP"
9
9
  }
10
10
  declare enum LabelBackground {
11
- asset = "#F3D6FD",
11
+ asset = "transparent",
12
12
  collection = "#CDE4FF",
13
13
  event = "#CDF8D9",
14
- gallery = "#FFDFCD",
15
- favorites = "#CDCFF8",
14
+ gallery = "transparent",
15
+ favorites = "transparent",
16
16
  likelist = "#CDCFF8",
17
- opportunity = "#CDF8D9",
18
- airdrop = "#FAB6B6"
17
+ opportunity = "transparent",
18
+ airdrop = "transparent"
19
19
  }
20
20
  declare enum LabelColor {
21
- asset = "#9177B1",
21
+ asset = "#FF7E6A",
22
22
  collection = "#6E86C3",
23
23
  event = "#77B179",
24
- gallery = "#B19077",
25
- favorites = "#7779B1",
24
+ gallery = "#1FCCAF",
25
+ favorites = "#7B76FF",
26
26
  likelist = "#7779B1",
27
- opportunity = "#77B179",
28
- airdrop = "#9B5050"
27
+ opportunity = "#5FD068",
28
+ airdrop = "#CF4CFF"
29
29
  }
30
30
  declare enum LabelText {
31
31
  asset = "nft",
@@ -41,6 +41,7 @@ type LabelType = {
41
41
  backgroundColor: LabelBackground;
42
42
  text: LabelText;
43
43
  color: LabelColor;
44
+ borderColor?: string;
44
45
  };
45
46
  type LabelItem = {
46
47
  [key in LabelKeys]: LabelType;
package/build/entities/labelCreationType/types.js CHANGED
@@ -13,25 +13,25 @@ var LabelKeys;
13
13
  })(LabelKeys || (exports.LabelKeys = LabelKeys = {}));
14
14
  var LabelBackground;
15
15
  (function (LabelBackground) {
16
- LabelBackground["asset"] = "#F3D6FD";
16
+ LabelBackground["asset"] = "transparent";
17
17
  LabelBackground["collection"] = "#CDE4FF";
18
18
  LabelBackground["event"] = "#CDF8D9";
19
- LabelBackground["gallery"] = "#FFDFCD";
20
- LabelBackground["favorites"] = "#CDCFF8";
19
+ LabelBackground["gallery"] = "transparent";
20
+ LabelBackground["favorites"] = "transparent";
21
21
  LabelBackground["likelist"] = "#CDCFF8";
22
- LabelBackground["opportunity"] = "#CDF8D9";
23
- LabelBackground["airdrop"] = "#FAB6B6";
22
+ LabelBackground["opportunity"] = "transparent";
23
+ LabelBackground["airdrop"] = "transparent";
24
24
  })(LabelBackground || (exports.LabelBackground = LabelBackground = {}));
25
25
  var LabelColor;
26
26
  (function (LabelColor) {
27
- LabelColor["asset"] = "#9177B1";
27
+ LabelColor["asset"] = "#FF7E6A";
28
28
  LabelColor["collection"] = "#6E86C3";
29
29
  LabelColor["event"] = "#77B179";
30
- LabelColor["gallery"] = "#B19077";
31
- LabelColor["favorites"] = "#7779B1";
30
+ LabelColor["gallery"] = "#1FCCAF";
31
+ LabelColor["favorites"] = "#7B76FF";
32
32
  LabelColor["likelist"] = "#7779B1";
33
- LabelColor["opportunity"] = "#77B179";
34
- LabelColor["airdrop"] = "#9B5050";
33
+ LabelColor["opportunity"] = "#5FD068";
34
+ LabelColor["airdrop"] = "#CF4CFF";
35
35
  })(LabelColor || (exports.LabelColor = LabelColor = {}));
36
36
  var LabelText;
37
37
  (function (LabelText) {
package/build/modules/opportunity/OpportunityCard.d.ts CHANGED
@@ -1,7 +1,14 @@
1
1
  import { TOpportunity } from './type';
2
- export declare const HEADER_BACKGROUNDS: string[];
3
- export declare const OpportunityCard: ({ opportunity, toolsForRemove, headColorImage }: {
4
- opportunity: TOpportunity;
2
+ import { IProject } from "@ludo.ninja/api/build/graphql_tools/__generated__/opportunitiesHost/schema";
3
+ import { Maybe } from "graphql/jsutils/Maybe";
4
+ type OpportunityBackground = "green" | "blue" | "pink" | "orange" | "blue_pink" | "green_blue" | "yellow" | "blue_gray" | "gray";
5
+ export declare const HEADER_BACKGROUNDS: OpportunityBackground[];
6
+ export declare const HEADER_BACKGROUNDS_MAP: Record<string, OpportunityBackground>;
7
+ export declare const OpportunityCard: ({ opportunity, toolsForRemove, headColorImage, }: {
8
+ opportunity: TOpportunity & {
9
+ project?: Maybe<Pick<IProject, "symbol" | "name" | "contract" | "originalMediaUrl" | "mediaUrl">>;
10
+ };
5
11
  toolsForRemove?: ((itemType: "asset" | "collection" | "opportunity") => void) | undefined;
6
- headColorImage?: string;
12
+ headColorImage?: OpportunityBackground;
7
13
  }) => import("react/jsx-runtime").JSX.Element;
14
+ export {};
package/build/modules/opportunity/OpportunityCard.js CHANGED
@@ -3,7 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
3
3
  return (mod && mod.__esModule) ? mod : { "default": mod };
4
4
  };
5
5
  Object.defineProperty(exports, "__esModule", { value: true });
6
- exports.OpportunityCard = exports.HEADER_BACKGROUNDS = void 0;
6
+ exports.OpportunityCard = exports.HEADER_BACKGROUNDS_MAP = exports.HEADER_BACKGROUNDS = void 0;
7
7
  const jsx_runtime_1 = require("react/jsx-runtime");
8
8
  const useDislikeOpportunity_1 = require("../../api/server-opportunities/mutations/useDislikeOpportunity");
9
9
  const useLikeOpportunity_1 = require("../../api/server-opportunities/mutations/useLikeOpportunity");
@@ -31,39 +31,61 @@ const ludoDomains_1 = require("@ludo.ninja/core/build/ludoDomains");
31
31
  const colors_2 = require("@ludo.ninja/ui/build/styles/colors");
32
32
  const boxShadow_1 = __importDefault(require("@ludo.ninja/ui/build/styles/mixins/boxShadow"));
33
33
  const _4k_1 = require("@ludo.ninja/ui/build/utils/4k");
34
+ const utils_1 = require("@ludo.ninja/utils");
34
35
  const moment_1 = __importDefault(require("moment/moment"));
35
36
  const react_1 = require("react");
36
37
  const sanitize_html_1 = __importDefault(require("sanitize-html"));
37
38
  const styled_components_1 = __importDefault(require("styled-components"));
38
- exports.HEADER_BACKGROUNDS = ['green', 'blue', 'pink', 'orange'];
39
+ exports.HEADER_BACKGROUNDS = [
40
+ "green",
41
+ "blue",
42
+ "pink",
43
+ "orange",
44
+ "blue_pink",
45
+ "green_blue",
46
+ "yellow",
47
+ "blue_gray",
48
+ "gray",
49
+ ];
50
+ exports.HEADER_BACKGROUNDS_MAP = {
51
+ DePin: "green",
52
+ GameFi: "pink",
53
+ DeFi: "blue",
54
+ MemeCoins: "orange",
55
+ "All Projects": "blue_pink",
56
+ "AI Agents": "green_blue",
57
+ RWA: "yellow",
58
+ Other: "blue_gray",
59
+ "Token Graveyard": "gray",
60
+ };
39
61
  const SWrapperLink = styled_components_1.default.a `
40
- position: relative;
41
- background-color: ${colors_2.WhiteColor};
42
- border-radius: 6px;
43
- ${boxShadow_1.default};
44
- ${boxTransform_1.default};
45
- width: 252px;
46
- overflow: hidden;
47
- display: flex;
48
- flex-direction: column;
62
+ position: relative;
63
+ background-color: ${colors_2.WhiteColor};
64
+ border-radius: 6px;
65
+ ${boxShadow_1.default};
66
+ ${boxTransform_1.default};
67
+ width: 252px;
68
+ overflow: hidden;
69
+ display: flex;
70
+ flex-direction: column;
49
71
 
50
- &:hover ${Headicons_1.default} {
51
- transition: 0.2s opacity ease-in;
52
- opacity: 1 !important;
53
- }
72
+ &:hover ${Headicons_1.default} {
73
+ transition: 0.2s opacity ease-in;
74
+ opacity: 1 !important;
75
+ }
54
76
 
55
- // ${ScreenWidth_1.mediaQuery.maxWidthTablet} {
56
- // width: 164px;
57
- // }
77
+ // ${ScreenWidth_1.mediaQuery.maxWidthTablet} {
78
+ // width: 164px;
79
+ // }
58
80
 
59
- ${ScreenWidth_1.mediaQuery.mobile} {
60
- width: 100%;
61
- }
81
+ ${ScreenWidth_1.mediaQuery.mobile} {
82
+ width: 100%;
83
+ }
62
84
 
63
- ${ScreenWidth_1.mediaQuery.minWidthFourK} {
64
- width: ${(0, _4k_1.adaptiveValueCalc)(252)};
65
- border-radius: ${(0, _4k_1.adaptiveValueCalc)(6)};
66
- }
85
+ ${ScreenWidth_1.mediaQuery.minWidthFourK} {
86
+ width: ${(0, _4k_1.adaptiveValueCalc)(252)};
87
+ border-radius: ${(0, _4k_1.adaptiveValueCalc)(6)};
88
+ }
67
89
  `;
68
90
  const StyledCardHead = styled_components_1.default.div `
69
91
  position: relative;
@@ -85,7 +107,7 @@ const StyledCardHead = styled_components_1.default.div `
85
107
  // width: 164px;
86
108
  //}
87
109
 
88
- ${ScreenWidth_1.mediaQuery.mobile} {
110
+ ${ScreenWidth_1.mediaQuery.mobile} {
89
111
  height: 40px;
90
112
  width: 100%;
91
113
  }
@@ -98,12 +120,13 @@ const StyledCardHead = styled_components_1.default.div `
98
120
  const OpportunityName = styled_components_1.default.div `
99
121
  ${typography_1.FH5};
100
122
  color: ${colors_2.WhiteColor};
123
+ text-shadow: 0 2px 4px rgba(72, 45, 167, 0.4);
101
124
  font-weight: 700;
102
125
  padding: 6px 16px;
103
126
  overflow: hidden;
104
127
  text-overflow: ellipsis;
105
128
  white-space: nowrap;
106
-
129
+
107
130
  ${ScreenWidth_1.mediaQuery.minWidthFourK} {
108
131
  padding: ${(0, _4k_1.adaptiveValueCalc)(6)} ${(0, _4k_1.adaptiveValueCalc)(16)};
109
132
  }
@@ -115,6 +138,7 @@ const StyledCardContent = styled_components_1.default.div `
115
138
  min-height: 212px;
116
139
  //max-height: 212px;
117
140
  flex-grow: 1;
141
+
118
142
  ${ScreenWidth_1.mediaQuery.mobile} {
119
143
  min-height: 172px;
120
144
  //max-height: 84px;
@@ -174,7 +198,10 @@ const StyledCardContent = styled_components_1.default.div `
174
198
  }
175
199
 
176
200
  .btnClaim {
177
- border-radius: 6px;
201
+ background: #eaedfc;
202
+ color: ${colors_1.AccentColor};
203
+ border-radius: 5px;
204
+ padding: 5px 14px;
178
205
  }
179
206
 
180
207
  .date {
@@ -220,7 +247,8 @@ const StyledCardContent = styled_components_1.default.div `
220
247
  }
221
248
 
222
249
  .btnClaim {
223
- border-radius: ${(0, _4k_1.adaptiveValueCalc)(6)};
250
+ border-radius: ${(0, _4k_1.adaptiveValueCalc)(5)};
251
+ padding: ${(0, _4k_1.adaptiveValueCalc)(5)} ${(0, _4k_1.adaptiveValueCalc)(14)};
224
252
  }
225
253
 
226
254
  .date {
@@ -234,6 +262,51 @@ const SImage = styled_components_1.default.img `
234
262
  height: 100%;
235
263
  object-fit: cover;
236
264
  `;
265
+ const ProjectBlock = styled_components_1.default.div `
266
+ display: flex;
267
+ align-items: center;
268
+ gap: 6px;
269
+ margin-bottom: 8px;
270
+
271
+ .name {
272
+ display: flex;
273
+ gap: 4px;
274
+ align-items: center;
275
+ flex: 0;
276
+
277
+ .project-name {
278
+ overflow: hidden;
279
+ text-overflow: ellipsis;
280
+ white-space: nowrap;
281
+ max-width: 125px;
282
+ }
283
+ }
284
+
285
+ .icon {
286
+ width: 20px;
287
+ height: 20px;
288
+ aspect-ratio: 1/1;
289
+ border-radius: 50%;
290
+ }
291
+
292
+ ${ScreenWidth_1.mediaQuery.minWidthFourK} {
293
+ gap: ${(0, _4k_1.adaptiveValueCalc)(6)};
294
+ margin-bottom: ${(0, _4k_1.adaptiveValueCalc)(8)};
295
+
296
+ .name {
297
+ gap: ${(0, _4k_1.adaptiveValueCalc)(4)};
298
+
299
+ .project-name {
300
+ max-width: ${(0, _4k_1.adaptiveValueCalc)(125)};
301
+ }
302
+ }
303
+
304
+ .icon {
305
+ width: ${(0, _4k_1.adaptiveValueCalc)(20)};
306
+ height: ${(0, _4k_1.adaptiveValueCalc)(20)};
307
+ }
308
+ }
309
+ `;
237
310
  const OpportunityImage = ({ src, alt }) => {
238
311
  return ((0, jsx_runtime_1.jsx)(ImageInterceptor_1.ImageInterceptor, { className: "imgWrapper", children: (0, jsx_runtime_1.jsx)(SImage, { src: src, alt: alt, width: 252, height: 152 }) }));
239
312
  };
@@ -264,10 +337,11 @@ const OpportunityLike = ({ isDefaultLiked, opportunityId, toolsForRemove, }) =>
264
337
  pointerEvents: isLoadingMutation ? "none" : "unset",
265
338
  }, children: (0, jsx_runtime_1.jsx)(heart_svg_1.default, {}) }));
266
339
  };
267
- const OpportunityCard = ({ opportunity, toolsForRemove, headColorImage }) => {
340
+ const OpportunityCard = ({ opportunity, toolsForRemove, headColorImage, }) => {
268
341
  const { NEXT_PUBLIC_ENV_VALUE } = (0, env_1.useEnvStore)((state) => ({
269
342
  NEXT_PUBLIC_ENV_VALUE: state.NEXT_PUBLIC_ENV_VALUE,
270
343
  }));
344
+ const [isProjectIconErrorLoading, setIsProjectIconErrorLoading] = (0, react_1.useState)(false);
271
345
  const { windowDimensions } = (0, screen_1.useWindowDimensionsWithServerInitial)();
272
346
  const { openOpportunityAction } = (0, useOpenOpportunity_1.default)();
273
347
  const isMobile = !!(windowDimensions?.windowWidth && windowDimensions.windowWidth <= ScreenWidth_1.ScreenWidth.DESKTOP);
@@ -287,7 +361,13 @@ const OpportunityCard = ({ opportunity, toolsForRemove, headColorImage }) => {
287
361
  const sanitizedHtml = (0, sanitize_html_1.default)(opportunity?.description || "", {
288
362
  allowedTags: ["b", "i", "em", "strong", "br", "div"],
289
363
  });
290
- return ((0, jsx_runtime_1.jsxs)(SWrapperLink, { href: opportunityLink, target: "_blank", onClick: () => openOpportunityAction({ opportunityId: opportunity.opportunityId }), children: [(0, jsx_runtime_1.jsx)(StyledCardHead, { backgroundImage: headColorImage, children: (0, jsx_runtime_1.jsx)(OpportunityName, { title: opportunity.name, children: opportunity.name }) }), (0, jsx_runtime_1.jsxs)(StyledCardContent, { children: [(0, jsx_runtime_1.jsx)("div", { className: "cardContent", children: (0, jsx_runtime_1.jsxs)("div", { className: "cardContentWrapper", children: [(0, jsx_runtime_1.jsx)("p", { className: `mainName`, dangerouslySetInnerHTML: { __html: sanitizedHtml } }), (0, jsx_runtime_1.jsxs)("div", { className: `categoryName`, children: [opportunity.categoryName, (0, jsx_runtime_1.jsx)(OpportunityDropDown_1.OpportunityDropDown, { opportunity: opportunity })] })] }) }), (0, jsx_runtime_1.jsxs)(index_1.Flex, { alignItems: "end", justifyContent: "space-between", className: `categoryFooter`, children: [(0, jsx_runtime_1.jsx)(CardCategory_1.default, { label: data_1.default[opportunity.opportunityType] || data_1.default.opportunity }), isAirdrop && !opportunity.subscribed ? ((0, jsx_runtime_1.jsx)(MainButton_1.default, { className: "btnClaim", variant: "primaryXS", text: "Claim", onClick: () => {
364
+ return ((0, jsx_runtime_1.jsxs)(SWrapperLink, { href: opportunityLink, target: "_blank", onClick: () => openOpportunityAction({ opportunityId: opportunity.opportunityId }), children: [(0, jsx_runtime_1.jsx)(StyledCardHead, { backgroundImage: headColorImage ||
365
+ exports.HEADER_BACKGROUNDS_MAP[opportunity?.categoryName || "Other"] ||
366
+ exports.HEADER_BACKGROUNDS_MAP["Other"], children: (0, jsx_runtime_1.jsx)(OpportunityName, { title: opportunity.name, children: opportunity.name }) }), (0, jsx_runtime_1.jsxs)(StyledCardContent, { children: [(0, jsx_runtime_1.jsx)("div", { className: "cardContent", children: (0, jsx_runtime_1.jsxs)("div", { className: "cardContentWrapper", children: [opportunity?.project && ((0, jsx_runtime_1.jsxs)(ProjectBlock, { children: [Boolean(opportunity?.project?.mediaUrl) && !isProjectIconErrorLoading && ((0, jsx_runtime_1.jsx)("img", { className: "icon", src: opportunity?.project?.mediaUrl
367
+ ? `${getMediaENVDomain()}/projects/${opportunity?.project.mediaUrl}`
368
+ : opportunity?.project?.originalMediaUrl || "", alt: opportunity?.project?.name || opportunity?.projectContract, onError: () => {
369
+ setIsProjectIconErrorLoading(true);
370
+ } })), (0, jsx_runtime_1.jsxs)("div", { className: "name", children: [(0, jsx_runtime_1.jsx)(index_1.H6, { className: "project-name", color: "#12183A", children: opportunity?.project?.name || (0, utils_1.shortenedText)(opportunity?.projectContract) }), (0, jsx_runtime_1.jsx)(index_1.H6, { color: "#696F90", children: opportunity?.project?.symbol })] })] })), (0, jsx_runtime_1.jsx)("p", { className: `mainName`, dangerouslySetInnerHTML: { __html: sanitizedHtml } }), (0, jsx_runtime_1.jsxs)("div", { className: `categoryName`, children: [opportunity.categoryName, (0, jsx_runtime_1.jsx)(OpportunityDropDown_1.OpportunityDropDown, { opportunity: opportunity })] })] }) }), (0, jsx_runtime_1.jsxs)(index_1.Flex, { alignItems: "end", justifyContent: "space-between", className: `categoryFooter`, children: [(0, jsx_runtime_1.jsx)(CardCategory_1.default, { label: data_1.default[opportunity.opportunityType] || data_1.default.opportunity }), isAirdrop && !opportunity.subscribed ? ((0, jsx_runtime_1.jsx)(MainButton_1.default, { className: "btnClaim", variant: "primaryXS", text: "Claim", onClick: () => {
291
371
  window.location.replace(opportunityLink);
292
372
  } })) : (opportunity.activeUntil && ((0, jsx_runtime_1.jsx)("div", { className: "date", children: `till ${(0, moment_1.default)(opportunity.activeUntil).format("LL")}` })))] })] })] }));
293
373
  };
package/build/system/Cards/CardContent/CardCategory/index.js CHANGED
@@ -1,13 +1,33 @@
1
1
  "use strict";
2
- var __importDefault = (this && this.__importDefault) || function (mod) {
3
- return (mod && mod.__esModule) ? mod : { "default": mod };
2
+ var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
3
+ if (k2 === undefined) k2 = k;
4
+ var desc = Object.getOwnPropertyDescriptor(m, k);
5
+ if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
6
+ desc = { enumerable: true, get: function() { return m[k]; } };
7
+ }
8
+ Object.defineProperty(o, k2, desc);
9
+ }) : (function(o, m, k, k2) {
10
+ if (k2 === undefined) k2 = k;
11
+ o[k2] = m[k];
12
+ }));
13
+ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
14
+ Object.defineProperty(o, "default", { enumerable: true, value: v });
15
+ }) : function(o, v) {
16
+ o["default"] = v;
17
+ });
18
+ var __importStar = (this && this.__importStar) || function (mod) {
19
+ if (mod && mod.__esModule) return mod;
20
+ var result = {};
21
+ if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
22
+ __setModuleDefault(result, mod);
23
+ return result;
4
24
  };
5
25
  Object.defineProperty(exports, "__esModule", { value: true });
6
26
  const jsx_runtime_1 = require("react/jsx-runtime");
7
27
  const ScreenWidth_1 = require("../../../../styles/ScreenWidth");
8
28
  const typography_1 = require("../../../../styles/typography");
9
29
  const _4k_1 = require("@ludo.ninja/ui/build/utils/4k");
10
- const styled_components_1 = __importDefault(require("styled-components"));
30
+ const styled_components_1 = __importStar(require("styled-components"));
11
31
  // Styles
12
32
  const StyledCardCategory = styled_components_1.default.div `
13
33
  display: flex;
@@ -26,6 +46,7 @@ const StyledCardCategory = styled_components_1.default.div `
26
46
  user-select: none;
27
47
  border-radius: 2px;
28
48
  text-transform: uppercase;
49
+ ${(props) => props.borderColor && (0, styled_components_1.css) `border: 1px solid ${props.borderColor}`};
29
50
  }
30
51
  }
31
52
 
@@ -48,7 +69,7 @@ const StyledCardCategory = styled_components_1.default.div `
48
69
  const CardCategory = ({ label }) => {
49
70
  if (!label)
50
71
  return null;
51
- return ((0, jsx_runtime_1.jsx)(StyledCardCategory, { background: label.backgroundColor, color: label.color, children: (0, jsx_runtime_1.jsx)("div", { className: "category", children: (0, jsx_runtime_1.jsx)("span", { className: "label", children: label.text }) }) }));
72
+ return ((0, jsx_runtime_1.jsx)(StyledCardCategory, { background: label.backgroundColor, color: label.color, borderColor: label.borderColor, children: (0, jsx_runtime_1.jsx)("div", { className: "category", children: (0, jsx_runtime_1.jsx)("span", { className: "label", children: label.text }) }) }));
52
73
  };
53
74
  // Export
54
75
  exports.default = CardCategory;
package/build/system/Labels/ExperienceLabel/index.d.ts CHANGED
@@ -1,6 +1,9 @@
1
- declare const ExperienceLabel: ({ value, link, loading }: {
1
+ import React from "react";
2
+ declare const ExperienceLabel: ({ value, link, loading, className, style }: {
2
3
  value: number;
3
4
  link?: string;
4
5
  loading?: boolean;
6
+ className?: string;
7
+ style?: React.CSSProperties;
5
8
  }) => import("react/jsx-runtime").JSX.Element | null;
6
9
  export default ExperienceLabel;
package/build/system/Labels/ExperienceLabel/index.js CHANGED
@@ -85,12 +85,12 @@ const StyledExpTab = styled_components_1.default.div `
85
85
  ${ExperienceLabelStyles};
86
86
  `;
87
87
  //Component
88
- const ExperienceLabel = ({ value = 0, link, loading }) => {
88
+ const ExperienceLabel = ({ value = 0, link, loading, className, style }) => {
89
89
  if (loading)
90
90
  return (0, jsx_runtime_1.jsx)(SkeletonLabel_1.default, {});
91
91
  if (!value)
92
92
  return null;
93
- return link ? ((0, jsx_runtime_1.jsx)(StyledExpLink, { href: link, children: (0, jsx_runtime_1.jsx)(LabelContent, { value: value }) })) : ((0, jsx_runtime_1.jsx)(StyledExpTab, { children: (0, jsx_runtime_1.jsx)(LabelContent, { value: value }) }));
93
+ return link ? ((0, jsx_runtime_1.jsx)(StyledExpLink, { href: link, className: className, style: style, children: (0, jsx_runtime_1.jsx)(LabelContent, { value: value }) })) : ((0, jsx_runtime_1.jsx)(StyledExpTab, { className: className, style: style, children: (0, jsx_runtime_1.jsx)(LabelContent, { value: value }) }));
94
94
  };
95
95
  const LabelContent = ({ value }) => {
96
96
  return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(image_1.default, { src: `${constants_1.staticLink}/public/rewardsPage/XP_logo.svg`, alt: "Experience logo", width: 20, height: 20 }), (0, jsx_runtime_1.jsxs)("p", { className: `value`, children: [value, " XP"] })] }));
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@ludo.ninja/components",
3
- "version": "2.3.86",
3
+ "version": "2.3.88",
4
4
  "private": false,
5
5
  "main": "build/index.js",
6
6
  "types": "build/index.d.ts",