fix: refine search modal styling and list component

packages/ui/src/components/list.css

@@ -56,11 +56,14 @@
       width: 20px;
       height: 20px;
       background-color: transparent;
+      opacity: 0.5;
+      transition: opacity 0.15s ease;
 
       &:hover:not(:disabled),
       &:focus:not(:disabled),
       &:active:not(:disabled) {
         background-color: transparent;
+        opacity: 0.7;
       }
 
       &:hover:not(:disabled) [data-slot="icon-svg"] {
@@ -125,10 +128,14 @@
       display: flex;
       flex-direction: column;
 
+      &:last-child {
+        padding-bottom: 12px;
+      }
+
       [data-slot="list-header"] {
         display: flex;
         z-index: 10;
-        padding: 0 12px 8px 8px;
+        padding: 8px 12px 8px 12px;
         justify-content: space-between;
         align-items: center;
         align-self: stretch;
@@ -136,7 +143,7 @@
         position: sticky;
         top: 0;
 
-        color: var(--text-base);
+        color: var(--text-weak);
 
         /* text-14-medium */
         font-family: var(--font-family-sans);