Landing page UI fix

[bannaarisamy-shanmugham-kanini]

Description

Updating the user landing page with updated UI details to ensure users have better understanding

Changes Made

Worked on various places to handle design changes to manage landing page behaves perfectly based on user actions

How to Test

1. Login into Semoss application
2. In the landing page check for every details like sidenav button open/close actions, app builder switch button, etc

Notes

[github-actions]

@CodiumAI-Agent /describe

[QodoAI-Agent]

Title

Landing page UI fix

---

User description

Description

Updating the user landing page with updated UI details to ensure users have better understanding

Changes Made

Worked on various places to handle design changes to manage landing page behaves perfectly based on user actions

How to Test

1. Login into Semoss application
2. In the landing page check for every details like sidenav button open/close actions, app builder switch button, etc

Notes

---

PR Type

Enhancement

---

Description

• Refactor AppTileCard: lazy-load images and skeletons

• Revamp Sidebar & Navbar styling and controls

• Update landing components: FeaturedAppCard, BannerSection, FanFavoritesSection

• Style CreateAppSection & DeveloperUserScreen layouts

---

File Walkthrough

	Relevant files

---

[github-actions]

@CodiumAI-Agent /review

[github-actions]

@CodiumAI-Agent /improve

[QodoAI-Agent]

PR Reviewer Guide 🔍

Here are some key observations to aid the review process:

⏱️ Estimated effort to review: 5 🔵🔵🔵🔵🔵

🧪 No relevant tests

🔒 No security concerns identified

⚡ Recommended focus areas for review useEffect dependencies Effects that set loading state or fetch images (e.g., the useEffect on lines 431-437) use an empty dependency array but read props like isLoading and app. Missing dependencies can cause stale or never-updated state. Verify and explicitly list all external values in each hook’s dependency array. useEffect(() => { if (isLoading) { setLoading(true); } else { setLoading(false); } }, []); Invalid CSS selector The styled StyledIconButton uses a nested $icon selector inside &:hover, which is not valid CSS to target the child icon element. Consider using a proper nested selector (e.g., &:hover svg or a class) to style the icon on hover. const StyledIconButton = styled(IconButton)(({ theme }) => ({ backgroundColor: theme.palette.background.paper, height: "28px", width: "28px", radius: "24px", "&:hover": { backgroundColor: theme.palette.background.paper, $icon: { color: "red", }, }, })); Incorrect hover rule The StyledSeeAllButton defines &.MuiButtonBase-root: hover, with a space before the pseudo-class. This will not apply on hover. Use &:hover or remove the space. "&.MuiButtonBase-root: hover": { backgroundColor: "#F5F5F5", }, }));

[QodoAI-Agent]

PR Code Suggestions ✨

Category	Suggestion	Impact
Possible issue	Update loading effect dependencies The effect that syncs loading with isLoading only runs once due to an empty dependency array, causing stale state if isLoading changes. Add isLoading to its dependency list or simplify the logic. packages/client/src/components/app/AppTileCard.tsx [431-437] useEffect(() => { - if (isLoading) { - setLoading(true); - } else { - setLoading(false); - } -}, []); + setLoading(isLoading); +}, [isLoading]); Suggestion importance[1-10]: 8 __ Why: The empty dependency array prevents the effect syncing loading when isLoading changes, causing stale state; adding isLoading to deps or simplifying the effect is essential for correct UI updates.	Medium
	Remove invalid styled variants The variants key is not supported in this styled configuration and may prevent the drawer width from applying correctly. Move the width into the root or paper styles and remove the unsupported variants array to ensure both permanent and temporary drawers render at the expected width. packages/client/src/components/shared/Sidebar.tsx [76-92] const StyledSidebar = styled(Drawer)(() => ({ flexShrink: 0, whiteSpace: "nowrap", boxSizing: "border-box", "& .MuiDrawer-paper": { width: DRAWER_OPEN_WIDTH, - borderRadius: 0, + boxSizing: "border-box", }, - variants: [ - { - props: ({ variant }) => variant === "permanent", - style: { - width: DRAWER_OPEN_WIDTH, - }, - }, - ], })); Suggestion importance[1-10]: 7 __ Why: The variants array in the styled call is not supported and may be ignored, so removing it and consolidating the width into the root and paper styles ensures the drawer renders at the correct width.	Medium
General	Fix icon hover selector The $icon selector won't target the nested SVG; you should use the correct class selector and fix the radius prop name. packages/client/src/components/app/AppTileCard.tsx [201-212] const StyledIconButton = styled(IconButton)(({ theme }) => ({ backgroundColor: theme.palette.background.paper, height: "28px", width: "28px", - radius: "24px", + borderRadius: "24px", "&:hover": { backgroundColor: theme.palette.background.paper, - $icon: { + "& .MuiSvgIcon-root": { color: "red", }, }, })); Suggestion importance[1-10]: 6 __ Why: The $icon selector and radius prop are invalid; switching to & .MuiSvgIcon-root and using borderRadius ensures the hover color and button shape apply correctly.	Low
	Correct open button hover The nested :hover selector applies to descendants rather than the button itself. Simplify the padding rule and use &:hover to style the hover state. packages/client/src/components/app/AppTileCard.tsx [214-223] const StyledOpenButton = styled(IconButton)(({ theme }) => ({ display: "flex", alignItems: "center", - "&.MuiIconButton-root": { - padding: 0, - }, - "&.MuiIconButton-root :hover": { + padding: 0, + "&:hover": { backgroundColor: theme.palette.primary.hover, }, })); Suggestion importance[1-10]: 5 __ Why: The nested &.MuiIconButton-root :hover targets child elements instead of the button itself; using &:hover and setting padding directly simplifies the styling and fixes the hover behavior.	Low
	Use standard container width The CSS value "fill-available" is non-standard and may not work across browsers. Replace it with a standard width (e.g. "100%") or a flex setting to ensure consistent layout. packages/client/src/components/landing/FeaturedAppCard.tsx [15-23] const StyledInnerContainer = styled("div")(({ theme }) => ({ display: "flex", - // flex: '0.55 1 75%', alignItems: "center", padding: theme.spacing(2), justifyContent: "space-between", flexDirection: "column", - width: "fill-available", + width: "100%", })); Suggestion importance[1-10]: 5 __ Why: The CSS value "fill-available" is non-standard and may not work across browsers, so replacing it with "100%" ensures consistent layout.	Low
	Broaden tagline prop type Allow more flexible children in the tagline prop by using ReactNode instead of ReactElement, so consumers can pass strings, fragments, or other nodes without type errors. packages/client/src/components/landing/FeaturedAppCard.tsx [94-102] interface FeaturedAppCardProps { /** * Tagline */ - tagline: string | ReactElement; + tagline: React.ReactNode; // ... } Suggestion importance[1-10]: 4 __ Why: Changing the tagline prop to React.ReactNode allows more flexible children (strings, fragments, nodes) without causing type errors.	Low

[johbaxter]

Hey we really need to ensure code standards when pushing the PR's.

Please fix inline styles and organize imports as you go into files.

[github-actions]

@CodiumAI-Agent /update_changelog

[QodoAI-Agent]

Changelog updates: 🔄

2025-07-31 *

Changed

• Enhanced landing page UI for improved clarity and user guidance
• Fixed inconsistencies in sidebar toggle and action button behaviors
• Updated landing page styles for consistent look and feel

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