tycho-components 0.47.0 → 0.47.2
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/configs/localization/CommonTexts.d.ts +3 -0
- package/dist/configs/localization/CommonTexts.js +3 -0
- package/dist/configs/localization/HeaderTexts.d.ts +0 -3
- package/dist/configs/localization/HeaderTexts.js +0 -3
- package/dist/configs/types/ProcessConfiguration.d.ts +1 -0
- package/dist/configs/types/ProcessConfiguration.js +7 -0
- package/dist/shell/Header/HeaderUser/HeaderUser.d.ts +1 -2
- package/dist/shell/Header/HeaderUser/HeaderUser.js +5 -7
- package/dist/shell/Header/HelpButton/HelpButton.d.ts +1 -7
- package/dist/shell/Header/HelpButton/HelpButton.js +6 -7
- package/dist/shell/Header/HelpButton/HelpModal.d.ts +8 -0
- package/dist/shell/Header/HelpButton/HelpModal.js +76 -0
- package/dist/shell/Header/HelpButton/style.scss +80 -0
- package/package.json +1 -1
|
@@ -89,6 +89,7 @@ export declare const CommonTexts: {
|
|
|
89
89
|
'delimiter.semicolon': string;
|
|
90
90
|
'delimiter.comma': string;
|
|
91
91
|
'delimiter.ellipsis': string;
|
|
92
|
+
'delimiter.closing.parenthesis': string;
|
|
92
93
|
'delimiter.bar': string;
|
|
93
94
|
};
|
|
94
95
|
'pt-BR': {
|
|
@@ -181,6 +182,7 @@ export declare const CommonTexts: {
|
|
|
181
182
|
'delimiter.semicolon': string;
|
|
182
183
|
'delimiter.comma': string;
|
|
183
184
|
'delimiter.ellipsis': string;
|
|
185
|
+
'delimiter.closing.parenthesis': string;
|
|
184
186
|
'delimiter.bar': string;
|
|
185
187
|
};
|
|
186
188
|
it: {
|
|
@@ -273,6 +275,7 @@ export declare const CommonTexts: {
|
|
|
273
275
|
'delimiter.semicolon': string;
|
|
274
276
|
'delimiter.comma': string;
|
|
275
277
|
'delimiter.ellipsis': string;
|
|
278
|
+
'delimiter.closing.parenthesis': string;
|
|
276
279
|
'delimiter.bar': string;
|
|
277
280
|
};
|
|
278
281
|
};
|
|
@@ -89,6 +89,7 @@ export const CommonTexts = {
|
|
|
89
89
|
'delimiter.semicolon': 'Semicolon',
|
|
90
90
|
'delimiter.comma': 'Comma',
|
|
91
91
|
'delimiter.ellipsis': 'Ellipsis',
|
|
92
|
+
'delimiter.closing.parenthesis': 'Closing Parenthesis',
|
|
92
93
|
'delimiter.bar': 'Bar',
|
|
93
94
|
},
|
|
94
95
|
'pt-BR': {
|
|
@@ -181,6 +182,7 @@ export const CommonTexts = {
|
|
|
181
182
|
'delimiter.semicolon': 'Ponto e vírgula',
|
|
182
183
|
'delimiter.comma': 'Vírgula',
|
|
183
184
|
'delimiter.ellipsis': 'Reticências',
|
|
185
|
+
'delimiter.closing.parenthesis': 'Parêntese de fechamento',
|
|
184
186
|
'delimiter.bar': 'Barra',
|
|
185
187
|
},
|
|
186
188
|
it: {
|
|
@@ -273,6 +275,7 @@ export const CommonTexts = {
|
|
|
273
275
|
'delimiter.semicolon': 'Punto e virgola',
|
|
274
276
|
'delimiter.comma': 'Virgola',
|
|
275
277
|
'delimiter.ellipsis': 'Punti di sospensione',
|
|
278
|
+
'delimiter.closing.parenthesis': 'Parentesi di chiusura',
|
|
276
279
|
'delimiter.bar': 'Barra',
|
|
277
280
|
},
|
|
278
281
|
};
|
|
@@ -7,7 +7,6 @@ export declare const HeaderTexts: {
|
|
|
7
7
|
'label.choose': string;
|
|
8
8
|
'tooltip.keyboard': string;
|
|
9
9
|
'tooltip.tutorials': string;
|
|
10
|
-
'tooltip.assistant': string;
|
|
11
10
|
'replace.all.tooltip': string;
|
|
12
11
|
'replace.find.placeholder': string;
|
|
13
12
|
'replace.placeholder': string;
|
|
@@ -30,7 +29,6 @@ export declare const HeaderTexts: {
|
|
|
30
29
|
'label.choose': string;
|
|
31
30
|
'tooltip.keyboard': string;
|
|
32
31
|
'tooltip.tutorials': string;
|
|
33
|
-
'tooltip.assistant': string;
|
|
34
32
|
'replace.all.tooltip': string;
|
|
35
33
|
'replace.find.placeholder': string;
|
|
36
34
|
'replace.placeholder': string;
|
|
@@ -53,7 +51,6 @@ export declare const HeaderTexts: {
|
|
|
53
51
|
'label.choose': string;
|
|
54
52
|
'tooltip.keyboard': string;
|
|
55
53
|
'tooltip.tutorials': string;
|
|
56
|
-
'tooltip.assistant': string;
|
|
57
54
|
'replace.all.tooltip': string;
|
|
58
55
|
'replace.find.placeholder': string;
|
|
59
56
|
'replace.placeholder': string;
|
|
@@ -7,7 +7,6 @@ export const HeaderTexts = {
|
|
|
7
7
|
'label.choose': 'Choose a corpus',
|
|
8
8
|
'tooltip.keyboard': 'Open Virtual Keyboard',
|
|
9
9
|
'tooltip.tutorials': 'Views Tutorials',
|
|
10
|
-
'tooltip.assistant': 'Ask the CorpusHub assistant',
|
|
11
10
|
'replace.all.tooltip': 'Replace All',
|
|
12
11
|
'replace.find.placeholder': 'Find',
|
|
13
12
|
'replace.placeholder': 'Replace',
|
|
@@ -30,7 +29,6 @@ export const HeaderTexts = {
|
|
|
30
29
|
'label.choose': 'Escolha um corpus',
|
|
31
30
|
'tooltip.keyboard': 'Abrir Teclado Virtual',
|
|
32
31
|
'tooltip.tutorials': 'Ver tutoriais',
|
|
33
|
-
'tooltip.assistant': 'Perguntar ao assistente CorpusHub',
|
|
34
32
|
'replace.all.tooltip': 'Substituir Todos',
|
|
35
33
|
'replace.find.placeholder': 'Procurar',
|
|
36
34
|
'replace.placeholder': 'Substituir',
|
|
@@ -53,7 +51,6 @@ export const HeaderTexts = {
|
|
|
53
51
|
'label.choose': 'Scegli un corpus',
|
|
54
52
|
'tooltip.keyboard': 'Apri tastiera virtuale',
|
|
55
53
|
'tooltip.tutorials': 'Visualizza i tutorial',
|
|
56
|
-
'tooltip.assistant': "Chiedi all'assistente CorpusHub",
|
|
57
54
|
'replace.all.tooltip': 'Sostituisci tutto',
|
|
58
55
|
'replace.find.placeholder': 'Trova',
|
|
59
56
|
'replace.placeholder': 'Sostituisci',
|
|
@@ -6,6 +6,7 @@ export const DelimiterNames = {
|
|
|
6
6
|
SEMICOLON: 'common:delimiter.semicolon',
|
|
7
7
|
COMMA: 'common:delimiter.comma',
|
|
8
8
|
ELLIPSIS: 'common:delimiter.ellipsis',
|
|
9
|
+
CLOSING_PARENTHESIS: 'common:delimiter.closing.parenthesis',
|
|
9
10
|
};
|
|
10
11
|
export const DELIMITERS = [
|
|
11
12
|
{ name: DelimiterNames.PERIOD, symbol: '.', value: '\\.', default: true },
|
|
@@ -30,6 +31,12 @@ export const DELIMITERS = [
|
|
|
30
31
|
value: '\\.\\.\\.',
|
|
31
32
|
default: true,
|
|
32
33
|
},
|
|
34
|
+
{
|
|
35
|
+
name: DelimiterNames.CLOSING_PARENTHESIS,
|
|
36
|
+
symbol: ')',
|
|
37
|
+
value: '\\)',
|
|
38
|
+
default: true,
|
|
39
|
+
},
|
|
33
40
|
];
|
|
34
41
|
export const DEFAULT_DELIMITERS = DELIMITERS.filter((d) => d.default).map((d) => d.value);
|
|
35
42
|
export const EMPTY_CONFIGURATION = {
|
|
@@ -3,8 +3,7 @@ import { HelpAction } from '../HelpButton/HelpButton';
|
|
|
3
3
|
type Props = {
|
|
4
4
|
navigateLogout?: () => void;
|
|
5
5
|
navigateNotLogged: () => void;
|
|
6
|
-
/** @deprecated ignored — the help entry opens the CorpusHub assistant */
|
|
7
6
|
helpActions?: HelpAction[];
|
|
8
7
|
};
|
|
9
|
-
export default function HeaderUser({ navigateLogout, navigateNotLogged, }: Props): import("react").JSX.Element;
|
|
8
|
+
export default function HeaderUser({ navigateLogout, navigateNotLogged, helpActions, }: Props): import("react").JSX.Element;
|
|
10
9
|
export {};
|
|
@@ -6,11 +6,12 @@ import { useLoggedUtils } from '../../../configs/useLoggedUtils';
|
|
|
6
6
|
import UsabilityUtils from '../../../functions/UsabilityUtils';
|
|
7
7
|
import LanguageSelector from '../../LanguageSelector';
|
|
8
8
|
import './style.scss';
|
|
9
|
-
import
|
|
10
|
-
export default function HeaderUser({ navigateLogout, navigateNotLogged, }) {
|
|
9
|
+
import HelpModal from '../HelpButton/HelpModal';
|
|
10
|
+
export default function HeaderUser({ navigateLogout, navigateNotLogged, helpActions, }) {
|
|
11
11
|
const { t } = useTranslation('header');
|
|
12
12
|
const { isLogged, getLogged } = useLoggedUtils();
|
|
13
13
|
const [open, setOpen] = useState(false);
|
|
14
|
+
const [openHelp, setOpenHelp] = useState(false);
|
|
14
15
|
useEffect(() => {
|
|
15
16
|
if (!open)
|
|
16
17
|
return;
|
|
@@ -20,11 +21,8 @@ export default function HeaderUser({ navigateLogout, navigateNotLogged, }) {
|
|
|
20
21
|
setOpen(false);
|
|
21
22
|
window.open(import.meta.env.VITE_APP_RESERVED_URL, '_blank');
|
|
22
23
|
};
|
|
23
|
-
return (_jsxs("div", { className: "profile-container", "data-tour": "header-user", children: [isLogged() ? (_jsx("div", { onClick: () => setOpen(!open), children: _jsx(Avatar, { size: "small", src: getLogged()?.picture, title: getLogged()?.name || getLogged()?.sub }) })) : (_jsx(Button, { text: t('button.sign.in'), size: "small", onClick: navigateNotLogged })), open && isLogged() && (_jsxs("div", { className: "ds-dropdown-list", children: [_jsx("div", { className: "ds-dropdown-itemlist", children: _jsx("span", { className: "label", children: `${t('profile.label.hello')} ${getLogged()?.name || getLogged()?.sub}` }) }), _jsxs("div", { className: "ds-dropdown-itemlist d-none", children: [_jsx(Icon, { name: "colors", size: "x-small" }), _jsx("span", { className: "label", children: t('profile.label.theme') })] }), _jsxs("div", { className: "ds-dropdown-itemlist", onClick: handleProfile, children: [_jsx(Icon, { name: "person", size: "x-small" }), _jsx("span", { className: "label", children: t('profile.label.home') })] }), _jsx(LanguageSelector, { renderMode: "profile-menu", itemLabel: t('profile.label.language') }),
|
|
24
|
-
setOpen(false);
|
|
25
|
-
openHelpAssistant();
|
|
26
|
-
}, children: [_jsx(Icon, { name: "live_help", size: "x-small" }), _jsx("span", { className: "label", children: t('profile.label.help') })] })), _jsxs("div", { className: "ds-dropdown-itemlist", onClick: () => {
|
|
24
|
+
return (_jsxs("div", { className: "profile-container", "data-tour": "header-user", children: [isLogged() ? (_jsx("div", { onClick: () => setOpen(!open), children: _jsx(Avatar, { size: "small", src: getLogged()?.picture, title: getLogged()?.name || getLogged()?.sub }) })) : (_jsx(Button, { text: t('button.sign.in'), size: "small", onClick: navigateNotLogged })), open && isLogged() && (_jsxs("div", { className: "ds-dropdown-list", children: [_jsx("div", { className: "ds-dropdown-itemlist", children: _jsx("span", { className: "label", children: `${t('profile.label.hello')} ${getLogged()?.name || getLogged()?.sub}` }) }), _jsxs("div", { className: "ds-dropdown-itemlist d-none", children: [_jsx(Icon, { name: "colors", size: "x-small" }), _jsx("span", { className: "label", children: t('profile.label.theme') })] }), _jsxs("div", { className: "ds-dropdown-itemlist", onClick: handleProfile, children: [_jsx(Icon, { name: "person", size: "x-small" }), _jsx("span", { className: "label", children: t('profile.label.home') })] }), _jsx(LanguageSelector, { renderMode: "profile-menu", itemLabel: t('profile.label.language') }), _jsxs("div", { className: "ds-dropdown-itemlist", onClick: () => setOpenHelp(true), children: [_jsx(Icon, { name: "live_help", size: "x-small" }), _jsx("span", { className: "label", children: t('profile.label.help') })] }), _jsxs("div", { className: "ds-dropdown-itemlist", onClick: () => {
|
|
27
25
|
setOpen(false);
|
|
28
26
|
navigateLogout && navigateLogout();
|
|
29
|
-
}, children: [_jsx(Icon, { name: "logout", size: "x-small" }), _jsx("span", { className: "label", children: t('profile.label.logout') })] })] }))] }));
|
|
27
|
+
}, children: [_jsx(Icon, { name: "logout", size: "x-small" }), _jsx("span", { className: "label", children: t('profile.label.logout') })] })] })), openHelp && (_jsx(HelpModal, { onClose: () => setOpenHelp(false), helpActions: helpActions }))] }));
|
|
30
28
|
}
|
|
@@ -1,15 +1,10 @@
|
|
|
1
1
|
import { ButtonDSModes, ButtonDSSizes, TooltipPlacements } from 'tycho-storybook';
|
|
2
|
-
/**
|
|
3
|
-
* @deprecated The legacy help modal (tutorial actions) was replaced by the CorpusHub assistant.
|
|
4
|
-
* Kept only so existing callers still compile; the actions are ignored.
|
|
5
|
-
*/
|
|
6
2
|
export type HelpAction = {
|
|
7
3
|
title: string;
|
|
8
4
|
desc: string;
|
|
9
5
|
action: () => void;
|
|
10
6
|
};
|
|
11
7
|
type Props = {
|
|
12
|
-
/** @deprecated ignored — see HelpAction */
|
|
13
8
|
helpActions?: HelpAction[];
|
|
14
9
|
mobile?: boolean;
|
|
15
10
|
mode?: ButtonDSModes;
|
|
@@ -18,6 +13,5 @@ type Props = {
|
|
|
18
13
|
tooltipPlacement?: TooltipPlacements;
|
|
19
14
|
title?: string;
|
|
20
15
|
};
|
|
21
|
-
|
|
22
|
-
export default function HelpButton({ mobile, mode, size, iconSize, tooltipPlacement, title, }: Props): import("react").JSX.Element | null;
|
|
16
|
+
export default function HelpButton({ helpActions, mobile, mode, size, iconSize, tooltipPlacement, title, }: Props): import("react").JSX.Element;
|
|
23
17
|
export {};
|
|
@@ -1,11 +1,10 @@
|
|
|
1
|
-
import { jsx as _jsx } from "react/jsx-runtime";
|
|
1
|
+
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { useState } from 'react';
|
|
2
3
|
import { useTranslation } from 'react-i18next';
|
|
3
4
|
import { IconButton, } from 'tycho-storybook';
|
|
4
|
-
import
|
|
5
|
-
|
|
6
|
-
export default function HelpButton({ mobile, mode, size = 'large', iconSize, tooltipPlacement, title, }) {
|
|
5
|
+
import HelpModal from './HelpModal';
|
|
6
|
+
export default function HelpButton({ helpActions, mobile, mode, size = 'large', iconSize, tooltipPlacement, title, }) {
|
|
7
7
|
const { t } = useTranslation('header');
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
return (_jsx(IconButton, { name: "live_help", size: size, iconSize: iconSize, title: title || t('tooltip.assistant'), onClick: openHelpAssistant, mode: mode || (mobile ? 'outlined' : 'filled'), tooltipPlacement: tooltipPlacement, "data-tour": "help-button" }));
|
|
8
|
+
const [open, setOpen] = useState(false);
|
|
9
|
+
return (_jsxs(_Fragment, { children: [_jsx(IconButton, { name: "live_help", size: size, iconSize: iconSize, title: title || t('tooltip.tutorials'), onClick: () => setOpen(true), mode: mode || (mobile ? 'outlined' : 'filled'), tooltipPlacement: tooltipPlacement, "data-tour": "help-button" }), open && (_jsx(HelpModal, { onClose: () => setOpen(false), helpActions: helpActions }))] }));
|
|
11
10
|
}
|
|
@@ -0,0 +1,76 @@
|
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { useState } from 'react';
|
|
3
|
+
import { useTranslation } from 'react-i18next';
|
|
4
|
+
import { Button } from 'tycho-storybook';
|
|
5
|
+
import AppModal from '../../../common/AppModal/AppModal';
|
|
6
|
+
import CookieStorage from '../../../configs/CookieStorage';
|
|
7
|
+
import ProfileService from '../../../configs/services/ProfileService';
|
|
8
|
+
import { useLoggedUtils } from '../../../configs/useLoggedUtils';
|
|
9
|
+
import { useTourUtils } from '../../../configs/useTourUtils';
|
|
10
|
+
import SecurityUtils from '../../../functions/SecurityUtils';
|
|
11
|
+
import './style.scss';
|
|
12
|
+
export default function HelpModal({ onClose, helpActions = [] }) {
|
|
13
|
+
const { t } = useTranslation('help');
|
|
14
|
+
const { turnOn, turnOff, status } = useTourUtils();
|
|
15
|
+
const { getLogged, setLogged } = useLoggedUtils();
|
|
16
|
+
const [autoOpenEnabled, setAutoOpenEnabled] = useState(() => getLogged()?.liveTour ?? false);
|
|
17
|
+
const [updatingLiveTour, setUpdatingLiveTour] = useState(false);
|
|
18
|
+
const isTourActive = status();
|
|
19
|
+
const currentLiveTour = getLogged()?.liveTour ?? false;
|
|
20
|
+
const preferenceChanged = autoOpenEnabled !== currentLiveTour;
|
|
21
|
+
const isDisablingAutoOpen = preferenceChanged && !autoOpenEnabled;
|
|
22
|
+
const handleTutorials = () => {
|
|
23
|
+
const origin = (import.meta.env.VITE_APP_ORIGIN ?? '').replace(/\/+$/, '');
|
|
24
|
+
window.open(`${origin}/home/tutorials`, '_blank');
|
|
25
|
+
};
|
|
26
|
+
const handleTourToggle = () => {
|
|
27
|
+
const startTour = () => {
|
|
28
|
+
if (isTourActive) {
|
|
29
|
+
turnOff();
|
|
30
|
+
}
|
|
31
|
+
else {
|
|
32
|
+
turnOn();
|
|
33
|
+
}
|
|
34
|
+
onClose();
|
|
35
|
+
};
|
|
36
|
+
if (!preferenceChanged) {
|
|
37
|
+
startTour();
|
|
38
|
+
return;
|
|
39
|
+
}
|
|
40
|
+
setUpdatingLiveTour(true);
|
|
41
|
+
ProfileService.updateLiveTour(autoOpenEnabled)
|
|
42
|
+
.then((response) => {
|
|
43
|
+
CookieStorage.setJwtToken(response.data);
|
|
44
|
+
setLogged(SecurityUtils.parseJwt(response.data));
|
|
45
|
+
})
|
|
46
|
+
.catch((error) => {
|
|
47
|
+
console.error(error);
|
|
48
|
+
})
|
|
49
|
+
.finally(() => {
|
|
50
|
+
setUpdatingLiveTour(false);
|
|
51
|
+
if (isDisablingAutoOpen) {
|
|
52
|
+
onClose();
|
|
53
|
+
return;
|
|
54
|
+
}
|
|
55
|
+
startTour();
|
|
56
|
+
});
|
|
57
|
+
};
|
|
58
|
+
const handleCustomAction = (item) => {
|
|
59
|
+
item.action();
|
|
60
|
+
onClose();
|
|
61
|
+
};
|
|
62
|
+
const handleAutoOpenChange = (event) => {
|
|
63
|
+
setAutoOpenEnabled(event.target.checked);
|
|
64
|
+
};
|
|
65
|
+
const actionItems = [
|
|
66
|
+
// {
|
|
67
|
+
// title: t('title.tutorials'),
|
|
68
|
+
// desc: t('description.tutorials'),
|
|
69
|
+
// action: handleTutorials,
|
|
70
|
+
// },
|
|
71
|
+
...helpActions,
|
|
72
|
+
];
|
|
73
|
+
return (_jsxs(AppModal, { title: t('modal.title'), close: onClose, hideFooter: true, className: "help-modal", children: [_jsxs("div", { className: "item item-tour", children: [_jsx("div", { className: "title", children: t('title.tour') }), _jsx("div", { className: "desc", children: t('description.tour') }), _jsxs("label", { className: "help-checkbox-label", children: [_jsx("input", { type: "checkbox", checked: autoOpenEnabled, onChange: handleAutoOpenChange, disabled: updatingLiveTour, className: "help-checkbox" }), _jsx("span", { children: t('checkbox.autoOpen') })] }), _jsx(Button, { text: isDisablingAutoOpen
|
|
74
|
+
? t('button.updateLiveTourPreference')
|
|
75
|
+
: t('button.tour'), size: "small", icon: isDisablingAutoOpen ? 'save' : 'keyboard_arrow_right', onClick: handleTourToggle, disabled: updatingLiveTour, "data-tour": "guided-tour-start" })] }), actionItems.map((item, idx) => (_jsxs("div", { className: "item", children: [_jsx("div", { className: "title", children: item.title }), _jsx("div", { className: "desc", children: item.desc }), _jsx(Button, { text: t('button.open'), size: "small", mode: "outlined", icon: "keyboard_arrow_right", onClick: () => handleCustomAction(item) })] }, idx)))] }));
|
|
76
|
+
}
|
|
@@ -0,0 +1,80 @@
|
|
|
1
|
+
.help-modal {
|
|
2
|
+
max-width: 60vw !important;
|
|
3
|
+
width: 60vw !important;
|
|
4
|
+
|
|
5
|
+
.body {
|
|
6
|
+
display: grid;
|
|
7
|
+
grid-template-columns: repeat(3, minmax(0, 1fr));
|
|
8
|
+
gap: var(--spacing-200);
|
|
9
|
+
|
|
10
|
+
.item {
|
|
11
|
+
display: flex;
|
|
12
|
+
flex-direction: column;
|
|
13
|
+
min-width: 0;
|
|
14
|
+
padding: 24px 24px 16px;
|
|
15
|
+
border: 1px solid var(--border-subtle-2);
|
|
16
|
+
border-radius: var(--radius-100);
|
|
17
|
+
|
|
18
|
+
> .title {
|
|
19
|
+
@include subtitle-small-2;
|
|
20
|
+
color: var(--text-primary);
|
|
21
|
+
margin-bottom: 4px;
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
> .desc {
|
|
25
|
+
@include body-medium-1;
|
|
26
|
+
color: var(--text-secondary);
|
|
27
|
+
}
|
|
28
|
+
|
|
29
|
+
> .ds-button {
|
|
30
|
+
margin-top: auto;
|
|
31
|
+
}
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
.item-tour {
|
|
35
|
+
background-color: #ebeff8;
|
|
36
|
+
|
|
37
|
+
.help-checkbox-label {
|
|
38
|
+
display: flex;
|
|
39
|
+
align-items: center;
|
|
40
|
+
gap: var(--spacing-100);
|
|
41
|
+
cursor: pointer;
|
|
42
|
+
margin: 8px 0;
|
|
43
|
+
|
|
44
|
+
.help-checkbox {
|
|
45
|
+
cursor: pointer;
|
|
46
|
+
}
|
|
47
|
+
}
|
|
48
|
+
}
|
|
49
|
+
}
|
|
50
|
+
}
|
|
51
|
+
|
|
52
|
+
@media (max-width: 1366px) {
|
|
53
|
+
.help-modal {
|
|
54
|
+
max-width: 80vw !important;
|
|
55
|
+
width: 80vw !important;
|
|
56
|
+
}
|
|
57
|
+
}
|
|
58
|
+
|
|
59
|
+
@media (max-width: 768px) {
|
|
60
|
+
.help-modal {
|
|
61
|
+
max-width: 90vw !important;
|
|
62
|
+
width: 90vw !important;
|
|
63
|
+
|
|
64
|
+
.body {
|
|
65
|
+
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
66
|
+
}
|
|
67
|
+
}
|
|
68
|
+
}
|
|
69
|
+
|
|
70
|
+
@media (max-width: 767px) {
|
|
71
|
+
.help-modal {
|
|
72
|
+
top: 50% !important;
|
|
73
|
+
|
|
74
|
+
.body {
|
|
75
|
+
grid-template-columns: repeat(1, minmax(0, 1fr));
|
|
76
|
+
max-height: 86vh;
|
|
77
|
+
overflow-y: auto;
|
|
78
|
+
}
|
|
79
|
+
}
|
|
80
|
+
}
|