Skip to content

fix: improve dark mode readability and accessibility #87

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 accessibility #87

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
34 changes: 32 additions & 2 deletions package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion src/app/components/Footer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ const Footer = () => {
{/* Logo + Description */}
<div>
<div className="mb-4 flex items-center gap-2">
<div className="rounded-md bg-white p-1">
<div className="rounded-md bg-white p-1 dark:bg-slate-100">
<Image
src={logoSrc}
alt="OpenResume Logo"
Expand Down
2 changes: 1 addition & 1 deletion src/app/components/TopNavBar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -43,7 +43,7 @@ export const TopNavBar = () => {
)}
>
<div className="flex h-10 w-full items-center justify-between">
<Link href="/">
<Link href="/" className="rounded-md bg-white p-1">
<span className="sr-only">OpenResume</span>

<Image
Expand Down
4 changes: 2 additions & 2 deletions src/app/home/Features.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -44,15 +44,15 @@ export const Features = () => {
{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">
<dt className="text-2xl font-bold text-slate-900 dark:text-white">
<Image
src={src}
className="absolute left-0 top-1 h-12 w-12"
alt="Feature icon"
/>
{title}
</dt>
<dd className="mt-2">{text}</dd>
<dd className="mt-2 text-slate-700 dark:text-slate-300">{text}</dd>
</div>
</div>
))}
Expand Down
10 changes: 5 additions & 5 deletions src/app/home/QuestionsAndAnswers.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -124,13 +124,13 @@ 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 dark:divide-gray-700 lg:mt-4 lg:px-2">
<h2 className="text-center text-3xl font-bold text-slate-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-slate-900 dark:text-slate-100">{question}</h3>
<div className="mt-3 grid gap-2 leading-7 text-gray-600 dark:text-slate-300">
{answer}
</div>
</div>
Expand Down
6 changes: 3 additions & 3 deletions src/app/home/Steps.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,13 +6,13 @@ 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">
<section className="mx-auto mt-8 rounded-2xl bg-sky-50 bg-dot px-8 pb-12 pt-10 dark:bg-slate-900 lg:mt-2">
<h1 className="text-center text-3xl font-bold">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">
<dt className="text-lg font-bold text-slate-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-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">
Expand All @@ -22,7 +22,7 @@ export const Steps = () => {
</div>
{title}
</dt>
<dd>{text}</dd>
<dd className="text-slate-700 dark:text-slate-300">{text}</dd>
</div>
))}
</dl>
Expand Down
2 changes: 1 addition & 1 deletion src/app/home/Testimonials.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -64,7 +64,7 @@ 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-slate-900 dark:text-white">
People{" "}
<Image src={heartSrc} alt="love" className="-mt-1 inline-block w-7" />{" "}
OpenResume
Expand Down