fixed lab hover effect

src/components/common/Hoverable/index.tsx

@@ -6,19 +6,23 @@ import { DivProps } from '~/utils/types';
 
 import styles from './styles.module.scss';
 
+type HoverableEffect = 'rise' | 'shine';
+
 interface HoverableProps extends DivProps {
   icon?: ReactNode;
+  effect?: HoverableEffect;
 }
 
 const Hoverable: FC<HoverableProps> = ({
   children,
   className,
   icon,
+  effect = 'rise',
   ...rest
 }) => (
   <div
     {...rest}
-    className={classNames(styles.hoverable, className, {
+    className={classNames(styles.hoverable, styles[effect], className, {
       [styles.with_icon]: !!icon,
     })}
   >

src/components/common/Hoverable/styles.module.scss

@@ -18,7 +18,10 @@
   &.with_icon::after {
     background: linear-gradient(325deg, $color_primary 20px, transparent 100px);
   }
+}
 
+.hoverable.rise {
+  @media (hover: hover) {
     &:hover {
       z-index: 10;
       transition: all 100ms;
@@ -30,6 +33,30 @@
       }
     }
   }
+}
+
+.hoverable.shine {
+  &::before {
+    content: '';
+    position: absolute;
+    inset: 0;
+    background: linear-gradient(
+      150deg,
+      #{transparentize(yellow, 0.75)},
+      transparent
+    );
+    z-index: 1;
+    border-radius: $radius;
+    opacity: 0;
+    pointer-events: none;
+    touch-action: none;
+    transition: all 250ms;
+  }
+
+  &:hover::before {
+    opacity: 1;
+  }
+}
 
 .icon {
   position: absolute;

src/containers/lab/LabGrid/index.tsx

@@ -23,7 +23,7 @@ const LabGrid: FC<IProps> = memo(() => {
     <div className={styles.wrap}>
       <Columns hasMore={hasMore && !isLoading} onScrollEnd={loadMore}>
         {nodes.map((node) => (
-          <Hoverable key={node.node.id}>
+          <Hoverable key={node.node.id} effect="shine">
             <LabNode
               node={node.node}
               lastSeen={node.last_seen}