From 72cd0ff8df930b37ff78aa1d55e87531bbec2071 Mon Sep 17 00:00:00 2001
From: Jackson Harper <jacksonh@gmail.com>
Date: Tue, 22 Nov 2022 13:00:37 +0800
Subject: [PATCH] Put the drag and drop style in a container so it can be
 centred

---
 .../templates/homeFeed/HomeFeedContainer.tsx  | 110 ++++++++++--------
 1 file changed, 63 insertions(+), 47 deletions(-)

diff --git a/packages/web/components/templates/homeFeed/HomeFeedContainer.tsx b/packages/web/components/templates/homeFeed/HomeFeedContainer.tsx
index e5811ab1d..f3eb9a768 100644
--- a/packages/web/components/templates/homeFeed/HomeFeedContainer.tsx
+++ b/packages/web/components/templates/homeFeed/HomeFeedContainer.tsx
@@ -695,18 +695,31 @@ function HomeFeedGrid(props: HomeFeedContentProps): JSX.Element {
     },
   })
 
-  const DragnDropStyle = styled('div', {
-    border: '3px dashed gray',
-    backgroundColor: 'aliceblue',
-    borderRadius: '5px',
-    width: '95%',
+  const DragnDropContainer = styled('div', {
+    width: '100%',
     height: '80%',
     position: 'absolute',
-    opacity: '0.9',
     display: 'flex',
     justifyContent: 'center',
     alignItems: 'center',
     zIndex: '1',
+    alignSelf: 'center',
+    left: 0,
+  })
+
+  const DragnDropStyle = styled('div', {
+    border: '3px dashed gray',
+    backgroundColor: 'aliceblue',
+    borderRadius: '5px',
+    width: '100%',
+    height: '100%',
+    opacity: '0.9',
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center',
+    alignSelf: 'center',
+    left: 0,
+    margin: '16px',
   })
 
   const removeItem = () => {
@@ -900,50 +913,53 @@ function HomeFeedGrid(props: HomeFeedContentProps): JSX.Element {
           {({ getRootProps, getInputProps, acceptedFiles, fileRejections }) => (
             <div {...getRootProps({ className: 'dropzone' })}>
               {inDragOperation && uploadingFiles.length < 1 && (
-                <DragnDropStyle>
-                  <Box
-                    css={{
-                      color: '$utilityTextDefault',
-                      fontWeight: '800',
-                      fontSize: '$4',
-                    }}
-                  >
-                    Drag PDF document to this area to upload and add to your
-                    library
-                  </Box>
-                </DragnDropStyle>
-              )}
-              {uploadingFiles.length > 0 && (
-                <DragnDropStyle>
-                  <Box
-                    css={{
-                      color: '$utilityTextDefault',
-                      fontWeight: '800',
-                      fontSize: '$4',
-                      width: '80%',
-                    }}
-                  >
-                    <Progress.Root
-                      className="ProgressRoot"
-                      value={uploadProgress}
-                    >
-                      <Progress.Indicator
-                        className="ProgressIndicator"
-                        style={{
-                          transform: `translateX(-${100 - uploadProgress}%)`,
-                        }}
-                      />
-                    </Progress.Root>
-                    <StyledText
-                      style="boldText"
+                <DragnDropContainer>
+                  <DragnDropStyle>
+                    <Box
                       css={{
-                        color: theme.colors.omnivoreGray.toString(),
+                        color: '$utilityTextDefault',
+                        fontWeight: '800',
+                        fontSize: '$4',
                       }}
                     >
-                      Uploading file
-                    </StyledText>
-                  </Box>
-                </DragnDropStyle>
+                      Drop PDF document to to upload and add to your library
+                    </Box>
+                  </DragnDropStyle>
+                </DragnDropContainer>
+              )}
+              {uploadingFiles.length > 0 && (
+                <DragnDropContainer>
+                  <DragnDropStyle>
+                    <Box
+                      css={{
+                        color: '$utilityTextDefault',
+                        fontWeight: '800',
+                        fontSize: '$4',
+                        width: '80%',
+                      }}
+                    >
+                      <Progress.Root
+                        className="ProgressRoot"
+                        value={uploadProgress}
+                      >
+                        <Progress.Indicator
+                          className="ProgressIndicator"
+                          style={{
+                            transform: `translateX(-${100 - uploadProgress}%)`,
+                          }}
+                        />
+                      </Progress.Root>
+                      <StyledText
+                        style="boldText"
+                        css={{
+                          color: theme.colors.omnivoreGray.toString(),
+                        }}
+                      >
+                        Uploading file
+                      </StyledText>
+                    </Box>
+                  </DragnDropStyle>
+                </DragnDropContainer>
               )}
               <input {...getInputProps()} />
               {!props.isValidating && props.items.length == 0 ? (