dropdown font

Author: Aniket-Engg

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

@@ -8,7 +8,7 @@ export function VersionList ({ currentVersion, versionList, downloadList, setVer
   return (
     <Dropdown>
       <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' }}>
+        <div className="font-sm" style={{ flexGrow: 1, overflow: 'hidden', display:'flex', justifyContent:'left' }}>
           { versionList[currentVersion].name }
         </div>
       </Dropdown.Toggle>

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

@@ -41,7 +41,7 @@ export const CustomToggle = React.forwardRef(
       className={className.replace('dropdown-toggle', '')}
     >
       <div className="d-flex">
-        <div className="me-auto text-nowrap text-truncate overflow-hidden" data-id={`dropdown-content`}>{children}</div>
+        <div className="me-auto text-nowrap text-truncate overflow-hidden font-sm" data-id={`dropdown-content`}>{children}</div>
         {icon && (
           <div className="pe-1">
             <i className={`${icon} pe-1`}></i>

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

@@ -249,6 +249,10 @@ body {
   color: var(--custom-ai-color) !important;
 }
 
+.font-sm {
+  font-size: 0.875em;
+}
+
 hr {
   margin: 1rem 0;
   color: inherit;
@@ -2355,7 +2359,7 @@ textarea.form-control-lg {
   display: block;
   width: 100%;
   padding: 0.375rem 2.25rem 0.375rem 0.75rem;
-  font-size: 1rem;
+  font-size: .875rem;
   font-weight: 400;
   line-height: 1.5;
   color: #fff;
@@ -3474,7 +3478,7 @@ textarea.form-control-lg {
   --bs-dropdown-padding-x: 0;
   --bs-dropdown-padding-y: 0.5rem;
   --bs-dropdown-spacer: 0.125rem;
-  --bs-dropdown-font-size: 1rem;
+  --bs-dropdown-font-size: .875rem;
   --bs-dropdown-color: var(--bs-body-color);
   --bs-dropdown-bg: var(--custom-onsurface-layer-1);
   --bs-dropdown-border-color: #444;

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

@@ -234,6 +234,10 @@ body {
   color: var(--custom-ai-color) !important;
 }
 
+.font-sm {
+  font-size: 0.875em;
+}
+
 hr {
   margin: 1rem 0;
   color: inherit;
@@ -2338,7 +2342,7 @@ textarea.form-control-lg {
   display: block;
   width: 100%;
   padding: 0.375rem 2.25rem 0.375rem 0.75rem;
-  font-size: 1rem;
+  font-size: .875rem;
   font-weight: 400;
   line-height: 1.5;
   color: var(--bs-body-color);
@@ -3455,7 +3459,7 @@ textarea.form-control-lg {
   --bs-dropdown-padding-x: 0;
   --bs-dropdown-padding-y: 0.5rem;
   --bs-dropdown-spacer: 0.125rem;
-  --bs-dropdown-font-size: 1rem;
+  --bs-dropdown-font-size: .875rem;
   --bs-dropdown-color: var(--bs-body-color);
   --bs-dropdown-bg: var(--bs-body-bg);
   --bs-dropdown-border-color: #ced4da;

libs/remix-ui/helper/src/lib/components/custom-dropdown.tsx

@@ -29,7 +29,7 @@ export const CustomToggle = React.forwardRef(
       className={className.replace('dropdown-toggle', '')}
     >
       <div className="d-flex align-items-center">
-        <div className="me-auto text-nowrap text-truncate overflow-hidden" data-id={`dropdown-content`}>{children}</div>
+        <div className="me-auto text-nowrap text-truncate overflow-hidden font-sm" data-id={`dropdown-content`}>{children}</div>
         {icon && (
           <div className="pe-1">
             <i className={`${icon} pe-1`}></i>

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

@@ -29,7 +29,7 @@ export const CompilerDropdown = (props: compilerDropdownProps) => {
     <Dropdown id="versionSelector" data-id="versionSelector">
       <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">
+          <div className="text-truncate font-sm">
             {customVersions.map((url, i) => {
               if (selectedVersion === url) return (<span data-id="selectedVersion" key={i}>custom</span>)
             })}