From 6955cc2f017f11dfedd758c64f679ee2b1c17615 Mon Sep 17 00:00:00 2001
From: EphemeralFog <mohammad87115@gmail.com>
Date: Tue, 20 Jan 2026 23:53:17 +0330
Subject: [PATCH] Fix toast component low z-index and some design issues

---
 src/components/Toast.tsx | 46 ++++++++++++++++-----------------
 src/index.tsx            | 56 ++++++++++++++++++++--------------------
 2 files changed, 51 insertions(+), 51 deletions(-)

diff --git a/src/components/Toast.tsx b/src/components/Toast.tsx
index bd02a0c..279bdbf 100644
--- a/src/components/Toast.tsx
+++ b/src/components/Toast.tsx
@@ -1,27 +1,27 @@
 import type { ReactNode } from "react";
 type Props = {
-  children: ReactNode;
-  onClose: () => void;
+    children: ReactNode;
+    onClose: () => void;
 };
 export default function Toast({ children, onClose }: Props) {
-  return (
-    <div className="group relative w-full px-5 py-2 rounded-lg overflow-hidden transition-all duration-300 hover:scale-105 active:scale-95 cursor-pointer">
-      <div className="absolute inset-0 bg-orange-500/10 backdrop-blur-xl border border-orange-400/30 rounded-lg"></div>
-      <div className="absolute inset-0 bg-linear-to-br from-orange-400/20 via-orange-500/5 to-transparent rounded-lg opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
-      <div className="absolute inset-0 bg-linear-to-r from-transparent via-orange-300/30 to-transparent -translate-x-full group-hover:translate-x-full transition-transform duration-1000 rounded-lg"></div>
-      <div className="absolute inset-0 rounded-lg opacity-0 group-hover:opacity-100 transition-opacity duration-300 blur-xl bg-orange-500/40"></div>
-      <div className="absolute inset-px rounded-lg bg-linear-to-b from-orange-400/10 to-transparent"></div>
-      
-      <span dir='rtl' className="relative flex items-center gap-2 text-white font-medium text-sm font-vazirmatn ml-4">
-        {children}
-      </span>
-      
-      <button
-        onClick={onClose}
-        className="absolute left-3 top-1/2 transform -translate-y-1/2 text-white opacity-70 hover:opacity-100 transition-opacity duration-200"
-      >
-        ×
-      </button>
-    </div>
-  );
-}
\ No newline at end of file
+    return (
+        <div className="group relative w-full px-5 py-2 rounded-lg overflow-hidden transition-all duration-300 active:scale-99 cursor-pointer">
+            <div className="absolute inset-0 bg-orange-500/10 backdrop-blur-xl border border-orange-400/30 rounded-lg"></div>
+            {/*<div className="absolute inset-px rounded-lg bg-linear-to-b from-orange-400/10 to-transparent"></div>*/}
+
+            <span
+                dir="rtl"
+                className="relative flex items-center gap-2 text-white font-medium text-sm font-vazirmatn ml-4"
+            >
+                {children}
+            </span>
+
+            <button
+                onClick={onClose}
+                className="absolute left-3 top-1/2 transform -translate-y-1/2 text-white opacity-70 hover:opacity-100 transition-opacity duration-200"
+            >
+                ×
+            </button>
+        </div>
+    );
+}
diff --git a/src/index.tsx b/src/index.tsx
index 14876a1..c751b35 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -6,42 +6,42 @@ import Modal from "./components/Modal";
 import BackgroundParticles from "./components/Particles";
 import Bokhary from "./components/Bokhary";
 import Toast from "./components/Toast";
-import TimePassed from "./components/TimePassed"
+import TimePassed from "./components/TimePassed";
 
 import "@fontsource/vazirmatn";
 import "./index.css";
 
 function App() {
-  const [modalOpen, setModalOpen] = useState(false);
-  const [toast, showToast] = useState(true);
+    const [modalOpen, setModalOpen] = useState(false);
+    const [toast, showToast] = useState(true);
 
+    return (
+        <StrictMode>
+            <BackgroundParticles />
 
-  return (
-    <StrictMode>
+            <div className="relative min-h-dvh">
+                <div className="fixed m-2 top-0 left-0 right-0 z-20">
+                    {toast && (
+                        <Toast onClose={() => showToast(false)}>
+                            <TimePassed></TimePassed>
+                        </Toast>
+                    )}
+                </div>
+                <div className="relative z-10">
+                    <Bokhary />
+                </div>
 
-      <BackgroundParticles />
+                <div className="fixed bottom-6 left-1/2 -translate-x-1/2 z-20">
+                    <FloatingButton
+                        text="اتصال"
+                        onClick={() => setModalOpen(true)}
+                    />
+                </div>
+            </div>
 
-      <div className="relative min-h-dvh">
-        <div className="fixed m-2 top-0 left-0 right-0">
-          {toast && (
-            <Toast onClose={() => showToast(false)}>
-              <TimePassed></TimePassed>
-            </Toast>
-          )}
-        </div>        
-        <div className="relative z-10">
-          <Bokhary />
-        </div>
-
-        <div className="fixed bottom-6 left-1/2 -translate-x-1/2 z-20">
-          <FloatingButton text="اتصال" onClick={() => setModalOpen(true)} />
-        </div>
-      </div>
-
-      <Modal isOpen={modalOpen} onClose={() => setModalOpen(false)} />
-
-    </StrictMode>
-  );
+            <Modal isOpen={modalOpen} onClose={() => setModalOpen(false)} />
+        </StrictMode>
+    );
 }
 
-createRoot(document.getElementById("root")!).render(<App />);
\ No newline at end of file
+createRoot(document.getElementById("root")!).render(<App />);