mirror of
https://github.com/lemeow125/Borrowing-TrackerFrontend.git
synced 2024-11-17 06:19:27 +08:00
Center search bar and replace filter text with search icon
This commit is contained in:
parent
63b32feb38
commit
6f2fb3900e
1 changed files with 42 additions and 29 deletions
|
@ -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}
|
||||||
|
|
Loading…
Reference in a new issue