Tweaked styles on login modal, sign up button, and new project popover

app/web/src/components/NavPlusButton/NavPlusButton.tsx

@@ -1,39 +1,53 @@
 import { Link, routes } from '@redwoodjs/router'
 import Svg from 'src/components/Svg/Svg'
 import { Popover } from '@headlessui/react'
-import type { CadPackageType } from 'src/components/CadPackage/CadPackage'
+import CadPackage, {
+  CadPackageType,
+} from 'src/components/CadPackage/CadPackage'
 
 const menuOptions: {
   name: string
   sub: string
+  dotClasses: string
+  bgClasses: string
   ideType: CadPackageType
 }[] = [
   {
     name: 'OpenSCAD',
     sub: 'beta',
+    bgClasses: 'bg-yellow-800',
+    dotClasses: 'bg-yellow-200',
     ideType: 'openscad',
   },
-  { name: 'CadQuery', sub: 'beta', ideType: 'cadquery' },
+  {
+    name: 'CadQuery',
+    sub: 'beta',
+    bgClasses: 'bg-ch-blue-700',
+    dotClasses: 'bg-blue-800',
+    ideType: 'cadquery'
+  },
   // { name: 'JSCAD', sub: 'alpha', ideType: 'jscad' }, // TODO #422, add jscad to db schema when were ready to enable saving of jscad projects
 ]
 
 const NavPlusButton: React.FC = () => {
   return (
     <Popover className="relative outline-none w-full h-full">
-      <Popover.Button className="h-full w-full outline-none hover:bg-ch-gray-550 border rounded-full">
-        <Svg name="plus" className="text-gray-200" />
+      <Popover.Button className="h-full w-full outline-none hover:bg-ch-gray-550 border-ch-gray-400 border-2 rounded-full">
+        <Svg name="plus" className="text-ch-gray-300" />
       </Popover.Button>
 
-      <Popover.Panel className="absolute z-10 right-0">
-        <ul className="bg-gray-200 mt-4 rounded shadow-md overflow-hidden">
-          {menuOptions.map(({ name, sub, ideType }) => (
+      <Popover.Panel className="absolute z-10 right-0 bg-ch-gray-700 mt-4 px-3 py-2 rounded shadow-md overflow-hidden text-ch-gray-300">
+        <p className="text-lg">New Project</p>
+        <ul className="">
+          {menuOptions.map(({ name, sub, ideType, bgClasses, dotClasses }) => (
             <li
               key={name}
-              className="px-4 py-2 hover:bg-gray-400 text-gray-800"
+              className={bgClasses+" px-4 py-1 my-4 bg-opacity-30 hover:bg-opacity-70 grid grid-flow-col-dense items-center gap-2"}
             >
+              <div className={dotClasses + " w-5 h-5 rounded-full"}></div>
               <Link to={routes.draftProject({ cadPackage: ideType })}>
                 <div>{name}</div>
-                <div className="text-xs text-gray-600 font-light">{sub}</div>
+                <div className="text-xs text-ch-gray-400 font-light">{sub}</div>
               </Link>
             </li>
           ))}