Ryan/documenso
1
0
Fork 1
mirror of https://github.com/documenso/documenso.git synced 2025-11-22 12:41:36 +10:00
Code Issues Packages Projects Releases Wiki Activity

fix: improve dark mode background patterns

Browse Source
This commit is contained in:
Mythie
2023-09-25 00:18:15 +10:00
parent d4bc1eb0d1
commit 63cc57b035
10 changed files with 41 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
apps/marketing/src/app/(marketing)/layout.tsx
View File

@ -1,4 +1,8 @@
import React from 'react';
'use client';
import React, { useEffect, useState } from 'react';
import { cn } from '@documenso/ui/lib/utils';
import { Footer } from '~/components/(marketing)/footer';
import { Header } from '~/components/(marketing)/header';
@ -8,15 +12,31 @@ export type MarketingLayoutProps = {
};
export default function MarketingLayout({ children }: MarketingLayoutProps) {
const [scrollY, setScrollY] = useState(0);
useEffect(() => {
const onScroll = () => {
setScrollY(window.scrollY);
};
window.addEventListener('scroll', onScroll);
return () => window.removeEventListener('scroll', onScroll);
}, []);
return (
<div className="relative max-w-[100vw] overflow-y-auto overflow-x-hidden pt-20 md:pt-28">
<div className="bg-background/50 fixed left-0 top-0 z-50 w-full backdrop-blur-md">
<div
className={cn('fixed left-0 top-0 z-50 w-full bg-transparent', {
'bg-background/50 backdrop-blur-md': scrollY > 5,
})}
>
<Header className="mx-auto h-16 max-w-screen-xl px-4 md:h-20 lg:px-8" />
</div>
<div className="relative mx-auto max-w-screen-xl px-4 lg:px-8">{children}</div>
<Footer className="mt-24 bg-transparent backdrop-blur-[2px]" />
<Footer className="bg-background border-muted mt-24 border-t" />
</div>
);
}

2
apps/marketing/src/app/(marketing)/oss-friends/page.tsx
View File

@ -37,7 +37,7 @@ export default async function OSSFriendsPage() {
<Image
src={backgroundPattern}
alt="background pattern"
className="-mr-[15vw] -mt-[15vh] h-full max-h-[150vh] scale-125 object-cover dark:invert dark:sepia md:-mr-[50vw] md:scale-150 lg:scale-[175%]"
className="-mr-[15vw] -mt-[15vh] h-full max-h-[150vh] scale-125 object-cover dark:contrast-[70%] dark:invert dark:sepia md:-mr-[50vw] md:scale-150 lg:scale-[175%]"
/>
</div>
</div>

2
apps/marketing/src/app/not-found.tsx
View File

@ -26,7 +26,7 @@ export default function NotFound() {
<Image
src={backgroundPattern}
alt="background pattern"
className="-mr-[50vw] -mt-[15vh] h-full scale-100 object-cover dark:invert dark:sepia md:scale-100 lg:scale-[100%]"
className="-mr-[50vw] -mt-[15vh] h-full scale-100 object-cover dark:contrast-[70%] dark:invert dark:sepia md:scale-100 lg:scale-[100%]"
priority
/>
</motion.div>