Andreas/LibreChat
1
0
Fork 0
mirror of https://github.com/danny-avila/LibreChat.git synced 2025-12-18 01:10:14 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions 4

🎨 fix: Terms and Conditions Modal Styling (#4169)

Browse source 
* fix: modal styling issue, where buttons in light mode are not accessible/visible

* refactor: use MarkdownLite instead

* chore: make inner content accessible
This commit is contained in:
Danny Avila 2024-09-20 18:33:56 -04:00 • committed by GitHub
parent d096c281ba
commit 42b7373ddc
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
6 changed files with 24 additions and 19 deletions
Download patch file Download diff file Expand all files Collapse all files

29
client/src/components/ui/TermsAndConditionsModal.tsx
View file

@ -1,10 +1,9 @@
import { useLocalize } from '~/hooks';
import { OGDialog } from '~/components/ui';
import MarkdownLite from '~/components/Chat/Messages/Content/MarkdownLite';
import DialogTemplate from '~/components/ui/DialogTemplate';
import { useAuthContext } from '~/hooks';
import Markdown from '~/components/Chat/Messages/Content/Markdown';
import { useToastContext } from '~/Providers';
import { useAcceptTermsMutation } from '~/data-provider';
import { useToastContext } from '~/Providers';
import { OGDialog } from '~/components/ui';
import { useLocalize } from '~/hooks';
const TermsAndConditionsModal = ({
open,
@ -58,27 +57,33 @@ const TermsAndConditionsModal = ({
showCloseButton={false}
showCancelButton={false}
main={
<div className="max-h-[60vh] overflow-y-auto p-4">
<div className="prose dark:prose-invert w-full max-w-none !text-black dark:!text-white">
{modalContent ? (
<Markdown content={modalContent} isLatestMessage={false} />
<section
// Motivation: This is a dialog, so its content should be focusable
// eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
tabIndex={0}
className="max-h-[60vh] overflow-y-auto p-4"
aria-label={localize('com_ui_terms_and_conditions')}
>
<div className="prose dark:prose-invert w-full max-w-none !text-text-primary">
{modalContent != null && modalContent ? (
<MarkdownLite content={modalContent} />
) : (
<p>{localize('com_ui_no_terms_content')}</p>
)}
</div>
</div>
</section>
}
buttons={
<>
<button
onClick={handleDecline}
className="border-border-none bg-surface-500 dark:hover:bg-surface-600 inline-flex h-10 items-center justify-center rounded-lg px-4 py-2 text-sm text-white hover:bg-gray-600"
className="inline-flex h-10 items-center justify-center rounded-lg border border-border-heavy bg-surface-secondary px-4 py-2 text-sm text-text-primary hover:bg-surface-active"
>
{localize('com_ui_decline')}
</button>
<button
onClick={handleAccept}
className="border-border-none bg-surface-500 inline-flex h-10 items-center justify-center rounded-lg px-4 py-2 text-sm text-white hover:bg-green-600 dark:hover:bg-green-600"
className="inline-flex h-10 items-center justify-center rounded-lg border border-border-heavy bg-surface-secondary px-4 py-2 text-sm text-text-primary hover:bg-green-500 hover:text-white focus:bg-green-500 focus:text-white dark:hover:bg-green-600 dark:focus:bg-green-600"
>
{localize('com_ui_accept')}
</button>