style: reduce transition duration for smoother animations (#530)

zuplo · Jan 15, 2025 · 8a0bb27 · 8a0bb27
1 parent e8a949d
commit 8a0bb27
Show file tree

Hide file tree

Showing 3 changed files with 3 additions and 3 deletions.
diff --git a/packages/zudoku/src/lib/components/navigation/SidebarItem.tsx b/packages/zudoku/src/lib/components/navigation/SidebarItem.tsx
@@ -10,7 +10,7 @@ import { SidebarBadge } from "./SidebarBadge.js";
 import { SidebarCategory } from "./SidebarCategory.js";
 
 export const navigationListItem = cva(
-  "flex items-center gap-2 px-[--padding-nav-item] py-1.5 rounded-lg hover:bg-accent transition-colors duration-300",
+  "flex items-center gap-2 px-[--padding-nav-item] py-1.5 rounded-lg hover:bg-accent",
   {
     variants: {
       isActive: {

diff --git a/website/src/app/components/PreviewInput.tsx b/website/src/app/components/PreviewInput.tsx
@@ -120,7 +120,7 @@ export const PreviewInput = ({ sample }: { sample: string }) => {
     <div>
       <div
         className={cn(
-          "fixed inset-0 transition duration-300 overflow-hidden pointer-events-none border-2 border-transparent text-transparent grid place-items-center text-4xl font-semibold",
+          "fixed inset-0 transition duration-200 overflow-hidden pointer-events-none border-2 border-transparent text-transparent grid place-items-center text-4xl font-semibold",
           isDragging &&
             "bg-black/35 text-stroke border-white/10 border-dashed text-white",
         )}

diff --git a/website/src/app/components/page.tsx b/website/src/app/components/page.tsx
@@ -212,7 +212,7 @@ Ctrl+C to exit
           />
         </Frame>
         <Frame
-          className="lg:absolute lg:left-0 lg:right-0 lg:translate-x-[25%] lg:-translate-y-[10%] overflow-hidden border border-gray-800 lg:scale-90 hover:scale-95 transition duration-300 ease-in-out drop-shadow-lg h-min"
+          className="lg:absolute lg:left-0 lg:right-0 lg:translate-x-[25%] lg:-translate-y-[10%] overflow-hidden border border-gray-800 lg:scale-90 hover:scale-95 transition duration-200 ease-in-out drop-shadow-lg h-min"
           innerPadding={false}
         >
           <Image src={DocsScreenshot} alt="" />