formatting and helpers

app/web/src/components/EditableProjecTitle/EditableProjecTitle.tsx

@@ -76,10 +76,12 @@ const EditableProjectTitle = ({
               value={newTitle}
               onChange={onTitleChange}
               ref={inputRef}
-              onBlur={() => setTimeout(() => {
+              onBlur={() =>
+                setTimeout(() => {
                   setInEditMode(false)
                   setNewTitle(projectTitle)
-              }, 300)}
+                }, 300)
+              }
             />
           </span>
           <div className="flex items-center h-full">

app/web/src/components/IdeHeader/IdeHeader.tsx

@@ -95,6 +95,8 @@ const IdeHeader = ({
         {canEdit && !projectTitle && (
           <CaptureButton
             canEdit={canEdit}
+            projectTitle={project?.title}
+            userName={project?.user?.userName}
             shouldUpdateImage={!project?.mainImage}
             TheButton={({ onClick }) => (
               <TopButton

app/web/src/components/LoginModal/LoginModal.tsx

@@ -1,5 +1,5 @@
 import { useState } from 'react'
-import { makeStyles } from '@material-ui/core/styles';
+import { makeStyles } from '@material-ui/core/styles'
 import Dialog from '@material-ui/core/Dialog'
 import Tab from '@material-ui/core/Tab'
 import Tabs from '@material-ui/core/Tabs'

app/web/src/components/ProjectProfile/ProjectProfile.tsx

@@ -208,7 +208,9 @@ const ProjectProfile = ({
                               className="w-full h-32 rounded shadow-inner outline-none resize-none p-3 bg-ch-gray-600 placeholder-ch-gray-500 font-fira-sans"
                               placeholder="Have a question about this model, or a helpful tip about how to improve it? Remember, be nice!"
                               value={comment}
-                              onChange={({ target }) => setComment(target.value)}
+                              onChange={({ target }) =>
+                                setComment(target.value)
+                              }
                             />
                           </div>
                           <Button
@@ -226,7 +228,8 @@ const ProjectProfile = ({
                         </>
                       )}
                       <ul>
-                        {project?.Comment.map(({ text, user, id, createdAt }) => (
+                        {project?.Comment.map(
+                          ({ text, user, id, createdAt }) => (
                             <li key={id} className="mb-5">
                               <div className="flex justify-between">
                                 <Link
@@ -247,7 +250,8 @@ const ProjectProfile = ({
                                 {text}
                               </div>
                             </li>
-                        ))}
+                          )
+                        )}
                       </ul>
                     </>
                   )}

app/web/src/helpers/canvasToBlob.ts

@@ -0,0 +1,35 @@
+export const canvasToBlob = async (
+  threeInstance,
+  { width, height }: { width: number; height: number }
+): Promise<Blob> => {
+  const updateCanvasSize = ({
+    width,
+    height,
+  }: {
+    width: number
+    height: number
+  }) => {
+    threeInstance.camera.aspect = width / height
+    threeInstance.camera.updateProjectionMatrix()
+    threeInstance.gl.setSize(width, height)
+    threeInstance.gl.render(
+      threeInstance.scene,
+      threeInstance.camera,
+      null,
+      false
+    )
+  }
+  const oldSize = threeInstance.size
+  updateCanvasSize({ width, height })
+  const imgBlobPromise: Promise<Blob> = new Promise((resolve, reject) => {
+    threeInstance.gl.domElement.toBlob(
+      (blob) => {
+        resolve(blob)
+      },
+      'image/jpeg',
+      1
+    )
+  })
+  updateCanvasSize(oldSize)
+  return imgBlobPromise
+}