Skip to content

Commit

Permalink
CSS adjustments
Browse files Browse the repository at this point in the history
  • Loading branch information
Nagesh Pai committed Dec 20, 2024
1 parent f0cc6bf commit e1d5923
Show file tree
Hide file tree
Showing 3 changed files with 108 additions and 64 deletions.
70 changes: 37 additions & 33 deletions client/deposits/details/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -243,42 +243,46 @@ export const DepositOverview: React.FC< DepositOverviewProps > = ( {
</CardHeader>
<CardBody>
<div className="woopayments-payout-details-header">
<h2>
{ __( 'Bank account', 'woocommerce-payments' ) }
</h2>
<div className="woopayments-payout-details-header__value">
{ deposit.bankAccount }
<div className="woopayments-payout-details-header__item">
<h2>
{ __( 'Bank account', 'woocommerce-payments' ) }
</h2>
<div className="woopayments-payout-details-header__value">
{ deposit.bankAccount }
</div>
</div>
<h2>
{ __(
'Bank reference ID',
'woocommerce-payments'
) }
</h2>
<div>
{ deposit.bank_reference_key ? (
<>
<span className="woopayments-payout-details-header__bank-reference-id">
{ deposit.bank_reference_key }
</span>
<CopyButton
textToCopy={
deposit.bank_reference_key
}
label={ __(
'Copy bank reference ID to clipboard',
<div className="woopayments-payout-details-header__item">
<h2>
{ __(
'Bank reference ID',
'woocommerce-payments'
) }
</h2>
<div className="woopayments-payout-details-header__value">
{ deposit.bank_reference_key ? (
<>
<span className="woopayments-payout-details-header__bank-reference-id">
{ deposit.bank_reference_key }
</span>
<CopyButton
textToCopy={
deposit.bank_reference_key
}
label={ __(
'Copy bank reference ID to clipboard',
'woocommerce-payments'
) }
/>
</>
) : (
<div className="woopayments-payout-details-header__value">
{ __(
'Not available',
'woocommerce-payments'
) }
/>
</>
) : (
<div className="woopayments-payout-details-header__value">
{ __(
'Not available',
'woocommerce-payments'
) }
</div>
) }
</div>
) }
</div>
</div>
</div>
</CardBody>
Expand Down
12 changes: 11 additions & 1 deletion client/deposits/details/style.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -58,8 +58,9 @@

.woopayments-payout-details-header {
display: flex;
align-items: flex-start;
flex-wrap: wrap;
justify-content: space-between;
gap: 0.75rem;

&__bank-reference-id {
font-family: monospace;
Expand All @@ -70,10 +71,19 @@
color: $wp-gray-50;
}

&__item {
display: flex;

@include breakpoint( '<660px' ) {
flex-direction: column;
}
}

h2 {
font-size: 0.6875rem;
font-weight: 500;
color: $wp-gray-90;
min-width: 11rem;
text-transform: uppercase;
margin: unset;
}
Expand Down
90 changes: 60 additions & 30 deletions client/deposits/details/test/__snapshots__/index.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -92,22 +92,32 @@ exports[`Deposit overview renders automatic payout correctly 1`] = `
<div
class="woopayments-payout-details-header"
>
<h2>
Bank account
</h2>
<div
class="woopayments-payout-details-header__value"
class="woopayments-payout-details-header__item"
>
MOCK BANK •••• 1234 (USD)
<h2>
Bank account
</h2>
<div
class="woopayments-payout-details-header__value"
>
MOCK BANK •••• 1234 (USD)
</div>
</div>
<h2>
Bank reference ID
</h2>
<div>
<div
class="woopayments-payout-details-header__item"
>
<h2>
Bank reference ID
</h2>
<div
class="woopayments-payout-details-header__value"
>
Not available
<div
class="woopayments-payout-details-header__value"
>
Not available
</div>
</div>
</div>
</div>
Expand Down Expand Up @@ -222,22 +232,32 @@ exports[`Deposit overview renders automatic withdrawal correctly 1`] = `
<div
class="woopayments-payout-details-header"
>
<h2>
Bank account
</h2>
<div
class="woopayments-payout-details-header__value"
class="woopayments-payout-details-header__item"
>
MOCK BANK •••• 1234 (USD)
<h2>
Bank account
</h2>
<div
class="woopayments-payout-details-header__value"
>
MOCK BANK •••• 1234 (USD)
</div>
</div>
<h2>
Bank reference ID
</h2>
<div>
<div
class="woopayments-payout-details-header__item"
>
<h2>
Bank reference ID
</h2>
<div
class="woopayments-payout-details-header__value"
>
Not available
<div
class="woopayments-payout-details-header__value"
>
Not available
</div>
</div>
</div>
</div>
Expand Down Expand Up @@ -406,22 +426,32 @@ exports[`Deposit overview renders instant deposit correctly 1`] = `
<div
class="woopayments-payout-details-header"
>
<h2>
Bank account
</h2>
<div
class="woopayments-payout-details-header__value"
class="woopayments-payout-details-header__item"
>
MOCK BANK •••• 1234 (USD)
<h2>
Bank account
</h2>
<div
class="woopayments-payout-details-header__value"
>
MOCK BANK •••• 1234 (USD)
</div>
</div>
<h2>
Bank reference ID
</h2>
<div>
<div
class="woopayments-payout-details-header__item"
>
<h2>
Bank reference ID
</h2>
<div
class="woopayments-payout-details-header__value"
>
Not available
<div
class="woopayments-payout-details-header__value"
>
Not available
</div>
</div>
</div>
</div>
Expand Down

0 comments on commit e1d5923

Please sign in to comment.