feat(nx-dev): change code-fences and code-output styles (#16649)

nx-dev/ui-markdoc/src/lib/nodes/fence.component.tsx

@@ -1,14 +1,14 @@
 import {
-  CheckCircleIcon,
   ClipboardDocumentCheckIcon,
   ClipboardDocumentIcon,
+  InformationCircleIcon,
 } from '@heroicons/react/24/outline';
 import React, { ReactNode, useEffect, useState } from 'react';
 // @ts-ignore
 import { CopyToClipboard } from 'react-copy-to-clipboard';
 // @ts-ignore
 import SyntaxHighlighter from 'react-syntax-highlighter';
-import { CodeOutput } from './fences/codeOutput.component';
+import { CodeOutput } from './fences/code-output.component';
 import { TerminalOutput } from './fences/terminal-output.component';
 
 function resolveLanguage(lang: string) {
@@ -74,7 +74,7 @@ export function Fence({
     children.includes('@nx/') || command.includes('@nx/');
   return (
     <div className="my-8 w-full">
-      <div className="code-block group relative inline-flex w-auto min-w-[50%] max-w-full">
+      <div className="code-block group relative w-full">
         <div>
           <CopyToClipboard
             text={children}
@@ -84,7 +84,7 @@ export function Fence({
           >
             <button
               type="button"
-              className="not-prose absolute top-0 right-0 z-10 flex rounded-tr-lg border border-slate-200 bg-slate-50/50 p-2 opacity-0 transition-opacity group-hover:opacity-100 dark:border-slate-700 dark:bg-slate-800"
+              className="not-prose absolute top-0 right-0 z-10 flex rounded-tr-lg border border-slate-200 bg-slate-50/50 p-2 opacity-0 transition-opacity group-hover:opacity-100 dark:border-slate-700 dark:bg-slate-800/60"
             >
               {copied ? (
                 <ClipboardDocumentCheckIcon className="h-5 w-5 text-blue-500 dark:text-sky-500" />
@@ -106,12 +106,12 @@ export function Fence({
           />
           {showRescopeMessage && (
             <a
-              className="relative block rounded-b-md border border-green-100 bg-green-50 px-4 py-2 text-xs font-medium text-green-600 no-underline hover:underline dark:border-green-900 dark:bg-green-900/30 dark:text-green-400"
+              className="relative block rounded-b-md border border-slate-200 bg-slate-50 px-4 py-2 text-xs font-medium no-underline hover:underline dark:border-slate-700 dark:bg-slate-800"
               href="/recipes/other/rescope"
               title="Nx 16 package name changes"
             >
-              <CheckCircleIcon
+              <InformationCircleIcon
-                className="mr-2 inline-block h-5 w-5 text-green-500 dark:text-green-400"
+                className="mr-2 inline-block h-5 w-5"
                 aria-hidden="true"
               />
               Nx 15 and lower use @nrwl/ instead of @nx/

nx-dev/ui-markdoc/src/lib/nodes/fences/code-output.component.tsx

@@ -1,3 +1,4 @@
+import { cx } from '@nx/nx-dev/ui-primitives';
 import { ReactNode } from 'react';
 
 export function CodeOutput({
@@ -11,10 +12,10 @@ export function CodeOutput({
 }): JSX.Element {
   return (
     <div
-      className={
+      className={cx(
-        'hljs not-prose w-full overflow-x-auto border border-slate-200 bg-slate-50/50 font-mono text-sm dark:border-slate-700 dark:bg-slate-800/60 ' +
+        'hljs not-prose w-full overflow-x-auto border border-slate-200 bg-slate-50/50 font-mono text-sm dark:border-slate-700 dark:bg-slate-800/60',
-        (isMessageBelow ? 'rounded-t-lg border-b-0' : 'rounded-lg')
+        isMessageBelow ? 'rounded-t-lg border-b-0' : 'rounded-lg'
-      }
+      )}
     >
       {!!fileName && (
         <div className="flex border-b border-slate-200 bg-slate-50 px-4 py-2 italic text-slate-400 dark:border-slate-700 dark:bg-slate-800/80 dark:text-slate-500">

nx-dev/ui-markdoc/src/lib/nodes/fences/terminal-output.component.tsx

@@ -1,3 +1,4 @@
+import { cx } from '@nx/nx-dev/ui-primitives';
 import { ReactNode } from 'react';
 
 export function TerminalOutput({
@@ -13,10 +14,10 @@ export function TerminalOutput({
 }): JSX.Element {
   return (
     <div
-      className={
+      className={cx(
-        'coding not-prose overflow-hidden border border-slate-200 bg-slate-50 font-mono text-sm leading-normal subpixel-antialiased dark:border-slate-700 dark:bg-slate-800 ' +
+        'hljs not-prose w-full overflow-x-auto border border-slate-200 bg-slate-50/50 font-mono text-sm dark:border-slate-700 dark:bg-slate-800/60',
-        (isMessageBelow ? 'rounded-t-lg border-b-0' : 'rounded-lg')
+        isMessageBelow ? 'rounded-t-lg border-b-0' : 'rounded-lg'
-      }
+      )}
     >
       <div className="relative flex justify-center border-b border-slate-200 bg-slate-100/50 p-2 text-slate-400 dark:border-slate-700 dark:bg-slate-700/50 dark:text-slate-500">
         <div className="absolute left-2 top-3 flex items-center gap-2">