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')}