dropdown border, script config cards

Author: Aniket-Engg

apps/circuit-compiler/src/app/components/versions.tsx

@@ -7,7 +7,7 @@ export function VersionList ({ currentVersion, versionList, downloadList, setVer
   const versionListKeys = Object.keys(versionList)
   return (
     <Dropdown>
-      <Dropdown.Toggle as={CircomVersionMenuToggle} id="circomVersionList" className="btn btn-light btn-block w-100 d-inline-block border border-dark form-control">
+      <Dropdown.Toggle as={CircomVersionMenuToggle} id="circomVersionList" className="btn btn-light btn-block w-100 d-inline-block border form-select">
         <div style={{ flexGrow: 1, overflow: 'hidden', display:'flex', justifyContent:'left' }}>
           { versionList[currentVersion].name }
         </div>

apps/quick-dapp/src/components/DeployPanel/theme.tsx

@@ -103,7 +103,7 @@ export function ThemeUI() {
       <Dropdown className="w-100">
         <Dropdown.Toggle
           as={CustomToggle}
-          className="btn btn-light btn-block w-100 d-inline-block border border-dark form-control"
+          className="btn btn-light btn-block w-100 d-inline-block border form-select"
           icon={''}
         >
           {theme} - {themeMap[theme].quality}

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

@@ -2358,7 +2358,7 @@ textarea.form-control-lg {
   background-repeat: no-repeat;
   background-position: right 0.75rem center;
   background-size: 16px 12px;
-  border: var(--bs-border-width) solid #222;
+  border: var(--bs-border-width) solid var(--bs-border-color);
   border-radius: var(--bs-border-radius);
   transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
 }
@@ -8887,7 +8887,7 @@ textarea.form-control-lg {
 
 .bg-dark {
   --bs-bg-opacity: 1;
-  background-color: rgba(var(--bs-boby-bg), var(--bs-bg-opacity)) !important;
+  background-color: rgba(var(--bs-body-bg-rgb), var(--bs-bg-opacity)) !important;
 }
 
 .bg-black {

libs/remix-ui/run-tab/src/lib/components/account.tsx

@@ -415,7 +415,7 @@ export function AccountUI(props: AccountProps) {
       </label>
       <div className="udapp_account">
         <Dropdown className="udapp_selectExEnvOptions" data-id="runTabSelectAccount">
-          <Dropdown.Toggle as={CustomToggle} icon={null} id="txorigin" data-id="runTabSelectAccount" className="btn btn-light btn-block w-100 d-inline-block border border-dark form-control">
+          <Dropdown.Toggle as={CustomToggle} icon={null} id="txorigin" data-id="runTabSelectAccount" className="btn btn-light btn-block w-100 d-inline-block border form-select">
             {selectedAccount ? loadedAccounts[selectedAccount] : ''}
           </Dropdown.Toggle>
           <Dropdown.Menu as={CustomMenu} className="w-100 form-select" data-id="custom-dropdown-items">

libs/remix-ui/run-tab/src/lib/components/environment.tsx

@@ -161,7 +161,7 @@ export function EnvironmentUI(props: EnvironmentProps) {
       </label>
       <div className="" data-id={`selected-provider-${currentProvider && currentProvider.name}`}>
         <Dropdown id="selectExEnvOptions" data-id="settingsSelectEnvOptions" className="udapp_selectExEnvOptions">
-          <Dropdown.Toggle as={CustomToggle} id="dropdown-custom-components" className="btn btn-light btn-block w-100 d-inline-block border border-dark form-control" icon={null}>
+          <Dropdown.Toggle as={CustomToggle} id="dropdown-custom-components" className="btn btn-light btn-block w-100 d-inline-block border form-select" icon={null}>
             {/* {isL2(currentProvider && currentProvider.displayName)} */}
             <DropdownLabel label={currentProvider && currentProvider.displayName} bridges={bridges} currentProvider={currentProvider} envLabel={props.envLabel} runTabState={props.udappState} setExecutionEnv={props.setExecutionContext} isL2={isL2} plugin={props.runTabPlugin} />
           </Dropdown.Toggle>

libs/remix-ui/solidity-compiler/src/lib/components/compiler-dropdown.tsx

@@ -27,7 +27,7 @@ export const CompilerDropdown = (props: compilerDropdownProps) => {
   const { customVersions, selectedVersion, defaultVersion, allversions, handleLoadVersion, _shouldBeAdded, onlyDownloaded } = props
   return (
     <Dropdown id="versionSelector" data-id="versionSelector">
-      <Dropdown.Toggle as={CompilerMenuToggle} id="dropdown-custom-components" className="btn btn-light w-100 d-inline-block border border-dark form-select" icon={null}>
+      <Dropdown.Toggle as={CompilerMenuToggle} id="dropdown-custom-components" className="btn btn-light w-100 d-inline-block border form-select" icon={null}>
         <div style={{ flexGrow: 1, overflow: 'hidden', display:'flex', justifyContent:'left' }}>
           <div className="text-truncate">
             {customVersions.map((url, i) => {

libs/remix-ui/workspace/src/lib/remix-ui-workspace.tsx

@@ -998,7 +998,7 @@ export function Workspace() {
       <Dropdown.Toggle
         as={CustomToggle}
         id="dropdown-custom-components"
-        className="btn btn-light btn-block w-100 d-inline-block border border-dark form-control mt-1"
+        className="btn btn-light btn-block w-100 d-inline-block border form-select mt-1"
         icon={selectedWorkspace && selectedWorkspace.isGitRepo && !(currentWorkspace === LOCALHOST) ? 'far fa-code-branch' : null}
       >
         {selectedWorkspace ? selectedWorkspace.name === LOCALHOST ? togglerText : selectedWorkspace.name : currentWorkspace === LOCALHOST ? formatNameForReadonly('localhost') : NO_WORKSPACE}
@@ -1344,7 +1344,7 @@ export function Workspace() {
                   <Dropdown.Toggle
                     as={CustomToggle}
                     id="dropdown-custom-components"
-                    className="btn btn-sm btn-light d-inline-block border border-dark form-control h-100 p-0 ps-2 pe-2 text-dark"
+                    className="btn btn-sm btn-light d-inline-block border form-select h-100 p-0 ps-2 pe-2 text-dark"
                     icon={null}
                   >
                     {global.fs.browser.isRequestingCloning ? <i className="fad fa-spinner fa-spin"></i> : (currentBranch && currentBranch.name) || '-none-'}