mohiit1502/zin-tools
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Fix Dark Mode Styles for Footer

Browse Source
This commit is contained in:
aftabrehan
2024-02-02 14:46:02 +05:00
parent 5d4b0164c0
commit 3c200fda99
10 changed files with 34 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
components/footer.tsx
View File

@@ -3,6 +3,8 @@ import Image from 'next/image'
import { ToggleThemeButton } from '@/components/toggle-theme-button'
import Logo from '@/public/logo.svg'
import {
FOLLOW_US_LINKS,
INTERNAL_LINKS,
@@ -17,13 +19,15 @@ interface linksProps {
const Links = ({ title, links }: linksProps) => (
<div className="basis-[100%] md:basis-[calc(33%-8px)] lg:basis-[calc(25%-8px)] xl:basis-[calc(20%-8px)]">
<h3 className="pb-6 text-base font-semibold text-black">{title}</h3>
<h3 className="pb-6 text-base font-semibold text-black dark:text-gray-200">
{title}
</h3>
<ul className="flex flex-col gap-1">
{links.map(({ href, label }, i) => (
<li key={i}>
<Link
href={href}
className="block py-2 leading-6 text-neutral-600 hover:text-black"
className="block py-2 leading-6 text-neutral-600 hover:text-black dark:text-neutral-400 dark:hover:text-gray-200"
>
{label}
</Link>
@@ -34,22 +38,22 @@ const Links = ({ title, links }: linksProps) => (
)
export const Footer = () => (
<footer className="w-full bg-[#f1f3f4]">
<footer className="w-full bg-[#f1f3f4] dark:bg-[#05080a]">
<div className="w-full max-w-[1400px] mx-auto px-4 md:px-8">
<div className="flex items-center gap-8 py-8">
<h4 className="text-black text-base sm:text-lg font-semibold">
<h4 className="text-black dark:text-gray-200 text-base sm:text-lg font-semibold">
Follow Us
</h4>
<div className="flex items-center gap-8">
{FOLLOW_US_LINKS.map(({ href, alt, src }, i) => (
<Link key={i} href={href}>
<Image alt={alt} src={src} width={24} height={24} />
{FOLLOW_US_LINKS.map(({ href, Icon }, i) => (
<Link key={i} href={href} className="group">
<Icon className="fill-neutral-600 group-hover:fill-black dark:fill-neutral-400 dark:hover:fill-white" />
</Link>
))}
</div>
</div>
<div className="flex flex-wrap items-start gap-2 gap-y-8 py-10 border-t border-neutral-200">
<div className="flex flex-wrap items-start gap-x-2 md:gap-x-4 gap-y-8 py-10 border-t border-neutral-200 dark:border-zinc-800">
<Links title="Internal Links" links={INTERNAL_LINKS} />
<Links title="External Links" links={EXTERNAL_LINKS} />
<Links title="Internal Links" links={INTERNAL_LINKS} />
@@ -57,10 +61,10 @@ export const Footer = () => (
<Links title="Internal Links" links={INTERNAL_LINKS} />
</div>
<div className="flex flex-wrap items-center gap-6 pt-6 pb-10 border-t md:pb-12 md:pt-8 md:gap-8 border-t-clr-border">
<div className="flex flex-wrap items-center gap-6 pt-6 pb-10 border-t border-neutral-200 dark:border-zinc-800 md:pb-12 md:pt-8 md:gap-8 border-t-clr-border">
<div className="flex items-center justify-between grow">
<Link href="/">
<Image alt="logo" src="/logo.svg" width={120} height={34} />
<Logo className="w-[120px] h-[34px] fill-black dark:fill-white" />
</Link>
<ToggleThemeButton className="md:hidden" />
@@ -71,7 +75,7 @@ export const Footer = () => (
<li key={i}>
<Link
href={href}
className="text-sm text-neutral-600 hover:text-black hover:underline whitespace-nowrap"
className="text-sm text-neutral-600 hover:text-black dark:text-neutral-400 dark:hover:text-gray-200 hover:underline whitespace-nowrap"
>
{label}
</Link>

2
components/header.tsx
View File

@@ -9,7 +9,7 @@ import { MobileNav } from '@/components/mobile-nav'
export const Header = () => (
<header className="w-full h-36 fixed top-0 shadow-header px-4 sm:px-6 pt-4 sm:pt-6 bg-white z-10">
<div className="w-full max-w-[1400px] mx-auto flex flex-col items-center justify-center gap-4 sm:gap-4 md:gap-6">
<div className="w-full flex items-center justify-between">
<div className="w-full flex items-center justify-between gap-2">
<Link href="/" className="overflow-hidden">
<Image
src="/logo.svg"

2
components/nav-dropdown.tsx
View File

@@ -39,7 +39,7 @@ export const NavDropdown = ({
<Link
key={i}
href={opLink}
className="w-full p-2 hover:bg-zinc-100 rounded-md transition-colors duration-200 text-sm"
className="w-full p-2 text-sm text-black hover:bg-zinc-100 rounded-md transition-colors duration-200"
>
{label}
</Link>

5
components/toggle-theme-button.tsx
View File

@@ -29,7 +29,10 @@ export const ToggleThemeButton = ({ className }: toggleThemeButtonProps) => {
variant="secondary"
icon={resolvedTheme === 'dark' ? <SunIcon /> : <MoonIcon />}
onClick={() => setTheme(resolvedTheme === 'dark' ? 'light' : 'dark')}
className={clsx('w-12 h-12 rounded-full !px-1 bg-[#dedede]', className)}
className={clsx(
'w-12 h-12 rounded-full !px-1 !bg-[#dedede] dark:!bg-[#2e2e2e]',
className
)}
/>
)
)