Merge pull request #18422 from github/repo-sync

repo sync

Author: Octomerger

components/release-notes/GHAEReleaseNotePatch.tsx

@@ -1,10 +1,13 @@
 import { useRef, useEffect } from 'react'
+import cx from 'classnames'
 
 import { useTranslation } from 'components/hooks/useTranslation'
 import { useOnScreen } from 'components/hooks/useOnScreen'
 import { PatchNotes } from './PatchNotes'
 import { ReleaseNotePatch } from './types'
 
+import styles from './PatchNotes.module.scss'
+
 type Props = { patch: ReleaseNotePatch; didEnterView: () => void }
 export function GHAEReleaseNotePatch({ patch, didEnterView }: Props) {
   const { t } = useTranslation('release_notes')
@@ -19,7 +22,11 @@ export function GHAEReleaseNotePatch({ patch, didEnterView }: Props) {
   const bannerText = t('banner_text')
 
   return (
-    <div ref={containerRef} className="mb-10 pb-6 border-bottom border-top" id={patch.date}>
+    <div
+      ref={containerRef}
+      className={cx(styles.sectionHeading, 'mb-10 pb-6 border-bottom border-top')}
+      id={patch.date}
+    >
       <header style={{ zIndex: 1 }} className="container-xl border-bottom px-3 pt-4 pb-2">
         <div className="d-flex flex-items-center">
           <h2 className="border-bottom-0 m-0 p-0">{patch.title}</h2>

components/release-notes/GHESReleaseNotePatch.tsx

@@ -1,12 +1,15 @@
 import { useEffect, useRef } from 'react'
 import dayjs from 'dayjs'
+import cx from 'classnames'
 
 import { useTranslation } from 'components/hooks/useTranslation'
 import { PatchNotes } from './PatchNotes'
 import { Link } from 'components/Link'
 import { CurrentVersion, ReleaseNotePatch, GHESMessage } from './types'
 import { useOnScreen } from 'components/hooks/useOnScreen'
 
+import styles from './PatchNotes.module.scss'
+
 type Props = {
   patch: ReleaseNotePatch
   currentVersion: CurrentVersion
@@ -33,7 +36,11 @@ export function GHESReleaseNotePatch({
   }, [onScreen])
 
   return (
-    <div ref={containerRef} className="mb-10 pb-6 border-bottom border-top" id={patch.version}>
+    <div
+      ref={containerRef}
+      className={cx(styles.sectionHeading, 'mb-10 pb-6 border-bottom border-top')}
+      id={patch.version}
+    >
       <header style={{ zIndex: 1 }} className="container-xl border-bottom px-3 pt-4 pb-2">
         <div className="d-flex flex-justify-between flex-wrap">
           <h2 className="border-bottom-0 m-0 p-0 mt-2">