etherscan btns style fix

Author: LianaHus

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

@@ -20,7 +20,8 @@ const HomeIcon: React.FC<IconProps> = ({ from }: IconProps) => {
       to={{
         pathname: "/"
       }}
-      className={({ isActive }) => isActive ? "btn p-0 m-0" : "btn text-dark p-0 m-0"}
+      className={({ isActive }) => isActive ? "border border-secondary shadow-none btn p-1 m-0" : "border-0 shadow-none btn p-1 m-0"}
+      style={ ({ isActive }) => !isActive ? { width: "1.8rem", filter: "contrast(0.5)"} : {width: "1.8rem"}}
       state={ from }
     >
       <CustomTooltip
@@ -41,7 +42,8 @@ const ReceiptsIcon: React.FC<IconProps> = ({ from }: IconProps) => {
       to={{
         pathname: "/receipts"
       }}
-      className={({ isActive }) => isActive ? "btn p-0 m-0 mx-2" : "btn text-dark p-0 m-0 mx-2"}
+      className={({ isActive }) => isActive ? "border border-secondary shadow-none btn p-1 m-0" : "border-0 shadow-none btn p-1 m-0"}
+      style={ ({ isActive }) => !isActive ? { width: "1.8rem", filter: "contrast(0.5)"} : {width: "1.8rem"}}
       state={ from }
     >
       <CustomTooltip
@@ -62,7 +64,8 @@ const SettingsIcon: React.FC<IconProps> = ({ from }: IconProps) => {
       to={{
         pathname: "/settings"
       }}
-      className={({ isActive }) => isActive ? "btn p-0 m-0" : "btn text-dark p-0 m-0"}
+      className={({ isActive }) => isActive ? "border border-secondary shadow-none btn p-1 m-0" : "border-0 shadow-none btn p-1 m-0"}
+      style={ ({ isActive }) => !isActive ? { width: "1.8rem", filter: "contrast(0.5)"} : {width: "1.8rem"}}
       state= {from}
     >
       <CustomTooltip
@@ -85,7 +88,7 @@ export const HeaderWithSettings: React.FC<Props> = ({
       {() => (
         <div className="d-flex justify-content-between">
           <h6 className="d-inline">{title}</h6>
-          <div>
+          <div className="nav">
             <HomeIcon from={from} />
             <ReceiptsIcon from={from} />
             <SettingsIcon from={from} />

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

@@ -119,7 +119,7 @@ export const VerifyView: React.FC<Props> = ({
             errors.contractAddress = "Required"
           }
           if (values.contractAddress.trim() === "" || !values.contractAddress.startsWith('0x') 
-              || values.contractAddress.length !== 42) {
+            || values.contractAddress.length !== 42) {
             errors.contractAddress = "Please enter a valid contract address"
           }
           return errors
@@ -144,7 +144,6 @@ export const VerifyView: React.FC<Props> = ({
                 /> 
               </CustomTooltip> 
             </div>
-
             <div className="form-group">
               <label htmlFor="contractName">Contract Name</label>              
               <Field
@@ -176,7 +175,6 @@ export const VerifyView: React.FC<Props> = ({
                 component="div"
               />
             </div>
-
             <div className={ showConstructorArgs ? 'form-group d-block': 'form-group d-none' } >
               <label>Constructor Arguments</label>
                 {constructorInputs.map((item, index) => {
@@ -208,7 +206,6 @@ export const VerifyView: React.FC<Props> = ({
                 )}
 
             </div>
-
             <div className="form-group">
               <label htmlFor="contractAddress">Contract Address</label>
               <Field
@@ -236,12 +233,11 @@ export const VerifyView: React.FC<Props> = ({
                     handleChange(e)
                     if (e.target.checked) setIsProxyContract(true)
                     else setIsProxyContract(false)
-                }}
+                  }}
                 />
-              <label className="form-check-label custom-control-label" htmlFor="isProxy">It's a proxy contract address</label>
-            </div>
+                <label className="form-check-label custom-control-label" htmlFor="isProxy">It's a proxy contract address</label>
+              </div>
             </div>
-
             <div className={ isProxyContract ? 'form-group d-block': 'form-group d-none' }>
               <label htmlFor="expectedImplAddress">Expected Implementation Address</label>
               <CustomTooltip
@@ -259,7 +255,6 @@ export const VerifyView: React.FC<Props> = ({
               <i style={{ fontSize: 'x-small' }} className={'ml-1 fal fa-info-circle align-self-center'} aria-hidden="true"></i>
               <label> &nbsp;Make sure contract is already verified on Etherscan</label>
             </div>
-
             <SubmitButton dataId="verify-contract" text="Verify" 
               isSubmitting={isSubmitting} 
               disable={ !contracts.length || 
@@ -287,19 +282,15 @@ export const VerifyView: React.FC<Props> = ({
                   Generate Verification Scripts
                 </button>
               </CustomTooltip>
-          </form>
-          )
-        }
-        }
+          </form>)
+        }}
       </Formik>
-
       <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 }}
       />
-
       {/* <div style={{ display: "block", textAlign: "center", marginTop: "1em" }}>
         <Link to="/receipts">View Receipts</Link>
       </div> */}