djkato/saleor-dashboard
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Fix return/replace input and table (#1877)

Browse source 
* 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
1 changed files with 7 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

11
src/orders/components/OrderReturnPage/OrderReturnRefundItemsCard/ReturnItemsCard.tsx
View file

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