style(client): featured card nav to new window and remove inline styles

[johbaxter]

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

style(client): featured card nav to new window and remove inline styles

---

User description

Description

Changes Made

How to Test

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

Notes

---

PR Type

Enhancement

---

Description

• Switch component imports to MUI library

• Refactor styling with theme-based styled components

• Replace inline styles with styled wrappers

• Open card links in new tab if provided

---

File Walkthrough

	Relevant files
Enhancement	FeaturedAppCard.tsx Migrate FeaturedAppCard to MUI styles                                        packages/client/src/components/landing/FeaturedAppCard.tsx Updated imports from @semoss/ui to @mui/material Refactored styled components to leverage theme.palette Removed inline styles, introduced StyledButton, StyledLink Changed chip styling and link opening behavior +143/-144

---

[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

🔒 Security concerns CSS injection: backgroundImage is constructed from the imageUrl prop without sanitization. If imageUrl originates from user input, it may allow injection of malicious CSS. Ensure the URL is validated or sanitized before use.

⚡ Recommended focus areas for review Unused prop The chipColor prop on StyledChip is declared but never applied in the styling. Remove it or incorporate it into the component styles to avoid confusion. const StyledChip = styled(Chip)<{ chipColor?: string }>(({ theme }) => ({ borderRadius: "4px", background: "#FDF0E5", "& .MuiChip-label": { color: "var(--Primary-Main, #5F2B01)", fontFeatureSettings: "'liga' off, 'clig' off", fontFamily: "Inter", fontSize: "13px", fontStyle: "normal", fontWeight: "400", lineHeight: "18px", letterSpacing: "0.16px", }, })); CSS injection risk StyledContainerImageSection interpolates the imageUrl prop directly into backgroundImage. If imageUrl is untrusted, it could enable CSS injection. Validate or sanitize this input. const StyledContainerImageSection = styled("div")<{ backgroundImage: string }>( ({ theme, backgroundImage }) => ({ display: "flex", backgroundImage: `${backgroundImage}`, backgroundSize: "100% 100%", backgroundRepeat: "no-repeat", borderRadius: "12px", minWidth: "204px", }),

[github-actions]

@CodiumAI-Agent /improve

[QodoAI-Agent]

PR Code Suggestions ✨

Category	Suggestion	Impact
Possible issue	Use chipColor prop in styled chip Apply the passed chipColor prop to the background so each card uses its configured color. Destructure chipColor and fall back to your default if it's not provided. packages/client/src/components/landing/FeaturedAppCard.tsx [51-64] -const StyledChip = styled(Chip)<{ chipColor?: string }>(({ theme }) => ({ +const StyledChip = styled(Chip)<{ chipColor?: string }>(({ theme, chipColor }) => ({ borderRadius: "4px", - background: "#FDF0E5", + background: chipColor ?? "#FDF0E5", "& .MuiChip-label": { ... }, })); Suggestion importance[1-10]: 7 __ Why: Adding chipColor to the styled component is necessary to actually apply the passed chip color instead of the hardcoded default, enabling the prop to function as intended.	Medium
General	Pass chip color prop Pass the chip.color value into your new chipColor prop so the styled component knows which background color to render. packages/client/src/components/landing/FeaturedAppCard.tsx [135-139] <StyledChip + chipColor={chip.color} variant="filled" size="small" label={chip.label} /> Suggestion importance[1-10]: 6 __ Why: Supplying chip.color to the new chipColor prop ensures the styled chip receives its intended background color, correctly wiring up the component’s API.	Low

[github-actions]

@CodiumAI-Agent /update_changelog