Fix color fading

src/app/login/page.tsx

@@ -105,7 +105,7 @@ export default function UserPage() {
             Reset
           </Button>
         </div>
-        <p className="text-[#333] dark:text-white transition-color duration-500 ease-in-out">
+        <p className="text-[#333] dark:text-white transition-color duration-250">
           Don&apos;t have an account? <Link href="/signup">Sign up</Link>
         </p>
       </Form>

src/app/signup/page.tsx

@@ -129,7 +129,7 @@ export default function UserPage() {
             Reset
           </Button>
         </div>
-        <p className="text-[#333] dark:text-white transition-color duration-500 ease-in-out">
+        <p className="text-[#333] dark:text-white transition-color duration-250">
           Already have an account? <Link href="/login">Log In</Link>
         </p>
       </Form>

src/components/editor/index.tsx

@@ -97,7 +97,7 @@ export default function Editor({ content, setContent }: EditorProps) {
     editorProps: {
       attributes: {
         class:
-          "prose dark:prose-invert min-h-[150px] max-h-[400px] overflow-y-auto cursor-text rounded-md border p-5 focus-within:outline-none focus-within:border-blue-500 transform-all duration-500 ease-in-out",
+          "prose dark:prose-invert min-h-[150px] max-h-[400px] overflow-y-auto cursor-text rounded-md border p-5 focus-within:outline-none focus-within:border-blue-500 !duration-250 !ease-linear !transition-all",
       },
     },
   });
@@ -115,7 +115,7 @@ export default function Editor({ content, setContent }: EditorProps) {
               : editor.storage.characterCount.characters() > limit / 2
               ? "text-yellow-500"
               : "text-[#888] dark:text-[#555]"
-          } transform-color duration-500 ease-in-out flex items-center gap-3`}
+          } transform-color duration-250 ease-linear flex items-center gap-3`}
         >
           <svg width="30" height="30" viewBox="0 0 36 36">
             <circle
@@ -125,7 +125,7 @@ export default function Editor({ content, setContent }: EditorProps) {
               fill="none"
               stroke={theme === "dark" ? "#333" : "#eee"}
               strokeWidth="3"
-              className="transform-all duration-500 ease-in-out"
+              className="!duration-250 !ease-linear !transition-all"
             />
             <circle
               id="progress-circle"
@@ -146,7 +146,7 @@ export default function Editor({ content, setContent }: EditorProps) {
                 (1 - editor.storage.characterCount.characters() / limit) * 100
               }
               transform="rotate(-90 18 18)"
-              className="transform-all duration-500 ease-in-out"
+              className="!duration-250 !ease-linear !transition-all"
             />
           </svg>
           {editor.storage.characterCount.characters()} / {limit} characters

src/components/jam-header/index.tsx

@@ -2,8 +2,8 @@ import { Calendar } from "lucide-react";
 
 export default function JamHeader() {
   return (
-    <div className="bg-[#7090b9] dark:bg-[#124a88] flex rounded-2xl overflow-hidden text-white transition-color duration-500 ease-in-out">
+    <div className="bg-[#7090b9] dark:bg-[#124a88] flex rounded-2xl overflow-hidden text-white transition-color duration-250">
-      <div className="bg-[#85bdd2] dark:bg-[#1892b3] p-4 px-6 flex items-center gap-2 font-bold transition-color duration-500 ease-in-out">
+      <div className="bg-[#85bdd2] dark:bg-[#1892b3] p-4 px-6 flex items-center gap-2 font-bold transition-color duration-250">
         <Calendar />
         <p>Dare2Jam 1</p>
       </div>

src/components/posts/PostCard.tsx

@@ -46,7 +46,7 @@ export default function PostCard({
 
   return (
     <Card
-      className="bg-opacity-60 !duration-500 ease-in-out !transition-all"
+      className="bg-opacity-60 !duration-250 !ease-linear !transition-all"
       style={{ display: hidden ? "none" : "flex" }}
     >
       <CardBody className="p-5">
@@ -128,7 +128,7 @@ export default function PostCard({
               <Spacer y={4} />
 
               <div
-                className="prose dark:prose-invert transition-all !duration-500 ease-in-out"
+                className="prose dark:prose-invert !duration-250 !ease-linear !transition-all"
                 dangerouslySetInnerHTML={{ __html: post.content }}
               />
 

src/components/posts/index.tsx

@@ -75,7 +75,7 @@ export default function Posts() {
             <DropdownTrigger>
               <Button
                 size="sm"
-                className="text-xs bg-white dark:bg-[#252525] transition-all !duration-500 ease-in-out text-[#333] dark:text-white"
+                className="text-xs bg-white dark:bg-[#252525] !duration-250 !ease-linear !transition-all text-[#333] dark:text-white"
                 variant="faded"
               >
                 {sort.charAt(0).toUpperCase() + sort.slice(1)}
@@ -94,7 +94,7 @@ export default function Posts() {
           </Dropdown>
           <Button
             size="sm"
-            className="text-xs bg-white dark:bg-[#252525] transition-all !duration-500 ease-in-out text-[#333] dark:text-white"
+            className="text-xs bg-white dark:bg-[#252525] !duration-250 !ease-linear !transition-all text-[#333] dark:text-white"
             variant="faded"
             onPress={() => {
               toast.warning("Flair filtering functionality coming soon");
@@ -108,7 +108,7 @@ export default function Posts() {
             <DropdownTrigger>
               <Button
                 size="sm"
-                className="text-xs bg-white dark:bg-[#252525] transition-all !duration-500 ease-in-out text-[#333] dark:text-white"
+                className="text-xs bg-white dark:bg-[#252525] !duration-250 !ease-linear !transition-all text-[#333] dark:text-white"
                 variant="faded"
               >
                 {style.charAt(0).toUpperCase() + style.slice(1)}

src/components/streams/index.tsx

@@ -50,7 +50,7 @@ export default function Streams() {
   const currentStreamer = streamers[currentIndex]; // Get the currently displayed streamer
 
   return (
-    <div className="text-[#333] dark:text-white text-center p-6">
+    <div className="text-[#333] dark:text-white text-center p-6 transition-color duration-250">
       <h1>Featured Streamer</h1>
       <div
         style={{

src/components/theme-toggle/index.tsx

@@ -32,7 +32,7 @@ export default function ThemeToggle() {
       style={{ cursor: "pointer" }}
       className={`${isSpinning && "animate-[spin_0.5s_ease-out]"}  `}
     >
-      <div className="duration-500 ease-in-out transition-all transform text-[#333] dark:text-white hover:scale-125">
+      <div className="!duration-250 !ease-linear !transition-all transform text-[#333] dark:text-white hover:scale-125">
         {resolvedTheme === "dark" && <Moon />}
         {resolvedTheme === "light" && <Sun />}
       </div>

src/components/timers/index.tsx

@@ -3,7 +3,7 @@ import Timer from "./Timer";
 
 export default function Timers() {
   return (
-    <div className="text-[#333] dark:text-white ease-in-out transition-color duration-500">
+    <div className="text-[#333] dark:text-white transition-color duration-250">
       <Timer
         name="Jam Start"
         targetDate={new Date("2025-04-04T18:00:00-05:00")}