fix(home): focus outlines and decorations
All checks were successful
Open PR on Staging / audit_and_check (pull_request) Successful in 33s
All checks were successful
Open PR on Staging / audit_and_check (pull_request) Successful in 33s
This commit is contained in:
parent
15aa98e9db
commit
72d0e065ea
@ -56,7 +56,9 @@ a {
|
|||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
text-decoration-color: inherit;
|
text-decoration-color: inherit;
|
||||||
transition: ease 0.4s;
|
transition: ease 0.4s;
|
||||||
|
outline: none;
|
||||||
|
|
||||||
|
&:focus,
|
||||||
&:hover {
|
&:hover {
|
||||||
color: $primary-light;
|
color: $primary-light;
|
||||||
text-decoration: underline;
|
text-decoration: underline;
|
||||||
|
@ -136,7 +136,7 @@ export const HomePage = () => {
|
|||||||
const [sort, setSort] = useState<Sort>('desc')
|
const [sort, setSort] = useState<Sort>('desc')
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div {...getRootProps()}>
|
<div {...getRootProps()} tabIndex={-1}>
|
||||||
<Container className={styles.container}>
|
<Container className={styles.container}>
|
||||||
<div className={styles.header}>
|
<div className={styles.header}>
|
||||||
<div className={styles.filters}>
|
<div className={styles.filters}>
|
||||||
@ -212,26 +212,27 @@ export const HomePage = () => {
|
|||||||
borderBottomLeftRadius: 0
|
borderBottomLeftRadius: 0
|
||||||
}}
|
}}
|
||||||
variant={'contained'}
|
variant={'contained'}
|
||||||
aria-label="Submit Search"
|
aria-label="submit search"
|
||||||
>
|
>
|
||||||
<FontAwesomeIcon icon={faSearch} />
|
<FontAwesomeIcon icon={faSearch} />
|
||||||
</Button>
|
</Button>
|
||||||
</form>
|
</form>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div
|
<button
|
||||||
className={`${styles.dropzone} ${isDragActive ? styles.isDragActive : ''}`}
|
className={`${styles.dropzone} ${isDragActive ? styles.isDragActive : ''}`}
|
||||||
|
tabIndex={0}
|
||||||
onClick={open}
|
onClick={open}
|
||||||
|
type="button"
|
||||||
|
aria-label="upload files"
|
||||||
>
|
>
|
||||||
<div>
|
|
||||||
<input {...getInputProps()} />
|
<input {...getInputProps()} />
|
||||||
{isDragActive ? (
|
{isDragActive ? (
|
||||||
<p>Drop the files here ...</p>
|
<p>Drop the files here ...</p>
|
||||||
) : (
|
) : (
|
||||||
<p>Click or drag files to upload!</p>
|
<p>Click or drag files to upload!</p>
|
||||||
)}
|
)}
|
||||||
</div>
|
</button>
|
||||||
</div>
|
|
||||||
<div className={styles.submissions}>
|
<div className={styles.submissions}>
|
||||||
{Object.keys(parsedSigits)
|
{Object.keys(parsedSigits)
|
||||||
.filter((s) => {
|
.filter((s) => {
|
||||||
|
@ -76,6 +76,7 @@
|
|||||||
inset: 15px;
|
inset: 15px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
&:focus,
|
||||||
&.isDragActive,
|
&.isDragActive,
|
||||||
&:hover {
|
&:hover {
|
||||||
&::before {
|
&::before {
|
||||||
@ -83,6 +84,14 @@
|
|||||||
background: rgba(0, 0, 0, 0.15);
|
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 {
|
.submissions {
|
||||||
|
@ -33,6 +33,9 @@ export const theme = extendTheme({
|
|||||||
boxShadow: 'unset',
|
boxShadow: 'unset',
|
||||||
lineHeight: 'inherit',
|
lineHeight: 'inherit',
|
||||||
borderRadius: '4px',
|
borderRadius: '4px',
|
||||||
|
':focus': {
|
||||||
|
textDecoration: 'none'
|
||||||
|
},
|
||||||
':hover': {
|
':hover': {
|
||||||
background: 'var(--primary-light)',
|
background: 'var(--primary-light)',
|
||||||
boxShadow: 'unset'
|
boxShadow: 'unset'
|
||||||
|
Loading…
Reference in New Issue
Block a user