fix: improve dark mode background patterns

This commit is contained in:
Mythie
2023-09-25 00:18:15 +10:00
parent 965b5c0afd
commit 80c9ab5d8c
10 changed files with 42 additions and 17 deletions

View File

@ -22,7 +22,7 @@ export const FasterSmarterBeautifulBento = ({
<Image
src={backgroundPattern}
alt="background pattern"
className="h-full scale-125 object-cover dark:invert dark:sepia md:scale-150 lg:scale-[175%]"
className="h-full scale-125 object-cover dark:contrast-[70%] dark:invert dark:sepia md:scale-150 lg:scale-[175%]"
/>
</div>
<h2 className="px-0 text-[22px] font-semibold md:px-12 md:text-4xl lg:px-24">

View File

@ -30,7 +30,7 @@ export const Header = ({ className, ...props }: HeaderProps) => {
{isSinglePlayerModeMarketingEnabled && (
<Link
href="/single-player-mode"
className="bg-primary rounded-full px-2 py-1 text-xs font-semibold sm:px-3"
className="bg-primary dark:text-background rounded-full px-2 py-1 text-xs font-semibold sm:px-3"
>
Try now!
</Link>

View File

@ -86,7 +86,7 @@ export const Hero = ({ className, ...props }: HeroProps) => {
<Image
src={backgroundPattern}
alt="background pattern"
className="-mr-[50vw] -mt-[15vh] h-full scale-125 object-cover dark:invert dark:sepia md:scale-150 lg:scale-[175%]"
className="-mr-[50vw] -mt-[15vh] h-full scale-125 object-cover dark:contrast-[70%] dark:invert dark:sepia md:scale-150 lg:scale-[175%]"
/>
</motion.div>
</div>
@ -115,7 +115,7 @@ export const Hero = ({ className, ...props }: HeroProps) => {
onClick={onSignUpClick}
>
Get the Community Plan
<span className="bg-primary dark:text-background -mr-2 ml-2.5 rounded-full px-2 py-1.5 text-xs">
<span className="bg-primary dark:text-background -mr-2.5 ml-2.5 rounded-full px-2 py-1.5 text-xs">
$30/mo. forever!
</span>
</Button>
@ -134,11 +134,16 @@ export const Hero = ({ className, ...props }: HeroProps) => {
variants={HeroTitleVariants}
initial="initial"
animate="animate"
className="border-primary mx-auto mt-8 w-fit rounded-xl border-2 bg-white transition-colors hover:bg-slate-50/60"
className="border-primary bg-background hover:bg-muted mx-auto mt-8 w-60 rounded-xl border transition duration-300"
>
<Link href="/single-player-mode" className="block px-4 py-2 text-center">
<h2 className="text-xs font-semibold text-[#727272]">Single Player Mode</h2>
<h1 className="font-semibold leading-5 text-[#606060]">Self sign documents here</h1>
<h2 className="text-muted-foreground text-xs font-semibold">
Introducing Single Player Mode
</h2>
<h1 className="text-foreground mt-1.5 font-medium leading-5">
Self sign for free!
</h1>
</Link>
</motion.div>
))

View File

@ -19,7 +19,7 @@ export const OpenBuildTemplateBento = ({ className, ...props }: OpenBuildTemplat
<Image
src={backgroundPattern}
alt="background pattern"
className="h-full scale-125 object-cover dark:invert dark:sepia md:scale-150 lg:scale-[175%]"
className="h-full scale-125 object-cover dark:contrast-[70%] dark:invert dark:sepia md:scale-150 lg:scale-[175%]"
/>
</div>
<h2 className="px-0 text-[22px] font-semibold md:px-12 md:text-4xl lg:px-24">

View File

@ -23,7 +23,7 @@ export const ShareConnectPaidWidgetBento = ({
<Image
src={backgroundPattern}
alt="background pattern"
className="h-full scale-125 object-cover dark:invert dark:sepia md:scale-150 lg:scale-[175%]"
className="h-full scale-125 object-cover dark:contrast-[70%] dark:invert dark:sepia md:scale-150 lg:scale-[175%]"
/>
</div>
<h2 className="px-0 text-[22px] font-semibold md:px-12 md:text-4xl lg:px-24">