refactor: enhance asset search UI and improve styling for headers and buttons

app/src/components/layout/sidebarLeft/Assets.tsx

@@ -2,7 +2,11 @@ import React, { useEffect, useState } from "react";
 import Search from "../../ui/inputs/Search";
 import { getCategoryAsset } from "../../../services/factoryBuilder/asset/assets/getCategoryAsset";
 import { fetchAssets } from "../../../services/marketplace/fetchAssets";
-import { useDecalStore, useDroppedDecal, useSelectedItem } from "../../../store/builder/store";
+import {
+  useDecalStore,
+  useDroppedDecal,
+  useSelectedItem,
+} from "../../../store/builder/store";
 
 // images -------------------
 import vehicle from "../../../assets/image/categories/vehicles.png";
@@ -17,6 +21,7 @@ import decal from "../../../assets/image/categories/decal.png";
 import SkeletonUI from "../../templates/SkeletonUI";
 import {
   AlertIcon,
+  ArrowIcon,
   DecalInfoIcon,
   HangTagIcon,
   NavigationIcon,
@@ -164,7 +169,9 @@ const Assets: React.FC = () => {
                 <div className="assets-result">
                   <div className="assets-wrapper">
                     <div className="searched-content">
-                      <p>Results for {searchValue}</p>
+                      <p>
+                        Results for <span className="search-for">'{searchValue}'</span>
+                      </p>
                     </div>
                     <div className="assets-container">
                       {categoryAssets?.map((asset: any, index: number) => (
@@ -210,7 +217,7 @@ const Assets: React.FC = () => {
             if (selectedCategory) {
               return (
                 <div className="assets-wrapper">
-                  <h2>
+                  <h2 className="header">
                     {selectedCategory}
                     <button
                       className="back-button"
@@ -221,7 +228,10 @@ const Assets: React.FC = () => {
                         setCategoryAssets([]);
                       }}
                     >
-                      ← Back
+                      <div className="back-arrow">
+                        <ArrowIcon />
+                      </div>
+                      Back
                     </button>
                   </h2>
 
@@ -231,7 +241,8 @@ const Assets: React.FC = () => {
                         {activeSubcategories.map((cat, index) => (
                           <div
                             key={index}
-                            className={`catogory-asset-filter-wrapper ${selectedSubCategory === cat.name ? "active" : ""
+                            className={`catogory-asset-filter-wrapper ${
+                              selectedSubCategory === cat.name ? "active" : ""
                             }`}
                             onClick={() => {
                               fetchCategoryDecals(cat.name);
@@ -308,7 +319,7 @@ const Assets: React.FC = () => {
                                 category: asset.category,
                                 decalName: asset.decalName,
                                 decalImage: asset.decalImage,
-                                decalId: asset.id
+                                decalId: asset.id,
                               });
                             }}
                           />
@@ -337,7 +348,7 @@ const Assets: React.FC = () => {
 
             return (
               <div className="assets-wrapper">
-                <h2>Categories</h2>
+                <h2 className="categories-header">Categories</h2>
                 <div className="categories-container">
                   {Array.from(
                     new Set(categoryList.map((asset) => asset.category))

app/src/styles/layout/sidebar.scss

@@ -1984,17 +1984,51 @@
     max-height: 50vh;
     overflow: auto;
 
-    h2,
+    .header,
-    .searched-content {
+    .searched-content,
+    .categories-header {
       color: var(--text-color);
-      font-family: $large;
       font-weight: $bold-weight;
-      padding: 8px;
+      padding: 4px 8px;
       @include flex-space-between;
-
+      position: sticky;
-      .back-button {
+      top: 0;
-        cursor: pointer;
+      z-index: 4;
+      background: var(--background-color);
+      border-radius: 0 0 12px 12px;
+      backdrop-filter: blur(4px);
+      .search-for{
+        display: inline-block;
+        color: var(--accent-color);
+        max-width: 238px;
+        overflow: hidden;
+        text-overflow: ellipsis;
       }
+      .back-button {
+        padding: 4px 12px;
+        border-radius: 20px;
+        transition: background 0.2s;
+        display: flex;
+        align-items: center;
+        .back-arrow {
+          margin-right: 2px;
+          transform: translateX(0) translateY(-1px) scale(1.6) rotate(90deg);
+          transition: all 0.2s;
+        }
+        &:hover {
+          background: var(--background-color-solid);
+          .back-arrow {
+            transform: translateX(-2px) translateY(-1px) scale(1.6)
+              rotate(90deg);
+          }
+        }
+      }
+    }
+
+    .categories-header,
+    .searched-content {
+      position: relative;
+      padding: 8px;
     }
 
     .categories-container {
@@ -2132,6 +2166,7 @@
       border: 1px solid #564b69;
       padding: 12px 10px;
       border-radius: 15px;
+      margin-bottom: 4px;
 
       .catogory-asset-filter-wrapper {
         display: flex;