fix: remove switch animation

src/components/form/SwitchInput/SwitchInput.module.css

@@ -45,6 +45,7 @@
     position: absolute;
     top: 0;
     height: 100%;
+    width: 50%;
     border-radius: 9999px;
     z-index: 0;
   }

src/components/form/SwitchInput/SwitchInput.tsx

@@ -6,6 +6,7 @@ import { motion, type HTMLMotionProps } from "motion/react";
 
 import classes from "./SwitchInput.module.css";
 import tg from "@/tg";
+import { useRef } from "react";
 
 type Props = Omit<HTMLMotionProps<"div">, "className" | "onChange"> & {
   value?: boolean | null;
@@ -15,7 +16,8 @@ type Props = Omit<HTMLMotionProps<"div">, "className" | "onChange"> & {
 
 export default function SwitchInput({ value, onChange, className, ...props }: Props) {
   const { t } = useTranslation();
-  const selectedIndex = value != null ? (value ? 0 : 1) : -1;
+  const selectedIndex = value != null ? (value ? 0 : 1) : 0;
+  const selectedIndexRef = useRef(selectedIndex);
 
   return (
     <ContentSurface
@@ -45,12 +47,8 @@ export default function SwitchInput({ value, onChange, className, ...props }: Pr
         {selectedIndex >= 0 && (
           <LightSurface
             className={classes.thumb}
-            initial={{ scale: 0.5 }}
+            initial={{ left: `${selectedIndexRef.current * 50}%` }}
-            animate={{
+            animate={{ left: `${selectedIndex * 50}%` }}
-              left: `${selectedIndex * 50}%`,
-              width: "50%",
-              scale: 1,
-            }}
             transition={{ type: "spring", stiffness: 500, damping: 35 }}
           />
         )}

src/routes/-/RootLayout/RootLayout.module.css

@@ -4,7 +4,7 @@
     height: 100%;
     width: 100%;
 
-    background-image: url("./assets/main-bg.png");
+    background-image: url("./assets/main-bg.svg");
     background-size: auto 101%;
     background-position: center;
     overflow: hidden;