styles -> bootstrap classes

apps/etherscan/src/app/components/SubmitButton.tsx

@@ -15,33 +15,34 @@ export const SubmitButton: React.FC<Props> = ({
   disable = true
 }) => {
   return (
-    <CustomTooltip
-      tooltipText={disable ? "Fill the fields with valid values" : "Click to proceed"}
-      tooltipId='etherscan-submit-button'
-      placement='bottom'
-    >
-      <div>
-        <button
-          data-id={dataId}
-          style={{ padding: "0.25rem 0.4rem", marginRight: "0.5em" }}
-          type="submit"
-          className="btn btn-primary btn-block text-decoration-none"
-          disabled={disable}
+    <div>
+      <button
+        data-id={dataId}
+        type="submit"
+        className="btn btn-primary btn-block p-1 text-decoration-none"
+        disabled={disable}
+      >
+        <CustomTooltip
+          tooltipText={disable ? "Fill the fields with valid values" : "Click to proceed"}
+          tooltipId={'etherscan-submit-button-'+ dataId}
+          tooltipTextClasses="border bg-light text-dark p-1 pr-3"
+          placement='bottom'
         >
-          {!isSubmitting && text}
-          {isSubmitting && (
-            <div>
-              <span
-                className="spinner-border spinner-border-sm"
-                role="status"
-                aria-hidden="true"
-                style={{ marginRight: "0.3em" }}
-              />
-              Verifying... Please wait
-            </div>
-          )}
-        </button>
-      </div>
-    </CustomTooltip>
+          <div>
+            {!isSubmitting && text}
+            {isSubmitting && (
+              <div>
+                <span
+                  className="spinner-border spinner-border-sm mr-1"
+                  role="status"
+                  aria-hidden="true"
+                />
+                Verifying... Please wait
+              </div>
+            )}
+          </div>
+        </CustomTooltip>
+      </button>
+    </div>
   )
 }

apps/etherscan/src/app/views/CaptureKeyView.tsx

@@ -37,7 +37,7 @@ export const CaptureKeyView: React.FC = () => {
         >
           {({ errors, touched, handleSubmit }) => (
             <form onSubmit={handleSubmit}>
-              <div className="form-group" style={{ marginBottom: "0.5rem" }}>
+              <div className="form-group mb-2">
                 <label htmlFor="apikey">API Key</label>
                 <Field
                   className={

apps/etherscan/src/app/views/ErrorView.tsx

@@ -2,25 +2,18 @@ import React from "react"
 
 export const ErrorView: React.FC = () => {
   return (
-    <div
-      style={{
-        width: "100%",
-        display: "flex",
-        flexDirection: "column",
-        alignItems: "center",
-      }}
-    >
+    <div className="d-flex w-100 flex-column align-items-center">
       <img
-        style={{ paddingBottom: "2em" }}
+        className="pb-4"
         width="250"
         src="https://res.cloudinary.com/key-solutions/image/upload/v1580400635/solid/error-png.png"
         alt="Error page"
       />
-      <h5>Sorry, something unexpected happened. </h5>
+      <h5>Sorry, something unexpected happened.</h5>
       <h5>
         Please raise an issue:{" "}
         <a
-          style={{ color: "red" }}
+          className="text-danger"
           href="https://github.com/ethereum/remix-project/issues"
         >
           Here

apps/etherscan/src/app/views/ReceiptsView.tsx

@@ -92,10 +92,7 @@ export const ReceiptsView: React.FC = () => {
             >
               {({ errors, touched, handleSubmit, handleChange }) => (
                 <form onSubmit={handleSubmit}>
-                  <div
-                    className="form-group"
-                    style={{ marginBottom: "0.5rem" }}
-                  >
+                  <div className="form-group mb-2">
                     <label htmlFor="receiptGuid">Receipt GUID</label>
                     <Field
                       className={
@@ -114,31 +111,26 @@ export const ReceiptsView: React.FC = () => {
                   </div>
 
                   <div className="d-flex mb-2 custom-control custom-checkbox">
-                  <Field
-                    className="custom-control-input"
-                    type="checkbox"
-                    name="isProxyReceipt"
-                    id="isProxyReceipt"
-                    onChange={async (e) => {
-                      handleChange(e)
-                      if (e.target.checked) setIsProxyContractReceipt(true)
-                      else setIsProxyContractReceipt(false)
-                  }}
-                  />
-                  <label className="form-check-label custom-control-label" htmlFor="isProxyReceipt">It's a proxy contract GUID</label>
-                </div>
+                    <Field
+                      className="custom-control-input"
+                      type="checkbox"
+                      name="isProxyReceipt"
+                      id="isProxyReceipt"
+                      onChange={async (e) => {
+                        handleChange(e)
+                        if (e.target.checked) setIsProxyContractReceipt(true)
+                        else setIsProxyContractReceipt(false)
+                    }}
+                    />
+                    <label className="form-check-label custom-control-label" htmlFor="isProxyReceipt">It's a proxy contract GUID</label>
+                  </div>
                   <SubmitButton text="Check" disable = {!touched.receiptGuid || (touched.receiptGuid && errors.receiptGuid) ? true : false} />
                 </form>
               )}
             </Formik>
 
             <div
-              style={{
-                marginTop: "2em",
-                fontSize: "0.8em",
-                textAlign: "center",
-                color: results['succeed'] ? "green" : "red"
-              }}
+              className={results['succeed'] ? "text-success mt-3 text-center" : "text-danger mt-3 text-center"}
               dangerouslySetInnerHTML={{ __html: results.message ? results.message : '' }}
             />
 
@@ -148,7 +140,7 @@ export const ReceiptsView: React.FC = () => {
               tooltipId='etherscan-clear-receipts'
               placement='bottom'
             >
-              <Button onClick={() => { setReceipts([]) }} >Clear</Button>
+              <Button className="btn-sm" onClick={() => { setReceipts([]) }} >Clear</Button>
             </CustomTooltip>
           </div>
         )
@@ -160,9 +152,9 @@ export const ReceiptsView: React.FC = () => {
 
 const ReceiptsTable: React.FC<{ receipts: Receipt[] }> = ({ receipts }) => {
   return (
-    <div className="table-responsive" style={{ fontSize: "0.8em" }}>
+    <div className="table-responsive">
       <h6>Receipts</h6>
-      <table className="table table-sm">
+      <table className="table h6 table-sm">
         <thead>
           <tr>
             <th scope="col">Status</th>

apps/etherscan/src/app/views/VerifyView.tsx

@@ -260,8 +260,7 @@ export const VerifyView: React.FC<Props> = ({
             >
               <button
                 type="button"
-                style={{ padding: "0.25rem 0.4rem", marginRight: "0.5em", marginBottom: "0.5em"}}
-                className="btn btn-secondary btn-block"
+                className="mr-2 mb-2 py-1 px-2 btn btn-secondary btn-block"
                 onClick={async () => {
                   etherscanScripts(client)
                 }}
@@ -275,8 +274,10 @@ export const VerifyView: React.FC<Props> = ({
         }
       </Formik>
 
-      <div data-id="verify-result"
-        style={{ marginTop: "2em", fontSize: "0.8em", textAlign: "center", color: verificationResult.current['succeed'] ? "green" : "red" }}
+      <div
+        data-id="verify-result"
+        className={verificationResult.current['succeed'] ? "text-success mt-4 text-center" : "text-danger mt-4 text-center"}
+        style={{fontSize: "0.8em"}}
         dangerouslySetInnerHTML={{ __html: results }}
       />