fix (oc-docs): Multiple UI refinements in the playground

packages/oc-docs/src/assets/icons/SendIcon.tsx

@@ -1,9 +1,14 @@
 import React from 'react';
 import { baseIconProps } from './baseIconProps';
 
+interface SendIconProps {
+  width?: number;
+  height?: number;
+}
+
 /** Paper-plane "send" icon used by the Try action. */
-export const SendIcon: React.FC = () => (
-  <svg {...baseIconProps} width={11} height={11}>
+export const SendIcon: React.FC<SendIconProps> = ({ width = 11, height = 11 }) => (
+  <svg {...baseIconProps} width={width} height={height}>
     <line x1="22" y1="2" x2="11" y2="13" />
     <polygon points="22 2 15 22 11 13 2 9 22 2" />
   </svg>

packages/oc-docs/src/components/Docs/Sidebar/SidebarNavLink/SidebarNavLink.tsx

@@ -59,7 +59,7 @@ const SidebarNavLink: React.FC<SidebarNavLinkProps> = ({
       // indent step). Right margin keeps the highlight short of the edge: 8px at root,
       // 4px when nested.
       style={{
-        marginLeft: `${(level * 19 + 4) / 16}rem`,
+        marginLeft: `${(level * 19) / 16}rem`,
         paddingLeft: '0.5rem',
         marginRight: level === 0 ? '0.5rem' : '0.25rem'
       }}

packages/oc-docs/src/components/Docs/Sidebar/StyledWrapper.ts

@@ -9,7 +9,7 @@ export const StyledWrapper = styled.div`
   color: var(--oc-sidebar-color);
 
   .sidebar-items::-webkit-scrollbar {
-    width: 6px;
+    width: 0.375rem;
   }
   .sidebar-items::-webkit-scrollbar-track {
     background: transparent;
@@ -18,7 +18,7 @@ export const StyledWrapper = styled.div`
   .sidebar-items::-webkit-scrollbar-thumb {
     background-color: transparent;
     border: none;
-    border-radius: 20px;
+    border-radius: 1.25rem;
     transition: background-color 0.4s ease;
   }
   .sidebar-items.scrolling::-webkit-scrollbar-thumb {
@@ -30,13 +30,13 @@ export const StyledWrapper = styled.div`
     display: flex;
     flex-direction: column;
     gap: 1px;
-    padding: 10px 6px 0 6px;
+    padding: 0.625rem 0.75rem 0 0.75rem;
   }
 
   .sidebar-divider {
     flex-shrink: 0;
     height: 1px;
-    margin: 8px 0;
+    margin: 0.5rem 0;
     background-color: var(--oc-border-border0);
   }
 
@@ -48,6 +48,6 @@ export const StyledWrapper = styled.div`
     flex: 1;
     min-height: 0;
     overflow-y: auto;
-    padding: 0 0 0 0.375rem;
+    padding: 0 0 0 0.75rem;
   }
 `;

packages/oc-docs/src/components/PageWrapper/StyledWrapper.ts

@@ -3,7 +3,7 @@ import styled from '@emotion/styled';
 export const StyledWrapper = styled.div`
   max-width: 100rem;
   margin-inline: auto;
-  padding: 2rem 3rem;
+  padding: 1rem 3rem;
 
   @container docs (max-width: 768px) {
     padding: 0.9375rem 1.25rem;

packages/oc-docs/src/components/Playground/Content/Views/CollectionSettingsView/CollectionSettingsView.tsx

@@ -93,7 +93,6 @@ const CollectionSettings: React.FC<CollectionSettingsProps> = ({ collection }) =
         <HeadersTab
           headers={headers}
           onHeadersChange={handleHeadersChange}
-          title=""
           description="Add request headers that will be sent with every request in this collection."
         />
       )
@@ -109,7 +108,6 @@ const CollectionSettings: React.FC<CollectionSettingsProps> = ({ collection }) =
           postResponseVars={postResponseVars}
           onPostResponseVarsChange={handlePostResponseVarsChange}
           exprHelp="You can write any valid JS Template Literal here"
-          title=""
         />
       )
     },
@@ -122,7 +120,6 @@ const CollectionSettings: React.FC<CollectionSettingsProps> = ({ collection }) =
           onAuthChange={handleAuthChange}
           onItemChange={handleCollectionChange}
           item={collection}
-          title=""
           description="Configures authentication for the entire collection. This applies to all requests using the Inherit option in the Auth tab."
           showInherit={false}
           showFullAuth={true}
@@ -137,7 +134,6 @@ const CollectionSettings: React.FC<CollectionSettingsProps> = ({ collection }) =
         <ScriptsTab
           scripts={scripts}
           onScriptChange={handleScriptChange}
-          title=""
           description="Write pre and post-request scripts that will run before and after any request in this collection is sent."
           showTests={false}
         />

packages/oc-docs/src/components/Playground/Content/Views/Common/AssertsTab/AssertsTab.tsx

@@ -104,7 +104,7 @@ interface AssertsTabProps {
 export const AssertsTab: React.FC<AssertsTabProps> = ({
   assertions,
   onAssertionsChange,
-  title = 'Assertions',
+  title,
   description
 }) => {
   const assertionsData: KeyValueRow[] = (assertions || []).map((assertion, index) => ({

packages/oc-docs/src/components/Playground/Content/Views/Common/AuthTab/AuthTab.spec.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { renderToStaticMarkup } from 'react-dom/server';
 import { parse } from 'node-html-parser';
 import { describe, it, expect } from 'vitest';
-import { query } from '../../../../../../test-utils/dom';
+import { getByTestId, query } from '../../../../../../test-utils/dom';
 import { AUTH_DEFAULTS, AUTH_MODE_LABELS, PLACEMENT_OPTIONS } from '../../../../../../constants';
 import { AuthTab } from './AuthTab';
 
@@ -48,12 +48,12 @@ describe('AuthTab', () => {
     const { root, byTestId } = renderAuth(undefined);
     expect(root.querySelector('.auth-form')).toBeNull();
     expect(byTestId('auth-username')).toBeNull();
-    expect(query(root, '.auth-empty').text.trim()).toBe('No authentication configured.');
+    expect(getByTestId(root, 'no-content-text').text.trim()).toBe('No authentication configured.');
   });
 
   it('shows an inherit note for inherited auth', () => {
     const { root } = renderAuth('inherit', { showInherit: true });
-    expect(query(root, '.auth-empty').text.trim()).toBe('Inherits auth from parent collection.');
+    expect(getByTestId(root, 'no-content-text').text.trim()).toBe('Inherits auth from parent collection.');
   });
 
   it('renders basic auth with a plain username and a masked, revealable password', () => {

packages/oc-docs/src/components/Playground/Content/Views/Common/AuthTab/AuthTab.tsx

@@ -3,6 +3,7 @@ import { Field, type SelectOption } from '../../../../../../ui/Field';
 import { AUTH_DEFAULTS, AUTH_MODE_LABELS, PLACEMENT_OPTIONS } from '../../../../../../constants';
 import { REQUEST_PROTOCOL_KEYS } from '../../../../../../utils/schemaHelpers';
 import { StyledWrapper } from './StyledWrapper';
+import NoContentText from '../../../../../../ui/NoContentText/NoContentText';
 
 interface AuthTabProps {
   auth: any;
@@ -20,7 +21,7 @@ export const AuthTab: React.FC<AuthTabProps> = ({
   onAuthChange,
   onItemChange,
   item,
-  title = 'Authentication',
+  title,
   description,
   showInherit = false,
   showFullAuth = false
@@ -135,22 +136,22 @@ export const AuthTab: React.FC<AuthTabProps> = ({
 
   const renderBody = () => {
     if (!auth) {
-      return <p className="auth-empty">No authentication configured.</p>;
+      return <NoContentText text='No authentication configured.' />
     }
     if (auth === 'inherit') {
-      return <p className="auth-empty">Inherits auth from parent collection.</p>;
+      return <NoContentText text='Inherits auth from parent collection.' />
     }
     if (showFullAuth) {
       return <div className="auth-form">{renderForm()}</div>;
     }
-    return <p className="auth-empty">{title} auth is configured elsewhere.</p>;
+    return <NoContentText text='{title} auth is configured elsewhere.' />
   };
 
   return (
     <StyledWrapper className="auth-tab">
       {(Boolean(title) || Boolean(description)) && (
         <div className="auth-header flex items-center justify-between">
-          {Boolean(title) && <span className="title text-sm font-semibold">{title}</span>}
+          {title && <span className="title text-sm font-semibold">{title}</span>}
           {description && <span className="description text-xs leading-tight">{description}</span>}
         </div>
       )}

packages/oc-docs/src/components/Playground/Content/Views/Common/AuthTab/StyledWrapper.ts

@@ -22,13 +22,6 @@ export const StyledWrapper = styled.div`
     gap: 1rem;
   }
 
-  .auth-empty {
-    margin: 0;
-    font-style: italic;
-    font-size: 0.8125rem;
-    color: var(--text-muted);
-  }
-
   .auth-form {
     display: flex;
     flex-direction: column;

packages/oc-docs/src/components/Playground/Content/Views/Common/BodyModeSelector/StyledWrapper.ts

@@ -7,12 +7,13 @@ import styled from '@emotion/styled';
 export const TriggerButton = styled.button`
   display: inline-flex;
   align-items: center;
-  padding: 0.25rem 0;
+  padding: 0 0 0.25rem;
   background: transparent;
   border: none;
   font-family: inherit;
-  font-size: 0.875rem;
-  font-weight: 500;
+  font-size: 0.75rem;
+  line-height: 1.125rem;
+  letter-spacing: 0;
   color: var(--oc-primary-text);
   cursor: pointer;
   user-select: none;

packages/oc-docs/src/components/Playground/Content/Views/Common/HeadersTab/HeadersTab.tsx

@@ -68,13 +68,15 @@ const HeadersDisplay: React.FC<Omit<HeadersTabProps, 'title' | 'description'>> =
   );
 };
 
-export const HeadersTab: React.FC<HeadersTabProps> = ({ headers, onHeadersChange, title = 'Headers', description }) => {
+export const HeadersTab: React.FC<HeadersTabProps> = ({ headers, onHeadersChange, title, description }) => {
   return (
     <StyledWrapper className="space-y-3">
-      <div className="flex items-center justify-between mb-4">
-        {Boolean(title) && <span className="title text-sm font-semibold">{title}</span>}
-        {description && <span className="description text-xs leading-tight">{description}</span>}
-      </div>
+      {(Boolean(title) || Boolean(description)) && (
+        <div className="flex items-center justify-between mb-4">
+          {title && <span className="title text-sm font-semibold">{title}</span>}
+          {description && <span className="description text-xs leading-tight">{description}</span>}
+        </div>
+      )}
       <HeadersDisplay headers={headers} onHeadersChange={onHeadersChange} />
     </StyledWrapper>
   );

packages/oc-docs/src/components/Playground/Content/Views/Common/OverviewTab/OverviewTab.tsx

@@ -3,24 +3,34 @@ import { useMemo } from 'react';
 import { StyledWrapper } from './StyledWrapper';
 import { EmptyState } from '../../../../../../ui/EmptyState/EmptyState';
 import { BookIcon } from '../../../../../../assets/icons';
+import NoContentText from '../../../../../../ui/NoContentText/NoContentText';
 
-const OverviewTab: React.FC<{ docs?: string; emptyStateSubheading: string }> = ({
+interface OverviewTabProps {
+  docs?: string;
+  emptyStateSubheading: string;
+  displayEmptyStateBox?: boolean;
+}
+
+const OverviewTab: React.FC<OverviewTabProps> = ({
   docs,
-  emptyStateSubheading
+  emptyStateSubheading,
+  displayEmptyStateBox = true
 }) => {
   const md = useMarkdownRenderer();
   const docsHtml = useMemo(() => {
     return docs ? md.render(docs) : undefined;
   }, [md, docs]);
 
   if (!docsHtml) {
-    return (
+    return displayEmptyStateBox ? (
       <EmptyState
         testId="overview-empty"
         icon={<BookIcon />}
         heading="No overview content yet"
         subheading={emptyStateSubheading}
       />
+    ) : (
+      <NoContentText text="No overview content yet" />
     );
   }
 

packages/oc-docs/src/components/Playground/Content/Views/Common/ParamsTab.tsx → packages/oc-docs/src/components/Playground/Content/Views/Common/ParamsTab/ParamsTab.tsx

@@ -1,5 +1,6 @@
 import React, { useCallback, useMemo } from 'react';
-import KeyValueTable, { type KeyValueRow } from '../../../../../components/KeyValueTable/KeyValueTable';
+import KeyValueTable, { type KeyValueRow } from '../../../../../KeyValueTable/KeyValueTable';
+import { StyledWrapper } from './StyledWrapper';
 
 interface ParamsTabProps {
   params: Array<{ name?: string; value?: string; disabled?: boolean; type?: string }>;
@@ -38,11 +39,11 @@ const ParamsSection: React.FC<ParamsSectionProps> = React.memo(({
 }) => (
   <div className="space-y-3">
     <div className="flex items-center justify-between mb-2">
-      <span className="text-sm font-semibold" style={{ color: 'var(--text-primary)' }}>
+      <span className="params-section-title">
         {title}
       </span>
       {description && (
-        <span className="text-xs leading-tight" style={{ color: 'var(--text-secondary)' }}>
+        <span className="text-xs leading-tight description">
           {description}
         </span>
       )}
@@ -51,7 +52,6 @@ const ParamsSection: React.FC<ParamsSectionProps> = React.memo(({
       data={data}
       onChange={onChange}
       keyPlaceholder={keyLabel}
-      valuePlaceholder="Value"
       showEnabled={showEnabled}
       showActions={showActions}
       disableNewRow={disableNewRow}
@@ -109,7 +109,7 @@ export const ParamsTab: React.FC<ParamsTabProps> = ({
   const hasPath = pathData.length > 0;
 
   return (
-    <div className="space-y-4">
+    <StyledWrapper className="space-y-4">
       {/* Query table: always shown so query params can be viewed/added
           regardless of whether the request currently has any. */}
       <ParamsSection
@@ -132,7 +132,7 @@ export const ParamsTab: React.FC<ParamsTabProps> = ({
           readOnlyKey={true}
         />
       )}
-    </div>
+    </StyledWrapper>
   );
 };
 

packages/oc-docs/src/components/Playground/Content/Views/Common/ParamsTab/StyledWrapper.ts

@@ -0,0 +1,17 @@
+import styled from '@emotion/styled';
+
+export const StyledWrapper = styled.div`
+
+  .description {
+    color: 'var(--text-secondary)'
+  }
+
+  .params-section-title {
+    margin: 0 0 0.5rem;
+    font-size: 0.75rem;
+    font-weight: 500;
+    line-height: 1;
+    letter-spacing: 0;
+    color: var(--oc-colors-text-subtext2);
+  }
+`;