From 2dfa07e07521a462fc2500cd3d5af5b94f159415 Mon Sep 17 00:00:00 2001
From: Daniil Polienko <donyaschefer@gmail.com>
Date: Wed, 20 Nov 2024 16:38:37 +0300
Subject: [PATCH] chore: layout fixes

---
 apps/common/components/MobileNavbar.tsx |  5 ++--
 apps/common/components/Sidebar.tsx      | 38 ++++++++++++-------------
 apps/common/icons/IconVaults.tsx        | 10 +++----
 pages/apps/[category].tsx               | 14 +++++----
 pages/apps/index.tsx                    | 13 +++++----
 5 files changed, 43 insertions(+), 37 deletions(-)

diff --git a/apps/common/components/MobileNavbar.tsx b/apps/common/components/MobileNavbar.tsx
index e2e3b5361..84f20d9d5 100644
--- a/apps/common/components/MobileNavbar.tsx
+++ b/apps/common/components/MobileNavbar.tsx
@@ -11,7 +11,8 @@ import type {ReactElement} from 'react';
 export function MobileNavbar({onClose}: {onClose: VoidFunction}): ReactElement {
 	const pathName = usePathname();
 
-	const currentTab = pathName?.startsWith('/apps') ? pathName?.split('/')[2] : '/';
+	const currentTab = pathName?.startsWith('/apps/') ? pathName?.split('/')[2] : 'apps';
+
 	return (
 		<div
 			className={
@@ -25,7 +26,7 @@ export function MobileNavbar({onClose}: {onClose: VoidFunction}): ReactElement {
 							currentTab === tab.route ? 'text-white' : 'text-gray-400'
 						)}
 						onClick={onClose}
-						href={tab.route === '/apps' ? tab.route : `/apps/${tab.route}`}>
+						href={tab.route === 'apps' ? `/${tab.route}` : `/apps/${tab.route}`}>
 						<div className={'flex size-6 items-center justify-center'}>
 							{iconsDict[tab.route as keyof typeof iconsDict]}
 						</div>
diff --git a/apps/common/components/Sidebar.tsx b/apps/common/components/Sidebar.tsx
index 186fe0f58..aada40dbf 100644
--- a/apps/common/components/Sidebar.tsx
+++ b/apps/common/components/Sidebar.tsx
@@ -19,7 +19,7 @@ export function Sidebar(props: TSidebarProps): ReactElement {
 	const router = useRouter();
 	const {configuration, dispatch} = useSearch();
 
-	const currentTab = pathName?.startsWith('/apps') ? pathName?.split('/')[2] : '/';
+	const currentTab = pathName?.startsWith('/apps/') ? pathName?.split('/')[2] : 'apps';
 
 	const onSearchClick = useCallback(() => {
 		if (!configuration.searchValue) {
@@ -58,24 +58,24 @@ export function Sidebar(props: TSidebarProps): ReactElement {
 					/>
 				</div>
 				<div className={'mt-6 flex flex-col'}>
-					{props.tabs.map(tab => (
-						<Link
-							className={cl(
-								'py-2 px-[28px] flex gap-4 text-base hover:bg-gray-600/40',
-								currentTab === tab.route ? 'text-white font-bold' : 'text-gray-400'
-							)}
-							href={tab.route === '/apps' ? tab.route : `/apps/${tab.route}`}
-							key={tab.route}>
-							<div className={'flex size-6 items-center justify-center'}>
-								{
-									iconsDict[
-										tab.route as 'apps' | 'community-apps' | 'vaults' | 'yearn-x' | 'integrations'
-									]
-								}
-							</div>
-							<p>{tab.title}</p>
-						</Link>
-					))}
+					{props.tabs.map(tab => {
+						const href = tab.route === 'apps' ? `/${tab.route}` : `/apps/${tab.route}`;
+						return (
+							<Link
+								className={cl(
+									'py-2 px-[28px] flex gap-4 text-base hover:bg-gray-600/40',
+									currentTab === tab.route ? 'text-white font-bold' : 'text-gray-400'
+								)}
+								shallow
+								href={href}
+								key={tab.route}>
+								<div className={'flex size-6 items-center justify-center'}>
+									{iconsDict[tab.route as keyof typeof iconsDict]}
+								</div>
+								<p>{tab.title}</p>
+							</Link>
+						);
+					})}
 				</div>
 			</div>
 
diff --git a/apps/common/icons/IconVaults.tsx b/apps/common/icons/IconVaults.tsx
index 6789997aa..cb6cd5213 100644
--- a/apps/common/icons/IconVaults.tsx
+++ b/apps/common/icons/IconVaults.tsx
@@ -26,35 +26,35 @@ export function IconVaults(props: React.SVGProps<SVGSVGElement>): ReactElement {
 				width={'16'}
 				height={'16'}
 				rx={'3'}
-				stroke={'#9D9D9D'}
+				stroke={'currentColor'}
 				strokeWidth={'1.5'}
 				strokeLinecap={'round'}
 				strokeLinejoin={'round'}
 			/>
 			<path
 				d={'M12.7763 9.10264L13.0352 8.13672'}
-				stroke={'#9D9D9D'}
+				stroke={'currentColor'}
 				strokeWidth={'1.5'}
 				strokeLinecap={'round'}
 				strokeLinejoin={'round'}
 			/>
 			<path
 				d={'M10.9648 15.8634L11.2236 14.8975'}
-				stroke={'#9D9D9D'}
+				stroke={'currentColor'}
 				strokeWidth={'1.5'}
 				strokeLinecap={'round'}
 				strokeLinejoin={'round'}
 			/>
 			<path
 				d={'M14.8974 12.7763L15.8633 13.0352'}
-				stroke={'#9D9D9D'}
+				stroke={'currentColor'}
 				strokeWidth={'1.5'}
 				strokeLinecap={'round'}
 				strokeLinejoin={'round'}
 			/>
 			<path
 				d={'M8.13661 10.9648L9.10254 11.2236'}
-				stroke={'#9D9D9D'}
+				stroke={'currentColor'}
 				strokeWidth={'1.5'}
 				strokeLinecap={'round'}
 				strokeLinejoin={'round'}
diff --git a/pages/apps/[category].tsx b/pages/apps/[category].tsx
index f502f4456..cd32dc681 100644
--- a/pages/apps/[category].tsx
+++ b/pages/apps/[category].tsx
@@ -10,8 +10,10 @@ import type {TApp} from '@common/types/category';
 
 export default function Index(props: {router: NextRouter}): ReactElement {
 	const [shuffledApps, set_shuffledApps] = useState<TApp[]>();
-	const currentCatrgory = useMemo(() => {
-		const currentTab = props.router.asPath?.startsWith('/apps') ? props.router.asPath?.split('/')[2] : '/';
+	const currentCategory = useMemo(() => {
+		const currentTab = props.router.asPath?.startsWith('/apps/')
+			? props.router.asPath?.split('/')[2]
+			: 'featured-apps';
 		return CATEGORIES_DICT[currentTab as keyof typeof CATEGORIES_DICT];
 	}, [props.router.asPath]);
 
@@ -19,10 +21,10 @@ export default function Index(props: {router: NextRouter}): ReactElement {
 	 ** On component mount we shuffle the array of Apps to avoid any bias.
 	 **********************************************************************************************/
 	useMountEffect(() => {
-		if (currentCatrgory?.apps.length < 1) {
+		if (currentCategory?.apps.length < 1) {
 			return;
 		}
-		set_shuffledApps(currentCatrgory?.apps.toSorted(() => 0.5 - Math.random()));
+		set_shuffledApps(currentCategory?.apps.toSorted(() => 0.5 - Math.random()));
 	});
 
 	return (
@@ -30,11 +32,11 @@ export default function Index(props: {router: NextRouter}): ReactElement {
 			<div className={'flex w-full max-w-4xl flex-col'}>
 				<div className={'mb-10 flex w-full flex-col justify-start'}>
 					<p className={'text-3xl font-bold text-white md:text-[64px] md:leading-[64px]'}>
-						{currentCatrgory?.categoryName}
+						{currentCategory?.categoryName}
 					</p>
 
 					<p className={'mt-4 max-w-[610px] text-base text-gray-400'}>
-						{currentCatrgory?.categoryDescription}
+						{currentCategory?.categoryDescription}
 					</p>
 				</div>
 
diff --git a/pages/apps/index.tsx b/pages/apps/index.tsx
index b46f438aa..b11ee993c 100644
--- a/pages/apps/index.tsx
+++ b/pages/apps/index.tsx
@@ -40,11 +40,14 @@ export default function Home(): ReactElement {
 					</div>
 
 					<div>
-						<CarouselSlideArrows
-							onScrollBack={onScrollBack}
-							onScrollForward={onScrollForward}
-							className={'mb-6'}
-						/>
+						<div className={'mb-6 flex items-start justify-between'}>
+							<p className={'text-lg font-bold text-white'}>{'Featured Apps'}</p>
+							<CarouselSlideArrows
+								onScrollBack={onScrollBack}
+								onScrollForward={onScrollForward}
+								className={'w-auto'}
+							/>
+						</div>
 
 						<AppsCarousel
 							ref={carouselRef}