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>

app/web/src/layouts/MainLayout/MainLayout.js

@@ -3,7 +3,7 @@ import { Link, routes, navigate } from '@redwoodjs/router'
 import { useAuth } from '@redwoodjs/auth'
 import { Toaster, toast } from '@redwoodjs/web/toast'
 import Tooltip from '@material-ui/core/Tooltip'
-import Popover from '@material-ui/core/Popover'
+import { Popover } from '@headlessui/react'
 import { getActiveClasses } from 'get-active-classes'
 import Footer from 'src/components/Footer'
 import { useLocation } from '@redwoodjs/router'
@@ -13,7 +13,7 @@ import ReactGA from 'react-ga'
 import { isBrowser } from '@redwoodjs/prerender/browserUtils'
 
 import Svg from 'src/components/Svg'
-import ImageUploader from 'src/components/ImageUploader'
+import { ImageFallback } from 'src/components/ImageUploader'
 import useUser from 'src/helpers/hooks/useUser'
 
 let previousSubmission = ''
@@ -131,20 +131,39 @@ const MainLayout = ({ children, shouldRemoveFooterInIde }) => {
               <NavPlusButton />
             </li>
             {isAuthenticated ? (
-              <li
-                className="h-10 w-10 border-2 rounded-full border-indigo-300 text-indigo-200"
-                aria-describedby={popoverId}
-              >
-                <button className="w-full h-full" onClick={togglePopover}>
-                  {!loading && (
-                    <ImageUploader
-                      className="rounded-full object-cover"
-                      aspectRatio={1}
-                      imageUrl={user?.image}
-                      width={80}
-                    />
+              <li className="h-10 w-10">
+                <Popover className="relative outline-none w-full h-full">
+                  <Popover.Button
+                    disabled={!isAuthenticated || !currentUser}
+                    className="h-full w-full outline-none border-ch-gray-400 border-2 rounded-full">
+                    {!loading && (
+                      <ImageFallback
+                        width={80}
+                        className="rounded-full object-cover"
+                        imageUrl={user?.image}
+                      />
+                    )}
+                  </Popover.Button>
+                  { currentUser && (
+                  <Popover.Panel className="w-48 absolute z-10 right-0 bg-ch-gray-700 mt-4 px-3 py-2 rounded shadow-md overflow-hidden text-ch-gray-300">
+                      <Link to={routes.user({ userName: user?.userName })}>
+                        <h3 className="text-lg hover:text-ch-pink-300">
+                          Hello {user?.name}
+                        </h3>
+                      </Link>
+                      <hr className="my-2" />
+                      <Link
+                        className="my-2 mt-4 block hover:text-ch-pink-300"
+                        to={routes.user({ userName: user?.userName })}>
+                        <div>View Your Profile</div>
+                      </Link>
+                      <a href="#" onClick={logOut}
+                        className="text-ch-gray-400 hover:text-ch-pink-300">
+                        Logout
+                      </a>
+                  </Popover.Panel>
                   )}
-                </button>
+                </Popover>
               </li>
             ) : (
               <li>
@@ -158,38 +177,6 @@ const MainLayout = ({ children, shouldRemoveFooterInIde }) => {
               </li>
             )}
           </ul>
-          {isAuthenticated && currentUser && (
-            <Popover
-              id={popoverId}
-              open={isOpen}
-              anchorEl={anchorEl}
-              onClose={closePopover}
-              anchorOrigin={{
-                vertical: 'bottom',
-                horizontal: 'right',
-              }}
-              transformOrigin={{
-                vertical: 'top',
-                horizontal: 'right',
-              }}
-            >
-              <div className="p-4 w-48">
-                <Link to={routes.user({ userName: user?.userName })}>
-                  <h3 className="text-indigo-800" style={{ fontWeight: '500' }}>
-                    Hello {user?.name}
-                  </h3>
-                </Link>
-                <hr />
-                <br />
-                <Link to={routes.user({ userName: user?.userName })}>
-                  <div className="text-indigo-800">Your Profile</div>
-                </Link>
-                <a href="#" className="text-indigo-800" onClick={logOut}>
-                  Logout
-                </a>
-              </div>
-            </Popover>
-          )}
         </nav>
       </header>
       <Toaster timeout={1500} />

app/web/src/pages/AccountRecoveryPage/AccountRecoveryPage.js

@@ -51,10 +51,10 @@ const AccountRecoveryPage = () => {
                 },
               }}
             />
+            <Submit className="col-start-2 mt-4 bg-ch-purple-400 bg-opacity-50 hover:bg-opacity-80 text-ch-gray-300 flex h-10 flex-shrink-0 justify-center items-center px-4 rounded">
+              Send email
+            </Submit>
           </div>
-          <Submit className="mt-4 bg-ch-purple-400 bg-opacity-50 hover:bg-opacity-80 text-ch-gray-300 flex bg-gray-200 h-10 flex-shrink-0 justify-center items-center px-4 rounded">
-            Send email
-          </Submit>
         </Form>
       </section>
     </MainLayout>

app/web/src/pages/UpdatePasswordPage/UpdatePasswordPage.js

@@ -32,14 +32,14 @@ const UpdatePasswordPage = () => {
       <Seo title="Update Password" description="Update Password" lang="en-US" />
 
       <section className="max-w-md mx-auto mt-20">
-        <h2 className="text-xl text-indigo-500 pb-4">Reset Password</h2>
+        <h2 className="text-xl text-ch-gray-300 pb-4">Reset Password</h2>
         <Form onSubmit={onSubmit}>
           <div
             className="grid items-center gap-2"
             style={{ gridTemplateColumns: 'auto 1fr' }}
           >
-            <span className="capitalize text-gray-500 text-sm align-middle my-3">
-              password:
+            <span className="capitalize text-ch-gray-300 text-sm">
+              password
             </span>
             <InputTextForm
               className="text-xl"
@@ -49,8 +49,8 @@ const UpdatePasswordPage = () => {
                 required: true,
               }}
             />
-            <span className="capitalize text-gray-500 text-sm align-middle my-3">
-              confirm:
+            <span className="capitalize text-ch-gray-300 text-sm">
+              confirm
             </span>
             <InputTextForm
               className="text-xl"
@@ -60,10 +60,10 @@ const UpdatePasswordPage = () => {
                 required: true,
               }}
             />
+            <Submit className="col-start-2 mt-4 bg-ch-purple-400 bg-opacity-50 hover:bg-opacity-80 text-ch-gray-300 flex h-10 flex-shrink-0 justify-center items-center px-4 rounded">
+              Update
+            </Submit>
           </div>
-          <Submit className="bg-indigo-200 text-indigo-800 p-2 px-4 shadow hover:shadow-lg mt-4 rounded">
-            Update
-          </Submit>
         </Form>
       </section>
     </MainLayout>