From 4e7a5d998334755b1504185700f831f26ff4199b Mon Sep 17 00:00:00 2001
From: Manuel Wedler <manuel@wedler.dev>
Date: Wed, 18 Sep 2024 18:13:47 +0200
Subject: [PATCH] Adapt coloring of checkboxes

---
 .../app/components/ConstructorArguments.tsx   |  6 ++---
 .../src/app/views/VerifyView.tsx              | 22 +++++++++++--------
 2 files changed, 16 insertions(+), 12 deletions(-)

diff --git a/apps/contract-verification/src/app/components/ConstructorArguments.tsx b/apps/contract-verification/src/app/components/ConstructorArguments.tsx
index 34923e0379..e2a4239eaa 100644
--- a/apps/contract-verification/src/app/components/ConstructorArguments.tsx
+++ b/apps/contract-verification/src/app/components/ConstructorArguments.tsx
@@ -99,9 +99,9 @@ export const ConstructorArguments: React.FC<ConstructorArgumentsProps> = ({ abiE
   return (
     <div className="mt-4">
       <label>Constructor Arguments</label>
-      <div className="form-check form-switch">
-        <input className="form-check-input" type="checkbox" id="toggleRawInputSwitch" checked={toggleRawInput} onChange={() => setToggleRawInput(!toggleRawInput)} />
-        <label className="form-check-label" htmlFor="toggleRawInputSwitch">
+      <div className="d-flex py-1 align-items-center custom-control custom-checkbox">
+        <input className="form-check-input custom-control-input" type="checkbox" id="toggleRawInputSwitch" checked={toggleRawInput} onChange={() => setToggleRawInput(!toggleRawInput)} />
+        <label className="m-0 form-check-label custom-control-label" style={{ paddingTop: '2px' }} htmlFor="toggleRawInputSwitch">
           Enter raw ABI-encoded constructor arguments
         </label>
       </div>
diff --git a/apps/contract-verification/src/app/views/VerifyView.tsx b/apps/contract-verification/src/app/views/VerifyView.tsx
index 9a3e2e1fd5..ff76b31a5b 100644
--- a/apps/contract-verification/src/app/views/VerifyView.tsx
+++ b/apps/contract-verification/src/app/views/VerifyView.tsx
@@ -180,11 +180,13 @@ export const VerifyView = () => {
 
       {selectedContract && <ConstructorArguments abiEncodedConstructorArgs={abiEncodedConstructorArgs} setAbiEncodedConstructorArgs={setAbiEncodedConstructorArgs} selectedContract={selectedContract} abiEncodingError={abiEncodingError} setAbiEncodingError={setAbiEncodingError} />}
 
-      <div className="pt-3 form-check form-switch">
-        <input className="form-check-input" type="checkbox" id="has-proxy" checked={!!hasProxy} onChange={(e) => setHasProxy(e.target.checked)} />
-        <label className="form-check-label" htmlFor="has-proxy">
-          The deployed contract is behind a proxy
-        </label>
+      <div className="pt-3">
+        <div className="d-flex py-1 align-items-center custom-control custom-checkbox">
+          <input id="has-proxy" className="form-check-input custom-control-input" type="checkbox" checked={!!hasProxy} onChange={(e) => setHasProxy(e.target.checked)} />
+          <label htmlFor="has-proxy" className="m-0 form-check-label custom-control-label" style={{ paddingTop: '2px' }}>
+            The deployed contract is behind a proxy
+          </label>
+        </div>
         {hasProxy && <ContractAddressInput label="Proxy Address" id="proxy-address" contractAddress={proxyAddress} setContractAddress={setProxyAddress} contractAddressError={proxyAddressError} setContractAddressError={setProxyAddressError} />}
       </div>
 
@@ -194,13 +196,15 @@ export const VerifyView = () => {
           const disabledVerifier = !chainSettings || !validConfiguration(chainSettings, verifierId) || (verifierId === 'Sourcify' && !sourcifySupported)
 
           return (
-            <div key={verifierId} className="pt-2 form-check">
-              <input className="form-check-input" type="checkbox" id={`verifier-${verifierId}`} checked={!!enabledVerifiers[verifierId]} onChange={(e) => handleVerifierCheckboxClick(verifierId, e.target.checked)} disabled={disabledVerifier} />
+            <div key={verifierId} className="pt-2">
+              <div className="d-flex py-1 align-items-center custom-control custom-checkbox">
+                <input className="form-check-input custom-control-input" type="checkbox" id={`verifier-${verifierId}`} checked={!!enabledVerifiers[verifierId]} onChange={(e) => handleVerifierCheckboxClick(verifierId, e.target.checked)} disabled={disabledVerifier} />
 
-              <div className="d-flex flex-column align-items-start">
-                <label htmlFor={`verifier-${verifierId}`} style={{ fontSize: '1rem', lineHeight: '1.5', color: 'var(--text)' }} className={`mb-0 font-weight-bold${!disabledVerifier ? '' : ' text-secondary'}`}>
+                <label htmlFor={`verifier-${verifierId}`} className={`m-0 form-check-label custom-control-label large  font-weight-bold${!disabledVerifier ? '' : ' text-secondary'}`} style={{ fontSize: '1rem', lineHeight: '1.5', color: 'var(--text)' }}>
                   {verifierId}
                 </label>
+              </div>
+              <div className="d-flex flex-column align-items-start pl-4">
                 {!chainSettings ? (
                   ''
                 ) : !validConfiguration(chainSettings, verifierId) ? (