fix: allow custom style for application entries on app board (#12313)

Author: swkatmask

packages/plugin-infra/src/types.ts

@@ -370,6 +370,7 @@ export namespace Plugin.SiteAdaptor {
             disabled: boolean
             tooltipHint?: React.ReactNode
             onClick?: (walletConnectedCallback?: () => void, requiredSupportPluginID?: NetworkPluginID) => void
+            style?: React.CSSProperties
         }) => JSX.Element | null
         /**
          * Used to order the applications on the board

packages/shared/src/UI/components/ApplicationEntry/index.tsx

@@ -99,6 +99,7 @@ interface ApplicationEntryProps {
     iconFilterColor?: string
     tooltipHint?: React.ReactNode
     onClick: () => void
+    style?: React.CSSProperties
 }
 
 export function ApplicationEntry(props: ApplicationEntryProps) {
@@ -111,6 +112,7 @@ export function ApplicationEntry(props: ApplicationEntryProps) {
         tooltipHint,
         recommendFeature,
         iconFilterColor,
+        style,
     } = props
     const { classes, cx } = useStyles({ disabled, iconFilterColor })
     const popperProps = useBoundedPopperProps()
@@ -119,7 +121,7 @@ export function ApplicationEntry(props: ApplicationEntryProps) {
             <Button
                 variant="text"
                 // do not change to sx. the hover image will be changed in applicationBoxHover
-                style={{ background: recommendFeature.backgroundGradient }}
+                style={{ ...style, background: recommendFeature.backgroundGradient }}
                 disabled={disabled}
                 className={cx(
                     classes.recommendFeatureApplicationBox,
@@ -143,7 +145,8 @@ export function ApplicationEntry(props: ApplicationEntryProps) {
                 className={cx(classes.applicationBox, disabled ? classes.disabled : classes.applicationBoxHover)}
                 onClick={disabled ? undefined : onClick}
                 variant="text"
-                disabled={disabled}>
+                disabled={disabled}
+                style={style}>
                 <div className={classes.iconWrapper}>{icon}</div>
                 <TextOverflowTooltip
                     title={title}

packages/shared/src/UI/modals/ApplicationBoardModal/ApplicationBoard.tsx

@@ -201,7 +201,7 @@ function ApplicationBoardPluginsList(props: ApplicationBoardPluginsListProps) {
     )
 }
 
-function RenderEntryComponent({ application }: { application: Application }) {
+function RenderEntryComponent({ application, style }: { application: Application; style?: React.CSSProperties }) {
     const Entry = application.entry.RenderEntryComponent!
 
     const ApplicationEntryStatus = useContext(ApplicationEntryStatusContext)
@@ -252,7 +252,7 @@ function RenderEntryComponent({ application }: { application: Application }) {
     })()
     // #endregion
 
-    return <Entry disabled={disabled} tooltipHint={tooltipHint} onClick={clickHandler} />
+    return <Entry disabled={disabled} tooltipHint={tooltipHint} onClick={clickHandler} style={style} />
 }
 
 interface ApplicationEntryStatusContextProps {

packages/shared/src/UI/modals/ApplicationBoardModal/ApplicationRecommendArea.tsx

@@ -55,7 +55,7 @@ const useStyles = makeStyles()(() => {
 
 interface Props extends withClasses<'recommendFeatureAppListWrapper'> {
     recommendFeatureAppList: Application[]
-    RenderEntryComponent: (props: { application: Application }) => JSX.Element
+    RenderEntryComponent: (props: { application: Application; style?: React.CSSProperties }) => JSX.Element
     isCarouselReady?: () => boolean | null
     setIsHoveringCarousel: (hover: boolean) => void
     isHoveringCarousel: boolean
@@ -105,7 +105,11 @@ export function ApplicationRecommendArea(props: Props) {
                 </CarouselProvider>
             :   <Box className={classes.recommendFeatureAppListWrapper}>
                     {recommendFeatureAppList.map((application) => (
-                        <RenderEntryComponent key={application.entry.ApplicationEntryID} application={application} />
+                        <RenderEntryComponent
+                            key={application.entry.ApplicationEntryID}
+                            application={application}
+                            style={recommendFeatureAppList.length === 1 ? { width: '100%', marginRight: 0 } : undefined}
+                        />
                     ))}
                 </Box>
             }