@ludo.ninja/components 2.3.80 → 2.3.82

package/build/hooks/refCode/useRefCode/index.js

@@ -24,7 +24,6 @@ const useRefCode = () => {
                     await activateInviteCode({ inviteCode: refcode });
                     (0, nookies_1.destroyCookie)(null, 'refcode', {
                         path: '/',
-                        domain: NEXT_PUBLIC_ENV_DOMAIN,
                     });
                 }
                 // eslint-disable-next-line

package/build/modules/opportunity/OpportunityCard.d.ts

@@ -1,5 +1,7 @@
 import { TOpportunity } from './type';
-export declare const OpportunityCard: ({ opportunity, toolsForRemove, }: {
+export declare const HEADER_BACKGROUNDS: string[];
+export declare const OpportunityCard: ({ opportunity, toolsForRemove, headColorImage }: {
     opportunity: TOpportunity;
     toolsForRemove?: ((itemType: "asset" | "collection" | "opportunity") => void) | undefined;
+    headColorImage?: string;
 }) => import("react/jsx-runtime").JSX.Element;

package/build/modules/opportunity/OpportunityCard.js

@@ -3,7 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.OpportunityCard = void 0;
+exports.OpportunityCard = exports.HEADER_BACKGROUNDS = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const useDislikeOpportunity_1 = require("../../api/server-opportunities/mutations/useDislikeOpportunity");
 const useLikeOpportunity_1 = require("../../api/server-opportunities/mutations/useLikeOpportunity");
@@ -11,8 +11,6 @@ const useOpenOpportunity_1 = __importDefault(require("../../api/server-opportuni
 const data_1 = __importDefault(require("../../entities/labelCreationType/data"));
 const vars_1 = require("../../fonts/vars");
 const OpportunityDropDown_1 = require("./OpportunityDropDown");
-const ShareIcon_1 = require("./ShareIcon");
-const OpportunityMenu_1 = require("./popup/OpportunityMenu");
 const store_1 = require("../user/store");
 const heart_svg_1 = __importDefault(require("../../public/cards/heart"));
 const env_1 = require("../../store/env");
@@ -28,6 +26,7 @@ const ImageInterceptor_1 = require("../../system/Img/ImageInterceptor");
 const index_1 = require("../../system/index");
 const screen_1 = require("../../utils/screen");
 const schema_1 = require("@ludo.ninja/api/build/graphql_tools/__generated__/opportunitiesHost/schema");
+const constants_1 = require("@ludo.ninja/core/build/constants");
 const ludoDomains_1 = require("@ludo.ninja/core/build/ludoDomains");
 const colors_2 = require("@ludo.ninja/ui/build/styles/colors");
 const boxShadow_1 = __importDefault(require("@ludo.ninja/ui/build/styles/mixins/boxShadow"));
@@ -36,61 +35,79 @@ const moment_1 = __importDefault(require("moment/moment"));
 const react_1 = require("react");
 const sanitize_html_1 = __importDefault(require("sanitize-html"));
 const styled_components_1 = __importDefault(require("styled-components"));
+exports.HEADER_BACKGROUNDS = ['green', 'blue', 'pink', 'orange'];
 const SWrapperLink = styled_components_1.default.a `
-  position: relative;
-  background-color: ${colors_2.WhiteColor};
-  border-radius: 6px;
-  ${boxShadow_1.default};
-  ${boxTransform_1.default};
-  width: 252px;
-  overflow: hidden;
-  display: flex;
-  flex-direction: column;
+    position: relative;
+    background-color: ${colors_2.WhiteColor};
+    border-radius: 6px;
+    ${boxShadow_1.default};
+    ${boxTransform_1.default};
+    width: 252px;
+    overflow: hidden;
+    display: flex;
+    flex-direction: column;
 
-  &:hover ${Headicons_1.default} {
-    transition: 0.2s opacity ease-in;
-    opacity: 1 !important;
-  }
+    &:hover ${Headicons_1.default} {
+        transition: 0.2s opacity ease-in;
+        opacity: 1 !important;
+    }
 
-  ${ScreenWidth_1.mediaQuery.maxWidthTablet} {
-    width: 164px;
-  }
+    // ${ScreenWidth_1.mediaQuery.maxWidthTablet} {
+    //     width: 164px;
+    // }
 
-  ${ScreenWidth_1.mediaQuery.mobile} {
-    width: 154px;
-  }
+    ${ScreenWidth_1.mediaQuery.mobile} {
+        width: 100%;
+    }
 
-  ${ScreenWidth_1.mediaQuery.minWidthFourK} {
-    width: ${(0, _4k_1.adaptiveValueCalc)(252)};
-    border-radius: ${(0, _4k_1.adaptiveValueCalc)(6)};
-  }
+    ${ScreenWidth_1.mediaQuery.minWidthFourK} {
+        width: ${(0, _4k_1.adaptiveValueCalc)(252)};
+        border-radius: ${(0, _4k_1.adaptiveValueCalc)(6)};
+    }
 `;
 const StyledCardHead = styled_components_1.default.div `
   position: relative;
-  height: 152px;
+  height: 40px;
   width: 252px;
   margin: 0 auto;
+  display: flex;
+  align-items: center;
 
-  .imgWrapper {
-    width: 100%;
-    height: 100%;
-  }
+  background-image: url("${({ backgroundImage }) => `${constants_1.staticLink}/background_images/${backgroundImage || exports.HEADER_BACKGROUNDS[0]}.svg`}");
+  background-size: cover;
+  //.imgWrapper {
+  //  width: 100%;
+  //  height: 100%;
+  //}
 
-  @media (max-width: 1200px) {
-    height: 100px;
-    width: 164px;
-  }
+  //@media (max-width: 1200px) {
+  //  height: 40px;
+  //  width: 164px;
+  //}
 
-  @media (max-width: 767px) {
-    height: 92px;
-    width: 154px;
+  ${ScreenWidth_1.mediaQuery.mobile}  {
+    height: 40px;
+    width: 100%;
   }
 
   ${ScreenWidth_1.mediaQuery.minWidthFourK} {
-    height: ${(0, _4k_1.adaptiveValueCalc)(152)};
+    height: ${(0, _4k_1.adaptiveValueCalc)(40)};
     width: ${(0, _4k_1.adaptiveValueCalc)(252)};
   }
 `;
+const OpportunityName = styled_components_1.default.div `
+  ${typography_1.FH5};
+  color: ${colors_2.WhiteColor};
+  font-weight: 700;
+  padding: 6px 16px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+    
+  ${ScreenWidth_1.mediaQuery.minWidthFourK} {
+    padding: ${(0, _4k_1.adaptiveValueCalc)(6)} ${(0, _4k_1.adaptiveValueCalc)(16)};
+  }
+`;
 const StyledCardContent = styled_components_1.default.div `
   display: flex;
   flex-direction: column;
@@ -98,8 +115,8 @@ const StyledCardContent = styled_components_1.default.div `
   min-height: 212px;
   //max-height: 212px;
   flex-grow: 1;
-  @media (max-width: 767px) {
-    min-height: 190px;
+  ${ScreenWidth_1.mediaQuery.mobile} {
+    min-height: 172px;
     //max-height: 84px;
   }
 
@@ -145,6 +162,7 @@ const StyledCardContent = styled_components_1.default.div `
         margin-top: 12px;
         display: inline-flex;
         justify-content: space-between;
+        align-items: center;
         flex-wrap: wrap;
 
         .participantsCount {
@@ -154,9 +172,11 @@ const StyledCardContent = styled_components_1.default.div `
       }
     }
   }
+
   .btnClaim {
     border-radius: 6px;
   }
+
   .date {
     color: #b0b2c0;
     font-size: 12px;
@@ -168,13 +188,13 @@ const StyledCardContent = styled_components_1.default.div `
     height: auto;
     padding: 12px;
   }
-  @media (max-width: 1199px) {
-    .categoryFooter {
-      flex-direction: column;
-      align-items: center;
-      gap: 6px;
-    }
-  }
+  //@media (max-width: 1199px) {
+  //  .categoryFooter {
+  //    flex-direction: column;
+  //    align-items: center;
+  //    gap: 6px;
+  //  }
+  //}
 
   ${ScreenWidth_1.mediaQuery.minWidthFourK} {
     padding: ${(0, _4k_1.adaptiveValueCalc)(12)} ${(0, _4k_1.adaptiveValueCalc)(16)};
@@ -198,11 +218,11 @@ const StyledCardContent = styled_components_1.default.div `
         }
       }
     }
