From a47c2c078119594cd9accb83f792f8bad5e1933c Mon Sep 17 00:00:00 2001
From: vwh <vwhe@proton.me>
Date: Tue, 13 Aug 2024 10:38:18 +0300
Subject: [PATCH] making proxy message better and more clear

---
 src/App.tsx                              |  2 +-
 src/components/landing/proxy-message.tsx | 17 +++++++++--------
 src/components/ui/alert-dialog.tsx       |  8 +-------
 3 files changed, 11 insertions(+), 16 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index 60570d1..7ea723b 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -121,7 +121,7 @@ function App() {
       <ProxyMessage
         showDialog={showDialog}
         setShowDialog={setShowDialog}
-        fn={handleRetryWithProxy}
+        onConfirm={handleRetryWithProxy}
       />
     </main>
   );
diff --git a/src/components/landing/proxy-message.tsx b/src/components/landing/proxy-message.tsx
index 5dec3ce..e865805 100644
--- a/src/components/landing/proxy-message.tsx
+++ b/src/components/landing/proxy-message.tsx
@@ -14,13 +14,13 @@ import {
 interface ProxyMessageProps {
   showDialog: boolean;
   setShowDialog: React.Dispatch<React.SetStateAction<boolean>>;
-  fn: () => void;
+  onConfirm: () => void;
 }
 
 export default function ProxyMessage({
   showDialog,
   setShowDialog,
-  fn
+  onConfirm
 }: ProxyMessageProps) {
   const handleClose = useCallback(() => {
     setShowDialog(false);
@@ -30,18 +30,19 @@ export default function ProxyMessage({
     <AlertDialog open={showDialog} onOpenChange={setShowDialog}>
       <AlertDialogContent>
         <AlertDialogHeader>
-          <AlertDialogTitle>Retry using a proxy?</AlertDialogTitle>
+          <AlertDialogTitle>Use Proxy to Load Database?</AlertDialogTitle>
           <AlertDialogDescription>
-            Failed to load the database from the provided URL due to possible
-            CORS restrictions.
+            We couldn't load the database from the provided URL due to CORS
+            restrictions. Would you like to try using a proxy?
           </AlertDialogDescription>
         </AlertDialogHeader>
-        <div className="text-sm font-semibold">
-          Using the proxy may expose your database to corsproxy.io services.
+        <div className="font-semibold text-yellow-600 md:text-left">
+          Warning: Using the proxy will route your database traffic through
+          cors.eu.org.
         </div>
         <AlertDialogFooter>
           <AlertDialogCancel onClick={handleClose}>Cancel</AlertDialogCancel>
-          <AlertDialogAction onClick={fn}>Confirm</AlertDialogAction>
+          <AlertDialogAction onClick={onConfirm}>Use Proxy</AlertDialogAction>
         </AlertDialogFooter>
       </AlertDialogContent>
     </AlertDialog>
diff --git a/src/components/ui/alert-dialog.tsx b/src/components/ui/alert-dialog.tsx
index d498f85..6993864 100644
--- a/src/components/ui/alert-dialog.tsx
+++ b/src/components/ui/alert-dialog.tsx
@@ -47,13 +47,7 @@ const AlertDialogHeader = ({
   className,
   ...props
 }: React.HTMLAttributes<HTMLDivElement>) => (
-  <div
-    className={cn(
-      "flex flex-col space-y-2 text-center sm:text-left",
-      className
-    )}
-    {...props}
-  />
+  <div className={cn("flex flex-col space-y-2", className)} {...props} />
 );
 AlertDialogHeader.displayName = "AlertDialogHeader";