feat(design): home page new design and functionality #135

Merged
enes merged 24 commits from issue-121 into staging 2024-08-14 08:44:09 +00:00
3 changed files with 155 additions and 141 deletions
Showing only changes of commit 15aa98e9db - Show all commits

View File

@ -30,6 +30,7 @@
border: 1px solid rgba(0, 0, 0, 0.137);
padding: 5px;
cursor: pointer;
-webkit-user-select: none;
user-select: none;
&.selected {
@ -42,13 +43,13 @@
border-color: #01aaad79;
}
}
}
}
}
.pdfImageWrapper {
position: relative;
-webkit-user-select: none;
user-select: none;
&.drawing {
@ -94,7 +95,7 @@
background-color: #fff;
border: 1px solid rgb(160, 160, 160);
border-radius: 50%;
color: #E74C3C;
color: #e74c3c;
font-size: 10px;
cursor: pointer;
}

View File

@ -127,12 +127,16 @@ export const HomePage = () => {
[navigate]
)
const { getRootProps, getInputProps, isDragActive } = useDropzone({ onDrop })
const { getRootProps, getInputProps, isDragActive, open } = useDropzone({
onDrop,
noClick: true
})
const [filter, setFilter] = useState<Filter>('Show all')
const [sort, setSort] = useState<Sort>('desc')
return (
<div {...getRootProps()}>
<Container className={styles.container}>
<div className={styles.header}>
<div className={styles.filters}>
@ -208,14 +212,18 @@ export const HomePage = () => {
borderBottomLeftRadius: 0
}}
variant={'contained'}
aria-label="Submit Search"
>
<FontAwesomeIcon icon={faSearch} />
</Button>
</form>
</div>
</div>
<div className={styles.dropzone}>
<div {...getRootProps()}>
<div
className={`${styles.dropzone} ${isDragActive ? styles.isDragActive : ''}`}
onClick={open}
>
<div>
<input {...getInputProps()} />
{isDragActive ? (
<p>Drop the files here ...</p>
@ -256,5 +264,6 @@ export const HomePage = () => {
))}
</div>
</Container>
</div>
)
}

View File

@ -53,31 +53,35 @@
}
.dropzone {
position: relative;
font-size: 16px;
background-color: $overlay-background-color;
height: 250px;
transition: padding ease 0.2s;
padding: 15px;
&:hover {
padding: 10px;
> div {
background: rgba(0, 0, 0, 0.15);
}
}
> div {
transition: background-color ease 0.2s;
color: rgba(0, 0, 0, 0.25);
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
&::before {
content: '';
position: absolute;
transition:
background-color ease 0.2s,
inset ease 0.2s;
background: rgba(0, 0, 0, 0.1);
color: rgba(0, 0, 0, 0.25);
height: 100%;
border-radius: 2px;
border: dashed 3px rgba(0, 0, 0, 0.1);
font-size: 16px;
inset: 15px;
}
&.isDragActive,
&:hover {
&::before {
inset: 10px;
background: rgba(0, 0, 0, 0.15);
}
}
}