diff --git a/app/src/components/layout/sidebarLeft/Assets.tsx b/app/src/components/layout/sidebarLeft/Assets.tsx index 824062f..47e797a 100644 --- a/app/src/components/layout/sidebarLeft/Assets.tsx +++ b/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 = () => {
-

Results for {searchValue}

+

+ Results for '{searchValue}' +

{categoryAssets?.map((asset: any, index: number) => ( @@ -210,7 +217,7 @@ const Assets: React.FC = () => { if (selectedCategory) { return (
-

+

{selectedCategory}

@@ -231,8 +241,9 @@ const Assets: React.FC = () => { {activeSubcategories.map((cat, index) => (
{ 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 (
-

Categories

+

Categories

{Array.from( new Set(categoryList.map((asset) => asset.category)) diff --git a/app/src/styles/layout/sidebar.scss b/app/src/styles/layout/sidebar.scss index aa8e84e..e3dd706 100644 --- a/app/src/styles/layout/sidebar.scss +++ b/app/src/styles/layout/sidebar.scss @@ -1984,17 +1984,51 @@ max-height: 50vh; overflow: auto; - h2, - .searched-content { + .header, + .searched-content, + .categories-header { color: var(--text-color); - font-family: $large; font-weight: $bold-weight; - padding: 8px; + padding: 4px 8px; @include flex-space-between; - - .back-button { - cursor: pointer; + position: sticky; + top: 0; + 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;