From cf2179fca2f171ab0cd5aa33b93a93ee92223415 Mon Sep 17 00:00:00 2001
From: Joseph Izang <josephizang@gmail.com>
Date: Mon, 14 Apr 2025 13:45:04 +0100
Subject: [PATCH 1/5] fix css bug

---
 apps/remix-ide/src/assets/css/themes/remix-black_undtds.css | 2 +-
 apps/remix-ide/src/assets/css/themes/remix-dark_tvx1s2.css  | 6 +++---
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/apps/remix-ide/src/assets/css/themes/remix-black_undtds.css b/apps/remix-ide/src/assets/css/themes/remix-black_undtds.css
index 397b140961d..ea5a8ae3569 100644
--- a/apps/remix-ide/src/assets/css/themes/remix-black_undtds.css
+++ b/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,
diff --git a/apps/remix-ide/src/assets/css/themes/remix-dark_tvx1s2.css b/apps/remix-ide/src/assets/css/themes/remix-dark_tvx1s2.css
index 8bc15be5b72..467767a0949 100644
--- a/apps/remix-ide/src/assets/css/themes/remix-dark_tvx1s2.css
+++ b/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,

From ffa642351edf6be547f426026630179b5b213bb7 Mon Sep 17 00:00:00 2001
From: Joseph Izang <josephizang@gmail.com>
Date: Mon, 14 Apr 2025 13:51:58 +0100
Subject: [PATCH 2/5] fix hackerowl theme change

---
 apps/remix-ide/src/assets/css/themes/remix-hacker_owl.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/remix-ide/src/assets/css/themes/remix-hacker_owl.css b/apps/remix-ide/src/assets/css/themes/remix-hacker_owl.css
index 6872ba4c7bf..e961480e4a9 100644
--- a/apps/remix-ide/src/assets/css/themes/remix-hacker_owl.css
+++ b/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;

From 56b27c19cca24f11a93f9804d0d20705055950a4 Mon Sep 17 00:00:00 2001
From: Joseph Izang <josephizang@gmail.com>
Date: Mon, 14 Apr 2025 19:09:09 +0100
Subject: [PATCH 3/5] fix contract verification dropdown

---
 .../components/SearchableChainDropdown.tsx    | 75 +++++++++++++------
 1 file changed, 51 insertions(+), 24 deletions(-)

