Update popup layout

app/web/src/components/CaptureButton/CaptureButton.tsx

@@ -98,16 +98,6 @@ const CaptureButton = ({
     }
   }
 
-  const handleDownload = (url) => {
-    const aTag = document.createElement('a')
-    document.body.appendChild(aTag)
-    aTag.href = url
-    aTag.style.display = 'none'
-    aTag.download = `${project?.title}-${new Date().toISOString()}.jpg`
-    aTag.click()
-    document.body.removeChild(aTag)
-  }
-
   const handleClick = ({ event, whichPopup }) => {
     setAnchorEl(event.currentTarget)
     setWhichPopup(whichPopup)
@@ -136,59 +126,22 @@ const CaptureButton = ({
             transformOrigin={transformOrigin}
             className="material-ui-overrides transform translate-y-4"
           >
-            <div className="text-sm p-2 text-gray-500">
+            <div className="text-sm p-4 text-gray-500">
               {!captureState ? (
                 'Loading...'
               ) : (
-                <div className="grid grid-cols-2">
+                <div className="">
+                  <div className="text-lg">Thumbnail</div>
                   <div
-                    className="rounded m-auto"
+                    className="rounded"
                     style={{ width: 'fit-content', overflow: 'hidden' }}
                   >
                     <img src={captureState.imageObjectURL} className="w-32" />
                   </div>
-                  <div className="p-2 text-indigo-800">
-                    {captureState.currImage && !captureState.updated ? (
-                      <button
-                        className="flex justify-center mb-4"
-                        onClick={async () => {
-                          const cloudinaryImg = await captureState.callback()
-                          setCaptureState({
-                            ...captureState,
-                            currImage: cloudinaryImg,
-                            updated: true,
-                          })
-                        }}
-                      >
-                        <Svg
-                          name="refresh"
-                          className="mr-2 w-4 text-indigo-600"
-                        />{' '}
-                        Update Project Image
-                      </button>
-                    ) : (
-                      <div className="flex justify-center mb-4">
-                        <Svg
-                          name="checkmark"
-                          className="mr-2 w-6 text-indigo-600"
-                        />{' '}
-                        Part Image Updated
-                      </div>
-                    )}
-                    <Button
-                      iconName="save"
-                      className="shadow-md hover:shadow-lg border-indigo-600 border-2 border-opacity-0 hover:border-opacity-100 bg-indigo-200 text-indigo-100 text-opacity-100 bg-opacity-80"
-                      shouldAnimateHover
-                      onClick={() =>
-                        handleDownload(captureState.imageObjectURL)
-                      }
-                    >
-                      Download
-                    </Button>
-                  </div>
                 </div>
               )}
-              <div className="rounded-lg shadow-md mt-4 overflow-hidden">
+              <div className="text-lg mt-4">Social Media Card</div>
+              <div className="rounded-lg shadow-md overflow-hidden">
                 <div
                   className="transform scale-50 origin-top-left"
                   style={{ width: '600px', height: '315px' }}
@@ -202,6 +155,33 @@ const CaptureButton = ({
                   </div>
                 </div>
               </div>
+              <div className="mt-4 text-indigo-800">
+                {captureState.currImage && !captureState.updated ? (
+                  <Button
+                    iconName="refresh"
+                    className="shadow-md hover:shadow-lg border-indigo-600 border-2 border-opacity-0 hover:border-opacity-100 bg-indigo-200 text-indigo-100 text-opacity-100 bg-opacity-80"
+                    shouldAnimateHover
+                    onClick={async () => {
+                      const cloudinaryImg = await captureState.callback()
+                      setCaptureState({
+                        ...captureState,
+                        currImage: cloudinaryImg,
+                        updated: true,
+                      })
+                    }}
+                  >
+                    Update Project Images
+                  </Button>
+                ) : (
+                  <div className="flex justify-center mb-4">
+                    <Svg
+                      name="checkmark"
+                      className="mr-2 w-6 text-indigo-600"
+                    />{' '}
+                    Project Images Updated
+                  </div>
+                )}
+              </div>
             </div>
           </Popover>
         </div>