🔧 refactor(TermsAndConditions): Enhanced UI, accessibility, and updated to use new dialog and components

This commit is contained in:
Marco Beretta 2025-03-23 02:43:03 +01:00
parent 9885982233
commit f4c50ed25b
No known key found for this signature in database
GPG key ID: D918033D8E74CC11
2 changed files with 12 additions and 17 deletions

View file

@ -1,9 +1,9 @@
import React from 'react';
import MarkdownLite from '~/components/Chat/Messages/Content/MarkdownLite';
import DialogTemplate from '~/components/ui/DialogTemplate';
import OGDialogTemplate from '~/components/ui/OGDialogTemplate';
import { useAcceptTermsMutation } from '~/data-provider';
import { OGDialog, Button, Spinner } from '~/components';
import { useToastContext } from '~/Providers';
import { OGDialog } from '~/components/ui';
import { useLocalize } from '~/hooks';
interface TermsModalProps {
@ -36,6 +36,8 @@ const TermsAndConditionsModal = ({
},
});
const isLoading = acceptTermsMutation.isLoading;
const handleAccept = () => {
acceptTermsMutation.mutate();
};
@ -54,7 +56,7 @@ const TermsAndConditionsModal = ({
return (
<OGDialog open={open} onOpenChange={handleOpenChange}>
<DialogTemplate
<OGDialogTemplate
title={title ?? localize('com_ui_terms_and_conditions')}
className="w-11/12 max-w-3xl sm:w-3/4 md:w-1/2 lg:w-2/5"
showCloseButton={false}
@ -65,7 +67,7 @@ const TermsAndConditionsModal = ({
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">
<div className="prose dark:prose-invert w-full max-w-none text-text-primary">
{modalContent ? (
<MarkdownLite content={modalContent} />
) : (
@ -76,18 +78,12 @@ const TermsAndConditionsModal = ({
}
buttons={
<>
<button
onClick={handleDecline}
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"
>
<Button onClick={handleDecline} variant="destructive" disabled={isLoading}>
{localize('com_ui_decline')}
</button>
<button
onClick={handleAccept}
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>
</Button>
<Button onClick={handleAccept} variant="submit" disabled={isLoading}>
{isLoading ? <Spinner /> : localize('com_ui_accept')}
</Button>
</>
}
/>

View file

@ -9,7 +9,7 @@ import {
SetConvoProvider,
} from '~/Providers';
import { useAuthContext, useAssistantsMap, useAgentsMap, useFileMap, useSearch } from '~/hooks';
import TermsAndConditionsModal from '~/components/ui/TermsAndConditionsModal';
import TermsAndConditionsModal from '~/components/Chat/TermsAndConditionsModal';
import { useUserTermsQuery, useGetStartupConfig } from '~/data-provider';
import { Nav, MobileNav } from '~/components/Nav';
import { Banner } from '~/components/Banners';
@ -49,7 +49,6 @@ export default function Root() {
setShowTerms(false);
};
// Pass the desired redirect parameter to logout
const handleDeclineTerms = () => {
setShowTerms(false);
logout('/login?redirect=false');