Fix popover triggers

This is mostly a duplicate of SelectTrigger but CSS modules are deeply stupid, so we have to duplicate the code.

components/common/Popover/index.module.scss

@@ -25,5 +25,101 @@
   }
 }
 
+.trigger {
+  align-items: center;
+  background-color: var(--input-bg);
+  border-radius: $input-corner;
+  border: 2px solid transparent;
+  display: flex;
+  gap: $unit;
+  padding: ($unit * 1.5) $unit-2x;
+
+  &.small > .value {
+    font-size: $font-small;
+    margin: 0;
+    max-width: 200px;
+
+    @include breakpoint(tablet) {
+      width: 100%;
+      max-width: inherit;
+      text-align: center;
+    }
+  }
+
+  .value {
+    display: flex;
+    gap: $unit-half;
+    width: 100%;
+  }
+
+  &.modal {
+    background-color: var(--select-modal-bg);
+
+    &:hover {
+      background-color: var(--select-modal-bg-hover);
+    }
+  }
+
+  &.hidden {
+    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;
+  }
+
+  &[data-placeholder='true'] > span:not(.icon) {
+    color: var(--text-secondary);
+  }
+
+  & > span:not(.icon) {
+    color: var(--text-primary);
+    flex-grow: 1;
+    font-size: $font-regular;
+    text-align: left;
+  }
+
+  &.bound {
+    background-color: var(--select-contained-bg);
+
+    &:hover {
+      background-color: var(--select-contained-bg-hover);
+    }
+  }
+
+  &.Table {
+    min-width: $unit * 30;
+  }
+
+  img {
+    width: $unit-4x;
+    height: auto;
+  }
+
+  .icon {
+    display: flex;
+    align-items: center;
+
+    svg {
+      fill: var(--icon-secondary);
+    }
+  }
+
+  span:not(.icon) {
+    color: var(--text-secondary);
+  }
+}
+
 [data-radix-popper-content-wrapper] {
 }

components/common/Popover/index.tsx

@@ -20,8 +20,10 @@ interface Props extends ComponentProps<'div'> {
     alt: string
   }
   trigger?: {
+    bound?: boolean
     className?: string
     placeholder?: string
+    size?: 'small' | 'medium' | 'large'
   }
   triggerTabIndex?: number
   value?: {
@@ -41,8 +43,12 @@ const Popover = React.forwardRef<HTMLDivElement, Props>(function Popover(
   // Element classes
   const triggerClasses = classNames(
     {
-      SelectTrigger: true,
-      Disabled: props.disabled,
+      [styles.trigger]: true,
+      [styles.disabled]: props.disabled,
+      [styles.bound]: props.trigger ? props.trigger.bound : false,
+      [styles.small]: props.trigger?.size === 'small',
+      [styles.medium]: !props.trigger || props.trigger?.size === 'medium',
+      [styles.large]: props.trigger?.size === 'large',
     },
     props.trigger?.className
   )
@@ -54,11 +60,18 @@ const Popover = React.forwardRef<HTMLDivElement, Props>(function Popover(
 
   // Elements
   const value = props.value ? (
-    <span className="Value" data-value={props.value?.rawValue}>
+    <span className={styles.value} data-value={props.value?.rawValue}>
       {props.value?.element}
     </span>
   ) : (
-    <span className="Value Empty">{props.placeholder}</span>
+    <span
+      className={classNames({
+        [styles.value]: true,
+        [styles.empty]: true,
+      })}
+    >
+      {props.placeholder}
+    </span>
   )
 
   const icon = props.icon ? (
@@ -68,7 +81,7 @@ const Popover = React.forwardRef<HTMLDivElement, Props>(function Popover(
   )
 
   const arrow = !props.disabled ? (
-    <i className="SelectIcon">
+    <i className={styles.icon}>
       <ChevronIcon />
     </i>
   ) : (