From 93b70cb2b7c0da6dc6218ba9899e19654179e215 Mon Sep 17 00:00:00 2001
From: Timur Carpeev <timuric@users.noreply.github.com>
Date: Wed, 23 Nov 2022 18:17:19 +0100
Subject: [PATCH] Spacing nudges (#2472)

* Spacing nudges

* Use flex

* Added wrapping

* Update snapshot
---
 .../components/OrderPayment/OrderPayment.tsx  |  2 +-
 src/orders/components/OrderPayment/styles.ts  |  6 +++
 .../OrderUnfulfilledProductsCard/styles.ts    |  3 +-
 .../__snapshots__/Stories.test.ts.snap        | 44 ++++++++++++++-----
 4 files changed, 42 insertions(+), 13 deletions(-)

diff --git a/src/orders/components/OrderPayment/OrderPayment.tsx b/src/orders/components/OrderPayment/OrderPayment.tsx
index fde23a184..b40490c6d 100644
--- a/src/orders/components/OrderPayment/OrderPayment.tsx
+++ b/src/orders/components/OrderPayment/OrderPayment.tsx
@@ -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} />
diff --git a/src/orders/components/OrderPayment/styles.ts b/src/orders/components/OrderPayment/styles.ts
index a70f9fb19..7f050514e 100644
--- a/src/orders/components/OrderPayment/styles.ts
+++ b/src/orders/components/OrderPayment/styles.ts
@@ -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" },
 );
diff --git a/src/orders/components/OrderUnfulfilledProductsCard/styles.ts b/src/orders/components/OrderUnfulfilledProductsCard/styles.ts
index cd1fc49a3..422d49b38 100644
--- a/src/orders/components/OrderUnfulfilledProductsCard/styles.ts
+++ b/src/orders/components/OrderUnfulfilledProductsCard/styles.ts
@@ -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": {
diff --git a/src/storybook/__snapshots__/Stories.test.ts.snap b/src/storybook/__snapshots__/Stories.test.ts.snap
index d774e3ca3..623f0c8fb 100644
--- a/src/storybook/__snapshots__/Stories.test.ts.snap
+++ b/src/storybook/__snapshots__/Stories.test.ts.snap
@@ -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"