fix(home): focus outlines and decorations
All checks were successful
Open PR on Staging / audit_and_check (pull_request) Successful in 33s

This commit is contained in:
enes 2024-08-09 12:00:36 +02:00
parent 15aa98e9db
commit 72d0e065ea
4 changed files with 27 additions and 12 deletions

View File

@ -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;

View File

@ -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) => {

View File

@ -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 {

View File

@ -33,6 +33,9 @@ export const theme = extendTheme({
boxShadow: 'unset',
lineHeight: 'inherit',
borderRadius: '4px',
':focus': {
textDecoration: 'none'
},
':hover': {
background: 'var(--primary-light)',
boxShadow: 'unset'