Center search bar and replace filter text with search icon

This commit is contained in:
Keannu Bernasol 2023-12-17 23:29:10 +08:00
parent 63b32feb38
commit 6f2fb3900e

View file

@ -15,6 +15,7 @@ import EditItemModal from "../../Components/EditItemInstanceModal/EditItemInstan
import { useState } from "react"; import { useState } from "react";
import Popup from "reactjs-popup"; import Popup from "reactjs-popup";
import Autocomplete from "@mui/material/Autocomplete"; import Autocomplete from "@mui/material/Autocomplete";
import SearchIcon from "@mui/icons-material/Search";
export default function EquipmentInstancesListPage() { export default function EquipmentInstancesListPage() {
const [editmodalOpen, SetEditModalOpen] = useState(false); const [editmodalOpen, SetEditModalOpen] = useState(false);
@ -67,13 +68,22 @@ export default function EquipmentInstancesListPage() {
flexWrap: "wrap", flexWrap: "wrap",
}} }}
> >
<div style={{ alignSelf: "flex-start", paddingLeft: "32px" }}>
<div <div
style={{ style={{
...styles.flex_row, ...styles.flex_row,
...{ alignItems: "center", justifyContent: "flex-start" }, ...{ alignItems: "center", justifySelf: "flex-start" },
}} }}
> >
<p style={{ ...styles.text_dark, ...styles.text_M }}>Filter: </p> <SearchIcon
style={{
height: 32,
width: 32,
fill: colors.font_dark,
marginLeft: "1rem",
marginRight: "1rem",
}}
/>
<Autocomplete <Autocomplete
sx={{ sx={{
display: "inline-block", display: "inline-block",
@ -81,7 +91,9 @@ export default function EquipmentInstancesListPage() {
width: "256x", width: "256x",
bgcolor: "background.paper", bgcolor: "background.paper",
color: (theme) => color: (theme) =>
theme.palette.getContrastText(theme.palette.background.paper), theme.palette.getContrastText(
theme.palette.background.paper
),
}, },
}} }}
value={filter} value={filter}
@ -98,6 +110,7 @@ export default function EquipmentInstancesListPage() {
)} )}
/> />
</div> </div>
</div>
<TableContainer <TableContainer
style={{ width: "90%", overflowY: "scroll", marginTop: "2rem" }} style={{ width: "90%", overflowY: "scroll", marginTop: "2rem" }}
component={Paper} component={Paper}