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,8 +241,9 @@ 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);
                               setSelectedSubCategory(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))