From 1699af634c867ab322552881db483b3407b84742 Mon Sep 17 00:00:00 2001
From: Gabriel Diaz <gabrieldiaz31@gmail.com>
Date: Mon, 9 Oct 2023 18:37:39 -0300
Subject: [PATCH 1/3] feat: Add smart-item asset badge

---
 .../AssetsCatalog/AssetsCatalog.css           | 39 +++++++++++++++----
 .../AssetsCatalog/AssetsCatalog.tsx           | 22 +++++++++--
 packages/@dcl/inspector/src/vars.css          | 23 ++++++-----
 3 files changed, 63 insertions(+), 21 deletions(-)

diff --git a/packages/@dcl/inspector/src/components/AssetsCatalog/AssetsCatalog.css b/packages/@dcl/inspector/src/components/AssetsCatalog/AssetsCatalog.css
index c0ccd2662..951e640d6 100644
--- a/packages/@dcl/inspector/src/components/AssetsCatalog/AssetsCatalog.css
+++ b/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,13 +58,14 @@
 
 .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 {
@@ -68,7 +73,7 @@
   flex-direction: column;
 }
 
-.assets-catalog .categories>div:first-child {
+.assets-catalog .categories > div:first-child {
   display: flex;
   flex-direction: row;
   align-items: center;
@@ -97,18 +102,36 @@
   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;
+  position: relative;
+}
+
+.assets-catalog .category .assets > div.smart-item img + div.smart-item-icon {
+  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 {
@@ -117,4 +140,4 @@
   display: flex;
   align-items: center;
   justify-content: center;
-}
\ No newline at end of file
+}
diff --git a/packages/@dcl/inspector/src/components/AssetsCatalog/AssetsCatalog.tsx b/packages/@dcl/inspector/src/components/AssetsCatalog/AssetsCatalog.tsx
index 5758132d4..54998ec2f 100644
--- a/packages/@dcl/inspector/src/components/AssetsCatalog/AssetsCatalog.tsx
+++ b/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-icon">
+      <BsFillLightningChargeFill />
     </div>
   )
 }
diff --git a/packages/@dcl/inspector/src/vars.css b/packages/@dcl/inspector/src/vars.css
index d0cb1f1f9..4d80edab2 100644
--- a/packages/@dcl/inspector/src/vars.css
+++ b/packages/@dcl/inspector/src/vars.css
@@ -1,15 +1,18 @@
 :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;
 
@@ -17,15 +20,15 @@
   --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;
@@ -33,7 +36,7 @@
   --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;
 }

From 57694b23bdce22ce6b39d0a56e5809e6b2040023 Mon Sep 17 00:00:00 2001
From: Gabriel Diaz <gabrieldiaz31@gmail.com>
Date: Mon, 9 Oct 2023 18:41:48 -0300
Subject: [PATCH 2/3] fix: Remove unrequired css

---
 .../inspector/src/components/AssetsCatalog/AssetsCatalog.css     | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/@dcl/inspector/src/components/AssetsCatalog/AssetsCatalog.css b/packages/@dcl/inspector/src/components/AssetsCatalog/AssetsCatalog.css
index 951e640d6..3da5a0205 100644
--- a/packages/@dcl/inspector/src/components/AssetsCatalog/AssetsCatalog.css
+++ b/packages/@dcl/inspector/src/components/AssetsCatalog/AssetsCatalog.css
@@ -118,7 +118,6 @@
 .assets-catalog .category .assets > div img {
   width: 60px;
   height: 60px;
-  position: relative;
 }
 
 .assets-catalog .category .assets > div.smart-item img + div.smart-item-icon {

From 3603b3f7f9439879671ee0ae789b00d1dffda4bb Mon Sep 17 00:00:00 2001
From: Gabriel Diaz <gabrieldiaz31@gmail.com>
Date: Mon, 9 Oct 2023 18:43:57 -0300
Subject: [PATCH 3/3] refactor: Rename css class

---
 .../inspector/src/components/AssetsCatalog/AssetsCatalog.css    | 2 +-
 .../inspector/src/components/AssetsCatalog/AssetsCatalog.tsx    | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/@dcl/inspector/src/components/AssetsCatalog/AssetsCatalog.css b/packages/@dcl/inspector/src/components/AssetsCatalog/AssetsCatalog.css
index 3da5a0205..a11557f08 100644
--- a/packages/@dcl/inspector/src/components/AssetsCatalog/AssetsCatalog.css
+++ b/packages/@dcl/inspector/src/components/AssetsCatalog/AssetsCatalog.css
@@ -120,7 +120,7 @@
   height: 60px;
 }
 
-.assets-catalog .category .assets > div.smart-item img + div.smart-item-icon {
+.assets-catalog .category .assets > div.smart-item img + div.smart-item-badge {
   position: absolute;
   display: flex;
   justify-content: center;
diff --git a/packages/@dcl/inspector/src/components/AssetsCatalog/AssetsCatalog.tsx b/packages/@dcl/inspector/src/components/AssetsCatalog/AssetsCatalog.tsx
index 54998ec2f..d965e365d 100644
--- a/packages/@dcl/inspector/src/components/AssetsCatalog/AssetsCatalog.tsx
+++ b/packages/@dcl/inspector/src/components/AssetsCatalog/AssetsCatalog.tsx
@@ -88,7 +88,7 @@ function AssetCell({ value }: AssetProps) {
 
 function SmartItemIcon() {
   return (
-    <div className="smart-item-icon">
+    <div className="smart-item-badge">
       <BsFillLightningChargeFill />
     </div>
   )