fascano/web-menu-react-version-
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update theme variables

Browse Source
This commit is contained in:
Mohammed Al-yaseen
2025-11-10 08:49:14 +03:00
parent 60a20b4583
commit 96fc04e71e
4 changed files with 235 additions and 213 deletions
Download Patch File Download Diff File Expand all files Collapse all files

347
src/ThemeConstants.ts
View File

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

18
src/components/LanguageSwitch/LanguageSwitch.module.css
View File

@@ -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;
}

16
src/components/LanguageSwitch/LanguageSwitch.tsx
View File

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

67
src/layouts/app/HeaderMenuDrawer.tsx
View File

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