add glass bg

Author: happylolonly

src/features/cyberlinks/CyberlinksGraph/GraphHoverInfo/GraphHoverInfo.module.scss

@@ -1,19 +1,10 @@
-.hoverInfo {
-  z-index: 0;
+@import '../../../../style/mixins';
 
-  &::before {
-    filter: blur(10px);
-    background-color: rgb(255 255 255 / 15%);
-    height: 100%;
-    width: 100%;
-    content: ' ';
-    position: absolute;
-    inset: 0;
-    z-index: -1;
-  }
+.hoverInfo {
+  @include glassBackground;
 
   position: absolute;
-  padding: 10px;
+  z-index: 0;
   max-width: 480px;
   border-radius: 5px;
 }

src/features/cyberlinks/CyberlinksGraph/GraphHoverInfo/GraphHoverInfo.tsx

@@ -49,12 +49,7 @@ function HoverInfo({ node, camera, size }: Props) {
         left: posX,
       }}
     >
-      {isCid ? (
-        // <CIDResolver cid={node.id} />
-        <ContentItem cid={node.id} />
-      ) : (
-        <Display>{node.id}</Display>
-      )}
+      {isCid ? <ContentItem cid={node.id} /> : <Display>{node.id}</Display>}
     </div>
   );
 }

src/style/mixins.scss

@@ -25,3 +25,25 @@
     height: 2px;
   }
 }
+
+@mixin glass {
+  backdrop-filter: blur(15px);
+  box-shadow: 0px 0px 10px rgba(75, 0, 130, 0.09);
+  background-color: rgba(75, 0, 130, 0.09);
+}
+
+@mixin glassBackground {
+  position: relative;
+
+  &:before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    z-index: -1;
+
+    @include glass;
+  }
+}