animation and characters color change (#324)

- desaturated characters/animations mannequin colors to white/greyish

app/pages/PageEnigma/comps/DragComponent/DragComponent.tsx

@@ -31,7 +31,7 @@ export const DragComponent = () => {
               "rounded-lg",
               !canDrop.value
                 ? "bg-brand-primary"
-                : "bg-dnd-canDrop border-dnd-canDropBorder border border-dashed",
+                : "border border-dashed border-dnd-canDropBorder bg-dnd-canDrop",
               "block",
             ].join(" ")}
             style={{
@@ -47,7 +47,7 @@ export const DragComponent = () => {
             className={[
               "absolute p-2",
               "rounded opacity-60",
-              "bg-dnd-timeGrid border-2-dnd-timeGridBorder border",
+              "border-2-dnd-timeGridBorder border bg-dnd-timeGrid",
             ].join(" ")}
             style={{
               bottom: timelineHeight.value - 60,
@@ -81,7 +81,7 @@ export const DragComponent = () => {
 
   return (
     <div
-      className="bg-dnd-wrapper/50 absolute rounded-lg backdrop-blur-sm"
+      className="absolute rounded-lg bg-[#A0A0A0] bg-dnd-wrapper/50"
       style={{
         width: 91,
         height: 114,

app/pages/PageEnigma/comps/SidePanelTabs/itemTabs/ItemElement.tsx

@@ -15,7 +15,7 @@ export const ItemElement = ({ item }: Props) => {
 
   return (
     <div
-      className="sidebar-object-item relative w-full cursor-pointer rounded-lg transition-all duration-200"
+      className="relative w-full cursor-pointer rounded-xl bg-[#A0A0A0] transition-all duration-200"
       onPointerDown={(event) => DndAsset.onPointerDown(event, item)}>
       <img
         {...{

app/pages/PageEnigma/comps/SidePanelTabs/itemTabs/ItemElements.scss

@@ -1,3 +0,0 @@
-.sidebar-object-item {
-	background-color: rgba(#39394d, 0.5);
-}

app/pages/PageEnigma/comps/SidePanelTabs/itemTabs/ItemElements.tsx

@@ -2,7 +2,6 @@ import { ItemElement } from "./ItemElement";
 import { AssetFilterOption, MediaItem } from "~/pages/PageEnigma/models";
 import { dndSidePanelWidth, sidePanelWidth } from "~/pages/PageEnigma/store";
 import { LoadingDots } from "~/components";
-import "./ItemElements.scss";
 
 interface Props {
   busy?: boolean;

app/pages/PageEnigma/store/media.ts

@@ -535,7 +535,7 @@ export const characterItems = signal<MediaItem[]>([
     media_id: "m_9sqg0evpr23587jnr8z3zsvav1x077 ",
     type: AssetType.CHARACTER,
     name: "Male Doll",
-    thumbnail: "/resources/characters/img03.png",
+    thumbnail: "/resources/characters/img07.png",
   },
   {
     version: 1,