From 77e8705f4169aca32ad5e15e4a85c816c72fe608 Mon Sep 17 00:00:00 2001
From: Fedor Katurov <f.katurov@rogii.com>
Date: Thu, 22 Dec 2022 13:45:23 +0600
Subject: [PATCH] fixed lab hover effect

---
 src/components/common/Hoverable/index.tsx     |  6 ++-
 .../common/Hoverable/styles.module.scss       | 41 +++++++++++++++----
 src/containers/lab/LabGrid/index.tsx          |  2 +-
 3 files changed, 40 insertions(+), 9 deletions(-)

diff --git a/src/components/common/Hoverable/index.tsx b/src/components/common/Hoverable/index.tsx
index e628bfae..c64c5f3e 100644
--- a/src/components/common/Hoverable/index.tsx
+++ b/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,
     })}
   >
diff --git a/src/components/common/Hoverable/styles.module.scss b/src/components/common/Hoverable/styles.module.scss
index e648faff..bb4d7850 100644
--- a/src/components/common/Hoverable/styles.module.scss
+++ b/src/components/common/Hoverable/styles.module.scss
@@ -18,19 +18,46 @@
   &.with_icon::after {
     background: linear-gradient(325deg, $color_primary 20px, transparent 100px);
   }
+}
 
-  &:hover {
-    z-index: 10;
-    transition: all 100ms;
-    transform: scale(1.025) translateY(-2%);
-    box-shadow: rgba(0, 0, 0, 0.5) 0 10px 10px 5px;
+.hoverable.rise {
+  @media (hover: hover) {
+    &:hover {
+      z-index: 10;
+      transition: all 100ms;
+      transform: scale(1.025) translateY(-2%);
+      box-shadow: rgba(0, 0, 0, 0.5) 0 10px 10px 5px;
 
-    &::after {
-      opacity: 1;
+      &::after {
+        opacity: 1;
+      }
     }
   }
 }
 
+.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;
   bottom: 4px;
diff --git a/src/containers/lab/LabGrid/index.tsx b/src/containers/lab/LabGrid/index.tsx
index 8f0b9896..792a00e9 100644
--- a/src/containers/lab/LabGrid/index.tsx
+++ b/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}