UPDATE: Small fixes in Upload file Dialog

webapp/src/AppComponents/UploadFileDialog.tsx

@@ -134,7 +134,7 @@ export function UploadFileDialog(properties: {
                     width: 16,
                     color: "#EFAA6D",
                     backgroundColor: "#F2994A1A",
-                    padding: "2px 4px",
+                    padding: "2px 6px",
                     borderRadius: 4,
                   }}
                 />
@@ -192,7 +192,13 @@ export function UploadFileDialog(properties: {
         <BookOpen
           style={{ width: 16, height: 16, marginLeft: 12, marginRight: 8 }}
         />
-        <span>Learn more about importing files into IronCalc</span>
+        <UploadFooterLink
+          href="https://docs.ironcalc.com/web-application/importing-files.html"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          Learn more about importing files into IronCalc
+        </UploadFooterLink>
       </UploadFooter>
     </UploadDialog>
   );
@@ -202,34 +208,46 @@ const Cross = styled("div")`
   &:hover {
     background-color: #f5f5f5;
   }
+  display: flex;
   border-radius: 4px;
-  height: 16px;
-  width: 16px;
+  height: 24px;
+  width: 24px;
+  cursor: pointer;
+  align-items: center;
+  justify-content: center;
 `;
 
 const DocLink = styled("span")`
   color: #f2994a;
-  text-decoration: underline;
+  text-decoration: none;
   &:hover {
-    font-weight: bold;
+    text-decoration: underline;
   }
 `;
 
 const UploadFooter = styled("div")`
-  height: 40px;
+  height: 44px;
   border-top: 1px solid #e0e0e0;
-  font-size: 12px;
-  font-weight: 400;
   color: #757575;
   display: flex;
   align-items: center;
 `;
 
+const UploadFooterLink = styled("a")`
+  font-size: 12px;
+  font-weight: 400;
+  color: #757575;
+  text-decoration: none;
+  &:hover {
+    text-decoration: underline;
+  }
+`;
+
 const UploadTitle = styled("div")`
   display: flex;
   align-items: center;
   border-bottom: 1px solid #e0e0e0;
-  height: 40px;
+  height: 44px;
   font-size: 14px;
   font-weight: 500;
 `;
@@ -241,7 +259,8 @@ const UploadDialog = styled("div")`
   left: 50%;
   top: 50%;
   transform: translate(-50%, -50%);
-  width: 455px;
+  width: 460px;
+  max-width: 90%;
   height: 285px;
   background: #fff;
   border: 1px solid #e0e0e0;
@@ -251,6 +270,16 @@ const UploadDialog = styled("div")`
 `;
 
 const DropZone = styled("div")`
+  &:hover {
+    border: 1px dashed #f2994a;
+    transition: 0.2s ease-in-out;
+    gap: 8px;
+    background: linear-gradient(
+      180deg,
+      rgba(242, 153, 74, 0.12) 0%,
+      rgba(242, 153, 74, 0) 100%
+    );
+  }
   flex-grow: 2;
   border-radius: 10px;
   text-align: center;
@@ -259,7 +288,7 @@ const DropZone = styled("div")`
   font-family: Arial, sans-serif;
   cursor: pointer;
   background-color: #faebd7;
-  border: 1px dashed #f2994a;
+  border: 1px dashed #efaa6d;
   background: linear-gradient(
     180deg,
     rgba(242, 153, 74, 0.08) 0%,
@@ -268,4 +297,6 @@ const DropZone = styled("div")`
   display: flex;
   flex-direction: column;
   vertical-align: center;
+  gap: 16px;
+  transition: 0.2s ease-in-out;
 `;