Releasing new design #161
@ -149,14 +149,27 @@ export const HomePage = () => {
|
|||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div className={styles.actionButtons}>
|
<div className={styles.actionButtons}>
|
||||||
<div className={styles.search}>
|
<form
|
||||||
|
className={styles.search}
|
||||||
|
onSubmit={(e) => {
|
||||||
|
e.preventDefault()
|
||||||
|
const searchInput = e.currentTarget.elements.namedItem(
|
||||||
|
'q'
|
||||||
|
) as HTMLInputElement
|
||||||
|
setSearch(searchInput.value)
|
||||||
|
}}
|
||||||
|
>
|
||||||
<TextField
|
<TextField
|
||||||
|
name="q"
|
||||||
placeholder="Search"
|
placeholder="Search"
|
||||||
value={search}
|
|
||||||
onChange={(e) => {
|
|
||||||
setSearch(e.currentTarget.value)
|
|
||||||
}}
|
|
||||||
size="small"
|
size="small"
|
||||||
|
type="search"
|
||||||
|
onChange={(e) => {
|
||||||
|
// Handle the case when users click native search input's clear or x
|
||||||
|
if (e.currentTarget.value === '') {
|
||||||
|
setSearch(e.currentTarget.value)
|
||||||
|
}
|
||||||
|
}}
|
||||||
sx={{
|
sx={{
|
||||||
width: '100%',
|
width: '100%',
|
||||||
fontSize: '16px',
|
fontSize: '16px',
|
||||||
@ -175,6 +188,7 @@ export const HomePage = () => {
|
|||||||
}}
|
}}
|
||||||
/>
|
/>
|
||||||
<Button
|
<Button
|
||||||
|
type="submit"
|
||||||
sx={{
|
sx={{
|
||||||
minWidth: '44px',
|
minWidth: '44px',
|
||||||
padding: '11.5px 12px',
|
padding: '11.5px 12px',
|
||||||
@ -185,7 +199,7 @@ export const HomePage = () => {
|
|||||||
>
|
>
|
||||||
<FontAwesomeIcon icon={faSearch} />
|
<FontAwesomeIcon icon={faSearch} />
|
||||||
</Button>
|
</Button>
|
||||||
</div>
|
</form>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className={styles.dropzone} onClick={handleUploadClick}>
|
<div className={styles.dropzone} onClick={handleUploadClick}>
|
||||||
|
Loading…
Reference in New Issue
Block a user