From af60adc381818444e684713f6be47451d1936f92 Mon Sep 17 00:00:00 2001
From: lianahus <liana@ethereum.org>
Date: Wed, 21 Jun 2023 20:12:57 +0200
Subject: [PATCH] style fixes and active color for nav btns

---
 .../src/app/components/HeaderWithSettings.tsx | 36 ++++++++++---------
 apps/etherscan/src/app/routes.tsx             | 27 +++++++++-----
 apps/etherscan/src/app/views/HomeView.tsx     |  1 -
 .../src/lib/components/rootView.tsx           |  2 +-
 4 files changed, 38 insertions(+), 28 deletions(-)

diff --git a/apps/etherscan/src/app/components/HeaderWithSettings.tsx b/apps/etherscan/src/app/components/HeaderWithSettings.tsx
index ece3c828aa..738a268ef5 100644
--- a/apps/etherscan/src/app/components/HeaderWithSettings.tsx
+++ b/apps/etherscan/src/app/components/HeaderWithSettings.tsx
@@ -16,21 +16,22 @@ interface IconProps {
 
 const HomeIcon: React.FC<IconProps> = ({ from }: IconProps) => {
   return (
-      <NavLink
-        data-id="home"
-        to={{
-          pathname: "/"
-        }}
-        state={ from }
+    <NavLink
+      data-id="home"
+      to={{
+        pathname: "/"
+      }}
+      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
-          tooltipText='Home'
-          tooltipId='etherscan-nav-home'
-          placement='bottom'
-        >
-          <i className="fas fa-home"></i>
-        </CustomTooltip>
-      </NavLink>
+        <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} />
diff --git a/apps/etherscan/src/app/routes.tsx b/apps/etherscan/src/app/routes.tsx
index 406d57421e..dd705a3071 100644
--- a/apps/etherscan/src/app/routes.tsx
+++ b/apps/etherscan/src/app/routes.tsx
@@ -31,21 +31,30 @@ export const DisplayRoutes = () => (
     <Routes>    
       <Route
         path="/"
-        element={<DefaultLayout from="/" title="Verify Smart Contracts">
-                  <HomeView />
-                </DefaultLayout>} />
+        element={
+          <DefaultLayout from="/" title="Verify Smart Contracts">
+            <HomeView />
+          </DefaultLayout>
+        }
+      />
       <Route path="/error"
       element={<ErrorView />} />
       <Route
         path="/receipts"
-        element={<DefaultLayout from="/receipts" title="Check Receipt GUID Status">
-                  <ReceiptsView />
-                </DefaultLayout>} />
+        element={
+          <DefaultLayout from="/receipts" title="Check Receipt GUID Status">
+            <ReceiptsView />
+          </DefaultLayout>
+        }
+      />
       <Route
         path="/settings"
-        element={<DefaultLayout from="/settings" title="Set Explorer API Key">
-                  <CaptureKeyView />
-                </DefaultLayout>} />
+        element={
+          <DefaultLayout from="/settings" title="Set Explorer API Key">
+            <CaptureKeyView />
+          </DefaultLayout>
+        }
+      />
     </Routes>
   </Router>
 )
diff --git a/apps/etherscan/src/app/views/HomeView.tsx b/apps/etherscan/src/app/views/HomeView.tsx
index 1379ff480d..c8aef42e09 100644
--- a/apps/etherscan/src/app/views/HomeView.tsx
+++ b/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 }) => {
diff --git a/libs/remix-ui/plugin-manager/src/lib/components/rootView.tsx b/libs/remix-ui/plugin-manager/src/lib/components/rootView.tsx
index 545559ef0c..95fdf63c3d 100644
--- a/libs/remix-ui/plugin-manager/src/lib/components/rootView.tsx
+++ b/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) => {