fix(client): add custom shape and palette options to theme

[stelbailey]

Description

Changes Made

How to Test

1. Steps to reproduce/test the behavior
2. Expected outcomes

Notes

[github-actions]

@CodiumAI-Agent /describe

[QodoAI-Agent]

Title

fix(client): add custom shape and palette options to theme

---

User description

Description

Changes Made

How to Test

1. Steps to reproduce/test the behavior
2. Expected outcomes

Notes

---

PR Type

Enhancement

---

Description

• Add custom shape properties to MUI theme.

• Introduce additional custom palette options.

• Remove redundant palette casting in components.

• Use direct theme.palette access in styled elements.

---

Changes walkthrough 📝

Relevant files

Enhancement

7 files theme.ts Add extended theme interface for shape and palette.            +19/-0    Function.tsx Remove palette cast; use theme.palette directly.                  +1/-3      Vector.tsx Simplify palette usage for vector icon color.                        +1/-3      TextEditorCodeGeneration.tsx Update button styles to use theme.palette values.                +2/-6      DatabaseStatistics.tsx Update card styling with direct theme.palette usage.          +1/-4      Filterbox.tsx Simplify Filterbox styling without palette extraction.      +2/-9      ImportPage.tsx Update card and form styles to use theme.palette.                +2/-12

---

Need help?

Type /help how to ... in the comments thread for any questions about PR-Agent usage.

Check out the documentation for more information.

[github-actions]

@CodiumAI-Agent /review

[QodoAI-Agent]

PR Reviewer Guide 🔍

Here are some key observations to aid the review process:

⏱️ Estimated effort to review: 3 🔵🔵🔵⚪⚪

🧪 No relevant tests

🔒 No security concerns identified

⚡ Recommended focus areas for review Theme Extension The PR introduces custom extensions to the MUI theme by adding new shape and palette properties. Ensure these definitions integrate consistently with the rest of the application and are documented so that future developers understand their usage. interface Theme { shape: { borderRadiusNone: number; borderRadiusSm: number; borderRadiusLg: number; borderRadiusCircle: number; borderRadiusChip: number; borderRadius: number; }; } interface Palette { primaryContrast?: CustomPaletteColor; green?: CustomPaletteColor; darkBlue?: CustomPaletteColor; pink?: CustomPaletteColor; purple?: CustomPaletteColor; } Theme Styling The new styling implementations use custom theme properties (like primaryContrast['shadow']) in hover effects. Verify that these properties are properly defined and used consistently across components to avoid unexpected visual issues. : `0px 5px 22px 0px ${theme.palette.primaryContrast['shadow']}`, cursor: 'pointer', }, }; }); const StyledCardContent = styled(Card.Content)(() => ({ display: 'flex', padding: '16px', flexDirection: 'column', justifyContent: 'center', alignItems: 'center', gap: '16px', alignSelf: 'stretch', })); const StyledBox = styled(Box)({ boxShadow: '0px 5px 22px 0px rgba(0, 0, 0, 0.06)', width: '100%', padding: '16px 16px 16px 16px', marginBottom: '32px', }); const StyledInnerBox = styled('div')(({ theme }) => ({ display: 'flex', alignItems: 'center', gap: theme.spacing(1), })); const StyledCardImage = styled('img')({ display: 'flex', height: '30px', width: '30px', alignItems: 'flex-start', gap: '10px', alignSelf: 'stretch', overflowClipMargin: 'content-box', overflow: 'clip', objectFit: 'cover', }); const StyledCardText = styled('p')({ overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', margin: '0', }); const StyledFormTypeBox = styled(Box, { shouldForwardProp: (prop) => prop !== 'disabled', })<{ disabled: boolean; }>(({ theme, disabled }) => { return { maxWidth: '215px', maxHeight: '75px', borderRadius: '12px', cursor: 'pointer', display: 'block', justifyContent: 'center', alignItems: 'center', border: '1px solid rgba(0,0,0,0.1)', padding: '16px 24px', boxShadow: '0px 5px 22px 0px rgba(0, 0, 0, 0.04), 0px 4px 4px 0.5px rgba(0, 0, 0, 0.03)', backgroundColor: disabled ? theme.palette.grey['100'] : 'white', '&:hover': { cursor: 'pointer', boxShadow: disabled ? '0px 5px 22px 0px rgba(0, 0, 0, 0.04), 0px 4px 4px 0.5px rgba(0, 0, 0, 0.03)' : `0px 5px 22px 0px ${theme.palette.primaryContrast['shadow']}`, },

[github-actions]

@CodiumAI-Agent /improve

[QodoAI-Agent]

PR Code Suggestions ✨

Category	Suggestion	Impact
Possible issue	Enforce required palette types If these custom palette properties are always expected, enforce them as required in the type (remove the optional marker) to avoid unintended undefined values. libs/ui/src/theme.ts [15-33] declare module "@mui/material" { interface Theme { shape: { borderRadiusNone: number; borderRadiusSm: number; borderRadiusLg: number; borderRadiusCircle: number; borderRadiusChip: number; borderRadius: number; }; } interface Palette { - primaryContrast?: CustomPaletteColor; - green?: CustomPaletteColor; - darkBlue?: CustomPaletteColor; - pink?: CustomPaletteColor; - purple?: CustomPaletteColor; + primaryContrast: CustomPaletteColor; + green: CustomPaletteColor; + darkBlue: CustomPaletteColor; + pink: CustomPaletteColor; + purple: CustomPaletteColor; } } Suggestion importance[1-10]: 5 __ Why: The suggestion proposes making custom palette properties required, which can help prevent undefined value errors. However, this may conflict with the design intent of optional customization in the MUI theme augmentation and could introduce breaking changes.	Low
	Safeguard color access Accessing custom palette properties directly may throw errors if they are undefined—use optional chaining with a fallback value to ensure runtime safety. packages/client/src/assets/img/Function.tsx [16-20] const StyledIcon = styled(SwitchAccessShortcutOutlined)(({ theme }) => { return { - color: theme.palette.pink['300'], + color: theme.palette.pink?.['300'] || 'initialColor', }; }); Suggestion importance[1-10]: 3 __ Why: The suggestion adds optional chaining and a fallback for accessing the 'pink' palette, enhancing runtime safety. Nonetheless, this change is minor, and the fallback value is arbitrary, potentially masking configuration issues.	Low

[github-actions]

@CodiumAI-Agent /update_changelog

[QodoAI-Agent]

Changelog updates: 🔄

2025-03-27

Fixed

• Updated theme definitions and palette usage to support custom shape and color options.

to commit the new content to the CHANGELOG.md file, please type:
'/update_changelog --pr_update_changelog.push_changelog_changes=true'