fix multi select styling

components/Checkbox.tsx

@@ -2,7 +2,7 @@ import React from 'react'
 import { CheckIcon } from '@heroicons/react/solid'
 
 const Checkbox = ({ checked, children, disabled = false, ...props }) => (
-  <label className="flex cursor-pointer items-center text-th-fgd-3">
+  <label className="default-transition flex cursor-pointer items-center text-th-fgd-3 hover:text-th-fgd-2">
     <input
       checked={checked}
       {...props}
@@ -32,7 +32,11 @@ const Checkbox = ({ checked, children, disabled = false, ...props }) => (
         }`}
       />
     </div>
-    <span className="ml-2 text-xs">{children}</span>
+    <span
+      className={`ml-2 text-xs ${checked && !disabled ? 'text-th-fgd-2' : ''}`}
+    >
+      {children}
+    </span>
   </label>
 )
 

components/TradeHistoryFilterModal.tsx

@@ -343,7 +343,7 @@ const MultiSelectDropdown = ({ options, selected, toggleOption }) => {
             leaveTo="opacity-0"
           >
             <Popover.Panel className="absolute top-12 z-10 h-72 w-full overflow-y-auto">
-              <div className="relative rounded-md bg-th-bkg-3 p-2">
+              <div className="relative space-y-2.5 rounded-md bg-th-bkg-3 p-3">
                 {options.map((option) => {
                   const isSelected = selected.includes(option.name)
                   return (