diff --git a/packages/@dcl/inspector/src/components/AssetPreview/AssetPreview.css b/packages/@dcl/inspector/src/components/AssetPreview/AssetPreview.css
index 158ee7f4f..a482cfe75 100644
--- a/packages/@dcl/inspector/src/components/AssetPreview/AssetPreview.css
+++ b/packages/@dcl/inspector/src/components/AssetPreview/AssetPreview.css
@@ -11,7 +11,3 @@
.AssetPreview .GltfPreview.hidden {
visibility: hidden;
}
-
-.AssetPreview > .loading {
- position: absolute;
-}
diff --git a/packages/@dcl/inspector/src/components/AssetPreview/AssetPreview.tsx b/packages/@dcl/inspector/src/components/AssetPreview/AssetPreview.tsx
index 0544be5e3..82c5090b3 100644
--- a/packages/@dcl/inspector/src/components/AssetPreview/AssetPreview.tsx
+++ b/packages/@dcl/inspector/src/components/AssetPreview/AssetPreview.tsx
@@ -6,7 +6,6 @@ import { AiFillSound } from 'react-icons/ai'
import { IoVideocamOutline } from 'react-icons/io5'
import { FaFile } from 'react-icons/fa'
-import { Loading } from '../Loading'
import { toWearableWithBlobs } from './utils'
import { Props } from './types'
@@ -61,13 +60,12 @@ function GltfPreview({ value, resources, onScreenshot, onLoad }: Props) {
id={value.name}
blob={toWearableWithBlobs(value, resources)}
disableAutoRotate
- background="#3c3c3c"
+ disableBackground
projection={PreviewProjection.ORTHOGRAPHIC}
camera={PreviewCamera.STATIC}
onLoad={handleLoad}
/>
- {loading && }
>
)
}
diff --git a/packages/@dcl/inspector/src/components/Assets/Assets.css b/packages/@dcl/inspector/src/components/Assets/Assets.css
index ede2489ee..55143dda3 100644
--- a/packages/@dcl/inspector/src/components/Assets/Assets.css
+++ b/packages/@dcl/inspector/src/components/Assets/Assets.css
@@ -17,7 +17,7 @@
padding-left: 8px;
display: flex;
background: var(--tree-bg-color);
- height: 60px;
+ padding: 5px 0;
position: relative;
align-items: center;
justify-content: center;
diff --git a/packages/@dcl/inspector/src/components/CreateCustomAsset/CreateCustomAsset.css b/packages/@dcl/inspector/src/components/CreateCustomAsset/CreateCustomAsset.css
index 193b1d259..9c8822ec3 100644
--- a/packages/@dcl/inspector/src/components/CreateCustomAsset/CreateCustomAsset.css
+++ b/packages/@dcl/inspector/src/components/CreateCustomAsset/CreateCustomAsset.css
@@ -32,8 +32,15 @@
}
.CreateCustomAsset .preview-container .AssetPreview {
+ display: none;
+}
+
+.CreateCustomAsset .preview-container .thumbnail {
width: 100%;
height: 100%;
+ background-color: var(--background-gray);
+ background-size: cover;
+ background-position: center;
}
.CreateCustomAsset .loader-container {
diff --git a/packages/@dcl/inspector/src/components/CreateCustomAsset/CreateCustomAsset.tsx b/packages/@dcl/inspector/src/components/CreateCustomAsset/CreateCustomAsset.tsx
index 2f4762433..4725aee9e 100644
--- a/packages/@dcl/inspector/src/components/CreateCustomAsset/CreateCustomAsset.tsx
+++ b/packages/@dcl/inspector/src/components/CreateCustomAsset/CreateCustomAsset.tsx
@@ -112,11 +112,11 @@ const CreateCustomAsset: React.FC = () => {
{previewFile && resources !== null ? (
- {isGeneratingThumbnail && (
+ {isGeneratingThumbnail && !thumbnail ? (
- )}
+ ) :
}
) : (
diff --git a/packages/@dcl/inspector/src/components/ImportAsset/ImportAsset.css b/packages/@dcl/inspector/src/components/ImportAsset/ImportAsset.css
index 8526a0efb..dadb345e9 100644
--- a/packages/@dcl/inspector/src/components/ImportAsset/ImportAsset.css
+++ b/packages/@dcl/inspector/src/components/ImportAsset/ImportAsset.css
@@ -1,3 +1,7 @@
+.ImportAssetModalOverlay {
+ z-index: 2;
+}
+
.ImportAsset {
height: 100%;
}
diff --git a/packages/@dcl/inspector/src/components/ImportAsset/Slider/Slider.css b/packages/@dcl/inspector/src/components/ImportAsset/Slider/Slider.css
index e64108647..01f542652 100644
--- a/packages/@dcl/inspector/src/components/ImportAsset/Slider/Slider.css
+++ b/packages/@dcl/inspector/src/components/ImportAsset/Slider/Slider.css
@@ -38,20 +38,26 @@
.Slider .asset > div {
display: flex;
flex-direction: column;
- margin: 10px 10px 5px 10px;
+ margin: 10px;
width: 150px;
}
-.Slider .asset > div .AssetPreview {
+.Slider .asset .loading {
+ position: relative;
+}
+
+.Slider .asset .AssetPreview {
+ display: none;
+}
+
+.Slider .asset .thumbnail,
+.Slider .asset .loading {
margin-bottom: 12px;
width: 150px;
height: 150px;
background-color: var(--background-gray);
-}
-
-.Slider .asset > div .AssetPreview > svg {
- width: 60%;
- height: 60%;
+ background-size: cover;
+ background-position: center;
}
.Slider .asset .name-error {
diff --git a/packages/@dcl/inspector/src/components/ImportAsset/Slider/Slider.tsx b/packages/@dcl/inspector/src/components/ImportAsset/Slider/Slider.tsx
index 11188c4d3..35a8e92c8 100644
--- a/packages/@dcl/inspector/src/components/ImportAsset/Slider/Slider.tsx
+++ b/packages/@dcl/inspector/src/components/ImportAsset/Slider/Slider.tsx
@@ -5,6 +5,7 @@ import cx from 'classnames'
import { AssetPreview } from '../../AssetPreview'
import { Button } from '../../Button'
import { Input } from '../../Input'
+import { Loading } from '../../Loading'
import { getAssetSize, getAssetResources, determineAssetType, formatFileName } from '../utils'
@@ -110,6 +111,7 @@ export function Slider({ assets, onSubmit, isNameValid }: PropTypes) {
+ {screenshots[$.blob.name] ?
:
}
{!isNameUnique($) &&
Filename already exists}