fix(AppImage): active hover visuals on focus as well

ribbon-studios · Jun 26, 2024 · 6d15c8a · 6d15c8a
1 parent ef0a930
commit 6d15c8a
Show file tree

Hide file tree

Showing 2 changed files with 3 additions and 2 deletions.
diff --git a/src/components/AppImage.module.css b/src/components/AppImage.module.css
@@ -15,7 +15,8 @@ a.appImage {
     @apply rounded-md pointer-events-none opacity-0 inset-0 absolute bg-white/10 transition-opacity hover:opacity-100;
   }
 
-  &:hover .name {
+  &:hover .name,
+  &:focus .name {
     @apply translate-y-0 opacity-100;
   }
 }

diff --git a/src/components/AppImage.tsx b/src/components/AppImage.tsx
@@ -19,7 +19,7 @@ export const AppImage: FC<Props> = ({ className, app, to }) => {
         <div className={styles.name}>{app.name}</div>
       </div>
       <img src={url} />
-      <img className="blur-none group-hover:blur absolute inset-0 -z-10 transition-all" src={url} />
+      <img className="blur-none group-hover:blur group-focus:blur absolute inset-0 -z-10 transition-all" src={url} />
     </Link>
   ) : (
     <div className={cn(styles.appImage, className)}>