🎨 Design & animation improvements

pheralb · Sep 9, 2024 · a5eec2a · a5eec2a
1 parent 9eed0df
commit a5eec2a
Show file tree

Hide file tree

Showing 4 changed files with 7 additions and 7 deletions.
diff --git a/website/app/components/header.tsx b/website/app/components/header.tsx
@@ -72,7 +72,7 @@ const Header = (props: iHeaderProps) => {
               height={13}
               width={13}
               strokeWidth={2}
-              className="text-zinc-400 group-hover:text-white"
+              className="text-zinc-400 transition-transform duration-200 group-hover:translate-x-[0.1rem] group-hover:text-white"
             />
           </ExternalLink>
           <ExternalLink
@@ -85,7 +85,7 @@ const Header = (props: iHeaderProps) => {
               height={13}
               width={13}
               strokeWidth={2}
-              className="text-zinc-400 group-hover:text-white"
+              className="text-zinc-400 transition-transform duration-200 group-hover:translate-x-[0.07rem] group-hover:text-white"
             />
           </ExternalLink>
           <ExternalLink
@@ -98,7 +98,7 @@ const Header = (props: iHeaderProps) => {
               height={13}
               width={13}
               strokeWidth={2}
-              className="text-zinc-400 group-hover:text-white"
+              className="text-zinc-400 transition-transform duration-200 group-hover:translate-x-[0.07rem] group-hover:text-white"
             />
           </ExternalLink>
           <ExternalLink
@@ -111,7 +111,7 @@ const Header = (props: iHeaderProps) => {
               height={13}
               width={13}
               strokeWidth={2}
-              className="text-zinc-400 group-hover:text-white"
+              className="text-zinc-400 transition-transform duration-200 group-hover:translate-x-[0.07rem] group-hover:text-white"
             />
           </ExternalLink>
         </nav>

diff --git a/website/app/components/navbar/index.tsx b/website/app/components/navbar/index.tsx
@@ -80,7 +80,7 @@ const Navbar = () => {
         </div>
         <Divider className="hidden md:block" />
         <div className="flex w-full flex-col space-y-1 pb-1 text-zinc-400 transition-colors hover:text-white md:w-56 md:pb-0">
-          <p className="text-xs font-medium uppercase">Size</p>
+          <p className="select-none text-xs font-medium uppercase">Size</p>
           <IconSize />
         </div>
       </div>

diff --git a/website/app/routes/_index.tsx b/website/app/routes/_index.tsx
@@ -32,7 +32,7 @@ export default function Index() {
   ) as iIcons[];
 
   return (
-    <main className="animate-in fade-in-40 duration-500">
+    <main className="animate-in fade-in-60 duration-700">
       <Grid className={cn(containerClasses, "pb-14 pt-6")}>
         {filteredIcons.map((icon) => {
           return (

diff --git a/website/app/routes/folders._index.tsx b/website/app/routes/folders._index.tsx
@@ -32,7 +32,7 @@ export default function Folders() {
   ) as iIcons[];
 
   return (
-    <main className="animate-in fade-in-40 duration-500">
+    <main className="animate-in fade-in-60 duration-700">
       <Grid className={cn(containerClasses, "pb-14 pt-6")}>
         {filteredIcons.map((icon) => {
           return (