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={() =>
-                setInEditMode(false)
+                setTimeout(() => {
-                setNewTitle(projectTitle)
+                  setInEditMode(false)
-              }, 300)}
+                  setNewTitle(projectTitle)
+                }, 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,28 +228,30 @@ const ProjectProfile = ({
                         </>
                       )}
                       <ul>
-                        {project?.Comment.map(({ text, user, id, createdAt }) => (
+                        {project?.Comment.map(
-                          <li key={id} className="mb-5">
+                          ({ text, user, id, createdAt }) => (
-                            <div className="flex justify-between">
+                            <li key={id} className="mb-5">
-                              <Link
+                              <div className="flex justify-between">
-                                className="flex items-center"
+                                <Link
-                                to={routes.user({ userName: user?.userName })}
+                                  className="flex items-center"
-                              >
+                                  to={routes.user({ userName: user?.userName })}
-                                <Gravatar
+                                >
-                                  image={user?.image}
+                                  <Gravatar
-                                  className="w-10 h-10 mr-4"
+                                    image={user?.image}
-                                />
+                                    className="w-10 h-10 mr-4"
-                                {user?.userName}
+                                  />
-                              </Link>
+                                  {user?.userName}
-                              <div className="font-fira-code text-ch-blue-600 flex items-center">
+                                </Link>
-                                {new Date(createdAt).toDateString()}
+                                <div className="font-fira-code text-ch-blue-600 flex items-center">
+                                  {new Date(createdAt).toDateString()}
+                                </div>
                               </div>
-                            </div>
+                              <div className="ml-5 border-l-2 pl-5 my-3 border-ch-gray-300 text-ch-gray-300">
-                            <div className="ml-5 border-l-2 pl-5 my-3 border-ch-gray-300 text-ch-gray-300">
+                                {text}
-                              {text}
+                              </div>
-                            </div>
+                            </li>
-                          </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
+}