update theme variables

src/components/LanguageSwitch/LanguageSwitch.module.css

@@ -0,0 +1,18 @@
+.languageSwitch {
+  display: flex;
+  flex-direction: row;
+  justify-content: end;
+  padding: 0 16px;
+  gap: 10px;
+  position: absolute;
+  top: 50px;
+  z-index: 1000;
+}
+
+:global(.ant-app-rtl) .languageSwitch {
+  left: 0;
+}
+
+:global(.ant-app-ltr) .languageSwitch {
+  right: 0;
+}

src/components/LanguageSwitch/LanguageSwitch.tsx

@@ -5,6 +5,7 @@ import { useTransition } from "react";
 import { useDispatch } from "react-redux";
 import { useAppSelector } from "redux/hooks";
 import ProText from "../ProText";
+import styles from "./LanguageSwitch.module.css";
 
 export function LanguageSwitch() {
   const dispatch = useDispatch();
@@ -23,20 +24,7 @@ export function LanguageSwitch() {
   };
 
   return (
-    <div
-      style={{
-        display: "flex",
-        flexDirection: "row",
-        justifyContent: "end",
-        padding: "0 16px",
-        gap: 10,
-        position: "absolute",
-        top: "15%",
-        [isRTL ? "left" : "right"]: 0,
-        marginBottom: "10%",
-        zIndex: 1000,
-      }}
-    >
+    <div className={styles.languageSwitch}>
       <GlobalOutlined
         style={{
           color: themeName === "dark" ? "#fff" : "#434E5C",