student and teacher dashboard responsive

This commit is contained in:
Jerilyn Yare 2024-01-07 12:56:01 +08:00
parent 8427414c25
commit 04ce14a5a0
6 changed files with 19 additions and 20 deletions

View file

@ -1,7 +1,6 @@
import styles from "../../../styles"; import styles from "../../../styles";
import { Button } from "@mui/material"; import { Button } from "@mui/material";
import AddBoxIcon from "@mui/icons-material/AddBox";
import { colors } from "../../../styles";
import { useNavigate } from "react-router-dom"; import { useNavigate } from "react-router-dom";
export default function StudentDashboard() { export default function StudentDashboard() {
const navigate = useNavigate(); const navigate = useNavigate();
@ -17,7 +16,7 @@ export default function StudentDashboard() {
justifyContent: "center", justifyContent: "center",
flexWrap: "wrap", flexWrap: "wrap",
marginTop: "40px", marginTop: "40px",
width: "100%"
}, },
@ -28,11 +27,10 @@ export default function StudentDashboard() {
...styles.flex_column, ...styles.flex_column,
...{ ...{
alignSelf: "center", alignSelf: "center",
justifyContent: "center",
flexWrap: "wrap",
backgroundColor: "#CCDDFF", backgroundColor: "#CCDDFF",
paddingInline: "90px", borderRadius: "20px",
borderRadius: "20px" paddingInline: "100px",
width: "100%",
}, },
}} }}
onClick={() => { onClick={() => {
@ -43,9 +41,8 @@ export default function StudentDashboard() {
<p <p
style={{ style={{
...styles.text_dark_blue, ...styles.text_dark_blue,
fontSize: "15px",
...styles.text_M,
fontSize: "15px"
}} }}
> >
CLICK TO REQUEST BORROW ITEMS CLICK TO REQUEST BORROW ITEMS

View file

@ -39,10 +39,11 @@ export default function StudentTransactionListView() {
); );
} }
return ( return (
<div > <div style={{ width: "100%" }}>
<div style={{ <div style={{
marginTop: "60px", marginTop: "60px",
width: "85%",
marginInline: "6.5%"
}}> }}>
<TransactionFilterMenu filter={filter} setFilter={setFilter} /> <TransactionFilterMenu filter={filter} setFilter={setFilter} />
<div style={{ marginTop: "16px" }} /> <div style={{ marginTop: "16px" }} />

View file

@ -48,7 +48,7 @@ export default function TeacherTransactionListView() {
<div <div
style={{ style={{
...styles.flex_column, ...styles.flex_column,
...{ height: "50vh", overflowY: "scroll" }, ...{ height: "50vh", overflowY: "scroll", width: "85%", marginInline: "6.5%" },
}} }}
> >
{transactions.data ? ( {transactions.data ? (

View file

@ -18,11 +18,11 @@ export default function TransactionEntry(props: props) {
style={{ style={{
alignSelf: "center", alignSelf: "center",
justifySelf: "center", justifySelf: "center",
width: "584px",
backgroundColor: colors.header_color, backgroundColor: colors.header_color,
borderRadius: 16, borderRadius: 16,
margin: "10px", marginTop: "10px",
paddingTop: "15px", paddingTop: "15px",
width: "100%"
}} }}
onClick={props.onClick} onClick={props.onClick}

View file

@ -41,10 +41,11 @@ export default function TransactionFilterMenu(props: props) {
alignSelf: "center", alignSelf: "center",
justifyContent: "center", justifyContent: "center",
flexWrap: "wrap", flexWrap: "wrap",
width: "100%"
}, },
}} }}
> >
<FormControl sx={{ width: "384px" }}> <FormControl sx={{ width: "550px", marginInline: "30px" }}>
<InputLabel style={{ backgroundColor: "white", padding: 0 }}> <InputLabel style={{ backgroundColor: "white", padding: 0 }}>
Filter Transactions Filter Transactions
</InputLabel> </InputLabel>

View file

@ -21,10 +21,10 @@ export default function Dashboard() {
style={{ style={{
...styles.flex_column, ...styles.flex_column,
...{ ...{
flexWrap: "wrap",
justifyContent: "center", justifyContent: "center",
marginLeft: "16px", alignItems: "center",
marginRight: "16px", marginInline: "10px"
}, },
}} }}
> >