chore: upgrade Infima to alpha.39 (#7306)

website/src/css/custom.css

@@ -25,7 +25,7 @@ html[data-theme='dark'] {
   --site-color-feedback-background: #f0f8ff;
   --site-color-favorite-background: #1d1e1e;
   --site-color-checkbox-checked-bg: hsl(167deg 56% 73% / 10%);
-  --docusaurus-highlighted-code-line-bg: rgb(66 66 66 / 30%);
+  --docusaurus-highlighted-code-line-bg: rgb(66 66 66 / 35%);
 }
 
 [data-theme='light'] {

website/src/pages/showcase/index.tsx

@@ -168,7 +168,7 @@ function ShowcaseFilters() {
         </div>
         <ShowcaseFilterToggle />
       </div>
-      <ul className={styles.checkboxList}>
+      <ul className="clean-list">
         {TagList.map((tag, i) => {
           const {label, description, color} = Tags[tag];
           const id = `showcase_checkbox_id_${tag}`;
@@ -287,7 +287,7 @@ function ShowcaseCards() {
                 <FavoriteIcon svgClass={styles.svgIconFavorite} />
                 <SearchBar />
               </div>
-              <ul className={clsx('container', styles.showcaseList)}>
+              <ul className="container clean-list">
                 {favoriteUsers.map((user) => (
                   <ShowcaseCard key={user.title} user={user} />
                 ))}
@@ -298,7 +298,7 @@ function ShowcaseCards() {
             <h2 className={styles.showcaseHeader}>
               <Translate id="showcase.usersList.allUsers">All sites</Translate>
             </h2>
-            <ul className={styles.showcaseList}>
+            <ul className="clean-list">
               {otherUsers.map((user) => (
                 <ShowcaseCard key={user.title} user={user} />
               ))}
@@ -314,7 +314,7 @@ function ShowcaseCards() {
             )}>
             <SearchBar />
           </div>
-          <ul className={styles.showcaseList}>
+          <ul className="clean-list">
             {filteredUsers.map((user) => (
               <ShowcaseCard key={user.title} user={user} />
             ))}

website/src/pages/showcase/styles.module.css

@@ -30,12 +30,6 @@
   flex-wrap: wrap;
 }
 
-.checkboxList,
-.showcaseList {
-  padding: 0;
-  list-style: none;
-}
-
 .checkboxListItem {
   user-select: none;
   white-space: nowrap;

website/src/plugins/changelog/theme/ChangelogPaginator/index.tsx

@@ -23,34 +23,31 @@ export default function ChangelogPaginator(props: Props): JSX.Element {
         message: 'Changelog item navigation',
         description: 'The ARIA label for the changelog pagination',
       })}>
-      <div className="pagination-nav__item">
-        {prevItem && (
-          <PaginatorNavLink
-            {...prevItem}
-            subLabel={
-              <Translate
-                id="theme.changelog.post.paginator.newerRelease"
-                description="The changelog button label to navigate to the newer release">
-                Newer release
-              </Translate>
-            }
-          />
-        )}
-      </div>
-      <div className="pagination-nav__item pagination-nav__item--next">
-        {nextItem && (
-          <PaginatorNavLink
-            {...nextItem}
-            subLabel={
-              <Translate
-                id="theme.changelog.post.paginator.olderRelease"
-                description="The changelog button label to navigate to the older release">
-                Older release
-              </Translate>
-            }
-          />
-        )}
-      </div>
+      {prevItem && (
+        <PaginatorNavLink
+          {...prevItem}
+          subLabel={
+            <Translate
+              id="theme.changelog.post.paginator.newerRelease"
+              description="The changelog button label to navigate to the newer release">
+              Newer release
+            </Translate>
+          }
+        />
+      )}
+      {nextItem && (
+        <PaginatorNavLink
+          {...nextItem}
+          subLabel={
+            <Translate
+              id="theme.changelog.post.paginator.olderRelease"
+              description="The changelog button label to navigate to the older release">
+              Older release
+            </Translate>
+          }
+          isNext
+        />
+      )}
     </nav>
   );
 }

website/src/utils/prismDark.mjs

@@ -10,7 +10,7 @@ import darkTheme from 'prism-react-renderer/themes/vsDark/index.cjs.js';
 export default {
   plain: {
     color: '#D4D4D4',
-    backgroundColor: '#1E1E1E',
+    backgroundColor: '#212121',
   },
   styles: [
     ...darkTheme.styles,