Add tooltips to various components and improve styling for better user experience

app/src/styles/layout/popup.scss

@@ -11,18 +11,18 @@
     width: 520px;
     background: var(--background-color);
     border-radius: #{$border-radius-large};
-    backdrop-filter: blur(8px);
-    .split {
-      width: 100%;
-      height: 1px;
-      background: var(--highlight-accent-color);
+    backdrop-filter: blur(15px);
+    outline: 1px solid var(--border-color);
+    padding: 6px;
+    section{
+      margin: 0;
     }
     .header {
       @include flex-space-between;
       padding: 12px;
-      border-bottom: 1px solid var(--border-color);
       .content {
         @include flex-center;
+        gap: 8px;
         .copy-link-button {
           font-size: var(--font-size-small);
           &:hover {
@@ -49,6 +49,8 @@
     }
     .access-and-user-control-container {
       padding: 12px;
+      max-height: 50vh;
+      overflow: auto;
       .user-header {
         margin-bottom: 12px;
       }
@@ -58,7 +60,7 @@
         .team-container,
         .you-container {
           @include flex-space-between;
-          padding: 8px 12px;
+          padding: 8px;
           .user-details {
             @include flex-center;
             gap: 8px;
@@ -113,10 +115,6 @@
             outline-offset: -1px;
           }
         }
-        .team-container,
-        .you-container {
-          border-top: 1px solid var(--border-color);
-        }
       }
     }
   }

app/src/styles/layout/sidebar.scss

@@ -376,6 +376,15 @@
     background: transparent;
     overflow: visible;
 
+    .tooltip {
+      top: 6px;
+      right: calc(100% + 6px);
+      &::after{
+        left: 100%;
+        bottom: 50%;
+      }
+    }
+
     .sidebar-action-list {
       margin-bottom: 12px;
       @include flex-center;
@@ -386,11 +395,30 @@
       backdrop-filter: blur(12px);
       outline: 1px solid var(--border-color);
       outline-offset: -1px;
+      transition: all 0.2s;
+
+      &:hover {
+        outline-color: var(--border-color-accent);
+        svg{
+          transition: all .2s;
+          scale: 1.1;
+        }
+        .tooltip {
+          opacity: 1;
+          transform: translateX(-2px);
+        }
+      }
     }
 
     .active {
       background: var(--background-color-accent);
       outline: none;
+      &:hover {
+        svg{
+          scale: 1;
+        }
+        background: var(--background-color-accent);
+      }
     }
   }
 
@@ -1199,9 +1227,7 @@
   flex-direction: row;
   flex-wrap: wrap;
   height: 100%;
-  max-height: 50vh;
   gap: 3px;
-  overflow: auto;
 
   .assets-result {
     width: 100%;
@@ -1219,6 +1245,8 @@
   .assets-wrapper {
     width: 100%;
     position: relative;
+    max-height: 50vh;
+    overflow: auto;
 
     h2,
     .searched-content {
@@ -1255,6 +1283,19 @@
         position: relative;
         overflow: hidden;
 
+        &:hover {
+          outline: 1px solid var(--border-color-accent);
+          img {
+            transition: all 0.2s;
+            scale: 1.3;
+          }
+          &::after {
+            top: 80px;
+            right: 0;
+            scale: 2;
+          }
+        }
+
         .category-name {
           position: relative;
           z-index: 3;
@@ -1266,12 +1307,12 @@
           width: 60px;
           height: 60px;
           border-radius: #{$border-radius-circle};
-
           background: var(--circle-color, #000);
           position: absolute;
           top: 60%;
           right: -10px;
           transform: translate(0, -50%);
+          transition: all 0.2s ease-in-out;
         }
 
         &:nth-child(1),
@@ -1358,6 +1399,9 @@
           .asset-name {
             opacity: 1;
           }
+          .asset-image {
+            scale: 1.2;
+          }
         }
 
         .asset-name {
@@ -1368,9 +1412,11 @@
           width: 100%;
           height: 100%;
           font-size: var(--font-size-regular);
-          background: linear-gradient(0deg,
-              rgba(37, 24, 51, 0) 0%,
-              rgba(78, 22, 128, 0.4) 100%);
+          background: linear-gradient(
+            0deg,
+            rgba(37, 24, 51, 0) 0%,
+            rgba(52, 41, 61, 0.5) 100%
+          );
           pointer-events: none;
           backdrop-filter: blur(8px);
           opacity: 0;
@@ -1388,13 +1434,13 @@
           width: 100%;
           z-index: 2;
           object-fit: cover;
+          transition: all 0.2s;
         }
       }
     }
   }
 }
 
-
 .skeleton-wrapper {
   display: flex;
   .asset-name {
@@ -1407,9 +1453,6 @@
   }
 }
 
-
-
-
 .sidebar-left-wrapper,
 .sidebar-right-wrapper {
   height: calc(50vh + 150px);