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

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

* refactor: use MarkdownLite instead

* chore: make inner content accessible

client/src/components/Endpoints/SaveAsPresetDialog.tsx

@@ -76,7 +76,7 @@ const SaveAsPresetDialog = ({ open, onOpenChange, preset }: TEditPresetProps) =>
                 aria-label={localize('com_endpoint_preset_name')}
                 className={cn(
                   defaultTextProps,
-                  'flex h-10 max-h-10 w-full resize-none border-gray-100 px-3 py-2 dark:border-gray-600',
+                  'flex h-10 max-h-10 w-full resize-none border-border-medium px-3 py-2 ',
                   removeFocusOutlines,
                 )}
               />

client/src/components/ui/TermsAndConditionsModal.tsx

@@ -1,10 +1,9 @@
-import { useLocalize } from '~/hooks';
+import MarkdownLite from '~/components/Chat/Messages/Content/MarkdownLite';
-import { OGDialog } from '~/components/ui';
 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">
+          <section
-            <div className="prose dark:prose-invert w-full max-w-none !text-black dark:!text-white">
+            // Motivation: This is a dialog, so its content should be focusable
-              {modalContent ? (
+            // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
-                <Markdown content={modalContent} isLatestMessage={false} />
+            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>

client/src/routes/Root.tsx

@@ -11,7 +11,7 @@ import TermsAndConditionsModal from '~/components/ui/TermsAndConditionsModal';
 import { Banner } from '~/components/Banners';
 
 export default function Root() {
-  const { isAuthenticated, logout, token } = useAuthContext();
+  const { isAuthenticated, logout } = useAuthContext();
   const navigate = useNavigate();
   const [navVisible, setNavVisible] = useState(() => {
     const savedNavVisible = localStorage.getItem('navVisible');
@@ -27,7 +27,7 @@ export default function Root() {
   const [showTerms, setShowTerms] = useState(false);
   const { data: config } = useGetStartupConfig();
   const { data: termsData } = useUserTermsQuery({
-    enabled: isAuthenticated && !!config?.interface?.termsOfService?.modalAcceptance,
+    enabled: isAuthenticated && config?.interface?.termsOfService?.modalAcceptance === true,
   });
 
   useEffect(() => {
@@ -66,7 +66,7 @@ export default function Root() {
               </div>
             </div>
           </AgentsMapContext.Provider>
-          {config?.interface?.termsOfService?.modalAcceptance && (
+          {config?.interface?.termsOfService?.modalAcceptance === true && (
             <TermsAndConditionsModal
               open={showTerms}
               onOpenChange={setShowTerms}

package-lock.json

@@ -36680,7 +36680,7 @@
     },
     "packages/data-provider": {
       "name": "librechat-data-provider",
-      "version": "0.7.423",
+      "version": "0.7.424",
       "license": "ISC",
       "dependencies": {
         "@types/js-yaml": "^4.0.9",

packages/data-provider/package.json

@@ -1,6 +1,6 @@
 {
   "name": "librechat-data-provider",
-  "version": "0.7.423",
+  "version": "0.7.424",
   "description": "data services for librechat apps",
   "main": "dist/index.js",
   "module": "dist/index.es.js",

packages/data-provider/src/types.ts

@@ -311,7 +311,7 @@ export type TInterfaceConfig = {
     openNewTab?: boolean;
     modalAcceptance?: boolean;
     modalTitle?: string;
-    modalContent?: string | string[];
+    modalContent?: string;
   };
   endpointsMenu: boolean;
   modelSelect: boolean;