UI: Improve banner rainbow variant

fuma-nama · Sep 8, 2024 · bcf51a6 · bcf51a6
1 parent cf03bf0
commit bcf51a6
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 15 deletions.
diff --git a/.changeset/perfect-ants-sneeze.md b/.changeset/perfect-ants-sneeze.md
@@ -0,0 +1,5 @@
+---
+'fumadocs-ui': patch
+---
+
+Improve banner rainbow variant
diff --git a/apps/docs/app/layout.client.tsx b/apps/docs/app/layout.client.tsx
@@ -2,9 +2,8 @@
 
 import { cva } from 'class-variance-authority';
 import Link from 'next/link';
-import { useParams, usePathname } from 'next/navigation';
+import { useParams } from 'next/navigation';
 import { type ReactNode, useId } from 'react';
-import { Banner } from 'fumadocs-ui/components/banner';
 import { cn } from '@/utils/cn';
 import { modes } from '@/utils/modes';
 
@@ -25,20 +24,9 @@ export function Body({
   children: ReactNode;
 }): React.ReactElement {
   const mode = useMode();
-  const pathname = usePathname();
 
   return (
     <body className={cn(mode, 'relative flex min-h-screen flex-col')}>
-      {pathname === '/' ? (
-        <Banner variant="rainbow" id="mdx-v10">
-          <Link
-            href="/blog/mdx-v10"
-            className="opacity-80 mix-blend-luminosity"
-          >
-            Fumadocs MDX v10 is now available. {'->'}
-          </Link>
-        </Banner>
-      ) : null}
       {children}
     </body>
   );

diff --git a/packages/ui/src/components/banner.tsx b/packages/ui/src/components/banner.tsx
@@ -106,7 +106,7 @@ const rainbowLayer = (
           '--via': 'rgba(164,255,68,0.4)',
           animationDirection: 'reverse',
           backgroundImage:
-            'repeating-linear-gradient(to right, var(--end), var(--start) 2%, var(--start) 5%, transparent 8%, transparent 14%, var(--via) 18%, var(--via) 22%, var(--mid) 28%, var(--mid) 30%, var(--via) 34%, var(--via) 36%, transparent, var(--end) 50%)',
+            'repeating-linear-gradient(60deg, var(--end), var(--start) 2%, var(--start) 5%, transparent 8%, transparent 14%, var(--via) 18%, var(--via) 22%, var(--mid) 28%, var(--mid) 30%, var(--via) 34%, var(--via) 36%, transparent, var(--end) calc(50% - 12px))',
           backgroundSize: '200% 100%',
           mixBlendMode: 'difference',
         } as object
@@ -124,8 +124,9 @@ const rainbowLayer = (
           '--end': 'rgba(64,0,255,0.51)',
           '--via': 'rgba(255,89,0,0.56)',
           backgroundImage:
-            'repeating-linear-gradient(to right, var(--end), var(--start) 4%, var(--start) 8%, transparent 9%, transparent 14%, var(--mid) 16%, var(--mid) 20%, transparent, var(--via) 36%, var(--via) 40%, transparent 42%, var(--end) 46%, var(--end) 50%)',
+            'repeating-linear-gradient(45deg, var(--end), var(--start) 4%, var(--start) 8%, transparent 9%, transparent 14%, var(--mid) 16%, var(--mid) 20%, transparent, var(--via) 36%, var(--via) 40%, transparent 42%, var(--end) 46%, var(--end) calc(50% - 16.8px))',
           backgroundSize: '200% 100%',
+          mixBlendMode: 'color-dodge',
         } as object
       }
     />