From 8b124483b489e8e75f1e5ce31b4ba72c6511dd2f Mon Sep 17 00:00:00 2001
From: lianahus <liana@ethereum.org>
Date: Tue, 22 Oct 2024 14:51:02 +0200
Subject: [PATCH] navbar colors for dark theme

---
 apps/contract-verification/src/app/App.css                | 2 +-
 apps/contract-verification/src/app/components/NavMenu.tsx | 6 +++---
 apps/contract-verification/src/app/layouts/Default.tsx    | 2 +-
 3 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/apps/contract-verification/src/app/App.css b/apps/contract-verification/src/app/App.css
index b7df871af4..e036149047 100644
--- a/apps/contract-verification/src/app/App.css
+++ b/apps/contract-verification/src/app/App.css
@@ -7,7 +7,7 @@ body {
 }
 
 a:focus {
-  background-color: transparent !important;
+  background-color: var(bg-light) !important;
 }
 
 .fa-arrow-up-right-from-square::before { content: "\f08e"; }
diff --git a/apps/contract-verification/src/app/components/NavMenu.tsx b/apps/contract-verification/src/app/components/NavMenu.tsx
index 0c88fc86a2..914e0f917a 100644
--- a/apps/contract-verification/src/app/components/NavMenu.tsx
+++ b/apps/contract-verification/src/app/components/NavMenu.tsx
@@ -11,9 +11,9 @@ const NavItem: React.FC<NavItemProps> = ({ to, icon, title }) => {
   return (
     <NavLink
       to={to}
-      className={({ isActive }) => 'text-decoration-none d-flex flex-column justify-content-center py-2 small ' + (isActive ? 'bg-transparent' : 'bg-dark')}
+      className={({ isActive }) => 'text-decoration-none d-flex px-1 flex-column justify-content-center small ' + (isActive ? "bg-light" : "bg-transparent")}
     >
-      <span>
+      <span className=''>
         <span>{icon}</span>
         <span className="ml-2">{title}</span>
       </span>
@@ -23,7 +23,7 @@ const NavItem: React.FC<NavItemProps> = ({ to, icon, title }) => {
 
 export const NavMenu = () => {
   return (
-    <nav className="d-flex flex-row justify-content-between w-100">
+    <nav className="d-flex medium flex-row w-100" style={{backgroundColor: 'var(--body-bg)!important'}}>
       <NavItem to="/" icon={<i className="fas fa-home"></i>} title="Verify" />
       <NavItem to="/receipts" icon={<i className="fas fa-receipt"></i>} title="Receipts" />
       <NavItem to="/lookup" icon={<i className="fas fa-search"></i>} title="Lookup" />
diff --git a/apps/contract-verification/src/app/layouts/Default.tsx b/apps/contract-verification/src/app/layouts/Default.tsx
index 2f50c748a0..4052b9a76b 100644
--- a/apps/contract-verification/src/app/layouts/Default.tsx
+++ b/apps/contract-verification/src/app/layouts/Default.tsx
@@ -12,7 +12,7 @@ export const DefaultLayout = ({ children, title, description }: PropsWithChildre
   return (
     <div className="d-flex flex-column h-100">
       <NavMenu />
-      <div className="py-4 px-3 flex-grow-1" style={{ overflowY: 'auto' }}>
+      <div className="py-4 px-3 flex-grow-1 bg-light" style={{ overflowY: 'auto' }}>
         <div>
           <p className="text-center" style={{ fontSize: '0.8rem' }}>
             {description}