@ludo.ninja/components 1.8.1 → 1.8.3

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 (90) hide show
  1. package/dist/components/CreationCard/CardHead.js +9 -9
  2. package/dist/components/CreationCard/index.d.ts +1 -1
  3. package/dist/components/CreationCard/index.js +5 -8
  4. package/dist/components/deleteDialog/index.js +13 -15
  5. package/dist/components/filters/index.js +4 -5
  6. package/dist/components/forms/form/index.js +3 -3
  7. package/dist/components/forms/formsNavigation/index.js +4 -5
  8. package/dist/components/forms/formsTemplate/index.js +6 -6
  9. package/dist/components/headers/components/headerExperienceLabel/index.js +6 -6
  10. package/dist/components/headers/components/headerUserPic/index.js +4 -4
  11. package/dist/components/inviteCodesPage/wrappers/resumeCodes/index.js +9 -14
  12. package/dist/components/linkTabs/index.js +2 -3
  13. package/dist/components/linkTabs/linkTab/index.js +4 -6
  14. package/dist/components/navigation/index.js +5 -5
  15. package/dist/components/profile/MultiversXAudit/MultiversXAudit.js +5 -5
  16. package/dist/components/profile/aboutText/index.js +16 -21
  17. package/dist/components/profile/addToGalleryBtns/index.js +9 -12
  18. package/dist/components/profile/info/index.js +3 -3
  19. package/dist/components/profile/interests/index.js +2 -2
  20. package/dist/components/profile/profileUserCards/profileUserCard/index.js +2 -2
  21. package/dist/components/profile/rank/index.js +3 -3
  22. package/dist/components/profile/stats/index.js +2 -2
  23. package/dist/components/profile/wallets/index.js +2 -2
  24. package/dist/components/registrationPage/registrationSelection/index.js +2 -2
  25. package/dist/components/rewards/FAQ/index.js +8 -8
  26. package/dist/components/rewards/clarifications/index.js +4 -4
  27. package/dist/components/rewards/logoBottom/index.js +2 -2
  28. package/dist/components/rewards/prograssBar/index.js +2 -2
  29. package/dist/components/rewards/rewardsButton/index.js +2 -2
  30. package/dist/components/rewards/seasonBanner/index.js +3 -3
  31. package/dist/components/rewards/taskExpTab/index.js +7 -7
  32. package/dist/components/rewards/tasksGrid/index.js +4 -4
  33. package/dist/components/rewards/userExp/index.js +8 -8
  34. package/dist/components/search/SearchInputContainer.js +4 -4
  35. package/dist/components/search/index.js +4 -4
  36. package/dist/components/search/searchCloseMoreButtons/index.js +3 -3
  37. package/dist/components/search/searchResultCaption/index.js +2 -2
  38. package/dist/components/search/searchSimpleInput/index.js +5 -5
  39. package/dist/components/search/searchSuggestions/index.js +2 -2
  40. package/dist/components/search/searchSuggestions/searchSuggestionsCaption/index.js +2 -2
  41. package/dist/components/search/searchSuggestions/searchSuggestionsFooter/index.js +2 -2
  42. package/dist/components/search/searchSuggestions/searchSuggestionsItem/index.js +2 -2
  43. package/dist/components/search/searchSuggestions/searchSuggestionsItem/searchSuggestionsItemSkeleton/index.js +3 -3
  44. package/dist/components/search/searchSuggestions/searchSuggestionsNotFound/index.js +2 -2
  45. package/dist/components/shareDialog/index.js +3 -3
  46. package/dist/components/sidebar/index.js +5 -5
  47. package/dist/components/sidebar/sidebarInviteCodeLabel/index.js +2 -2
  48. package/dist/components/toTopBtn/index.js +2 -2
  49. package/dist/layouts/custom/styles.js +3 -3
  50. package/dist/modules/gallery/ui/Description.js +2 -2
  51. package/dist/modules/gallery/ui/PlaceholderItemsGallery.js +2 -2
  52. package/dist/modules/gallery/ui/STopSections.js +2 -2
  53. package/dist/modules/gallery/ui/chooseGalleryItems/chooseGalleryItem/index.js +2 -2
  54. package/dist/modules/gallery/ui/chooseGalleryItems/index.js +2 -2
  55. package/dist/modules/gallery/ui/createGalleryForm/index.js +2 -2
  56. package/dist/modules/gallery/ui/editGalleryForm/index.js +2 -2
  57. package/dist/modules/gallery/ui/itemsPreview/index.js +2 -2
  58. package/dist/modules/sessionScroll/useVirtuosoInitialScroll.js +5 -5
  59. package/dist/system/Cards/CardCheckbox/index.js +2 -3
  60. package/dist/system/Cards/CardContent/CardCategory/index.js +2 -3
  61. package/dist/system/Cards/CardContent/CardShowMore/index.js +2 -4
  62. package/dist/system/Cards/CardContent/index.js +2 -4
  63. package/dist/system/Cards/CardHeadIcons/index.js +2 -2
  64. package/dist/system/Cards/CardRank/index.js +4 -4
  65. package/dist/system/Cards/CardsGrid/index.js +2 -2
  66. package/dist/system/Cards/MultiMediaCard/index.js +2 -5
  67. package/dist/system/Cards/RegularCard/index.js +2 -5
  68. package/dist/system/Cards/Styles/Head.js +2 -2
  69. package/dist/system/Cards/Styles/Headicons.js +2 -3
  70. package/dist/system/Cards/Styles/Image.js +2 -2
  71. package/dist/system/Cards/Styles/Likes.js +3 -4
  72. package/dist/system/Cards/Styles/MultiHead.js +2 -2
  73. package/dist/system/CardsHolderWithSkeleton/CardsHolder/CardsSkeleton/index.js +4 -4
  74. package/dist/system/CardsHolderWithSkeleton/CardsHolder/index.js +2 -2
  75. package/dist/system/CardsHolderWithSkeleton/CardsHolderLoader/index.js +5 -7
  76. package/dist/system/Forms/DatePicker/index.js +2 -2
  77. package/dist/system/Forms/ErrorLabel/index.js +2 -2
  78. package/dist/system/Forms/Input/index.js +2 -2
  79. package/dist/system/Forms/Selects/DesktopSelect/index.js +7 -9
  80. package/dist/system/Forms/TextArea/index.js +2 -2
  81. package/dist/system/Img/Userpic/index.js +6 -7
  82. package/dist/system/Labels/ExperienceLabel/index.js +5 -7
  83. package/dist/system/Modals/Modal/index.js +4 -6
  84. package/dist/system/Modals/ModalSidebar/index.js +4 -6
  85. package/dist/system/ShareIconResize.js +5 -6
  86. package/dist/system/Tabs/TabNavLink/index.d.ts +1 -1
  87. package/dist/system/Tabs/TabNavLink/index.js +4 -5
  88. package/dist/tsconfig.tsbuildinfo +1 -1
  89. package/dist/utils/adaptive/check4k.js +2 -2
  90. package/package.json +1 -1
package/dist/components/profile/aboutText/index.js CHANGED
@@ -37,30 +37,25 @@ var react_hyphen_1 = __importDefault(require("react-hyphen"));
37
37
  var styled_components_1 = __importDefault(require("styled-components"));
38
38
  var _4k_1 = require("@ludo.ninja/ui/build/utils/4k");
39
39
  var utils_1 = require("@ludo.ninja/utils");
40
- var store_1 = require("@/modules/user/store");
41
- var ui_1 = require("@/store/ui");
40
+ var modules_1 = require("@ludo.ninja/components/dist/modules");
41
+ var store_1 = require("@ludo.ninja/components/dist/store");
42
42
  var useFollowProfile_1 = __importDefault(require("@/api/server-identities/mutations/useFollowProfile"));
43
43
  var useUnfollowProfile_1 = __importDefault(require("@/api/server-identities/mutations/useUnfollowProfile"));
44
- var ScreenWidth_1 = require("@/styles/ScreenWidth");
45
- var colors_1 = require("@/styles/colors");
46
- var typography_1 = require("@/styles/typography");
44
+ var styles_1 = require("@ludo.ninja/components/dist/styles");
45
+ var system_1 = require("@ludo.ninja/components/dist/system");
47
46
  var followersSocial_1 = require("@/components/profile/followersSocial");
48
47
  var shareDialog_1 = __importDefault(require("@/components/shareDialog"));
49
- var IconButton_1 = __importDefault(require("@/system/Buttons/IconButton"));
50
- var MainButton_1 = __importDefault(require("@/system/Buttons/MainButton"));
51
- var scale_1 = require("@/utils/adaptive/scale");
52
- var copyBtn_1 = require("@/utils/copyBtn");
53
- var screen_1 = require("@/utils/screen");
54
- var vars_1 = require("@/fonts/vars");
48
+ var utils_2 = require("@ludo.ninja/components/dist/utils");
49
+ var fonts_1 = require("@ludo.ninja/components/dist/fonts");
55
50
  var share_svg_1 = __importDefault(require("@/public/iconButton/share.svg"));
