fix: minor stuff

yearn · Nov 19, 2024 · f808667 · f808667
1 parent 3f32cde
commit f808667
Show file tree

Hide file tree

Showing 9 changed files with 20 additions and 18 deletions.
diff --git a/apps/common/components/ModalMobileMenu.tsx b/apps/common/components/ModalMobileMenu.tsx
@@ -97,8 +97,7 @@ export function ModalMobileMenu(props: TModalMobileMenu): ReactElement {
 				className={'fixed inset-0 overflow-y-auto md:hidden'}
 				style={{zIndex: 88}}
 				onClose={onClose}>
-				<div
-					className={`relative flex min-h-screen items-end justify-end px-0 pb-0 pt-4 text-center sm:block sm:p-0`}>
+				<div className={`relative flex min-h-screen items-end justify-end px-0 pb-0 pt-4 text-center`}>
 					<TransitionChild
 						as={Fragment}
 						enter={'ease-out duration-300'}
@@ -111,7 +110,7 @@ export function ModalMobileMenu(props: TModalMobileMenu): ReactElement {
 					</TransitionChild>
 
 					<span
-						className={'hidden sm:inline-block sm:h-screen sm:align-bottom'}
+						className={'hidden'}
 						aria-hidden={'true'}>
 						&#8203;
 					</span>
@@ -132,6 +131,7 @@ export function ModalMobileMenu(props: TModalMobileMenu): ReactElement {
 									<LogoYearn
 										className={'size-10'}
 										front={'text-black'}
+										back={'text-white'}
 									/>
 								</Link>
 							</div>
@@ -140,7 +140,7 @@ export function ModalMobileMenu(props: TModalMobileMenu): ReactElement {
 									background:
 										'linear-gradient(180deg, rgba(12, 12, 12, 0.8) 0%, rgba(26, 26, 26, 0.8) 100%)'
 								}}
-								className={'flex h-[calc(100vh-88px)] flex-col justify-end px-6 pb-[66px]'}>
+								className={'flex h-[calc(100vh-88px)] w-full flex-col justify-end px-6 pb-[66px]'}>
 								<FooterNav />
 							</div>
 						</div>

diff --git a/apps/landing/components/common/Button.tsx b/apps/landing/components/common/Button.tsx
@@ -15,7 +15,7 @@ export function Button(
 	return (
 		<button
 			{...rest}
-			className={cl('py-3 px-4 rounded-[4px] transition-colors', STYLE[variant], rest.className)}>
+			className={cl('py-3 px-4 text-white rounded-[4px] transition-colors', STYLE[variant], rest.className)}>
 			{rest.children}
 		</button>
 	);

diff --git a/apps/landing/components/common/EarnCard.tsx b/apps/landing/components/common/EarnCard.tsx
@@ -17,7 +17,7 @@ export function EarnCard(props: {title: string; info: string; logoSrc: string; h
 			className={'group relative z-30 flex h-full overflow-hidden rounded-lg border border-[#292929] p-6'}>
 			<div className={'flex md:mt-auto md:items-end'}>
 				<div>
-					<p className={'text-[24px] group-hover:text-grey-900'}>{props.title}</p>
+					<p className={'text-[24px] text-white group-hover:text-grey-900'}>{props.title}</p>
 					<p className={'text-grey-400 group-hover:text-grey-900'}>{props.info}</p>
 				</div>
 				<div>

diff --git a/apps/landing/components/common/Header.tsx b/apps/landing/components/common/Header.tsx
@@ -64,6 +64,7 @@ export function LandingAppHeader(): ReactElement {
 							<LogoYearn
 								className={'size-10'}
 								front={'text-black'}
+								back={'text-white'}
 							/>
 						</Link>
 					</div>

diff --git a/apps/landing/components/sections/About.tsx b/apps/landing/components/sections/About.tsx
@@ -13,10 +13,7 @@ export function About(): ReactElement {
 				backgroundPosition: 'center'
 			}}>
 			<div className={'relative lg:mr-[400px]'}>
-				<p
-					className={
-						'mb-10 text-left font-aeonikFono text-3xl font-light text-white md:text-center md:text-5xl'
-					}>
+				<p className={'mb-10 text-left font-aeonikFono text-3xl font-light text-white md:text-5xl'}>
 					{'WTF IS YEARN VAULT?'}
 				</p>
 				<div

diff --git a/apps/landing/components/sections/Contribute.tsx b/apps/landing/components/sections/Contribute.tsx
@@ -1,5 +1,6 @@
 import {type ReactElement, useState} from 'react';
 import Link from 'next/link';
+import {IconArrow} from '@common/icons/IconArrow';
 
 const CARDS = [
 	{title: 'BUG BOUNTY.', description: 'Bugs?! Ew! Report a bug and you might earn $$.'},
@@ -26,11 +27,14 @@ function ContributeCard(props: {title: string; description: string}): ReactEleme
 				<div className={'mb-2 text-xl'}>{props.title}</div>
 				<div className={'opacity-60'}>{props.description}</div>
 			</div>
-			<Link
-				className={'leading-6 underline opacity-70 transition-opacity hover:opacity-100'}
-				href={'/'}>
-				{'Read more'}
-			</Link>
+			<div className={'flex justify-between gap-2'}>
+				<Link
+					className={'leading-6 underline opacity-70 transition-opacity hover:opacity-100'}
+					href={'/'}>
+					{'Read more'}
+				</Link>
+				{isHovering && <IconArrow className={'text-black'} />}
+			</div>
 		</div>
 	);
 }

diff --git a/apps/landing/components/sections/Hero.tsx b/apps/landing/components/sections/Hero.tsx
@@ -125,14 +125,14 @@ export function Hero(): ReactElement {
 						'relative mx-6 mt-6 flex h-[568px] w-[2365px] max-w-[2352px] flex-col items-center self-center rounded-lg border border-[#292929]'
 					}>
 					<AnimatedLogos />
-					<div className={'z-20 mt-[88px] text-center'}>
+					<div className={'z-20 mt-[88px] text-center md:mt-[160px]'}>
 						<p className={'text-[80px] font-bold leading-[80px] text-white'}>{'THE DEFI WAY'}</p>
 						<p className={'text-[80px] font-bold leading-[80px] text-white'}>{'TO EARN ON CRYPTO'}</p>
 						<p className={'mt-4 text-grey-400'}>
 							{'Yearn is DeFi’s longest running, most battle tested, and most trusted yield protocol.'}
 						</p>
 					</div>
-					<div className={'mt-[72px] flex gap-2'}>
+					<div className={'mt-[72px] flex gap-2 md:mt-[48px] lg:mt-[72px]'}>
 						<Button className={'w-[192px] px-[15px]'}>{'DISCOVER PRODUCTS'}</Button>
 						<Button
 							onClick={() => scrollToHash('form')}

diff --git a/apps/landing/components/sections/WaysToEarn.tsx b/apps/landing/components/sections/WaysToEarn.tsx
@@ -27,7 +27,7 @@ export function WaysToEarn(): ReactElement {
 					}>
 					<div className={'flex h-full flex-col justify-between'}>
 						<div>
-							<p className={'text-md mb-4 group-hover:text-grey-900 md:text-[32px]'}>
+							<p className={'text-md mb-4 text-white group-hover:text-grey-900 md:text-[32px]'}>
 								{'VAULTS PUT YOUR CRYPTO TO WORK, SO YOU DONT HAVE TO.'}
 							</p>
 							<p className={'z-20 text-grey-400 group-hover:text-grey-900'}>

diff --git a/public/landing/hero-background.png b/public/landing/hero-background.png