From 96fc04e71e08168f6934fae522efe3947c8baf44 Mon Sep 17 00:00:00 2001 From: Mohammed Al-yaseen Date: Mon, 10 Nov 2025 08:49:14 +0300 Subject: [PATCH] update theme variables --- src/ThemeConstants.ts | 347 +++++++++--------- .../LanguageSwitch/LanguageSwitch.module.css | 18 + .../LanguageSwitch/LanguageSwitch.tsx | 16 +- src/layouts/app/HeaderMenuDrawer.tsx | 67 ++-- 4 files changed, 235 insertions(+), 213 deletions(-) diff --git a/src/ThemeConstants.ts b/src/ThemeConstants.ts index 2d8e5a5..50c2dbe 100644 --- a/src/ThemeConstants.ts +++ b/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, }, }, diff --git a/src/components/LanguageSwitch/LanguageSwitch.module.css b/src/components/LanguageSwitch/LanguageSwitch.module.css index e69de29..c965967 100644 --- a/src/components/LanguageSwitch/LanguageSwitch.module.css +++ b/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; +} diff --git a/src/components/LanguageSwitch/LanguageSwitch.tsx b/src/components/LanguageSwitch/LanguageSwitch.tsx index 41b407b..fe21681 100644 --- a/src/components/LanguageSwitch/LanguageSwitch.tsx +++ b/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 ( -
+
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 ( <> -
-
+ {!isLoadingMenu && ( +
+
+ )}