56
- var StyledProfileAboutText = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n max-width: 640px;\n display: flex;\n flex-direction: column;\n justify-content: center;\n word-wrap: break-word;\n margin-left: 32px;\n\n .name {\n ", ";\n color: ", ";\n margin-bottom: 0;\n line-height: 1.75em;\n }\n\n .descr {\n font-family: ", ";\n ", ";\n color: ", ";\n word-wrap: break-word;\n }\n\n .wallet {\n ", ";\n color: ", ";\n }\n\n .isActive {\n display: -webkit-box;\n -webkit-box-orient: vertical;\n -webkit-line-clamp: 2;\n overflow: hidden;\n max-height: 3em;\n white-space: normal;\n }\n\n .readMore {\n ", ";\n color: ", ";\n margin-top: 4px;\n display: block;\n user-select: none;\n cursor: pointer;\n }\n\n .shareEdit {\n margin-top: 20px;\n display: flex;\n align-items: center;\n\n .editBtnOrShare {\n margin-right: 24px;\n }\n }\n\n ", " {\n margin-right: 0;\n margin-left: 0;\n margin-bottom: 0;\n max-width: 516px;\n\n .name {\n ", ";\n line-height: 1.335em;\n margin-bottom: 8px;\n }\n\n .descr {\n font-size: 1.4em;\n margin-top: 4px;\n }\n\n .shareEdit {\n margin-top: 24px;\n }\n }\n\n @media (min-width: 600px) and (max-width: 767px) {\n max-width: 368px;\n }\n\n ", " {\n max-width: ", ";\n margin-left: ", ";\n\n .name {\n font-size: ", ";\n line-height: ", ";\n }\n\n .descr {\n font-size: ", ";\n line-height: ", ";\n }\n\n .wallet {\n font-size: ", ";\n line-height: ", ";\n }\n\n .isActive {\n max-height: ", ";\n }\n\n .readMore {\n font-size: ", ";\n line-height: ", ";\n margin-top: ", ";\n }\n\n .shareEdit {\n margin-top: ", ";\n\n .editBtnOrShare {\n margin-right: ", ";\n }\n }\n }\n"], ["\n max-width: 640px;\n display: flex;\n flex-direction: column;\n justify-content: center;\n word-wrap: break-word;\n margin-left: 32px;\n\n .name {\n ", ";\n color: ", ";\n margin-bottom: 0;\n line-height: 1.75em;\n }\n\n .descr {\n font-family: ", ";\n ", ";\n color: ", ";\n word-wrap: break-word;\n }\n\n .wallet {\n ", ";\n color: ", ";\n }\n\n .isActive {\n display: -webkit-box;\n -webkit-box-orient: vertical;\n -webkit-line-clamp: 2;\n overflow: hidden;\n max-height: 3em;\n white-space: normal;\n }\n\n .readMore {\n ", ";\n color: ", ";\n margin-top: 4px;\n display: block;\n user-select: none;\n cursor: pointer;\n }\n\n .shareEdit {\n margin-top: 20px;\n display: flex;\n align-items: center;\n\n .editBtnOrShare {\n margin-right: 24px;\n }\n }\n\n ", " {\n margin-right: 0;\n margin-left: 0;\n margin-bottom: 0;\n max-width: 516px;\n\n .name {\n ", ";\n line-height: 1.335em;\n margin-bottom: 8px;\n }\n\n .descr {\n font-size: 1.4em;\n margin-top: 4px;\n }\n\n .shareEdit {\n margin-top: 24px;\n }\n }\n\n @media (min-width: 600px) and (max-width: 767px) {\n max-width: 368px;\n }\n\n ", " {\n max-width: ", ";\n margin-left: ", ";\n\n .name {\n font-size: ", ";\n line-height: ", ";\n }\n\n .descr {\n font-size: ", ";\n line-height: ", ";\n }\n\n .wallet {\n font-size: ", ";\n line-height: ", ";\n }\n\n .isActive {\n max-height: ", ";\n }\n\n .readMore {\n font-size: ", ";\n line-height: ", ";\n margin-top: ", ";\n }\n\n .shareEdit {\n margin-top: ", ";\n\n .editBtnOrShare {\n margin-right: ", ";\n }\n }\n }\n"])), typography_1.FH1, colors_1.BlackColor, vars_1.dmsansFontVarCss.css, typography_1.MainText, colors_1.TextGrayColor, typography_1.FH5, colors_1.AccentColor, typography_1.FH6, colors_1.AccentColor, ScreenWidth_1.mediaQuery.mobile, typography_1.FH3, ScreenWidth_1.mediaQuery.minWidthFourK, (0, _4k_1.adaptiveValueCalc)(640), (0, _4k_1.adaptiveValueCalc)(32), (0, _4k_1.adaptiveValueCalc)(24), (0, _4k_1.adaptiveValueCalc)(36), (0, _4k_1.adaptiveValueCalc)(15), (0, _4k_1.adaptiveValueCalc)(22), (0, _4k_1.adaptiveValueCalc)(15), (0, _4k_1.adaptiveValueCalc)(22), (0, _4k_1.adaptiveValueCalc)(44), (0, _4k_1.adaptiveValueCalc)(12), (0, _4k_1.adaptiveValueCalc)(16), (0, _4k_1.adaptiveValueCalc)(4), (0, _4k_1.adaptiveValueCalc)(20), (0, _4k_1.adaptiveValueCalc)(24));
51
+ var StyledProfileAboutText = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n max-width: 640px;\n display: flex;\n flex-direction: column;\n justify-content: center;\n word-wrap: break-word;\n margin-left: 32px;\n\n .name {\n ", ";\n color: ", ";\n margin-bottom: 0;\n line-height: 1.75em;\n }\n\n .descr {\n font-family: ", ";\n ", ";\n color: ", ";\n word-wrap: break-word;\n }\n\n .wallet {\n ", ";\n color: ", ";\n }\n\n .isActive {\n display: -webkit-box;\n -webkit-box-orient: vertical;\n -webkit-line-clamp: 2;\n overflow: hidden;\n max-height: 3em;\n white-space: normal;\n }\n\n .readMore {\n ", ";\n color: ", ";\n margin-top: 4px;\n display: block;\n user-select: none;\n cursor: pointer;\n }\n\n .shareEdit {\n margin-top: 20px;\n display: flex;\n align-items: center;\n\n .editBtnOrShare {\n margin-right: 24px;\n }\n }\n\n ", " {\n margin-right: 0;\n margin-left: 0;\n margin-bottom: 0;\n max-width: 516px;\n\n .name {\n ", ";\n line-height: 1.335em;\n margin-bottom: 8px;\n }\n\n .descr {\n font-size: 1.4em;\n margin-top: 4px;\n }\n\n .shareEdit {\n margin-top: 24px;\n }\n }\n\n @media (min-width: 600px) and (max-width: 767px) {\n max-width: 368px;\n }\n\n ", " {\n max-width: ", ";\n margin-left: ", ";\n\n .name {\n font-size: ", ";\n line-height: ", ";\n }\n\n .descr {\n font-size: ", ";\n line-height: ", ";\n }\n\n .wallet {\n font-size: ", ";\n line-height: ", ";\n }\n\n .isActive {\n max-height: ", ";\n }\n\n .readMore {\n font-size: ", ";\n line-height: ", ";\n margin-top: ", ";\n }\n\n .shareEdit {\n margin-top: ", ";\n\n .editBtnOrShare {\n margin-right: ", ";\n }\n }\n }\n"], ["\n max-width: 640px;\n display: flex;\n flex-direction: column;\n justify-content: center;\n word-wrap: break-word;\n margin-left: 32px;\n\n .name {\n ", ";\n color: ", ";\n margin-bottom: 0;\n line-height: 1.75em;\n }\n\n .descr {\n font-family: ", ";\n ", ";\n color: ", ";\n word-wrap: break-word;\n }\n\n .wallet {\n ", ";\n color: ", ";\n }\n\n .isActive {\n display: -webkit-box;\n -webkit-box-orient: vertical;\n -webkit-line-clamp: 2;\n overflow: hidden;\n max-height: 3em;\n white-space: normal;\n }\n\n .readMore {\n ", ";\n color: ", ";\n margin-top: 4px;\n display: block;\n user-select: none;\n cursor: pointer;\n }\n\n .shareEdit {\n margin-top: 20px;\n display: flex;\n align-items: center;\n\n .editBtnOrShare {\n margin-right: 24px;\n }\n }\n\n ", " {\n margin-right: 0;\n margin-left: 0;\n margin-bottom: 0;\n max-width: 516px;\n\n .name {\n ", ";\n line-height: 1.335em;\n margin-bottom: 8px;\n }\n\n .descr {\n font-size: 1.4em;\n margin-top: 4px;\n }\n\n .shareEdit {\n margin-top: 24px;\n }\n }\n\n @media (min-width: 600px) and (max-width: 767px) {\n max-width: 368px;\n }\n\n ", " {\n max-width: ", ";\n margin-left: ", ";\n\n .name {\n font-size: ", ";\n line-height: ", ";\n }\n\n .descr {\n font-size: ", ";\n line-height: ", ";\n }\n\n .wallet {\n font-size: ", ";\n line-height: ", ";\n }\n\n .isActive {\n max-height: ", ";\n }\n\n .readMore {\n font-size: ", ";\n line-height: ", ";\n margin-top: ", ";\n }\n\n .shareEdit {\n margin-top: ", ";\n\n .editBtnOrShare {\n margin-right: ", ";\n }\n }\n }\n"])), styles_1.FH1, styles_1.BlackColor, fonts_1.dmsansFontVarCss.css, system_1.MainText, styles_1.TextGrayColor, styles_1.FH5, styles_1.AccentColor, styles_1.FH6, styles_1.AccentColor, styles_1.mediaQuery.mobile, styles_1.FH3, styles_1.mediaQuery.minWidthFourK, (0, _4k_1.adaptiveValueCalc)(640), (0, _4k_1.adaptiveValueCalc)(32), (0, _4k_1.adaptiveValueCalc)(24), (0, _4k_1.adaptiveValueCalc)(36), (0, _4k_1.adaptiveValueCalc)(15), (0, _4k_1.adaptiveValueCalc)(22), (0, _4k_1.adaptiveValueCalc)(15), (0, _4k_1.adaptiveValueCalc)(22), (0, _4k_1.adaptiveValueCalc)(44), (0, _4k_1.adaptiveValueCalc)(12), (0, _4k_1.adaptiveValueCalc)(16), (0, _4k_1.adaptiveValueCalc)(4), (0, _4k_1.adaptiveValueCalc)(20), (0, _4k_1.adaptiveValueCalc)(24));
57
52
  var maxStringLenght = 177;
