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

Spacing nudges (#2472)

Browse source 
* 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
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/orders/components/OrderPayment/OrderPayment.tsx
View file

@ -83,7 +83,7 @@ const OrderPayment: React.FC<OrderPaymentProps> = props => {
/> />
{order?.status !== OrderStatus.CANCELED && {order?.status !== OrderStatus.CANCELED &&
(canCapture || canRefund || canVoid || canMarkAsPaid) && ( (canCapture || canRefund || canVoid || canMarkAsPaid) && (
<div> <div className={classes.actions}>
{canCapture && ( {canCapture && (
<Button variant="tertiary" onClick={onCapture}> <Button variant="tertiary" onClick={onCapture}>
<FormattedMessage {...paymentButtonMessages.capture} /> <FormattedMessage {...paymentButtonMessages.capture} />

6
src/orders/components/OrderPayment/styles.ts
View file

@ -36,6 +36,12 @@ export const useStyles = makeStyles(
success: { success: {
color: theme.palette.success.dark, color: theme.palette.success.dark,
}, },
actions: {
gap: theme.spacing(1),
display: "flex",
flexWrap: "wrap",
justifyContent: "right",
},
}), }),
{ name: "OrderPayment" }, { name: "OrderPayment" },
); );

3
src/orders/components/OrderUnfulfilledProductsCard/styles.ts
View file

@ -4,7 +4,8 @@ export const useStyles = makeStyles(
theme => ({ theme => ({
actions: { actions: {
flexDirection: "row-reverse", flexDirection: "row-reverse",
padding: theme.spacing(2, 3), paddingTop: theme.spacing(2),
paddingBottom: theme.spacing(2),
}, },
table: { table: {
"& td, & th": { "& td, & th": {

44
src/storybook/__snapshots__/Stories.test.ts.snap
View file

@ -115764,7 +115764,9 @@ exports[`Storyshots Views / Orders / Order details default 1`] = `
Unpaid Unpaid
</span> </span>
</div> </div>
<div> <div
class="OrderPayment-actions-id"
>
<button <button
class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id" class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
tabindex="0" tabindex="0"
@ -117820,7 +117822,9 @@ exports[`Storyshots Views / Orders / Order details fulfilled 1`] = `
Unpaid Unpaid
</span> </span>
</div> </div>
<div> <div
class="OrderPayment-actions-id"
>
<button <button
class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id" class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
tabindex="0" tabindex="0"
@ -120423,7 +120427,9 @@ exports[`Storyshots Views / Orders / Order details no customer note 1`] = `
Unpaid Unpaid
</span> </span>
</div> </div>
<div> <div
class="OrderPayment-actions-id"
>
<button <button
class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id" class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
tabindex="0" tabindex="0"
@ -124477,7 +124483,9 @@ exports[`Storyshots Views / Orders / Order details no shipping address 1`] = `
Unpaid Unpaid
</span> </span>
</div> </div>
<div> <div
class="OrderPayment-actions-id"
>
<button <button
class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id" class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
tabindex="0" tabindex="0"
@ -126525,7 +126533,9 @@ exports[`Storyshots Views / Orders / Order details partially fulfilled 1`] = `
Unpaid Unpaid
</span> </span>
</div> </div>
<div> <div
class="OrderPayment-actions-id"
>
<button <button
class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id" class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
tabindex="0" tabindex="0"
@ -128581,7 +128591,9 @@ exports[`Storyshots Views / Orders / Order details payment confirmed 1`] = `
Fully paid Fully paid
</span> </span>
</div> </div>
<div> <div
class="OrderPayment-actions-id"
>
<button <button
class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id" class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
tabindex="0" tabindex="0"
@ -130637,7 +130649,9 @@ exports[`Storyshots Views / Orders / Order details payment error 1`] = `
Unpaid Unpaid
</span> </span>
</div> </div>
<div> <div
class="OrderPayment-actions-id"
>
<button <button
class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id" class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
tabindex="0" tabindex="0"
@ -132693,7 +132707,9 @@ exports[`Storyshots Views / Orders / Order details pending payment 1`] = `
Unpaid Unpaid
</span> </span>
</div> </div>
<div> <div
class="OrderPayment-actions-id"
>
<button <button
class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id" class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
tabindex="0" tabindex="0"
@ -134749,7 +134765,9 @@ exports[`Storyshots Views / Orders / Order details refunded payment 1`] = `
Fully refunded Fully refunded
</span> </span>
</div> </div>
<div> <div
class="OrderPayment-actions-id"
>
<button <button
class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id" class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
tabindex="0" tabindex="0"
@ -136818,7 +136836,9 @@ exports[`Storyshots Views / Orders / Order details rejected payment 1`] = `
Unpaid Unpaid
</span> </span>
</div> </div>
<div> <div
class="OrderPayment-actions-id"
>
<button <button
class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id" class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
tabindex="0" tabindex="0"
@ -138874,7 +138894,9 @@ exports[`Storyshots Views / Orders / Order details unfulfilled 1`] = `
Unpaid Unpaid
</span> </span>
</div> </div>
<div> <div
class="OrderPayment-actions-id"
>
<button <button
class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id" class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
tabindex="0" tabindex="0"