Fix: Improved Text Visibility in Dark Mode in OnboardingQuestion Component (#1456)

# Description

In this pull request, I addressed an issue with text visibility in dark
mode within the OnboardingQuestion component. The problem was resolved
by modifying the class name.

## Changes Made

I changed the class name in the OnboardingQuestion component from:

```Tailwind
cursor-pointer shadow-md dark:shadow-primary/25 hover:shadow-xl transition-shadow bg-onboarding-yellow-bg px-3 py-1 rounded-xl border-black/10 dark:border-white/25
```

to:

```Tailwind
cursor-pointer shadow-md dark:shadow-primary/25 hover:shadow-xl transition-shadow bg-onboarding-yellow-bg px-3 py-1 rounded-xl border-black/10 dark:border-white/25 dark:text-black
```

## Motivation

The motivation for this change is to improve the visibility of text in
dark mode, making the user experience better and ensuring that the UI
remains consistent.

## Checklist before requesting a review

- [ ] My code follows the style guidelines of this project.
- [ ] I have performed a self-review of my code.
- [ ] I have added comments to explain any hard-to-understand areas.
- [ ] I have not added tests in this specific pull request, as this
change primarily deals with CSS class modification.
- [ ] New and existing unit tests pass locally with my changes.
- [ ] No dependent changes are required for this fix.

## Screenshots (if appropriate)

### Problem Before Fix
![Problem Before
Fix](https://raw.githubusercontent.com/Dev-Dz27/quivr/patch-1/frontend/public/Web%20capture_22-10-2023_19154_www.quivr.app.jpeg)

### Fix Applied
![Fix
Applied](https://raw.githubusercontent.com/Dev-Dz27/quivr/patch-1/frontend/public/Web%20capture_22-10-2023_19416_www.quivr.app.jpeg)
This commit is contained in:
Chekkal Youcef Seif El Islam 2023-10-23 08:56:24 +01:00 committed by GitHub
parent f90c43cc42
commit bb1e2e35db
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 1 additions and 1 deletions

View File

@ -22,7 +22,7 @@ export const OnboardingQuestion = ({
return (
<div
onClick={() => void handleSuggestionClick()}
className="cursor-pointer shadow-md dark:shadow-primary/25 hover:shadow-xl transition-shadow bg-onboarding-yellow-bg px-3 py-1 rounded-xl border-black/10 dark:border-white/25"
className="cursor-pointer shadow-md dark:shadow-primary/25 hover:shadow-xl transition-shadow bg-onboarding-yellow-bg px-3 py-1 rounded-xl border-black/10 dark:border-white/25 dark:text-black"
>
{question}
</div>

Binary file not shown.

After

Width:  |  Height:  |  Size: 106 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 108 KiB