Fix CSS bug in 3 IDE themes

apps/contract-verification/src/app/components/SearchableChainDropdown.tsx

@@ -1,8 +1,9 @@
-import React, { useState, useEffect, useRef, useMemo } from 'react'
+import React, { useState, useEffect, useRef, useMemo, Ref } from 'react'
 import Fuse from 'fuse.js'
 import type { Chain } from '../types'
 import { AppContext } from '../AppContext'
-import { useIntl } from 'react-intl'
+import intl, { useIntl } from 'react-intl'
+import { Dropdown } from 'react-bootstrap'
 
 function getChainDescriptor(chain: Chain): string {
   if (!chain) return ''
@@ -16,6 +17,74 @@ interface DropdownProps {
   selectedChain: Chain
 }
 
+export const CustomToggle = React.forwardRef(
+  (
+    {
+      children,
+      onClick,
+      icon,
+      className = ''
+    }: {
+      children: React.ReactNode
+      onClick: (e) => void
+      icon: string
+      className: string
+    },
+    ref: Ref<HTMLButtonElement>
+  ) => (
+    <button
+      ref={ref}
+      onClick={(e) => {
+        e.preventDefault()
+        onClick(e)
+      }}
+      className={className.replace('dropdown-toggle', '')}
+    >
+      <div className="d-flex">
+        <div className="mr-auto text-nowrap text-truncate overflow-hidden" data-id={`dropdown-content`}>{children}</div>
+        {icon && (
+          <div className="pr-1">
+            <i className={`${icon} pr-1`}></i>
+          </div>
+        )}
+        <div>
+          <i className="fad fa-sort-circle"></i>
+        </div>
+      </div>
+    </button>
+  )
+)
+
+// export const CustomInputToggle = React.forwardRef(
+//   (
+//     {
+//       children,
+//       onClick,
+//       icon,
+//       className = ''
+//     }: {
+//       children: React.ReactNode
+//       onClick: (e) => void
+//       icon: string
+//       className: string
+//     },
+//     ref: Ref<HTMLInputElement>
+//   ) => {
+//     const intl = useIntl()
+//     return (
+//       <input
+//         ref={ref}
+//         placeholder={intl.formatMessage({ id: "contract-verification.searchableChainDropdown", defaultMessage: "Select a chain" })}
+//         type="text"
+//         onClick={(e) => {
+//           e.preventDefault()
+//           onClick(e)
+//         }}
+//         className={className.replace('dropdown-toggle', '')}
+//       />
+//     )}
+// )
+
 export const SearchableChainDropdown: React.FC<DropdownProps> = ({ label, id, setSelectedChain, selectedChain }) => {
   const { chains } = React.useContext(AppContext)
   const ethereumChainIds = [1, 11155111, 17000]
@@ -87,6 +156,38 @@ export const SearchableChainDropdown: React.FC<DropdownProps> = ({ label, id, se
     )
   }
 
+  const CustomInputToggle = React.forwardRef(
+    (
+      {
+        children,
+        onClick,
+        icon,
+        className = ''
+      }: {
+        children: React.ReactNode
+        onClick: (e) => void
+        icon: string
+        className: string
+      },
+      ref: Ref<HTMLInputElement>
+    ) => {
+      const intl = useIntl()
+      return (
+        <input
+          ref={ref}
+          placeholder={intl.formatMessage({ id: "contract-verification.searchableChainDropdown", defaultMessage: "Select a chain" })}
+          type="text"
+          onClick={(e) => {
+            e.preventDefault()
+            onClick(e)
+          }}
+          onChange={handleInputChange}
+          value={searchTerm}
+          className={className.replace('dropdown-toggle', '')}
+        />
+      )}
+  )
+
   return (
     <div className="dropdown mb-3" ref={dropdownRef}>
       {' '}
@@ -101,7 +202,7 @@ export const SearchableChainDropdown: React.FC<DropdownProps> = ({ label, id, se
         placeholder={intl.formatMessage({ id: "contract-verification.searchableChainDropdown", defaultMessage: "Select a chain" })}
         className="form-control"
       />
-      <ul className="dropdown-menu show w-100" style={{ maxHeight: '400px', overflowY: 'auto', display: isOpen ? 'initial' : 'none' }}>
+      <ul className="dropdown-menu custom-dropdown-items border bg-light show w-100" style={{ maxHeight: '400px', overflowY: 'auto', display: isOpen ? 'initial' : 'none' }}>
         {filteredOptions.map((chain) => (
           <li
             key={chain.chainId}

apps/remix-ide/src/assets/css/themes/remix-black_undtds.css

@@ -2895,7 +2895,7 @@ input[type="submit"].btn-block {
   color: var(--text);
   text-align: inherit;
   white-space: nowrap;
-  background-color: var(--text-background);
+  background-color: transparent;
   border: 0;
 }
 .dropdown-item:focus,

apps/remix-ide/src/assets/css/themes/remix-dark_tvx1s2.css

@@ -2738,10 +2738,10 @@ input[type="submit"].btn-block {
   padding: 0.5rem 0;
   margin: 0.125rem 0 0;
   font-size: 1rem;
-  color: var(--text);
+  color: #fff;
   text-align: left;
   list-style: none;
-  background-color: var(--text-background);
+  background-color: #fff;
   background-clip: padding-box;
   border: 1px solid rgba(0, 0, 0, 0.15);
   border-radius: 2px;
@@ -2889,7 +2889,7 @@ input[type="submit"].btn-block {
   color: var(--text);
   text-align: inherit;
   white-space: nowrap;
-  background-color: var(--text-background);
+  background-color: transparent;
   border: 0;
 }
 .dropdown-item:focus,

apps/remix-ide/src/assets/css/themes/remix-hacker_owl.css

@@ -2754,7 +2754,7 @@ input[type="submit"].btn-block {
   color: var(--text);
   text-align: left;
   list-style: none;
-  background-color: var(--text-background);
+  background-color: transparent;
   background-clip: padding-box;
   border: 1px solid rgba(0, 0, 0, 0.15);
   border-radius: 2px;