fix: minor UI adjustments

yearn · Oct 5, 2023 · 13cb98f · 13cb98f
1 parent a27685a
commit 13cb98f
Show file tree

Hide file tree

Showing 4 changed files with 22 additions and 75 deletions.
diff --git a/apps/common/components/SearchBar.tsx b/apps/common/components/SearchBar.tsx
@@ -1,15 +1,18 @@
+import {cl} from '@yearn-finance/web-lib/utils/cl';
+
 import type {ChangeEvent, ReactElement} from 'react';
 
 export type TSearchBar = {
 	searchPlaceholder: string;
 	searchValue: string;
 	set_searchValue: (searchValue: string) => void;
+	className?: string;
 };
 
-export function SearchBar({searchPlaceholder, searchValue, set_searchValue}: TSearchBar): ReactElement {
+export function SearchBar({searchPlaceholder, searchValue, set_searchValue, className}: TSearchBar): ReactElement {
 	return (
 		<>
-			<div className={'mt-1 flex h-10 w-full max-w-md items-center border border-neutral-0 bg-neutral-0 p-2 md:w-2/3'}>
+			<div className={cl(className, 'mt-1 flex h-10 w-full max-w-md items-center border border-neutral-0 bg-neutral-0 p-2 md:w-2/3')}>
 				<div className={'relative flex h-10 w-full flex-row items-center justify-between'}>
 					<input
 						id={'search'}

diff --git a/apps/vaults/components/ListHero.tsx b/apps/vaults/components/ListHero.tsx
@@ -1,5 +1,4 @@
-import {useMemo, useState} from 'react';
-import {Switch as HeadlessSwitch} from '@headlessui/react';
+import {useMemo} from 'react';
 import {IconArbitrumChain} from '@yearn-finance/web-lib/icons/chains/IconArbitrumChain';
 import {IconBaseChain} from '@yearn-finance/web-lib/icons/chains/IconBaseChain';
 import {IconEtherumChain} from '@yearn-finance/web-lib/icons/chains/IconEtherumChain';
@@ -8,16 +7,10 @@ import {IconOptimismChain} from '@yearn-finance/web-lib/icons/chains/IconOptimis
 import {MultiSelectDropdown} from '@common/components/MultiSelectDropdown';
 import {SearchBar} from '@common/components/SearchBar';
 
-import type {ChangeEvent, ReactElement} from 'react';
+import type {ReactElement} from 'react';
 import type {TMultiSelectOptionProps} from '@common/components/MultiSelectDropdown';
 
-type TSwitchProps = {
-	isEnabled: boolean;
-	onSwitch?: (state: boolean) => void;
-};
-
 type TListHero = {
-	switchProps?: TSwitchProps;
 	categories: string;
 	selectedChains: string;
 	searchValue: string;
@@ -26,36 +19,7 @@ type TListHero = {
 	set_searchValue: (searchValue: string) => void;
 };
 
-function Switch(props: TSwitchProps): ReactElement {
-	const {isEnabled, onSwitch} = props;
-	const [isEnabledState, set_isEnabledState] = useState(isEnabled);
-
-	function safeOnSwitch(): void {
-		if (onSwitch) {
-			onSwitch(!isEnabled);
-		} else {
-			set_isEnabledState(!isEnabledState);
-		}
-	}
-
-	return (
-		<div>
-			<HeadlessSwitch
-				checked={onSwitch ? isEnabled : isEnabledState}
-				onChange={safeOnSwitch}
-				onKeyDown={({keyCode}: {keyCode: number}): unknown => (keyCode === 13 ? safeOnSwitch() : null)}
-				className={'yearn--next-switch'}>
-				<span className={'sr-only'}>{'Use setting'}</span>
-				<div
-					aria-hidden={'true'}
-					className={(onSwitch ? isEnabled : isEnabledState) ? 'translate-x-[14px]' : 'translate-x-0'}
-				/>
-			</HeadlessSwitch>
-		</div>
-	);
-}
-
-export function ListHero({categories, set_categories, searchValue, selectedChains, set_searchValue, set_selectedChains, switchProps}: TListHero): ReactElement {
+export function ListHero({categories, set_categories, searchValue, selectedChains, set_searchValue, set_selectedChains}: TListHero): ReactElement {
 	const chainOptions = useMemo((): TMultiSelectOptionProps[] => {
 		const chainsFromJSON = JSON.parse(selectedChains || '[]') as number[];
 		return [
@@ -154,8 +118,8 @@ export function ListHero({categories, set_categories, searchValue, selectedChain
 
 	return (
 		<div className={'flex flex-col items-start justify-between space-x-0 px-4 pb-2 pt-4 md:px-10 md:pb-8 md:pt-10'}>
-			<div className={'hidden w-full flex-row items-center justify-between space-x-4 md:flex'}>
-				<div className={'w-1/3'}>
+			<div className={'mt-0 flex w-full flex-col items-center justify-between gap-4 md:mt-0 md:flex-row'}>
+				<div className={'w-full md:w-1/3'}>
 					<small>{'Filter'}</small>
 					<MultiSelectDropdown
 						options={categoryOptions}
@@ -167,7 +131,7 @@ export function ListHero({categories, set_categories, searchValue, selectedChain
 					/>
 				</div>
 
-				<div className={'w-1/3'}>
+				<div className={'w-full md:w-1/3'}>
 					<small>{'Select Blockchain'}</small>
 					<MultiSelectDropdown
 						options={chainOptions}
@@ -179,35 +143,15 @@ export function ListHero({categories, set_categories, searchValue, selectedChain
 					/>
 				</div>
 
-				<div className={'w-1/3'}>
+				<div className={'w-full md:w-1/3'}>
 					<small>{'Search'}</small>
 					<SearchBar
+						className={'md:w-full'}
 						searchPlaceholder={'YFI Vault'}
 						searchValue={searchValue}
 						set_searchValue={set_searchValue}
 					/>
 				</div>
-
-				{!!switchProps && (
-					<div className={'mr-4 mt-7 flex h-full min-w-fit flex-row'}>
-						<small className={'mr-2'}>{'Hide gauges with 0 votes'}</small>
-						<Switch {...switchProps} />
-					</div>
-				)}
-			</div>
-
-			<div className={'flex w-full flex-row space-x-2 md:hidden md:w-2/3'}>
-				<div className={'flex h-8 w-full items-center border border-neutral-0 bg-neutral-0 p-2 md:w-auto'}>
-					<div className={'flex h-8 w-full flex-row items-center justify-between px-0 py-2'}>
-						<input
-							className={'w-full overflow-x-scroll border-none bg-transparent px-0 py-2 text-xs outline-none scrollbar-none'}
-							type={'text'}
-							placeholder={'Search'}
-							value={searchValue}
-							onChange={(e: ChangeEvent<HTMLInputElement>): void => set_searchValue(e.target.value)}
-						/>
-					</div>
-				</div>
 			</div>
 		</div>
 	);

diff --git a/apps/vaults/components/list/VaultsListRow.tsx b/apps/vaults/components/list/VaultsListRow.tsx
@@ -84,11 +84,15 @@ export function VaultForwardAPR({currentVault}: {currentVault: TYDaemonVault}):
 		return (
 			<span className={'tooltip'}>
 				<div className={'flex flex-col text-right'}>
-					<b className={'yearn--table-data-section-item-value'}>
+					<b
+						className={
+							'yearn--table-data-section-item-value underline decoration-neutral-600/30 decoration-dotted underline-offset-4 transition-opacity hover:decoration-neutral-600'
+						}>
 						<Renderable
 							shouldRender={!(currentVault.apr?.type === 'new' && isZero(currentVault.apr.forwardAPR.netAPR))}
 							fallback={'New'}>
 							<RenderAmount
+								shouldHideTooltip
 								value={currentVault.apr.forwardAPR.netAPR}
 								symbol={'percent'}
 								decimals={6}
@@ -106,6 +110,7 @@ export function VaultForwardAPR({currentVault}: {currentVault: TYDaemonVault}):
 								<div className={'font-number flex w-full flex-row justify-between space-x-4 whitespace-nowrap text-neutral-400 md:text-xs'}>
 									<p>{'• Base APR '}</p>
 									<RenderAmount
+										shouldHideTooltip
 										value={unBoostedAPR}
 										symbol={'percent'}
 										decimals={6}

diff --git a/pages/vaults/index.tsx b/pages/vaults/index.tsx
@@ -282,8 +282,8 @@ function Index(): ReactElement {
 		<section className={'mt-4 grid w-full grid-cols-12 gap-y-10 pb-10 md:mt-20 md:gap-x-10 md:gap-y-20'}>
 			<HeaderUserPosition />
 
-			<div className={'relative col-span-12 flex w-full flex-col bg-neutral-100'}>
-				<div className={'absolute right-8 top-8'}>
+			<div className={'relative col-span-12 flex w-full flex-col overflow-x-hidden bg-neutral-100'}>
+				<div className={'absolute right-5 top-3 md:right-8 md:top-8'}>
 					<VaultListOptions />
 				</div>
 				<ListHero
@@ -332,12 +332,7 @@ function Index(): ReactElement {
 					onSort={onSort}
 					dataClassName={'grid-cols-10'}
 					items={[
-						{
-							label: <IconChain />,
-							value: 'name',
-							sortable: false,
-							className: 'col-span-1'
-						},
+						{label: <IconChain />, value: 'chain', sortable: false, className: 'col-span-1'},
 						{label: 'Token', value: 'name', sortable: true},
 						{label: 'Est. APR', value: 'forwardAPR', sortable: true, className: 'col-span-2'},
 						{label: 'Hist. APR', value: 'apr', sortable: true, className: 'col-span-2'},