style fixes and active color for nav btns

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

@@ -16,21 +16,22 @@ interface IconProps {
 
 const HomeIcon: React.FC<IconProps> = ({ from }: IconProps) => {
   return (
-      <NavLink
+    <NavLink
-        data-id="home"
+      data-id="home"
-        to={{
+      to={{
-          pathname: "/"
+        pathname: "/"
-        }}
+      }}
-        state={ from }
+      className={({ isActive }) => isActive ? "btn p-0 m-0" : "btn text-dark p-0 m-0"}
+      state={ from }
+    >
+      <CustomTooltip
+        tooltipText='Home'
+        tooltipId='etherscan-nav-home'
+        placement='bottom'
       >
-        <CustomTooltip
+        <i className="fas fa-home"></i>
-          tooltipText='Home'
+      </CustomTooltip>
-          tooltipId='etherscan-nav-home'
+    </NavLink>
-          placement='bottom'
-        >
-          <i className="fas fa-home"></i>
-        </CustomTooltip>
-      </NavLink>
   )
 }
 
@@ -41,8 +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"}
         state={ from }
-        className="mx-2"
       >
         <CustomTooltip
           tooltipText='Receipts'
@@ -62,6 +63,7 @@ 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"}
       state= {from}
     >
       <CustomTooltip
@@ -83,9 +85,9 @@ export const HeaderWithSettings: React.FC<Props> = ({
   return (
     <AppContext.Consumer>
       {() => (
-        <div>
+        <div className="d-flex justify-content-between">
           <h6 className="d-inline">{title}</h6>
-          <div style={{ float: "right" }}>
+          <div>
             <HomeIcon from={from} />
             <ReceiptsIcon from={from} />
             <SettingsIcon from={from} />

apps/etherscan/src/app/routes.tsx

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

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

@@ -8,7 +8,6 @@ import { Receipt } from "../types"
 import { VerifyView } from "./VerifyView"
 
 export const HomeView: React.FC = () => {
-  // const [hasError, setHasError] = useState(false)
   return (
     <AppContext.Consumer>
       {({ apiKey, clientInstance, setReceipts, receipts, contracts }) => {

libs/remix-ui/plugin-manager/src/lib/components/rootView.tsx

@@ -36,7 +36,7 @@ function RootView ({ pluginComponent, children }: RootViewProps) {
   return (
     <Fragment>
       <div id="pluginManager" data-id="pluginManagerComponentPluginManager">
-        <header className="form-group remixui_pluginSearch plugins-header py-3 px-4 border-bottom" data-id="pluginManagerComponentPluginManagerHeader">
+        <header className="form-group remixui_pluginSearch plugins-header pt-3 pb-0 px-4 border-bottom" data-id="pluginManagerComponentPluginManagerHeader">
           <input
             type="text"
             onChange={(event) => {