From ce224af649d91226a35445df322d957c9b8dc823 Mon Sep 17 00:00:00 2001
From: Ategon <benjamin@barbeau.net>
Date: Sun, 19 Jan 2025 19:03:37 -0500
Subject: [PATCH] Fix color fading
---
src/app/login/page.tsx | 2 +-
src/app/signup/page.tsx | 2 +-
src/components/editor/index.tsx | 8 ++++----
src/components/jam-header/index.tsx | 4 ++--
src/components/posts/PostCard.tsx | 4 ++--
src/components/posts/index.tsx | 6 +++---
src/components/streams/index.tsx | 2 +-
src/components/theme-toggle/index.tsx | 2 +-
src/components/timers/index.tsx | 2 +-
9 files changed, 16 insertions(+), 16 deletions(-)
diff --git a/src/app/login/page.tsx b/src/app/login/page.tsx
index f1c7f8c..7949c3c 100644
--- a/src/app/login/page.tsx
+++ b/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't have an account? <Link href="/signup">Sign up</Link>
</p>
</Form>
diff --git a/src/app/signup/page.tsx b/src/app/signup/page.tsx
index 29af8aa..e8d34cf 100644
--- a/src/app/signup/page.tsx
+++ b/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>
diff --git a/src/components/editor/index.tsx b/src/components/editor/index.tsx
index 6f69f99..e075c7b 100644
--- a/src/components/editor/index.tsx
+++ b/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
diff --git a/src/components/jam-header/index.tsx b/src/components/jam-header/index.tsx
index 230e767..e45b2d5 100644
--- a/src/components/jam-header/index.tsx
+++ b/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-[#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-[#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-250">
<Calendar />
<p>Dare2Jam 1</p>
</div>
diff --git a/src/components/posts/PostCard.tsx b/src/components/posts/PostCard.tsx
index 620c4c7..558bdc4 100644
--- a/src/components/posts/PostCard.tsx
+++ b/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 }}
/>
diff --git a/src/components/posts/index.tsx b/src/components/posts/index.tsx
index 8139ec6..0b05471 100644
--- a/src/components/posts/index.tsx
+++ b/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)}
diff --git a/src/components/streams/index.tsx b/src/components/streams/index.tsx
index d2e40d0..9029056 100644
--- a/src/components/streams/index.tsx
+++ b/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={{
diff --git a/src/components/theme-toggle/index.tsx b/src/components/theme-toggle/index.tsx
index 10933e5..2b607a7 100644
--- a/src/components/theme-toggle/index.tsx
+++ b/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>
diff --git a/src/components/timers/index.tsx b/src/components/timers/index.tsx
index 10de689..0960e75 100644
--- a/src/components/timers/index.tsx
+++ b/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")}