Ategon/Jamjar
1
0
Fork 0
mirror of https://github.com/Ategon/Jamjar.git synced 2025-02-12 06:16:21 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Fix color fading

Browse source
This commit is contained in:
Ategon 2025-01-19 19:03:37 -05:00
parent 373aff3911
commit ce224af649
9 changed files with 16 additions and 16 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/app/login/page.tsx
View file

@ -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>

2
src/app/signup/page.tsx
View file

@ -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>

8
src/components/editor/index.tsx
View file

@ -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

4
src/components/jam-header/index.tsx
View file

@ -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>

4
src/components/posts/PostCard.tsx
View file

@ -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 }}
/>

6
src/components/posts/index.tsx
View file

@ -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)}

2
src/components/streams/index.tsx
View file

@ -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={{

2
src/components/theme-toggle/index.tsx
View file

@ -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>

2
src/components/timers/index.tsx
View file

@ -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")}