58
53
  var ProfileAboutText = function (_a) {
59
54
  var _b;
60
55
  var username = _a.username, about = _a.about, following = _a.following, wallets = _a.wallets, followers = _a.followers, followings = _a.followings, social = _a.social;
61
- var isSignedIn = (0, store_1.useUserStore)(function (state) { return state.isSignedIn; });
62
- var getUser = (0, store_1.useUserStore)(function (state) { return state.user; });
63
- var _c = (0, ui_1.useUiStore)(function (state) { return ({
56
+ var isSignedIn = (0, modules_1.useUserStore)(function (state) { return state.isSignedIn; });
57
+ var getUser = (0, modules_1.useUserStore)(function (state) { return state.user; });
58
+ var _c = (0, store_1.useUiStore)(function (state) { return ({
64
59
  openModal: state.openModal,
65
60
  closeModal: state.closeModal,
66
61
  }); }), openModal = _c.openModal, closeModal = _c.closeModal;
@@ -88,10 +83,10 @@ var ProfileAboutText = function (_a) {
88
83
  var handleRedirectToProfileSettings = function () {
89
84
  router.push("/account/profile/settings/".concat(profileId));
90
85
  };
91
- var windowDimensions = (0, screen_1.useWindowDimensionsWithServerInitial)().windowDimensions;
86
+ var windowDimensions = (0, utils_2.useWindowDimensionsWithServerInitial)().windowDimensions;
92
87
  return (react_1.default.createElement(StyledProfileAboutText, null,
93
88
  isUserNameShouldShow && react_1.default.createElement("h3", { className: 'name' }, username),
94
- userWallet && (react_1.default.createElement(copyBtn_1.CopyButton, { value: userWallet },
89
+ userWallet && (react_1.default.createElement(utils_2.CopyButton, { value: userWallet },
95
90
  react_1.default.createElement("p", { className: "wallet" }, (0, utils_1.shortenedText)(userWallet)))),
96
91
  react_1.default.createElement(followersSocial_1.ProfileFollowersSocial, { followings: followings, followers: followers, social: social }),
97
92
  about && (react_1.default.createElement(react_hyphen_1.default, null,
@@ -99,12 +94,12 @@ var ProfileAboutText = function (_a) {
99
94
  isNeedReadMore && (react_1.default.createElement("span", { className: 'readMore', onClick: handleReadMore }, "Read more")),
100
95
  react_1.default.createElement("div", { className: "shareEdit" },
101
96
  isSignedIn && (react_1.default.createElement("div", { className: "editBtnOrShare" },
102
- profileId !== (getUser === null || getUser === void 0 ? void 0 : getUser.userId) && (react_1.default.createElement(MainButton_1.default, { text: isFollowing ? 'Unfollow' : 'FOLLOW', variant: isFollowing ? 'secondary' : 'primaryM', onClick: onContentChanged })),
103
- profileId === (getUser === null || getUser === void 0 ? void 0 : getUser.userId) && (react_1.default.createElement(MainButton_1.default, { text: 'Edit profile', variant: "outline", onClick: handleRedirectToProfileSettings })))),
97
+ profileId !== (getUser === null || getUser === void 0 ? void 0 : getUser.userId) && (react_1.default.createElement(system_1.MainButton, { text: isFollowing ? 'Unfollow' : 'FOLLOW', variant: isFollowing ? 'secondary' : 'primaryM', onClick: onContentChanged })),
98
+ profileId === (getUser === null || getUser === void 0 ? void 0 : getUser.userId) && (react_1.default.createElement(system_1.MainButton, { text: 'Edit profile', variant: "outline", onClick: handleRedirectToProfileSettings })))),
104
99
  react_1.default.createElement("div", { className: "shareBtn" },
105
- react_1.default.createElement(IconButton_1.default, { onClick: function () {
100
+ react_1.default.createElement(system_1.IconButton, { onClick: function () {
106
101
  return openModal(react_1.default.createElement(shareDialog_1.default, { link: url, onHide: closeModal }));
107
- }, icon: react_1.default.createElement(share_svg_1.default, { style: (0, scale_1.getAdaptiveScale)({ windowDimensions: windowDimensions, currentSize: 1 }) }) })))));
102
+ }, icon: react_1.default.createElement(share_svg_1.default, { style: (0, utils_2.getAdaptiveScale)({ windowDimensions: windowDimensions, currentSize: 1 }) }) })))));
108
103
  };
109
104
  exports.ProfileAboutText = ProfileAboutText;
110
105
  var templateObject_1;
package/dist/components/profile/addToGalleryBtns/index.js CHANGED
@@ -10,20 +10,17 @@ Object.defineProperty(exports, "__esModule", { value: true });
10
10
  var react_1 = __importDefault(require("react"));
11
11
  var styled_components_1 = __importDefault(require("styled-components"));
12
12
  var _4k_1 = require("@ludo.ninja/ui/build/utils/4k");
13
- var useToGalleryAsset_1 = require("@/hooks/useToGalleryAsset");
14
- var ScreenWidth_1 = require("@/styles/ScreenWidth");
15
- var colors_1 = require("@/styles/colors");
16
- var IconWithButton_1 = __importDefault(require("@/system/Buttons/IconWithButton"));
17
- var MainButton_1 = __importDefault(require("@/system/Buttons/MainButton"));
18
- var scale_1 = require("@/utils/adaptive/scale");
19
- var screen_1 = require("@/utils/screen");
13
+ var useToGalleryAsset_1 = require("@ludo.ninja/components/dist/hooks/useToGalleryAsset");
14
+ var styles_1 = require("@ludo.ninja/components/dist/styles");
15
+ var system_1 = require("@ludo.ninja/components/dist/system");
16
+ var utils_1 = require("@ludo.ninja/components/dist/utils");
20
17
  var plus_svg_1 = __importDefault(require("@/public/wallets/plus.svg"));
21
18
  // Styles
22
- var StyledProfileAddToGalleryBtns = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n position: fixed;\n left: 50%;\n transform: translateX(-50%);\n z-index: 100;\n bottom: 32px;\n background: ", ";\n width: 300px;\n height: 55px;\n box-shadow: 0 4px 20px rgba(33, 21, 95, 0.1);\n border-radius: 30px;\n padding: 8px;\n\n .addToGalleryBtns {\n display: flex;\n height: 100%;\n width: 100%;\n\n button:first-child {\n margin-right: 12px;\n width: 160px;\n height: 40px;\n padding: 0;\n }\n\n button:last-child {\n width: 112px;\n height: 40px;\n }\n }\n\n .organizeBtn {\n display: flex;\n height: 100%;\n width: 100%;\n\n button {\n width: 100%;\n }\n }\n\n .icon {\n path {\n stroke: ", ";\n }\n\n margin-right: 5px;\n }\n\n ", " {\n bottom: ", ";\n width: ", ";\n height: ", ";\n box-shadow: 0 ", " ", "\n rgba(33, 21, 95, 0.1);\n border-radius: ", ";\n padding: ", ";\n\n .addToGalleryBtns {\n button:first-child {\n margin-right: ", ";\n width: ", ";\n height: ", ";\n }\n\n button:last-child {\n width: ", ";\n height: ", ";\n }\n }\n\n .icon {\n margin-right: ", ";\n }\n }\n"], ["\n position: fixed;\n left: 50%;\n transform: translateX(-50%);\n z-index: 100;\n bottom: 32px;\n background: ", ";\n width: 300px;\n height: 55px;\n box-shadow: 0 4px 20px rgba(33, 21, 95, 0.1);\n border-radius: 30px;\n padding: 8px;\n\n .addToGalleryBtns {\n display: flex;\n height: 100%;\n width: 100%;\n\n button:first-child {\n margin-right: 12px;\n width: 160px;\n height: 40px;\n padding: 0;\n }\n\n button:last-child {\n width: 112px;\n height: 40px;\n }\n }\n\n .organizeBtn {\n display: flex;\n height: 100%;\n width: 100%;\n\n button {\n width: 100%;\n }\n }\n\n .icon {\n path {\n stroke: ", ";\n }\n\n margin-right: 5px;\n }\n\n ", " {\n bottom: ", ";\n width: ", ";\n height: ", ";\n box-shadow: 0 ", " ", "\n rgba(33, 21, 95, 0.1);\n border-radius: ", ";\n padding: ", ";\n\n .addToGalleryBtns {\n button:first-child {\n margin-right: ", ";\n width: ", ";\n height: ", ";\n }\n\n button:last-child {\n width: ", ";\n height: ", ";\n }\n }\n\n .icon {\n margin-right: ", ";\n }\n }\n"])), colors_1.WhiteColor, colors_1.WhiteColor, ScreenWidth_1.mediaQuery.minWidthFourK, (0, _4k_1.adaptiveValueCalc)(32), (0, _4k_1.adaptiveValueCalc)(300), (0, _4k_1.adaptiveValueCalc)(55), (0, _4k_1.adaptiveValueCalc)(4), (0, _4k_1.adaptiveValueCalc)(20), (0, _4k_1.adaptiveValueCalc)(30), (0, _4k_1.adaptiveValueCalc)(8), (0, _4k_1.adaptiveValueCalc)(12), (0, _4k_1.adaptiveValueCalc)(160), (0, _4k_1.adaptiveValueCalc)(40), (0, _4k_1.adaptiveValueCalc)(112), (0, _4k_1.adaptiveValueCalc)(40), (0, _4k_1.adaptiveValueCalc)(5));
19
+ var StyledProfileAddToGalleryBtns = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n position: fixed;\n left: 50%;\n transform: translateX(-50%);\n z-index: 100;\n bottom: 32px;\n background: ", ";\n width: 300px;\n height: 55px;\n box-shadow: 0 4px 20px rgba(33, 21, 95, 0.1);\n border-radius: 30px;\n padding: 8px;\n\n .addToGalleryBtns {\n display: flex;\n height: 100%;\n width: 100%;\n\n button:first-child {\n margin-right: 12px;\n width: 160px;\n height: 40px;\n padding: 0;\n }\n\n button:last-child {\n width: 112px;\n height: 40px;\n }\n }\n\n .organizeBtn {\n display: flex;\n height: 100%;\n width: 100%;\n\n button {\n width: 100%;\n }\n }\n\n .icon {\n path {\n stroke: ", ";\n }\n\n margin-right: 5px;\n }\n\n ", " {\n bottom: ", ";\n width: ", ";\n height: ", ";\n box-shadow: 0 ", " ", "\n rgba(33, 21, 95, 0.1);\n border-radius: ", ";\n padding: ", ";\n\n .addToGalleryBtns {\n button:first-child {\n margin-right: ", ";\n width: ", ";\n height: ", ";\n }\n\n button:last-child {\n width: ", ";\n height: ", ";\n }\n }\n\n .icon {\n margin-right: ", ";\n }\n }\n"], ["\n position: fixed;\n left: 50%;\n transform: translateX(-50%);\n z-index: 100;\n bottom: 32px;\n background: ", ";\n width: 300px;\n height: 55px;\n box-shadow: 0 4px 20px rgba(33, 21, 95, 0.1);\n border-radius: 30px;\n padding: 8px;\n\n .addToGalleryBtns {\n display: flex;\n height: 100%;\n width: 100%;\n\n button:first-child {\n margin-right: 12px;\n width: 160px;\n height: 40px;\n padding: 0;\n }\n\n button:last-child {\n width: 112px;\n height: 40px;\n }\n }\n\n .organizeBtn {\n display: flex;\n height: 100%;\n width: 100%;\n\n button {\n width: 100%;\n }\n }\n\n .icon {\n path {\n stroke: ", ";\n }\n\n margin-right: 5px;\n }\n\n ", " {\n bottom: ", ";\n width: ", ";\n height: ", ";\n box-shadow: 0 ", " ", "\n rgba(33, 21, 95, 0.1);\n border-radius: ", ";\n padding: ", ";\n\n .addToGalleryBtns {\n button:first-child {\n margin-right: ", ";\n width: ", ";\n height: ", ";\n }\n\n button:last-child {\n width: ", ";\n height: ", ";\n }\n }\n\n .icon {\n margin-right: ", ";\n }\n }\n"])), styles_1.WhiteColor, styles_1.WhiteColor, styles_1.mediaQuery.minWidthFourK, (0, _4k_1.adaptiveValueCalc)(32), (0, _4k_1.adaptiveValueCalc)(300), (0, _4k_1.adaptiveValueCalc)(55), (0, _4k_1.adaptiveValueCalc)(4), (0, _4k_1.adaptiveValueCalc)(20), (0, _4k_1.adaptiveValueCalc)(30), (0, _4k_1.adaptiveValueCalc)(8), (0, _4k_1.adaptiveValueCalc)(12), (0, _4k_1.adaptiveValueCalc)(160), (0, _4k_1.adaptiveValueCalc)(40), (0, _4k_1.adaptiveValueCalc)(112), (0, _4k_1.adaptiveValueCalc)(40), (0, _4k_1.adaptiveValueCalc)(5));
23
20
  // Component
24
21
  var PlusIconResize = function () {
25
- var windowDimensions = (0, screen_1.useWindowDimensionsWithServerInitial)().windowDimensions;
26
- return (react_1.default.createElement(plus_svg_1.default, { className: 'icon', style: (0, scale_1.getAdaptiveScale)({ windowDimensions: windowDimensions, currentSize: 1 }) }));
22
+ var windowDimensions = (0, utils_1.useWindowDimensionsWithServerInitial)().windowDimensions;
23
+ return (react_1.default.createElement(plus_svg_1.default, { className: 'icon', style: (0, utils_1.getAdaptiveScale)({ windowDimensions: windowDimensions, currentSize: 1 }) }));
27
24
  };
28
25
  var ProfileAddToGalleryBtns = function (_a) {
29
26
  var addMethod = _a.addMethod;
@@ -36,9 +33,9 @@ var ProfileAddToGalleryBtns = function (_a) {
36
33
  return null;
37
34
  return (react_1.default.createElement(StyledProfileAddToGalleryBtns, null,
38
35
  react_1.default.createElement("div", { className: "addToGalleryBtns" },
39
- react_1.default.createElement(IconWithButton_1.default, { variant: 'regular', text: 'Add to Gallery', onClick: addMethod, disabled: !creationsToGallery.length, isDisableSkeleton: true },
36
+ react_1.default.createElement(system_1.IconWithButton, { variant: 'regular', text: 'Add to Gallery', onClick: addMethod, disabled: !creationsToGallery.length, isDisableSkeleton: true },
40
37
  react_1.default.createElement(PlusIconResize, null)),
41
- react_1.default.createElement(MainButton_1.default, { onClick: resetCreationsInGallery, variant: "float", text: 'Cancel' }))));
38
+ react_1.default.createElement(system_1.MainButton, { onClick: resetCreationsInGallery, variant: "float", text: 'Cancel' }))));
42
39
  };
43
40
  // Export
44
41
  exports.default = ProfileAddToGalleryBtns;
package/dist/components/profile/info/index.js CHANGED
@@ -11,13 +11,13 @@ exports.ProfileInfo = void 0;
11
11
  var react_1 = __importDefault(require("react"));
12
12
  var styled_components_1 = __importDefault(require("styled-components"));
13
13
  var _4k_1 = require("@ludo.ninja/ui/build/utils/4k");
14
- var ScreenWidth_1 = require("@/styles/ScreenWidth");
14
+ var styles_1 = require("@ludo.ninja/components/dist/styles");
15
15
  var profile_1 = require("@/components/profile");
16
16
  var _system_1 = require("@system");
17
17
  var env_1 = require("@/utils/env");
18
18
  var screen_1 = require("@/utils/screen");
19
19
  // Styles
20
- var StyledProfileInfo = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n display: flex;\n justify-content: space-between;\n align-items: flex-start;\n margin-bottom: 29px;\n\n ", " {\n margin-bottom: ", ";\n }\n\n ", " {\n flex-direction: column;\n margin-bottom: 0;\n }\n\n .profileImgWithDescription {\n display: flex;\n width: 69.67%;\n margin-right: 44px;\n\n .profileImage {\n a {\n pointer-events: none;\n }\n }\n\n ", " {\n flex-direction: column;\n width: 100%;\n margin-right: 0;\n\n .profileImage img {\n width: 64px;\n height: 64px;\n margin-right: 0;\n margin-bottom: 12px;\n }\n }\n\n ", " {\n margin-right: ", ";\n\n .profileImage img {\n width: ", ";\n height: ", ";\n }\n }\n }\n"], ["\n display: flex;\n justify-content: space-between;\n align-items: flex-start;\n margin-bottom: 29px;\n\n ", " {\n margin-bottom: ", ";\n }\n\n ", " {\n flex-direction: column;\n margin-bottom: 0;\n }\n\n .profileImgWithDescription {\n display: flex;\n width: 69.67%;\n margin-right: 44px;\n\n .profileImage {\n a {\n pointer-events: none;\n }\n }\n\n ", " {\n flex-direction: column;\n width: 100%;\n margin-right: 0;\n\n .profileImage img {\n width: 64px;\n height: 64px;\n margin-right: 0;\n margin-bottom: 12px;\n }\n }\n\n ", " {\n margin-right: ", ";\n\n .profileImage img {\n width: ", ";\n height: ", ";\n }\n }\n }\n"])), ScreenWidth_1.mediaQuery.minWidthFourK, (0, _4k_1.adaptiveValueCalc)(29), ScreenWidth_1.mediaQuery.mobile, ScreenWidth_1.mediaQuery.mobile, ScreenWidth_1.mediaQuery.minWidthFourK, (0, _4k_1.adaptiveValueCalc)(44), (0, _4k_1.adaptiveValueCalc)(120), (0, _4k_1.adaptiveValueCalc)(120));
20
+ var StyledProfileInfo = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n display: flex;\n justify-content: space-between;\n align-items: flex-start;\n margin-bottom: 29px;\n\n ", " {\n margin-bottom: ", ";\n }\n\n ", " {\n flex-direction: column;\n margin-bottom: 0;\n }\n\n .profileImgWithDescription {\n display: flex;\n width: 69.67%;\n margin-right: 44px;\n\n .profileImage {\n a {\n pointer-events: none;\n }\n }\n\n ", " {\n flex-direction: column;\n width: 100%;\n margin-right: 0;\n\n .profileImage img {\n width: 64px;\n height: 64px;\n margin-right: 0;\n margin-bottom: 12px;\n }\n }\n\n ", " {\n margin-right: ", ";\n\n .profileImage img {\n width: ", ";\n height: ", ";\n }\n }\n }\n"], ["\n display: flex;\n justify-content: space-between;\n align-items: flex-start;\n margin-bottom: 29px;\n\n ", " {\n margin-bottom: ", ";\n }\n\n ", " {\n flex-direction: column;\n margin-bottom: 0;\n }\n\n .profileImgWithDescription {\n display: flex;\n width: 69.67%;\n margin-right: 44px;\n\n .profileImage {\n a {\n pointer-events: none;\n }\n }\n\n ", " {\n flex-direction: column;\n width: 100%;\n margin-right: 0;\n\n .profileImage img {\n width: 64px;\n height: 64px;\n margin-right: 0;\n margin-bottom: 12px;\n }\n }\n\n ", " {\n margin-right: ", ";\n\n .profileImage img {\n width: ", ";\n height: ", ";\n }\n }\n }\n"])), styles_1.mediaQuery.minWidthFourK, (0, _4k_1.adaptiveValueCalc)(29), styles_1.mediaQuery.mobile, styles_1.mediaQuery.mobile, styles_1.mediaQuery.minWidthFourK, (0, _4k_1.adaptiveValueCalc)(44), (0, _4k_1.adaptiveValueCalc)(120), (0, _4k_1.adaptiveValueCalc)(120));
21
21
  // Components
22
22
  var ProfileInfo = function (_a) {
23
23
  var profile = _a.profile;
@@ -25,7 +25,7 @@ var ProfileInfo = function (_a) {
25
25
  var getProfileImgSize = function () {
26
26
  if (!windowDimensions)
27
27
  return 120;
28
- if (windowDimensions.windowWidth <= ScreenWidth_1.ScreenWidth.MOBILE)
28
+ if (windowDimensions.windowWidth <= styles_1.ScreenWidth.MOBILE)
29
29
  return 64;
30
30
  return 120;
31
31
  };
package/dist/components/profile/interests/index.js CHANGED
@@ -12,14 +12,14 @@ var react_1 = __importDefault(require("react"));
12
12
  var styled_components_1 = __importDefault(require("styled-components"));
13
13
  var _4k_1 = require("@ludo.ninja/ui/build/utils/4k");
14
14
  var useFetchUserInterests_1 = __importDefault(require("@/api/server-preferences/queries/useFetchUserInterests"));
15
- var ScreenWidth_1 = require("@/styles/ScreenWidth");
15
+ var styles_1 = require("@ludo.ninja/components/dist/styles");
16
16
  var colors_1 = require("@/styles/colors");
17
17
  var typography_1 = require("@/styles/typography");
18
18
  var data_1 = __importDefault(require("@/components/profile/interests/data"));
19
19
  var Palete_1 = __importDefault(require("@/system/Palete"));
20
20
  var vars_1 = require("@/fonts/vars");
21
21
  // Styles
22
- var StyledProfileInterests = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n margin-bottom: 16px;\n\n .caption {\n ", ";\n color: ", ";\n }\n\n .diagrammaProgress {\n display: flex;\n justify-content: flex-start;\n margin-top: 8px;\n border-radius: 4px;\n height: 32px;\n background-color: ", ";\n\n &Item {\n display: block;\n height: 100%;\n\n :first-child {\n border-top-left-radius: 4px;\n border-bottom-left-radius: 4px;\n }\n }\n }\n\n .diagrammaTable {\n font-family: ", ";\n\n margin-top: 8px;\n\n &Item {\n ", ";\n display: flex;\n justify-content: space-between;\n margin-top: 8px;\n user-select: none;\n\n &StartValue {\n display: flex;\n align-items: center;\n color: ", ";\n\n strong {\n display: inline-block;\n width: 10px;\n height: 10px;\n border-radius: 50%;\n margin-right: 8px;\n }\n }\n\n &EndValue {\n color: ", ";\n }\n }\n }\n\n ", " {\n margin-bottom: ", ";\n\n .diagrammaProgress {\n margin-top: ", ";\n border-radius: ", ";\n height: ", ";\n\n &Item {\n :first-child {\n border-top-left-radius: ", ";\n border-bottom-left-radius: ", ";\n }\n }\n }\n .diagrammaTable {\n margin-top: ", ";\n &Item {\n margin-top: ", ";\n &StartValue {\n strong {\n width: ", ";\n height: ", ";\n margin-right: ", ";\n }\n }\n }\n }\n }\n"], ["\n margin-bottom: 16px;\n\n .caption {\n ", ";\n color: ", ";\n }\n\n .diagrammaProgress {\n display: flex;\n justify-content: flex-start;\n margin-top: 8px;\n border-radius: 4px;\n height: 32px;\n background-color: ", ";\n\n &Item {\n display: block;\n height: 100%;\n\n :first-child {\n border-top-left-radius: 4px;\n border-bottom-left-radius: 4px;\n }\n }\n }\n\n .diagrammaTable {\n font-family: ", ";\n\n margin-top: 8px;\n\n &Item {\n ", ";\n display: flex;\n justify-content: space-between;\n margin-top: 8px;\n user-select: none;\n\n &StartValue {\n display: flex;\n align-items: center;\n color: ", ";\n\n strong {\n display: inline-block;\n width: 10px;\n height: 10px;\n border-radius: 50%;\n margin-right: 8px;\n }\n }\n\n &EndValue {\n color: ", ";\n }\n }\n }\n\n ", " {\n margin-bottom: ", ";\n\n .diagrammaProgress {\n margin-top: ", ";\n border-radius: ", ";\n height: ", ";\n\n &Item {\n :first-child {\n border-top-left-radius: ", ";\n border-bottom-left-radius: ", ";\n }\n }\n }\n .diagrammaTable {\n margin-top: ", ";\n &Item {\n margin-top: ", ";\n &StartValue {\n strong {\n width: ", ";\n height: ", ";\n margin-right: ", ";\n }\n }\n }\n }\n }\n"])), typography_1.FH5, colors_1.BlackColor, colors_1.InactiveButtonColor, vars_1.dmsansFontVarCss.css, typography_1.TextSmall, colors_1.BlackColor, colors_1.TextGrayColor, ScreenWidth_1.mediaQuery.minWidthFourK, (0, _4k_1.adaptiveValueCalc)(16), (0, _4k_1.adaptiveValueCalc)(8), (0, _4k_1.adaptiveValueCalc)(4), (0, _4k_1.adaptiveValueCalc)(32), (0, _4k_1.adaptiveValueCalc)(4), (0, _4k_1.adaptiveValueCalc)(4), (0, _4k_1.adaptiveValueCalc)(8), (0, _4k_1.adaptiveValueCalc)(8), (0, _4k_1.adaptiveValueCalc)(10), (0, _4k_1.adaptiveValueCalc)(10), (0, _4k_1.adaptiveValueCalc)(8));
22
+ var StyledProfileInterests = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n margin-bottom: 16px;\n\n .caption {\n ", ";\n color: ", ";\n }\n\n .diagrammaProgress {\n display: flex;\n justify-content: flex-start;\n margin-top: 8px;\n border-radius: 4px;\n height: 32px;\n background-color: ", ";\n\n &Item {\n display: block;\n height: 100%;\n\n :first-child {\n border-top-left-radius: 4px;\n border-bottom-left-radius: 4px;\n }\n }\n }\n\n .diagrammaTable {\n font-family: ", ";\n\n margin-top: 8px;\n\n &Item {\n ", ";\n display: flex;\n justify-content: space-between;\n margin-top: 8px;\n user-select: none;\n\n &StartValue {\n display: flex;\n align-items: center;\n color: ", ";\n\n strong {\n display: inline-block;\n width: 10px;\n height: 10px;\n border-radius: 50%;\n margin-right: 8px;\n }\n }\n\n &EndValue {\n color: ", ";\n }\n }\n }\n\n ", " {\n margin-bottom: ", ";\n\n .diagrammaProgress {\n margin-top: ", ";\n border-radius: ", ";\n height: ", ";\n\n &Item {\n :first-child {\n border-top-left-radius: ", ";\n border-bottom-left-radius: ", ";\n }\n }\n }\n .diagrammaTable {\n margin-top: ", ";\n &Item {\n margin-top: ", ";\n &StartValue {\n strong {\n width: ", ";\n height: ", ";\n margin-right: ", ";\n }\n }\n }\n }\n }\n"], ["\n margin-bottom: 16px;\n\n .caption {\n ", ";\n color: ", ";\n }\n\n .diagrammaProgress {\n display: flex;\n justify-content: flex-start;\n margin-top: 8px;\n border-radius: 4px;\n height: 32px;\n background-color: ", ";\n\n &Item {\n display: block;\n height: 100%;\n\n :first-child {\n border-top-left-radius: 4px;\n border-bottom-left-radius: 4px;\n }\n }\n }\n\n .diagrammaTable {\n font-family: ", ";\n\n margin-top: 8px;\n\n &Item {\n ", ";\n display: flex;\n justify-content: space-between;\n margin-top: 8px;\n user-select: none;\n\n &StartValue {\n display: flex;\n align-items: center;\n color: ", ";\n\n strong {\n display: inline-block;\n width: 10px;\n height: 10px;\n border-radius: 50%;\n margin-right: 8px;\n }\n }\n\n &EndValue {\n color: ", ";\n }\n }\n }\n\n ", " {\n margin-bottom: ", ";\n\n .diagrammaProgress {\n margin-top: ", ";\n border-radius: ", ";\n height: ", ";\n\n &Item {\n :first-child {\n border-top-left-radius: ", ";\n border-bottom-left-radius: ", ";\n }\n }\n }\n .diagrammaTable {\n margin-top: ", ";\n &Item {\n margin-top: ", ";\n &StartValue {\n strong {\n width: ", ";\n height: ", ";\n margin-right: ", ";\n }\n }\n }\n }\n }\n"])), typography_1.FH5, colors_1.BlackColor, colors_1.InactiveButtonColor, vars_1.dmsansFontVarCss.css, typography_1.TextSmall, colors_1.BlackColor, colors_1.TextGrayColor, styles_1.mediaQuery.minWidthFourK, (0, _4k_1.adaptiveValueCalc)(16), (0, _4k_1.adaptiveValueCalc)(8), (0, _4k_1.adaptiveValueCalc)(4), (0, _4k_1.adaptiveValueCalc)(32), (0, _4k_1.adaptiveValueCalc)(4), (0, _4k_1.adaptiveValueCalc)(4), (0, _4k_1.adaptiveValueCalc)(8), (0, _4k_1.adaptiveValueCalc)(8), (0, _4k_1.adaptiveValueCalc)(10), (0, _4k_1.adaptiveValueCalc)(10), (0, _4k_1.adaptiveValueCalc)(8));
23
23
  // Component
24
24
  var ProfileInterests = function () {
25
25
  var _a = (0, useFetchUserInterests_1.default)(), userInterests = _a.userInterests, loading = _a.loading, error = _a.error;
package/dist/components/profile/profileUserCards/profileUserCard/index.js CHANGED
@@ -75,7 +75,7 @@ var _4k_1 = require("@ludo.ninja/ui/build/utils/4k");
75
75
  var store_1 = require("@/modules/user/store");
76
76
  var useFollowProfile_1 = __importDefault(require("@/api/server-identities/mutations/useFollowProfile"));
77
77
  var useUnfollowProfile_1 = __importDefault(require("@/api/server-identities/mutations/useUnfollowProfile"));
78
- var ScreenWidth_1 = require("@/styles/ScreenWidth");
78
+ var styles_1 = require("@ludo.ninja/components/dist/styles");
79
79
  var colors_1 = require("@/styles/colors");
80
80
  var boxShadow_1 = __importDefault(require("@/styles/mixins/boxShadow"));
81
81
  var boxTransform_1 = __importDefault(require("@/styles/mixins/boxTransform"));
@@ -85,7 +85,7 @@ var ImageInterceptor_1 = require("@/system/Img/ImageInterceptor");
85
85
  var check4k_1 = require("@/utils/adaptive/check4k");
86
86
  var vars_1 = require("@/fonts/vars");
87
87
  // Styles
88
- var StyledProfileUserCard = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n ", ";\n ", ";\n user-select: none;\n width: calc(25% - 24px * 3 / 4);\n background-color: ", ";\n border-radius: 6px;\n @media (max-width: 1199px) {\n width: calc(50% - 16px / 2);\n }\n @media (max-width: 767px) {\n width: 100%;\n }\n\n .cardLink {\n font-family: ", ";\n padding: 16px;\n display: flex;\n height: 100%;\n\n @media (max-width: 1199px) {\n padding: 12px;\n align-items: center;\n }\n\n .cardLinkIcon {\n margin-right: 12px;\n border-radius: 50%;\n }\n\n .cardLinkContent {\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n width: 100%;\n\n .content {\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n\n .caption {\n line-height: 1.385em;\n color: ", ";\n font-size: 1.3em;\n font-weight: 700;\n margin: 0;\n }\n\n .text {\n line-height: 1.2em;\n color: ", ";\n font-size: 1.34em;\n font-weight: 400;\n }\n }\n\n .button {\n width: 82px;\n }\n\n @media (max-width: 1199px) {\n flex-direction: row;\n align-items: center;\n .content {\n justify-content: center;\n\n .caption {\n ", ";\n }\n\n .text {\n line-height: 1.1em;\n margin-top: 4px;\n }\n }\n }\n }\n }\n\n ", " {\n width: calc(25% - ", ");\n border-radius: ", ";\n\n .cardLink {\n padding: ", ";\n\n .cardLinkIcon {\n margin-right: ", ";\n }\n\n .cardLinkContent {\n .content {\n .caption {\n line-height: ", ";\n font-size: ", ";\n }\n\n .text {\n line-height: ", ";\n font-size: ", ";\n }\n }\n\n .button {\n width: ", ";\n }\n }\n }\n }\n"], ["\n ", ";\n ", ";\n user-select: none;\n width: calc(25% - 24px * 3 / 4);\n background-color: ", ";\n border-radius: 6px;\n @media (max-width: 1199px) {\n width: calc(50% - 16px / 2);\n }\n @media (max-width: 767px) {\n width: 100%;\n }\n\n .cardLink {\n font-family: ", ";\n padding: 16px;\n display: flex;\n height: 100%;\n\n @media (max-width: 1199px) {\n padding: 12px;\n align-items: center;\n }\n\n .cardLinkIcon {\n margin-right: 12px;\n border-radius: 50%;\n }\n\n .cardLinkContent {\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n width: 100%;\n\n .content {\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n\n .caption {\n line-height: 1.385em;\n color: ", ";\n font-size: 1.3em;\n font-weight: 700;\n margin: 0;\n }\n\n .text {\n line-height: 1.2em;\n color: ", ";\n font-size: 1.34em;\n font-weight: 400;\n }\n }\n\n .button {\n width: 82px;\n }\n\n @media (max-width: 1199px) {\n flex-direction: row;\n align-items: center;\n .content {\n justify-content: center;\n\n .caption {\n ", ";\n }\n\n .text {\n line-height: 1.1em;\n margin-top: 4px;\n }\n }\n }\n }\n }\n\n ", " {\n width: calc(25% - ", ");\n border-radius: ", ";\n\n .cardLink {\n padding: ", ";\n\n .cardLinkIcon {\n margin-right: ", ";\n }\n\n .cardLinkContent {\n .content {\n .caption {\n line-height: ", ";\n font-size: ", ";\n }\n\n .text {\n line-height: ", ";\n font-size: ", ";\n }\n }\n\n .button {\n width: ", ";\n }\n }\n }\n }\n"])), boxShadow_1.default, boxTransform_1.default, colors_1.WhiteColor, vars_1.dmsansFontVarCss.css, colors_1.BlackColor, colors_1.TextGrayColor, typography_1.FH6, ScreenWidth_1.mediaQuery.minWidthFourK, (0, _4k_1.adaptiveValueCalc)((24 * 3) / 4), (0, _4k_1.adaptiveValueCalc)(6), (0, _4k_1.adaptiveValueCalc)(16), (0, _4k_1.adaptiveValueCalc)(12), (0, _4k_1.adaptiveValueCalc)(14), (0, _4k_1.adaptiveValueCalc)(13), (0, _4k_1.adaptiveValueCalc)(13), (0, _4k_1.adaptiveValueCalc)(14), (0, _4k_1.adaptiveValueCalc)(82));
88
+ var StyledProfileUserCard = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n ", ";\n ", ";\n user-select: none;\n width: calc(25% - 24px * 3 / 4);\n background-color: ", ";\n border-radius: 6px;\n @media (max-width: 1199px) {\n width: calc(50% - 16px / 2);\n }\n @media (max-width: 767px) {\n width: 100%;\n }\n\n .cardLink {\n font-family: ", ";\n padding: 16px;\n display: flex;\n height: 100%;\n\n @media (max-width: 1199px) {\n padding: 12px;\n align-items: center;\n }\n\n .cardLinkIcon {\n margin-right: 12px;\n border-radius: 50%;\n }\n\n .cardLinkContent {\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n width: 100%;\n\n .content {\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n\n .caption {\n line-height: 1.385em;\n color: ", ";\n font-size: 1.3em;\n font-weight: 700;\n margin: 0;\n }\n\n .text {\n line-height: 1.2em;\n color: ", ";\n font-size: 1.34em;\n font-weight: 400;\n }\n }\n\n .button {\n width: 82px;\n }\n\n @media (max-width: 1199px) {\n flex-direction: row;\n align-items: center;\n .content {\n justify-content: center;\n\n .caption {\n ", ";\n }\n\n .text {\n line-height: 1.1em;\n margin-top: 4px;\n }\n }\n }\n }\n }\n\n ", " {\n width: calc(25% - ", ");\n border-radius: ", ";\n\n .cardLink {\n padding: ", ";\n\n .cardLinkIcon {\n margin-right: ", ";\n }\n\n .cardLinkContent {\n .content {\n .caption {\n line-height: ", ";\n font-size: ", ";\n }\n\n .text {\n line-height: ", ";\n font-size: ", ";\n }\n }\n\n .button {\n width: ", ";\n }\n }\n }\n }\n"], ["\n ", ";\n ", ";\n user-select: none;\n width: calc(25% - 24px * 3 / 4);\n background-color: ", ";\n border-radius: 6px;\n @media (max-width: 1199px) {\n width: calc(50% - 16px / 2);\n }\n @media (max-width: 767px) {\n width: 100%;\n }\n\n .cardLink {\n font-family: ", ";\n padding: 16px;\n display: flex;\n height: 100%;\n\n @media (max-width: 1199px) {\n padding: 12px;\n align-items: center;\n }\n\n .cardLinkIcon {\n margin-right: 12px;\n border-radius: 50%;\n }\n\n .cardLinkContent {\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n width: 100%;\n\n .content {\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n\n .caption {\n line-height: 1.385em;\n color: ", ";\n font-size: 1.3em;\n font-weight: 700;\n margin: 0;\n }\n\n .text {\n line-height: 1.2em;\n color: ", ";\n font-size: 1.34em;\n font-weight: 400;\n }\n }\n\n .button {\n width: 82px;\n }\n\n @media (max-width: 1199px) {\n flex-direction: row;\n align-items: center;\n .content {\n justify-content: center;\n\n .caption {\n ", ";\n }\n\n .text {\n line-height: 1.1em;\n margin-top: 4px;\n }\n }\n }\n }\n }\n\n ", " {\n width: calc(25% - ", ");\n border-radius: ", ";\n\n .cardLink {\n padding: ", ";\n\n .cardLinkIcon {\n margin-right: ", ";\n }\n\n .cardLinkContent {\n .content {\n .caption {\n line-height: ", ";\n font-size: ", ";\n }\n\n .text {\n line-height: ", ";\n font-size: ", ";\n }\n }\n\n .button {\n width: ", ";\n }\n }\n }\n }\n"])), boxShadow_1.default, boxTransform_1.default, colors_1.WhiteColor, vars_1.dmsansFontVarCss.css, colors_1.BlackColor, colors_1.TextGrayColor, typography_1.FH6, styles_1.mediaQuery.minWidthFourK, (0, _4k_1.adaptiveValueCalc)((24 * 3) / 4), (0, _4k_1.adaptiveValueCalc)(6), (0, _4k_1.adaptiveValueCalc)(16), (0, _4k_1.adaptiveValueCalc)(12), (0, _4k_1.adaptiveValueCalc)(14), (0, _4k_1.adaptiveValueCalc)(13), (0, _4k_1.adaptiveValueCalc)(13), (0, _4k_1.adaptiveValueCalc)(14), (0, _4k_1.adaptiveValueCalc)(82));
89
89
  var ProfileUserCard = function (_a) {
90
90
  var userId = _a.userId, userPic = _a.userPic, userName = _a.userName, followings = _a.followings, isFollowing = _a.isFollowing, windowDimensions = _a.windowDimensions;
91
91
  var isSignedIn = (0, store_1.useUserStore)(function (state) { return state.isSignedIn; });
package/dist/components/profile/rank/index.js CHANGED
@@ -12,12 +12,12 @@ var react_1 = __importDefault(require("react"));
12
12
  var styled_components_1 = __importDefault(require("styled-components"));
13
13
  var _4k_1 = require("@ludo.ninja/ui/build/utils/4k");
14
14
  var utils_1 = require("@ludo.ninja/utils");
15
- var ScreenWidth_1 = require("@/styles/ScreenWidth");
15
+ var styles_1 = require("@ludo.ninja/components/dist/styles");
16
16
  var colors_1 = require("@/styles/colors");
17
17
  var _system_1 = require("@system");
18
18
  // Styles
19
- var RangeContainer = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n display: block;\n width: 100%;\n background: ", ";\n height: 20px;\n border-radius: 4px;\n\n ", " {\n height: ", ";\n border-radius: ", ";\n }\n"], ["\n display: block;\n width: 100%;\n background: ", ";\n height: 20px;\n border-radius: 4px;\n\n ", " {\n height: ", ";\n border-radius: ", ";\n }\n"])), colors_1.InactiveButtonColor, ScreenWidth_1.mediaQuery.minWidthFourK, (0, _4k_1.adaptiveValueCalc)(20), (0, _4k_1.adaptiveValueCalc)(4));
20
- var RangeValue = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n display: block;\n background: ", ";\n height: 100%;\n border-radius: 2px 0 0 2px;\n ", " {\n border-top-left-radius: ", ";\n border-bottom-left-radius: ", ";\n }\n"], ["\n display: block;\n background: ", ";\n height: 100%;\n border-radius: 2px 0 0 2px;\n ", " {\n border-top-left-radius: ", ";\n border-bottom-left-radius: ", ";\n }\n"])), function (props) { return props.rankValue && (0, utils_1.getRankColor)(props.rankValue); }, ScreenWidth_1.mediaQuery.minWidthFourK, (0, _4k_1.adaptiveValueCalc)(2), (0, _4k_1.adaptiveValueCalc)(2));
19
+ var RangeContainer = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n display: block;\n width: 100%;\n background: ", ";\n height: 20px;\n border-radius: 4px;\n\n ", " {\n height: ", ";\n border-radius: ", ";\n }\n"], ["\n display: block;\n width: 100%;\n background: ", ";\n height: 20px;\n border-radius: 4px;\n\n ", " {\n height: ", ";\n border-radius: ", ";\n }\n"])), colors_1.InactiveButtonColor, styles_1.mediaQuery.minWidthFourK, (0, _4k_1.adaptiveValueCalc)(20), (0, _4k_1.adaptiveValueCalc)(4));
20
+ var RangeValue = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n display: block;\n background: ", ";\n height: 100%;\n border-radius: 2px 0 0 2px;\n ", " {\n border-top-left-radius: ", ";\n border-bottom-left-radius: ", ";\n }\n"], ["\n display: block;\n background: ", ";\n height: 100%;\n border-radius: 2px 0 0 2px;\n ", " {\n border-top-left-radius: ", ";\n border-bottom-left-radius: ", ";\n }\n"])), function (props) { return props.rankValue && (0, utils_1.getRankColor)(props.rankValue); }, styles_1.mediaQuery.minWidthFourK, (0, _4k_1.adaptiveValueCalc)(2), (0, _4k_1.adaptiveValueCalc)(2));
21
21
  // Components
22
22
  var ProfileRank = function (_a) {
23
23
  var rank = _a.rank;
package/dist/components/profile/stats/index.js CHANGED
@@ -11,11 +11,11 @@ exports.ProfileStats = void 0;
11
11
  var react_1 = __importDefault(require("react"));
12
12
  var styled_components_1 = __importDefault(require("styled-components"));
13
13
  var _4k_1 = require("@ludo.ninja/ui/build/utils/4k");
14
- var ScreenWidth_1 = require("@/styles/ScreenWidth");
14
+ var styles_1 = require("@ludo.ninja/components/dist/styles");
15
15
  var rank_1 = require("@/components/profile/rank");
16
16
  var Palete_1 = __importDefault(require("@/system/Palete"));
17
17
  // Styles
18
- var StyledProfileStats = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n width: 100%;\n display: flex;\n flex-direction: column;\n justify-content: flex-start;\n margin-top: 12px;\n\n ", " {\n width: 156px;\n margin-top: 0;\n }\n\n ", " {\n width: 244px;\n margin-top: 0;\n }\n\n ", " {\n width: ", ";\n }\n"], ["\n width: 100%;\n display: flex;\n flex-direction: column;\n justify-content: flex-start;\n margin-top: 12px;\n\n ", " {\n width: 156px;\n margin-top: 0;\n }\n\n ", " {\n width: 244px;\n margin-top: 0;\n }\n\n ", " {\n width: ", ";\n }\n"])), ScreenWidth_1.mediaQuery.minWidthTablet, ScreenWidth_1.mediaQuery.minWidthDesktop, ScreenWidth_1.mediaQuery.minWidthFourK, (0, _4k_1.adaptiveValueCalc)(244));
18
+ var StyledProfileStats = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n width: 100%;\n display: flex;\n flex-direction: column;\n justify-content: flex-start;\n margin-top: 12px;\n\n ", " {\n width: 156px;\n margin-top: 0;\n }\n\n ", " {\n width: 244px;\n margin-top: 0;\n }\n\n ", " {\n width: ", ";\n }\n"], ["\n width: 100%;\n display: flex;\n flex-direction: column;\n justify-content: flex-start;\n margin-top: 12px;\n\n ", " {\n width: 156px;\n margin-top: 0;\n }\n\n ", " {\n width: 244px;\n margin-top: 0;\n }\n\n ", " {\n width: ", ";\n }\n"])), styles_1.mediaQuery.minWidthTablet, styles_1.mediaQuery.minWidthDesktop, styles_1.mediaQuery.minWidthFourK, (0, _4k_1.adaptiveValueCalc)(244));
19
19
  // Components
20
20
  var ProfileStats = function (_a) {
21
21
  var rank = _a.rank;
package/dist/components/profile/wallets/index.js CHANGED
@@ -19,7 +19,7 @@ var utils_1 = require("@ludo.ninja/utils");
19
19
  var store_1 = require("@/modules/user/store");
20
20
  var ui_1 = require("@/store/ui");
21
21
  var useFetchUserWallets_1 = __importDefault(require("@/api/server-identities/queries/useFetchUserWallets"));
22
- var ScreenWidth_1 = require("@/styles/ScreenWidth");
22
+ var styles_1 = require("@ludo.ninja/components/dist/styles");
23
23
  var myWallets_1 = __importDefault(require("@/components/myWallets"));
24
24
  var Palete_1 = __importDefault(require("@/system/Palete"));
25
25
  var _system_1 = require("@system");
@@ -30,7 +30,7 @@ var screen_1 = require("@/utils/screen");
30
30
  var vars_1 = require("@/fonts/vars");
31
31
  var plus_svg_1 = __importDefault(require("@/public/wallets/plus.svg"));
32
32
  // Styles
33
- var StyledProfileWallets = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n .manageBtn {\n cursor: pointer;\n }\n\n .wallets {\n margin-top: 12px;\n\n .wallet_item {\n font-family: ", ";\n margin-bottom: 12px;\n font-size: 13px;\n color: ", ";\n\n .icon {\n margin-right: 8px;\n border-radius: 50%;\n }\n }\n }\n\n .add_wallets {\n display: flex;\n cursor: pointer;\n\n .icon {\n margin-right: 8px;\n }\n }\n\n ", " {\n .wallets {\n margin-top: ", ";\n\n .wallet_item {\n margin-bottom: ", ";\n font-size: ", ";\n\n .icon {\n margin-right: ", ";\n width: ", ";\n height: ", ";\n }\n }\n }\n\n .add_wallets {\n .icon {\n margin-right: ", ";\n width: ", ";\n height: ", ";\n display: flex;\n align-items: center;\n justify-content: center;\n }\n }\n }\n"], ["\n .manageBtn {\n cursor: pointer;\n }\n\n .wallets {\n margin-top: 12px;\n\n .wallet_item {\n font-family: ", ";\n margin-bottom: 12px;\n font-size: 13px;\n color: ", ";\n\n .icon {\n margin-right: 8px;\n border-radius: 50%;\n }\n }\n }\n\n .add_wallets {\n display: flex;\n cursor: pointer;\n\n .icon {\n margin-right: 8px;\n }\n }\n\n ", " {\n .wallets {\n margin-top: ", ";\n\n .wallet_item {\n margin-bottom: ", ";\n font-size: ", ";\n\n .icon {\n margin-right: ", ";\n width: ", ";\n height: ", ";\n }\n }\n }\n\n .add_wallets {\n .icon {\n margin-right: ", ";\n width: ", ";\n height: ", ";\n display: flex;\n align-items: center;\n justify-content: center;\n }\n }\n }\n"])), vars_1.dmsansFontVarCss.css, colors_1.BlackColor, ScreenWidth_1.mediaQuery.minWidthFourK, (0, _4k_1.adaptiveValueCalc)(12), (0, _4k_1.adaptiveValueCalc)(12), (0, _4k_1.adaptiveValueCalc)(13), (0, _4k_1.adaptiveValueCalc)(8), (0, _4k_1.adaptiveValueCalc)(16), (0, _4k_1.adaptiveValueCalc)(16), (0, _4k_1.adaptiveValueCalc)(8), (0, _4k_1.adaptiveValueCalc)(16), (0, _4k_1.adaptiveValueCalc)(16));
33
+ var StyledProfileWallets = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n .manageBtn {\n cursor: pointer;\n }\n\n .wallets {\n margin-top: 12px;\n\n .wallet_item {\n font-family: ", ";\n margin-bottom: 12px;\n font-size: 13px;\n color: ", ";\n\n .icon {\n margin-right: 8px;\n border-radius: 50%;\n }\n }\n }\n\n .add_wallets {\n display: flex;\n cursor: pointer;\n\n .icon {\n margin-right: 8px;\n }\n }\n\n ", " {\n .wallets {\n margin-top: ", ";\n\n .wallet_item {\n margin-bottom: ", ";\n font-size: ", ";\n\n .icon {\n margin-right: ", ";\n width: ", ";\n height: ", ";\n }\n }\n }\n\n .add_wallets {\n .icon {\n margin-right: ", ";\n width: ", ";\n height: ", ";\n display: flex;\n align-items: center;\n justify-content: center;\n }\n }\n }\n"], ["\n .manageBtn {\n cursor: pointer;\n }\n\n .wallets {\n margin-top: 12px;\n\n .wallet_item {\n font-family: ", ";\n margin-bottom: 12px;\n font-size: 13px;\n color: ", ";\n\n .icon {\n margin-right: 8px;\n border-radius: 50%;\n }\n }\n }\n\n .add_wallets {\n display: flex;\n cursor: pointer;\n\n .icon {\n margin-right: 8px;\n }\n }\n\n ", " {\n .wallets {\n margin-top: ", ";\n\n .wallet_item {\n margin-bottom: ", ";\n font-size: ", ";\n\n .icon {\n margin-right: ", ";\n width: ", ";\n height: ", ";\n }\n }\n }\n\n .add_wallets {\n .icon {\n margin-right: ", ";\n width: ", ";\n height: ", ";\n display: flex;\n align-items: center;\n justify-content: center;\n }\n }\n }\n"])), vars_1.dmsansFontVarCss.css, colors_1.BlackColor, styles_1.mediaQuery.minWidthFourK, (0, _4k_1.adaptiveValueCalc)(12), (0, _4k_1.adaptiveValueCalc)(12), (0, _4k_1.adaptiveValueCalc)(13), (0, _4k_1.adaptiveValueCalc)(8), (0, _4k_1.adaptiveValueCalc)(16), (0, _4k_1.adaptiveValueCalc)(16), (0, _4k_1.adaptiveValueCalc)(8), (0, _4k_1.adaptiveValueCalc)(16), (0, _4k_1.adaptiveValueCalc)(16));
34
34
  // Component
35
35
  var ProfileWallets = function () {
36
36
  var isSignedIn = (0, store_1.useUserStore)(function (state) { return state.isSignedIn; });
package/dist/components/registrationPage/registrationSelection/index.js CHANGED
@@ -12,13 +12,13 @@ var styled_components_1 = __importDefault(require("styled-components"));
12
12
  var ui_1 = require("@ludo.ninja/ui");
13
13
  var colors_1 = require("@ludo.ninja/ui/build/styles/colors");
14
14
  var MainButton_1 = __importDefault(require("@ludo.ninja/ui/build/system/Buttons/MainButton"));
15
- var ScreenWidth_1 = require("@/styles/ScreenWidth");
15
+ var styles_1 = require("@ludo.ninja/components/dist/styles");
16
16
  var colors_2 = require("@/styles/colors");
17
17
  var registrationPage_1 = require("@/components/registrationPage");
18
18
  var _system_1 = require("@system");
19
19
  // Styles
20
20
  var StyledCaption = (0, styled_components_1.default)(_system_1.H1)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n font-size: 24px;\n"], ["\n font-size: 24px;\n"])));
21
- var StyledRegistrationSelection = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n justify-items: center;\n align-items: center;\n\n .info {\n max-width: 520px;\n margin: 0 auto;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-items: center;\n user-select: none;\n }\n\n .content {\n width: 100%;\n margin-top: 24px;\n\n &-values {\n display: grid;\n grid-template-columns: 1fr 1fr 1fr 1fr;\n grid-gap: 24px;\n margin-bottom: 56px;\n\n ", " {\n grid-gap: 16px;\n grid-template-columns: 1fr 1fr;\n }\n }\n\n &-next {\n max-width: 82px;\n margin: 0 auto;\n }\n }\n"], ["\n display: flex;\n flex-direction: column;\n justify-items: center;\n align-items: center;\n\n .info {\n max-width: 520px;\n margin: 0 auto;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-items: center;\n user-select: none;\n }\n\n .content {\n width: 100%;\n margin-top: 24px;\n\n &-values {\n display: grid;\n grid-template-columns: 1fr 1fr 1fr 1fr;\n grid-gap: 24px;\n margin-bottom: 56px;\n\n ", " {\n grid-gap: 16px;\n grid-template-columns: 1fr 1fr;\n }\n }\n\n &-next {\n max-width: 82px;\n margin: 0 auto;\n }\n }\n"])), ScreenWidth_1.mediaQuery.tablet);
21
+ var StyledRegistrationSelection = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n justify-items: center;\n align-items: center;\n\n .info {\n max-width: 520px;\n margin: 0 auto;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-items: center;\n user-select: none;\n }\n\n .content {\n width: 100%;\n margin-top: 24px;\n\n &-values {\n display: grid;\n grid-template-columns: 1fr 1fr 1fr 1fr;\n grid-gap: 24px;\n margin-bottom: 56px;\n\n ", " {\n grid-gap: 16px;\n grid-template-columns: 1fr 1fr;\n }\n }\n\n &-next {\n max-width: 82px;\n margin: 0 auto;\n }\n }\n"], ["\n display: flex;\n flex-direction: column;\n justify-items: center;\n align-items: center;\n\n .info {\n max-width: 520px;\n margin: 0 auto;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-items: center;\n user-select: none;\n }\n\n .content {\n width: 100%;\n margin-top: 24px;\n\n &-values {\n display: grid;\n grid-template-columns: 1fr 1fr 1fr 1fr;\n grid-gap: 24px;\n margin-bottom: 56px;\n\n ", " {\n grid-gap: 16px;\n grid-template-columns: 1fr 1fr;\n }\n }\n\n &-next {\n max-width: 82px;\n margin: 0 auto;\n }\n }\n"])), styles_1.mediaQuery.tablet);
22
22
  // Components
23
23
  var RegistrationSelection = function (_a) {
24
24
  var step = _a.step, title = _a.title, subtitle = _a.subtitle, maxSteps = _a.maxSteps, values = _a.values, selectedNames = _a.selectedNames, saveValue = _a.saveValue, onClick = _a.onClick, onSaveClick = _a.onSaveClick, text = _a.text;
package/dist/components/rewards/FAQ/index.js CHANGED
@@ -42,7 +42,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
42
42
  var react_1 = __importStar(require("react"));
43
43
  var styled_components_1 = __importDefault(require("styled-components"));
44
44
  var _4k_1 = require("@ludo.ninja/ui/build/utils/4k");
45
- var ScreenWidth_1 = require("@/styles/ScreenWidth");
45
+ var styles_1 = require("@ludo.ninja/components/dist/styles");
46
46
  var colors_1 = require("@/styles/colors");
47
47
  var _system_1 = require("@system");
48
48
  var scale_1 = require("@/utils/adaptive/scale");
@@ -53,24 +53,24 @@ var arrow_up_light_svg_1 = __importDefault(require("@/public/rewardsPage/arrow_u
53
53
  var StyledFAQRewards = (0, styled_components_1.default)(_system_1.Flex)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n flex-direction: column;\n justify-content: center;\n align-items: center;\n gap: 24px;\n\n min-height: max-content;\n width: 100%;\n max-width: 720px;\n background: ", ";\n margin-bottom: 80px;\n\n ", " {\n max-width: 588px;\n gap: 4px;\n }\n\n .faq_desc {\n font-family: ", ";\n font-weight: 400;\n font-size: 1.5em;\n line-height: 1.46;\n color: ", ";\n max-height: 0;\n padding-bottom: 0;\n opacity: 0;\n transition: opacity 0.3s ease, max-height 0.12s ease,\n padding-bottom 0.12s ease;\n\n ", " {\n max-width: 575px;\n }\n }\n\n .faq_desc.open {\n max-height: 100%;\n opacity: 1;\n padding-bottom: 24px;\n\n ", " {\n padding-bottom: 16px;\n }\n }\n\n ", " {\n gap: ", ";\n max-width: ", ";\n margin-bottom: ", ";\n\n .faq_desc {\n font-size: ", ";\n }\n\n .faq_desc.open {\n padding-bottom: ", ";\n }\n }\n"], ["\n flex-direction: column;\n justify-content: center;\n align-items: center;\n gap: 24px;\n\n min-height: max-content;\n width: 100%;\n max-width: 720px;\n background: ", ";\n margin-bottom: 80px;\n\n ", " {\n max-width: 588px;\n gap: 4px;\n }\n\n .faq_desc {\n font-family: ", ";\n font-weight: 400;\n font-size: 1.5em;\n line-height: 1.46;\n color: ", ";\n max-height: 0;\n padding-bottom: 0;\n opacity: 0;\n transition: opacity 0.3s ease, max-height 0.12s ease,\n padding-bottom 0.12s ease;\n\n ", " {\n max-width: 575px;\n }\n }\n\n .faq_desc.open {\n max-height: 100%;\n opacity: 1;\n padding-bottom: 24px;\n\n ", " {\n padding-bottom: 16px;\n }\n }\n\n ", " {\n gap: ", ";\n max-width: ", ";\n margin-bottom: ", ";\n\n .faq_desc {\n font-size: ", ";\n }\n\n .faq_desc.open {\n padding-bottom: ", ";\n }\n }\n"])), function (_a) {
54
54
  var theme = _a.theme;
55
55
  return theme.colors.bg;
56
- }, ScreenWidth_1.mediaQuery.maxWidthTablet, vars_1.dmsansFontVarCss.css, function (_a) {
56
+ }, styles_1.mediaQuery.maxWidthTablet, vars_1.dmsansFontVarCss.css, function (_a) {
57
57
  var theme = _a.theme;
58
58
  return theme.colors.grayText;
59
- }, ScreenWidth_1.mediaQuery.maxWidthTablet, ScreenWidth_1.mediaQuery.mobile, ScreenWidth_1.mediaQuery.minWidthFourK, (0, _4k_1.adaptiveValueCalc)(24), (0, _4k_1.adaptiveValueCalc)(720), (0, _4k_1.adaptiveValueCalc)(80), (0, _4k_1.adaptiveValueCalc)(15), (0, _4k_1.adaptiveValueCalc)(24));
60
- var StyledArrowIcon = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n z-index: 1;\n\n transform: ", ";\n transition: all 0.3s ease-out;\n width: 38px;\n height: 38px;\n\n ", " {\n width: ", ";\n height: ", ";\n }\n"], ["\n display: flex;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n z-index: 1;\n\n transform: ", ";\n transition: all 0.3s ease-out;\n width: 38px;\n height: 38px;\n\n ", " {\n width: ", ";\n height: ", ";\n }\n"])), function (props) { return (props.isShow ? 'rotate(0)' : 'rotate(180deg)'); }, ScreenWidth_1.mediaQuery.minWidthFourK, (0, _4k_1.adaptiveValueCalc)(38), (0, _4k_1.adaptiveValueCalc)(38));
61
- var StyledTitleWrapper = (0, styled_components_1.default)(_system_1.Flex)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n align-items: center;\n justify-content: space-between;\n\n width: 100%;\n min-height: 70px;\n\n ", " {\n min-height: 50px;\n margin: 8px 0;\n }\n\n ", " {\n min-height: ", ";\n }\n"], ["\n align-items: center;\n justify-content: space-between;\n\n width: 100%;\n min-height: 70px;\n\n ", " {\n min-height: 50px;\n margin: 8px 0;\n }\n\n ", " {\n min-height: ", ";\n }\n"])), ScreenWidth_1.mediaQuery.mobile, ScreenWidth_1.mediaQuery.minWidthFourK, (0, _4k_1.adaptiveValueCalc)(70));
59
+ }, styles_1.mediaQuery.maxWidthTablet, styles_1.mediaQuery.mobile, styles_1.mediaQuery.minWidthFourK, (0, _4k_1.adaptiveValueCalc)(24), (0, _4k_1.adaptiveValueCalc)(720), (0, _4k_1.adaptiveValueCalc)(80), (0, _4k_1.adaptiveValueCalc)(15), (0, _4k_1.adaptiveValueCalc)(24));
60
+ var StyledArrowIcon = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n z-index: 1;\n\n transform: ", ";\n transition: all 0.3s ease-out;\n width: 38px;\n height: 38px;\n\n ", " {\n width: ", ";\n height: ", ";\n }\n"], ["\n display: flex;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n z-index: 1;\n\n transform: ", ";\n transition: all 0.3s ease-out;\n width: 38px;\n height: 38px;\n\n ", " {\n width: ", ";\n height: ", ";\n }\n"])), function (props) { return (props.isShow ? 'rotate(0)' : 'rotate(180deg)'); }, styles_1.mediaQuery.minWidthFourK, (0, _4k_1.adaptiveValueCalc)(38), (0, _4k_1.adaptiveValueCalc)(38));
61
+ var StyledTitleWrapper = (0, styled_components_1.default)(_system_1.Flex)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n align-items: center;\n justify-content: space-between;\n\n width: 100%;\n min-height: 70px;\n\n ", " {\n min-height: 50px;\n margin: 8px 0;\n }\n\n ", " {\n min-height: ", ";\n }\n"], ["\n align-items: center;\n justify-content: space-between;\n\n width: 100%;\n min-height: 70px;\n\n ", " {\n min-height: 50px;\n margin: 8px 0;\n }\n\n ", " {\n min-height: ", ";\n }\n"])), styles_1.mediaQuery.mobile, styles_1.mediaQuery.minWidthFourK, (0, _4k_1.adaptiveValueCalc)(70));
62
62
  var StyledFlexDivider = (0, styled_components_1.default)(_system_1.Flex)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n align-items: center;\n flex-direction: column;\n\n width: 100%;\n\n :not(:last-child) {\n border-bottom: 1px solid ", ";\n\n ", " {\n border-bottom: ", " solid\n ", ";\n }\n }\n"], ["\n align-items: center;\n flex-direction: column;\n\n width: 100%;\n\n :not(:last-child) {\n border-bottom: 1px solid ", ";\n\n ", " {\n border-bottom: ", " solid\n ", ";\n }\n }\n"])), function (_a) {
63
63
  var theme = _a.theme;
64
64
  return theme.colors.blankProgressBar;
65
- }, ScreenWidth_1.mediaQuery.minWidthFourK, (0, _4k_1.adaptiveValueCalc)(1), function (_a) {
65
+ }, styles_1.mediaQuery.minWidthFourK, (0, _4k_1.adaptiveValueCalc)(1), function (_a) {
66
66
  var theme = _a.theme;
67
67
  return theme.colors.blankProgressBar;
68
68
  });
69
69
  var TitleFAQ = (0, styled_components_1.default)(_system_1.H3)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n font-family: ", ";\n\n font-weight: 600;\n font-size: 2.4em;\n line-height: 1.5;\n text-align: center;\n color: ", ";\n\n ", " {\n font-size: 2.2em;\n line-height: 1.27;\n }\n\n ", " {\n font-size: ", ";\n }\n"], ["\n font-family: ", ";\n\n font-weight: 600;\n font-size: 2.4em;\n line-height: 1.5;\n text-align: center;\n color: ", ";\n\n ", " {\n font-size: 2.2em;\n line-height: 1.27;\n }\n\n ", " {\n font-size: ", ";\n }\n"])), vars_1.poppinsFontVarCss.css, function (_a) {
70
70
  var theme = _a.theme;
71
71
  return theme.colors.naturalWhite;
72
- }, ScreenWidth_1.mediaQuery.mobile, ScreenWidth_1.mediaQuery.minWidthFourK, (0, _4k_1.adaptiveValueCalc)(15));
73
- var AccordionTitle = (0, styled_components_1.default)(_system_1.H5)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n color: ", ";\n\n font-family: ", ";\n font-weight: 500;\n font-size: 1.5em;\n line-height: 1.46;\n text-align: left;\n\n ", " {\n font-size: ", ";\n }\n"], ["\n color: ", ";\n\n font-family: ", ";\n font-weight: 500;\n font-size: 1.5em;\n line-height: 1.46;\n text-align: left;\n\n ", " {\n font-size: ", ";\n }\n"])), colors_1.WhiteColor, vars_1.poppinsFontVarCss.css, ScreenWidth_1.mediaQuery.minWidthFourK, (0, _4k_1.adaptiveValueCalc)(15));
72
+ }, styles_1.mediaQuery.mobile, styles_1.mediaQuery.minWidthFourK, (0, _4k_1.adaptiveValueCalc)(15));
73
+ var AccordionTitle = (0, styled_components_1.default)(_system_1.H5)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n color: ", ";\n\n font-family: ", ";\n font-weight: 500;\n font-size: 1.5em;\n line-height: 1.46;\n text-align: left;\n\n ", " {\n font-size: ", ";\n }\n"], ["\n color: ", ";\n\n font-family: ", ";\n font-weight: 500;\n font-size: 1.5em;\n line-height: 1.46;\n text-align: left;\n\n ", " {\n font-size: ", ";\n }\n"])), colors_1.WhiteColor, vars_1.poppinsFontVarCss.css, styles_1.mediaQuery.minWidthFourK, (0, _4k_1.adaptiveValueCalc)(15));
74
74
  var FAQ_ITEMS = [
75
75
  {
76
76
  id: 1,
package/dist/components/rewards/clarifications/index.js CHANGED
@@ -8,7 +8,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
8
8
  };
9
9
  Object.defineProperty(exports, "__esModule", { value: true });
10
10
  var styled_components_1 = __importDefault(require("styled-components"));
11
- var ScreenWidth_1 = require("@/styles/ScreenWidth");
11
+ var styles_1 = require("@ludo.ninja/components/dist/styles");
12
12
  var colors_1 = require("@/styles/colors");
13
13
  var _system_1 = require("@system");
14
14
  var vars_1 = require("@/fonts/vars");
@@ -16,13 +16,13 @@ var vars_1 = require("@/fonts/vars");
16
16
  var StyledClarifications = (0, styled_components_1.default)(_system_1.Flex)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n flex-direction: column;\n justify-content: center;\n align-items: center;\n gap: 24px;\n\n min-width: 720px;\n min-height: 260px;\n max-width: max-content;\n margin-bottom: 80px;\n background: ", ";\n\n ", " {\n min-width: 588px;\n }\n\n ", " {\n min-width: 100%;\n margin-bottom: 56px;\n }\n\n .clar_desc {\n font-family: ", ";\n font-weight: 400;\n font-size: 1.5em;\n line-height: 1.46;\n\n color: ", ";\n margin: 0 auto;\n text-align: center;\n\n ", " {\n max-width: 473px;\n }\n\n ", " {\n font-size: 1.4em;\n line-height: 1.28;\n }\n }\n\n .goal_desc,\n .goal_exp {\n font-family: ", ";\n\n font-weight: 500;\n font-size: 1.5em;\n line-height: 1.46;\n color: ", ";\n\n ", " {\n font-size: 1.4em;\n line-height: 1.42;\n }\n }\n\n .goal_desc {\n ", " {\n max-width: 170px;\n }\n }\n"], ["\n flex-direction: column;\n justify-content: center;\n align-items: center;\n gap: 24px;\n\n min-width: 720px;\n min-height: 260px;\n max-width: max-content;\n margin-bottom: 80px;\n background: ", ";\n\n ", " {\n min-width: 588px;\n }\n\n ", " {\n min-width: 100%;\n margin-bottom: 56px;\n }\n\n .clar_desc {\n font-family: ", ";\n font-weight: 400;\n font-size: 1.5em;\n line-height: 1.46;\n\n color: ", ";\n margin: 0 auto;\n text-align: center;\n\n ", " {\n max-width: 473px;\n }\n\n ", " {\n font-size: 1.4em;\n line-height: 1.28;\n }\n }\n\n .goal_desc,\n .goal_exp {\n font-family: ", ";\n\n font-weight: 500;\n font-size: 1.5em;\n line-height: 1.46;\n color: ", ";\n\n ", " {\n font-size: 1.4em;\n line-height: 1.42;\n }\n }\n\n .goal_desc {\n ", " {\n max-width: 170px;\n }\n }\n"])), function (_a) {
17
17
  var theme = _a.theme;
18
18
  return theme.colors.bg;
19
- }, ScreenWidth_1.mediaQuery.maxWidthTablet, ScreenWidth_1.mediaQuery.mobile, vars_1.dmsansFontVarCss.css, function (_a) {
19
+ }, styles_1.mediaQuery.maxWidthTablet, styles_1.mediaQuery.mobile, vars_1.dmsansFontVarCss.css, function (_a) {
20
20
  var theme = _a.theme;
21
21
  return theme.colors.grayText;
22
- }, ScreenWidth_1.mediaQuery.maxWidthTablet, ScreenWidth_1.mediaQuery.mobile, vars_1.poppinsFontVarCss.css, function (_a) {
22
+ }, styles_1.mediaQuery.maxWidthTablet, styles_1.mediaQuery.mobile, vars_1.poppinsFontVarCss.css, function (_a) {
23
23
  var theme = _a.theme;
24
24
  return theme.colors.naturalWhite;
25
- }, ScreenWidth_1.mediaQuery.mobile, ScreenWidth_1.mediaQuery.mobile);
25
+ }, styles_1.mediaQuery.mobile, styles_1.mediaQuery.mobile);
26
26
  var StyledFlex = (0, styled_components_1.default)(_system_1.Flex)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n width: 100%;\n justify-content: space-between;\n padding: 16px 0;\n align-items: center;\n\n :not(:last-child) {\n border-bottom: 1px solid ", ";\n }\n"], ["\n width: 100%;\n justify-content: space-between;\n padding: 16px 0;\n align-items: center;\n\n :not(:last-child) {\n border-bottom: 1px solid ", ";\n }\n"])), function (_a) {
