Releasing new design #161

Merged
b merged 241 commits from staging into main 2024-08-21 11:38:25 +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); border: 1px solid rgba(0, 0, 0, 0.137);
padding: 5px; padding: 5px;
cursor: pointer; cursor: pointer;
-webkit-user-select: none;
user-select: none; user-select: none;
&.selected { &.selected {
@ -42,13 +43,13 @@
border-color: #01aaad79; border-color: #01aaad79;
} }
} }
} }
} }
} }
.pdfImageWrapper { .pdfImageWrapper {
position: relative; position: relative;
-webkit-user-select: none;
user-select: none; user-select: none;
&.drawing { &.drawing {
@ -94,7 +95,7 @@
background-color: #fff; background-color: #fff;
border: 1px solid rgb(160, 160, 160); border: 1px solid rgb(160, 160, 160);
border-radius: 50%; border-radius: 50%;
color: #E74C3C; color: #e74c3c;
font-size: 10px; font-size: 10px;
cursor: pointer; cursor: pointer;
} }

View File

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

View File

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