From 8b679fd64151f1304d3d4891d3072793b13f180c Mon Sep 17 00:00:00 2001
From: Lo Etheridge <lowisren@gmail.com>
Date: Thu, 21 Mar 2024 09:06:06 -0400
Subject: [PATCH] update contrast on mobile nav

---
 components/MobileNav.jsx | 17 +++++++++--------
 1 file changed, 9 insertions(+), 8 deletions(-)

diff --git a/components/MobileNav.jsx b/components/MobileNav.jsx
index 30bb9a5..9c16837 100644
--- a/components/MobileNav.jsx
+++ b/components/MobileNav.jsx
@@ -8,10 +8,10 @@ export default function MobileNav(props) {
       <div className="lg:hidden">
         <button
           onClick={() => setOpen(!open)}
-          className="navbar-burger flex items-center text-indigo-500 p-3"
+          className="flex items-center p-3 text-indigo-500 navbar-burger"
         >
           <svg
-            className="block h-4 w-4 fill-current"
+            className="block w-4 h-4 fill-current"
             viewBox="0 0 20 20"
             xmlns="http://www.w3.org/2000/svg"
           >
@@ -23,12 +23,12 @@ export default function MobileNav(props) {
       <div className={`${open ? "" : "hidden"} relative z-50`}>
         <div
           onClick={() => setOpen(false)}
-          className="navbar-backdrop fixed inset-0 bg-gray-800 opacity-50"
+          className="fixed inset-0 bg-gray-800 opacity-50 navbar-backdrop"
         ></div>
-        <nav className={`fixed top-0 left-0 z-40 h-screen p-4 overflow-y-auto transition-transform bg-white w-80 dark:bg-gray-800 ${open ? 'translate-x-0': '-translate-x-full'}`}>
+        <nav className={`fixed top-0 left-0 z-40 h-screen p-4 overflow-y-auto transition-transform bg-white w-80 dark:bg-gray-700 ${open ? 'translate-x-0': '-translate-x-full'}`}>
           <button onClick={() => setOpen(false)} className="navbar-close">
             <svg
-              className="h-6 w-6 text-gray-400 cursor-pointer hover:text-gray-500"
+              className="w-6 h-6 text-indigo-400 cursor-pointer hover:text-gray-500"
               xmlns="http://www.w3.org/2000/svg"
               fill="none"
               viewBox="0 0 24 24"
@@ -42,13 +42,14 @@ export default function MobileNav(props) {
               ></path>
             </svg>
           </button>
-          <ul className="mt-10">
-            <li className="my-5"><a href="/">Home</a></li>
+          <ul className="mt-10 text-xl font-extrabold">
+            <li className="my-5"><a className="text-indigo-500"
+            href="/">Home</a></li>
             {props.nav.navLink.map((link) => (
               <li key={link.id} className="my-5">
                 <a
                   href={link.url ? link.url : "/en/" + link.page.url}
-                  className="text-base font-medium text-gray-500 hover:text-gray-900"
+                  className="text-gray-100 text-bold hover:text-indigo-400"
                 >
                   {link.displayText}
                 </a>