27
27
  var theme = _a.theme;
28
28
  return theme.colors.blankProgressBar;
package/dist/components/rewards/logoBottom/index.js CHANGED
@@ -8,13 +8,13 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
8
8
  };
9
9
  Object.defineProperty(exports, "__esModule", { value: true });
10
10
  var styled_components_1 = __importDefault(require("styled-components"));
11
- var ScreenWidth_1 = require("@/styles/ScreenWidth");
11
+ var styles_1 = require("@ludo.ninja/components/dist/styles");
12
12
  var _system_1 = require("@system");
13
13
  var scale_1 = require("@/utils/adaptive/scale");
14
14
  var screen_1 = require("@/utils/screen");
15
15
  var main_logo_dark_svg_1 = __importDefault(require("@/public/logo/main_logo_dark.svg"));
16
16
  // Styles
17
- var StyledBottomLogo = (0, styled_components_1.default)(_system_1.Flex)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n align-items: center;\n justify-content: center;\n\n width: 100%;\n\n ", " {\n margin-bottom: 28px;\n }\n\n ", " {\n margin-bottom: 0;\n }\n\n .bottom_logo {\n transform: scale(0.8);\n }\n"], ["\n align-items: center;\n justify-content: center;\n\n width: 100%;\n\n ", " {\n margin-bottom: 28px;\n }\n\n ", " {\n margin-bottom: 0;\n }\n\n .bottom_logo {\n transform: scale(0.8);\n }\n"])), ScreenWidth_1.mediaQuery.maxWidthTablet, ScreenWidth_1.mediaQuery.mobile);
17
+ var StyledBottomLogo = (0, styled_components_1.default)(_system_1.Flex)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n align-items: center;\n justify-content: center;\n\n width: 100%;\n\n ", " {\n margin-bottom: 28px;\n }\n\n ", " {\n margin-bottom: 0;\n }\n\n .bottom_logo {\n transform: scale(0.8);\n }\n"], ["\n align-items: center;\n justify-content: center;\n\n width: 100%;\n\n ", " {\n margin-bottom: 28px;\n }\n\n ", " {\n margin-bottom: 0;\n }\n\n .bottom_logo {\n transform: scale(0.8);\n }\n"])), styles_1.mediaQuery.maxWidthTablet, styles_1.mediaQuery.mobile);
18
18
  // Component
