feat(design): home page new design and functionality #135

Merged
enes merged 24 commits from issue-121 into staging 2024-08-14 08:44:09 +00:00
Showing only changes of commit c18d0f6c13 - Show all commits

View File

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