fix: resolve profile bugs

index.html

@@ -29,7 +29,6 @@
       html,
       body {
         background: #ab25c0; /* before page load */
-        /* background: rgb(171, 37, 192); before page load */
         height: 100%;
         margin: 0;
       }

package.json

@@ -1,7 +1,7 @@
 {
   "name": "app.salona",
   "private": true,
-  "version": "2.90.8",
+  "version": "2.90.9",
   "type": "module",
   "scripts": {
     "dev": "vite --host",

src/App.tsx

@@ -1,8 +1,5 @@
 import { useEffect } from "react";
-import "aos/dist/aos.css";
-import "swiper/swiper-bundle.css";
-import "react-h5-audio-player/lib/styles.css";
-import "./App.css";
+
 import AOS from "aos";
 import { ErrorBoundary } from "react-error-boundary";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
@@ -11,10 +8,7 @@ import { ErrorBoundaryFallback } from "@/components/ErrorBoundaryFallback";
 import SplashScreen from "./components/SplashScreen";
 import { Toaster } from "react-hot-toast";
 import VpnDetector from "./components/VpnDetector";
-import {
-  mutationErrorHandler,
-  requestErrorRetryHandler,
-} from "./utils/error-handlers";
+import { mutationErrorHandler, requestErrorRetryHandler } from "./utils/error-handlers";
 
 import UpdateDetector from "./components/UpdateDetector";
 import { MultiAccountsProvider } from "@appointment/hooks/useMultipleAccounts.tsx";
@@ -22,89 +16,85 @@ import AllRoutes from "@/routes";
 import useSamsungBrowserWarning from "./hooks/useSamsungBrowserWarning";
 import InternetStatusDetector from "./components/InternetStatusDetector";
 
-import "./App.css";
 import LayoutWithNavigation from "./apps/new-ui/components/FooterLayout";
+import "swiper/swiper-bundle.css";
+import "react-h5-audio-player/lib/styles.css";
+import "./App.css";
 
 const preventPinchZoom = (event: TouchEvent) => {
-  if (event.touches.length > 1) event.preventDefault();
+    if (event.touches.length > 1) event.preventDefault();
 };
 
 //main file
 function App() {
-  // ====================DON'T DELETE PLEASE==========================================
-  // useEffect(() => {
-  //   const themeColorMetaTag = document.querySelector(
-  //     'meta[name="theme-color"]'
-  //   );
-  //   if (themeColorMetaTag) {
-  //     const backgroundColor = getComputedStyle(document.body).backgroundColor;
+    // ====================DON'T DELETE PLEASE==========================================
+    // useEffect(() => {
+    //   const themeColorMetaTag = document.querySelector(
+    //     'meta[name="theme-color"]'
+    //   );
+    //   if (themeColorMetaTag) {
+    //     const backgroundColor = getComputedStyle(document.body).backgroundColor;
 
-  //     // If backgroundColor is transparent or the default color, set it to black
-  //     themeColorMetaTag.setAttribute("content", backgroundColor || "#000");
-  //   }
-  // }, []);
+    //     // If backgroundColor is transparent or the default color, set it to black
+    //     themeColorMetaTag.setAttribute("content", backgroundColor || "#000");
+    //   }
+    // }, []);
 
-  // =============================================================
-  useEffect(() => {
-    const themeColorMetaTag = document.querySelector(
-      'meta[name="theme-color"]'
+    // =============================================================
+    useEffect(() => {
+        const themeColorMetaTag = document.querySelector('meta[name="theme-color"]');
+        if (themeColorMetaTag) {
+            themeColorMetaTag.setAttribute("content", "#ab25c0"); // رنگ بنفش ثابت
+        }
+    }, []);
+
+    useSamsungBrowserWarning();
+    const queryClient = new QueryClient({
+        defaultOptions: {
+            queries: {
+                staleTime: Infinity,
+                retry: requestErrorRetryHandler,
+            },
+            mutations: {
+                onError: mutationErrorHandler,
+            },
+        },
+    });
+
+    useEffect(() => {
+        AOS.init({
+            duration: 1200,
+            once: true,
+        });
+
+        document.addEventListener("touchmove", preventPinchZoom, {
+            passive: false,
+        });
+        return () => {
+            document.removeEventListener("touchmove", preventPinchZoom);
+        };
+    }, []);
+
+    return (
+        <SplashScreen>
+            <QueryClientProvider client={queryClient}>
+                <MultiAccountsProvider>
+                    <VpnDetector />
+                    <UpdateDetector />
+                    <InternetStatusDetector>
+                        <ErrorBoundary fallbackRender={({ error }) => <ErrorBoundaryFallback error={error} />}>
+                            <Router>
+                                <LayoutWithNavigation>
+                                    <AllRoutes />
+                                </LayoutWithNavigation>
+                            </Router>
+                        </ErrorBoundary>
+                        <Toaster />
+                    </InternetStatusDetector>
+                </MultiAccountsProvider>
+            </QueryClientProvider>
+        </SplashScreen>
     );
-    if (themeColorMetaTag) {
-      themeColorMetaTag.setAttribute("content", "#ab25c0"); // رنگ بنفش ثابت
-    }
-  }, []);
-
-  useSamsungBrowserWarning();
-  const queryClient = new QueryClient({
-    defaultOptions: {
-      queries: {
-        staleTime: Infinity,
-        retry: requestErrorRetryHandler,
-      },
-      mutations: {
-        onError: mutationErrorHandler,
-      },
-    },
-  });
-
-  useEffect(() => {
-    AOS.init({
-      duration: 1200,
-      once: true,
-    });
-
-    document.addEventListener("touchmove", preventPinchZoom, {
-      passive: false,
-    });
-    return () => {
-      document.removeEventListener("touchmove", preventPinchZoom);
-    };
-  }, []);
-
-  return (
-    <SplashScreen>
-      <QueryClientProvider client={queryClient}>
-        <MultiAccountsProvider>
-          <VpnDetector />
-          <UpdateDetector />
-          <InternetStatusDetector>
-            <ErrorBoundary
-              fallbackRender={({ error }) => (
-                <ErrorBoundaryFallback error={error} />
-              )}
-            >
-              <Router>
-                <LayoutWithNavigation>
-                  <AllRoutes />
-                </LayoutWithNavigation>
-              </Router>
-            </ErrorBoundary>
-            <Toaster />
-          </InternetStatusDetector>
-        </MultiAccountsProvider>
-      </QueryClientProvider>
-    </SplashScreen>
-  );
 }
 
 export default App;

src/apps/new-ui/pages/Profile/+components/LangSupportRow.tsx

@@ -7,9 +7,8 @@ const LangSupportRow: React.FC<Props> = ({ headsetIcon, onOpenSupport }) => {
     return (
         <div
             onClick={onOpenSupport}
-            // data-aos="fade-up"
             data-aos="fade-right"
-            className="w-full cursor-pointer flex items-center justify-between border-2 border-[#0000001A] rounded-2xl py-4 mt-4 px-4 shadow-md"
+            className="w-1/2 cursor-pointer flex items-center justify-between border-2 border-[#0000001A] rounded-2xl py-4 mt-4 px-4 shadow-md"
         >
             <div className="w-full flex justify-center items-center gap-2">
                 <img src={headsetIcon} alt="headset icon" />

src/apps/new-ui/pages/Profile/+components/PillSelect.tsx

@@ -47,8 +47,6 @@ export default function PillSelect({ options, value, defaultValue, onChange, cla
     return (
         <div
             ref={rootRef}
-            // data-aos="fade-up"
-            data-aos="fade-left"
             onClick={() => setOpen((s) => !s)}
             aria-haspopup="listbox"
             aria-expanded={open}

src/apps/new-ui/pages/Profile/index.tsx

@@ -231,7 +231,7 @@ const Profile: React.FC = () => {
     }, []);
 
     return (
-        <div className="flex flex-col items-center justify-center pb-32 min-h-screen">
+        <div className="flex flex-col items-center justify-center pb-32 min-h-screen overflow-hidden">
             <div className="w-full bg-gradient-to-b from-[#E6B4FF] to-white flex flex-col items-center justify-center">
                 <div className="w-full max-w-2xl flex flex-col">
                     <TopBar
@@ -293,15 +293,17 @@ const Profile: React.FC = () => {
                 <QuickLink icon={moduleIcon} title="لیست ماژول‌ها" onClick={() => navigate("/modules-list")} />
 
                 <div className="flex items-center w-full gap-4">
-                    <PillSelect
-                        options={[
-                            { value: "fa", label: "پارسی" },
-                            { value: "en", label: "English" },
-                            { value: "ar", label: "العربية" },
-                        ]}
-                        value={lang}
-                        onChange={(v) => setLang(v)}
-                    />
+                    <div data-aos="fade-left" className="w-1/2">
+                        <PillSelect
+                            options={[
+                                { value: "fa", label: "پارسی" },
+                                { value: "en", label: "English" },
+                                { value: "ar", label: "العربية" },
+                            ]}
+                            value={lang}
+                            onChange={(v) => setLang(v)}
+                        />
+                    </div>
 
                     <LangSupportRow headsetIcon={headset} onOpenSupport={openSupport} />
                 </div>

src/main.tsx

@@ -1,6 +1,7 @@
 // import { StrictMode } from 'react';
 import { createRoot } from "react-dom/client";
 import App from "./App.tsx";
+import "aos/dist/aos.css";
 
 window.requestAnimationFrame(() => {
   const el = document.getElementById('initial-bg');

vite.config.ts

@@ -22,7 +22,7 @@ export default defineConfig({
         short_name: "Salona",
         start_url: "/",
         scope: "/",
-        theme_color: "#ab25c0",
+        theme_color: "#000000",
         background_color: "#ab25c0",
         dir: "rtl",
         lang: "fa",