feat(extensions): plugin side drawer UX improvements (#1377)

- Make verified and certified icons smaller for better visual hierarchy
- Add proper padding, bullet points, and spacing to the Highlights section
- Apply medium-weight text and proper padding to the About section title
- Style Links section title consistently with About section
- Reduce size of external link icons and improve alignment

Fixes RHIDP-8302

Author: lokanandaprabhu

workspaces/marketplace/.changeset/plugin-sidebar-ux-improvements.md

@@ -0,0 +1,11 @@
+---
+'@red-hat-developer-hub/backstage-plugin-marketplace': patch
+---
+
+Plugin side drawer UX improvements:
+
+- Made verified and certified icons smaller for better visual hierarchy
+- Added proper padding, bullet points, and spacing to the Highlights section
+- Applied medium-weight text and proper padding to the About section title
+- Styled Links section title consistently with About section
+- Reduced size of external link icons and improved alignment

workspaces/marketplace/plugins/marketplace/src/components/Badges.tsx

@@ -82,6 +82,7 @@ export const BadgeChip = ({ plugin }: { plugin: MarketplacePlugin }) => {
       avatar={<TaskAltIcon style={{ color: options.color }} />}
       label={options.label}
       variant="outlined"
+      size="small"
     />
   );
 };

workspaces/marketplace/plugins/marketplace/src/components/Links.tsx

@@ -17,6 +17,7 @@
 import { Link } from '@backstage/core-components';
 
 import Typography from '@mui/material/Typography';
+import OpenInNewIcon from '@mui/icons-material/OpenInNew';
 
 import {
   MarketplaceCollection,
@@ -37,14 +38,21 @@ export const Links = ({
 
   return (
     <div>
-      <Typography variant="h5" sx={{ pt: 2 }}>
+      <Typography
+        variant="h6"
+        component="h3"
+        sx={{ fontWeight: 500, fontSize: '1rem', mb: 0.5 }}
+      >
         Links
       </Typography>
-      <ul>
+      <ul style={{ paddingLeft: '20px' }}>
         {links.map(link => (
-          <li key={link.url}>
-            <Link to={link.url} externalLinkIcon>
-              {link.title ?? link.url}
+          <li key={link.url} style={{ marginBottom: '8px' }}>
+            <Link to={link.url}>
+              {link.title ?? link.url}{' '}
+              <OpenInNewIcon
+                sx={{ fontSize: '1rem', verticalAlign: 'middle' }}
+              />
             </Link>
           </li>
         ))}

workspaces/marketplace/plugins/marketplace/src/components/Markdown.tsx

@@ -18,6 +18,7 @@ import { useEffect } from 'react';
 
 import { MarkdownContent } from '@backstage/core-components';
 import { useTheme } from '@mui/material/styles';
+import Box from '@mui/material/Box';
 
 export interface MarkdownProps {
   title?: string;
@@ -50,7 +51,7 @@ export const Markdown = (props: MarkdownProps) => {
   const theme = useTheme();
   let content = props.content ?? '**no description provided**';
   if (props.title && !content.startsWith('# ')) {
-    content = `# ${props.title}\n\n${content}`;
+    content = `## ${props.title}\n\n${content}`;
   }
 
   // TODO load images from marketplace assets endpoint ???
@@ -100,11 +101,22 @@ export const Markdown = (props: MarkdownProps) => {
   }, [content, theme.palette.text.secondary]);
 
   return (
-    <MarkdownContent
-      content={content}
-      dialect="gfm"
-      linkTarget="_blank"
-      transformImageUri={transformImageUri}
-    />
+    <Box
+      sx={{
+        '& h2': {
+          fontWeight: 500,
+          fontSize: '1rem',
+          marginTop: 0,
+          marginBottom: '8px',
+        },
+      }}
+    >
+      <MarkdownContent
+        content={content}
+        dialect="gfm"
+        linkTarget="_blank"
+        transformImageUri={transformImageUri}
+      />
+    </Box>
   );
 };

workspaces/marketplace/plugins/marketplace/src/components/MarketplacePluginContent.tsx

@@ -126,6 +126,7 @@ const columns: TableColumn<MarketplacePackage>[] = [
     title: 'Package name',
     field: 'spec.packageName',
     type: 'string',
+    width: '40%',
   },
   {
     title: 'Version',
@@ -175,7 +176,11 @@ const PluginPackageTable = ({ plugin }: { plugin: MarketplacePlugin }) => {
 
   return (
     <div>
-      <Typography variant="h5" sx={{ pt: 2 }}>
+      <Typography
+        variant="h6"
+        component="h3"
+        sx={{ fontWeight: 500, fontSize: '1rem', mb: 0.5, pt: 2 }}
+      >
         Versions
       </Typography>
       <Table
@@ -466,12 +471,18 @@ export const MarketplacePluginContent = ({
           <Grid item md={3}>
             {highlights.length > 0 ? (
               <>
-                <Typography variant="subtitle1" sx={{ fontWeight: 'bold' }}>
+                <Typography
+                  variant="h6"
+                  component="h3"
+                  sx={{ fontWeight: 500, fontSize: '1rem', mb: 0.5 }}
+                >
                   Highlights
                 </Typography>
-                <ul>
+                <ul style={{ paddingLeft: '20px', marginBottom: '24px' }}>
                   {highlights.map(highlight => (
-                    <li key={highlight}>{highlight}</li>
+                    <li key={highlight} style={{ marginBottom: '8px' }}>
+                      {highlight}
+                    </li>
                   ))}
                 </ul>
               </>