Style/tweaks (#615)

* feat: upd copy * chore: rename community apps * feat: add ycrv to featured
yearn · Dec 12, 2024 · d5dc252 · d5dc252
1 parent e6d17ea
commit d5dc252
Show file tree

Hide file tree

Showing 11 changed files with 42 additions and 39 deletions.
diff --git a/apps/common/CarouselControls.tsx b/apps/common/CarouselControls.tsx
@@ -19,7 +19,7 @@ export function CarouselControls({
 	}
 
 	return (
-		<div className={'hidden w-full justify-center md:flex'}>
+		<div className={'mt-4 hidden w-full justify-center md:flex'}>
 			<div className={'flex gap-x-3'}>
 				{Array(numberOfControls)
 					.fill('')

diff --git a/apps/common/components/AppCard.tsx b/apps/common/components/AppCard.tsx
@@ -16,7 +16,7 @@ export function AppCard(props: TAppCardProps): ReactElement {
 				href={props.app.appURI ?? ''}
 				target={props.app.appURI.startsWith('/') ? '_self' : '_blank'}
 				className={
-					'group relative hidden h-[240px] min-w-[208px] max-w-[208px] overflow-hidden rounded-lg border border-gray-700/50 bg-gray-900 p-6 hover:bg-gray-600/40 md:block'
+					'group relative hidden min-w-[208px] max-w-[208px] overflow-hidden rounded-lg border border-gray-700/50 bg-gray-900 p-6 hover:bg-gray-600/40 md:block'
 				}>
 				<div className={'mb-4'}>
 					<div
@@ -35,12 +35,12 @@ export function AppCard(props: TAppCardProps): ReactElement {
 							className={'size-[80px] rounded-full border border-[#292929]/80 object-contain'}
 						/>
 					) : (
-						<div className={'bg-fallback size-[80px] rounded-full'} />
+						<div className={'size-[80px] rounded-full bg-fallback'} />
 					)}
 				</div>
 				<div className={'mb-1 text-lg font-bold text-white'}>{props.app.name}</div>
 
-				<p className={'max-h-[60px] whitespace-normal text-sm text-gray-400'}>{props.app.description}</p>
+				<p className={'whitespace-normal text-sm text-gray-400'}>{props.app.description}</p>
 			</Link>
 			<Link
 				href={props.app.appURI}
@@ -59,7 +59,7 @@ export function AppCard(props: TAppCardProps): ReactElement {
 							/>
 						</div>
 					) : (
-						<div className={'bg-fallback size-16 rounded-2xl md:rounded-[32px]'} />
+						<div className={'size-16 rounded-2xl bg-fallback md:rounded-[32px]'} />
 					)}
 				</div>
 

diff --git a/apps/common/components/AppsCarousel.tsx b/apps/common/components/AppsCarousel.tsx
@@ -13,8 +13,8 @@ export const AppsCarousel = forwardRef(
 		ref: ForwardedRef<HTMLDivElement>
 	): ReactElement => {
 		return (
-			<div className={props.isUsingFeatured ? 'h-[262px]' : 'h-[360px] md:h-[262px]'}>
-				<section className={'absolute left-0 -mx-1 w-full'}>
+			<div>
+				<section className={'left-0 -mx-1 w-full'}>
 					<div
 						className={
 							'pointer-events-none absolute left-0 top-0 z-30 h-[272px] w-1/6 bg-gradient-to-r from-gray-900/0 to-transparent md:h-full'
@@ -29,7 +29,7 @@ export const AppsCarousel = forwardRef(
 						ref={ref}
 						onScroll={props.onScroll}
 						className={cl(
-							'hidden md:flex overflow-x-auto pb-1 pl-[38px] scrollbar-none max-sm:pr-6',
+							'hidden md:flex overflow-x-auto pb-1 pl-1 scrollbar-none max-sm:pr-6',
 							props.isUsingFeatured ? 'gap-x-8' : 'flex-col md:flex-row gap-x-4 overflow-y-hidden'
 						)}>
 						{props.apps?.map((app, i) => {

diff --git a/apps/common/icons/IconCommunity.tsx b/apps/common/icons/IconCommunity.tsx
@@ -1,6 +1,6 @@
 import type {ReactElement} from 'react';
 
-export function IconCommunity(props: React.SVGProps<SVGSVGElement>): ReactElement {
+export function IconYearnApps(props: React.SVGProps<SVGSVGElement>): ReactElement {
 	return (
 		<svg
 			{...props}

diff --git a/apps/common/utils/constants.tsx b/apps/common/utils/constants.tsx
@@ -46,7 +46,7 @@ export const VAULTS_APPS: TApp[] = [
 	}
 ];
 
-export const COMMUNITY_APPS: TApp[] = [
+export const YEARN_APPS: TApp[] = [
 	{
 		name: 'yETH',
 		description: 'A basket of LSTs in a single token.',
@@ -149,18 +149,18 @@ export const INTEGRATIONS_APPS: TApp[] = [
 	},
 	{
 		name: 'Superform',
-		description: 'Earn Yield & Distribute Vaults',
+		description: 'Superform grows your onchain wealth. Earn the best returns on your crypto.',
 		logoURI: 'https://www.superform.xyz/icon.png',
 		appURI: 'https://www.superform.xyz'
 	}
 ];
 
 export const FEATURED_APPS = [
 	{
-		name: 'Juiced',
-		description: 'Discover yields juiced with extra token rewards.',
-		logoURI: '/juiced-featured.jpg',
-		appURI: 'https://juiced.app/'
+		name: 'yCRV',
+		description: "Let Yearn's veCRV position boost your CRV yield, while you chill.",
+		logoURI: '/ycrv-featured.jpg',
+		appURI: 'https://ycrv.yearn.fi/'
 	},
 	{
 		name: 'Gimme',
@@ -175,10 +175,10 @@ export const FEATURED_APPS = [
 		appURI: '/v3'
 	},
 	{
-		name: 'Juiced',
-		description: 'Discover yields juiced with extra token rewards.',
-		logoURI: '/juiced-featured.jpg',
-		appURI: 'https://juiced.app/'
+		name: 'yCRV',
+		description: "Let Yearn's veCRV position boost your CRV yield, while you chill.",
+		logoURI: '/ycrv-featured.jpg',
+		appURI: 'https://ycrv.yearn.fi/'
 	},
 	{
 		name: 'Gimme',
@@ -193,10 +193,10 @@ export const FEATURED_APPS = [
 		appURI: '/v3'
 	},
 	{
-		name: 'Juiced',
-		description: 'Discover yields juiced with extra token rewards.',
-		logoURI: '/juiced-featured.jpg',
-		appURI: 'https://juiced.app/'
+		name: 'yCRV',
+		description: "Let Yearn's veCRV position boost your CRV yield, while you chill.",
+		logoURI: '/ycrv-featured.jpg',
+		appURI: 'https://ycrv.yearn.fi/'
 	},
 	{
 		name: 'Gimme',
@@ -212,7 +212,7 @@ export const FEATURED_APPS = [
 	}
 ];
 
-export const ALL_APPS = [...FEATURED_APPS, ...VAULTS_APPS, ...COMMUNITY_APPS, ...YEARN_X_APPS, ...INTEGRATIONS_APPS];
+export const ALL_APPS = [...FEATURED_APPS, ...VAULTS_APPS, ...YEARN_APPS, ...YEARN_X_APPS, ...INTEGRATIONS_APPS];
 
 export const CATEGORIES_DICT = {
 	'featured-apps': {
@@ -229,12 +229,12 @@ export const CATEGORIES_DICT = {
 		catrgorySlug: 'vaults',
 		apps: VAULTS_APPS
 	},
-	'community-apps': {
-		categoryName: 'Community Apps',
+	'yearn-apps': {
+		categoryName: 'Yearn Apps',
 		categoryDescription:
 			'Yearn is a decentralized suite of products helping individuals, DAOs, and other protocols earn yield on their digital assets.',
-		catrgorySlug: 'community-apps',
-		apps: COMMUNITY_APPS
+		catrgorySlug: 'yearn-apps',
+		apps: YEARN_APPS
 	},
 	'yearn-x': {
 		categoryName: 'Yearn X Projects',
@@ -266,7 +266,7 @@ export const LANDING_SIDEBAR_LINKS = [
 export const MENU_TABS = [
 	{title: 'Home', route: 'apps'},
 	{title: 'Vaults', route: 'vaults'},
-	{title: 'Community Apps', route: 'community-apps'},
+	{title: 'Yearn Apps', route: 'yearn-apps'},
 	{title: 'Yearn X Projects', route: 'yearn-x'},
 	{title: 'Integrations', route: 'integrations'}
 	// {title: 'About', route: 'about'}
@@ -283,7 +283,7 @@ export const iconsDict = {
 	apps: <IconYearn />,
 	about: <IconAbout />,
 	vaults: <IconVaults />,
-	'community-apps': <IconFrontends />,
+	'yearn-apps': <IconFrontends />,
 	'yearn-x': <IconYearnXApps />,
 	integrations: <IconIntegrations />
 };
diff --git a/apps/landing/components/sections/WaysToEarn.tsx b/apps/landing/components/sections/WaysToEarn.tsx
@@ -76,11 +76,11 @@ export function WaysToEarn(): ReactElement {
 				</Link>
 				<div className={'col-span-12 row-span-3 md:col-span-5 md:row-span-6'}>
 					<EarnCard
-						title={'COMMUNITY APPS.'}
+						title={'YEARN APPS.'}
 						info={'Apps built on Yearn vaults by contributors and the wider community!'}
-						logoSrc={'/landing/community-logo.png'}
-						href={'/apps/community-apps'}
-						hoverLogoSrc={'/landing/community-hover.png'}
+						logoSrc={'/landing/yearn-apps-logo.png'}
+						href={'/apps/yearn-apps'}
+						hoverLogoSrc={'/landing/yearn-apps-hover.png'}
 					/>
 				</div>
 				<div className={'col-span-12 row-span-3 md:col-span-5 md:row-span-6'}>

diff --git a/pages/apps/[category].tsx b/pages/apps/[category].tsx
@@ -51,7 +51,10 @@ export default function Index(props: {router: NextRouter}): ReactElement {
 					<SortingBar />
 				</div>
 
-				<div className={'flex grid-rows-1 flex-col gap-4 md:grid md:grid-cols-2 lg:grid-cols-4'}>
+				<div
+					className={
+						'flex grid-rows-1 gap-4 max-md:flex-col md:grid-cols-2 md:flex-wrap lg:grid lg:grid-cols-4'
+					}>
 					{shuffledApps?.map(app => (
 						<AppCard
 							app={app}

diff --git a/pages/apps/index.tsx b/pages/apps/index.tsx
@@ -9,7 +9,7 @@ import {PromoPoster} from '@common/components/PromoPoster';
 import {useSearch} from '@common/contexts/useSearch';
 import {LogoDiscord} from '@common/icons/LogoDiscord';
 import {LogoTwitter} from '@common/icons/LogoTwitter';
-import {COMMUNITY_APPS, FEATURED_APPS, INTEGRATIONS_APPS, VAULTS_APPS, YEARN_X_APPS} from '@common/utils/constants';
+import {FEATURED_APPS, INTEGRATIONS_APPS, VAULTS_APPS, YEARN_APPS, YEARN_X_APPS} from '@common/utils/constants';
 
 export default function Home(): ReactElement {
 	const router = useRouter();
@@ -63,9 +63,9 @@ export default function Home(): ReactElement {
 							apps={VAULTS_APPS}
 						/>
 						<CategorySection
-							title={'Community Apps'}
-							onExpandClick={async () => router.push('/apps/community-apps')}
-							apps={COMMUNITY_APPS}
+							title={'Yearn Apps'}
+							onExpandClick={async () => router.push('/apps/yearn-apps')}
+							apps={YEARN_APPS}
 						/>
 						<CategorySection
 							title={'Yearn X Projects'}

diff --git a/public/landing/community-hover.png → public/landing/yearn-apps-hover.png b/public/landing/community-hover.png → public/landing/yearn-apps-hover.png
diff --git a/public/landing/community-logo.png → public/landing/yearn-apps-logo.png b/public/landing/community-logo.png → public/landing/yearn-apps-logo.png
diff --git a/public/ycrv-featured.jpg b/public/ycrv-featured.jpg