feat(design): home page new design and functionality #135
@ -56,7 +56,9 @@ a {
|
||||
text-decoration: none;
|
||||
text-decoration-color: inherit;
|
||||
transition: ease 0.4s;
|
||||
outline: none;
|
||||
|
||||
&:focus,
|
||||
&:hover {
|
||||
color: $primary-light;
|
||||
text-decoration: underline;
|
||||
|
@ -136,7 +136,7 @@ export const HomePage = () => {
|
||||
const [sort, setSort] = useState<Sort>('desc')
|
||||
|
||||
return (
|
||||
<div {...getRootProps()}>
|
||||
<div {...getRootProps()} tabIndex={-1}>
|
||||
<Container className={styles.container}>
|
||||
<div className={styles.header}>
|
||||
<div className={styles.filters}>
|
||||
@ -212,26 +212,27 @@ export const HomePage = () => {
|
||||
borderBottomLeftRadius: 0
|
||||
}}
|
||||
variant={'contained'}
|
||||
aria-label="Submit Search"
|
||||
aria-label="submit search"
|
||||
>
|
||||
<FontAwesomeIcon icon={faSearch} />
|
||||
</Button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
<button
|
||||
className={`${styles.dropzone} ${isDragActive ? styles.isDragActive : ''}`}
|
||||
tabIndex={0}
|
||||
onClick={open}
|
||||
type="button"
|
||||
aria-label="upload files"
|
||||
>
|
||||
<div>
|
||||
<input {...getInputProps()} />
|
||||
{isDragActive ? (
|
||||
<p>Drop the files here ...</p>
|
||||
) : (
|
||||
<p>Click or drag files to upload!</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</button>
|
||||
<div className={styles.submissions}>
|
||||
{Object.keys(parsedSigits)
|
||||
.filter((s) => {
|
||||
|
@ -76,6 +76,7 @@
|
||||
inset: 15px;
|
||||
}
|
||||
|
||||
&:focus,
|
||||
&.isDragActive,
|
||||
&:hover {
|
||||
&::before {
|
||||
@ -83,6 +84,14 @@
|
||||
background: rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
}
|
||||
|
||||
// Override button styles
|
||||
padding: 0;
|
||||
border: none;
|
||||
outline: none;
|
||||
letter-spacing: 1px;
|
||||
font-weight: 500;
|
||||
font-family: inherit;
|
||||
}
|
||||
|
||||
.submissions {
|
||||
|
@ -33,6 +33,9 @@ export const theme = extendTheme({
|
||||
boxShadow: 'unset',
|
||||
lineHeight: 'inherit',
|
||||
borderRadius: '4px',
|
||||
':focus': {
|
||||
textDecoration: 'none'
|
||||
},
|
||||
':hover': {
|
||||
background: 'var(--primary-light)',
|
||||
boxShadow: 'unset'
|
||||
|
Loading…
Reference in New Issue
Block a user