Hotfix: use color themed tokens for mic animation (#2027)

fern-api · Jan 15, 2025 · e7c6014 · e7c6014
1 parent 63b7b6e
commit e7c6014
Show file tree

Hide file tree

Showing 3 changed files with 5 additions and 5 deletions.
diff --git a/packages/fern-docs/ui/src/playground/form/PlaygroundFileUploadForm.tsx b/packages/fern-docs/ui/src/playground/form/PlaygroundFileUploadForm.tsx
@@ -1,7 +1,7 @@
 import { FernButton, FernButtonGroup, FernCard } from "@fern-docs/components";
 import cn from "clsx";
 import { uniqBy } from "es-toolkit/array";
-import { FilePlus, FileVolume, Mic, X } from "lucide-react";
+import { File, FilePlus, Mic, X } from "lucide-react";
 import numeral from "numeral";
 import {
   ChangeEvent,
@@ -161,7 +161,7 @@ export const PlaygroundFileUploadForm = memo<PlaygroundFileUploadFormProps>(
           ) : value == null || value.length === 0 ? (
             <div className="flex flex-col items-center gap-3 p-6">
               <h5>
-                {`Drop audio file${type === "files" ? "s" : ""} here to upload`}
+                {`Drop file${type === "files" ? "s" : ""} here to upload`}
               </h5>
               <div className="flex gap-2">
                 <FernButton
@@ -188,7 +188,7 @@ export const PlaygroundFileUploadForm = memo<PlaygroundFileUploadFormProps>(
                 <div key={file.name} className="flex justify-between px-4 py-2">
                   <div className="flex min-w-0 shrink items-center gap-2">
                     <div className="p-1">
-                      <FileVolume />
+                      <File />
                     </div>
                     <span className="inline-flex min-w-0 shrink items-baseline gap-2">
                       <span className="truncate text-sm">{file.name}</span>

diff --git a/packages/fern-docs/ui/src/playground/form/PlaygroundMicrophoneForm.tsx b/packages/fern-docs/ui/src/playground/form/PlaygroundMicrophoneForm.tsx
@@ -48,7 +48,7 @@ export function PlaygroundMicrophoneForm({
                 initial={{ opacity: 0, y: -10 }}
                 animate={{ opacity: 1, y: 0 }}
                 exit={{ opacity: 0, y: -10 }}
-                className="bg-primary absolute inset-0 flex w-full items-center rounded-lg px-2 text-black"
+                className="bg-primary text-default absolute inset-0 flex w-full items-center rounded-lg px-2"
               >
                 <div className="flex-1">
                   <div className="flex items-center gap-4">

diff --git a/packages/fern-docs/ui/src/playground/form/PlaygroundWaveformAnimation.tsx b/packages/fern-docs/ui/src/playground/form/PlaygroundWaveformAnimation.tsx
@@ -7,7 +7,7 @@ export function WaveformAnimation({ volume }: { volume: number }) {
       {Array.from({ length: 20 }).map((_, i) => (
         <motion.div
           key={i}
-          className="h-full w-0.5 bg-black"
+          className="bg-text-default h-full w-0.5"
           animate={{
             scaleY: [0.2, Math.max(0.4, Math.min(volume, 1)), 0.2],
           }}