Fix avatar and optimise images somewhat

web/src/components/ImageUploader/ImageUploader.js

@@ -11,7 +11,14 @@ import Svg from 'src/components/Svg/Svg.js'
 const CLOUDINARY_UPLOAD_PRESET = "CadHub_project_images";
 const CLOUDINARY_UPLOAD_URL = "https://api.cloudinary.com/v1_1/irevdev/upload";
 
-export default function ImageUploader({ onImageUpload, imageUrl, aspectRatio, className, isEditable }) {
+export default function ImageUploader({
+    onImageUpload,
+    imageUrl,
+    aspectRatio,
+    className,
+    isEditable,
+    width=600
+  }) {
   const [isModalOpen, setIsModalOpen] = useState(false)
   const [file, setFile] = useState()
   const [cloudinaryId, setCloudinaryId] = useState(imageUrl)
@@ -61,7 +68,7 @@ export default function ImageUploader({ onImageUpload, imageUrl, aspectRatio, cl
             className="object-cover w-full h-full rounded shadow overflow-hidden"
             cloudName="irevdev"
             publicId={cloudinaryId || 'CadHub/eia1kwru54g2kf02s2xx'}
-            width="600"
+            width={width}
             crop="scale"
           />
         </div>}

web/src/components/PartProfile/PartProfile.js

@@ -46,6 +46,7 @@ const PartProfile = ({userPart, isEditable, onSave, loading, error}) => {
             onImageUpload={() => {}}
             aspectRatio={1}
             imageUrl={userPart.image === 'abc' ? '': userPart.image}
+            width={300}
           />
           <h4 className="text-indigo-800 text-xl underline text-right py-4">{userPart?.name}</h4>
           <div className="h-px bg-indigo-200 mb-4" />
@@ -92,6 +93,7 @@ const PartProfile = ({userPart, isEditable, onSave, loading, error}) => {
             aspectRatio={16/9}
             isEditable={isEditable}
             imageUrl={input?.mainImage}
+            width={1010}
           />}
           <div name="description" className="markdown-overrides rounded-lg shadow-md bg-white p-12 my-8 min-h-md">
             <Editor

web/src/components/UserProfile/UserProfile.js

@@ -37,6 +37,7 @@ const UserProfile = ({user, isEditable, loading, onSave, error}) => {
               aspectRatio={1}
               isEditable={isEditable}
               imageUrl={user.image === 'abc' ? '': user.image}
+              width={300}
             />
           </div>
           <div className="ml-6 flex flex-col justify-between">

web/src/layouts/MainLayout/MainLayout.js

@@ -2,13 +2,25 @@ import { Link, routes } from '@redwoodjs/router'
 import { useAuth } from '@redwoodjs/auth'
 import { Flash } from '@redwoodjs/web'
 import Tooltip from '@material-ui/core/Tooltip';
+import { useQuery } from '@redwoodjs/web'
+
+export const QUERY = gql`
+  query FIND_USER_BY_ID($id: String!) {
+    user: user(id: $id) {
+      id
+      image
+    }
+  }
+`
 
 import avatar from 'src/assets/harold.jpg'
 import Svg from 'src/components/Svg'
+import ImageUploader from 'src/components/ImageUploader'
 import logo from 'src/layouts/MainLayout/Logo_2.jpg'
 
 const MainLayout = ({ children }) => {
-  const { logIn, logOut, isAuthenticated } = useAuth()
+  const { logIn, logOut, isAuthenticated, currentUser } = useAuth()
+  const {data, loading} = useQuery(QUERY, {variables: {id: currentUser?.sub}})
   return (
     <>
       <header>
@@ -34,14 +46,20 @@ const MainLayout = ({ children }) => {
           <ul className="flex items-center">
             <li className="mr-8 h-10 w-10 rounded-full border-2 border-indigo-300 flex items-center justify-center">
               {/* <Link to={routes.newPart()}> */}
-                <Svg name="plus" className="text-indigo-300" />
+                <Svg name="plus" className="text-indigo-300 w-full h-full" />
               {/* </Link> */}
             </li>
             {
               isAuthenticated ?
               <li className="h-10 w-10 border-2 rounded-full border-indigo-300 text-indigo-200">
                 <a href="#" onClick={logOut}>
-                  <img src={avatar} className="rounded-full object-cover" />
+                  {!loading && <ImageUploader
+                    className="rounded-full object-cover"
+                    onImageUpload={() => {}}
+                    aspectRatio={1}
+                    imageUrl={data?.user?.image === 'abc' ? '': data?.user?.image}
+                    width={80}
+                  />}
                 </a>
               </li>:
               <li>