PenaSide/front-hub
3
0
Fork 0
Code Issues 5 Pull Requests Actions Packages Projects Releases Wiki Activity

minor changes

Browse Source
This commit is contained in:
nflnkr 2022-12-18 22:57:33 +03:00
parent 588ab21d25
commit 24f0f1ad22
2 changed files with 71 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

51
src/pages/Support/Support.tsx
View File

@ -18,13 +18,8 @@ export default function Support() {
maxWidth="lg"
sx={{
pt: upMd ? "25px" : "20px",
pb: upMd ? "70px" : "18px",
pb: upMd ? "82px" : "43px",
height: "100%",
display: "flex",
flexDirection: "column",
}}
outerContainerSx={{
height: upMd ? undefined : "calc(100vh - 51px)",
}}
>
{upMd &&
@ -50,12 +45,46 @@ export default function Support() {
:
<>
<CreateTicket />
<List sx={{ mt: "40px" }}>
<ListItem sx={{ px: 0 }}>
<List sx={{
mt: upMd ? "40px" : "60px",
p: 0,
display: "flex",
flexDirection: "column",
gap: "40px",
}}>
<ListItem disablePadding>
<TicketCard
name="Название тикета"
body="Содержание тикета"
time="15.09.22 08:39"
name="Название обращения"
body="Текст-заполнитель —
это текст, который имеет Текст-заполнитель —
это текст, который имеет Текст-заполнитель —
это текст, который имеет Текст-заполнитель —
это текст, который имеет Текст-заполнитель"
time="24.01.2022 16:40"
ticketId="someTicketId"
/>
</ListItem>
<ListItem disablePadding>
<TicketCard
name="Название обращения Текст-заполнитель —
это текст, который имеет Текст-заполнитель —
это текст, который имеет"
body="Текст-заполнитель —
это текст, который имеет Текст-заполнитель —
это текст, который имеет Текст-заполнитель —
это текст, который имеет Текст-заполнитель — "
time="24.01.2022 16:40"
ticketId="someTicketId"
/>
</ListItem>
<ListItem disablePadding>
<TicketCard
name="Название обращения"
body="Текст-заполнитель —
это текст, который имеет Текст-заполнитель —
это текст, который имеет Текст-заполнитель —
это текст, который имеет Текст-заполните"
time="24.01.2022 16:40"
ticketId="someTicketId"
/>
</ListItem>

44
src/pages/Support/TicketCard.tsx
View File

@ -1,6 +1,7 @@
import { Box, Typography, useMediaQuery, useTheme } from "@mui/material";
import CustomButton from "../../components/CustomButton";
import { Link as RouterLink } from "react-router-dom";
import { useMemo } from "react";
interface Props {
@ -14,6 +15,17 @@ export default function TicketCard({ name, body, time, ticketId }: Props) {
const theme = useTheme();
const upMd = useMediaQuery(theme.breakpoints.up("md"));
const timeText = useMemo(() => (
<Typography sx={{
fontWeight: 400,
fontSize: "14px",
lineHeight: "17px",
color: theme.palette.grey2.main,
mt: "2px",
mb: "5px",
}}>{time}</Typography>
), [theme.palette.grey2.main, time]);
return (
<Box
sx={{
@ -24,7 +36,7 @@ export default function TicketCard({ name, body, time, ticketId }: Props) {
display: "flex",
flexDirection: upMd ? "row" : "column",
justifyContent: "space-between",
gap: "20px",
gap: upMd ? "40px" : "20px",
boxShadow: `0px 100px 309px rgba(210, 208, 225, 0.24),
0px 41.7776px 129.093px rgba(210, 208, 225, 0.172525),
0px 22.3363px 69.0192px rgba(210, 208, 225, 0.143066),
@ -33,31 +45,35 @@ export default function TicketCard({ name, body, time, ticketId }: Props) {
0px 2.76726px 8.55082px rgba(210, 208, 225, 0.0674749)`,
}}
>
{!upMd && timeText}
<Box>
<Typography variant="h5" mb="20px">{name}</Typography>
<Typography>{body}</Typography>
<Typography
sx={{
mb: "20px",
fontSize: "18px",
lineHeight: "21px",
fontWeight: 500,
}}
>{name}</Typography>
<Typography color={theme.palette.grey3.main}>{body}</Typography>
</Box>
<Box
sx={{
display: "flex",
flexDirection: "column",
alignItems: "end",
alignSelf: "end",
alignItems: upMd ? "end" : "start",
justifyContent: "space-between",
}}
>
<Typography sx={{
fontWeight: 400,
fontSize: "14px",
lineHeight: "17px",
color: theme.palette.grey2.main,
mb: upMd ? "9px" : "20px",
}}>{time}</Typography>
{upMd && timeText}
<CustomButton
variant="contained"
variant="outlined"
component={RouterLink}
to={`/support/${ticketId}`}
sx={{
backgroundColor: theme.palette.brightPurple.main,
py: "9px",
color: theme.palette.brightPurple.main,
borderColor: theme.palette.brightPurple.main,
}}
>Перейти</CustomButton>
</Box>