Spacing nudges (#2472)

* Spacing nudges

* Use flex

* Added wrapping

* Update snapshot
This commit is contained in:
Timur Carpeev 2022-11-23 18:17:19 +01:00 committed by GitHub
parent 2e45f04802
commit 93b70cb2b7
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 42 additions and 13 deletions

View file

@ -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} />

View file

@ -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" },
);

View file

@ -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": {

View file

@ -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"