Releasing new design #161
@ -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;
|
||||||
}
|
}
|
||||||
|
@ -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>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
@ -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);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
Loading…
Reference in New Issue
Block a user