sirtimbly/IronCalc
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

UPDATE: Small fixes in Upload file Dialog

Browse Source
This commit is contained in:
Daniel
2024-11-24 17:04:21 +01:00
committed by Nicolás Hatcher Andrés
parent d8a5c29e2f
commit d9dbd3bf14
1 changed files with 43 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

55
webapp/src/AppComponents/UploadFileDialog.tsx
View File

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