Fix return/replace input and table (#1877)

* Add min width to input and add responsive table

* Move inline style to styles
This commit is contained in:
Wojciech Mista 2022-02-22 09:11:44 +01:00 committed by GitHub
parent 9579bbe2f2
commit 4661a93c0f
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23

View file

@ -2,7 +2,6 @@ import {
Card,
CardContent,
Checkbox,
Table,
TableBody,
TableCell,
TableHead,
@ -14,7 +13,7 @@ import Skeleton from "@saleor/components/Skeleton";
import TableCellAvatar from "@saleor/components/TableCellAvatar";
import { OrderErrorFragment } from "@saleor/fragments/types/OrderErrorFragment";
import { FormsetChange } from "@saleor/hooks/useFormset";
import { makeStyles } from "@saleor/macaw-ui";
import { makeStyles, ResponsiveTable } from "@saleor/macaw-ui";
import { renderCollection } from "@saleor/misc";
import {
OrderDetails_order,
@ -47,6 +46,9 @@ const useStyles = makeStyles(
marginTop: theme.spacing(2)
},
quantityField: {
minWidth: "80px"
},
quantityInnerInput: {
...inputPadding
},
@ -127,7 +129,7 @@ const ItemsCard: React.FC<OrderReturnRefundLinesCardProps> = ({
<CardContent className={classes.cartContent}>
<MaximalButton onClick={onSetMaxQuantity} />
</CardContent>
<Table>
<ResponsiveTable>
<TableHead>
<TableRow>
<TableCell>
@ -206,6 +208,7 @@ const ItemsCard: React.FC<OrderReturnRefundLinesCardProps> = ({
<TableCell align="right">
{isReturnable && (
<TextField
className={classes.quantityField}
type="number"
inputProps={{
className: classes.quantityInnerInput,
@ -253,7 +256,7 @@ const ItemsCard: React.FC<OrderReturnRefundLinesCardProps> = ({
)
)}
</TableBody>
</Table>
</ResponsiveTable>
</Card>
);
};