feat: Add smart-item asset badge

packages/@dcl/inspector/src/components/AssetsCatalog/AssetsCatalog.css

@@ -9,7 +9,7 @@
 }
 
 .assets-catalog .theme,
-.assets-catalog .category .assets>div {
+.assets-catalog .category .assets > div {
   display: flex;
   margin-right: 1rem;
   width: 200px;
@@ -26,6 +26,10 @@
   position: relative;
 }
 
+.assets-catalog .category .assets > div.smart-item {
+  background: var(--list-smart-item-bg-color);
+}
+
 .assets-catalog .theme:last-child {
   margin-right: 0;
 }
@@ -54,21 +58,22 @@
 
 .assets-catalog .theme div {
   margin-left: auto;
-  background: url(https://cdn.decentraland.org/@dcl/builder-site/6.35.0/static/media/icons.5ff54946.svg) 41.666666666666664% 21.768707482993197% no-repeat;
+  background: url(https://cdn.decentraland.org/@dcl/builder-site/6.35.0/static/media/icons.5ff54946.svg)
+    41.666666666666664% 21.768707482993197% no-repeat;
   width: 8px;
   height: 14px;
 }
 
 .assets-catalog .theme div:before {
-  content: "";
+  content: '';
 }
 
 .assets-catalog .categories {
   display: flex;
   flex-direction: column;
 }
 
-.assets-catalog .categories>div:first-child {
+.assets-catalog .categories > div:first-child {
   display: flex;
   flex-direction: row;
   align-items: center;
@@ -97,24 +102,41 @@
   flex-wrap: wrap;
 }
 
-.assets-catalog .category .assets>div {
+.assets-catalog .category .assets > div {
   width: 80px;
   justify-content: center;
 }
 
-.assets-catalog .category .assets>div:hover {
+.assets-catalog .category .assets > div:hover {
   background: var(--list-item-hover-bg-color);
 }
 
-.assets-catalog .category .assets>div img {
+.assets-catalog .category .assets > div.smart-item:hover {
+  background: var(--list-smart-item-hover-bg-color);
+}
+
+.assets-catalog .category .assets > div img {
   width: 60px;
   height: 60px;
 }
 
+.assets-catalog .category .assets > div.smart-item img + div.smart-item-badge {
+  position: absolute;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border-radius: 8px;
+  width: 24px;
+  height: 24px;
+  bottom: 4px;
+  right: 4px;
+  background-color: var(--smart-item-icon-bg-color);
+}
+
 .assets-catalog .error {
   color: var(--danger);
   height: 100%;
   display: flex;
   align-items: center;
   justify-content: center;
-}
+}

packages/@dcl/inspector/src/components/AssetsCatalog/AssetsCatalog.tsx

@@ -1,8 +1,10 @@
 import { useMemo, useState } from 'react'
 import { useDrag } from 'react-dnd'
+import { BsFillLightningChargeFill } from 'react-icons/bs'
+import cx from 'classnames'
 
 import { AssetProps, CategoriesProps, Props, ThemeProps } from './types'
-import { AssetPack, getAssetsByCategory, getContentsUrl } from '../../lib/logic/catalog'
+import { AssetPack, getAssetsByCategory, getContentsUrl, isSmart } from '../../lib/logic/catalog'
 
 import './AssetsCatalog.css'
 
@@ -70,10 +72,24 @@ function Categories({ onGoBack, value }: CategoriesProps) {
 
 function AssetCell({ value }: AssetProps) {
   const [, drag] = useDrag(() => ({ type: 'builder-asset', item: { value } }), [value])
-
+  const isSmartItem = isSmart(value)
   return (
-    <div className="asset" ref={drag} data-test-id={value.id} data-test-label={value.name}>
+    <div
+      className={cx('asset', { 'smart-item': isSmartItem })}
+      ref={drag}
+      data-test-id={value.id}
+      data-test-label={value.name}
+    >
       <img src={getContentsUrl(value.contents['thumbnail.png'])} alt={value.tags.join(', ')} />
+      {isSmartItem && SmartItemIcon()}
+    </div>
+  )
+}
+
+function SmartItemIcon() {
+  return (
+    <div className="smart-item-badge">
+      <BsFillLightningChargeFill />
     </div>
   )
 }

packages/@dcl/inspector/src/vars.css

@@ -1,39 +1,42 @@
 :root {
   --main-bg-color: var(--vscode-editor-background, var(--background));
-  --dropdown-bg-color: var(--vscode-dropdown-background, #D8D8D8);
+  --dropdown-bg-color: var(--vscode-dropdown-background, #d8d8d8);
   --dropdown-border-color: var(--vscode-dropdown-border, #b9b9b9);
   --dropdown-hover-bg-color: var(--vscode-list-hoverBackground, #e4e4e4);
-  --list-item-bg-color: var(--vscode-list-dropBackground, #36343D);
-  --list-item-hover-bg-color: var(--vscode-list-hoverBackground, #504E58);
+  --list-item-bg-color: var(--vscode-list-dropBackground, #36343d);
+  --list-item-hover-bg-color: var(--vscode-list-hoverBackground, #504e58);
+  --list-smart-item-bg-color: #472550;
+  --smart-item-icon-bg-color: #c640cd;
+  --list-smart-item-hover-bg-color: #5f326a;
   --tree-bg-color: var(--vscode-panel-background, #252526);
   --tree-border-color: var(--vscode-panel-border, #333333);
   --input-border-color: var(--vscode-input-border, #cdcccc);
   --button-color: var(--vscode-button-foreground, var(--black));
-  --title: #EEEEEF;
+  --title: #eeeeef;
   --sub-text: #ffffffcf;
   --border-focused: #127fd4;
 
   /* DCL Colors */
   --primary: #ff2d55;
   --primary-darker: #cc2443;
   /* Color definitions */
-  --white: #FFFFFF;
-  --white-gray: #E7E7E7;
-  --background-gray: #3C3C3C;
+  --white: #ffffff;
+  --white-gray: #e7e7e7;
+  --background-gray: #3c3c3c;
   --border-gray: #454545;
   --black: #000000;
   --transparent: transparent;
   --vscode-accent-blue: #094771;
   --vscode-blue: var(--border-focused);
-  --input-bg-color: #D8D8D8;
+  --input-bg-color: #d8d8d8;
 
   /* Context menu */
   --contexify-zIndex: 999;
   --contexify-menu-minWidth: 220px;
   --contexify-menu-padding: 6px;
   --contexify-menu-radius: 2px;
   --contexify-menu-bgColor: var(--dropdown-bg-color);
-  --contexify-menu-shadow: 2px 2px 10px 0px rgba(0, 0, 0, 0.50);
+  --contexify-menu-shadow: 2px 2px 10px 0px rgba(0, 0, 0, 0.5);
   --contexify-menu-negatePadding: var(--contexify-menu-padding);
 
   --contexify-separator-color: rgba(0, 0, 0, 0.2);
@@ -54,5 +57,5 @@
   --modal-overlay-bg-color: rgba(0, 0, 0, 0.6);
 
   /* Margins */
-  --sidebar: 314px
+  --sidebar: 314px;
 }