Update select component

* Align the popover
* Pass down classes from props
* Adds local animation
* Remove modal style
* Add full width style

components/common/Select/index.module.scss

@@ -19,14 +19,6 @@
     }
   }
 
-  &.modal {
-    background-color: var(--select-modal-bg);
-
-    &:hover {
-      background-color: var(--select-modal-bg-hover);
-    }
-  }
-
   &.bound {
     background-color: var(--select-contained-bg);
 
@@ -35,6 +27,10 @@
     }
   }
 
+  &.full {
+    width: 100%;
+  }
+
   &.table {
     min-width: $unit * 30;
   }
@@ -89,12 +85,14 @@
 }
 
 .select {
+  animation: scaleIn $duration-zoom ease-out;
   background: var(--dialog-bg);
   border-radius: $card-corner;
   border: 1px solid rgba(0, 0, 0, 0.24);
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.16);
   padding: 0 $unit;
   min-width: var(--radix-select-trigger-width);
+  transform-origin: var(--radix-select-content-transform-origin);
   max-height: 40vh;
   z-index: 40;
 
@@ -119,4 +117,50 @@
   .scroll.up {
     transform: scale(1, -1);
   }
+
+  @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);
+    }
+  }
+}
+
+[data-radix-popper-content-wrapper] {
 }

components/common/Select/index.tsx

@@ -48,10 +48,7 @@ const Select = React.forwardRef<HTMLButtonElement, Props>(function select(
       [styles.medium]: !props.trigger || props.trigger?.size === 'medium',
       [styles.large]: props.trigger?.size === 'large',
     },
-    props.trigger?.className?.split(' ').map((className) => {
+    props.trigger?.className?.split(' ').map((className) => styles[className])
-      console.log('className', className)
-      return styles[className]
-    })
   )
 
   const selectClasses = classNames(
@@ -122,6 +119,7 @@ const Select = React.forwardRef<HTMLButtonElement, Props>(function select(
           />
 
           <RadixSelect.Content
+            align="center"
             className={selectClasses}
             position="popper"
             sideOffset={6}