Pass down class name to Popover

* Other style changes for raid combobox
* Local keyframe animation

components/common/Popover/index.module.scss

@@ -1,4 +1,4 @@
-.Popover {
+.popover {
   animation: scaleIn $duration-zoom ease-out;
   background: var(--dialog-bg);
   border-radius: $card-corner;
@@ -14,7 +14,11 @@
     min-width: auto;
   }
 
-  &.Flush {
+  &.raid {
+    width: auto;
+  }
+
+  &.flush {
     padding: 0;
   }
 
@@ -34,6 +38,11 @@
   gap: $unit;
   padding: ($unit * 1.5) $unit-2x;
 
+  &:hover {
+    background-color: var(--input-bg-hover);
+    cursor: pointer;
+  }
+
   &.small > .value {
     font-size: $font-small;
     margin: 0;
@@ -46,17 +55,27 @@
     }
   }
 
+  &.bound.raid {
+    &.highlighted .value {
+      color: var(--text-primary);
+    }
+
+    &:not(.highlighted) .value.empty {
+      color: var(--text-tertiary);
+    }
+  }
+
   .value {
     display: flex;
     gap: $unit-half;
     width: 100%;
   }
 
-  &.modal {
-    background-color: var(--select-modal-bg);
+  &.bound {
+    background-color: var(--select-contained-bg);
 
     &:hover {
-      background-color: var(--select-modal-bg-hover);
+      background-color: var(--select-contained-bg-hover);
     }
   }
 
@@ -64,16 +83,6 @@
     display: none;
   }
 
-  &:hover {
-    background-color: var(--input-bg-hover);
-    cursor: pointer;
-
-    span:not(.icon),
-    &[data-placeholder] > span:not(.icon) {
-      color: var(--text-primary);
-    }
-  }
-
   &.disabled:hover {
     background-color: var(--input-bg);
     cursor: not-allowed;
@@ -95,6 +104,10 @@
 
     &:hover {
       background-color: var(--select-contained-bg-hover);
+
+      .icon svg {
+        fill: var(--text-primary);
+      }
     }
   }
 
@@ -116,8 +129,51 @@
     }
   }
 
-  span:not(.icon) {
-    color: var(--text-secondary);
+  // span:not(.icon) {
+  //   color: var(--text-secondary);
+  // }
+
+  @keyframes scaleIn {
+    0% {
+      opacity: 0;
+      transform: scale(0);
+    }
+    20% {
+      opacity: 0.2;
+      transform: scale(0.4);
+    }
+    40% {
+      opacity: 0.4;
+      transform: scale(0.8);
+    }
+    60% {
+      opacity: 0.6;
+      transform: scale(1);
+    }
+    65% {
+      opacity: 0.65;
+      transform: scale(1.1);
+    }
+    70% {
+      opacity: 0.7;
+      transform: scale(1);
+    }
+    75% {
+      opacity: 0.75;
+      transform: scale(0.98);
+    }
+    80% {
+      opacity: 0.8;
+      transform: scale(1.02);
+    }
+    90% {
+      opacity: 0.9;
+      transform: scale(0.96);
+    }
+    100% {
+      opacity: 1;
+      transform: scale(1);
+    }
   }
 }
 

components/common/Popover/index.tsx

@@ -50,7 +50,14 @@ const Popover = React.forwardRef<HTMLDivElement, Props>(function Popover(
       [styles.medium]: !props.trigger || props.trigger?.size === 'medium',
       [styles.large]: props.trigger?.size === 'large',
     },
-    props.trigger?.className
+    props.trigger?.className?.split(' ').map((className) => styles[className])
+  )
+
+  const popoverClasses = classNames(
+    {
+      [styles.popover]: true,
+    },
+    props.className?.split(' ').map((className) => styles[className])
   )
 
   // Hooks
@@ -104,7 +111,7 @@ const Popover = React.forwardRef<HTMLDivElement, Props>(function Popover(
         {arrow}
       </PopoverPrimitive.Trigger>
       <PopoverPrimitive.Content
-        className={classNames({ Popover: true }, props.className)}
+        className={popoverClasses}
         sideOffset={6}
         ref={forwardedRef}
       >