Style tweaks to signed-in user modal in top nav

app/web/src/components/ImageUploader/ImageUploader.js

@@ -11,6 +11,19 @@ import Svg from 'src/components/Svg'
 const CLOUDINARY_UPLOAD_PRESET = 'CadHub_project_images'
 const CLOUDINARY_UPLOAD_URL = 'https://api.cloudinary.com/v1_1/irevdev/upload'
 
+export function ImageFallback({ width = 100, cloudinaryId = 'CadHub/eia1kwru54g2kf02s2xx', className = '' }) {
+  return (
+  <div className="relative overflow-hidden w-full h-full">
+    <CloudinaryImage
+      className={"object-cover w-full h-full shadow overflow-hidden " + className } 
+      cloudName="irevdev"
+      publicId={cloudinaryId}
+      width={width}
+      crop="scale"
+    />
+  </div>)
+}
+
 export default function ImageUploader({
   onImageUpload = () => {},
   imageUrl,
@@ -78,15 +91,7 @@ export default function ImageUploader({
         )}
         {isEditable && <input {...getInputProps()} />}
         {(cloudinaryId || !isEditable) && (
-          <div className="relative overflow-hidden w-full h-full">
-            <CloudinaryImage
-              className="object-cover w-full h-full shadow overflow-hidden"
-              cloudName="irevdev"
-              publicId={cloudinaryId || 'CadHub/eia1kwru54g2kf02s2xx'}
-              width={width}
-              crop="scale"
-            />
-          </div>
+          <ImageFallback cloudinaryId={cloudinaryId} width={width} />
         )}
         {!cloudinaryId && <button className="absolute inset-0"></button>}
         {!cloudinaryId && isEditable && (

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

@@ -36,15 +36,16 @@ const NavPlusButton: React.FC = () => {
         <Svg name="plus" className="text-ch-gray-300" />
       </Popover.Button>
 
-      <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">
+      <Popover.Panel className="absolute w-48 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>
+        <hr className="my-2" />
         <ul className="">
           {menuOptions.map(({ name, sub, ideType, bgClasses, dotClasses }) => (
             <li
               key={name}
               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>
+              <div className={dotClasses + " justify-self-center w-5 h-5 rounded-full"}></div>
               <Link to={routes.draftProject({ cadPackage: ideType })}>
                 <div>{name}</div>
                 <div className="text-xs text-ch-gray-400 font-light">{sub}</div>