From 5becc1dc3f33c8326e60f8790b866151e99bc1b6 Mon Sep 17 00:00:00 2001
From: Sean Hatfield <seanhatfield5@gmail.com>
Date: Wed, 16 Oct 2024 14:53:00 -0700
Subject: [PATCH] Experimental agreement modal dark mode (#2491)

experimental agreement modal dark mode
---
 .../Admin/ExperimentalFeatures/index.jsx      | 28 +++++++++----------
 1 file changed, 14 insertions(+), 14 deletions(-)

diff --git a/frontend/src/pages/Admin/ExperimentalFeatures/index.jsx b/frontend/src/pages/Admin/ExperimentalFeatures/index.jsx
index 6d53bb3c2..021ca302b 100644
--- a/frontend/src/pages/Admin/ExperimentalFeatures/index.jsx
+++ b/frontend/src/pages/Admin/ExperimentalFeatures/index.jsx
@@ -179,18 +179,18 @@ function FeatureVerification({ children }) {
     return (
       <>
         <ModalWrapper isOpen={true}>
-          <form
-            onSubmit={acceptTos}
-            className="relative w-full max-w-2xl max-h-full"
-          >
-            <div className="relative bg-main-gradient rounded-lg shadow">
-              <div className="flex items-start justify-between p-4 border-b rounded-t border-gray-500/50">
+          <div className="w-full max-w-2xl bg-theme-bg-secondary rounded-lg shadow border-2 border-theme-modal-border overflow-hidden">
+            <div className="relative p-6 border-b rounded-t border-theme-modal-border">
+              <div className="flex items-center gap-2">
+                <Flask size={24} className="text-theme-text-primary" />
                 <h3 className="text-xl font-semibold text-white">
                   Terms of use for experimental features
                 </h3>
               </div>
-              <div className="p-6 space-y-6 flex h-full w-full">
-                <div className="w-full flex flex-col gap-y-4 text-white">
+            </div>
+            <form onSubmit={acceptTos}>
+              <div className="py-7 px-9 space-y-4 flex-col">
+                <div className="w-full text-white text-md flex flex-col gap-y-4">
                   <p>
                     Experimental features of AnythingLLM are features that we
                     are piloting and are <b>opt-in</b>. We proactively will
@@ -203,7 +203,7 @@ function FeatureVerification({ children }) {
                       Use of any feature on this page can result in, but not
                       limited to, the following possibilities.
                     </p>
-                    <ul className="list-disc ml-6 text-sm font-mono">
+                    <ul className="list-disc ml-6 text-sm font-mono mt-2">
                       <li>Loss of data.</li>
                       <li>Change in quality of results.</li>
                       <li>Increased storage.</li>
@@ -221,7 +221,7 @@ function FeatureVerification({ children }) {
                       Use of an experimental feature also comes with the
                       following list of non-exhaustive conditions.
                     </p>
-                    <ul className="list-disc ml-6 text-sm font-mono">
+                    <ul className="list-disc ml-6 text-sm font-mono mt-2">
                       <li>Feature may not exist in future updates.</li>
                       <li>The feature being used is not currently stable.</li>
                       <li>
@@ -255,7 +255,7 @@ function FeatureVerification({ children }) {
                   </p>
                 </div>
               </div>
-              <div className="flex w-full justify-between items-center p-6 space-x-2 border-t rounded-b border-gray-500/50">
+              <div className="flex w-full justify-between items-center p-6 space-x-2 border-t border-theme-modal-border rounded-b">
                 <a
                   href={paths.home()}
                   className="px-4 py-2 rounded-lg text-white hover:bg-stone-900 transition-all duration-300"
@@ -264,13 +264,13 @@ function FeatureVerification({ children }) {
                 </a>
                 <button
                   type="submit"
-                  className="transition-all duration-300 border border-slate-200 px-4 py-2 rounded-lg text-white text-sm items-center flex gap-x-2 hover:bg-slate-200 hover:text-slate-800 focus:ring-gray-800"
+                  className="transition-all duration-300 bg-white text-black hover:opacity-60 px-4 py-2 rounded-lg text-sm"
                 >
                   I understand
                 </button>
               </div>
-            </div>
-          </form>
+            </form>
+          </div>
         </ModalWrapper>
         {children}
       </>