From eceea27625e5480985c0d27e0994edbc6042be23 Mon Sep 17 00:00:00 2001
From: Daniil Polienko <donyaschefer@gmail.com>
Date: Wed, 18 Dec 2024 16:34:01 +0300
Subject: [PATCH 1/2] fix: strategies ui

---
 .../details/tabs/VaultDetailsStrategies.tsx   | 36 ++++++++++---------
 .../components/list/VaultsV3ListHead.tsx      |  2 +-
 .../components/list/VaultsV3ListRow.tsx       |  7 ++--
 3 files changed, 26 insertions(+), 19 deletions(-)

diff --git a/apps/vaults-v3/components/details/tabs/VaultDetailsStrategies.tsx b/apps/vaults-v3/components/details/tabs/VaultDetailsStrategies.tsx
index 72242aa86..ec2ab14e4 100755
--- a/apps/vaults-v3/components/details/tabs/VaultDetailsStrategies.tsx
+++ b/apps/vaults-v3/components/details/tabs/VaultDetailsStrategies.tsx
@@ -27,7 +27,7 @@ export function VaultDetailsStrategies({currentVault}: {currentVault: TYDaemonVa
 		for (const strategy of currentVault?.strategies || []) {
 			_vaultList.push(vaults[strategy.address]);
 		}
-		return _vaultList;
+		return _vaultList.filter(Boolean);
 	}, [vaults, currentVault]);
 
 	const strategyList = useMemo((): TYDaemonVaultStrategy[] => {
@@ -64,22 +64,26 @@ export function VaultDetailsStrategies({currentVault}: {currentVault: TYDaemonVa
 	 **	sortDirection values.
 	 **********************************************************************************************/
 	const sortedVaultsToDisplay = useSortVaults([...searchedVaultsToDisplay], sortBy, sortDirection);
+	const isVaultListEmpty = sortedVaultsToDisplay.length === 0;
 
 	return (
 		<>
-			<div className={'col-span-12 w-full p-4 md:px-8 md:pb-8'}>
-				<div className={'w-1/2'}>
-					<p className={'pb-2 text-[#757CA6]'}>{'Search'}</p>
-					<SearchBar
-						className={'max-w-none rounded-lg border-none bg-neutral-300 text-neutral-900 md:w-full'}
-						iconClassName={'text-neutral-900'}
-						searchPlaceholder={'YFI Vault'}
-						searchValue={search as string}
-						onSearch={onSearch}
-					/>
+			{isVaultListEmpty ? null : (
+				<div className={'col-span-12 w-full p-4 md:px-8 md:pb-8'}>
+					<div className={'w-1/2'}>
+						<p className={'pb-2 text-[#757CA6]'}>{'Search'}</p>
+						<SearchBar
+							className={'max-w-none rounded-lg border-none bg-neutral-300 text-neutral-900 md:w-full'}
+							iconClassName={'text-neutral-900'}
+							searchPlaceholder={'YFI Vault'}
+							searchValue={search as string}
+							onSearch={onSearch}
+						/>
+					</div>
 				</div>
-			</div>
-			<div className={cl(sortedVaultsToDisplay.length === 0 ? 'hidden' : '')}>
+			)}
+
+			<div className={cl(isVaultListEmpty ? 'hidden' : '')}>
 				<div className={'grid grid-cols-12 px-8 pb-6 md:gap-6'}>
 					<div className={'col-span-12 flex w-full flex-col'}>
 						<VaultsV3ListHead
@@ -91,7 +95,7 @@ export function VaultDetailsStrategies({currentVault}: {currentVault: TYDaemonVa
 							}}
 							items={[
 								{label: 'Vault', value: 'name', sortable: true, className: 'col-span-2'},
-								{label: 'Risk Level', value: 'score', sortable: true, className: 'col-span-1'},
+								{label: 'Risk Level', value: 'score', sortable: true, className: 'col-span-2'},
 								{label: 'Est. APY', value: 'estAPY', sortable: true, className: 'col-span-2'},
 								{label: 'Hist. APY', value: 'APY', sortable: true, className: 'col-span-2'},
 								{label: 'Available', value: 'available', sortable: true, className: 'col-span-2'},
@@ -132,7 +136,7 @@ export function VaultDetailsStrategies({currentVault}: {currentVault: TYDaemonVa
 					</div>
 				</div>
 			) : null}
-			<div className={cl(sortedVaultsToDisplay.length === 0 && search === '' ? '' : 'hidden')}>
+			<div className={cl(isVaultListEmpty && search === null ? '' : 'hidden')}>
 				<div className={'mx-auto flex h-96 w-full flex-col items-center justify-center px-10 py-2 md:w-3/4'}>
 					<b className={'text-center text-lg'}>{'This vault IS the strategy'}</b>
 					<p className={'text-center text-neutral-600'}>
@@ -140,7 +144,7 @@ export function VaultDetailsStrategies({currentVault}: {currentVault: TYDaemonVa
 					</p>
 				</div>
 			</div>
-			<div className={cl(sortedVaultsToDisplay.length === 0 && search !== '' ? '' : 'hidden')}>
+			<div className={cl(isVaultListEmpty && search ? '' : 'hidden')}>
 				<div className={'mx-auto flex h-96 w-full flex-col items-center justify-center px-10 py-2 md:w-3/4'}>
 					<b className={'text-center text-lg'}>{'No vaults found'}</b>
 					<p className={'text-center text-neutral-600'}>{'Try another search term'}</p>
diff --git a/apps/vaults-v3/components/list/VaultsV3ListHead.tsx b/apps/vaults-v3/components/list/VaultsV3ListHead.tsx
index 131537841..c14910636 100644
--- a/apps/vaults-v3/components/list/VaultsV3ListHead.tsx
+++ b/apps/vaults-v3/components/list/VaultsV3ListHead.tsx
@@ -79,7 +79,7 @@ export function VaultsV3ListHead({items, sortBy, sortDirection, onSort}: TListHe
 
 				<div />
 
-				<div className={cl('col-span-7 z-10', 'grid grid-cols-2 md:grid-cols-11 gap-1', 'mt-4 md:mt-0')}>
+				<div className={cl('col-span-7 z-10', 'grid grid-cols-2 md:grid-cols-12 gap-1', 'mt-4 md:mt-0')}>
 					{rest.map(
 						(item, index): ReactElement => (
 							<button
diff --git a/apps/vaults-v3/components/list/VaultsV3ListRow.tsx b/apps/vaults-v3/components/list/VaultsV3ListRow.tsx
index 55d70a756..775785315 100755
--- a/apps/vaults-v3/components/list/VaultsV3ListRow.tsx
+++ b/apps/vaults-v3/components/list/VaultsV3ListRow.tsx
@@ -524,12 +524,15 @@ function VaultRiskScoreTag({riskLevel}: {riskLevel: number}): ReactElement {
 	const level = riskLevel < 0 ? 0 : riskLevel > 5 ? 5 : riskLevel;
 	const riskColor = [`transparent`, `#63C532`, `#F8A908`, `#F8A908`, `#C73203`, `#C73203`];
 	return (
-		<div className={'col-span-2 flex flex-row justify-between md:col-span-2 md:flex-col md:justify-center'}>
+		<div
+			className={
+				'col-span-2 flex flex-row justify-between md:col-span-2 md:flex-col  md:items-end md:justify-center'
+			}>
 			<p className={'inline whitespace-nowrap text-start text-xs text-neutral-800/60 md:hidden'}>
 				{'Risk Score'}
 			</p>
 			<div className={cl('flex w-fit items-center justify-end gap-4 md:justify-center', 'tooltip relative z-50')}>
-				<div className={'mt-[6px] h-3 w-10 min-w-10 rounded-sm border-2 border-neutral-400 p-[2px]'}>
+				<div className={'h-3 w-10 min-w-10 rounded-sm border-2 border-neutral-400 p-[2px]'}>
 					<div
 						className={'h-1 rounded-[1px]'}
 						style={{

From df43680aa1fd813212bd7bf2d37f8a662ce36e9b Mon Sep 17 00:00:00 2001
From: Daniil Polienko <donyaschefer@gmail.com>
Date: Wed, 18 Dec 2024 17:07:43 +0300
Subject: [PATCH 2/2] fix: grid

---
 .../components/details/tabs/VaultDetailsStrategies.tsx     | 7 ++++++-
 apps/vaults-v3/components/list/VaultsV3ListHead.tsx        | 2 +-
 apps/vaults-v3/components/list/VaultsV3ListRow.tsx         | 5 +----
 apps/vaults/components/list/VaultsListRow.tsx              | 2 +-
 4 files changed, 9 insertions(+), 7 deletions(-)

diff --git a/apps/vaults-v3/components/details/tabs/VaultDetailsStrategies.tsx b/apps/vaults-v3/components/details/tabs/VaultDetailsStrategies.tsx
index ec2ab14e4..dee48413c 100755
--- a/apps/vaults-v3/components/details/tabs/VaultDetailsStrategies.tsx
+++ b/apps/vaults-v3/components/details/tabs/VaultDetailsStrategies.tsx
@@ -95,7 +95,12 @@ export function VaultDetailsStrategies({currentVault}: {currentVault: TYDaemonVa
 							}}
 							items={[
 								{label: 'Vault', value: 'name', sortable: true, className: 'col-span-2'},
-								{label: 'Risk Level', value: 'score', sortable: true, className: 'col-span-2'},
+								{
+									label: 'Risk Level',
+									value: 'score',
+									sortable: true,
+									className: 'col-span-1 text-nowrap'
+								},
 								{label: 'Est. APY', value: 'estAPY', sortable: true, className: 'col-span-2'},
 								{label: 'Hist. APY', value: 'APY', sortable: true, className: 'col-span-2'},
 								{label: 'Available', value: 'available', sortable: true, className: 'col-span-2'},
diff --git a/apps/vaults-v3/components/list/VaultsV3ListHead.tsx b/apps/vaults-v3/components/list/VaultsV3ListHead.tsx
index c14910636..131537841 100644
--- a/apps/vaults-v3/components/list/VaultsV3ListHead.tsx
+++ b/apps/vaults-v3/components/list/VaultsV3ListHead.tsx
@@ -79,7 +79,7 @@ export function VaultsV3ListHead({items, sortBy, sortDirection, onSort}: TListHe
 
 				<div />
 
-				<div className={cl('col-span-7 z-10', 'grid grid-cols-2 md:grid-cols-12 gap-1', 'mt-4 md:mt-0')}>
+				<div className={cl('col-span-7 z-10', 'grid grid-cols-2 md:grid-cols-11 gap-1', 'mt-4 md:mt-0')}>
 					{rest.map(
 						(item, index): ReactElement => (
 							<button
diff --git a/apps/vaults-v3/components/list/VaultsV3ListRow.tsx b/apps/vaults-v3/components/list/VaultsV3ListRow.tsx
index 775785315..a5e381ee1 100755
--- a/apps/vaults-v3/components/list/VaultsV3ListRow.tsx
+++ b/apps/vaults-v3/components/list/VaultsV3ListRow.tsx
@@ -524,10 +524,7 @@ function VaultRiskScoreTag({riskLevel}: {riskLevel: number}): ReactElement {
 	const level = riskLevel < 0 ? 0 : riskLevel > 5 ? 5 : riskLevel;
 	const riskColor = [`transparent`, `#63C532`, `#F8A908`, `#F8A908`, `#C73203`, `#C73203`];
 	return (
-		<div
-			className={
-				'col-span-2 flex flex-row justify-between md:col-span-2 md:flex-col  md:items-end md:justify-center'
-			}>
+		<div className={'col-span-2 flex flex-row justify-between md:col-span-2 md:flex-col md:justify-center'}>
 			<p className={'inline whitespace-nowrap text-start text-xs text-neutral-800/60 md:hidden'}>
 				{'Risk Score'}
 			</p>
diff --git a/apps/vaults/components/list/VaultsListRow.tsx b/apps/vaults/components/list/VaultsListRow.tsx
index e6049a35c..304f7bc25 100755
--- a/apps/vaults/components/list/VaultsListRow.tsx
+++ b/apps/vaults/components/list/VaultsListRow.tsx
@@ -443,7 +443,7 @@ export function VaultsListRow({currentVault}: {currentVault: TYDaemonVault}): Re
 
 				<div className={'col-span-1'} />
 
-				<div className={cl('col-span-7 z-10', 'grid grid-cols-2 md:grid-cols-10 gap-1', 'mt-4 md:mt-0')}>
+				<div className={cl('col-span-7 z-10', 'grid grid-cols-2 md:grid-cols-12 gap-1', 'mt-4 md:mt-0')}>
 					<div
 						className={'yearn--table-data-section-item col-span-2 flex-row md:flex-col'}
 						datatype={'number'}>