update theme variables

src/ThemeConstants.ts

@@ -17,7 +17,7 @@ export const errorColor = "#DC3545";
 export const errorColorDark = "#d9363e";
 export const DisabledColor = "#424242";
 
-export const WHITE_COLOR = {
+export const lightColors = {
   50: "#e0f1ff",
   100: "#b0d2ff",
   200: "#7fb0ff",
@@ -30,19 +30,20 @@ export const WHITE_COLOR = {
   900: "#001620",
   borderColor: "#E7EAF3B2",
   primaryColor: "#FFD633",
-  primaryColor2: "#09237D",
+  secondaryColor: "#09237D",
   whiteColor: "#FFF",
   blackColor: "#000000e0",
-  sidebarBg: "#FFFFFF",
-  tableBg: "#FFFFFF",
-  cardBg: "#FFFFFF",
-  headerBg: "#FFFFFF",
   hoverBg: "#F1F5F9",
   activeBg: "#E2E8F0",
+
+  bgColor: "#f7f7f7",
+  secondaryBgColor: "#ffffff",
+  fgColor: "#181818",
+  secondaryFgColor: "#0a0a0a",
 };
 
 // Enhanced Dark theme colors with better contrast and modern aesthetics
-export const DARK_COLOR = {
+export const darkColors = {
   // Background colors - from darkest to lightest
   50: "#0a0a0a", // Deepest background
   100: "#141414", // Main background
@@ -61,7 +62,7 @@ export const DARK_COLOR = {
   primaryColor: "#FFD633",
   primaryColorHover: "#FFD633",
   primaryColorActive: "#E6B800",
-  primaryColor2: "#FFD633",
+  secondaryColor: "#FFD633",
 
   // Background colors
   whiteColor: "#0a0a0a", // Main background
@@ -89,15 +90,17 @@ export const DARK_COLOR = {
   overlayBg: "rgba(0, 0, 0, 0.45)",
   maskBg: "rgba(0, 0, 0, 0.65)",
 
+  bgColor: "#181818",
+  fgColor: "#f7f7f7",
+  secondaryBgColor: "#0a0a0a",
+  secondaryFgColor: "#ffffff",
+
   // Shadow colors
   shadowLight: "0 1px 2px 0 rgba(0, 0, 0, 0.3)",
   shadowMedium: "0 4px 6px -1px rgba(0, 0, 0, 0.4)",
   shadowHeavy: "0 10px 15px -3px rgba(0, 0, 0, 0.5)",
 };
 
-export const componentBackground = "#f7f7f7";
-export const darkComponentBackground = "#181818";
-
 export const SharedThemeVars = {
   borderRadius: 8,
   borderRadiusLG: 8,
@@ -110,9 +113,9 @@ export const SharedThemeVars = {
 
 export const LightThemeVars = {
   ...SharedThemeVars,
-  white: componentBackground,
-  colorBgElevated: componentBackground,
-  colorBgLayout: componentBackground,
+  white: lightColors.bgColor,
+  colorBgElevated: lightColors.bgColor,
+  colorBgLayout: lightColors.bgColor,
 
   // ------ Pro colors
   proSiderColor: "#1E5083",
@@ -121,19 +124,19 @@ export const LightThemeVars = {
 
 export const DarkThemeVars = {
   ...SharedThemeVars,
-  white: darkComponentBackground,
-  colorBgElevated: DARK_COLOR[200],
-  colorBgContainer: DARK_COLOR[300],
-  colorBgLayout: darkComponentBackground,
-  colorText: DARK_COLOR.textPrimary,
-  colorTextSecondary: DARK_COLOR.textSecondary,
-  colorTextTertiary: DARK_COLOR.textTertiary,
-  colorTextQuaternary: DARK_COLOR.textQuaternary,
-  colorBorder: DARK_COLOR.borderColor,
-  colorBorderSecondary: DARK_COLOR.borderColorLight,
+  white: darkColors.bgColor,
+  colorBgElevated: darkColors[200],
+  colorBgContainer: darkColors[300],
+  colorBgLayout: darkColors.bgColor,
+  colorText: darkColors.textPrimary,
+  colorTextSecondary: darkColors.textSecondary,
+  colorTextTertiary: darkColors.textTertiary,
+  colorTextQuaternary: darkColors.textQuaternary,
+  colorBorder: darkColors.borderColor,
+  colorBorderSecondary: darkColors.borderColorLight,
 
   // ------ Pro colors
-  proSiderColor: DARK_COLOR[200],
+  proSiderColor: darkColors[200],
   proHeaderColor: colors.primary,
 };
 
@@ -146,8 +149,8 @@ export const themeConfig: ThemeConfig = {
     borderRadius: 8,
     // Futuristic button styles
     controlHeight: 40,
-    colorTextLabel: WHITE_COLOR.blackColor,
-    colorBgLayout: componentBackground,
+    colorTextLabel: lightColors.blackColor,
+    colorBgLayout: lightColors.bgColor,
   },
   components: {
     Breadcrumb: {
@@ -155,9 +158,9 @@ export const themeConfig: ThemeConfig = {
       itemColor: "rgba(0,0,0,.8)",
     },
     Button: {
-      colorLink: WHITE_COLOR["600"],
-      colorLinkActive: WHITE_COLOR["700"],
-      colorLinkHover: WHITE_COLOR["300"],
+      colorLink: lightColors["600"],
+      colorLinkActive: lightColors["700"],
+      colorLinkHover: lightColors["300"],
       borderRadius: 1000,
       borderRadiusLG: 1000,
       // defaultShadow: "none",
@@ -166,8 +169,8 @@ export const themeConfig: ThemeConfig = {
       colorBgContainer: "none",
     },
     Card: {
-      colorBgContainer: WHITE_COLOR.cardBg,
-      colorBorderSecondary: WHITE_COLOR["borderColor"],
+      colorBgContainer: lightColors.whiteColor,
+      colorBorderSecondary: lightColors["borderColor"],
       boxShadow: "0 1px 3px rgba(0,0,0,0.1)",
       padding: 16,
       paddingLG: 16,
@@ -175,37 +178,37 @@ export const themeConfig: ThemeConfig = {
       borderRadiusLG: 24,
     },
     Carousel: {
-      colorBgContainer: WHITE_COLOR["800"],
+      colorBgContainer: lightColors["800"],
       dotWidth: 8,
     },
     Rate: {
-      colorFillContent: WHITE_COLOR["100"],
-      colorText: WHITE_COLOR["600"],
+      colorFillContent: lightColors["100"],
+      colorText: lightColors["600"],
     },
     Segmented: {
-      colorBgLayout: WHITE_COLOR["hoverBg"],
+      colorBgLayout: lightColors["hoverBg"],
       borderRadius: 6,
       colorTextLabel: "#000000",
     },
     Table: {
-      borderColor: WHITE_COLOR["100"],
-      headerBg: WHITE_COLOR.primaryColor,
-      headerColor: WHITE_COLOR.whiteColor,
-      rowSelectedBg: WHITE_COLOR.primaryColor,
+      borderColor: lightColors["100"],
+      headerBg: lightColors.primaryColor,
+      headerColor: lightColors.whiteColor,
+      rowSelectedBg: lightColors.primaryColor,
       cellPaddingBlock: 8,
-      colorBgContainer: WHITE_COLOR.tableBg,
-      colorFillAlter: WHITE_COLOR.hoverBg,
+      colorBgContainer: lightColors.whiteColor,
+      colorFillAlter: lightColors.hoverBg,
     },
     Tabs: {
-      colorBorderSecondary: WHITE_COLOR["100"],
+      colorBorderSecondary: lightColors["100"],
     },
     Timeline: {
       dotBg: "none",
     },
     Typography: {
-      colorLink: WHITE_COLOR["600"],
-      colorLinkActive: WHITE_COLOR["700"],
-      colorLinkHover: WHITE_COLOR["300"],
+      colorLink: lightColors["600"],
+      colorLinkActive: lightColors["700"],
+      colorLinkHover: lightColors["300"],
       linkHoverDecoration: "underline",
     },
     Drawer: {
@@ -215,15 +218,15 @@ export const themeConfig: ThemeConfig = {
       controlHeightLG: 30,
     },
     Menu: {
-      colorItemBg: WHITE_COLOR.sidebarBg,
-      colorItemText: WHITE_COLOR["800"],
-      colorItemTextSelected: WHITE_COLOR.primaryColor2,
-      colorItemBgSelected: WHITE_COLOR.activeBg,
-      colorItemBgHover: WHITE_COLOR.hoverBg,
+      colorItemBg: lightColors.whiteColor,
+      colorItemText: lightColors["800"],
+      colorItemTextSelected: lightColors.secondaryColor,
+      colorItemBgSelected: lightColors.activeBg,
+      colorItemBgHover: lightColors.hoverBg,
     },
     Layout: {
-      headerBg: WHITE_COLOR.headerBg,
-      bodyBg: componentBackground,
+      headerBg: lightColors.whiteColor,
+      bodyBg: lightColors.bgColor,
     },
     Input: {
       borderRadiusLG: 1000,
@@ -243,7 +246,7 @@ export const themeConfig: ThemeConfig = {
     Select: {
       borderRadius: 1000,
       multipleItemHeightLG: 32,
-      optionSelectedBg: WHITE_COLOR.activeBg,
+      optionSelectedBg: lightColors.activeBg,
     },
   },
 };
@@ -252,12 +255,12 @@ export const themeConfig: ThemeConfig = {
 export const darkThemeConfig: ThemeConfig = {
   token: {
     // Primary colors
-    colorPrimary: DARK_COLOR.primaryColor,
-    colorPrimaryHover: DARK_COLOR.primaryColorHover,
-    colorPrimaryActive: DARK_COLOR.primaryColorActive,
-    colorLink: DARK_COLOR.primaryColor,
-    colorLinkHover: DARK_COLOR.primaryColorHover,
-    colorLinkActive: DARK_COLOR.primaryColorActive,
+    colorPrimary: darkColors.primaryColor,
+    colorPrimaryHover: darkColors.primaryColorHover,
+    colorPrimaryActive: darkColors.primaryColorActive,
+    colorLink: darkColors.primaryColor,
+    colorLinkHover: darkColors.primaryColorHover,
+    colorLinkActive: darkColors.primaryColorActive,
 
     // Typography
     fontFamily: "var(--font-roboto)",
@@ -275,57 +278,57 @@ export const darkThemeConfig: ThemeConfig = {
     controlHeightSM: 32,
 
     // Background colors
-    colorBgContainer: DARK_COLOR[300],
-    colorBgElevated: DARK_COLOR[200],
-    colorBgLayout: darkComponentBackground,
-    colorBgSpotlight: DARK_COLOR[400],
-    colorBgMask: DARK_COLOR.maskBg,
+    colorBgContainer: darkColors[300],
+    colorBgElevated: darkColors[200],
+    colorBgLayout: darkColors.bgColor,
+    colorBgSpotlight: darkColors[400],
+    colorBgMask: darkColors.maskBg,
 
     // Text colors
-    colorText: DARK_COLOR.textPrimary,
-    colorTextSecondary: DARK_COLOR.textSecondary,
-    colorTextTertiary: DARK_COLOR.textTertiary,
-    colorTextQuaternary: DARK_COLOR.textQuaternary,
-    colorTextPlaceholder: DARK_COLOR.textDisabled,
-    colorTextDisabled: DARK_COLOR.textDisabled,
-    colorTextLabel: DARK_COLOR.textSecondary,
-    colorTextDescription: DARK_COLOR.textTertiary,
+    colorText: darkColors.textPrimary,
+    colorTextSecondary: darkColors.textSecondary,
+    colorTextTertiary: darkColors.textTertiary,
+    colorTextQuaternary: darkColors.textQuaternary,
+    colorTextPlaceholder: darkColors.textDisabled,
+    colorTextDisabled: darkColors.textDisabled,
+    colorTextLabel: darkColors.textSecondary,
+    colorTextDescription: darkColors.textTertiary,
 
     // Border colors
-    colorBorder: DARK_COLOR.borderColor,
-    colorBorderSecondary: DARK_COLOR.borderColorLight,
+    colorBorder: darkColors.borderColor,
+    colorBorderSecondary: darkColors.borderColorLight,
 
     // Fill colors
-    colorFill: DARK_COLOR[400],
-    colorFillSecondary: DARK_COLOR[500],
-    colorFillTertiary: DARK_COLOR[600],
-    colorFillQuaternary: DARK_COLOR[700],
+    colorFill: darkColors[400],
+    colorFillSecondary: darkColors[500],
+    colorFillTertiary: darkColors[600],
+    colorFillQuaternary: darkColors[700],
 
     // Success, warning, error colors
-    colorSuccess: DARK_COLOR.success,
-    colorWarning: DARK_COLOR.warning,
-    colorError: DARK_COLOR.error,
-    colorInfo: DARK_COLOR.info,
+    colorSuccess: darkColors.success,
+    colorWarning: darkColors.warning,
+    colorError: darkColors.error,
+    colorInfo: darkColors.info,
 
     // Shadow
-    boxShadow: DARK_COLOR.shadowLight,
-    boxShadowSecondary: DARK_COLOR.shadowMedium,
+    boxShadow: darkColors.shadowLight,
+    boxShadowSecondary: darkColors.shadowMedium,
   },
   components: {
     // Layout components
     Layout: {
-      headerBg: DARK_COLOR.headerBg,
-      siderBg: DARK_COLOR.sidebarBg,
-      bodyBg: darkComponentBackground,
-      footerBg: DARK_COLOR.headerBg,
+      headerBg: darkColors.headerBg,
+      siderBg: darkColors.sidebarBg,
+      bodyBg: darkColors.bgColor,
+      footerBg: darkColors.headerBg,
     },
 
     // Card component
     Card: {
       colorBgContainer: ProBlack2,
-      colorBorderSecondary: DARK_COLOR.borderColor,
-      boxShadow: DARK_COLOR.shadowLight,
-      boxShadowTertiary: DARK_COLOR.shadowMedium,
+      colorBorderSecondary: darkColors.borderColor,
+      boxShadow: darkColors.shadowLight,
+      boxShadowTertiary: darkColors.shadowMedium,
       padding: 16,
       paddingLG: 20,
       paddingSM: 12,
@@ -335,11 +338,11 @@ export const darkThemeConfig: ThemeConfig = {
 
     // Button component
     Button: {
-      colorPrimary: DARK_COLOR.primaryColor,
-      colorPrimaryHover: DARK_COLOR.primaryColorHover,
-      colorPrimaryActive: DARK_COLOR.primaryColorActive,
-      colorBgContainer: DARK_COLOR[300],
-      colorBorder: DARK_COLOR.borderColor,
+      colorPrimary: darkColors.primaryColor,
+      colorPrimaryHover: darkColors.primaryColorHover,
+      colorPrimaryActive: darkColors.primaryColorActive,
+      colorBgContainer: darkColors[300],
+      colorBorder: darkColors.borderColor,
       controlHeight: 40,
       controlHeightLG: 48,
       controlHeightSM: 32,
@@ -350,19 +353,19 @@ export const darkThemeConfig: ThemeConfig = {
 
     // Input components
     Input: {
-      colorBgContainer: DARK_COLOR[300],
-      colorBorder: DARK_COLOR.borderColor,
-      colorText: DARK_COLOR.textPrimary,
-      colorTextPlaceholder: DARK_COLOR.textDisabled,
+      colorBgContainer: darkColors[300],
+      colorBorder: darkColors.borderColor,
+      colorText: darkColors.textPrimary,
+      colorTextPlaceholder: darkColors.textDisabled,
       borderRadiusLG: 1000,
       fontSize: 12,
       fontSizeLG: 12,
     },
 
     InputNumber: {
-      colorBgContainer: DARK_COLOR[300],
-      colorBorder: DARK_COLOR.borderColor,
-      colorText: DARK_COLOR.textPrimary,
+      colorBgContainer: darkColors[300],
+      colorBorder: darkColors.borderColor,
+      colorText: darkColors.textPrimary,
       borderRadiusLG: 1000,
       fontSize: 12,
       fontSizeLG: 12,
@@ -370,118 +373,118 @@ export const darkThemeConfig: ThemeConfig = {
 
     // Select component
     Select: {
-      colorBgContainer: DARK_COLOR[300],
-      colorBgElevated: DARK_COLOR[200],
-      colorBorder: DARK_COLOR.borderColor,
-      colorText: DARK_COLOR.textPrimary,
-      colorTextPlaceholder: DARK_COLOR.textDisabled,
+      colorBgContainer: darkColors[300],
+      colorBgElevated: darkColors[200],
+      colorBorder: darkColors.borderColor,
+      colorText: darkColors.textPrimary,
+      colorTextPlaceholder: darkColors.textDisabled,
       borderRadius: 1000,
-      optionSelectedBg: DARK_COLOR.activeBg,
+      optionSelectedBg: darkColors.activeBg,
     },
 
     // Menu component
     Menu: {
-      colorItemBg: DARK_COLOR.sidebarBg,
-      colorItemText: DARK_COLOR.textPrimary,
-      colorItemTextSelected: DARK_COLOR.primaryColor,
-      colorItemBgSelected: DARK_COLOR.activeBg,
-      colorItemBgHover: DARK_COLOR.hoverBg,
-      colorSubItemBg: DARK_COLOR[200],
+      colorItemBg: darkColors.sidebarBg,
+      colorItemText: darkColors.textPrimary,
+      colorItemTextSelected: darkColors.primaryColor,
+      colorItemBgSelected: darkColors.activeBg,
+      colorItemBgHover: darkColors.hoverBg,
+      colorSubItemBg: darkColors[200],
       colorActiveBarWidth: 3,
       colorActiveBarBorderSize: 0,
     },
 
     // Table component
     Table: {
-      colorBgContainer: DARK_COLOR.tableBg,
-      colorFillAlter: DARK_COLOR[200],
-      colorFillContent: DARK_COLOR[300],
-      colorFillSecondary: DARK_COLOR[400],
-      headerBg: DARK_COLOR[400],
-      headerColor: DARK_COLOR.textPrimary,
-      rowSelectedBg: DARK_COLOR.activeBg,
-      rowHoverBg: DARK_COLOR.hoverBg,
-      borderColor: DARK_COLOR.borderColor,
-      headerSplitColor: DARK_COLOR.borderColor,
+      colorBgContainer: darkColors.tableBg,
+      colorFillAlter: darkColors[200],
+      colorFillContent: darkColors[300],
+      colorFillSecondary: darkColors[400],
+      headerBg: darkColors[400],
+      headerColor: darkColors.textPrimary,
+      rowSelectedBg: darkColors.activeBg,
+      rowHoverBg: darkColors.hoverBg,
+      borderColor: darkColors.borderColor,
+      headerSplitColor: darkColors.borderColor,
     },
 
     // Drawer component
     Drawer: {
-      colorBgElevated: DARK_COLOR[200],
-      colorBgMask: DARK_COLOR.maskBg,
-      colorBorder: DARK_COLOR.borderColor,
-      colorSplit: DARK_COLOR.borderColor,
+      colorBgElevated: darkColors[200],
+      colorBgMask: darkColors.maskBg,
+      colorBorder: darkColors.borderColor,
+      colorSplit: darkColors.borderColor,
     },
 
     // Modal component
     Modal: {
-      colorBgElevated: DARK_COLOR[200],
-      colorBgMask: DARK_COLOR.maskBg,
-      colorIcon: DARK_COLOR.textSecondary,
-      colorIconHover: DARK_COLOR.textPrimary,
+      colorBgElevated: darkColors[200],
+      colorBgMask: darkColors.maskBg,
+      colorIcon: darkColors.textSecondary,
+      colorIconHover: darkColors.textPrimary,
     },
 
     // Tabs component
     Tabs: {
-      colorBgContainer: DARK_COLOR[300],
-      colorBorderSecondary: DARK_COLOR.borderColor,
-      colorText: DARK_COLOR.textPrimary,
-      colorTextDescription: DARK_COLOR.textSecondary,
-      colorPrimary: DARK_COLOR.primaryColor,
-      colorPrimaryHover: DARK_COLOR.primaryColorHover,
-      colorPrimaryActive: DARK_COLOR.primaryColorActive,
+      colorBgContainer: darkColors[300],
+      colorBorderSecondary: darkColors.borderColor,
+      colorText: darkColors.textPrimary,
+      colorTextDescription: darkColors.textSecondary,
+      colorPrimary: darkColors.primaryColor,
+      colorPrimaryHover: darkColors.primaryColorHover,
+      colorPrimaryActive: darkColors.primaryColorActive,
     },
 
     // Typography component
     Typography: {
-      colorText: DARK_COLOR.textPrimary,
-      colorTextSecondary: DARK_COLOR.textSecondary,
-      colorTextDescription: DARK_COLOR.textTertiary,
-      colorLink: DARK_COLOR.primaryColor,
-      colorLinkHover: DARK_COLOR.primaryColorHover,
-      colorLinkActive: DARK_COLOR.primaryColorActive,
+      colorText: darkColors.textPrimary,
+      colorTextSecondary: darkColors.textSecondary,
+      colorTextDescription: darkColors.textTertiary,
+      colorLink: darkColors.primaryColor,
+      colorLinkHover: darkColors.primaryColorHover,
+      colorLinkActive: darkColors.primaryColorActive,
     },
 
     // Breadcrumb component
     Breadcrumb: {
-      colorText: DARK_COLOR.textSecondary,
-      colorTextDescription: DARK_COLOR.textTertiary,
-      linkColor: DARK_COLOR.textSecondary,
-      lastItemColor: DARK_COLOR.textPrimary,
+      colorText: darkColors.textSecondary,
+      colorTextDescription: darkColors.textTertiary,
+      linkColor: darkColors.textSecondary,
+      lastItemColor: darkColors.textPrimary,
     },
 
     // Divider component
     Divider: {
-      colorSplit: DARK_COLOR.borderColor,
+      colorSplit: darkColors.borderColor,
     },
 
     // Rate component
     Rate: {
-      colorFillContent: DARK_COLOR[400],
-      colorText: DARK_COLOR.primaryColor,
+      colorFillContent: darkColors[400],
+      colorText: darkColors.primaryColor,
     },
 
     // Segmented component
     Segmented: {
-      colorBgLayout: DARK_COLOR[200],
-      colorBgElevated: DARK_COLOR[300],
-      colorText: DARK_COLOR.textPrimary,
-      colorTextLabel: DARK_COLOR.textPrimary,
+      colorBgLayout: darkColors[200],
+      colorBgElevated: darkColors[300],
+      colorText: darkColors.textPrimary,
+      colorTextLabel: darkColors.textPrimary,
       borderRadius: 8,
     },
 
     // Calendar component
     Calendar: {
-      colorBgContainer: DARK_COLOR[300],
-      colorBgElevated: DARK_COLOR[200],
-      colorText: DARK_COLOR.textPrimary,
-      colorTextSecondary: DARK_COLOR.textSecondary,
-      colorBorder: DARK_COLOR.borderColor,
+      colorBgContainer: darkColors[300],
+      colorBgElevated: darkColors[200],
+      colorText: darkColors.textPrimary,
+      colorTextSecondary: darkColors.textSecondary,
+      colorBorder: darkColors.borderColor,
     },
 
     // Carousel component
     Carousel: {
-      colorBgContainer: DARK_COLOR[400],
+      colorBgContainer: darkColors[400],
       dotWidth: 8,
       dotHeight: 8,
       dotActiveWidth: 24,
@@ -489,18 +492,18 @@ export const darkThemeConfig: ThemeConfig = {
 
     // Timeline component
     Timeline: {
-      colorText: DARK_COLOR.textPrimary,
-      colorTextSecondary: DARK_COLOR.textSecondary,
-      colorSplit: DARK_COLOR.borderColor,
+      colorText: darkColors.textPrimary,
+      colorTextSecondary: darkColors.textSecondary,
+      colorSplit: darkColors.borderColor,
     },
 
     // DatePicker component
     DatePicker: {
-      colorBgContainer: DARK_COLOR[300],
-      colorBgElevated: DARK_COLOR[200],
-      colorBorder: DARK_COLOR.borderColor,
-      colorText: DARK_COLOR.textPrimary,
-      colorTextPlaceholder: DARK_COLOR.textDisabled,
+      colorBgContainer: darkColors[300],
+      colorBgElevated: darkColors[200],
+      colorBorder: darkColors.borderColor,
+      colorText: darkColors.textPrimary,
+      colorTextPlaceholder: darkColors.textDisabled,
       borderRadius: 1000,
     },
   },

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",

src/layouts/app/HeaderMenuDrawer.tsx

@@ -4,19 +4,20 @@ import BackIcon from "components/Icons/BackIcon";
 import NextIcon from "components/Icons/NextIcon";
 import ProText from "components/ProText";
 import { useState } from "react";
+import { useGetMenuQuery } from "redux/api/others";
 import { useAppSelector } from "redux/hooks";
-import { componentBackground, darkComponentBackground } from "ThemeConstants";
+import { darkColors, lightColors } from "ThemeConstants";
 import useHeaderMenu from "./hooks/useHeaderMenu";
 
-const {useBreakpoint} = Grid;
+const { useBreakpoint } = Grid;
 
 export default function HeaderMenuDrawer() {
   const { isRTL, locale } = useAppSelector((state) => state.locale);
-  const {themeName} = useAppSelector(state => state.theme)
+  const { themeName } = useAppSelector((state) => state.theme);
   const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
   const { menuItems } = useHeaderMenu();
-  const {xs } = useBreakpoint();
-  const isMobile = xs
+  const { xs } = useBreakpoint();
+  const isMobile = xs;
   const closeMobileMenu = () => setMobileMenuOpen(false);
 
   const mobileMenuLinkStyle = (isActive: boolean): React.CSSProperties => ({
@@ -43,30 +44,42 @@ export default function HeaderMenuDrawer() {
     backgroundColor: "none",
   };
 
+  const { restaurant } = useAppSelector((state) => state.order);
+
+  const { isLoading: isLoadingMenu } = useGetMenuQuery(
+    restaurant?.restautantId,
+    {
+      skip: !restaurant?.restautantId,
+    },
+  );
   return (
     <>
-      <div
-        style={{
-          display: "flex",
-          justifyContent: "space-between",
-          position: "fixed",
-          zIndex: 999,
-          [isRTL ? "left" : "right"]: 0,
-          top: "30%",
-          backgroundColor: themeName === "dark" ? darkComponentBackground : componentBackground,
-          [isRTL ? "borderTopRightRadius" : "borderTopLeftRadius"]: 10,
-          [isRTL ? "borderBottomRightRadius" : "borderBottomLeftRadius"]: 10,
-          border:
-            themeName === "dark" ? "1px solid #374151" : "1px solid #FDF1D9",
-        }}
-      >
-        <Button
-          type="text"
-          icon={isRTL ? <NextIcon /> : <BackIcon />}
-          onClick={() => setMobileMenuOpen(true)}
-          style={actionButtonStyle}
-        />
-      </div>
+      {!isLoadingMenu && (
+        <div
+          style={{
+            display: "flex",
+            justifyContent: "space-between",
+            position: "fixed",
+            zIndex: 999,
+            [isRTL ? "left" : "right"]: 0,
+            top: 220,
+            backgroundColor:
+              themeName === "dark"
+                ? darkColors.secondaryBgColor
+                : lightColors.secondaryBgColor,
+            [isRTL ? "borderTopRightRadius" : "borderTopLeftRadius"]: 10,
+            [isRTL ? "borderBottomRightRadius" : "borderBottomLeftRadius"]: 10,
+            border: "1px solid #E9E9E9",
+          }}
+        >
+          <Button
+            type="text"
+            icon={isRTL ? <NextIcon /> : <BackIcon />}
+            onClick={() => setMobileMenuOpen(true)}
+            style={actionButtonStyle}
+          />
+        </div>
+      )}
       <Drawer
         placement={isRTL ? "left" : "right"}
         maskClosable={false}