Skip to content

fix: improve dark mode readability and UI consistency #22

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
NarottamKumar01 wants to merge 1 commit into
base: main
Choose a base branch
from
Open

fix: improve dark mode readability and UI consistency #22

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 5 additions & 5 deletions src/app/components/TopNavBar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -47,11 +47,11 @@ export const TopNavBar = () => {
<span className="sr-only">OpenResume</span>

<Image
src={logoSrc}
alt="OpenResume Logo"
className="h-8 w-full"
priority
/>
src={logoSrc}
alt="OpenResume Logo"
className="h-8 w-full dark:invert"
priority
/>
</Link>

<nav
Expand Down
13 changes: 8 additions & 5 deletions src/app/home/Features.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -43,21 +43,24 @@ export const Features = () => {
<dl className="grid grid-cols-1 justify-items-center gap-y-8 lg:grid-cols-2 lg:gap-x-6 lg:gap-y-16">
{FEATURES.map(({ src, title, text }) => (
<div className="px-2" key={title}>
<div className="relative w-96 self-center pl-16">
<dt className="text-2xl font-bold">
<div className="relative w-96 self-center rounded-2xl p-5 pl-16 transition-colors duration-300 dark:bg-gray-900/60">
<dt className="text-2xl font-bold text-gray-900 dark:text-white">
<Image
src={src}
className="absolute left-0 top-1 h-12 w-12"
className="absolute left-4 top-5 h-12 w-12"
alt="Feature icon"
/>
{title}
</dt>
<dd className="mt-2">{text}</dd>

<dd className="mt-2 leading-relaxed text-gray-600 dark:text-gray-300">
{text}
</dd>
</div>
</div>
))}
</dl>
</div>
</section>
);
};
};
22 changes: 14 additions & 8 deletions src/app/home/QuestionsAndAnswers.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,7 @@ const QAS = [
stands out with 2 distinctive features:
</p>{" "}
<p>
<span className="font-semibold">
<span className="font-semibold text-gray-800 dark:text-gray-100">
1. OpenResume is designed specifically for the U.S. job market and
best practices.
</span>
Expand All @@ -55,7 +55,7 @@ const QAS = [
single column design works best for AST. <br />{" "}
</p>
<p>
<span className="font-semibold">
<span className="font-semibold text-gray-800 dark:text-gray-100">
2. OpenResume is super privacy focus.
</span>{" "}
<br />
Expand Down Expand Up @@ -124,18 +124,24 @@ const QAS = [

export const QuestionsAndAnswers = () => {
return (
<section className="mx-auto max-w-3xl divide-y divide-gray-300 lg:mt-4 lg:px-2">
<h2 className="text-center text-3xl font-bold">Questions & Answers</h2>
<div className="mt-6 divide-y divide-gray-300">
<section className="mx-auto max-w-3xl divide-y divide-gray-300 rounded-2xl px-4 py-10 text-gray-900 transition-colors duration-300 dark:divide-gray-700 dark:text-gray-100 lg:mt-4 lg:px-6">
<h2 className="text-center text-3xl font-bold text-gray-900 dark:text-white">
Questions & Answers
</h2>

<div className="mt-6 divide-y divide-gray-300 dark:divide-gray-700">
{QAS.map(({ question, answer }) => (
<div key={question} className="py-6">
<h3 className="font-semibold leading-7">{question}</h3>
<div className="mt-3 grid gap-2 leading-7 text-gray-600">
<h3 className="font-semibold leading-7 text-gray-900 dark:text-white">
{question}
</h3>

<div className="mt-3 grid gap-3 leading-7 text-gray-600 dark:text-gray-300">
{answer}
</div>
</div>
))}
</div>
</section>
);
};
};
23 changes: 15 additions & 8 deletions src/app/home/Steps.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,27 +6,34 @@ const STEPS = [

export const Steps = () => {
return (
<section className="mx-auto mt-8 rounded-2xl bg-sky-50 bg-dot px-8 pb-12 pt-10 lg:mt-2">
<h1 className="text-center text-3xl font-bold">3 Simple Steps</h1>
<section className="mx-auto mt-8 rounded-2xl bg-sky-50 bg-dot px-8 pb-12 pt-10 dark:bg-gray-900 lg:mt-2">
<h1 className="text-center text-3xl font-bold text-gray-900 dark:text-white">
3 Simple Steps
</h1>

<div className="mt-8 flex justify-center">
<dl className="flex flex-col gap-y-10 lg:flex-row lg:justify-center lg:gap-x-20">
{STEPS.map(({ title, text }, idx) => (
<div className="relative self-start pl-14" key={idx}>
<dt className="text-lg font-bold">
<div className="bg-primary absolute left-0 top-1 flex h-10 w-10 select-none items-center justify-center rounded-full p-[3.5px] opacity-80">
<div className="flex h-full w-full items-center justify-center rounded-full bg-white">
<div className="text-primary -mt-0.5 text-2xl">
<dt className="text-lg font-bold text-gray-900 dark:text-white">
<div className="bg-primary absolute left-0 top-1 flex h-10 w-10 select-none items-center justify-center rounded-full p-[3.5px] opacity-90">
<div className="flex h-full w-full items-center justify-center rounded-full bg-white dark:bg-gray-800">
<div className="text-primary -mt-0.5 text-2xl font-semibold dark:text-sky-300">
{idx + 1}
</div>
</div>
</div>

{title}
</dt>
<dd>{text}</dd>

<dd className="text-gray-600 dark:text-gray-300">
{text}
</dd>
</div>
))}
</dl>
</div>
</section>
);
};
};
52 changes: 38 additions & 14 deletions src/app/home/Testimonials.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,17 +33,21 @@ const TESTIMONIALS = [

const LG_TESTIMONIALS_CLASSNAMES = [
"z-10",
"translate-x-44 translate-y-24 opacity-40",
"translate-x-32 -translate-y-28 opacity-40",
"translate-x-44 translate-y-24 opacity-70",
"translate-x-32 -translate-y-28 opacity-70",
];

const SM_TESTIMONIALS_CLASSNAMES = ["z-10", "opacity-0", "opacity-0"];
const ROTATION_INTERVAL_MS = 8 * 1000; // 8s

const ROTATION_INTERVAL_MS = 8 * 1000;

export const Testimonials = ({ children }: { children?: React.ReactNode }) => {
const [testimonialsClassNames, setTestimonialsClassNames] = useState(
LG_TESTIMONIALS_CLASSNAMES
);

const isHoveredOnTestimonial = useRef(false);

useEffect(() => {
const intervalId = setInterval(() => {
if (!isHoveredOnTestimonial.current) {
Expand All @@ -52,10 +56,12 @@ export const Testimonials = ({ children }: { children?: React.ReactNode }) => {
});
}
}, ROTATION_INTERVAL_MS);

return () => clearInterval(intervalId);
}, []);

const { isLg } = useTailwindBreakpoints();

useEffect(() => {
setTestimonialsClassNames(
isLg ? LG_TESTIMONIALS_CLASSNAMES : SM_TESTIMONIALS_CLASSNAMES
Expand All @@ -64,19 +70,21 @@ export const Testimonials = ({ children }: { children?: React.ReactNode }) => {

return (
<section className="mx-auto -mt-2 px-8 pb-24">
<h2 className="mb-8 text-center text-3xl font-bold">
<h2 className="mb-8 text-center text-3xl font-bold text-gray-900 dark:text-white">
People{" "}
<Image src={heartSrc} alt="love" className="-mt-1 inline-block w-7" />{" "}
OpenResume
</h2>

<div className="mx-auto mt-10 h-[235px] max-w-lg lg:h-[400px] lg:pt-28">
<div className="relative lg:ml-[-50px]">
{TESTIMONIALS.map(({ src, quote, name, title }, idx) => {
const className = testimonialsClassNames[idx];

return (
<div
key={idx}
className={`bg-primary absolute max-w-lg rounded-[1.7rem] bg-opacity-30 shadow-md transition-all duration-1000 ease-linear ${className}`}
className={`bg-primary absolute max-w-lg rounded-[1.7rem] bg-opacity-30 shadow-lg transition-all duration-1000 ease-linear dark:shadow-black/40 ${className}`}
onMouseEnter={() => {
if (className === "z-10") {
isHoveredOnTestimonial.current = true;
Expand All @@ -88,38 +96,53 @@ export const Testimonials = ({ children }: { children?: React.ReactNode }) => {
}
}}
>
<figure className="m-1 flex gap-5 rounded-3xl bg-white p-5 text-gray-900 lg:p-7">
<figure className="m-1 flex gap-5 rounded-3xl bg-white p-5 text-gray-900 dark:bg-gray-800 dark:text-gray-100 lg:p-7">
<Image
className="hidden h-24 w-24 select-none rounded-full lg:block"
src={src}
alt="profile"
/>

<div>
<blockquote>
<p className="before:content-['“'] after:content-['”']">
<p className="leading-relaxed before:content-['“'] after:content-['”']">
{quote}
</p>
</blockquote>

<figcaption className="mt-3">
<div className="hidden gap-2 lg:flex">
<div className="font-semibold">{name}</div>
<div className="font-semibold text-gray-900 dark:text-white">
{name}
</div>

<div
className="select-none text-gray-700"
className="select-none text-gray-500 dark:text-gray-400"
aria-hidden="true"
>
•
</div>
<div className="text-gray-600">{title}</div>

<div className="text-gray-600 dark:text-gray-300">
{title}
</div>
</div>

<div className="flex gap-4 lg:hidden">
<Image
className=" block h-12 w-12 select-none rounded-full"
className="block h-12 w-12 select-none rounded-full"
src={src}
alt="profile"
/>

<div>
<div className="font-semibold">{name}</div>
<div className="text-gray-600">{title}</div>
<div className="font-semibold text-gray-900 dark:text-white">
{name}
</div>

<div className="text-gray-600 dark:text-gray-300">
{title}
</div>
</div>
</div>
</figcaption>
Expand All @@ -130,7 +153,8 @@ export const Testimonials = ({ children }: { children?: React.ReactNode }) => {
})}
</div>
</div>

{children}
</section>
);
};
};
2 changes: 1 addition & 1 deletion src/app/layout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ export default function RootLayout({
}) {
return (
<html lang="en">
<body className="bg-white text-gray-900 dark:bg-gray-950 dark:text-white">
<body className="min-h-screen bg-white text-gray-900 transition-colors duration-300 dark:bg-gray-950 dark:text-gray-100">
<TopNavBar />
{children}
<Analytics />
Expand Down