remove bottom buttons

Author: ztanner

packages/next/src/client/components/react-dev-overlay/ui/components/errors/dev-tools-indicator/dev-tools-indicator.tsx

@@ -353,8 +353,6 @@ function DevToolsPopover({
           ref={preferencesRef}
           isOpen={isPreferencesOpen}
           hide={handleHideDevtools}
-          setIsOpen={setIsPreferencesOpen}
-          setPreviousOpen={setIsMenuOpen}
           setPosition={setPosition}
           position={position}
           style={{

packages/next/src/client/components/react-dev-overlay/ui/components/errors/dev-tools-indicator/dev-tools-info/dev-tools-info.tsx

@@ -8,34 +8,40 @@ export function DevToolsInfo({
 }: {
   title: string
   children: React.ReactNode
-  learnMoreLink: string
-  setIsOpen: (isOpen: boolean) => void
-  setPreviousOpen: (isOpen: boolean) => void
+  learnMoreLink?: string
+  setIsOpen?: (isOpen: boolean) => void
+  setPreviousOpen?: (isOpen: boolean) => void
 }) {
+  const hasActionButtons = Boolean(
+    learnMoreLink && setIsOpen && setPreviousOpen
+  )
+
   return (
     <div data-info-popover {...props}>
       <div className="dev-tools-info-container">
         <h1 className="dev-tools-info-title">{title}</h1>
         {children}
-        <div className="dev-tools-info-button-container">
-          <button
-            className="dev-tools-info-close-button"
-            onClick={() => {
-              setIsOpen(false)
-              setPreviousOpen(true)
-            }}
-          >
-            Close
-          </button>
-          <a
-            className="dev-tools-info-learn-more-button"
-            href={learnMoreLink}
-            target="_blank"
-            rel="noreferrer noopener"
-          >
-            Learn More
-          </a>
-        </div>
+        {hasActionButtons && (
+          <div className="dev-tools-info-button-container">
+            <button
+              className="dev-tools-info-close-button"
+              onClick={() => {
+                setIsOpen?.(false)
+                setPreviousOpen?.(true)
+              }}
+            >
+              Close
+            </button>
+            <a
+              className="dev-tools-info-learn-more-button"
+              href={learnMoreLink}
+              target="_blank"
+              rel="noreferrer noopener"
+            >
+              Learn More
+            </a>
+          </div>
+        )}
       </div>
     </div>
   )

packages/next/src/client/components/react-dev-overlay/ui/components/errors/dev-tools-indicator/dev-tools-info/user-preferences.tsx

@@ -20,16 +20,12 @@ function getInitialPreference() {
 
 export function UserPreferences({
   isOpen,
-  setIsOpen,
-  setPreviousOpen,
   setPosition,
   position,
   hide,
   ...props
 }: {
   isOpen: boolean
-  setIsOpen: (isOpen: boolean) => void
-  setPreviousOpen: (isOpen: boolean) => void
   setPosition: (position: DevToolsIndicatorPosition) => void
   position: DevToolsIndicatorPosition
   hide: () => void
@@ -60,13 +56,7 @@ export function UserPreferences({
   }
 
   return (
-    <DevToolsInfo
-      title="Preferences"
-      setIsOpen={setIsOpen}
-      learnMoreLink="https://nextjs.org/docs/app/api-reference/config/next-config-js/devIndicators"
-      setPreviousOpen={setPreviousOpen}
-      {...props}
-    >
+    <DevToolsInfo title="Preferences" {...props}>
       <div className="preferences-container">
         <div className="preference-section">
           <div className="preference-header">
@@ -172,7 +162,7 @@ export const DEV_TOOLS_INFO_USER_PREFERENCES_STYLES = css`
   }
 
   .preference-header h2 {
-    font-size: var(--size-14);s
+    font-size: var(--size-14);
     font-weight: 500;
     color: var(--color-gray-1000);
     margin: 0 0 4px 0;
@@ -190,12 +180,12 @@ export const DEV_TOOLS_INFO_USER_PREFERENCES_STYLES = css`
     align-items: center;
     gap: 8px;
     background: var(--color-background-200);
-    border: 1px solid #eaeaea;
+    border: 1px solid var(--color-gray-400);
     border-radius: var(--rounded-lg);
     font-weight: 400;
     font-size: var(--size-14);
     color: var(--color-gray-1000);
-    padding: 4px 8px;
+    padding: 6px 8px;
 
     &:hover {
       background: var(--color-gray-400);