update overview component

socialincome-san · Aug 10, 2024 · b19cc24 · b19cc24
1 parent b27cb39
commit b19cc24
Show file tree

Hide file tree

Showing 5 changed files with 17 additions and 24 deletions.
diff --git a/ui/src/globals.css b/ui/src/globals.css
@@ -81,9 +81,9 @@
 	}
 
 	.theme-v2 {
-		--background: #f9f8f3;
-		--foreground: #3373bb;
-		--foreground-dark: #2a63a4;
+		--background: 50 33% 96%;
+		--foreground: 206 99% 31%;
+		--foreground-dark: 212 59% 40%;
 	}
 
 	.theme-blue-v2 {

diff --git a/website/src/app/[lang]/[region]/(website)/layout.tsx b/website/src/app/[lang]/[region]/(website)/layout.tsx
@@ -5,7 +5,7 @@ import { PropsWithChildren } from 'react';
 
 export default function Layout({ children, params }: PropsWithChildren<DefaultLayoutProps>) {
 	return (
-		<div className="mx-auto flex flex-col">
+		<div className="theme-default mx-auto flex flex-col">
 			<Navbar lang={params.lang} region={params.region} />
 			<main className="min-h-screen-navbar flex-1">{children}</main>
 			<Footer lang={params.lang} region={params.region} />

diff --git a/website/src/app/[lang]/[region]/v2/(home)/(sections)/overview.tsx b/website/src/app/[lang]/[region]/v2/(home)/(sections)/overview.tsx
@@ -10,43 +10,36 @@ export async function Overview({ lang, region }: DefaultParams) {
 	});
 
 	return (
-		<BaseContainer className="theme-v2 mb-16 flex flex-col items-center justify-center md:mb-48">
-			<Typography size="3xl" weight="medium" className="my-10 w-full text-center md:w-3/5">
+		<BaseContainer className="mx-auto mb-16 flex w-4/5 flex-col items-center justify-center md:mb-48 lg:w-3/5">
+			<Typography size="3xl" weight="medium" className="my-10 text-center">
 				{translator.t('section-2.title-1')}
 			</Typography>
-			<div className="mb-8 w-full text-center md:w-3/5">
+			<div className="mb-8 text-center">
 				{translator.t<{ text: string; color?: FontColor }[]>('section-2.title-2').map((title, index) => (
-					<Typography
-						as="span"
-						size="3xl"
-						weight="medium"
-						color={title.color}
-						key={index}
-						className="w-3/5 text-center"
-					>
+					<Typography as="span" size="3xl" weight="medium" color={title.color} key={index}>
 						{title.text}{' '}
 					</Typography>
 				))}
 			</div>
-			<Typography size="3xl" weight="medium" className="mb-5 mt-12 w-full text-center md:w-3/5">
+			<Typography size="3xl" weight="medium" className="mb-5 mt-12 text-center">
 				{translator.t('section-2.title-3')}
 			</Typography>
-			<ol className="mb-8 w-4/5 list-decimal md:w-3/5">
+			<ol className="mb-8 list-decimal">
 				<li>
 					<Typography as="span">{translator.t('section-2.text-3.1')}</Typography>
 				</li>
 				<li>
 					<Typography as="span">{translator.t('section-2.text-3.2')}</Typography>
 				</li>
 			</ol>
-			<Typography size="3xl" weight="medium" className="mb-5 mt-12 w-full text-center md:w-3/5">
+			<Typography size="3xl" weight="medium" className="mb-5 mt-12 text-center">
 				{translator.t('section-2.title-4')}
 			</Typography>
-			<Typography className="mb-8 w-full md:w-3/5">{translator.t('section-2.text-4')}</Typography>
-			<Typography size="3xl" weight="medium" className="mb-5 mt-12 w-full text-center md:w-3/5">
+			<Typography className="mb-8">{translator.t('section-2.text-4')}</Typography>
+			<Typography size="3xl" weight="medium" className="mb-5 mt-12 text-center">
 				{translator.t('section-2.title-5')}
 			</Typography>
-			<Typography className="w-full md:w-3/5">{translator.t('section-2.text-5')}</Typography>
+			<Typography className="w-full">{translator.t('section-2.text-5')}</Typography>
 		</BaseContainer>
 	);
 }
diff --git a/website/src/app/[lang]/[region]/v2/(home)/page.tsx b/website/src/app/[lang]/[region]/v2/(home)/page.tsx
@@ -12,7 +12,7 @@ export default async function Page({ params: { lang, region } }: DefaultPageProp
 		namespaces: ['website-(home)', 'website-videos'],
 	});
 	return (
-		<>
+		<div className="theme-v2">
 			<HeroVideo lang={lang} region={region} />
 			<Overview lang={lang} region={region} />
 			<MonthlyIncome lang={lang} region={region} />
@@ -26,6 +26,6 @@ export default async function Page({ params: { lang, region } }: DefaultPageProp
 			{/*<Sdgoals lang={lang} region={region} />*/}
 			{/*<Journal lang={lang} region={region} />*/}
 			<div className="bg-foreground-dark mt-10 h-24 w-screen" />
-		</>
+		</div>
 	);
 }
diff --git a/website/src/components/footer/footer.tsx b/website/src/components/footer/footer.tsx
@@ -41,7 +41,7 @@ export default async function Footer({ lang, region }: DefaultParams) {
 	});
 
 	return (
-		<BaseContainer backgroundColor="bg-muted" className="theme-default pb-8 pt-16">
+		<BaseContainer backgroundColor="bg-muted" className="pb-8 pt-16">
 			<div className="space-y-4">
 				<div className="flex flex-row items-center justify-between">
 					<SILogo className="fill-muted-foreground h-4" />