@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.
- package/dist/components/CreationCard/CardHead.js +9 -9
- package/dist/components/CreationCard/index.d.ts +1 -1
- package/dist/components/CreationCard/index.js +5 -8
- package/dist/components/deleteDialog/index.js +13 -15
- package/dist/components/filters/index.js +4 -5
- package/dist/components/forms/form/index.js +3 -3
- package/dist/components/forms/formsNavigation/index.js +4 -5
- package/dist/components/forms/formsTemplate/index.js +6 -6
- package/dist/components/headers/components/headerExperienceLabel/index.js +6 -6
- package/dist/components/headers/components/headerUserPic/index.js +4 -4
- package/dist/components/inviteCodesPage/wrappers/resumeCodes/index.js +9 -14
- package/dist/components/linkTabs/index.js +2 -3
- package/dist/components/linkTabs/linkTab/index.js +4 -6
- package/dist/components/navigation/index.js +5 -5
- package/dist/components/profile/MultiversXAudit/MultiversXAudit.js +5 -5
- package/dist/components/profile/aboutText/index.js +16 -21
- package/dist/components/profile/addToGalleryBtns/index.js +9 -12
- package/dist/components/profile/info/index.js +3 -3
- package/dist/components/profile/interests/index.js +2 -2
- package/dist/components/profile/profileUserCards/profileUserCard/index.js +2 -2
- package/dist/components/profile/rank/index.js +3 -3
- package/dist/components/profile/stats/index.js +2 -2
- package/dist/components/profile/wallets/index.js +2 -2
- package/dist/components/registrationPage/registrationSelection/index.js +2 -2
- package/dist/components/rewards/FAQ/index.js +8 -8
- package/dist/components/rewards/clarifications/index.js +4 -4
- package/dist/components/rewards/logoBottom/index.js +2 -2
- package/dist/components/rewards/prograssBar/index.js +2 -2
- package/dist/components/rewards/rewardsButton/index.js +2 -2
- package/dist/components/rewards/seasonBanner/index.js +3 -3
- package/dist/components/rewards/taskExpTab/index.js +7 -7
- package/dist/components/rewards/tasksGrid/index.js +4 -4
- package/dist/components/rewards/userExp/index.js +8 -8
- package/dist/components/search/SearchInputContainer.js +4 -4
- package/dist/components/search/index.js +4 -4
- package/dist/components/search/searchCloseMoreButtons/index.js +3 -3
- package/dist/components/search/searchResultCaption/index.js +2 -2
- package/dist/components/search/searchSimpleInput/index.js +5 -5
- package/dist/components/search/searchSuggestions/index.js +2 -2
- package/dist/components/search/searchSuggestions/searchSuggestionsCaption/index.js +2 -2
- package/dist/components/search/searchSuggestions/searchSuggestionsFooter/index.js +2 -2
- package/dist/components/search/searchSuggestions/searchSuggestionsItem/index.js +2 -2
- package/dist/components/search/searchSuggestions/searchSuggestionsItem/searchSuggestionsItemSkeleton/index.js +3 -3
- package/dist/components/search/searchSuggestions/searchSuggestionsNotFound/index.js +2 -2
- package/dist/components/shareDialog/index.js +3 -3
- package/dist/components/sidebar/index.js +5 -5
- package/dist/components/sidebar/sidebarInviteCodeLabel/index.js +2 -2
- package/dist/components/toTopBtn/index.js +2 -2
- package/dist/layouts/custom/styles.js +3 -3
- package/dist/modules/gallery/ui/Description.js +2 -2
- package/dist/modules/gallery/ui/PlaceholderItemsGallery.js +2 -2
- package/dist/modules/gallery/ui/STopSections.js +2 -2
- package/dist/modules/gallery/ui/chooseGalleryItems/chooseGalleryItem/index.js +2 -2
- package/dist/modules/gallery/ui/chooseGalleryItems/index.js +2 -2
- package/dist/modules/gallery/ui/createGalleryForm/index.js +2 -2
- package/dist/modules/gallery/ui/editGalleryForm/index.js +2 -2
- package/dist/modules/gallery/ui/itemsPreview/index.js +2 -2
- package/dist/modules/sessionScroll/useVirtuosoInitialScroll.js +5 -5
- package/dist/system/Cards/CardCheckbox/index.js +2 -3
- package/dist/system/Cards/CardContent/CardCategory/index.js +2 -3
- package/dist/system/Cards/CardContent/CardShowMore/index.js +2 -4
- package/dist/system/Cards/CardContent/index.js +2 -4
- package/dist/system/Cards/CardHeadIcons/index.js +2 -2
- package/dist/system/Cards/CardRank/index.js +4 -4
- package/dist/system/Cards/CardsGrid/index.js +2 -2
- package/dist/system/Cards/MultiMediaCard/index.js +2 -5
- package/dist/system/Cards/RegularCard/index.js +2 -5
- package/dist/system/Cards/Styles/Head.js +2 -2
- package/dist/system/Cards/Styles/Headicons.js +2 -3
- package/dist/system/Cards/Styles/Image.js +2 -2
- package/dist/system/Cards/Styles/Likes.js +3 -4
- package/dist/system/Cards/Styles/MultiHead.js +2 -2
- package/dist/system/CardsHolderWithSkeleton/CardsHolder/CardsSkeleton/index.js +4 -4
- package/dist/system/CardsHolderWithSkeleton/CardsHolder/index.js +2 -2
- package/dist/system/CardsHolderWithSkeleton/CardsHolderLoader/index.js +5 -7
- package/dist/system/Forms/DatePicker/index.js +2 -2
- package/dist/system/Forms/ErrorLabel/index.js +2 -2
- package/dist/system/Forms/Input/index.js +2 -2
- package/dist/system/Forms/Selects/DesktopSelect/index.js +7 -9
- package/dist/system/Forms/TextArea/index.js +2 -2
- package/dist/system/Img/Userpic/index.js +6 -7
- package/dist/system/Labels/ExperienceLabel/index.js +5 -7
- package/dist/system/Modals/Modal/index.js +4 -6
- package/dist/system/Modals/ModalSidebar/index.js +4 -6
- package/dist/system/ShareIconResize.js +5 -6
- package/dist/system/Tabs/TabNavLink/index.d.ts +1 -1
- package/dist/system/Tabs/TabNavLink/index.js +4 -5
- package/dist/tsconfig.tsbuildinfo +1 -1
- package/dist/utils/adaptive/check4k.js +2 -2
- package/package.json +1 -1
|
@@ -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
|
|
12
|
+
var styles_1 = require("@ludo.ninja/components/dist/styles");
|
|
13
13
|
var boxTransform_1 = __importDefault(require("@/styles/mixins/boxTransform"));
|
|
14
14
|
var rewardsButton_1 = __importDefault(require("@/components/rewards/rewardsButton"));
|
|
15
15
|
var _system_1 = require("@system");
|
|
@@ -19,23 +19,23 @@ var prograssBar_1 = __importDefault(require("../prograssBar"));
|
|
|
19
19
|
var StyledTaskExpTab = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n ", ";\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n align-items: center;\n gap: 8px;\n\n min-width: 528px;\n min-height: 214px;\n max-width: max-content;\n padding: 24px 32px;\n border-radius: 8px;\n background: ", ";\n\n ", " {\n min-width: 100%;\n min-height: 206px;\n }\n\n ", " {\n min-width: 320px;\n min-height: 182px;\n padding: 20px 24px;\n }\n\n .erned_exp {\n font-family: ", ";\n font-weight: 600;\n font-size: 1.8em;\n line-height: 1.44;\n color: ", ";\n\n ", " {\n font-size: 1.6em;\n line-height: 1.37;\n }\n }\n\n .exp_logo {\n width: 24px;\n height: 24px;\n\n ", " {\n width: 20px;\n height: 20px;\n }\n }\n\n .task_content {\n width: 100%;\n flex-grow: 1;\n flex-direction: column;\n gap: 24px;\n }\n\n .task_desc {\n font-family: ", ";\n width: 100%;\n text-align: left;\n\n font-weight: 400;\n font-size: 1.5em;\n line-height: 1.46;\n color: ", ";\n\n ", " {\n font-size: 1.4em;\n line-height: 1.28;\n }\n }\n\n .task_progress {\n display: flex;\n gap: 8px;\n width: 100%;\n }\n\n .task_part_complete,\n .task_part_requried {\n font-family: ", ";\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 .task_part_requried {\n color: ", ";\n }\n\n .gap_8 {\n gap: 8px;\n }\n\n ", " {\n .gap_8 {\n gap: ", ";\n }\n\n gap: ", ";\n\n min-width: ", ";\n min-height: ", ";\n padding: ", " ", ";\n border-radius: ", ";\n\n .erned_exp {\n font-size: ", ";\n }\n\n .exp_logo {\n width: ", ";\n height: ", ";\n }\n\n .task_content {\n gap: ", ";\n }\n\n .task_desc {\n font-size: ", ";\n }\n\n .task_progress {\n gap: ", ";\n }\n\n .task_part_complete,\n .task_part_requried {\n font-size: ", ";\n }\n }\n"], ["\n ", ";\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n align-items: center;\n gap: 8px;\n\n min-width: 528px;\n min-height: 214px;\n max-width: max-content;\n padding: 24px 32px;\n border-radius: 8px;\n background: ", ";\n\n ", " {\n min-width: 100%;\n min-height: 206px;\n }\n\n ", " {\n min-width: 320px;\n min-height: 182px;\n padding: 20px 24px;\n }\n\n .erned_exp {\n font-family: ", ";\n font-weight: 600;\n font-size: 1.8em;\n line-height: 1.44;\n color: ", ";\n\n ", " {\n font-size: 1.6em;\n line-height: 1.37;\n }\n }\n\n .exp_logo {\n width: 24px;\n height: 24px;\n\n ", " {\n width: 20px;\n height: 20px;\n }\n }\n\n .task_content {\n width: 100%;\n flex-grow: 1;\n flex-direction: column;\n gap: 24px;\n }\n\n .task_desc {\n font-family: ", ";\n width: 100%;\n text-align: left;\n\n font-weight: 400;\n font-size: 1.5em;\n line-height: 1.46;\n color: ", ";\n\n ", " {\n font-size: 1.4em;\n line-height: 1.28;\n }\n }\n\n .task_progress {\n display: flex;\n gap: 8px;\n width: 100%;\n }\n\n .task_part_complete,\n .task_part_requried {\n font-family: ", ";\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 .task_part_requried {\n color: ", ";\n }\n\n .gap_8 {\n gap: 8px;\n }\n\n ", " {\n .gap_8 {\n gap: ", ";\n }\n\n gap: ", ";\n\n min-width: ", ";\n min-height: ", ";\n padding: ", " ", ";\n border-radius: ", ";\n\n .erned_exp {\n font-size: ", ";\n }\n\n .exp_logo {\n width: ", ";\n height: ", ";\n }\n\n .task_content {\n gap: ", ";\n }\n\n .task_desc {\n font-size: ", ";\n }\n\n .task_progress {\n gap: ", ";\n }\n\n .task_part_complete,\n .task_part_requried {\n font-size: ", ";\n }\n }\n"])), boxTransform_1.default, function (_a) {
|
|
20
20
|
var theme = _a.theme;
|
|
21
21
|
return theme.colors.secondaryBg;
|
|
22
|
-
},
|
|
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.successTaskProgressBar;
|
|
25
|
-
},
|
|
25
|
+
}, styles_1.mediaQuery.mobile, styles_1.mediaQuery.mobile, vars_1.dmsansFontVarCss.css, function (_a) {
|
|
26
26
|
var theme = _a.theme;
|
|
27
27
|
return theme.colors.grayText;
|
|
28
|
-
},
|
|
28
|
+
}, styles_1.mediaQuery.mobile, vars_1.poppinsFontVarCss.css, function (_a) {
|
|
29
29
|
var theme = _a.theme;
|
|
30
30
|
return theme.colors.naturalWhite;
|
|
31
|
-
},
|
|
31
|
+
}, styles_1.mediaQuery.mobile, function (_a) {
|
|
32
32
|
var theme = _a.theme;
|
|
33
33
|
return theme.colors.grayText;
|
|
34
|
-
},
|
|
34
|
+
}, styles_1.mediaQuery.minWidthFourK, (0, _4k_1.adaptiveValueCalc)(8), (0, _4k_1.adaptiveValueCalc)(8), (0, _4k_1.adaptiveValueCalc)(528), (0, _4k_1.adaptiveValueCalc)(214), (0, _4k_1.adaptiveValueCalc)(24), (0, _4k_1.adaptiveValueCalc)(32), (0, _4k_1.adaptiveValueCalc)(8), (0, _4k_1.adaptiveValueCalc)(18), (0, _4k_1.adaptiveValueCalc)(24), (0, _4k_1.adaptiveValueCalc)(24), (0, _4k_1.adaptiveValueCalc)(24), (0, _4k_1.adaptiveValueCalc)(15), (0, _4k_1.adaptiveValueCalc)(8), (0, _4k_1.adaptiveValueCalc)(15));
|
|
35
35
|
var TaskTitle = (0, styled_components_1.default)(_system_1.H5)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n font-family: ", ";\n\n font-weight: 600;\n font-size: 1.8em;\n line-height: 1.44;\n text-align: left;\n color: ", ";\n\n ", " {\n font-size: 1.6em;\n line-height: 1.37;\n }\n\n ", " {\n font-size: ", ";\n }\n"], ["\n font-family: ", ";\n\n font-weight: 600;\n font-size: 1.8em;\n line-height: 1.44;\n text-align: left;\n color: ", ";\n\n ", " {\n font-size: 1.6em;\n line-height: 1.37;\n }\n\n ", " {\n font-size: ", ";\n }\n"])), vars_1.poppinsFontVarCss.css, function (_a) {
|
|
36
36
|
var theme = _a.theme;
|
|
37
37
|
return theme.colors.naturalWhite;
|
|
38
|
-
},
|
|
38
|
+
}, styles_1.mediaQuery.mobile, styles_1.mediaQuery.minWidthFourK, (0, _4k_1.adaptiveValueCalc)(18));
|
|
39
39
|
// Component
|
|
40
40
|
var TaskExpTab = function (_a) {
|
|
41
41
|
var taskTitle = _a.taskTitle, taskDesc = _a.taskDesc, ernExp = _a.ernExp, segmentsNumber = _a.segmentsNumber, partDone = _a.partDone, partReq = _a.partReq, action = _a.action;
|
|
@@ -50,15 +50,15 @@ var styled_components_1 = __importDefault(require("styled-components"));
|
|
|
50
50
|
var _4k_1 = require("@ludo.ninja/ui/build/utils/4k");
|
|
51
51
|
var utils_1 = require("@ludo.ninja/utils");
|
|
52
52
|
var store_1 = require("@/modules/user/store");
|
|
53
|
-
var
|
|
53
|
+
var styles_1 = require("@ludo.ninja/components/dist/styles");
|
|
54
54
|
var colors_1 = require("@/styles/colors");
|
|
55
55
|
var _system_1 = require("@system");
|
|
56
56
|
var vars_1 = require("@/fonts/vars");
|
|
57
57
|
var taskExpTab_1 = __importDefault(require("../taskExpTab"));
|
|
58
58
|
// Styles
|
|
59
|
-
var StyledTasks = (0, styled_components_1.default)(_system_1.Flex)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n gap: 24px;\n flex-direction: column;\n margin-bottom: 80px;\n\n ", " {\n margin-bottom: 91px;\n }\n\n ", " {\n margin-bottom: 32px;\n }\n\n ", " {\n gap: ", ";\n margin-bottom: ", ";\n }\n"], ["\n gap: 24px;\n flex-direction: column;\n margin-bottom: 80px;\n\n ", " {\n margin-bottom: 91px;\n }\n\n ", " {\n margin-bottom: 32px;\n }\n\n ", " {\n gap: ", ";\n margin-bottom: ", ";\n }\n"])),
|
|
60
|
-
var StyledGrid = (0, styled_components_1.default)(_system_1.Grid)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n grid-template-columns: 1fr 1fr;\n grid-gap: 24px;\n\n ", " {\n grid-template-columns: 1fr;\n }\n\n ", " {\n grid-gap: ", ";\n }\n"], ["\n grid-template-columns: 1fr 1fr;\n grid-gap: 24px;\n\n ", " {\n grid-template-columns: 1fr;\n }\n\n ", " {\n grid-gap: ", ";\n }\n"])),
|
|
61
|
-
var SH3 = (0, styled_components_1.default)(_system_1.H3)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n line-height: 1.5;\n font-weight: 600;\n font-size: 24px;\n text-align: center;\n font-family: ", ";\n color: ", ";\n\n ", " {\n font-size: ", ";\n }\n"], ["\n line-height: 1.5;\n font-weight: 600;\n font-size: 24px;\n text-align: center;\n font-family: ", ";\n color: ", ";\n\n ", " {\n font-size: ", ";\n }\n"])), vars_1.poppinsFontVarCss.css, colors_1.WhiteColor,
|
|
59
|
+
var StyledTasks = (0, styled_components_1.default)(_system_1.Flex)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n gap: 24px;\n flex-direction: column;\n margin-bottom: 80px;\n\n ", " {\n margin-bottom: 91px;\n }\n\n ", " {\n margin-bottom: 32px;\n }\n\n ", " {\n gap: ", ";\n margin-bottom: ", ";\n }\n"], ["\n gap: 24px;\n flex-direction: column;\n margin-bottom: 80px;\n\n ", " {\n margin-bottom: 91px;\n }\n\n ", " {\n margin-bottom: 32px;\n }\n\n ", " {\n gap: ", ";\n margin-bottom: ", ";\n }\n"])), styles_1.mediaQuery.maxWidthTablet, styles_1.mediaQuery.mobile, styles_1.mediaQuery.minWidthFourK, (0, _4k_1.adaptiveValueCalc)(24), (0, _4k_1.adaptiveValueCalc)(80));
|
|
60
|
+
var StyledGrid = (0, styled_components_1.default)(_system_1.Grid)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n grid-template-columns: 1fr 1fr;\n grid-gap: 24px;\n\n ", " {\n grid-template-columns: 1fr;\n }\n\n ", " {\n grid-gap: ", ";\n }\n"], ["\n grid-template-columns: 1fr 1fr;\n grid-gap: 24px;\n\n ", " {\n grid-template-columns: 1fr;\n }\n\n ", " {\n grid-gap: ", ";\n }\n"])), styles_1.mediaQuery.mobile, styles_1.mediaQuery.minWidthFourK, (0, _4k_1.adaptiveValueCalc)(24));
|
|
61
|
+
var SH3 = (0, styled_components_1.default)(_system_1.H3)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n line-height: 1.5;\n font-weight: 600;\n font-size: 24px;\n text-align: center;\n font-family: ", ";\n color: ", ";\n\n ", " {\n font-size: ", ";\n }\n"], ["\n line-height: 1.5;\n font-weight: 600;\n font-size: 24px;\n text-align: center;\n font-family: ", ";\n color: ", ";\n\n ", " {\n font-size: ", ";\n }\n"])), vars_1.poppinsFontVarCss.css, colors_1.WhiteColor, styles_1.mediaQuery.minWidthFourK, (0, _4k_1.adaptiveValueCalc)(24));
|
|
62
62
|
// Component
|
|
63
63
|
var Tasks = function (_a) {
|
|
64
64
|
var tasks = _a.tasks;
|
|
@@ -11,7 +11,7 @@ var react_1 = __importDefault(require("react"));
|
|
|
11
11
|
var image_1 = __importDefault(require("next/image"));
|
|
12
12
|
var styled_components_1 = __importDefault(require("styled-components"));
|
|
13
13
|
var _4k_1 = require("@ludo.ninja/ui/build/utils/4k");
|
|
14
|
-
var
|
|
14
|
+
var styles_1 = require("@ludo.ninja/components/dist/styles");
|
|
15
15
|
var boxTransform_1 = __importDefault(require("@/styles/mixins/boxTransform"));
|
|
16
16
|
var _system_1 = require("@system");
|
|
17
17
|
var vars_1 = require("@/fonts/vars");
|
|
@@ -20,25 +20,25 @@ var prograssBar_1 = __importDefault(require("../prograssBar"));
|
|
|
20
20
|
var StyledUserInfoExpTab = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n ", ";\n display: flex;\n gap: 8px;\n justify-content: space-between;\n align-items: center;\n\n min-width: 896px;\n min-height: 160px;\n max-width: max-content;\n padding: 35px 32px;\n margin-bottom: 70px;\n border-radius: 16px;\n background: ", ";\n\n ", " {\n min-width: 704px;\n min-height: 150px;\n padding: 30px 32px;\n margin-bottom: 80px;\n }\n\n ", " {\n min-width: 320px;\n min-height: 180px;\n padding: 20px;\n margin-bottom: 32px;\n flex-direction: column;\n position: relative;\n gap: 0;\n }\n\n .info_wrapper {\n display: flex;\n gap: 24px;\n\n ", " {\n min-width: 244px;\n }\n\n ", " {\n min-width: 280px;\n gap: 16px;\n margin-bottom: 20px;\n }\n\n img.user_pic {\n border-radius: 50%;\n\n ", " {\n max-width: 72px;\n max-height: 72px;\n }\n }\n\n .user_credential_wrapper {\n justify-content: center;\n\n ", " {\n justify-content: flex-start;\n }\n }\n }\n\n .exp_wrapper {\n min-height: 90px;\n min-width: 406px;\n\n ", " {\n min-width: 276px;\n }\n\n ", " {\n min-height: 48px;\n }\n }\n\n .user_name {\n font-family: ", ";\n\n font-weight: 600;\n font-size: 2.4em;\n line-height: 1.5;\n color: ", ";\n\n ", " {\n font-weight: 600;\n font-size: 1.8em;\n line-height: 1.33;\n margin-bottom: 4px;\n }\n }\n\n .user_wallet {\n font-family: ", ";\n\n font-size: 1.5em;\n line-height: 1.46;\n color: ", ";\n\n ", " {\n font-weight: 400;\n font-size: 1.4em;\n line-height: 1.28;\n }\n }\n\n .user_exp {\n margin-bottom: 10px;\n gap: 8px;\n align-items: center;\n\n &.mobile {\n display: none;\n }\n\n ", " {\n gap: 6px;\n\n &.mobile {\n display: flex;\n margin-top: 4px;\n margin-bottom: 0;\n }\n\n &.desktop {\n display: none;\n }\n }\n\n .exp_logo {\n ", " {\n width: 16px;\n height: 16px;\n }\n }\n }\n\n .exp_value {\n font-family: ", ";\n\n font-weight: 600;\n font-size: 2em;\n line-height: 1.4;\n color: ", ";\n\n ", " {\n font-size: 1.5em;\n line-height: 1.37;\n }\n }\n\n .exp_current_lvl {\n font-weight: 600;\n font-size: 1.8em;\n line-height: 1.44;\n color: ", ";\n\n ", " {\n font-size: 1.6em;\n line-height: 1.37;\n }\n }\n\n .exp_left_untill {\n font-weight: 400;\n font-size: 1.5em;\n line-height: 1.46;\n color: ", ";\n\n ", " {\n font-size: 1.4em;\n line-height: 1.28;\n }\n }\n\n .exp_next_lvl {\n font-weight: 500;\n font-size: 1em;\n line-height: 1.46;\n color: ", ";\n\n margin-left: 5px;\n\n ", " {\n font-size: 1.15em;\n line-height: 1.37;\n }\n }\n\n .user_lvl_block {\n margin-top: 10px;\n }\n\n ", " {\n gap: ", ";\n min-width: ", ";\n min-height: ", ";\n padding: ", " ", ";\n margin-bottom: ", ";\n border-radius: ", ";\n\n .info_wrapper {\n gap: ", ";\n\n img.user_pic {\n width: ", ";\n height: ", ";\n }\n }\n\n .exp_wrapper {\n min-height: ", ";\n min-width: ", ";\n }\n\n .user_name {\n font-size: ", ";\n }\n\n .user_wallet {\n font-size: ", ";\n }\n\n .user_exp {\n gap: ", ";\n margin-bottom: ", ";\n\n .exp_logo {\n width: ", ";\n height: ", ";\n }\n }\n\n .exp_value {\n font-size: ", ";\n }\n\n .exp_current_lvl {\n font-size: ", ";\n }\n\n .exp_left_untill {\n font-size: ", ";\n }\n\n .exp_next_lvl {\n margin-left: ", ";\n }\n\n .user_lvl_block {\n margin-top: ", ";\n }\n }\n"], ["\n ", ";\n display: flex;\n gap: 8px;\n justify-content: space-between;\n align-items: center;\n\n min-width: 896px;\n min-height: 160px;\n max-width: max-content;\n padding: 35px 32px;\n margin-bottom: 70px;\n border-radius: 16px;\n background: ", ";\n\n ", " {\n min-width: 704px;\n min-height: 150px;\n padding: 30px 32px;\n margin-bottom: 80px;\n }\n\n ", " {\n min-width: 320px;\n min-height: 180px;\n padding: 20px;\n margin-bottom: 32px;\n flex-direction: column;\n position: relative;\n gap: 0;\n }\n\n .info_wrapper {\n display: flex;\n gap: 24px;\n\n ", " {\n min-width: 244px;\n }\n\n ", " {\n min-width: 280px;\n gap: 16px;\n margin-bottom: 20px;\n }\n\n img.user_pic {\n border-radius: 50%;\n\n ", " {\n max-width: 72px;\n max-height: 72px;\n }\n }\n\n .user_credential_wrapper {\n justify-content: center;\n\n ", " {\n justify-content: flex-start;\n }\n }\n }\n\n .exp_wrapper {\n min-height: 90px;\n min-width: 406px;\n\n ", " {\n min-width: 276px;\n }\n\n ", " {\n min-height: 48px;\n }\n }\n\n .user_name {\n font-family: ", ";\n\n font-weight: 600;\n font-size: 2.4em;\n line-height: 1.5;\n color: ", ";\n\n ", " {\n font-weight: 600;\n font-size: 1.8em;\n line-height: 1.33;\n margin-bottom: 4px;\n }\n }\n\n .user_wallet {\n font-family: ", ";\n\n font-size: 1.5em;\n line-height: 1.46;\n color: ", ";\n\n ", " {\n font-weight: 400;\n font-size: 1.4em;\n line-height: 1.28;\n }\n }\n\n .user_exp {\n margin-bottom: 10px;\n gap: 8px;\n align-items: center;\n\n &.mobile {\n display: none;\n }\n\n ", " {\n gap: 6px;\n\n &.mobile {\n display: flex;\n margin-top: 4px;\n margin-bottom: 0;\n }\n\n &.desktop {\n display: none;\n }\n }\n\n .exp_logo {\n ", " {\n width: 16px;\n height: 16px;\n }\n }\n }\n\n .exp_value {\n font-family: ", ";\n\n font-weight: 600;\n font-size: 2em;\n line-height: 1.4;\n color: ", ";\n\n ", " {\n font-size: 1.5em;\n line-height: 1.37;\n }\n }\n\n .exp_current_lvl {\n font-weight: 600;\n font-size: 1.8em;\n line-height: 1.44;\n color: ", ";\n\n ", " {\n font-size: 1.6em;\n line-height: 1.37;\n }\n }\n\n .exp_left_untill {\n font-weight: 400;\n font-size: 1.5em;\n line-height: 1.46;\n color: ", ";\n\n ", " {\n font-size: 1.4em;\n line-height: 1.28;\n }\n }\n\n .exp_next_lvl {\n font-weight: 500;\n font-size: 1em;\n line-height: 1.46;\n color: ", ";\n\n margin-left: 5px;\n\n ", " {\n font-size: 1.15em;\n line-height: 1.37;\n }\n }\n\n .user_lvl_block {\n margin-top: 10px;\n }\n\n ", " {\n gap: ", ";\n min-width: ", ";\n min-height: ", ";\n padding: ", " ", ";\n margin-bottom: ", ";\n border-radius: ", ";\n\n .info_wrapper {\n gap: ", ";\n\n img.user_pic {\n width: ", ";\n height: ", ";\n }\n }\n\n .exp_wrapper {\n min-height: ", ";\n min-width: ", ";\n }\n\n .user_name {\n font-size: ", ";\n }\n\n .user_wallet {\n font-size: ", ";\n }\n\n .user_exp {\n gap: ", ";\n margin-bottom: ", ";\n\n .exp_logo {\n width: ", ";\n height: ", ";\n }\n }\n\n .exp_value {\n font-size: ", ";\n }\n\n .exp_current_lvl {\n font-size: ", ";\n }\n\n .exp_left_untill {\n font-size: ", ";\n }\n\n .exp_next_lvl {\n margin-left: ", ";\n }\n\n .user_lvl_block {\n margin-top: ", ";\n }\n }\n"])), boxTransform_1.default, function (_a) {
|
|
21
21
|
var theme = _a.theme;
|
|
22
22
|
return theme.colors.secondaryBg;
|
|
23
|
-
},
|
|
23
|
+
}, styles_1.mediaQuery.maxWidthTablet, styles_1.mediaQuery.mobile, styles_1.mediaQuery.maxWidthTablet, styles_1.mediaQuery.mobile, styles_1.mediaQuery.mobile, styles_1.mediaQuery.mobile, styles_1.mediaQuery.maxWidthTablet, styles_1.mediaQuery.mobile, vars_1.poppinsFontVarCss.css, function (_a) {
|
|
24
24
|
var theme = _a.theme;
|
|
25
25
|
return theme.colors.naturalWhite;
|
|
26
|
-
},
|
|
26
|
+
}, styles_1.mediaQuery.mobile, vars_1.dmsansFontVarCss.css, function (_a) {
|
|
27
27
|
var theme = _a.theme;
|
|
28
28
|
return theme.colors.grayText;
|
|
29
|
-
},
|
|
29
|
+
}, styles_1.mediaQuery.mobile, styles_1.mediaQuery.mobile, styles_1.mediaQuery.mobile, vars_1.poppinsFontVarCss.css, function (_a) {
|
|
30
30
|
var theme = _a.theme;
|
|
31
31
|
return theme.colors.naturalWhite;
|
|
32
|
-
},
|
|
32
|
+
}, styles_1.mediaQuery.mobile, function (_a) {
|
|
33
33
|
var theme = _a.theme;
|
|
34
34
|
return theme.colors.buttonInactive;
|
|
35
|
-
},
|
|
35
|
+
}, styles_1.mediaQuery.mobile, function (_a) {
|
|
36
36
|
var theme = _a.theme;
|
|
37
37
|
return theme.colors.grayText;
|
|
38
|
-
},
|
|
38
|
+
}, styles_1.mediaQuery.mobile, function (_a) {
|
|
39
39
|
var theme = _a.theme;
|
|
40
40
|
return theme.colors.buttonInactive;
|
|
41
|
-
},
|
|
41
|
+
}, styles_1.mediaQuery.mobile, styles_1.mediaQuery.minWidthFourK, (0, _4k_1.adaptiveValueCalc)(8), (0, _4k_1.adaptiveValueCalc)(896), (0, _4k_1.adaptiveValueCalc)(160), (0, _4k_1.adaptiveValueCalc)(35), (0, _4k_1.adaptiveValueCalc)(32), (0, _4k_1.adaptiveValueCalc)(70), (0, _4k_1.adaptiveValueCalc)(16), (0, _4k_1.adaptiveValueCalc)(24), (0, _4k_1.adaptiveValueCalc)(96), (0, _4k_1.adaptiveValueCalc)(96), (0, _4k_1.adaptiveValueCalc)(90), (0, _4k_1.adaptiveValueCalc)(406), (0, _4k_1.adaptiveValueCalc)(24), (0, _4k_1.adaptiveValueCalc)(15), (0, _4k_1.adaptiveValueCalc)(8), (0, _4k_1.adaptiveValueCalc)(10), (0, _4k_1.adaptiveValueCalc)(28), (0, _4k_1.adaptiveValueCalc)(28), (0, _4k_1.adaptiveValueCalc)(20), (0, _4k_1.adaptiveValueCalc)(18), (0, _4k_1.adaptiveValueCalc)(15), (0, _4k_1.adaptiveValueCalc)(5), (0, _4k_1.adaptiveValueCalc)(10));
|
|
42
42
|
// Component
|
|
43
43
|
var UserInfoExpTab = function (_a) {
|
|
44
44
|
var _b, _c;
|
|
@@ -87,7 +87,7 @@ var _4k_1 = require("@ludo.ninja/ui/build/utils/4k");
|
|
|
87
87
|
var utils_1 = require("@ludo.ninja/utils");
|
|
88
88
|
var ui_1 = require("@/store/ui");
|
|
89
89
|
var useFetchFindAllTopEntitiesByName_1 = require("@/api/server-search/queries/useFetchFindAllTopEntitiesByName");
|
|
90
|
-
var
|
|
90
|
+
var styles_1 = require("@ludo.ninja/components/dist/styles");
|
|
91
91
|
var searchCloseMoreButtons_1 = __importDefault(require("@/components/search/searchCloseMoreButtons"));
|
|
92
92
|
var searchSuggestions_1 = __importDefault(require("@/components/search/searchSuggestions"));
|
|
93
93
|
var screen_1 = require("@/utils/screen");
|
|
@@ -238,7 +238,7 @@ var SearchInputContainer = function (_a) {
|
|
|
238
238
|
};
|
|
239
239
|
exports.SearchInputContainer = SearchInputContainer;
|
|
240
240
|
var show = (0, styled_components_1.keyframes)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n 0% {\n opacity: 0;\n }\n 100% {\n opacity: 1;\n }\n"], ["\n 0% {\n opacity: 0;\n }\n 100% {\n opacity: 1;\n }\n"])));
|
|
241
|
-
var SMobileContainer = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n position: fixed;\n z-index: 100000;\n top: 0;\n left: 0;\n width: 100vw;\n height: var(--app-height);\n background-color: ", ";\n padding: 17px 20px 0;\n animation: ", " 300ms forwards;\n ", " {\n padding: ", " ", " 0;\n }\n"], ["\n position: fixed;\n z-index: 100000;\n top: 0;\n left: 0;\n width: 100vw;\n height: var(--app-height);\n background-color: ", ";\n padding: 17px 20px 0;\n animation: ", " 300ms forwards;\n ", " {\n padding: ", " ", " 0;\n }\n"])), colors_1.WhiteColor, show,
|
|
242
|
-
var SMobileSearchContainer = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n gap: 2px;\n ", " {\n gap: ", ";\n }\n"], ["\n display: flex;\n align-items: center;\n gap: 2px;\n ", " {\n gap: ", ";\n }\n"])),
|
|
243
|
-
var SSuggestions = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n display: flex;\n overflow-y: auto;\n overflow-x: hidden;\n height: calc(100% - 36px - 17px);\n margin-left: -5px;\n margin-right: -5px;\n padding-left: 5px;\n padding-right: 5px;\n width: calc(100% + 10px);\n\n ", " {\n height: calc(100% - ", " - ", ");\n margin-left: ", ";\n margin-right: ", ";\n padding-left: ", ";\n padding-right: ", ";\n width: calc(100% + ", ");\n }\n"], ["\n display: flex;\n overflow-y: auto;\n overflow-x: hidden;\n height: calc(100% - 36px - 17px);\n margin-left: -5px;\n margin-right: -5px;\n padding-left: 5px;\n padding-right: 5px;\n width: calc(100% + 10px);\n\n ", " {\n height: calc(100% - ", " - ", ");\n margin-left: ", ";\n margin-right: ", ";\n padding-left: ", ";\n padding-right: ", ";\n width: calc(100% + ", ");\n }\n"])),
|
|
241
|
+
var SMobileContainer = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n position: fixed;\n z-index: 100000;\n top: 0;\n left: 0;\n width: 100vw;\n height: var(--app-height);\n background-color: ", ";\n padding: 17px 20px 0;\n animation: ", " 300ms forwards;\n ", " {\n padding: ", " ", " 0;\n }\n"], ["\n position: fixed;\n z-index: 100000;\n top: 0;\n left: 0;\n width: 100vw;\n height: var(--app-height);\n background-color: ", ";\n padding: 17px 20px 0;\n animation: ", " 300ms forwards;\n ", " {\n padding: ", " ", " 0;\n }\n"])), colors_1.WhiteColor, show, styles_1.mediaQuery.minWidthFourK, (0, _4k_1.adaptiveValueCalc)(17), (0, _4k_1.adaptiveValueCalc)(20));
|
|
242
|
+
var SMobileSearchContainer = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n gap: 2px;\n ", " {\n gap: ", ";\n }\n"], ["\n display: flex;\n align-items: center;\n gap: 2px;\n ", " {\n gap: ", ";\n }\n"])), styles_1.mediaQuery.minWidthFourK, (0, _4k_1.adaptiveValueCalc)(2));
|
|
243
|
+
var SSuggestions = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n display: flex;\n overflow-y: auto;\n overflow-x: hidden;\n height: calc(100% - 36px - 17px);\n margin-left: -5px;\n margin-right: -5px;\n padding-left: 5px;\n padding-right: 5px;\n width: calc(100% + 10px);\n\n ", " {\n height: calc(100% - ", " - ", ");\n margin-left: ", ";\n margin-right: ", ";\n padding-left: ", ";\n padding-right: ", ";\n width: calc(100% + ", ");\n }\n"], ["\n display: flex;\n overflow-y: auto;\n overflow-x: hidden;\n height: calc(100% - 36px - 17px);\n margin-left: -5px;\n margin-right: -5px;\n padding-left: 5px;\n padding-right: 5px;\n width: calc(100% + 10px);\n\n ", " {\n height: calc(100% - ", " - ", ");\n margin-left: ", ";\n margin-right: ", ";\n padding-left: ", ";\n padding-right: ", ";\n width: calc(100% + ", ");\n }\n"])), styles_1.mediaQuery.minWidthFourK, (0, _4k_1.adaptiveValueCalc)(36), (0, _4k_1.adaptiveValueCalc)(17), (0, _4k_1.adaptiveValueCalc)(-5), (0, _4k_1.adaptiveValueCalc)(-5), (0, _4k_1.adaptiveValueCalc)(5), (0, _4k_1.adaptiveValueCalc)(5), (0, _4k_1.adaptiveValueCalc)(10));
|
|
244
244
|
var templateObject_1, templateObject_2, templateObject_3, templateObject_4;
|
|
@@ -33,7 +33,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
|
|
|
33
33
|
var react_1 = __importDefault(require("react"));
|
|
34
34
|
var styled_components_1 = __importStar(require("styled-components"));
|
|
35
35
|
var _4k_1 = require("@ludo.ninja/ui/build/utils/4k");
|
|
36
|
-
var
|
|
36
|
+
var styles_1 = require("@ludo.ninja/components/dist/styles");
|
|
37
37
|
var colors_1 = require("@/styles/colors");
|
|
38
38
|
var z_indexes_1 = require("@/styles/mixins/z-indexes");
|
|
39
39
|
var typography_1 = require("@/styles/typography");
|
|
@@ -47,7 +47,7 @@ var StyledSearch = styled_components_1.default.div(templateObject_2 || (template
|
|
|
47
47
|
return props.isActive ? 'none' : '0 16px 32px -16px rgba(33, 21, 95, 0.12)';
|
|
48
48
|
}, function (props) { return (props.isActive ? 'none' : '30px'); }, function (props) { return (props.isActive ? 'none' : '30px'); }, function (props) {
|
|
49
49
|
return props.isMobileOpen && (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n height: unset;\n width: 100%;\n margin: 0;\n "], ["\n height: unset;\n width: 100%;\n margin: 0;\n "])));
|
|
50
|
-
}, colors_1.WhiteColor,
|
|
50
|
+
}, colors_1.WhiteColor, styles_1.mediaQuery.minWidthFourK, (0, _4k_1.adaptiveValueCalc)(30), (0, _4k_1.adaptiveValueCalc)(600), (0, _4k_1.adaptiveValueCalc)(20), (0, _4k_1.adaptiveValueCalc)(50), function (props) {
|
|
51
51
|
return props.isActive
|
|
52
52
|
? 'none'
|
|
53
53
|
: "0 ".concat((0, _4k_1.adaptiveValueCalc)(16), " ").concat((0, _4k_1.adaptiveValueCalc)(32), " ").concat((0, _4k_1.adaptiveValueCalc)(-16), " rgba(33, 21, 95, 0.12)");
|
|
@@ -58,12 +58,12 @@ var StyledSearch = styled_components_1.default.div(templateObject_2 || (template
|
|
|
58
58
|
}, (0, _4k_1.adaptiveValueCalc)(50), (0, _4k_1.adaptiveValueCalc)(10), (0, _4k_1.adaptiveValueCalc)(10), (0, _4k_1.adaptiveValueCalc)(30), (0, _4k_1.adaptiveValueCalc)(30), (0, _4k_1.adaptiveValueCalc)(124), (0, _4k_1.adaptiveValueCalc)(50), (0, _4k_1.adaptiveValueCalc)(24), (0, _4k_1.adaptiveValueCalc)(10), (0, _4k_1.adaptiveValueCalc)(24), (0, _4k_1.adaptiveValueCalc)(44));
|
|
59
59
|
var StyledInput = styled_components_1.default.input(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n font-family: ", ";\n ", ";\n margin: 10px;\n position: relative;\n width: 96%;\n height: 40px;\n outline: none;\n border: none;\n color: ", ";\n background-color: #f9fafc;\n padding-left: 52px;\n padding-right: 48px;\n box-sizing: border-box;\n margin-top: ", ";\n margin-bottom: ", ";\n border-top-right-radius: 20px;\n border-top-left-radius: 20px;\n border-bottom-right-radius: ", ";\n border-bottom-left-radius: ", ";\n\n ::placeholder {\n color: ", ";\n }\n\n @media (max-width: 767px) {\n ", ";\n padding-left: 40px;\n\n height: 36px;\n margin: 8px;\n width: 96%;\n border-bottom-right-radius: 30px;\n border-bottom-left-radius: 30px;\n ", "\n }\n\n ", " {\n margin: ", ";\n height: ", ";\n padding-left: ", ";\n padding-right: ", ";\n margin-top: ", ";\n margin-bottom: ", ";\n border-top-right-radius: ", ";\n border-top-left-radius: ", ";\n border-bottom-right-radius: ", ";\n border-bottom-left-radius: ", ";\n }\n"], ["\n font-family: ", ";\n ", ";\n margin: 10px;\n position: relative;\n width: 96%;\n height: 40px;\n outline: none;\n border: none;\n color: ", ";\n background-color: #f9fafc;\n padding-left: 52px;\n padding-right: 48px;\n box-sizing: border-box;\n margin-top: ", ";\n margin-bottom: ", ";\n border-top-right-radius: 20px;\n border-top-left-radius: 20px;\n border-bottom-right-radius: ", ";\n border-bottom-left-radius: ", ";\n\n ::placeholder {\n color: ", ";\n }\n\n @media (max-width: 767px) {\n ", ";\n padding-left: 40px;\n\n height: 36px;\n margin: 8px;\n width: 96%;\n border-bottom-right-radius: 30px;\n border-bottom-left-radius: 30px;\n ", "\n }\n\n ", " {\n margin: ", ";\n height: ", ";\n padding-left: ", ";\n padding-right: ", ";\n margin-top: ", ";\n margin-bottom: ", ";\n border-top-right-radius: ", ";\n border-top-left-radius: ", ";\n border-bottom-right-radius: ", ";\n border-bottom-left-radius: ", ";\n }\n"])), vars_1.dmsansFontVarCss.css, typography_1.FH7, colors_1.BlackColor, function (props) { return (props.isActive ? '0' : '10px'); }, function (props) { return (props.isActive ? '0' : '10px'); }, function (props) { return (props.isActive ? 'none' : '30px'); }, function (props) { return (props.isActive ? 'none' : '30px'); }, colors_1.TextGrayColor, typography_1.FH6, function (props) {
|
|
60
60
|
return props.isMobileOpen && (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n border-top-right-radius: 30px;\n border-top-left-radius: 30px;\n width: 100%;\n margin: 0;\n "], ["\n border-top-right-radius: 30px;\n border-top-left-radius: 30px;\n width: 100%;\n margin: 0;\n "])));
|
|
61
|
-
},
|
|
61
|
+
}, styles_1.mediaQuery.minWidthFourK, (0, _4k_1.adaptiveValueCalc)(10), (0, _4k_1.adaptiveValueCalc)(40), (0, _4k_1.adaptiveValueCalc)(52), (0, _4k_1.adaptiveValueCalc)(48), function (props) { return (props.isActive ? '0' : (0, _4k_1.adaptiveValueCalc)(10)); }, function (props) { return (props.isActive ? '0' : (0, _4k_1.adaptiveValueCalc)(10)); }, (0, _4k_1.adaptiveValueCalc)(20), (0, _4k_1.adaptiveValueCalc)(20), function (props) {
|
|
62
62
|
return props.isActive ? 'none' : (0, _4k_1.adaptiveValueCalc)(30);
|
|
63
63
|
}, function (props) {
|
|
64
64
|
return props.isActive ? 'none' : (0, _4k_1.adaptiveValueCalc)(30);
|
|
65
65
|
});
|
|
66
|
-
var StyledSearchIcon = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n position: absolute;\n top: 18px;\n bottom: 18px;\n left: 30px;\n display: flex;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n z-index: 1;\n\n width: 24px;\n height: 24px;\n\n svg path {\n stroke: ", ";\n }\n\n @media (max-width: 767px) {\n left: 16px;\n }\n\n ", " {\n top: ", ";\n bottom: ", ";\n left: ", ";\n\n width: ", ";\n height: ", ";\n }\n"], ["\n position: absolute;\n top: 18px;\n bottom: 18px;\n left: 30px;\n display: flex;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n z-index: 1;\n\n width: 24px;\n height: 24px;\n\n svg path {\n stroke: ", ";\n }\n\n @media (max-width: 767px) {\n left: 16px;\n }\n\n ", " {\n top: ", ";\n bottom: ", ";\n left: ", ";\n\n width: ", ";\n height: ", ";\n }\n"])), function (props) { return (props.isActive ? colors_1.BorderColorLight : colors_1.AccentColor); },
|
|
66
|
+
var StyledSearchIcon = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n position: absolute;\n top: 18px;\n bottom: 18px;\n left: 30px;\n display: flex;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n z-index: 1;\n\n width: 24px;\n height: 24px;\n\n svg path {\n stroke: ", ";\n }\n\n @media (max-width: 767px) {\n left: 16px;\n }\n\n ", " {\n top: ", ";\n bottom: ", ";\n left: ", ";\n\n width: ", ";\n height: ", ";\n }\n"], ["\n position: absolute;\n top: 18px;\n bottom: 18px;\n left: 30px;\n display: flex;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n z-index: 1;\n\n width: 24px;\n height: 24px;\n\n svg path {\n stroke: ", ";\n }\n\n @media (max-width: 767px) {\n left: 16px;\n }\n\n ", " {\n top: ", ";\n bottom: ", ";\n left: ", ";\n\n width: ", ";\n height: ", ";\n }\n"])), function (props) { return (props.isActive ? colors_1.BorderColorLight : colors_1.AccentColor); }, styles_1.mediaQuery.minWidthFourK, (0, _4k_1.adaptiveValueCalc)(18), (0, _4k_1.adaptiveValueCalc)(18), (0, _4k_1.adaptiveValueCalc)(30), (0, _4k_1.adaptiveValueCalc)(24), (0, _4k_1.adaptiveValueCalc)(24));
|
|
67
67
|
var SearchGlassIconResize = function () {
|
|
68
68
|
var windowDimensions = (0, screen_1.useWindowDimensionsWithServerInitial)().windowDimensions;
|
|
69
69
|
return (react_1.default.createElement(search_svg_1.default, { style: (0, scale_1.getAdaptiveScale)({
|
|
@@ -22,12 +22,12 @@ var react_1 = __importDefault(require("react"));
|
|
|
22
22
|
var router_1 = require("next/router");
|
|
23
23
|
var styled_components_1 = __importDefault(require("styled-components"));
|
|
24
24
|
var _4k_1 = require("@ludo.ninja/ui/build/utils/4k");
|
|
25
|
-
var
|
|
25
|
+
var styles_1 = require("@ludo.ninja/components/dist/styles");
|
|
26
26
|
var scale_1 = require("@/utils/adaptive/scale");
|
|
27
27
|
var screen_1 = require("@/utils/screen");
|
|
28
28
|
var close_svg_1 = __importDefault(require("@/public/search/close.svg"));
|
|
29
|
-
var StyledSearchCloseMoreButtons = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n position: absolute;\n right: ", ";\n top: ", ";\n bottom: ", ";\n left: ", ";\n transform: ", ";\n display: flex;\n height: 40px;\n ", " {\n height: ", ";\n }\n"], ["\n position: absolute;\n right: ", ";\n top: ", ";\n bottom: ", ";\n left: ", ";\n transform: ", ";\n display: flex;\n height: 40px;\n ", " {\n height: ", ";\n }\n"])), function (props) { return props.position.right; }, function (props) { return props.position.top; }, function (props) { return props.position.bottom; }, function (props) { return props.position.left; }, function (props) { return props.position.transform; },
|
|
30
|
-
var StyledCloseIcon = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n cursor: pointer;\n z-index: 1;\n padding: 8px 6px;\n\n ", " {\n display: flex;\n align-items: center;\n padding: ", " ", ";\n }\n"], ["\n cursor: pointer;\n z-index: 1;\n padding: 8px 6px;\n\n ", " {\n display: flex;\n align-items: center;\n padding: ", " ", ";\n }\n"])),
|
|
29
|
+
var StyledSearchCloseMoreButtons = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n position: absolute;\n right: ", ";\n top: ", ";\n bottom: ", ";\n left: ", ";\n transform: ", ";\n display: flex;\n height: 40px;\n ", " {\n height: ", ";\n }\n"], ["\n position: absolute;\n right: ", ";\n top: ", ";\n bottom: ", ";\n left: ", ";\n transform: ", ";\n display: flex;\n height: 40px;\n ", " {\n height: ", ";\n }\n"])), function (props) { return props.position.right; }, function (props) { return props.position.top; }, function (props) { return props.position.bottom; }, function (props) { return props.position.left; }, function (props) { return props.position.transform; }, styles_1.mediaQuery.minWidthFourK, (0, _4k_1.adaptiveValueCalc)(40));
|
|
30
|
+
var StyledCloseIcon = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n cursor: pointer;\n z-index: 1;\n padding: 8px 6px;\n\n ", " {\n display: flex;\n align-items: center;\n padding: ", " ", ";\n }\n"], ["\n cursor: pointer;\n z-index: 1;\n padding: 8px 6px;\n\n ", " {\n display: flex;\n align-items: center;\n padding: ", " ", ";\n }\n"])), styles_1.mediaQuery.minWidthFourK, (0, _4k_1.adaptiveValueCalc)(8), (0, _4k_1.adaptiveValueCalc)(6));
|
|
31
31
|
var SearchCloseIconResize = function () {
|
|
32
32
|
var windowDimensions = (0, screen_1.useWindowDimensionsWithServerInitial)().windowDimensions;
|
|
33
33
|
return (react_1.default.createElement(close_svg_1.default, { style: (0, scale_1.getAdaptiveScale)({ windowDimensions: windowDimensions, currentSize: 1 }) }));
|
|
@@ -11,11 +11,11 @@ var react_1 = __importDefault(require("react"));
|
|
|
11
11
|
var react_loading_skeleton_1 = __importDefault(require("react-loading-skeleton"));
|
|
12
12
|
var styled_components_1 = __importDefault(require("styled-components"));
|
|
13
13
|
var _4k_1 = require("@ludo.ninja/ui/build/utils/4k");
|
|
14
|
-
var
|
|
14
|
+
var styles_1 = require("@ludo.ninja/components/dist/styles");
|
|
15
15
|
var colors_1 = require("@/styles/colors");
|
|
16
16
|
var typography_1 = require("@/styles/typography");
|
|
17
17
|
// Styles
|
|
18
|
-
var StyledSearchResultCaption = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n margin: 24px 0 16px 0;\n\n .caption {\n ", ";\n color: ", ";\n\n strong {\n margin-right: 8px;\n color: ", ";\n }\n }\n\n .skeleton-caption-search {\n height: 27px;\n max-width: 250px;\n }\n\n ", " {\n margin: ", " 0 ", " 0;\n\n .caption {\n strong {\n margin-right: ", ";\n }\n }\n\n .skeleton-caption-search {\n height: ", ";\n max-width: ", ";\n }\n }\n"], ["\n margin: 24px 0 16px 0;\n\n .caption {\n ", ";\n color: ", ";\n\n strong {\n margin-right: 8px;\n color: ", ";\n }\n }\n\n .skeleton-caption-search {\n height: 27px;\n max-width: 250px;\n }\n\n ", " {\n margin: ", " 0 ", " 0;\n\n .caption {\n strong {\n margin-right: ", ";\n }\n }\n\n .skeleton-caption-search {\n height: ", ";\n max-width: ", ";\n }\n }\n"])), typography_1.FH3, colors_1.BlackColor, colors_1.AccentColor,
|
|
18
|
+
var StyledSearchResultCaption = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n margin: 24px 0 16px 0;\n\n .caption {\n ", ";\n color: ", ";\n\n strong {\n margin-right: 8px;\n color: ", ";\n }\n }\n\n .skeleton-caption-search {\n height: 27px;\n max-width: 250px;\n }\n\n ", " {\n margin: ", " 0 ", " 0;\n\n .caption {\n strong {\n margin-right: ", ";\n }\n }\n\n .skeleton-caption-search {\n height: ", ";\n max-width: ", ";\n }\n }\n"], ["\n margin: 24px 0 16px 0;\n\n .caption {\n ", ";\n color: ", ";\n\n strong {\n margin-right: 8px;\n color: ", ";\n }\n }\n\n .skeleton-caption-search {\n height: 27px;\n max-width: 250px;\n }\n\n ", " {\n margin: ", " 0 ", " 0;\n\n .caption {\n strong {\n margin-right: ", ";\n }\n }\n\n .skeleton-caption-search {\n height: ", ";\n max-width: ", ";\n }\n }\n"])), typography_1.FH3, colors_1.BlackColor, colors_1.AccentColor, styles_1.mediaQuery.minWidthFourK, (0, _4k_1.adaptiveValueCalc)(24), (0, _4k_1.adaptiveValueCalc)(16), (0, _4k_1.adaptiveValueCalc)(8), (0, _4k_1.adaptiveValueCalc)(27), (0, _4k_1.adaptiveValueCalc)(250));
|
|
19
19
|
// Component
|
|
20
20
|
var SearchResultCaption = function (_a) {
|
|
21
21
|
var _b = _a.nftCounter, nftCounter = _b === void 0 ? 0 : _b, searchQuery = _a.searchQuery, isLoading = _a.isLoading;
|
|
@@ -33,7 +33,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
|
|
|
33
33
|
var react_1 = __importDefault(require("react"));
|
|
34
34
|
var styled_components_1 = __importStar(require("styled-components"));
|
|
35
35
|
var _4k_1 = require("@ludo.ninja/ui/build/utils/4k");
|
|
36
|
-
var
|
|
36
|
+
var styles_1 = require("@ludo.ninja/components/dist/styles");
|
|
37
37
|
var typography_1 = require("@/styles/typography");
|
|
38
38
|
var SearchInputContainer_1 = require("@/components/search/SearchInputContainer");
|
|
39
39
|
var scale_1 = require("@/utils/adaptive/scale");
|
|
@@ -41,9 +41,9 @@ var screen_1 = require("@/utils/screen");
|
|
|
41
41
|
var vars_1 = require("@/fonts/vars");
|
|
42
42
|
var search_svg_1 = __importDefault(require("@/public/search/search.svg"));
|
|
43
43
|
// Styles
|
|
44
|
-
var StyledSearchSimpleInput = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n position: relative;\n width: 40%;\n\n .suggestionBar {\n position: absolute;\n top: 40px;\n left: 0;\n right: 0;\n }\n\n ", " {\n width: 188px;\n ", "\n }\n\n ", " {\n .suggestionBar {\n top: ", ";\n }\n }\n"], ["\n position: relative;\n width: 40%;\n\n .suggestionBar {\n position: absolute;\n top: 40px;\n left: 0;\n right: 0;\n }\n\n ", " {\n width: 188px;\n ", "\n }\n\n ", " {\n .suggestionBar {\n top: ", ";\n }\n }\n"])),
|
|
44
|
+
var StyledSearchSimpleInput = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n position: relative;\n width: 40%;\n\n .suggestionBar {\n position: absolute;\n top: 40px;\n left: 0;\n right: 0;\n }\n\n ", " {\n width: 188px;\n ", "\n }\n\n ", " {\n .suggestionBar {\n top: ", ";\n }\n }\n"], ["\n position: relative;\n width: 40%;\n\n .suggestionBar {\n position: absolute;\n top: 40px;\n left: 0;\n right: 0;\n }\n\n ", " {\n width: 188px;\n ", "\n }\n\n ", " {\n .suggestionBar {\n top: ", ";\n }\n }\n"])), styles_1.mediaQuery.mobile, function (props) {
|
|
45
45
|
return props.isMobileOpen && (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n width: 100%;\n "], ["\n width: 100%;\n "])));
|
|
46
|
-
},
|
|
46
|
+
}, styles_1.mediaQuery.minWidthFourK, (0, _4k_1.adaptiveValueCalc)(40));
|
|
47
47
|
var StyledInput = styled_components_1.default.input(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n position: relative;\n width: 100%;\n height: 40px;\n outline: none;\n border: none;\n font-weight: 400;\n font-size: 1.4em;\n color: ", ";\n background-color: ", ";\n padding-left: 48px;\n padding-right: 48px;\n box-sizing: border-box;\n border-top-right-radius: 24px;\n border-top-left-radius: 24px;\n border-bottom-right-radius: ", ";\n border-bottom-left-radius: ", ";\n font-family: ", ";\n\n ::placeholder {\n color: ", ";\n }\n\n ", " {\n ", ";\n padding-left: 32px;\n height: 36px;\n }\n\n ", " {\n height: ", ";\n font-size: ", ";\n padding-left: ", ";\n padding-right: ", ";\n border-top-right-radius: ", ";\n border-top-left-radius: ", ";\n border-bottom-right-radius: ", ";\n border-bottom-left-radius: ", ";\n }\n"], ["\n position: relative;\n width: 100%;\n height: 40px;\n outline: none;\n border: none;\n font-weight: 400;\n font-size: 1.4em;\n color: ", ";\n background-color: ", ";\n padding-left: 48px;\n padding-right: 48px;\n box-sizing: border-box;\n border-top-right-radius: 24px;\n border-top-left-radius: 24px;\n border-bottom-right-radius: ", ";\n border-bottom-left-radius: ", ";\n font-family: ", ";\n\n ::placeholder {\n color: ", ";\n }\n\n ", " {\n ", ";\n padding-left: 32px;\n height: 36px;\n }\n\n ", " {\n height: ", ";\n font-size: ", ";\n padding-left: ", ";\n padding-right: ", ";\n border-top-right-radius: ", ";\n border-top-left-radius: ", ";\n border-bottom-right-radius: ", ";\n border-bottom-left-radius: ", ";\n }\n"])), function (_a) {
|
|
48
48
|
var theme = _a.theme;
|
|
49
49
|
return theme.colors.primaryText;
|
|
@@ -53,7 +53,7 @@ var StyledInput = styled_components_1.default.input(templateObject_3 || (templat
|
|
|
53
53
|
}, function (props) { return (props.isActive ? 'none' : '24px'); }, function (props) { return (props.isActive ? 'none' : '24px'); }, vars_1.dmsansFontVarCss.css, function (_a) {
|
|
54
54
|
var theme = _a.theme;
|
|
55
55
|
return theme.colors.placeholderText;
|
|
56
|
-
},
|
|
56
|
+
}, styles_1.mediaQuery.mobile, typography_1.FH6, styles_1.mediaQuery.minWidthFourK, (0, _4k_1.adaptiveValueCalc)(40), (0, _4k_1.adaptiveValueCalc)(14), (0, _4k_1.adaptiveValueCalc)(48), (0, _4k_1.adaptiveValueCalc)(48), (0, _4k_1.adaptiveValueCalc)(24), (0, _4k_1.adaptiveValueCalc)(24), function (props) {
|
|
57
57
|
return props.isActive ? 'none' : (0, _4k_1.adaptiveValueCalc)(24);
|
|
58
58
|
}, function (props) {
|
|
59
59
|
return props.isActive ? 'none' : (0, _4k_1.adaptiveValueCalc)(24);
|
|
@@ -62,7 +62,7 @@ var StyledSearchIcon = styled_components_1.default.div(templateObject_4 || (temp
|
|
|
62
62
|
return props.isActive
|
|
63
63
|
? props.theme.colors.borderColor
|
|
64
64
|
: props.theme.colors.accent;
|
|
65
|
-
},
|
|
65
|
+
}, styles_1.mediaQuery.minWidthFourK, (0, _4k_1.adaptiveValueCalc)(8), (0, _4k_1.adaptiveValueCalc)(8), (0, _4k_1.adaptiveValueCalc)(16));
|
|
66
66
|
var SearchGlassIconResize = function () {
|
|
67
67
|
var windowDimensions = (0, screen_1.useWindowDimensionsWithServerInitial)().windowDimensions;
|
|
68
68
|
return (react_1.default.createElement(search_svg_1.default, { style: (0, scale_1.getAdaptiveScale)({ windowDimensions: windowDimensions, currentSize: 1 }) }));
|
|
@@ -19,7 +19,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
|
|
|
19
19
|
var react_1 = __importDefault(require("react"));
|
|
20
20
|
var styled_components_1 = __importDefault(require("styled-components"));
|
|
21
21
|
var _4k_1 = require("@ludo.ninja/ui/build/utils/4k");
|
|
22
|
-
var
|
|
22
|
+
var styles_1 = require("@ludo.ninja/components/dist/styles");
|
|
23
23
|
var searchSuggestionsCaption_1 = __importDefault(require("@/components/search/searchSuggestions/searchSuggestionsCaption"));
|
|
24
24
|
var searchSuggestionsFooter_1 = __importDefault(require("@/components/search/searchSuggestions/searchSuggestionsFooter"));
|
|
25
25
|
var searchSuggestionsItem_1 = __importDefault(require("@/components/search/searchSuggestions/searchSuggestionsItem"));
|
|
@@ -35,7 +35,7 @@ var StyledSearchSuggestions = styled_components_1.default.div(templateObject_1 |
|
|
|
35
35
|
}, function (_a) {
|
|
36
36
|
var theme = _a.theme;
|
|
37
37
|
return theme.colors.thirdBg;
|
|
38
|
-
},
|
|
38
|
+
}, styles_1.mediaQuery.minWidthFourK, (0, _4k_1.adaptiveValueCalc)(28), (0, _4k_1.adaptiveValueCalc)(28), (0, _4k_1.adaptiveValueCalc)(44), (0, _4k_1.adaptiveValueCalc)(20), (0, _4k_1.adaptiveValueCalc)(20));
|
|
39
39
|
// Components
|
|
40
40
|
var SearchSuggestions = function (_a) {
|
|
41
41
|
var searchTerm = _a.searchTerm, assets = _a.assets, profiles = _a.profiles, collections = _a.collections, isLoading = _a.isLoading;
|
|
@@ -10,11 +10,11 @@ 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
|
|
13
|
+
var styles_1 = require("@ludo.ninja/components/dist/styles");
|
|
14
14
|
var colors_1 = require("@/styles/colors");
|
|
15
15
|
var typography_1 = require("@/styles/typography");
|
|
16
16
|
// Styles
|
|
17
|
-
var StyledSearchSuggestionsCaption = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n padding: 12px 0;\n border-top: 1px solid ", ";\n line-height: 22px;\n\n .caption {\n ", ";\n color: ", ";\n user-select: none;\n }\n\n :last-child {\n border-bottom: none;\n }\n\n ", " {\n &:first-child {\n border-top: unset;\n }\n }\n\n ", " {\n padding: ", " 0;\n border-top: ", " solid ", ";\n line-height: ", ";\n }\n"], ["\n padding: 12px 0;\n border-top: 1px solid ", ";\n line-height: 22px;\n\n .caption {\n ", ";\n color: ", ";\n user-select: none;\n }\n\n :last-child {\n border-bottom: none;\n }\n\n ", " {\n &:first-child {\n border-top: unset;\n }\n }\n\n ", " {\n padding: ", " 0;\n border-top: ", " solid ", ";\n line-height: ", ";\n }\n"])), colors_1.BorderColorLight, typography_1.FH5, colors_1.TextGrayColor,
|
|
17
|
+
var StyledSearchSuggestionsCaption = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n padding: 12px 0;\n border-top: 1px solid ", ";\n line-height: 22px;\n\n .caption {\n ", ";\n color: ", ";\n user-select: none;\n }\n\n :last-child {\n border-bottom: none;\n }\n\n ", " {\n &:first-child {\n border-top: unset;\n }\n }\n\n ", " {\n padding: ", " 0;\n border-top: ", " solid ", ";\n line-height: ", ";\n }\n"], ["\n padding: 12px 0;\n border-top: 1px solid ", ";\n line-height: 22px;\n\n .caption {\n ", ";\n color: ", ";\n user-select: none;\n }\n\n :last-child {\n border-bottom: none;\n }\n\n ", " {\n &:first-child {\n border-top: unset;\n }\n }\n\n ", " {\n padding: ", " 0;\n border-top: ", " solid ", ";\n line-height: ", ";\n }\n"])), colors_1.BorderColorLight, typography_1.FH5, colors_1.TextGrayColor, styles_1.mediaQuery.mobile, styles_1.mediaQuery.minWidthFourK, (0, _4k_1.adaptiveValueCalc)(12), (0, _4k_1.adaptiveValueCalc)(1), colors_1.BorderColorLight, (0, _4k_1.adaptiveValueCalc)(22));
|
|
18
18
|
// Components
|
|
19
19
|
var SearchSuggestionsCaption = function (_a) {
|
|
20
20
|
var caption = _a.caption, children = _a.children;
|
|
@@ -10,12 +10,12 @@ 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
|
|
13
|
+
var styles_1 = require("@ludo.ninja/components/dist/styles");
|
|
14
14
|
var colors_1 = require("@/styles/colors");
|
|
15
15
|
var typography_1 = require("@/styles/typography");
|
|
16
16
|
var vars_1 = require("@/fonts/vars");
|
|
17
17
|
// Styles
|
|
18
|
-
var StyledSearchSuggestionsFooter = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n .footer {\n font-family: ", ";\n ", ";\n border-top: 1px solid ", ";\n color: ", ";\n text-align: center;\n margin-top: auto;\n user-select: none;\n\n .text {\n padding: 12px 0;\n\n strong {\n font-weight: 700;\n color: ", ";\n }\n }\n }\n\n ", " {\n //border-bottom-left-radius: ", ";\n //border-bottom-right-radius: ", ";\n\n .footer {\n border-top: ", " solid ", ";\n\n .text {\n padding: ", " 0;\n }\n }\n }\n"], ["\n .footer {\n font-family: ", ";\n ", ";\n border-top: 1px solid ", ";\n color: ", ";\n text-align: center;\n margin-top: auto;\n user-select: none;\n\n .text {\n padding: 12px 0;\n\n strong {\n font-weight: 700;\n color: ", ";\n }\n }\n }\n\n ", " {\n //border-bottom-left-radius: ", ";\n //border-bottom-right-radius: ", ";\n\n .footer {\n border-top: ", " solid ", ";\n\n .text {\n padding: ", " 0;\n }\n }\n }\n"])), vars_1.dmsansFontVarCss.css, typography_1.TextSmall, colors_1.BorderColorLight, colors_1.TextGrayColor, colors_1.BlackColor,
|
|
18
|
+
var StyledSearchSuggestionsFooter = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n .footer {\n font-family: ", ";\n ", ";\n border-top: 1px solid ", ";\n color: ", ";\n text-align: center;\n margin-top: auto;\n user-select: none;\n\n .text {\n padding: 12px 0;\n\n strong {\n font-weight: 700;\n color: ", ";\n }\n }\n }\n\n ", " {\n //border-bottom-left-radius: ", ";\n //border-bottom-right-radius: ", ";\n\n .footer {\n border-top: ", " solid ", ";\n\n .text {\n padding: ", " 0;\n }\n }\n }\n"], ["\n .footer {\n font-family: ", ";\n ", ";\n border-top: 1px solid ", ";\n color: ", ";\n text-align: center;\n margin-top: auto;\n user-select: none;\n\n .text {\n padding: 12px 0;\n\n strong {\n font-weight: 700;\n color: ", ";\n }\n }\n }\n\n ", " {\n //border-bottom-left-radius: ", ";\n //border-bottom-right-radius: ", ";\n\n .footer {\n border-top: ", " solid ", ";\n\n .text {\n padding: ", " 0;\n }\n }\n }\n"])), vars_1.dmsansFontVarCss.css, typography_1.TextSmall, colors_1.BorderColorLight, colors_1.TextGrayColor, colors_1.BlackColor, styles_1.mediaQuery.minWidthFourK, (0, _4k_1.adaptiveValueCalc)(28), (0, _4k_1.adaptiveValueCalc)(28), (0, _4k_1.adaptiveValueCalc)(1), colors_1.BorderColorLight, (0, _4k_1.adaptiveValueCalc)(12));
|
|
19
19
|
// Components
|
|
20
20
|
var SearchSuggestionsFooter = function () {
|
|
21
21
|
return (react_1.default.createElement(StyledSearchSuggestionsFooter, null,
|
|
@@ -12,12 +12,12 @@ var link_1 = __importDefault(require("next/link"));
|
|
|
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
|
|
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 ImageInterceptor_1 = require("@/system/Img/ImageInterceptor");
|
|
19
19
|
// Styles
|
|
20
|
-
var StyledSearchSuggestionsItem = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n user-select: none;\n\n .link {\n text-decoration: none;\n display: flex;\n padding: 6px 0;\n border-radius: 8px;\n gap: 8px;\n align-items: center;\n position: relative;\n\n & > * {\n position: relative;\n z-index: 1;\n }\n\n img {\n border-radius: ", ";\n width: 32px;\n height: 32px;\n }\n\n .additional {\n white-space: nowrap;\n ", ";\n color: ", ";\n margin-left: auto;\n }\n\n .text {\n display: flex;\n\n overflow: hidden;\n\n .strong {\n font-weight: 600;\n color: ", ";\n font-size: 18px;\n line-height: 26px;\n }\n\n .regular {\n ", ";\n color: ", ";\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n }\n }\n\n &:before {\n content: '';\n position: absolute;\n width: calc(100% + 12px);\n height: 100%;\n top: 0;\n left: -6px;\n border-radius: 8px;\n transition: background-color 200ms;\n }\n\n &:hover:before {\n background: #ecf0fc;\n }\n }\n\n ", " {\n .link {\n padding: ", " 0;\n border-radius: ", ";\n gap: ", ";\n\n img {\n border-radius: ", ";\n width: ", ";\n height: ", ";\n }\n\n .text {\n .strong {\n font-size: ", ";\n line-height: ", ";\n }\n }\n\n &:before {\n width: calc(100% + ", ");\n left: ", ";\n border-radius: ", ";\n }\n }\n }\n"], ["\n user-select: none;\n\n .link {\n text-decoration: none;\n display: flex;\n padding: 6px 0;\n border-radius: 8px;\n gap: 8px;\n align-items: center;\n position: relative;\n\n & > * {\n position: relative;\n z-index: 1;\n }\n\n img {\n border-radius: ", ";\n width: 32px;\n height: 32px;\n }\n\n .additional {\n white-space: nowrap;\n ", ";\n color: ", ";\n margin-left: auto;\n }\n\n .text {\n display: flex;\n\n overflow: hidden;\n\n .strong {\n font-weight: 600;\n color: ", ";\n font-size: 18px;\n line-height: 26px;\n }\n\n .regular {\n ", ";\n color: ", ";\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n }\n }\n\n &:before {\n content: '';\n position: absolute;\n width: calc(100% + 12px);\n height: 100%;\n top: 0;\n left: -6px;\n border-radius: 8px;\n transition: background-color 200ms;\n }\n\n &:hover:before {\n background: #ecf0fc;\n }\n }\n\n ", " {\n .link {\n padding: ", " 0;\n border-radius: ", ";\n gap: ", ";\n\n img {\n border-radius: ", ";\n width: ", ";\n height: ", ";\n }\n\n .text {\n .strong {\n font-size: ", ";\n line-height: ", ";\n }\n }\n\n &:before {\n width: calc(100% + ", ");\n left: ", ";\n border-radius: ", ";\n }\n }\n }\n"])), function (props) { return (props.borderRadius ? '16px' : 'none'); }, typography_1.FH5, colors_1.TextDarkGrayColor, colors_1.BlackColor, typography_1.FH5, colors_1.TextGrayColor,
|
|
20
|
+
var StyledSearchSuggestionsItem = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n user-select: none;\n\n .link {\n text-decoration: none;\n display: flex;\n padding: 6px 0;\n border-radius: 8px;\n gap: 8px;\n align-items: center;\n position: relative;\n\n & > * {\n position: relative;\n z-index: 1;\n }\n\n img {\n border-radius: ", ";\n width: 32px;\n height: 32px;\n }\n\n .additional {\n white-space: nowrap;\n ", ";\n color: ", ";\n margin-left: auto;\n }\n\n .text {\n display: flex;\n\n overflow: hidden;\n\n .strong {\n font-weight: 600;\n color: ", ";\n font-size: 18px;\n line-height: 26px;\n }\n\n .regular {\n ", ";\n color: ", ";\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n }\n }\n\n &:before {\n content: '';\n position: absolute;\n width: calc(100% + 12px);\n height: 100%;\n top: 0;\n left: -6px;\n border-radius: 8px;\n transition: background-color 200ms;\n }\n\n &:hover:before {\n background: #ecf0fc;\n }\n }\n\n ", " {\n .link {\n padding: ", " 0;\n border-radius: ", ";\n gap: ", ";\n\n img {\n border-radius: ", ";\n width: ", ";\n height: ", ";\n }\n\n .text {\n .strong {\n font-size: ", ";\n line-height: ", ";\n }\n }\n\n &:before {\n width: calc(100% + ", ");\n left: ", ";\n border-radius: ", ";\n }\n }\n }\n"], ["\n user-select: none;\n\n .link {\n text-decoration: none;\n display: flex;\n padding: 6px 0;\n border-radius: 8px;\n gap: 8px;\n align-items: center;\n position: relative;\n\n & > * {\n position: relative;\n z-index: 1;\n }\n\n img {\n border-radius: ", ";\n width: 32px;\n height: 32px;\n }\n\n .additional {\n white-space: nowrap;\n ", ";\n color: ", ";\n margin-left: auto;\n }\n\n .text {\n display: flex;\n\n overflow: hidden;\n\n .strong {\n font-weight: 600;\n color: ", ";\n font-size: 18px;\n line-height: 26px;\n }\n\n .regular {\n ", ";\n color: ", ";\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n }\n }\n\n &:before {\n content: '';\n position: absolute;\n width: calc(100% + 12px);\n height: 100%;\n top: 0;\n left: -6px;\n border-radius: 8px;\n transition: background-color 200ms;\n }\n\n &:hover:before {\n background: #ecf0fc;\n }\n }\n\n ", " {\n .link {\n padding: ", " 0;\n border-radius: ", ";\n gap: ", ";\n\n img {\n border-radius: ", ";\n width: ", ";\n height: ", ";\n }\n\n .text {\n .strong {\n font-size: ", ";\n line-height: ", ";\n }\n }\n\n &:before {\n width: calc(100% + ", ");\n left: ", ";\n border-radius: ", ";\n }\n }\n }\n"])), function (props) { return (props.borderRadius ? '16px' : 'none'); }, typography_1.FH5, colors_1.TextDarkGrayColor, colors_1.BlackColor, typography_1.FH5, colors_1.TextGrayColor, styles_1.mediaQuery.minWidthFourK, (0, _4k_1.adaptiveValueCalc)(6), (0, _4k_1.adaptiveValueCalc)(8), (0, _4k_1.adaptiveValueCalc)(8), function (props) {
|
|
21
21
|
return props.borderRadius ? (0, _4k_1.adaptiveValueCalc)(16) : 'none';
|
|
22
22
|
}, (0, _4k_1.adaptiveValueCalc)(32), (0, _4k_1.adaptiveValueCalc)(32), (0, _4k_1.adaptiveValueCalc)(18), (0, _4k_1.adaptiveValueCalc)(26), (0, _4k_1.adaptiveValueCalc)(12), (0, _4k_1.adaptiveValueCalc)(-6), (0, _4k_1.adaptiveValueCalc)(8));
|
|
23
23
|
// Components
|
|
@@ -35,11 +35,11 @@ var react_1 = __importDefault(require("react"));
|
|
|
35
35
|
var react_loading_skeleton_1 = __importStar(require("react-loading-skeleton"));
|
|
36
36
|
var styled_components_1 = __importDefault(require("styled-components"));
|
|
37
37
|
var _4k_1 = require("@ludo.ninja/ui/build/utils/4k");
|
|
38
|
-
var
|
|
38
|
+
var styles_1 = require("@ludo.ninja/components/dist/styles");
|
|
39
39
|
var colors_1 = require("@/styles/colors");
|
|
40
40
|
var searchSuggestionsCaption_1 = __importDefault(require("@/components/search/searchSuggestions/searchSuggestionsCaption"));
|
|
41
41
|
// Styles
|
|
42
|
-
var StyledSearchSuggestionsItemSkeleton = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n display: flex;\n justify-content: space-between;\n gap: 8px;\n height: 44px;\n align-items: center;\n\n & > * {\n overflow: hidden;\n display: flex;\n height: 32px;\n border-radius: 6px;\n\n &:nth-child(1) {\n flex: 1 32px;\n min-width: 32px;\n max-width: 32px;\n }\n\n &:nth-child(2) {\n flex: 1 336px;\n }\n\n &:nth-child(3) {\n flex: 1 65px;\n min-width: 32px;\n }\n }\n\n ", " {\n gap: ", ";\n height: ", ";\n\n & > * {\n height: ", ";\n border-radius: ", ";\n\n &:nth-child(1) {\n flex: 1 ", ";\n min-width: ", ";\n max-width: ", ";\n }\n\n &:nth-child(2) {\n flex: 1 ", ";\n }\n\n &:nth-child(3) {\n flex: 1 ", ";\n min-width: ", ";\n }\n }\n }\n"], ["\n display: flex;\n justify-content: space-between;\n gap: 8px;\n height: 44px;\n align-items: center;\n\n & > * {\n overflow: hidden;\n display: flex;\n height: 32px;\n border-radius: 6px;\n\n &:nth-child(1) {\n flex: 1 32px;\n min-width: 32px;\n max-width: 32px;\n }\n\n &:nth-child(2) {\n flex: 1 336px;\n }\n\n &:nth-child(3) {\n flex: 1 65px;\n min-width: 32px;\n }\n }\n\n ", " {\n gap: ", ";\n height: ", ";\n\n & > * {\n height: ", ";\n border-radius: ", ";\n\n &:nth-child(1) {\n flex: 1 ", ";\n min-width: ", ";\n max-width: ", ";\n }\n\n &:nth-child(2) {\n flex: 1 ", ";\n }\n\n &:nth-child(3) {\n flex: 1 ", ";\n min-width: ", ";\n }\n }\n }\n"])),
|
|
42
|
+
var StyledSearchSuggestionsItemSkeleton = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n display: flex;\n justify-content: space-between;\n gap: 8px;\n height: 44px;\n align-items: center;\n\n & > * {\n overflow: hidden;\n display: flex;\n height: 32px;\n border-radius: 6px;\n\n &:nth-child(1) {\n flex: 1 32px;\n min-width: 32px;\n max-width: 32px;\n }\n\n &:nth-child(2) {\n flex: 1 336px;\n }\n\n &:nth-child(3) {\n flex: 1 65px;\n min-width: 32px;\n }\n }\n\n ", " {\n gap: ", ";\n height: ", ";\n\n & > * {\n height: ", ";\n border-radius: ", ";\n\n &:nth-child(1) {\n flex: 1 ", ";\n min-width: ", ";\n max-width: ", ";\n }\n\n &:nth-child(2) {\n flex: 1 ", ";\n }\n\n &:nth-child(3) {\n flex: 1 ", ";\n min-width: ", ";\n }\n }\n }\n"], ["\n display: flex;\n justify-content: space-between;\n gap: 8px;\n height: 44px;\n align-items: center;\n\n & > * {\n overflow: hidden;\n display: flex;\n height: 32px;\n border-radius: 6px;\n\n &:nth-child(1) {\n flex: 1 32px;\n min-width: 32px;\n max-width: 32px;\n }\n\n &:nth-child(2) {\n flex: 1 336px;\n }\n\n &:nth-child(3) {\n flex: 1 65px;\n min-width: 32px;\n }\n }\n\n ", " {\n gap: ", ";\n height: ", ";\n\n & > * {\n height: ", ";\n border-radius: ", ";\n\n &:nth-child(1) {\n flex: 1 ", ";\n min-width: ", ";\n max-width: ", ";\n }\n\n &:nth-child(2) {\n flex: 1 ", ";\n }\n\n &:nth-child(3) {\n flex: 1 ", ";\n min-width: ", ";\n }\n }\n }\n"])), styles_1.mediaQuery.minWidthFourK, (0, _4k_1.adaptiveValueCalc)(8), (0, _4k_1.adaptiveValueCalc)(44), (0, _4k_1.adaptiveValueCalc)(32), (0, _4k_1.adaptiveValueCalc)(6), (0, _4k_1.adaptiveValueCalc)(32), (0, _4k_1.adaptiveValueCalc)(32), (0, _4k_1.adaptiveValueCalc)(32), (0, _4k_1.adaptiveValueCalc)(336), (0, _4k_1.adaptiveValueCalc)(65), (0, _4k_1.adaptiveValueCalc)(32));
|
|
43
43
|
// Components
|
|
44
44
|
var SearchSuggestionsItemSkeleton = function () { return (react_1.default.createElement(StyledSearchSuggestionsItemSkeleton, null,
|
|
45
45
|
react_1.default.createElement(react_loading_skeleton_1.SkeletonTheme, { baseColor: colors_1.InactiveButtonColor },
|
|
@@ -47,7 +47,7 @@ var SearchSuggestionsItemSkeleton = function () { return (react_1.default.create
|
|
|
47
47
|
react_1.default.createElement(react_loading_skeleton_1.default, null),
|
|
48
48
|
react_1.default.createElement(react_loading_skeleton_1.default, null)))); };
|
|
49
49
|
var SContainer = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n"], ["\n display: flex;\n flex-direction: column;\n"])));
|
|
50
|
-
var SSkeleton = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n @media (min-width: 768px) {\n max-height: calc(var(--app-height) - 124px - 50px - 24px - 10px - 24px);\n overflow-y: auto;\n overflow-x: hidden;\n }\n\n ", " {\n max-height: calc(\n var(--app-height) - ", " - ", " -\n ", " - ", " -\n ", "\n );\n }\n"], ["\n @media (min-width: 768px) {\n max-height: calc(var(--app-height) - 124px - 50px - 24px - 10px - 24px);\n overflow-y: auto;\n overflow-x: hidden;\n }\n\n ", " {\n max-height: calc(\n var(--app-height) - ", " - ", " -\n ", " - ", " -\n ", "\n );\n }\n"])),
|
|
50
|
+
var SSkeleton = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n @media (min-width: 768px) {\n max-height: calc(var(--app-height) - 124px - 50px - 24px - 10px - 24px);\n overflow-y: auto;\n overflow-x: hidden;\n }\n\n ", " {\n max-height: calc(\n var(--app-height) - ", " - ", " -\n ", " - ", " -\n ", "\n );\n }\n"], ["\n @media (min-width: 768px) {\n max-height: calc(var(--app-height) - 124px - 50px - 24px - 10px - 24px);\n overflow-y: auto;\n overflow-x: hidden;\n }\n\n ", " {\n max-height: calc(\n var(--app-height) - ", " - ", " -\n ", " - ", " -\n ", "\n );\n }\n"])), styles_1.mediaQuery.minWidthFourK, (0, _4k_1.adaptiveValueCalc)(124), (0, _4k_1.adaptiveValueCalc)(50), (0, _4k_1.adaptiveValueCalc)(24), (0, _4k_1.adaptiveValueCalc)(10), (0, _4k_1.adaptiveValueCalc)(24));
|
|
51
51
|
var SearchSuggestionsItemsSkeleton = function () { return (react_1.default.createElement(SSkeleton, null, ['NFTs', 'Collections', 'Profiles'].map(function (item) { return (react_1.default.createElement(searchSuggestionsCaption_1.default, { key: item, caption: item },
|
|
52
52
|
react_1.default.createElement(SContainer, null, Array.from({ length: 3 }, function (_, index) { return (react_1.default.createElement(SearchSuggestionsItemSkeleton, { key: index })); })))); }))); };
|
|
53
53
|
exports.SearchSuggestionsItemsSkeleton = SearchSuggestionsItemsSkeleton;
|
|
@@ -10,11 +10,11 @@ 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
|
|
13
|
+
var styles_1 = require("@ludo.ninja/components/dist/styles");
|
|
14
14
|
var colors_1 = require("@/styles/colors");
|
|
15
15
|
var typography_1 = require("@/styles/typography");
|
|
16
16
|
// Styles
|
|
17
|
-
var StyledSearchSuggestionsNotFound = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n ", ";\n color: ", ";\n text-align: left;\n padding-top: 12px;\n padding-bottom: 12px;\n border-top: 1px solid ", ";\n\n .text {\n padding: 24px 0 14px 0;\n }\n\n ", " {\n border-top: unset;\n padding: 0;\n }\n\n ", " {\n //border-bottom-left-radius: ", ";\n padding-top: ", ";\n padding-bottom: ", ";\n border-top: ", " solid ", ";\n\n .text {\n padding: ", " 0 ", " 0;\n }\n }\n"], ["\n ", ";\n color: ", ";\n text-align: left;\n padding-top: 12px;\n padding-bottom: 12px;\n border-top: 1px solid ", ";\n\n .text {\n padding: 24px 0 14px 0;\n }\n\n ", " {\n border-top: unset;\n padding: 0;\n }\n\n ", " {\n //border-bottom-left-radius: ", ";\n padding-top: ", ";\n padding-bottom: ", ";\n border-top: ", " solid ", ";\n\n .text {\n padding: ", " 0 ", " 0;\n }\n }\n"])), typography_1.FH5, colors_1.TextGrayColor, colors_1.BorderColorLight,
|
|
17
|
+
var StyledSearchSuggestionsNotFound = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n ", ";\n color: ", ";\n text-align: left;\n padding-top: 12px;\n padding-bottom: 12px;\n border-top: 1px solid ", ";\n\n .text {\n padding: 24px 0 14px 0;\n }\n\n ", " {\n border-top: unset;\n padding: 0;\n }\n\n ", " {\n //border-bottom-left-radius: ", ";\n padding-top: ", ";\n padding-bottom: ", ";\n border-top: ", " solid ", ";\n\n .text {\n padding: ", " 0 ", " 0;\n }\n }\n"], ["\n ", ";\n color: ", ";\n text-align: left;\n padding-top: 12px;\n padding-bottom: 12px;\n border-top: 1px solid ", ";\n\n .text {\n padding: 24px 0 14px 0;\n }\n\n ", " {\n border-top: unset;\n padding: 0;\n }\n\n ", " {\n //border-bottom-left-radius: ", ";\n padding-top: ", ";\n padding-bottom: ", ";\n border-top: ", " solid ", ";\n\n .text {\n padding: ", " 0 ", " 0;\n }\n }\n"])), typography_1.FH5, colors_1.TextGrayColor, colors_1.BorderColorLight, styles_1.mediaQuery.mobile, styles_1.mediaQuery.minWidthFourK, (0, _4k_1.adaptiveValueCalc)(28), (0, _4k_1.adaptiveValueCalc)(12), (0, _4k_1.adaptiveValueCalc)(12), (0, _4k_1.adaptiveValueCalc)(1), colors_1.BorderColorLight, (0, _4k_1.adaptiveValueCalc)(24), (0, _4k_1.adaptiveValueCalc)(14));
|
|
18
18
|
// Components
|
|
19
19
|
var SearchSuggestionsNotFound = function (_a) {
|
|
20
20
|
var notFoundText = _a.notFoundText;
|
|
@@ -13,7 +13,7 @@ var type_1 = require("@ludo.ninja/ui/build/system/Alert/type");
|
|
|
13
13
|
var _4k_1 = require("@ludo.ninja/ui/build/utils/4k");
|
|
14
14
|
var utils_1 = require("@ludo.ninja/utils");
|
|
15
15
|
var ui_1 = require("@/store/ui");
|
|
16
|
-
var
|
|
16
|
+
var styles_1 = require("@ludo.ninja/components/dist/styles");
|
|
17
17
|
var colors_1 = require("@/styles/colors");
|
|
18
18
|
var _system_1 = require("@system");
|
|
19
19
|
// import CopyIcon from '@/public/share/copy-link-btn.svg';
|
|
@@ -25,8 +25,8 @@ var _system_1 = require("@system");
|
|
|
25
25
|
// import TwitterIcon from '@/public/share/twitter-btn.svg';
|
|
26
26
|
// import WatsUpIcon from '@/public/share/whatsapp-btn.svg';
|
|
27
27
|
// Styles
|
|
28
|
-
var STitle = (0, styled_components_1.default)(_system_1.H1)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n margin-bottom: 24px;\n color: ", ";\n ", " {\n margin-bottom: ", ";\n }\n"], ["\n margin-bottom: 24px;\n color: ", ";\n ", " {\n margin-bottom: ", ";\n }\n"])), colors_1.BlackColor,
|
|
29
|
-
var StyledShare = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n .shareButtons {\n display: grid;\n grid-template-columns: 1fr 1fr 1fr 1fr;\n row-gap: 24px;\n column-gap: 16px;\n margin: 0 43px 33px 43px;\n justify-content: center;\n\n ", " {\n grid-template-columns: 1fr 1fr;\n justify-items: center;\n align-items: center;\n }\n }\n\n .shareBtn {\n width: 108px;\n height: 64px;\n display: flex;\n align-items: center;\n justify-content: space-between;\n flex-direction: column;\n cursor: pointer;\n border: none;\n background-color: transparent;\n\n img {\n width: 40px;\n height: 40px;\n }\n }\n\n ", " {\n .shareButtons {\n row-gap: ", ";\n column-gap: ", ";\n margin: 0 ", " ", "\n ", ";\n }\n\n .shareBtn {\n width: ", ";\n height: ", ";\n\n img {\n width: ", ";\n height: ", ";\n }\n }\n }\n"], ["\n .shareButtons {\n display: grid;\n grid-template-columns: 1fr 1fr 1fr 1fr;\n row-gap: 24px;\n column-gap: 16px;\n margin: 0 43px 33px 43px;\n justify-content: center;\n\n ", " {\n grid-template-columns: 1fr 1fr;\n justify-items: center;\n align-items: center;\n }\n }\n\n .shareBtn {\n width: 108px;\n height: 64px;\n display: flex;\n align-items: center;\n justify-content: space-between;\n flex-direction: column;\n cursor: pointer;\n border: none;\n background-color: transparent;\n\n img {\n width: 40px;\n height: 40px;\n }\n }\n\n ", " {\n .shareButtons {\n row-gap: ", ";\n column-gap: ", ";\n margin: 0 ", " ", "\n ", ";\n }\n\n .shareBtn {\n width: ", ";\n height: ", ";\n\n img {\n width: ", ";\n height: ", ";\n }\n }\n }\n"])),
|
|
28
|
+
var STitle = (0, styled_components_1.default)(_system_1.H1)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n margin-bottom: 24px;\n color: ", ";\n ", " {\n margin-bottom: ", ";\n }\n"], ["\n margin-bottom: 24px;\n color: ", ";\n ", " {\n margin-bottom: ", ";\n }\n"])), colors_1.BlackColor, styles_1.mediaQuery.minWidthFourK, (0, _4k_1.adaptiveValueCalc)(24));
|
|
29
|
+
var StyledShare = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n .shareButtons {\n display: grid;\n grid-template-columns: 1fr 1fr 1fr 1fr;\n row-gap: 24px;\n column-gap: 16px;\n margin: 0 43px 33px 43px;\n justify-content: center;\n\n ", " {\n grid-template-columns: 1fr 1fr;\n justify-items: center;\n align-items: center;\n }\n }\n\n .shareBtn {\n width: 108px;\n height: 64px;\n display: flex;\n align-items: center;\n justify-content: space-between;\n flex-direction: column;\n cursor: pointer;\n border: none;\n background-color: transparent;\n\n img {\n width: 40px;\n height: 40px;\n }\n }\n\n ", " {\n .shareButtons {\n row-gap: ", ";\n column-gap: ", ";\n margin: 0 ", " ", "\n ", ";\n }\n\n .shareBtn {\n width: ", ";\n height: ", ";\n\n img {\n width: ", ";\n height: ", ";\n }\n }\n }\n"], ["\n .shareButtons {\n display: grid;\n grid-template-columns: 1fr 1fr 1fr 1fr;\n row-gap: 24px;\n column-gap: 16px;\n margin: 0 43px 33px 43px;\n justify-content: center;\n\n ", " {\n grid-template-columns: 1fr 1fr;\n justify-items: center;\n align-items: center;\n }\n }\n\n .shareBtn {\n width: 108px;\n height: 64px;\n display: flex;\n align-items: center;\n justify-content: space-between;\n flex-direction: column;\n cursor: pointer;\n border: none;\n background-color: transparent;\n\n img {\n width: 40px;\n height: 40px;\n }\n }\n\n ", " {\n .shareButtons {\n row-gap: ", ";\n column-gap: ", ";\n margin: 0 ", " ", "\n ", ";\n }\n\n .shareBtn {\n width: ", ";\n height: ", ";\n\n img {\n width: ", ";\n height: ", ";\n }\n }\n }\n"])), styles_1.mediaQuery.mobile, styles_1.mediaQuery.minWidthFourK, (0, _4k_1.adaptiveValueCalc)(24), (0, _4k_1.adaptiveValueCalc)(16), (0, _4k_1.adaptiveValueCalc)(43), (0, _4k_1.adaptiveValueCalc)(33), (0, _4k_1.adaptiveValueCalc)(43), (0, _4k_1.adaptiveValueCalc)(108), (0, _4k_1.adaptiveValueCalc)(64), (0, _4k_1.adaptiveValueCalc)(40), (0, _4k_1.adaptiveValueCalc)(40));
|
|
30
30
|
var ShareDialog = function (_a) {
|
|
31
31
|
var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p;
|
|
32
32
|
var link = _a.link, onHide = _a.onHide, params = _a.params;
|
|
@@ -52,7 +52,7 @@ var useExtension_1 = __importDefault(require("@/hooks/extension/useExtension"));
|
|
|
52
52
|
var useSignOut_1 = require("@/modules/user/auth/useSignOut");
|
|
53
53
|
var store_1 = require("@/modules/user/store");
|
|
54
54
|
var ui_1 = require("@/store/ui");
|
|
55
|
-
var
|
|
55
|
+
var styles_1 = require("@ludo.ninja/components/dist/styles");
|
|
56
56
|
var data_1 = require("@/components/sidebar/data");
|
|
57
57
|
var sidebarInviteCodeLabel_1 = __importDefault(require("@/components/sidebar/sidebarInviteCodeLabel"));
|
|
58
58
|
var Userpic_1 = __importDefault(require("@/system/Img/Userpic"));
|
|
@@ -63,21 +63,21 @@ var screen_1 = require("@/utils/screen");
|
|
|
63
63
|
var MenuItem = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n font-size: 15px;\n font-weight: 500;\n line-height: 22px;\n display: flex;\n gap: 8px;\n align-items: center;\n padding: 12px 4px;\n text-indent: 4px;\n border-radius: 4px;\n cursor: pointer;\n color: ", ";\n\n ", " {\n font-size: 14px;\n line-height: 20px;\n }\n\n transition: background-color 0.3s ease-in-out;\n\n @media (hover: hover) {\n &:hover {\n transition: background-color 0.3s ease-in;\n background-color: ", ";\n }\n }\n\n ", " {\n font-size: ", ";\n line-height: ", ";\n gap: ", ";\n padding: ", " ", ";\n text-indent: ", ";\n border-radius: ", ";\n img {\n width: ", ";\n height: ", ";\n }\n }\n"], ["\n font-size: 15px;\n font-weight: 500;\n line-height: 22px;\n display: flex;\n gap: 8px;\n align-items: center;\n padding: 12px 4px;\n text-indent: 4px;\n border-radius: 4px;\n cursor: pointer;\n color: ", ";\n\n ", " {\n font-size: 14px;\n line-height: 20px;\n }\n\n transition: background-color 0.3s ease-in-out;\n\n @media (hover: hover) {\n &:hover {\n transition: background-color 0.3s ease-in;\n background-color: ", ";\n }\n }\n\n ", " {\n font-size: ", ";\n line-height: ", ";\n gap: ", ";\n padding: ", " ", ";\n text-indent: ", ";\n border-radius: ", ";\n img {\n width: ", ";\n height: ", ";\n }\n }\n"])), function (_a) {
|
|
64
64
|
var theme = _a.theme;
|
|
65
65
|
return theme.colors.secondaryText;
|
|
66
|
-
},
|
|
66
|
+
}, styles_1.mediaQuery.mobile, function (_a) {
|
|
67
67
|
var theme = _a.theme;
|
|
68
68
|
return theme.colors.secondaryBg;
|
|
69
|
-
},
|
|
69
|
+
}, styles_1.mediaQuery.minWidthFourK, (0, _4k_1.adaptiveValueCalc)(15), (0, _4k_1.adaptiveValueCalc)(22), (0, _4k_1.adaptiveValueCalc)(8), (0, _4k_1.adaptiveValueCalc)(12), (0, _4k_1.adaptiveValueCalc)(4), (0, _4k_1.adaptiveValueCalc)(4), (0, _4k_1.adaptiveValueCalc)(4), (0, _4k_1.adaptiveValueCalc)(20), (0, _4k_1.adaptiveValueCalc)(20));
|
|
70
70
|
var BeforeMenuContainer = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n padding: 12px 0;\n border-bottom: 1px solid ", ";\n\n ", " {\n padding: ", " 0;\n border-bottom: ", " solid\n ", ";\n }\n"], ["\n padding: 12px 0;\n border-bottom: 1px solid ", ";\n\n ", " {\n padding: ", " 0;\n border-bottom: ", " solid\n ", ";\n }\n"])), function (_a) {
|
|
71
71
|
var theme = _a.theme;
|
|
72
72
|
return theme.colors.divider;
|
|
73
|
-
},
|
|
73
|
+
}, styles_1.mediaQuery.minWidthFourK, (0, _4k_1.adaptiveValueCalc)(12), (0, _4k_1.adaptiveValueCalc)(1), function (_a) {
|
|
74
74
|
var theme = _a.theme;
|
|
75
75
|
return theme.colors.divider;
|
|
76
76
|
});
|
|
77
77
|
var SLink = (0, styled_components_1.default)(link_1.default)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n &:not(:last-child) svg path {\n fill: ", ";\n }\n .icon-wrapper {\n width: 20px;\n height: 20px;\n display: flex;\n align-items: center;\n justify-content: center;\n ", " {\n width: ", ";\n height: ", ";\n svg {\n transform: ", ";\n }\n }\n }\n"], ["\n &:not(:last-child) svg path {\n fill: ", ";\n }\n .icon-wrapper {\n width: 20px;\n height: 20px;\n display: flex;\n align-items: center;\n justify-content: center;\n ", " {\n width: ", ";\n height: ", ";\n svg {\n transform: ", ";\n }\n }\n }\n"])), function (_a) {
|
|
78
78
|
var theme = _a.theme;
|
|
79
79
|
return theme.colors.sidebarSvgPathFill;
|
|
80
|
-
},
|
|
80
|
+
}, styles_1.mediaQuery.minWidthFourK, (0, _4k_1.adaptiveValueCalc)(20), (0, _4k_1.adaptiveValueCalc)(20), function (props) {
|
|
81
81
|
return 'transform' in props.scale && props.scale.transform;
|
|
82
82
|
});
|
|
83
83
|
// Component
|
|
@@ -36,11 +36,11 @@ var _4k_1 = require("@ludo.ninja/ui/build/utils/4k");
|
|
|
36
36
|
var store_1 = require("@/modules/user/store");
|
|
37
37
|
var ui_1 = require("@/store/ui");
|
|
38
38
|
var useGetMyInviteCodes_1 = require("@/api/server-identities/queries/useGetMyInviteCodes");
|
|
39
|
-
var
|
|
39
|
+
var styles_1 = require("@ludo.ninja/components/dist/styles");
|
|
40
40
|
var ExperienceLabel_1 = __importDefault(require("@/system/Labels/ExperienceLabel"));
|
|
41
41
|
var InviteLabel_1 = __importDefault(require("@/system/Labels/InviteLabel"));
|
|
42
42
|
// Styles
|
|
43
|
-
var StyledSidebarInviteCodeLabel = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n display: flex;\n gap: 16px;\n margin-top: 16px;\n\n ", " {\n gap: ", ";\n margin-top: ", ";\n }\n"], ["\n display: flex;\n gap: 16px;\n margin-top: 16px;\n\n ", " {\n gap: ", ";\n margin-top: ", ";\n }\n"])),
|
|
43
|
+
var StyledSidebarInviteCodeLabel = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n display: flex;\n gap: 16px;\n margin-top: 16px;\n\n ", " {\n gap: ", ";\n margin-top: ", ";\n }\n"], ["\n display: flex;\n gap: 16px;\n margin-top: 16px;\n\n ", " {\n gap: ", ";\n margin-top: ", ";\n }\n"])), styles_1.mediaQuery.minWidthFourK, (0, _4k_1.adaptiveValueCalc)(16), (0, _4k_1.adaptiveValueCalc)(16));
|
|
44
44
|
// Component
|
|
45
45
|
var SidebarInviteCodeLabel = function () {
|
|
46
46
|
var _a = (0, useGetMyInviteCodes_1.useGetMyInviteCodes)(), myInviteCodes = _a.myInviteCodes, loadMyInviteCodes = _a.loadMyInviteCodes, errorMyInviteCodes = _a.errorMyInviteCodes, loadingMyInviteCodes = _a.loadingMyInviteCodes;
|