improve UI of chain namespace filter

Author: tanguyenvn

packages/modal/src/ui/components/ConnectWallet/ConnectWalletChainFilter/ConnectWalletChainFilter.tsx

@@ -41,9 +41,9 @@ function ConnectWalletChainFilter(props: ConnectWalletChainFilterProps) {
           type="button"
           key={chain.id}
           className={cn(
-            "w3a--flex w3a--items-center w3a--justify-center w3a--gap-x-1 w3a--text-xs w3a--font-medium w3a--px-4 w3a--py-3 w3a--text-app-gray-500 dark:w3a--text-app-gray-300 w3a--h-12",
+            "w3a--flex w3a--items-center w3a--justify-center w3a--gap-x-1 w3a--text-xs w3a--font-medium w3a--px-4 w3a--py-3 w3a--text-app-gray-500 dark:w3a--text-app-gray-300 hover:w3a--bg-app-gray-200 dark:hover:w3a--bg-app-gray-700 w3a--h-12 w3a--rounded-2xl",
             {
-              "w3a--bg-app-gray-100 dark:w3a--bg-app-gray-800 w3a--border w3a--border-app-gray-200 dark:w3a--border-app-gray-700 w3a--rounded-2xl hover:w3a--bg-app-gray-200 dark:hover:w3a--bg-app-gray-700 w3a--text-app-gray-900 dark:w3a--text-app-white":
+              "w3a--bg-app-gray-100 dark:w3a--bg-app-gray-800 w3a--border w3a--border-app-gray-200 dark:w3a--border-app-gray-700 w3a--text-app-gray-900 dark:w3a--text-app-white":
                 selectedChain === chain.id,
             }
           )}
@@ -52,7 +52,7 @@ function ConnectWalletChainFilter(props: ConnectWalletChainFilterProps) {
           {chain.icon && (
             <img src={getIcons(isDark ? `${chain.icon}-dark` : `${chain.icon}-light`)} alt={chain.name} className="w3a--size-5 w3a--object-contain" />
           )}
-          {t(chain.name)}
+          <span className="first-letter:w3a--capitalize">{t(chain.name)}</span>
         </button>
       ))}
     </div>