diff --git a/client/package-lock.json b/client/package-lock.json index 6cee968e3..f6adb320d 100644 --- a/client/package-lock.json +++ b/client/package-lock.json @@ -11,6 +11,7 @@ "@csstools/css-tokenizer": "^3.0.4", "@emotion/react": "^11.13.3", "@emotion/styled": "^11.13.0", + "@fontsource-variable/geist": "^5.3.0", "@hello-pangea/dnd": "^18.0.0", "@hookform/resolvers": "5.2.2", "@mui/lab": "7.0.0", @@ -92,6 +93,7 @@ "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.29.7.tgz", "integrity": "sha512-RgHBCvtjbOK2gXSNBNIkNoEc9qoVEtau3hj8gEqKQuL3HZAibKarWFEI3Lfm6EYKkLalOh8eSrj9b+ch9H/VBA==", "license": "MIT", + "peer": true, "dependencies": { "@babel/code-frame": "^7.29.7", "@babel/generator": "^7.29.7", @@ -407,6 +409,7 @@ "node_modules/@emotion/react": { "version": "11.14.0", "license": "MIT", + "peer": true, "dependencies": { "@babel/runtime": "^7.18.3", "@emotion/babel-plugin": "^11.13.5", @@ -444,6 +447,7 @@ "node_modules/@emotion/styled": { "version": "11.14.1", "license": "MIT", + "peer": true, "dependencies": { "@babel/runtime": "^7.18.3", "@emotion/babel-plugin": "^11.13.5", @@ -950,6 +954,15 @@ "node": "^12.22.0 || ^14.17.0 || >=16.0.0" } }, + "node_modules/@fontsource-variable/geist": { + "version": "5.3.0", + "resolved": "https://registry.npmjs.org/@fontsource-variable/geist/-/geist-5.3.0.tgz", + "integrity": "sha512-j0m+vLQuG5XAYoHtGCVu0spvlGreR3EzpECUVzkFmI1mTVnAO38l/NEPDCFgZ177JxzYJCLSmTQibIiYPilGrA==", + "license": "OFL-1.1", + "funding": { + "url": "https://github.com/sponsors/ayuhito" + } + }, "node_modules/@hapi/hoek": { "version": "9.3.0", "license": "BSD-3-Clause" @@ -1223,6 +1236,7 @@ "node_modules/@mui/material": { "version": "7.3.7", "license": "MIT", + "peer": true, "dependencies": { "@babel/runtime": "^7.28.4", "@mui/core-downloads-tracker": "^7.3.7", @@ -1327,6 +1341,7 @@ "node_modules/@mui/system": { "version": "7.3.7", "license": "MIT", + "peer": true, "dependencies": { "@babel/runtime": "^7.28.4", "@mui/private-theming": "^7.3.7", @@ -2371,6 +2386,7 @@ "version": "24.5.2", "devOptional": true, "license": "MIT", + "peer": true, "dependencies": { "undici-types": "~7.12.0" } @@ -2386,6 +2402,7 @@ "node_modules/@types/react": { "version": "18.3.27", "license": "MIT", + "peer": true, "dependencies": { "@types/prop-types": "*", "csstype": "^3.2.2" @@ -2476,6 +2493,7 @@ "integrity": "sha512-4Z+L8I2OqhZV8qA132M4wNL30ypZGYOQVBfMgxDH/K5UX0PNqTu1c6za9ST5r9+tavvHiTWmBnKzpCJ/GlVFtg==", "dev": true, "license": "BSD-2-Clause", + "peer": true, "dependencies": { "@typescript-eslint/scope-manager": "7.18.0", "@typescript-eslint/types": "7.18.0", @@ -2756,6 +2774,7 @@ "version": "8.15.0", "dev": true, "license": "MIT", + "peer": true, "bin": { "acorn": "bin/acorn" }, @@ -3112,6 +3131,7 @@ } ], "license": "MIT", + "peer": true, "dependencies": { "baseline-browser-mapping": "^2.10.42", "caniuse-lite": "^1.0.30001800", @@ -3555,7 +3575,8 @@ }, "node_modules/dayjs": { "version": "1.11.13", - "license": "MIT" + "license": "MIT", + "peer": true }, "node_modules/debug": { "version": "4.4.3", @@ -3954,6 +3975,7 @@ "version": "8.57.1", "dev": true, "license": "MIT", + "peer": true, "dependencies": { "@eslint-community/eslint-utils": "^4.2.0", "@eslint-community/regexpp": "^4.6.1", @@ -4766,6 +4788,7 @@ } ], "license": "MIT", + "peer": true, "dependencies": { "@babel/runtime": "^7.27.6" }, @@ -5577,6 +5600,7 @@ "resolved": "https://registry.npmjs.org/maplibre-gl/-/maplibre-gl-5.19.0.tgz", "integrity": "sha512-REhYUN8gNP3HlcIZS6QU2uy8iovl31cXsrNDkCcqWSQbCkcpdYLczqDz5PVIwNH42UQNyvukjes/RoHPDrOUmQ==", "license": "BSD-3-Clause", + "peer": true, "dependencies": { "@mapbox/geojson-rewind": "^0.5.2", "@mapbox/jsonlint-lines-primitives": "^2.0.2", @@ -6358,6 +6382,7 @@ "node_modules/react-dom": { "version": "18.3.1", "license": "MIT", + "peer": true, "dependencies": { "loose-envify": "^1.1.0", "scheduler": "^0.23.2" @@ -6369,6 +6394,7 @@ "node_modules/react-hook-form": { "version": "7.71.1", "license": "MIT", + "peer": true, "engines": { "node": ">=18.0.0" }, @@ -6572,7 +6598,8 @@ }, "node_modules/redux": { "version": "5.0.1", - "license": "MIT" + "license": "MIT", + "peer": true }, "node_modules/redux-persist": { "version": "6.0.0", @@ -6722,6 +6749,7 @@ "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.62.2.tgz", "integrity": "sha512-RFnrW4lhXA3s3eqHDZvN654g8OTjzRfqpIRJYczCGB6HzphckVAi/Qh4tbPUbRuDi7s1Llv8g/NspLkttY3gTA==", "license": "MIT", + "peer": true, "dependencies": { "@types/estree": "1.0.9" }, @@ -7563,6 +7591,7 @@ "version": "5.9.3", "devOptional": true, "license": "Apache-2.0", + "peer": true, "bin": { "tsc": "bin/tsc", "tsserver": "bin/tsserver" @@ -7700,6 +7729,7 @@ "resolved": "https://registry.npmjs.org/vite/-/vite-6.4.3.tgz", "integrity": "sha512-NTKlcQjlAK7MlQoyb6LgaqHc8sso/pVyUJYWMws3jg21uTJw/LddqIFPcPqP6PzpgbIcZyKI85sFE4HBrQDA8A==", "license": "MIT", + "peer": true, "dependencies": { "esbuild": "^0.25.0", "fdir": "^6.4.4", diff --git a/client/package.json b/client/package.json index ce2e481ba..a26499805 100644 --- a/client/package.json +++ b/client/package.json @@ -21,6 +21,7 @@ "@csstools/css-tokenizer": "^3.0.4", "@emotion/react": "^11.13.3", "@emotion/styled": "^11.13.0", + "@fontsource-variable/geist": "^5.3.0", "@hello-pangea/dnd": "^18.0.0", "@hookform/resolvers": "5.2.2", "@mui/lab": "7.0.0", diff --git a/client/src/Components/design-elements/Icon.tsx b/client/src/Components/design-elements/Icon.tsx index 95e68826b..f0de97dd4 100644 --- a/client/src/Components/design-elements/Icon.tsx +++ b/client/src/Components/design-elements/Icon.tsx @@ -8,7 +8,7 @@ interface IconProps { color?: string; } -const Icon = ({ icon: Icon, size = 20, strokeWidth = 1.5, color }: IconProps) => { +const Icon = ({ icon: Icon, size = 16, strokeWidth = 1.5, color }: IconProps) => { return ( { left: 0, right: 0, zIndex: theme.zIndex.snackbar, - backgroundColor: theme.palette.error.main, - color: theme.palette.error.contrastText, + backgroundColor: theme.palette.error.dark, + color: "#FFFFFF", px: theme.spacing(8), py: theme.spacing(4), transition: "top 1s ease-in-out", diff --git a/client/src/Components/design-elements/PageHeader.tsx b/client/src/Components/design-elements/PageHeader.tsx index 84b0f61c6..5bf00c151 100644 --- a/client/src/Components/design-elements/PageHeader.tsx +++ b/client/src/Components/design-elements/PageHeader.tsx @@ -6,6 +6,7 @@ import { Link as RouterLink } from "react-router-dom"; import { useTranslation } from "react-i18next"; import { useTheme } from "@mui/material/styles"; import { ChevronLeft, HelpCircle, FileText, Code } from "lucide-react"; +import { INPUT_BASE_HEIGHT } from "@/Utils/Theme/constants"; import type { ReactNode } from "react"; @@ -109,7 +110,7 @@ export const PageHeader = ({ fontSize: 14, color: theme.palette.text.secondary, lineHeight: 1.55, - maxWidth: 640, + maxWidth: "108ch", }} > {description} @@ -142,7 +143,7 @@ export const PageHeader = ({ alignItems: "center", justifyContent: "center", width: 36, - height: 32, + height: INPUT_BASE_HEIGHT, color: theme.palette.text.secondary, borderRight: idx < linkItems.length - 1 diff --git a/client/src/Components/design-elements/SkeletonCard.tsx b/client/src/Components/design-elements/SkeletonCard.tsx index 05f0c462a..add7a69eb 100644 --- a/client/src/Components/design-elements/SkeletonCard.tsx +++ b/client/src/Components/design-elements/SkeletonCard.tsx @@ -1,4 +1,5 @@ import { Box, Stack, useTheme } from "@mui/material"; +import { INPUT_BASE_HEIGHT } from "@/Utils/Theme/constants"; interface SkeletonCardProps { width?: number | string | { xs?: number | string; md?: number | string }; @@ -44,7 +45,7 @@ export const SkeletonCard = ({ const blockStyle = { width: 55, - height: 34, + height: INPUT_BASE_HEIGHT, borderRadius: theme.shape.borderRadius, background: theme.palette.secondary.main, border: `1px solid ${theme.palette.divider}`, diff --git a/client/src/Components/design-elements/StatBox.tsx b/client/src/Components/design-elements/StatBox.tsx index 1543766fc..453a83687 100644 --- a/client/src/Components/design-elements/StatBox.tsx +++ b/client/src/Components/design-elements/StatBox.tsx @@ -2,7 +2,7 @@ import Stack from "@mui/material/Stack"; import Typography from "@mui/material/Typography"; import Box from "@mui/material/Box"; import { useTheme } from "@mui/material/styles"; -import { lighten } from "@mui/material/styles"; +import { darken, lighten } from "@mui/material/styles"; import useMediaQuery from "@mui/material/useMediaQuery"; import type { PaletteKey } from "@/Utils/Theme/Theme"; import { BaseBox, TooltipWithInfo } from "@/Components/design-elements"; @@ -19,10 +19,10 @@ export const GradientBox = ({ children, palette, sx, interactive }: GradientBox) const isSmall = useMediaQuery(theme.breakpoints.down("md")); const isLight = theme.palette.mode === "light"; const paper = theme.palette.background.paper; - const paperStart = lighten(paper, isLight ? 0.06 : 0.08); + const paperStart = isLight ? darken(paper, 0.02) : lighten(paper, 0.08); const paperEnd = paper; const bg = palette - ? `linear-gradient(135deg, ${theme.palette[palette].light} 0%, ${theme.palette[palette].main} 100%)` + ? `linear-gradient(135deg, ${lighten(theme.palette[palette].main, 0.12)} 0%, ${theme.palette[palette].main} 100%)` : `linear-gradient(135deg, ${paperStart} 0%, ${paperEnd} 100%)`; return ( diff --git a/client/src/Components/design-elements/StatusBox.tsx b/client/src/Components/design-elements/StatusBox.tsx index 017873eb9..a94bd0007 100644 --- a/client/src/Components/design-elements/StatusBox.tsx +++ b/client/src/Components/design-elements/StatusBox.tsx @@ -5,7 +5,7 @@ import { BaseBox } from "@/Components/design-elements"; import { useTranslation } from "react-i18next"; import type { SxProps } from "@mui/material"; -import { useTheme } from "@mui/material/styles"; +import { alpha, useTheme } from "@mui/material/styles"; type StatusBoxProps = React.PropsWithChildren<{ children: React.ReactNode; @@ -34,8 +34,8 @@ export const BGBox = ({ children, sx }: StatusBoxProps) => { sx={{ pointerEvents: "none", backgroundImage: ` - linear-gradient(${theme.palette.divider} 1px, transparent 1px), - linear-gradient(90deg, ${theme.palette.divider} 1px, transparent 1px) + linear-gradient(${alpha(theme.palette.divider, 0.4)} 1px, transparent 1px), + linear-gradient(90deg, ${alpha(theme.palette.divider, 0.4)} 1px, transparent 1px) `, backgroundSize: "24px 24px", maskImage: diff --git a/client/src/Components/design-elements/Table.tsx b/client/src/Components/design-elements/Table.tsx index df0d52b16..8bf2d46f3 100644 --- a/client/src/Components/design-elements/Table.tsx +++ b/client/src/Components/design-elements/Table.tsx @@ -52,6 +52,7 @@ type DataTableProps = emptyViewText?: string; emptyViewPositive?: boolean; getRowSx?: (row: T) => SxProps; + isRowSelected?: (row: T) => boolean; }; export function DataTable< @@ -70,6 +71,7 @@ export function DataTable< emptyViewText, emptyViewPositive, getRowSx, + isRowSelected, }: DataTableProps) { const theme = useTheme(); const [expanded, setExpanded] = useState<(string | number) | null>(null); @@ -197,7 +199,7 @@ export function DataTable< "& :is(th)": { backgroundColor: theme.palette.background.paper, color: theme.palette.text.secondary, - fontWeight: 500, + fontWeight: 600, textTransform: "uppercase", letterSpacing: "0.08em", padding: `${theme.spacing(SPACING.LG)} ${theme.spacing(LAYOUT.MD)}`, @@ -213,10 +215,6 @@ export function DataTable< "& .MuiTableBody-root .MuiTableRow-root:last-child .MuiTableCell-root": { borderBottom: "none", }, - "& .MuiTableBody-root .MuiTableRow-root.is-clickable:hover .MuiTableCell-root": - { - backgroundColor: theme.palette.action.rowHover, - }, }} > @@ -237,13 +235,25 @@ export function DataTable< {data.map((row) => { const key = row.id || row._id || Math.random(); const isExpanded = expanded === key; + const selected = isRowSelected?.(row); return ( { diff --git a/client/src/Components/design-elements/Tabs.tsx b/client/src/Components/design-elements/Tabs.tsx index 149c0bd93..d87b286ef 100644 --- a/client/src/Components/design-elements/Tabs.tsx +++ b/client/src/Components/design-elements/Tabs.tsx @@ -1,6 +1,8 @@ import MuiTabs from "@mui/material/Tabs"; import type { TabsProps } from "@mui/material/Tabs"; import { useTheme } from "@mui/material/styles"; +import { typographyLevels } from "@/Utils/Theme/Palette"; +import { INPUT_BASE_HEIGHT } from "@/Utils/Theme/constants"; interface CustomTabsProps extends TabsProps {} export const Tabs = (props: CustomTabsProps) => { @@ -8,7 +10,7 @@ export const Tabs = (props: CustomTabsProps) => { return ( { iconPosition="start" sx={{ textTransform: "none", - fontSize: 14, + fontSize: typographyLevels.m, fontWeight: 500, - minHeight: 34, + minHeight: INPUT_BASE_HEIGHT, padding: theme.spacing(1, 0), paddingBottom: 0, minWidth: "auto", @@ -48,7 +50,6 @@ export const Tab = (props: CustomTabProps) => { color: theme.palette.text.secondary, "&.Mui-selected": { color: theme.palette.primary.main, - fontWeight: 600, }, "&:hover": { color: theme.palette.text.secondary, diff --git a/client/src/Components/inputs/Button.tsx b/client/src/Components/inputs/Button.tsx index 4eae654b2..33bec7fe8 100644 --- a/client/src/Components/inputs/Button.tsx +++ b/client/src/Components/inputs/Button.tsx @@ -1,7 +1,7 @@ import Button from "@mui/material/Button"; import type { ButtonProps } from "@mui/material/Button"; import { useTheme, darken } from "@mui/material/styles"; -import { HOVER } from "@/Utils/Theme/constants"; +import { INPUT_BASE_HEIGHT, HOVER } from "@/Utils/Theme/constants"; const PALETTE_COLORS = [ "primary", @@ -43,7 +43,8 @@ export const ButtonInput = ({ sx, ...props }: ButtonProps) => { {...props} sx={{ textTransform: "none", - height: 34, + height: INPUT_BASE_HEIGHT, + lineHeight: 1.2, fontWeight: 400, borderRadius: 2, whiteSpace: "nowrap", diff --git a/client/src/Components/inputs/ColorPicker.tsx b/client/src/Components/inputs/ColorPicker.tsx index de736c85d..c65c3f8c7 100644 --- a/client/src/Components/inputs/ColorPicker.tsx +++ b/client/src/Components/inputs/ColorPicker.tsx @@ -4,6 +4,7 @@ import { typographyLevels } from "@/Utils/Theme/Palette"; import { useTheme } from "@mui/material"; import Stack from "@mui/material/Stack"; import { FieldLabel } from "@/Components/inputs/FieldLabel"; +import { INPUT_BASE_HEIGHT } from "@/Utils/Theme/constants"; interface ColorPickerProps extends MuiColorInputProps { fieldLabel?: string; @@ -18,7 +19,7 @@ export const ColorInput = ({ fieldLabel, required, ...props }: ColorPickerProps) sx={{ "& .MuiOutlinedInput-root": { borderRadius: theme.shape.borderRadius, - height: 34, + height: INPUT_BASE_HEIGHT, fontSize: typographyLevels.base, }, "& .MuiOutlinedInput-notchedOutline": { diff --git a/client/src/Components/inputs/DatePicker.tsx b/client/src/Components/inputs/DatePicker.tsx index c63c5ce08..3d82a0fa7 100644 --- a/client/src/Components/inputs/DatePicker.tsx +++ b/client/src/Components/inputs/DatePicker.tsx @@ -8,6 +8,7 @@ import { FieldLabel } from "./FieldLabel"; import { Calendar } from "lucide-react"; import { AdapterDayjs } from "@mui/x-date-pickers/AdapterDayjs"; import { LocalizationProvider } from "@mui/x-date-pickers"; +import { INPUT_BASE_HEIGHT } from "@/Utils/Theme/constants"; interface DatePickerComponentProps extends Omit, "label"> { fieldLabel?: string; @@ -55,7 +56,7 @@ export const DatePickerComponent = ({ flexDirection: "row-reverse", }, "& input": { - minHeight: 34, + minHeight: INPUT_BASE_HEIGHT, p: 0, pl: theme.spacing(3), pr: theme.spacing(5), @@ -66,7 +67,9 @@ export const DatePickerComponent = ({ }, "&:not(:has(.Mui-disabled)):not(:has(.Mui-error)) .MuiOutlinedInput-root:not(:has(input:focus)):hover fieldset": { - borderColor: error ? theme.palette.error.main : theme.palette.divider, + borderColor: error + ? theme.palette.error.main + : theme.palette.text.disabled, }, }, }, diff --git a/client/src/Components/inputs/Select.tsx b/client/src/Components/inputs/Select.tsx index 0077d2be6..eda59a9d1 100644 --- a/client/src/Components/inputs/Select.tsx +++ b/client/src/Components/inputs/Select.tsx @@ -6,6 +6,7 @@ import Stack from "@mui/material/Stack"; import { FieldLabel } from "./FieldLabel"; import { ChevronDown } from "lucide-react"; import Typography from "@mui/material/Typography"; +import { INPUT_BASE_HEIGHT } from "@/Utils/Theme/constants"; interface SelectInputProps extends Omit, "label"> { fieldLabel?: string; @@ -71,7 +72,7 @@ const SelectInputInner = ( /> )} sx={{ - height: "34px", + height: `${INPUT_BASE_HEIGHT}px`, "& .MuiSelect-select": { display: "flex", alignItems: "center", @@ -83,10 +84,6 @@ const SelectInputInner = ( }, "& .MuiOutlinedInput-notchedOutline": { borderRadius: theme.shape.borderRadius, - borderColor: theme.palette.divider, - }, - "&:hover .MuiOutlinedInput-notchedOutline": { - borderColor: theme.palette.divider, }, ...props.sx, }} diff --git a/client/src/Components/inputs/TextInput.tsx b/client/src/Components/inputs/TextInput.tsx index 230e7650b..5fe644ca6 100644 --- a/client/src/Components/inputs/TextInput.tsx +++ b/client/src/Components/inputs/TextInput.tsx @@ -5,7 +5,7 @@ import { typographyLevels } from "@/Utils/Theme/Palette"; import { useTheme } from "@mui/material/styles"; import Stack from "@mui/material/Stack"; import { FieldLabel } from "./FieldLabel"; -import { LAYOUT } from "@/Utils/Theme/constants"; +import { INPUT_BASE_HEIGHT, LAYOUT } from "@/Utils/Theme/constants"; interface TextInputProps extends Omit { fieldLabel?: string; @@ -22,16 +22,10 @@ export const TextInput = forwardRef(function T width: "100%", "& .MuiOutlinedInput-root": { borderRadius: theme.shape.borderRadius, - height: props.multiline ? "auto" : 34, + height: props.multiline ? "auto" : INPUT_BASE_HEIGHT, fontSize: typographyLevels.base, overflow: "hidden", }, - "& .MuiOutlinedInput-notchedOutline": { - borderColor: theme.palette.divider, - }, - "&:hover .MuiOutlinedInput-notchedOutline": { - borderColor: theme.palette.divider, - }, "& .MuiFormHelperText-root": { marginLeft: 0, marginRight: 0, @@ -39,7 +33,7 @@ export const TextInput = forwardRef(function T }, "& input:-webkit-autofill, & input:-webkit-autofill:hover, & input:-webkit-autofill:focus, & input:-webkit-autofill:active": { - WebkitBoxShadow: `0 0 0 100px ${theme.palette.background.default} inset !important`, + WebkitBoxShadow: `0 0 0 100px ${theme.palette.background.paper} inset !important`, WebkitTextFillColor: `${theme.palette.text.primary} !important`, caretColor: theme.palette.text.primary, transition: "background-color 5000s ease-in-out 0s", diff --git a/client/src/Components/inputs/TimePicker.tsx b/client/src/Components/inputs/TimePicker.tsx index b82df1f15..46345cfcb 100644 --- a/client/src/Components/inputs/TimePicker.tsx +++ b/client/src/Components/inputs/TimePicker.tsx @@ -7,6 +7,7 @@ import Typography from "@mui/material/Typography"; import { FieldLabel } from "./FieldLabel"; import { AdapterDayjs } from "@mui/x-date-pickers/AdapterDayjs"; import { LocalizationProvider } from "@mui/x-date-pickers"; +import { INPUT_BASE_HEIGHT } from "@/Utils/Theme/constants"; interface TimePickerComponentProps extends Omit, "label"> { fieldLabel?: string; @@ -33,7 +34,7 @@ export const TimePickerComponent = ({ sx: { width: "fit-content", "& input": { - minHeight: 34, + minHeight: INPUT_BASE_HEIGHT, p: 0, px: theme.spacing(5), }, diff --git a/client/src/Components/inputs/ToggleButton.tsx b/client/src/Components/inputs/ToggleButton.tsx index a2b392357..7a344c071 100644 --- a/client/src/Components/inputs/ToggleButton.tsx +++ b/client/src/Components/inputs/ToggleButton.tsx @@ -4,6 +4,7 @@ import type { ToggleButtonProps } from "@mui/material/ToggleButton"; import type { ToggleButtonGroupProps } from "@mui/material/ToggleButtonGroup"; import { useTheme } from "@mui/material/styles"; import { alpha } from "@mui/material/styles"; +import { INPUT_BASE_HEIGHT } from "@/Utils/Theme/constants"; export const ToggleButtonInput = ({ sx, ...props }: ToggleButtonProps) => { const theme = useTheme(); @@ -20,7 +21,7 @@ export const ToggleButtonInput = ({ sx, ...props }: ToggleButtonProps) => { sx={{ px: 8, textTransform: "none", - height: 34, + height: INPUT_BASE_HEIGHT, fontWeight: 400, whiteSpace: "nowrap", textOverflow: "ellipsis", @@ -34,7 +35,6 @@ export const ToggleButtonInput = ({ sx, ...props }: ToggleButtonProps) => { "&.Mui-selected": { backgroundColor: selectedBg, color: theme.palette.text.primary, - fontWeight: 500, "&:hover": { backgroundColor: selectedHoverBg, }, diff --git a/client/src/Components/sidebar/NavItem.tsx b/client/src/Components/sidebar/NavItem.tsx index 24f2c5778..d573c884f 100644 --- a/client/src/Components/sidebar/NavItem.tsx +++ b/client/src/Components/sidebar/NavItem.tsx @@ -25,11 +25,10 @@ export const NavItem = ({ const iconStroke = selected ? theme.palette.sidebar.accent : theme.palette.text.secondary; - const buttonBgColor = selected ? theme.palette.action.selected : "transparent"; const buttonBgHoverColor = selected - ? theme.palette.action.selected - : theme.palette.action.hover; + ? theme.palette.action.selectedHover + : theme.palette.action.rowHover; const fontWeight = selected ? 600 : 400; return ( { gap={theme.spacing(LAYOUT.SM)} borderRight={`1px solid ${theme.palette.divider}`} width={width} + bgcolor={theme.palette.background.paper} sx={{ touchAction: "none", transition: transition, zIndex: 1000, - backdropFilter: "blur(8px)", }} > } + startIcon={ + + } onClick={onInviteClick} > {t("common.buttons.inviteMember")} @@ -69,7 +74,12 @@ export const HeaderTeamControls = ({