Merge pull request #189 from storybookjs/charles/sb-1528-add-backgrou…

…nd-to-codesnippets-to-make-sure-they-look-ok Improve code snippet UI
storybookjs · Jul 15, 2024 · 1b4f0d5 · 1b4f0d5
2 parents 97bd30a + 99dbfc5
commit 1b4f0d5
Show file tree

Hide file tree

Showing 2 changed files with 4 additions and 4 deletions.
diff --git a/apps/frontpage/components/docs/mdx/code-snippets/code-snippets.tsx b/apps/frontpage/components/docs/mdx/code-snippets/code-snippets.tsx
@@ -1,7 +1,7 @@
 'use client';
 
 import { useEffect, useState, type FC } from 'react';
-import { cn, type CodeSnippetsProps } from '@repo/utils';
+import { type CodeSnippetsProps } from '@repo/utils';
 import { CodeSnippetsWrapper } from '@repo/ui';
 import { useDocs } from '../../../../app/docs/provider';
 import { getFilters } from './utils/get-filters';
@@ -152,7 +152,7 @@ export const CodeSnippetsClient: FC<CodeSnippetsClientProps> = ({
       {activeContent?.content ? (
         <>
           {error && (
-            <div className="flex items-center gap-2 px-4 py-3 mb-4 text-orange-900 bg-orange-100 border border-orange-300 rounded dark:border-orange-800 dark:bg-orange-950 dark:text-orange-400">
+            <div className="mb-4 flex items-center gap-2 rounded border border-orange-300 bg-orange-100 px-4 py-3 text-orange-900 dark:border-orange-800 dark:bg-orange-950 dark:text-orange-400">
               <InfoIcon />
               {error}
             </div>

diff --git a/packages/ui/src/code-snippets-wrapper/wrapper.tsx b/packages/ui/src/code-snippets-wrapper/wrapper.tsx
@@ -27,7 +27,7 @@ export const CodeSnippetsWrapper: FC<CodeSnippetsWrapperProps> = ({
   top,
 }) => {
   return (
-    <div className="ui-mb-6 ui-w-full ui-overflow-hidden ui-rounded ui-border ui-border-zinc-300 dark:ui-border-slate-700">
+    <div className="ui-my-6 ui-w-full ui-overflow-hidden ui-rounded ui-border ui-border-zinc-300 dark:ui-border-slate-700">
       <div className="ui-bg-slate-50 dark:ui-bg-slate-950">
         {top ? <div className="ui-px-3 ui-pb-1 ui-pt-3">{top}</div> : null}
         <div className="ui-flex ui-h-12 ui-items-center ui-justify-between ui-border-b ui-border-b-zinc-300 ui-py-2 ui-pl-5 ui-pr-4 dark:ui-border-slate-700">
@@ -40,7 +40,7 @@ export const CodeSnippetsWrapper: FC<CodeSnippetsWrapperProps> = ({
           </div>
         </div>
       </div>
-      <div className="ui-max-w-full ui-overflow-auto ui-p-4 ui-text-sm dark:ui-bg-slate-900">
+      <div className="ui-max-w-full ui-overflow-auto ui-p-4 ui-text-sm ui-bg-white dark:ui-bg-slate-900">
         {children}
       </div>
     </div>