Replace sx and inline style declarations with CSS modules (#57848)

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

Author: heiskr

src/audit-logs/components/GroupedEvents.module.scss

@@ -0,0 +1,16 @@
+.eventItem {
+  margin-bottom: 3rem;
+}
+
+.eventAction {
+  font-style: normal;
+}
+
+.eventDetail {
+  margin-left: 1rem;
+  font-style: normal;
+}
+
+.eventDescription {
+  margin-left: 1rem;
+}

src/audit-logs/components/GroupedEvents.tsx

@@ -4,6 +4,8 @@ import { HeadingLink } from '@/frame/components/article/HeadingLink'
 import { useTranslation } from '@/languages/components/useTranslation'
 import type { AuditLogEventT } from '../types'
 
+import styles from './GroupedEvents.module.scss'
+
 type Props = {
   auditLogEvents: AuditLogEventT[]
   category: string
@@ -47,15 +49,15 @@ export default function GroupedEvents({ auditLogEvents, category, categoryNote }
       )}
       <div>
         {auditLogEvents.map((event) => (
-          <div key={event.action} style={{ marginBottom: '3rem' }}>
+          <div key={event.action} className={styles.eventItem}>
             <dl>
-              <dt style={{ fontStyle: 'normal' }}>
+              <dt className={styles.eventAction}>
                 <code>{event.action}</code>
               </dt>
               <dd>{event.description}</dd>
 
-              <dt style={{ marginLeft: '1rem', fontStyle: 'normal' }}>{t('fields')}</dt>
-              <dd style={{ marginLeft: '1rem' }}>
+              <dt className={styles.eventDetail}>{t('fields')}</dt>
+              <dd className={styles.eventDescription}>
                 {event.fields
                   ? event.fields.map((field, index) => (
                       <span key={field}>
@@ -68,8 +70,8 @@ export default function GroupedEvents({ auditLogEvents, category, categoryNote }
 
               {event.docs_reference_links && event.docs_reference_links !== 'N/A' && (
                 <>
-                  <dt style={{ marginLeft: '1rem', fontStyle: 'normal' }}>{t('reference')}</dt>
-                  <dd style={{ marginLeft: '1rem' }}>{renderReferenceLinks(event)}</dd>
+                  <dt className={styles.eventDetail}>{t('reference')}</dt>
+                  <dd className={styles.eventDescription}>{renderReferenceLinks(event)}</dd>
                 </>
               )}
             </dl>

src/frame/components/DefaultLayout.module.scss

@@ -0,0 +1,3 @@
+.mainContent {
+  scroll-margin-top: 5rem;
+}

src/frame/components/DefaultLayout.tsx

@@ -15,6 +15,8 @@ import { useLanguages } from '@/languages/components/LanguagesContext'
 import { ClientSideLanguageRedirect } from './ClientSideLanguageRedirect'
 import { SearchOverlayContextProvider } from '@/search/components/context/SearchOverlayContext'
 
+import styles from './DefaultLayout.module.scss'
+
 const MINIMAL_RENDER = Boolean(JSON.parse(process.env.MINIMAL_RENDER || 'false'))
 
 type Props = { children?: React.ReactNode }
@@ -51,7 +53,7 @@ export const DefaultLayout = (props: Props) => {
           <Breadcrumbs />
         </div>
 
-        <main id="main-content" style={{ scrollMarginTop: '5rem' }}>
+        <main id="main-content" className={styles.mainContent}>
           {props.children}
         </main>
       </div>
@@ -150,7 +152,7 @@ export const DefaultLayout = (props: Props) => {
         {/* Need to set an explicit height for sticky elements since we also
           set overflow to auto */}
         <div className="flex-column flex-1 min-width-0">
-          <main id="main-content" style={{ scrollMarginTop: '5rem' }}>
+          <main id="main-content" className={styles.mainContent}>
             <DeprecationBanner />
             <RestBanner />
 

src/frame/components/GenericError.module.scss

@@ -0,0 +1,3 @@
+.logoContainer {
+  z-index: 3;
+}

src/frame/components/GenericError.tsx

@@ -5,6 +5,8 @@ import { useRouter } from 'next/router'
 import { MarkGithubIcon, CommentDiscussionIcon } from '@primer/octicons-react'
 import { Lead } from '@/frame/components/ui/Lead'
 
+import styles from './GenericError.module.scss'
+
 export function GenericError() {
   return (
     <div className="min-h-screen d-flex flex-column">
@@ -44,7 +46,7 @@ export const SimpleHeader = () => {
         role="banner"
         aria-label="Main"
       >
-        <div className="d-flex flex-items-center" style={{ zIndex: 3 }} id="github-logo-mobile">
+        <div className={`d-flex flex-items-center ${styles.logoContainer}`} id="github-logo-mobile">
           <Link href={`/${router.locale}`} aria-hidden="true" tabIndex={-1}>
             <MarkGithubIcon size={32} className="color-fg-default" />
           </Link>

src/frame/components/page-header/Header.module.scss

@@ -57,3 +57,7 @@
     padding: 0 !important;
   }
 }
+
+.headerContainer {
+  row-gap: 1rem;
+}

src/frame/components/page-header/Header.tsx

@@ -156,11 +156,10 @@ export const Header = () => {
         aria-label="Main"
       >
         <div
-          className="d-flex flex-justify-between p-2 flex-items-center flex-wrap"
-          style={{
-            // In the rare case of header overflow, create a pleasant gap between the rows
-            rowGap: '1rem',
-          }}
+          className={cx(
+            'd-flex flex-justify-between p-2 flex-items-center flex-wrap',
+            styles.headerContainer,
+          )}
           data-testid="desktop-header"
         >
           <div

src/frame/components/page-header/HeaderSearchAndWidgets.module.scss

@@ -10,3 +10,29 @@
     visibility: hidden !important;
   }
 }
+
+// The ... menu button when the smaller width search UI is open. Since the search
+// UI is open, we don't show the button at smaller widths but we do show it as
+// the browser width increases to md, and then at lg and above widths we hide
+// the button again since the pickers and sign-up button are shown in the header.
+.menuButtonSearchOpen {
+  margin-left: 0.5rem;
+  display: none;
+
+  @include breakpoint(md) {
+    display: inline-block;
+    margin-left: 0.25rem;
+  }
+}
+
+// The ... menu button when the smaller width search UI is closed, the button is
+// shown up to lg. At lg and above we don't show the button since the pickers
+// and sign-up button are shown in the header.
+.menuButtonSearchClosed {
+  margin-left: 1rem;
+
+  @include breakpoint(lg) {
+    margin-left: 0;
+    display: none;
+  }
+}

src/frame/components/page-header/HeaderSearchAndWidgets.tsx

@@ -55,36 +55,8 @@ export function HeaderSearchAndWidgets({ width, isSearchOpen, SearchButton }: Pr
                 data-testid="mobile-menu"
                 icon={KebabHorizontalIcon}
                 aria-label={t('header.open_menu_label')}
-                sx={
-                  isSearchOpen
-                    ? // The ... menu button when the smaller width search UI is open.  Since the search
-                      // UI is open, we don't show the button at smaller widths but we do show it as
-                      // the browser width increases to md, and then at lg and above widths we hide
-                      // the button again since the pickers and sign-up button are shown in the header.
-                      {
-                        marginLeft: '8px',
-                        display: 'none',
-                        // breakpoint(md)
-                        '@media (min-width: 768px)': {
-                          display: 'inline-block',
-                          marginLeft: '4px',
-                        },
-                        // breakpoint(lg)
-                        '@media (min-width: 1012px)': {
-                          display: 'inline-block',
-                          marginLeft: '4px',
-                        },
-                      }
-                    : // The ... menu button when the smaller width search UI is closed, the button is
-                      // shown up to md.  At lg and above we don't show the button since the pickers
-                      // and sign-up button are shown in the header.
-                      {
-                        marginLeft: '16px',
-                        '@media (min-width: 1012px)': {
-                          marginLeft: '0',
-                          display: 'none',
-                        },
-                      }
+                className={
+                  isSearchOpen ? styles.menuButtonSearchOpen : styles.menuButtonSearchClosed
                 }
               />
             </ActionMenu.Anchor>