align header with icons

apps/etherscan/src/app/App.css

@@ -3,5 +3,5 @@ body {
 }
 
 #root {
-  padding: 4px 14px;
+  padding: 8px 14px;
 }

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

@@ -145,7 +145,7 @@ export const HeaderWithSettings: React.FC<Props> = ({
     <AppContext.Consumer>
       {({ themeType }) => (
         <div>
-          <h6>{title}</h6>
+          <h6 className="d-inline">{title}</h6>
           <div style={{ float: "right" }}>
             <HomeIcon from={from} themeType={themeType} />
             <ReceiptsIcon from={from} themeType={themeType} />

apps/etherscan/src/app/layouts/Default.tsx

@@ -4,15 +4,17 @@ import { HeaderWithSettings } from "../components"
 
 interface Props {
   from: string
+  title?: string
 }
 
 export const DefaultLayout: React.FC<PropsWithChildren<Props>> = ({
   children,
   from,
+  title
 }) => {
   return (
     <div>
-      <HeaderWithSettings from={from} />
+      <HeaderWithSettings from={from} title={title} />
       {children}
     </div>
   )

apps/etherscan/src/app/routes.tsx

@@ -31,19 +31,19 @@ export const DisplayRoutes = () => (
     <Routes>    
       <Route
         path="/"
-        element={<DefaultLayout from="/">
+        element={<DefaultLayout from="/" title="Verify Smart Contracts">
                   <HomeView />
                 </DefaultLayout>} />
       <Route path="/error"
       element={<ErrorView />} />
       <Route
         path="/receipts"
-        element={<DefaultLayout from="/receipts">
+        element={<DefaultLayout from="/receipts" title="Check Receipt GUID Status">
                   <ReceiptsView />
                 </DefaultLayout>} />
       <Route
         path="/settings"
-        element={<DefaultLayout from="/settings">
+        element={<DefaultLayout from="/settings" title="Set Etherscan API Key">
                   <CaptureKeyView />
                 </DefaultLayout>} />
     </Routes>

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

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

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

@@ -67,7 +67,6 @@ export const ReceiptsView: React.FC = () => {
                     className="form-group"
                     style={{ marginBottom: "0.5rem" }}
                   >
-                    <h6>Check Receipt GUID Status</h6>
                     <label htmlFor="receiptGuid">Receipt GUID</label>
                     <Field
                       className={
@@ -84,7 +83,6 @@ export const ReceiptsView: React.FC = () => {
                       component="div"
                     />
                   </div>
-
                   <SubmitButton text="Check" />
                 </form>
               )}

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

@@ -89,7 +89,6 @@ export const VerifyView: React.FC<Props> = ({
             })
           }
           return (<form onSubmit={handleSubmit}>
-            <h6>Verify Smart Contracts</h6>
             <div className="form-group">
               <label htmlFor="network">Selected Network</label> 
               <Field