diff --git a/src/components/LinkedToTooltip/LinkedToToolip.types.ts b/src/components/LinkedToTooltip/LinkedToToolip.types.ts new file mode 100644 index 000000000..71b9a5345 --- /dev/null +++ b/src/components/LinkedToTooltip/LinkedToToolip.types.ts @@ -0,0 +1,3 @@ +export type Props = { + className?: string +} diff --git a/src/components/LinkedToTooltip/LinkedToTooltip.module.css b/src/components/LinkedToTooltip/LinkedToTooltip.module.css new file mode 100644 index 000000000..901e697d9 --- /dev/null +++ b/src/components/LinkedToTooltip/LinkedToTooltip.module.css @@ -0,0 +1,64 @@ +.linkedTooltip { + display: grid; + width: 458px; + margin: 14px; + grid-template-columns: auto auto; + gap: 4px; + overflow: hidden; +} + +.gridItem { + position: relative; + padding: 10px; + display: flex; + align-items: start; +} + +.mappingExample { + color: #cfcdd4; +} + +.mappingType { + display: flex; + align-items: center; +} + +.mappingDescription { + flex-direction: column; +} + +.mappingIcon { + width: 20px; + height: 20px; + margin-right: 10px; +} + +.tooltipHeader { + display: flex; + align-items: center; + grid-column-start: 1; + grid-column-end: 3; + padding: 10px; + text-transform: uppercase; +} + +.tooltipHeader img { + width: 20px; + height: 20px; + margin-right: 10px; +} + +.gridItem::before, +.gridItem::after { + content: ''; + position: absolute; + background-color: #a09ba8; + z-index: 1; +} + +.gridItem::after { + width: 100vw; + height: 1px; + left: 0; + top: -1px; +} diff --git a/src/components/LinkedToTooltip/LinkedToTooltip.tsx b/src/components/LinkedToTooltip/LinkedToTooltip.tsx new file mode 100644 index 000000000..f1bfb471f --- /dev/null +++ b/src/components/LinkedToTooltip/LinkedToTooltip.tsx @@ -0,0 +1,50 @@ +import classNames from 'classnames' +import { InfoTooltip } from 'decentraland-ui' +import { t } from 'decentraland-dapps/dist/modules/translation' +import { MappingType } from '@dcl/schemas' +import allIcon from '../../icons/all.svg' +import multipleIcon from '../../icons/multiple.svg' +import singleIcon from '../../icons/single.svg' +import rangeIcon from '../../icons/range.svg' +import lightbulbIcon from '../../icons/lightbulb.svg' +import styles from './LinkedToTooltip.module.css' +import { Props } from './LinkedToToolip.types' + +const mappingTypeIcons = { + [MappingType.ANY]: allIcon, + [MappingType.MULTIPLE]: multipleIcon, + [MappingType.SINGLE]: singleIcon, + [MappingType.RANGE]: rangeIcon +} + +const LinkingTooltipMappingType = ({ type }: { type: MappingType }) => { + return ( + <> +
+
+ + {t(`mapping_editor.mapping_types.${type}`)} +
+
+
+
{t(`mapping_editor.mapping_descriptions.${type}`)}
+ {type !== MappingType.ANY &&
{t(`mapping_editor.mapping_examples.${type}`)}
} +
+ + ) +} + +export const LinkingToTooltip = ({ className }: Props) => ( + +
+
+ + {t('collection_row.linking_tooltip.title')} +
+ + + + +
+
+) diff --git a/src/components/LinkedToTooltip/index.ts b/src/components/LinkedToTooltip/index.ts new file mode 100644 index 000000000..6c1d4ac6e --- /dev/null +++ b/src/components/LinkedToTooltip/index.ts @@ -0,0 +1 @@ +export * from './LinkedToTooltip' diff --git a/src/components/MappingEditor/MappingEditor.module.css b/src/components/MappingEditor/MappingEditor.module.css index 12747f4cb..83c702d6e 100644 --- a/src/components/MappingEditor/MappingEditor.module.css +++ b/src/components/MappingEditor/MappingEditor.module.css @@ -127,3 +127,11 @@ .mappings :global(.dcl.text-area) { width: 100%; } + +/* Tooltip */ + +.typeLabel { + display: flex; + align-items: center; + gap: 6px; +} diff --git a/src/components/MappingEditor/MappingEditor.tsx b/src/components/MappingEditor/MappingEditor.tsx index d521eae04..d9c6e1d3f 100644 --- a/src/components/MappingEditor/MappingEditor.tsx +++ b/src/components/MappingEditor/MappingEditor.tsx @@ -3,6 +3,7 @@ import classNames from 'classnames' import { DropdownProps, Field, InputOnChangeData, SelectField, TextAreaField, TextAreaProps } from 'decentraland-ui' import { MappingType, MultipleMapping } from '@dcl/schemas' import { t } from 'decentraland-dapps/dist/modules/translation' +import { LinkingToTooltip } from 'components/LinkedToTooltip' import allIcon from '../../icons/all.svg' import multipleIcon from '../../icons/multiple.svg' import singleIcon from '../../icons/single.svg' @@ -117,7 +118,13 @@ export const MappingEditor = (props: Props) => { return (
+ {t('mapping_editor.mapping_type_label')} +
+ ) + } onChange={handleMappingTypeChange} placeholder={t('mapping_editor.mapping_type_placeholder')} value={mappingType} diff --git a/src/components/Modals/CreateSingleItemModal/CreateSingleItemModal.css b/src/components/Modals/CreateSingleItemModal/CreateSingleItemModal.css index bd5cace92..3b2619363 100644 --- a/src/components/Modals/CreateSingleItemModal/CreateSingleItemModal.css +++ b/src/components/Modals/CreateSingleItemModal/CreateSingleItemModal.css @@ -3,6 +3,10 @@ visibility: hidden !important; } +.CreateSingleItemModalContainer > .ui.page.modals { + z-index: 1900; +} + .CreateSingleItemModal.ui.modal > .content { margin-bottom: 32px; } diff --git a/src/components/ThirdPartyCollectionDetailPage/CollectionItemHeaderV2/CollectionItemHeaderV2.module.css b/src/components/ThirdPartyCollectionDetailPage/CollectionItemHeaderV2/CollectionItemHeaderV2.module.css index d12bbb89c..172458a0c 100644 --- a/src/components/ThirdPartyCollectionDetailPage/CollectionItemHeaderV2/CollectionItemHeaderV2.module.css +++ b/src/components/ThirdPartyCollectionDetailPage/CollectionItemHeaderV2/CollectionItemHeaderV2.module.css @@ -17,71 +17,6 @@ margin-right: 10px; } -.linkedTooltip { - display: grid; - width: 458px; - margin: 14px; - grid-template-columns: auto auto; - gap: 4px; - overflow: hidden; -} - -.gridItem { - position: relative; - padding: 10px; - display: flex; - align-items: start; -} - -.mappingExample { - color: #cfcdd4; -} - -.mappingType { - display: flex; - align-items: center; -} - -.mappingDescription { - flex-direction: column; -} - -.mappingIcon { - width: 20px; - height: 20px; - margin-right: 10px; -} - -.tooltipHeader { - display: flex; - align-items: center; - grid-column-start: 1; - grid-column-end: 3; - padding: 10px; - text-transform: uppercase; -} - -.tooltipHeader img { - width: 20px; - height: 20px; - margin-right: 10px; -} - -.gridItem::before, -.gridItem::after { - content: ''; - position: absolute; - background-color: #a09ba8; - z-index: 1; -} - -.gridItem::after { - width: 100vw; - height: 1px; - left: 0; - top: -1px; -} - .linkedToColumn > span { margin-right: 6px; } diff --git a/src/components/ThirdPartyCollectionDetailPage/CollectionItemHeaderV2/CollectionItemHeaderV2.tsx b/src/components/ThirdPartyCollectionDetailPage/CollectionItemHeaderV2/CollectionItemHeaderV2.tsx index 4ca4a37a1..a90ae32b5 100644 --- a/src/components/ThirdPartyCollectionDetailPage/CollectionItemHeaderV2/CollectionItemHeaderV2.tsx +++ b/src/components/ThirdPartyCollectionDetailPage/CollectionItemHeaderV2/CollectionItemHeaderV2.tsx @@ -1,52 +1,9 @@ -import classNames from 'classnames' -import { MappingType } from '@dcl/schemas' -import { Checkbox, Grid, InfoTooltip } from 'decentraland-ui' -import allIcon from '../../../icons/all.svg' -import multipleIcon from '../../../icons/multiple.svg' -import singleIcon from '../../../icons/single.svg' -import rangeIcon from '../../../icons/range.svg' -import lightbulbIcon from '../../../icons/lightbulb.svg' -import { Props } from './CollectionItemHeaderV2.types' +import { Checkbox, Grid } from 'decentraland-ui' import { t } from 'decentraland-dapps/dist/modules/translation' +import { LinkingToTooltip } from 'components/LinkedToTooltip' +import { Props } from './CollectionItemHeaderV2.types' import styles from './CollectionItemHeaderV2.module.css' -const mappingTypeIcons = { - [MappingType.ANY]: allIcon, - [MappingType.MULTIPLE]: multipleIcon, - [MappingType.SINGLE]: singleIcon, - [MappingType.RANGE]: rangeIcon -} - -const LinkingTooltipMappingType = ({ type }: { type: MappingType }) => { - return ( - <> -
-
- - {t(`mapping_editor.mapping_types.${type}`)} -
-
-
-
{t(`mapping_editor.mapping_descriptions.${type}`)}
- {type !== MappingType.ANY &&
{t(`mapping_editor.mapping_examples.${type}`)}
} -
- - ) -} - -const LinkingTooltipContent = () => ( -
-
- - {t('collection_row.linking_tooltip.title')} -
- - - - -
-) - export const CollectionItemHeaderV2 = ({ areAllSelected, onSelectedAllClick }: Props) => { return ( @@ -58,9 +15,7 @@ export const CollectionItemHeaderV2 = ({ areAllSelected, onSelectedAllClick }: P {t('third_party_collection_detail_page.linked_to')} - - - + {t('collection_row.status')}