add better contrast to header

Author: Aaron Cohen

courseup/src/app/Content.tsx

@@ -10,7 +10,7 @@ export default function Content({ children }: any): React.ReactNode {
   return (
     <>
       <Header blurBackground={blurBackground} setBlurBackground={setBlurBackground} />
-      <div className={classNames('pointer-events-none transition-all', { 'blur-sm': blurBackground })}>{children}</div>
+      <div className={classNames('pointer-events-none transition-all', { 'blur-md': blurBackground })}>{children}</div>
     </>
   );
 }

courseup/src/components/common/header/components/MobileNavbar/MobileNavbar.tsx

@@ -12,8 +12,6 @@ export function MobileNavbar({ blurBackground, setBlurBackground }: any): React.
   const unblurListenerAdded = useRef(false);
 
   const onClick = (): void => {
-    // TODO: also, the outline of the menu still isn't really that visible (that was the point of adding blur)
-    // TODO: need to find some way to make it look a little bit better and add some contrast
     const unBlurBackground = () => {
       if (!blurBackground) {
         if (!menuOverrride.current) {
@@ -38,10 +36,12 @@ export function MobileNavbar({ blurBackground, setBlurBackground }: any): React.
       <ul
         tabIndex={0}
         className={classNames(
-          'menu dropdown-content rounded-md bg-base-100 p-0 shadow w-72',
+          'menu dropdown-content rounded-md bg-base-300 p-0 shadow w-72',
           'px-4 py-4 mt-4',
           'z-10',
-          { hidden: !blurBackground }
+          {
+            hidden: !blurBackground,
+          }
         )}
         onClick={() => (menuOverrride.current = true)}
       >

courseup/src/components/common/header/containers/HeaderContainer.tsx

@@ -5,7 +5,7 @@ import MobileNavbar from '../components/MobileNavbar';
 
 export function HeaderContainer({ blurBackground, setBlurBackground }: any) {
   return (
-    <div className="navbar flex items-center bg-base-100 shadow-md px-2 md:px-4 lg:px-5">
+    <div className="navbar flex items-center bg-base-300 shadow-md px-2 md:px-4 lg:px-5">
       <div className="navbar-start">
         <MobileNavbar blurBackground={blurBackground} setBlurBackground={setBlurBackground} />
         <a href="/" className="text-xl font-bold">