Spacing nudges (#2472)
* Spacing nudges * Use flex * Added wrapping * Update snapshot
This commit is contained in:
parent
2e45f04802
commit
93b70cb2b7
4 changed files with 42 additions and 13 deletions
|
@ -83,7 +83,7 @@ const OrderPayment: React.FC<OrderPaymentProps> = props => {
|
|||
/>
|
||||
{order?.status !== OrderStatus.CANCELED &&
|
||||
(canCapture || canRefund || canVoid || canMarkAsPaid) && (
|
||||
<div>
|
||||
<div className={classes.actions}>
|
||||
{canCapture && (
|
||||
<Button variant="tertiary" onClick={onCapture}>
|
||||
<FormattedMessage {...paymentButtonMessages.capture} />
|
||||
|
|
|
@ -36,6 +36,12 @@ export const useStyles = makeStyles(
|
|||
success: {
|
||||
color: theme.palette.success.dark,
|
||||
},
|
||||
actions: {
|
||||
gap: theme.spacing(1),
|
||||
display: "flex",
|
||||
flexWrap: "wrap",
|
||||
justifyContent: "right",
|
||||
},
|
||||
}),
|
||||
{ name: "OrderPayment" },
|
||||
);
|
||||
|
|
|
@ -4,7 +4,8 @@ export const useStyles = makeStyles(
|
|||
theme => ({
|
||||
actions: {
|
||||
flexDirection: "row-reverse",
|
||||
padding: theme.spacing(2, 3),
|
||||
paddingTop: theme.spacing(2),
|
||||
paddingBottom: theme.spacing(2),
|
||||
},
|
||||
table: {
|
||||
"& td, & th": {
|
||||
|
|
|
@ -115764,7 +115764,9 @@ exports[`Storyshots Views / Orders / Order details default 1`] = `
|
|||
Unpaid
|
||||
</span>
|
||||
</div>
|
||||
<div>
|
||||
<div
|
||||
class="OrderPayment-actions-id"
|
||||
>
|
||||
<button
|
||||
class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
|
||||
tabindex="0"
|
||||
|
@ -117820,7 +117822,9 @@ exports[`Storyshots Views / Orders / Order details fulfilled 1`] = `
|
|||
Unpaid
|
||||
</span>
|
||||
</div>
|
||||
<div>
|
||||
<div
|
||||
class="OrderPayment-actions-id"
|
||||
>
|
||||
<button
|
||||
class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
|
||||
tabindex="0"
|
||||
|
@ -120423,7 +120427,9 @@ exports[`Storyshots Views / Orders / Order details no customer note 1`] = `
|
|||
Unpaid
|
||||
</span>
|
||||
</div>
|
||||
<div>
|
||||
<div
|
||||
class="OrderPayment-actions-id"
|
||||
>
|
||||
<button
|
||||
class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
|
||||
tabindex="0"
|
||||
|
@ -124477,7 +124483,9 @@ exports[`Storyshots Views / Orders / Order details no shipping address 1`] = `
|
|||
Unpaid
|
||||
</span>
|
||||
</div>
|
||||
<div>
|
||||
<div
|
||||
class="OrderPayment-actions-id"
|
||||
>
|
||||
<button
|
||||
class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
|
||||
tabindex="0"
|
||||
|
@ -126525,7 +126533,9 @@ exports[`Storyshots Views / Orders / Order details partially fulfilled 1`] = `
|
|||
Unpaid
|
||||
</span>
|
||||
</div>
|
||||
<div>
|
||||
<div
|
||||
class="OrderPayment-actions-id"
|
||||
>
|
||||
<button
|
||||
class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
|
||||
tabindex="0"
|
||||
|
@ -128581,7 +128591,9 @@ exports[`Storyshots Views / Orders / Order details payment confirmed 1`] = `
|
|||
Fully paid
|
||||
</span>
|
||||
</div>
|
||||
<div>
|
||||
<div
|
||||
class="OrderPayment-actions-id"
|
||||
>
|
||||
<button
|
||||
class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
|
||||
tabindex="0"
|
||||
|
@ -130637,7 +130649,9 @@ exports[`Storyshots Views / Orders / Order details payment error 1`] = `
|
|||
Unpaid
|
||||
</span>
|
||||
</div>
|
||||
<div>
|
||||
<div
|
||||
class="OrderPayment-actions-id"
|
||||
>
|
||||
<button
|
||||
class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
|
||||
tabindex="0"
|
||||
|
@ -132693,7 +132707,9 @@ exports[`Storyshots Views / Orders / Order details pending payment 1`] = `
|
|||
Unpaid
|
||||
</span>
|
||||
</div>
|
||||
<div>
|
||||
<div
|
||||
class="OrderPayment-actions-id"
|
||||
>
|
||||
<button
|
||||
class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
|
||||
tabindex="0"
|
||||
|
@ -134749,7 +134765,9 @@ exports[`Storyshots Views / Orders / Order details refunded payment 1`] = `
|
|||
Fully refunded
|
||||
</span>
|
||||
</div>
|
||||
<div>
|
||||
<div
|
||||
class="OrderPayment-actions-id"
|
||||
>
|
||||
<button
|
||||
class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
|
||||
tabindex="0"
|
||||
|
@ -136818,7 +136836,9 @@ exports[`Storyshots Views / Orders / Order details rejected payment 1`] = `
|
|||
Unpaid
|
||||
</span>
|
||||
</div>
|
||||
<div>
|
||||
<div
|
||||
class="OrderPayment-actions-id"
|
||||
>
|
||||
<button
|
||||
class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
|
||||
tabindex="0"
|
||||
|
@ -138874,7 +138894,9 @@ exports[`Storyshots Views / Orders / Order details unfulfilled 1`] = `
|
|||
Unpaid
|
||||
</span>
|
||||
</div>
|
||||
<div>
|
||||
<div
|
||||
class="OrderPayment-actions-id"
|
||||
>
|
||||
<button
|
||||
class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
|
||||
tabindex="0"
|
||||
|
|
Loading…
Reference in a new issue