Update list group headers styling

src/components/virtuoso/StyledGroupHeader.tsx

@@ -7,20 +7,21 @@
  */
 
 import { styled } from '@mui/material/styles';
-import Typography from '@mui/material/Typography';
+import Typography, { TypographyProps } from '@mui/material/Typography';
 
-export const StyledGroupHeader = styled(Typography, { shouldForwardProp: (prop) => prop !== 'isFirstItem' })<{
+export const StyledGroupHeader = styled(Typography, { shouldForwardProp: (prop) => prop !== 'isFirstItem' })<
-    isFirstItem: boolean;
+    {
-}>(({ theme, isFirstItem }) => ({
+        isFirstItem: boolean;
-    paddingLeft: '24px',
+    } & TypographyProps
+>(({ theme, isFirstItem }) => ({
+    paddingLeft: theme.spacing(3),
     // 16px - 10px (bottom padding of the group items)
-    paddingTop: '6px',
+    paddingTop: theme.spacing(0.75),
-    paddingBottom: '16px',
+    paddingBottom: theme.spacing(2),
-    fontWeight: 700,
+    fontWeight: 'bold',
-    textTransform: 'uppercase',
     backgroundColor: theme.palette.background.default,
     [theme.breakpoints.down('sm')]: {
         // 16px - 8px (margin of header)
-        paddingTop: isFirstItem ? '8px' : '6px',
+        paddingTop: isFirstItem ? theme.spacing(1) : theme.spacing(0.75),
     },
 }));

src/screens/Extensions.tsx

@@ -285,7 +285,7 @@ export function Extensions({ tabsMenuHeight }: { tabsMenuHeight: number }) {
                     const [groupName] = filteredGroupedExtensions[index];
 
                     return (
-                        <StyledGroupHeader key={groupName} variant="h4" isFirstItem={index === 0}>
+                        <StyledGroupHeader key={groupName} variant="h5" component="h2" isFirstItem={index === 0}>
                             {translateExtensionLanguage(groupName)}
                         </StyledGroupHeader>
                     );

src/screens/Sources.tsx

@@ -140,11 +140,12 @@ export function Sources() {
                             <Fragment key={lang}>
                                 <Typography
                                     key={lang}
-                                    variant="h4"
+                                    variant="h5"
-                                    style={{
+                                    component="h2"
-                                        paddingLeft: '24px',
+                                    sx={{
-                                        paddingTop: '6px',
+                                        paddingLeft: 3,
-                                        paddingBottom: '16px',
+                                        paddingTop: 1,
+                                        paddingBottom: 2,
                                         fontWeight: 'bold',
                                     }}
                                 >

src/screens/Updates.tsx

@@ -156,7 +156,7 @@ export const Updates: React.FC = () => {
                 endReached={loadMore}
                 groupCounts={groupCounts}
                 groupContent={(index) => (
-                    <StyledGroupHeader variant="h5" isFirstItem={index === 0}>
+                    <StyledGroupHeader variant="h5" component="h2" isFirstItem={index === 0}>
                         {groupedUpdates[index][0]}
                     </StyledGroupHeader>
                 )}