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

Adjust Dark Mode Styles for Home Page

Browse Source
This commit is contained in:
aftabrehan
2024-02-02 16:24:59 +05:00
parent f87e81c4d7
commit e96577e60e
7 changed files with 20 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
app/layout.tsx
View File

@@ -28,7 +28,7 @@ export default function RootLayout({
<ThemeProvider attribute="class">
<Header />
<main className="w-full min-h-[calc(100vh-136px)] md:min-h-[calc(100vh-144px)] mt-[136px] md:mt-36 bg-slate-50 dark:bg-neutral-900">
<main className="w-full min-h-[calc(100vh-136px)] md:min-h-[calc(100vh-144px)] mt-[136px] md:mt-36 bg-slate-50 dark:bg-[#080f15]">
<div className="w-full max-w-[1432px] sm:max-w-[1464px] mx-auto h-full px-4 sm:px-8 py-8 sm:py-16">
{children}
</div>

7
components/button.tsx
View File

@@ -26,11 +26,12 @@ export const Button = ({
}: buttonProps) => {
const variantCls = {
primary: 'text-white bg-primary xs:hover:opacity-75',
secondary: 'text-black bg-zinc-100 dark:bg-white/10 xs:hover:opacity-75',
secondary:
'text-black dark:text-white bg-zinc-100 dark:bg-white/10 xs:hover:opacity-75',
ghost:
'text-black dark:text-gray-200 hover:bg-zinc-100 dark:hover:bg-white/10 xs:hover:opacity-75',
outline:
'text-black bg-white border-2 border-zinc-400 disabled:hover:border-zinc-400 sm:hover:border-primary',
'text-black dark:text-white bg-white dark:bg-neutral-800 border-2 border-zinc-400 disabled:hover:border-zinc-400 sm:hover:border-primary dark:sm:hover:border-white',
}[variant]
return (
@@ -39,7 +40,7 @@ export const Button = ({
onClick={onClick}
disabled={disabled}
className={clsx(
'h-12 px-5 flex items-center justify-center gap-2 text-base font-medium text-nowrap rounded-full transition-all duration-200 disabled:opacity-50',
'h-12 px-5 flex items-center justify-center gap-2 text-base font-medium text-nowrap outline-none rounded-full transition-all duration-200 disabled:opacity-50',
!disabled && 'group',
variantCls,
className

6
components/card.tsx
View File

@@ -11,7 +11,7 @@ interface cardProps {
export const Card = ({ link, imageUrl, title, description }: cardProps) => (
<Link
href={link}
className="w-full sm:max-w-[300px] h-[156px] xs:h-[168px] sm:h-[200px] flex flex-col justify-start items-start gap-3 sm:gap-4 p-4 sm:p-6 bg-white rounded-xl border border-gray-200 hover:shadow-card transition-all duration-200"
className="w-full sm:max-w-[300px] h-[156px] xs:h-[168px] sm:h-[200px] flex flex-col justify-start items-start gap-3 sm:gap-4 p-4 sm:p-6 rounded-xl dark:hover:bg-zinc-600/5 border border-gray-200 dark:border-opacity-15 dark:hover:border-opacity-30 hover:shadow-card outline-none transition-all duration-200"
>
<Image
alt={title}
@@ -22,10 +22,10 @@ export const Card = ({ link, imageUrl, title, description }: cardProps) => (
/>
<div className="flex flex-col justify-start items-start gap-2 sm:gap-3">
<h2 className="text-black text-md xs:text-lg sm:text-xl font-bold">
<h2 className="text-black dark:text-white text-md xs:text-lg sm:text-xl font-bold">
{title}
</h2>
<p className="text-zinc-700 text-opacity-60 text-sm font-medium line-clamp-2">
<p className="text-zinc-700 dark:text-neutral-400 text-opacity-60 text-sm line-clamp-2">
{description}
</p>
</div>

4
components/carousel.tsx
View File

@@ -205,7 +205,7 @@ const CarouselPrevious = React.forwardRef<
className,
variant = 'outline',
icon = (
<ArrowLeftIcon className="stroke-zinc-400 sm:group-hover:stroke-primary" />
<ArrowLeftIcon className="stroke-zinc-400 sm:group-hover:stroke-primary dark:sm:group-hover:stroke-white" />
),
...props
},
@@ -243,7 +243,7 @@ const CarouselNext = React.forwardRef<
className,
variant = 'outline',
icon = (
<ArrowRightIcon className="stroke-zinc-400 sm:group-hover:stroke-primary" />
<ArrowRightIcon className="stroke-zinc-400 sm:group-hover:stroke-primary dark:sm:group-hover:stroke-white" />
),
...props
},

4
components/nav-dropdown.tsx
View File

@@ -31,7 +31,7 @@ export const NavDropdown = ({
<div
className={clsx(
'hidden sm:group-hover:flex absolute top-12 flex-col min-w-[220px] gap-2 p-4 bg-white dark:bg-black rounded-b-md shadow-md dark:shadow-none border border-zinc-100 dark:border-zinc-400/20',
'hidden sm:group-hover:flex absolute top-12 flex-col min-w-[220px] gap-2 p-4 bg-white dark:bg-[#0f1214] rounded-b-md shadow-md dark:shadow-none border border-zinc-100 dark:border-zinc-400/20',
positionCls
)}
>
@@ -39,7 +39,7 @@ export const NavDropdown = ({
<Link
key={i}
href={opLink}
className="w-full p-2 text-sm text-black dark:text-gray-100 hover:bg-zinc-100 dark:hover:bg-zinc-400/20 rounded-md transition-colors duration-200"
className="w-full p-2 text-sm text-black dark:text-gray-100 hover:bg-zinc-100 dark:hover:bg-zinc-400/10 rounded-md transition-colors duration-200"
>
{label}
</Link>

10
components/section-wrapper.tsx
View File

@@ -15,14 +15,18 @@ export const SectionWrapper = ({
children,
childrenClass,
}: sectionWraperProps) => (
<section className="w-full flex flex-col px-0 xs:px-2 sm:px-4 md:px-6 py-0 sm:py-2 md:py-4 bg-white rounded-3xl">
<section className="w-full flex flex-col px-0 xs:px-2 sm:px-4 md:px-6 py-0 sm:py-2 md:py-4 bg-white dark:bg-[#1e2023] rounded-3xl">
<div className="flex items-center justify-between px-4 py-4 sm:py-6 gap-2">
<h1 className={'text-black text-xl sm:text-3xl font-bold'}>{title}</h1>
<h1
className={'text-black dark:text-white text-xl sm:text-3xl font-bold'}
>
{title}
</h1>
{showAllButton && (
<Button
label="All"
variant="secondary"
icon={<AngleRightIcon />}
icon={<AngleRightIcon className="fill-black dark:fill-white" />}
className="hidden sm:flex h-9"
/>
)}

2
public/angle-right.svg
View File

@@ -1,3 +1,3 @@
<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M3.89942 11.0173C3.77855 11.0132 3.65972 10.9846 3.55039 10.9329C3.44099 10.8813 3.3433 10.808 3.26327 10.7172C3.09469 10.5485 3 10.3197 3 10.0811C3 9.84258 3.09469 9.61368 3.26327 9.44492L6.86418 5.844L3.26327 2.24311C3.19207 2.07026 3.17644 1.87953 3.21857 1.69738C3.26069 1.51524 3.35848 1.35073 3.49835 1.22669C3.63824 1.10265 3.81324 1.02524 3.99917 1.00519C4.18498 0.985145 4.37246 1.02347 4.53559 1.11483L8.73665 5.31587C8.9053 5.48475 9 5.71353 9 5.95203C9 6.19065 8.9053 6.41943 8.73665 6.58819L4.53559 10.7172C4.45553 10.808 4.35782 10.8813 4.24847 10.9329C4.13912 10.9846 4.02029 11.0132 3.89942 11.0173Z" fill="black"/>
<path d="M3.89942 11.0173C3.77855 11.0132 3.65972 10.9846 3.55039 10.9329C3.44099 10.8813 3.3433 10.808 3.26327 10.7172C3.09469 10.5485 3 10.3197 3 10.0811C3 9.84258 3.09469 9.61368 3.26327 9.44492L6.86418 5.844L3.26327 2.24311C3.19207 2.07026 3.17644 1.87953 3.21857 1.69738C3.26069 1.51524 3.35848 1.35073 3.49835 1.22669C3.63824 1.10265 3.81324 1.02524 3.99917 1.00519C4.18498 0.985145 4.37246 1.02347 4.53559 1.11483L8.73665 5.31587C8.9053 5.48475 9 5.71353 9 5.95203C9 6.19065 8.9053 6.41943 8.73665 6.58819L4.53559 10.7172C4.45553 10.808 4.35782 10.8813 4.24847 10.9329C4.13912 10.9846 4.02029 11.0132 3.89942 11.0173Z" fill=""/>
</svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 744 B

After

Width:  |  Height:  |  Size: 739 B