diff --git a/apps/contract-verification/src/app/components/SearchableChainDropdown.tsx b/apps/contract-verification/src/app/components/SearchableChainDropdown.tsx
index b20c38cde0c..1628d85b399 100644
--- a/apps/contract-verification/src/app/components/SearchableChainDropdown.tsx
+++ b/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,44 @@ 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 SearchableChainDropdown: React.FC<DropdownProps> = ({ label, id, setSelectedChain, selectedChain }) => {
   const { chains } = React.useContext(AppContext)
   const ethereumChainIds = [1, 11155111, 17000]
@@ -88,32 +127,20 @@ export const SearchableChainDropdown: React.FC<DropdownProps> = ({ label, id, se
   }
 
   return (
-    <div className="dropdown mb-3" ref={dropdownRef}>
-      {' '}
-      {/* Add ref here */}
-      <label htmlFor={id}>{label}</label>
-      <input
-        type="text"
-        value={searchTerm}
-        onChange={handleInputChange}
-        onClick={openDropdown}
-        data-id="chainDropdownbox"
-        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' }}>
+    <Dropdown>
+      <Dropdown.Toggle as={CustomToggle} icon={null} className="btn btn-light btn-block w-100 d-inline-block form-control" data-id="chainDropdownbox">
+        {searchTerm.length > 0 ? searchTerm : intl.formatMessage({ id: "contract-verification.searchableChainDropdown", defaultMessage: "Select a chain" })}
+      </Dropdown.Toggle>
+      <Dropdown.Menu className="w-100 custom-dropdown-items border bg-light">
         {filteredOptions.map((chain) => (
-          <li
-            key={chain.chainId}
-            onClick={() => handleOptionClick(chain)}
+          <Dropdown.Item key={chain.chainId} onClick={() => handleOptionClick(chain)}
+            className={`${getChainDescriptor(chain).length > 30 ? 'text-truncate text-decoration-none' : 'text-decoration-none'}`}
             data-id={chain.chainId}
-            className={`dropdown-item ${selectedChain?.chainId === chain.chainId ? 'active' : ''}`}
-            style={{ cursor: 'pointer', whiteSpace: 'normal' }}
           >
             {getChainDescriptor(chain)}
-          </li>
+          </Dropdown.Item>
         ))}
-      </ul>
-    </div>
+      </Dropdown.Menu>
+    </Dropdown>
   )
 }

From 588da34106583f257814e50e7bfc090453ec786e Mon Sep 17 00:00:00 2001
From: Joseph Izang <josephizang@gmail.com>
Date: Tue, 15 Apr 2025 09:53:14 +0100
Subject: [PATCH 4/5] fix border

---
 .../src/app/components/SearchableChainDropdown.tsx              | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/contract-verification/src/app/components/SearchableChainDropdown.tsx b/apps/contract-verification/src/app/components/SearchableChainDropdown.tsx
index 1628d85b399..a5e4618fe45 100644
--- a/apps/contract-verification/src/app/components/SearchableChainDropdown.tsx
+++ b/apps/contract-verification/src/app/components/SearchableChainDropdown.tsx
@@ -128,7 +128,7 @@ export const SearchableChainDropdown: React.FC<DropdownProps> = ({ label, id, se
 
   return (
     <Dropdown>
-      <Dropdown.Toggle as={CustomToggle} icon={null} className="btn btn-light btn-block w-100 d-inline-block form-control" data-id="chainDropdownbox">
+      <Dropdown.Toggle as={CustomToggle} icon={null} className="btn btn-light border btn-block w-100 d-inline-block form-control" data-id="chainDropdownbox">
         {searchTerm.length > 0 ? searchTerm : intl.formatMessage({ id: "contract-verification.searchableChainDropdown", defaultMessage: "Select a chain" })}
       </Dropdown.Toggle>
       <Dropdown.Menu className="w-100 custom-dropdown-items border bg-light">

From d7c1e88e29690a576321f4e8ca77a8bb1f7fdc65 Mon Sep 17 00:00:00 2001
From: Joseph Izang <josephizang@gmail.com>
Date: Tue, 15 Apr 2025 10:38:27 +0100
Subject: [PATCH 5/5] replace components with identical styling of dropdown

---
 .../components/SearchableChainDropdown.tsx    | 94 +++++++++++++++++--
 1 file changed, 84 insertions(+), 10 deletions(-)

diff --git a/apps/contract-verification/src/app/components/SearchableChainDropdown.tsx b/apps/contract-verification/src/app/components/SearchableChainDropdown.tsx
index a5e4618fe45..edc0ae54747 100644
--- a/apps/contract-verification/src/app/components/SearchableChainDropdown.tsx
+++ b/apps/contract-verification/src/app/components/SearchableChainDropdown.tsx
@@ -55,6 +55,36 @@ export const CustomToggle = React.forwardRef(
   )
 )
 
+// 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]
@@ -126,21 +156,65 @@ 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 (
-    <Dropdown>
-      <Dropdown.Toggle as={CustomToggle} icon={null} className="btn btn-light border btn-block w-100 d-inline-block form-control" data-id="chainDropdownbox">
-        {searchTerm.length > 0 ? searchTerm : intl.formatMessage({ id: "contract-verification.searchableChainDropdown", defaultMessage: "Select a chain" })}
-      </Dropdown.Toggle>
-      <Dropdown.Menu className="w-100 custom-dropdown-items border bg-light">
+    <div className="dropdown mb-3" ref={dropdownRef}>
+      {' '}
+      {/* Add ref here */}
+      <label htmlFor={id}>{label}</label>
+      <input
+        type="text"
+        value={searchTerm}
+        onChange={handleInputChange}
+        onClick={openDropdown}
+        data-id="chainDropdownbox"
+        placeholder={intl.formatMessage({ id: "contract-verification.searchableChainDropdown", defaultMessage: "Select a chain" })}
+        className="form-control"
+      />
+      <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) => (
-          <Dropdown.Item key={chain.chainId} onClick={() => handleOptionClick(chain)}
-            className={`${getChainDescriptor(chain).length > 30 ? 'text-truncate text-decoration-none' : 'text-decoration-none'}`}
+          <li
+            key={chain.chainId}
+            onClick={() => handleOptionClick(chain)}
             data-id={chain.chainId}
+            className={`dropdown-item ${selectedChain?.chainId === chain.chainId ? 'active' : ''}`}
+            style={{ cursor: 'pointer', whiteSpace: 'normal' }}
           >
             {getChainDescriptor(chain)}
-          </Dropdown.Item>
+          </li>
         ))}
-      </Dropdown.Menu>
-    </Dropdown>
+      </ul>
+    </div>
   )
 }