19
19
  var BottomLogo = function () {
20
20
  var windowDimensions = (0, screen_1.useWindowDimensionsWithServerInitial)().windowDimensions;
package/dist/components/rewards/prograssBar/index.js CHANGED
@@ -9,7 +9,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
9
9
  Object.defineProperty(exports, "__esModule", { value: true });
10
10
  var styled_components_1 = __importDefault(require("styled-components"));
11
11
  var _4k_1 = require("@ludo.ninja/ui/build/utils/4k");
12
- var ScreenWidth_1 = require("@/styles/ScreenWidth");
12
+ var styles_1 = require("@ludo.ninja/components/dist/styles");
13
13
  var colors_1 = require("@/styles/colors");
14
14
  // Styles
15
15
  var StyledProgress = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n width: 100%;\n height: ", ";\n background-color: ", ";\n border-radius: 100px;\n\n .progress_fill {\n width: ", ";\n //width: 50%;\n height: 100%;\n background-color: ", ";\n border-radius: 100px;\n transition: all 1500ms;\n }\n ", " {\n height: ", ";\n border-radius: ", ";\n\n .progress_fill {\n border-radius: ", ";\n }\n }\n"], ["\n width: 100%;\n height: ", ";\n background-color: ", ";\n border-radius: 100px;\n\n .progress_fill {\n width: ", ";\n //width: 50%;\n height: 100%;\n background-color: ", ";\n border-radius: 100px;\n transition: all 1500ms;\n }\n ", " {\n height: ", ";\n border-radius: ", ";\n\n .progress_fill {\n border-radius: ", ";\n }\n }\n"])), function (props) { return (props.height ? "".concat(props.height, "px") : '12px'); }, function (_a) {
@@ -17,7 +17,7 @@ var StyledProgress = styled_components_1.default.div(templateObject_1 || (templa
17
17
  return theme.colors.blankProgressBar;
18
18
  }, function (props) { return (props.percent ? "".concat(props.percent, "%") : '0%'); }, function (props) {
19
19
  return props.isForUser ? colors_1.ExpUserProgressFill : colors_1.ExpTaskProgressFill;
20
- }, ScreenWidth_1.mediaQuery.minWidthFourK, function (props) {
20
+ }, styles_1.mediaQuery.minWidthFourK, function (props) {
21
21
  return props.height ? (0, _4k_1.adaptiveValueCalc)(props.height) : (0, _4k_1.adaptiveValueCalc)(12);
22
22
  }, (0, _4k_1.adaptiveValueCalc)(100), (0, _4k_1.adaptiveValueCalc)(100));
23
23
  // Component
package/dist/components/rewards/rewardsButton/index.js CHANGED
@@ -11,7 +11,7 @@ var styled_components_1 = __importDefault(require("styled-components"));
11
11
  var vars_1 = require("@ludo.ninja/ui/build/fonts/vars");
12
12
  var colors_1 = require("@ludo.ninja/ui/build/styles/colors");
13
13
  var _4k_1 = require("@ludo.ninja/ui/build/utils/4k");
14
- var ScreenWidth_1 = require("@/styles/ScreenWidth");
15
- var RewardsButton = styled_components_1.default.button(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n display: flex;\n padding: 9px 24px;\n justify-content: center;\n align-items: center;\n gap: 4px;\n\n border-radius: 30px;\n border: 1px solid ", ";\n\n color: ", ";\n text-align: center;\n\n font-family: ", ";\n font-size: 15px;\n font-style: normal;\n font-weight: 500;\n line-height: 22px;\n\n white-space: nowrap;\n background: transparent;\n transition: 0.2s all ease-in;\n user-select: none;\n cursor: pointer;\n\n @media (hover: hover) {\n &:hover {\n background: #1b1c27;\n box-shadow: 0 6px 15px 0 rgba(0, 0, 0, 0.1);\n transition: 0.2s all ease-in-out;\n }\n }\n\n &:disabled {\n border: 1px solid #00622d;\n color: ", ";\n transition: 0.2s all ease-in-out;\n\n &:hover {\n background: transparent;\n }\n }\n\n ", " {\n padding: ", " ", ";\n gap: ", ";\n\n border-radius: ", ";\n border: ", " solid ", ";\n\n font-size: ", ";\n line-height: ", ";\n\n @media (hover: hover) {\n &:hover {\n box-shadow: 0 ", " ", " 0\n rgba(0, 0, 0, 0.1);\n }\n }\n\n &:disabled {\n border: ", " solid #00622d;\n }\n }\n"], ["\n display: flex;\n padding: 9px 24px;\n justify-content: center;\n align-items: center;\n gap: 4px;\n\n border-radius: 30px;\n border: 1px solid ", ";\n\n color: ", ";\n text-align: center;\n\n font-family: ", ";\n font-size: 15px;\n font-style: normal;\n font-weight: 500;\n line-height: 22px;\n\n white-space: nowrap;\n background: transparent;\n transition: 0.2s all ease-in;\n user-select: none;\n cursor: pointer;\n\n @media (hover: hover) {\n &:hover {\n background: #1b1c27;\n box-shadow: 0 6px 15px 0 rgba(0, 0, 0, 0.1);\n transition: 0.2s all ease-in-out;\n }\n }\n\n &:disabled {\n border: 1px solid #00622d;\n color: ", ";\n transition: 0.2s all ease-in-out;\n\n &:hover {\n background: transparent;\n }\n }\n\n ", " {\n padding: ", " ", ";\n gap: ", ";\n\n border-radius: ", ";\n border: ", " solid ", ";\n\n font-size: ", ";\n line-height: ", ";\n\n @media (hover: hover) {\n &:hover {\n box-shadow: 0 ", " ", " 0\n rgba(0, 0, 0, 0.1);\n }\n }\n\n &:disabled {\n border: ", " solid #00622d;\n }\n }\n"])), colors_1.ExpTaskProgressFill, colors_1.WhiteColor, vars_1.poppinsFontVarCss.css, colors_1.TextGray2Color, ScreenWidth_1.mediaQuery.minWidthFourK, (0, _4k_1.adaptiveValueCalc)(9), (0, _4k_1.adaptiveValueCalc)(24), (0, _4k_1.adaptiveValueCalc)(4), (0, _4k_1.adaptiveValueCalc)(30), (0, _4k_1.adaptiveValueCalc)(1), colors_1.ExpTaskProgressFill, (0, _4k_1.adaptiveValueCalc)(15), (0, _4k_1.adaptiveValueCalc)(22), (0, _4k_1.adaptiveValueCalc)(6), (0, _4k_1.adaptiveValueCalc)(15), (0, _4k_1.adaptiveValueCalc)(1));
14
+ var styles_1 = require("@ludo.ninja/components/dist/styles");
15
+ var RewardsButton = styled_components_1.default.button(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n display: flex;\n padding: 9px 24px;\n justify-content: center;\n align-items: center;\n gap: 4px;\n\n border-radius: 30px;\n border: 1px solid ", ";\n\n color: ", ";\n text-align: center;\n\n font-family: ", ";\n font-size: 15px;\n font-style: normal;\n font-weight: 500;\n line-height: 22px;\n\n white-space: nowrap;\n background: transparent;\n transition: 0.2s all ease-in;\n user-select: none;\n cursor: pointer;\n\n @media (hover: hover) {\n &:hover {\n background: #1b1c27;\n box-shadow: 0 6px 15px 0 rgba(0, 0, 0, 0.1);\n transition: 0.2s all ease-in-out;\n }\n }\n\n &:disabled {\n border: 1px solid #00622d;\n color: ", ";\n transition: 0.2s all ease-in-out;\n\n &:hover {\n background: transparent;\n }\n }\n\n ", " {\n padding: ", " ", ";\n gap: ", ";\n\n border-radius: ", ";\n border: ", " solid ", ";\n\n font-size: ", ";\n line-height: ", ";\n\n @media (hover: hover) {\n &:hover {\n box-shadow: 0 ", " ", " 0\n rgba(0, 0, 0, 0.1);\n }\n }\n\n &:disabled {\n border: ", " solid #00622d;\n }\n }\n"], ["\n display: flex;\n padding: 9px 24px;\n justify-content: center;\n align-items: center;\n gap: 4px;\n\n border-radius: 30px;\n border: 1px solid ", ";\n\n color: ", ";\n text-align: center;\n\n font-family: ", ";\n font-size: 15px;\n font-style: normal;\n font-weight: 500;\n line-height: 22px;\n\n white-space: nowrap;\n background: transparent;\n transition: 0.2s all ease-in;\n user-select: none;\n cursor: pointer;\n\n @media (hover: hover) {\n &:hover {\n background: #1b1c27;\n box-shadow: 0 6px 15px 0 rgba(0, 0, 0, 0.1);\n transition: 0.2s all ease-in-out;\n }\n }\n\n &:disabled {\n border: 1px solid #00622d;\n color: ", ";\n transition: 0.2s all ease-in-out;\n\n &:hover {\n background: transparent;\n }\n }\n\n ", " {\n padding: ", " ", ";\n gap: ", ";\n\n border-radius: ", ";\n border: ", " solid ", ";\n\n font-size: ", ";\n line-height: ", ";\n\n @media (hover: hover) {\n &:hover {\n box-shadow: 0 ", " ", " 0\n rgba(0, 0, 0, 0.1);\n }\n }\n\n &:disabled {\n border: ", " solid #00622d;\n }\n }\n"])), colors_1.ExpTaskProgressFill, colors_1.WhiteColor, vars_1.poppinsFontVarCss.css, colors_1.TextGray2Color, styles_1.mediaQuery.minWidthFourK, (0, _4k_1.adaptiveValueCalc)(9), (0, _4k_1.adaptiveValueCalc)(24), (0, _4k_1.adaptiveValueCalc)(4), (0, _4k_1.adaptiveValueCalc)(30), (0, _4k_1.adaptiveValueCalc)(1), colors_1.ExpTaskProgressFill, (0, _4k_1.adaptiveValueCalc)(15), (0, _4k_1.adaptiveValueCalc)(22), (0, _4k_1.adaptiveValueCalc)(6), (0, _4k_1.adaptiveValueCalc)(15), (0, _4k_1.adaptiveValueCalc)(1));
16
16
  exports.default = RewardsButton;
17
17
  var templateObject_1;
package/dist/components/rewards/seasonBanner/index.js CHANGED
@@ -9,15 +9,15 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
9
9
  Object.defineProperty(exports, "__esModule", { value: true });
10
10
  var styled_components_1 = __importDefault(require("styled-components"));
11
11
  var _4k_1 = require("@ludo.ninja/ui/build/utils/4k");
12
- var ScreenWidth_1 = require("@/styles/ScreenWidth");
12
+ var styles_1 = require("@ludo.ninja/components/dist/styles");
13
13
  var _system_1 = require("@system");
14
14
  var vars_1 = require("@/fonts/vars");
15
15
  // Styles
16
- var StyledSeasons = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n display: flex;\n justify-content: center;\n align-items: center;\n\n min-width: 896px;\n min-height: 215px;\n max-width: max-content;\n margin-bottom: 80px;\n border-radius: 16px;\n background: url('/rewardsPage/banner_seasons.svg') no-repeat;\n background-size: cover;\n background-position: center;\n box-shadow: 0px 1px 0px 0px #ffffff1a inset;\n\n ", " {\n min-width: 628px;\n min-height: 178px;\n background-size: 147%;\n margin-bottom: 91px;\n }\n\n ", " {\n min-width: 320px;\n min-height: 124px;\n background-size: 147%;\n margin-bottom: 56px;\n }\n\n ", " {\n min-width: ", ";\n min-height: ", ";\n margin-bottom: ", ";\n border-radius: ", ";\n box-shadow: 0px ", " 0px 0px #ffffff1a inset;\n }\n"], ["\n display: flex;\n justify-content: center;\n align-items: center;\n\n min-width: 896px;\n min-height: 215px;\n max-width: max-content;\n margin-bottom: 80px;\n border-radius: 16px;\n background: url('/rewardsPage/banner_seasons.svg') no-repeat;\n background-size: cover;\n background-position: center;\n box-shadow: 0px 1px 0px 0px #ffffff1a inset;\n\n ", " {\n min-width: 628px;\n min-height: 178px;\n background-size: 147%;\n margin-bottom: 91px;\n }\n\n ", " {\n min-width: 320px;\n min-height: 124px;\n background-size: 147%;\n margin-bottom: 56px;\n }\n\n ", " {\n min-width: ", ";\n min-height: ", ";\n margin-bottom: ", ";\n border-radius: ", ";\n box-shadow: 0px ", " 0px 0px #ffffff1a inset;\n }\n"])), ScreenWidth_1.mediaQuery.maxWidthTablet, ScreenWidth_1.mediaQuery.mobile, ScreenWidth_1.mediaQuery.minWidthFourK, (0, _4k_1.adaptiveValueCalc)(896), (0, _4k_1.adaptiveValueCalc)(215), (0, _4k_1.adaptiveValueCalc)(80), (0, _4k_1.adaptiveValueCalc)(16), (0, _4k_1.adaptiveValueCalc)(1));
16
+ var StyledSeasons = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n display: flex;\n justify-content: center;\n align-items: center;\n\n min-width: 896px;\n min-height: 215px;\n max-width: max-content;\n margin-bottom: 80px;\n border-radius: 16px;\n background: url('/rewardsPage/banner_seasons.svg') no-repeat;\n background-size: cover;\n background-position: center;\n box-shadow: 0px 1px 0px 0px #ffffff1a inset;\n\n ", " {\n min-width: 628px;\n min-height: 178px;\n background-size: 147%;\n margin-bottom: 91px;\n }\n\n ", " {\n min-width: 320px;\n min-height: 124px;\n background-size: 147%;\n margin-bottom: 56px;\n }\n\n ", " {\n min-width: ", ";\n min-height: ", ";\n margin-bottom: ", ";\n border-radius: ", ";\n box-shadow: 0px ", " 0px 0px #ffffff1a inset;\n }\n"], ["\n display: flex;\n justify-content: center;\n align-items: center;\n\n min-width: 896px;\n min-height: 215px;\n max-width: max-content;\n margin-bottom: 80px;\n border-radius: 16px;\n background: url('/rewardsPage/banner_seasons.svg') no-repeat;\n background-size: cover;\n background-position: center;\n box-shadow: 0px 1px 0px 0px #ffffff1a inset;\n\n ", " {\n min-width: 628px;\n min-height: 178px;\n background-size: 147%;\n margin-bottom: 91px;\n }\n\n ", " {\n min-width: 320px;\n min-height: 124px;\n background-size: 147%;\n margin-bottom: 56px;\n }\n\n ", " {\n min-width: ", ";\n min-height: ", ";\n margin-bottom: ", ";\n border-radius: ", ";\n box-shadow: 0px ", " 0px 0px #ffffff1a inset;\n }\n"])), styles_1.mediaQuery.maxWidthTablet, styles_1.mediaQuery.mobile, styles_1.mediaQuery.minWidthFourK, (0, _4k_1.adaptiveValueCalc)(896), (0, _4k_1.adaptiveValueCalc)(215), (0, _4k_1.adaptiveValueCalc)(80), (0, _4k_1.adaptiveValueCalc)(16), (0, _4k_1.adaptiveValueCalc)(1));
17
17
  var SeasonTitle = (0, styled_components_1.default)(_system_1.H2)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n font-family: ", ";\n font-weight: 700;\n font-size: 3.6em;\n line-height: 1.44;\n text-align: center;\n color: ", ";\n\n ", " {\n font-weight: 600;\n font-size: 1.8em;\n line-height: 1.33;\n }\n\n ", " {\n font-size: ", ";\n }\n"], ["\n font-family: ", ";\n font-weight: 700;\n font-size: 3.6em;\n line-height: 1.44;\n text-align: center;\n color: ", ";\n\n ", " {\n font-weight: 600;\n font-size: 1.8em;\n line-height: 1.33;\n }\n\n ", " {\n font-size: ", ";\n }\n"])), vars_1.poppinsFontVarCss.css, function (_a) {
18
18
  var theme = _a.theme;
19
19
  return theme.colors.naturalWhite;
20
- }, ScreenWidth_1.mediaQuery.mobile, ScreenWidth_1.mediaQuery.minWidthFourK, (0, _4k_1.adaptiveValueCalc)(36));
20
+ }, styles_1.mediaQuery.mobile, styles_1.mediaQuery.minWidthFourK, (0, _4k_1.adaptiveValueCalc)(36));
21
21
  // Component
22
22
  var SeasonsTab = function (_a) {
23
23
  var title = _a.title;