-      
+
     .btnClaim {
       border-radius: ${(0, _4k_1.adaptiveValueCalc)(6)};
     }
-      
+
     .date {
       font-size: ${(0, _4k_1.adaptiveValueCalc)(12)};
       line-height: ${(0, _4k_1.adaptiveValueCalc)(16)};
@@ -244,7 +264,7 @@ const OpportunityLike = ({ isDefaultLiked, opportunityId, toolsForRemove, }) =>
             pointerEvents: isLoadingMutation ? "none" : "unset",
         }, children: (0, jsx_runtime_1.jsx)(heart_svg_1.default, {}) }));
 };
-const OpportunityCard = ({ opportunity, toolsForRemove, }) => {
+const OpportunityCard = ({ opportunity, toolsForRemove, headColorImage }) => {
     const { NEXT_PUBLIC_ENV_VALUE } = (0, env_1.useEnvStore)((state) => ({
         NEXT_PUBLIC_ENV_VALUE: state.NEXT_PUBLIC_ENV_VALUE,
     }));
@@ -267,12 +287,7 @@ const OpportunityCard = ({ opportunity, toolsForRemove, }) => {
     const sanitizedHtml = (0, sanitize_html_1.default)(opportunity?.description || "", {
         allowedTags: ["b", "i", "em", "strong", "br", "div"],
     });
-    return ((0, jsx_runtime_1.jsxs)(SWrapperLink, { href: opportunityLink, target: "_blank", onClick: () => openOpportunityAction({ opportunityId: opportunity.opportunityId }), children: [(0, jsx_runtime_1.jsxs)(StyledCardHead, { children: [(0, jsx_runtime_1.jsx)(OpportunityImage, { alt: opportunity.name, src: opportunity.media ? `${getMediaENVDomain()}/opportunity-medias/${opportunity.media}` : "" }), (0, jsx_runtime_1.jsx)(Headicons_1.default, { isMobile: isMobile, onClick: (e) => {
-                            e.stopPropagation();
-                            e.preventDefault();
-                        }, children: (0, jsx_runtime_1.jsxs)("div", { className: "icons", children: [(0, jsx_runtime_1.jsx)("div", { className: "icon", onClick: () => {
-                                        openModalSidebarPortal((0, jsx_runtime_1.jsx)(OpportunityMenu_1.OpportunityMenu, { opportunity: opportunity, onClose: closeModalSidebarPortal }));
-                                    }, children: (0, jsx_runtime_1.jsx)(ShareIcon_1.ShareIcon, {}) }), !isProd() && ((0, jsx_runtime_1.jsx)(OpportunityLike, { isDefaultLiked: !!(isSignedIn && opportunity.liked), opportunityId: opportunity.opportunityId, toolsForRemove: toolsForRemove }))] }) })] }), (0, jsx_runtime_1.jsxs)(StyledCardContent, { children: [(0, jsx_runtime_1.jsxs)("div", { className: "cardContent", children: [(0, jsx_runtime_1.jsxs)("div", { className: "cardContentWrapper", children: [(0, jsx_runtime_1.jsx)("p", { className: `secondName`, children: opportunity.name }), (0, jsx_runtime_1.jsx)("p", { className: `mainName`, dangerouslySetInnerHTML: { __html: sanitizedHtml } }), (0, jsx_runtime_1.jsx)("p", { 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: () => {
+    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: () => {
                                     window.location.replace(opportunityLink);
                                 } })) : (opportunity.activeUntil && ((0, jsx_runtime_1.jsx)("div", { className: "date", children: `till ${(0, moment_1.default)(opportunity.activeUntil).format("LL")}` })))] })] })] }));
 };

package/build/modules/opportunity/OpportunityDropDown.d.ts

@@ -1,5 +1,5 @@
 import { TOpportunity } from './type';
 export declare const GOOGLE_FORM_REPORT_OPPORTUNITY = "https://docs.google.com/forms/d/e/1FAIpQLScjeZ0ZHrsOKteM1FtWx6GfolXfWa9W2JFSwpwwI_sz-dsrkg/viewform";
-export declare const OpportunityDropDown: ({ opportunity, }: {
+export declare const OpportunityDropDown: ({ opportunity }: {
     opportunity: TOpportunity;
 }) => import("react/jsx-runtime").JSX.Element;

package/build/modules/opportunity/OpportunityDropDown.js

@@ -5,12 +5,25 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.OpportunityDropDown = exports.GOOGLE_FORM_REPORT_OPPORTUNITY = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
+// import { alertVariants } from '@ludo.ninja/ui/build/system/Alert/type';
+// import { copyToClipboard } from '@ludo.ninja/utils';
+const encodeQuery_1 = require("./encodeQuery");
+const OpportunityMenu_1 = require("./popup/OpportunityMenu");
+const moreBtnVertical_svg_1 = __importDefault(require("../../public/creation/card/moreBtnVertical"));
+const ui_1 = require("../../store/ui");
 // import { useUiStore } from '@/store/ui';
 const CardShowMore_1 = require("../../system/Cards/CardContent/CardShowMore");
-const moreBtnVertical_svg_1 = __importDefault(require("../../public/creation/card/moreBtnVertical"));
-const encodeQuery_1 = require("./encodeQuery");
-exports.GOOGLE_FORM_REPORT_OPPORTUNITY = 'https://docs.google.com/forms/d/e/1FAIpQLScjeZ0ZHrsOKteM1FtWx6GfolXfWa9W2JFSwpwwI_sz-dsrkg/viewform';
-const OpportunityDropDown = ({ opportunity, }) => {
+const env_1 = require("../../store/env");
+const ludoDomains_1 = require("@ludo.ninja/core/build/ludoDomains");
+const ShareIcon = () => ((0, jsx_runtime_1.jsxs)("svg", { xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", children: [(0, jsx_runtime_1.jsx)("circle", { cx: "10.1883", cy: "3.94221", r: "1.94221", stroke: "currentColor", strokeWidth: "1.5" }), (0, jsx_runtime_1.jsx)("circle", { cx: "4.12971", cy: "12.6921", r: "1.94221", stroke: "currentColor", strokeWidth: "1.5" }), (0, jsx_runtime_1.jsx)("path", { d: "M11.9763 15.3925C12.3788 15.4901 12.7843 15.2429 12.8819 14.8404C12.9795 14.4378 12.7323 14.0324 12.3298 13.9348L11.9763 15.3925ZM9.06939 5.41272L8.44771 4.99318L4.59316 10.7049L5.21484 11.1244L5.83652 11.544L9.69107 5.83226L9.06939 5.41272ZM5.7946 13.1218L5.61786 13.8507L11.9763 15.3925L12.153 14.6636L12.3298 13.9348L5.97134 12.3929L5.7946 13.1218Z", fill: "currentColor" }), (0, jsx_runtime_1.jsx)("path", { d: "M14.8984 12.7695C16.3428 12.7695 17.5137 13.9404 17.5137 15.3848C17.5137 16.8291 16.3428 18 14.8984 18C13.4541 18 12.2832 16.8291 12.2832 15.3848C12.2832 13.9404 13.4541 12.7695 14.8984 12.7695Z", stroke: "currentColor", strokeWidth: "1.5" })] }));
+const ReportIcon = () => ((0, jsx_runtime_1.jsxs)("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [(0, jsx_runtime_1.jsx)("path", { d: "M13.2617 15.5902V4.15036C13.2618 3.58415 13.7209 3.12505 14.2871 3.125C14.8533 3.12508 15.3124 3.58413 15.3124 4.15036V15.5902C15.3124 16.1564 14.8532 16.6155 14.2871 16.6156C13.7209 16.6155 13.2618 16.1563 13.2617 15.5902Z", fill: "currentColor" }), (0, jsx_runtime_1.jsx)("path", { d: "M15.3125 9.28977L15.307 9.39498C15.2527 9.91035 14.8036 10.3124 14.2578 10.3125L5.11719 10.3125C4.83755 10.3125 4.56927 10.2046 4.37149 10.0129C4.1737 9.82107 4.0625 9.56102 4.0625 9.28977L4.0625 7.92614C4.0625 7.56689 4.25706 7.23339 4.57474 7.04856L11.606 2.95765C11.7697 2.86253 11.9575 2.8125 12.1484 2.8125L14.2578 2.8125C14.7866 2.81255 15.2333 3.1924 15.3029 3.70073C15.3105 3.7562 15.3114 3.81149 15.3098 3.86586C15.3103 3.86444 15.312 3.86328 15.3125 3.86186L15.3125 9.28977ZM12.4423 4.85795L6.58249 8.26705L13.2031 8.26705L13.2031 4.85795L12.4423 4.85795Z", fill: "currentColor" })] }));
+exports.GOOGLE_FORM_REPORT_OPPORTUNITY = "https://docs.google.com/forms/d/e/1FAIpQLScjeZ0ZHrsOKteM1FtWx6GfolXfWa9W2JFSwpwwI_sz-dsrkg/viewform";
+const OpportunityDropDown = ({ opportunity }) => {
+    const { openModalSidebarPortal, closeModalSidebarPortal } = (0, ui_1.useUiStore)((state) => ({
+        openModalSidebarPortal: state.openModalSidebarPortal,
+        closeModalSidebarPortal: state.closeModalSidebarPortal,
+    }));
+    const NEXT_PUBLIC_ENV_VALUE = (0, env_1.useEnvStore)((state) => state.NEXT_PUBLIC_ENV_VALUE);
     // const openAlert = useUiStore((state) => state.openAlert);
     // const copyAssetLinkToClipboard = (e: { preventDefault: () => void }) => {
     //   e.preventDefault();
@@ -19,24 +32,23 @@ const OpportunityDropDown = ({ opportunity, }) => {
     //     type: alertVariants.copied,
     //   });
     // };
+    const onShareClick = (event) => {
+        event.preventDefault();
+        openModalSidebarPortal((0, jsx_runtime_1.jsx)(OpportunityMenu_1.OpportunityMenu, { opportunity: opportunity, onClose: closeModalSidebarPortal }));
+    };
     const onReportClick = () => {
-        const opportunityId = opportunity.opportunityId
-            ? `ID: ${opportunity.opportunityId}`
-            : '';
-        const link = opportunity.projectUrl
-            ? `  Link: ${opportunity.projectUrl}`
-            : '';
+        const opportunityId = opportunity.opportunityId ? `ID: ${opportunity.opportunityId}` : "";
+        const link = opportunity.projectUrl ? `  Link: ${opportunity.projectUrl}` : "";
         const generatedQueryParams = encodeQuery_1.encodeQuery.stringify({
-            'entry.1716021430': 'Opportunity',
-            'entry.102149572': `${opportunityId}${link}`,
-            'entry.483745074': `Opportunity: ${opportunity.name}`,
-        }, { format: 'RFC1738' } //   "RFC1738" format - replaces spaces ' ' with '+'.
-        );
-        const url = `${exports.GOOGLE_FORM_REPORT_OPPORTUNITY}?usp=pp_url&${generatedQueryParams}`;
-        window.open(url, '_blank');
+            "entry.1716021430": "Opportunity",
+            "entry.102149572": `${opportunityId}${link}`,
+            "entry.483745074": `Opportunity: ${opportunity.name}`,
+        }, { format: "RFC1738" });
+        window.open(`${ludoDomains_1.ludoDomains[NEXT_PUBLIC_ENV_VALUE]['app']}/forms/report?contentType=Opportunity&nameOfSubject=${opportunity.name}p&contentId=${opportunityId}${link}`, "_blank");
     };
     return ((0, jsx_runtime_1.jsx)(CardShowMore_1.StyledCardShowMore, { onClick: (e) => {
+            e.preventDefault();
             e.stopPropagation();
-        }, children: (0, jsx_runtime_1.jsxs)("div", { className: "cardShowMore", children: [(0, jsx_runtime_1.jsx)(moreBtnVertical_svg_1.default, {}), (0, jsx_runtime_1.jsx)("div", { className: `cardShowMoreDropDown`, children: (0, jsx_runtime_1.jsx)("span", { className: 'cardShowMoreDropDownItem', onClick: onReportClick, children: "Report" }) })] }) }));
+        }, children: (0, jsx_runtime_1.jsxs)("div", { className: "cardShowMore", children: [(0, jsx_runtime_1.jsx)(moreBtnVertical_svg_1.default, { className: 'moreButton' }), (0, jsx_runtime_1.jsxs)("div", { className: `cardShowMoreDropDown`, children: [(0, jsx_runtime_1.jsxs)("span", { className: "cardShowMoreDropDownItem", onClick: onReportClick, children: [(0, jsx_runtime_1.jsx)(ReportIcon, {}), "Report"] }), (0, jsx_runtime_1.jsxs)("span", { className: "cardShowMoreDropDownItem", onClick: onShareClick, children: [(0, jsx_runtime_1.jsx)(ShareIcon, {}), "Share"] })] })] }) }));
 };
 exports.OpportunityDropDown = OpportunityDropDown;

package/build/public/creation/card/moreBtnVertical.js

@@ -9,19 +9,19 @@ function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default":
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 var MoreBtnVerticalIcon = function MoreBtnVerticalIcon(props) {
   return /*#__PURE__*/_react["default"].createElement("svg", _extends({}, props, {
-    width: "4",
-    height: "14",
-    viewBox: "0 0 4 14",
-    fill: "none",
-    xmlns: "http://www.w3.org/2000/svg"
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "14",
+    height: "18",
+    viewBox: "0 0 14 18",
+    fill: "none"
   }), /*#__PURE__*/_react["default"].createElement("path", {
-    d: "M3.5 12.5C3.5 13.3284 2.82843 14 2 14C1.17157 14 0.5 13.3284 0.5 12.5C0.5 11.6716 1.17157 11 2 11C2.82843 11 3.5 11.6716 3.5 12.5Z",
+    d: "M8.5 14.5C8.5 15.3284 7.82843 16 7 16C6.17157 16 5.5 15.3284 5.5 14.5C5.5 13.6716 6.17157 13 7 13C7.82843 13 8.5 13.6716 8.5 14.5Z",
     fill: "#B0B2C0"
   }), /*#__PURE__*/_react["default"].createElement("path", {
-    d: "M3.5 7.0022C3.5 7.83062 2.82843 8.5022 2 8.5022C1.17157 8.5022 0.5 7.83062 0.5 7.0022C0.5 6.17377 1.17157 5.5022 2 5.5022C2.82843 5.5022 3.5 6.17377 3.5 7.0022Z",
+    d: "M8.5 9.0022C8.5 9.83062 7.82843 10.5022 7 10.5022C6.17157 10.5022 5.5 9.83062 5.5 9.0022C5.5 8.17377 6.17157 7.5022 7 7.5022C7.82843 7.5022 8.5 8.17377 8.5 9.0022Z",
     fill: "#B0B2C0"
   }), /*#__PURE__*/_react["default"].createElement("path", {
-    d: "M3.5024 1.49992C3.5024 2.32835 2.83083 2.99992 2.0024 2.99992C1.17397 2.99992 0.502398 2.32835 0.502398 1.49992C0.502398 0.671497 1.17397 -7.62542e-05 2.0024 -7.62542e-05C2.83083 -7.62542e-05 3.5024 0.671497 3.5024 1.49992Z",
+    d: "M8.50191 3.49988C8.50191 4.32831 7.83034 4.99988 7.00191 4.99988C6.17348 4.99988 5.50191 4.32831 5.50191 3.49988C5.50191 2.67145 6.17348 1.99988 7.00191 1.99988C7.83034 1.99988 8.50191 2.67145 8.50191 3.49988Z",
     fill: "#B0B2C0"
   }));
 };

package/build/system/Cards/CardContent/CardShowMore/index.js

@@ -15,12 +15,39 @@ const colors_1 = require("../../../../styles/colors");
 const typography_1 = require("../../../../styles/typography");
 const vars_1 = require("../../../../fonts/vars");
 const moreBtnVertical_svg_1 = __importDefault(require("../../../../public/creation/card/moreBtnVertical"));
+const colors_2 = require("@ludo.ninja/ui/build/styles/colors");
 // Styles
 exports.StyledCardShowMore = styled_components_1.default.div `
   .cardShowMore {
     position: relative;
     cursor: pointer;
     z-index: 100;
+    svg {
+      ${ScreenWidth_1.mediaQuery.minWidthFourK} {
+        width: ${(0, _4k_1.adaptiveValueCalc)(14)};
+        height: ${(0, _4k_1.adaptiveValueCalc)(18)};
+      }
+    }
+      
+    .cardShowMoreDropDownItem{
+      display: flex;
+      gap: 8px;
+        svg {
+            color: ${colors_1.TextDarkGrayColor};
+        }
+        :hover {
+            svg {
+                color: ${colors_2.TextGrayColor};
+            }
+        }
+      ${ScreenWidth_1.mediaQuery.minWidthFourK} {
+        gap: ${(0, _4k_1.adaptiveValueCalc)(8)};
+        svg {
+            width: ${(0, _4k_1.adaptiveValueCalc)(20)};
+            height: ${(0, _4k_1.adaptiveValueCalc)(20)};
+        }
+      }
+    }
 
     &:before {
       content: '';
@@ -33,18 +60,18 @@ exports.StyledCardShowMore = styled_components_1.default.div `
       z-index: -1;
     }
 
-    @media (max-width: 1200px) {
-      display: none;
-    }
+    //@media (max-width: 1200px) {
+    //  display: none;
+    //}
 
     &DropDown {
       font-family: ${vars_1.dmsansFontVarCss.css};
       display: none;
       position: absolute;
       background-color: white;
-      top: 20px;
-      left: -170px;
-      width: 184px;
+      left: -120px;
+      top: -70px;
+      width: 118px;
       box-shadow: 0px 0px 10px 5px rgba(33, 21, 95, 0.1);
       border-radius: 6px;
       padding: 8px;;
@@ -82,9 +109,9 @@ exports.StyledCardShowMore = styled_components_1.default.div `
         height:  ${(0, _4k_1.adaptiveValueCalc)(40)};
       }
       &DropDown {
-        top: ${(0, _4k_1.adaptiveValueCalc)(20)};
-        left:${(0, _4k_1.adaptiveValueCalc)(-170)};
-        width: ${(0, _4k_1.adaptiveValueCalc)(184)};
+        top: ${(0, _4k_1.adaptiveValueCalc)(-70)};
+        left:${(0, _4k_1.adaptiveValueCalc)(-120)};
+        width: ${(0, _4k_1.adaptiveValueCalc)(118)};
         box-shadow: 0px 0px ${(0, _4k_1.adaptiveValueCalc)(10)} ${(0, _4k_1.adaptiveValueCalc)(5)} rgba(33, 21, 95, 0.1);
         border-radius: ${(0, _4k_1.adaptiveValueCalc)(6)};
         padding: ${(0, _4k_1.adaptiveValueCalc)(8)};
@@ -115,7 +142,7 @@ const CardShowMore = ({ itemId, href }) => {
             type: type_1.alertVariants.copied,
         });
     };
-    return ((0, jsx_runtime_1.jsx)(exports.StyledCardShowMore, { children: (0, jsx_runtime_1.jsxs)("div", { className: "cardShowMore", children: [(0, jsx_runtime_1.jsx)(moreBtnVertical_svg_1.default, {}), (0, jsx_runtime_1.jsx)("div", { className: `cardShowMoreDropDown`, id: itemId, onClick: copyAssetLinkToClipboard, children: (0, jsx_runtime_1.jsx)("span", { className: 'cardShowMoreDropDownItem', children: "Copy link" }) })] }) }));
+    return ((0, jsx_runtime_1.jsx)(exports.StyledCardShowMore, { children: (0, jsx_runtime_1.jsxs)("div", { className: "cardShowMore", children: [(0, jsx_runtime_1.jsx)(moreBtnVertical_svg_1.default, { className: 'moreButton' }), (0, jsx_runtime_1.jsx)("div", { className: `cardShowMoreDropDown`, id: itemId, onClick: copyAssetLinkToClipboard, children: (0, jsx_runtime_1.jsx)("span", { className: 'cardShowMoreDropDownItem', children: "Copy link" }) })] }) }));
 };
 // Export
 exports.default = CardShowMore;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ludo.ninja/components",
-  "version": "2.3.80",
+  "version": "2.3.82",
   "private": false,
   "main": "build/index.js",
   "types": "build/index.d.ts",