🆙 Moved catalogue view to Tailwind

src/components/catalog/CatalogModernView.tsx

@@ -111,7 +111,7 @@ const CatalogModernViewInner: FC<{}> = () =>
                                     className={ `flex items-center gap-2 mx-1 px-1.5 py-1.5 rounded cursor-pointer transition-all duration-150 ${ showFavorites ? 'bg-primary text-white' : 'hover:bg-card-grid-item-active' }` }
                                     onClick={ () => setShowFavorites(!showFavorites) }
                                 >
-                                    <div className="w-[28px] h-[24px] flex items-center justify-center shrink-0 relative">
+                                    <div className="w-7 h-6 flex items-center justify-center shrink-0 relative">
                                         <FaHeart className={ `text-xs ${ showFavorites ? 'text-white' : totalFavs > 0 ? 'text-danger' : 'text-muted' }` } />
                                         { totalFavs > 0 &&
                                             <span className="absolute -top-1 -right-1 min-w-[14px] h-[14px] bg-danger text-white text-[8px] font-bold rounded-full flex items-center justify-center px-0.5 leading-none">
@@ -163,7 +163,7 @@ const CatalogModernViewInner: FC<{}> = () =>
                                                 activateNode(child);
                                             } }
                                         >
-                                            <div className="w-[28px] h-[24px] flex items-center justify-center shrink-0 relative">
+                                            <div className="w-7 h-6 flex items-center justify-center shrink-0 relative">
                                                 <CatalogIconView icon={ child.iconId } />
                                                 { isHidden && <FaEyeSlash className="absolute -bottom-0.5 -right-0.5 text-[7px] text-danger" /> }
                                             </div>

src/components/catalog/views/catalog-icon/CatalogIconView.tsx

@@ -1,20 +1,20 @@
 import { FC, useMemo } from 'react';
 import { GetConfigurationValue } from '../../../../api';
-import { LayoutImage } from '../../../../common';
 
 export interface CatalogIconViewProps
 {
     icon: number;
+    className?: string;
 }
 
 export const CatalogIconView: FC<CatalogIconViewProps> = props =>
 {
-    const { icon = 0 } = props;
+    const { icon = 0, className = '' } = props;
 
-    const getIconUrl = useMemo(() =>
+    const iconUrl = useMemo(() =>
     {
         return ((GetConfigurationValue<string>('catalog.asset.icon.url')).replace('%name%', icon.toString()));
     }, [ icon ]);
 
-    return <LayoutImage imageUrl={ getIconUrl } style={ { width: 20, height: 20 } } />;
+    return <img src={ iconUrl } alt="" className={ `w-5 h-5 object-contain image-rendering-pixelated ${ className }` } draggable={ false } />;
 };

src/components/catalog/views/catalog-rail/CatalogRailItemView.tsx

@@ -19,8 +19,8 @@ export const CatalogRailItemView: FC<CatalogRailItemViewProps> = props =>
             title={ node.localization }
             onClick={ onClick }
         >
-            <div className="w-[30px] h-[30px] flex items-center justify-center shrink-0">
-                <CatalogIconView icon={ node.iconId } />
+            <div className="w-8 h-8 flex items-center justify-center shrink-0">
+                <CatalogIconView icon={ node.iconId } className="w-6 h-6" />
             </div>
             <span className={ `text-[11px] font-medium whitespace-nowrap overflow-hidden opacity-0 group-hover:opacity-100 transition-opacity duration-200 truncate ${ isActive ? 'text-catalog-accent' : 'text-catalog-text' }` }>
                 { node.localization }

src/components/catalog/views/favorites/CatalogFavoritesView.tsx

@@ -121,7 +121,7 @@ export const CatalogFavoritesView: FC<CatalogFavoritesViewProps> = props =>
                                     onClick={ () => { openPageByOfferId(fav.offerId); onClose(); } }
                                 >
                                     { /* Furni icon */ }
-                                    <div className="w-[28px] h-[28px] flex items-center justify-center shrink-0 bg-white rounded border border-card-grid-item-border overflow-hidden">
+                                    <div className="w-7 h-7 flex items-center justify-center shrink-0 bg-white rounded border border-card-grid-item-border overflow-hidden">
                                         { fav.iconUrl
                                             ? <img className="max-w-full max-h-full object-contain image-rendering-pixelated" src={ fav.iconUrl } />
                                             : fav.nodeIconId !== null

src/components/catalog/views/navigation/CatalogNavigationItemView.tsx

@@ -86,7 +86,7 @@ export const CatalogNavigationItemView: FC<CatalogNavigationItemViewProps> = pro
             >
                 { adminMode &&
                     <FaArrowsAlt className="text-[7px] text-muted cursor-grab shrink-0 opacity-0 group-hover/nav:opacity-60" /> }
-                <div className="w-[20px] h-[20px] flex items-center justify-center shrink-0">
+                <div className="w-5 h-5 flex items-center justify-center shrink-0">
                     <CatalogIconView icon={ node.iconId } />
                 </div>
                 <span className="flex-1 truncate" title={ adminMode ? `Page ID: ${ node.pageId }` : undefined }>{ node.localization }</span>

src/css/index.css

@@ -30,51 +30,45 @@ body {
 }
 
 ::-webkit-scrollbar {
-    width: .5rem
+    width: .625rem;
 }
 
 ::-webkit-scrollbar:horizontal {
-    height: .5rem
+    height: .625rem;
 }
 
 ::-webkit-scrollbar:not(:horizontal) {
-    width: .5rem
+    width: .625rem;
 }
 
-::-webkit-scrollbar-track:horizontal {
-    border-bottom: .25rem solid rgba(0, 0, 0, .1)
+::-webkit-scrollbar-track {
+    background: rgba(0, 0, 0, .08);
+    border-radius: .5rem;
 }
 
-::-webkit-scrollbar-track:not(:horizontal) {
-    border-right: .25rem solid rgba(0, 0, 0, .1)
+::-webkit-scrollbar-thumb {
+    background: rgba(30, 114, 149, .35);
+    border-radius: .5rem;
+    border: 2px solid transparent;
+    background-clip: padding-box;
 }
 
-::-webkit-scrollbar-thumb:horizontal {
-    border-bottom: .25rem solid rgba(30, 114, 149, .4)
+::-webkit-scrollbar-thumb:hover {
+    background: rgba(30, 114, 149, .6);
+    border-radius: .5rem;
+    border: 2px solid transparent;
+    background-clip: padding-box;
 }
 
-::-webkit-scrollbar-thumb:horizontal:hover {
-    border-bottom: .25rem solid rgba(30, 114, 149, .8)
-}
-
-::-webkit-scrollbar-thumb:horizontal:active {
-    border-bottom: .25rem solid #185D79
-}
-
-::-webkit-scrollbar-thumb:not(:horizontal) {
-    border-right: .25rem solid rgba(30, 114, 149, .4)
-}
-
-::-webkit-scrollbar-thumb:not(:horizontal):hover {
-    border-right: .25rem solid rgba(30, 114, 149, .8)
-}
-
-::-webkit-scrollbar-thumb:not(:horizontal):active {
-    border-right: .25rem solid #185D79
+::-webkit-scrollbar-thumb:active {
+    background: #185D79;
+    border-radius: .5rem;
+    border: 2px solid transparent;
+    background-clip: padding-box;
 }
 
 ::-webkit-scrollbar-corner {
-    background: rgba(0, 0, 0, .1)
+    background: rgba(0, 0, 0, .08);
 }
 
 @layer components {