Skip to content

Commit 22fb215

Browse files
jjchrisdiehljjchrisdiehl
committed
Final styling changes to payment method details
1 parent 899d4cb commit 22fb215

File tree

3 files changed

+125
-137
lines changed

3 files changed

+125
-137
lines changed

‎client/me/purchases/payment-methods/payment-method-backup-toggle.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -78,7 +78,7 @@ export default function PaymentMethodBackupToggle( { card }: { card: StoredPayme
7878
checked={ isBackup }
7979
onChange={ toggleIsBackup }
8080
label={
81-
translate( 'Use as backup.{{supportLink /}}', {
81+
translate( 'Use as backup{{supportLink /}}', {
8282
components: {
8383
supportLink: (
8484
<InlineSupportLink

‎client/me/purchases/payment-methods/payment-method-details.tsx

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -51,6 +51,8 @@ const PaymentMethodDetails: FunctionComponent< Props > = ( {
5151
alt=""
5252
/>
5353
<div className="payment-method-details__details">
54+
{ razorpayVpa && <span className="payment-method-details__vpa">{ razorpayVpa }</span> }
55+
<span className="payment-method-details__name">{ name }</span>
5456
<span className="payment-method-details__number">
5557
<PaymentMethodSummary type={ type } digits={ lastDigits } email={ email } />
5658
</span>
@@ -74,10 +76,6 @@ const PaymentMethodDetails: FunctionComponent< Props > = ( {
7476
{ translate( 'Credit card expired' ) }
7577
</span>
7678
) }
77-
78-
{ razorpayVpa && <span className="payment-method-details__vpa">{ razorpayVpa }</span> }
79-
80-
<span className="payment-method-details__name">{ name }</span>
8179
</div>
8280
</div>
8381
);

‎client/me/purchases/payment-methods/style.scss

Lines changed: 122 additions & 132 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,19 @@
1+
$card_width: $font-body * 3.75; // roughly 60px wide
2+
@mixin payment-details-col-start( $reset: false ) {
3+
// Handles the logo column spacing
4+
@if $reset == false {
5+
margin-inline-start: calc( #{$card-width} + #{$font-body} );
6+
} @else {
7+
margin-inline-start: 0;
8+
}
9+
}
10+
111
.payment-method-list__payment-methods {
212
margin-top: 12px;
3-
}
413

5-
.payment-method-list__payment-methods > div {
6-
width: 100%;
14+
> div {
15+
width: 100%;
16+
}
717
}
818

919
.payment-method-list__loader {
@@ -20,115 +30,137 @@
2030
}
2131

2232
.payment-method {
23-
margin-bottom: 0;
2433
display: grid;
2534
grid-template-areas:
26-
"payment-method-details"
27-
"payment-method-billing-information"
28-
"payment-method-backup"
29-
"payment-method-delete";
35+
'payment-method-details'
36+
'payment-method-billing-information'
37+
'payment-method-backup'
38+
'payment-method-delete';
3039
grid-template-columns: 1fr;
3140
align-items: center;
32-
justify-content: space-between;
33-
flex-wrap: wrap;
3441
width: 100%;
42+
gap: 0.75rem 1rem;
3543

36-
@include breakpoint-deprecated( ">480px" ) {
44+
@include breakpoint-deprecated( '>480px' ) {
3745
grid-template-areas:
38-
"payment-method-details payment-method-backup"
39-
"payment-method-billing-information payment-method-delete";
46+
'payment-method-details payment-method-backup'
47+
'payment-method-billing-information payment-method-delete';
4048
grid-template-columns: 2fr 1fr;
4149
}
42-
}
4350

44-
.payment-method-details {
45-
display: flex;
46-
align-items: center;
47-
grid-area: payment-method-details;
48-
}
49-
50-
.payment-method-details__image {
51-
width: 60px;
52-
height: 38px;
53-
margin-right: 16px;
54-
}
51+
// Payment Method Details (Row 1)
52+
&-details {
53+
display: flex;
54+
align-items: center;
55+
grid-area: payment-method-details;
56+
gap: $font-body;
57+
width: 100%;
58+
59+
&__image {
60+
width: 60px;
61+
height: 38px;
62+
flex-shrink: 0;
63+
}
5564

56-
.payment-method-details__details {
57-
flex-grow: 1;
58-
margin-right: 16px;
59-
}
65+
&__details {
66+
display: flex;
67+
flex-wrap: wrap;
68+
flex-grow: 1;
69+
gap: 0.25rem 0.5rem;
70+
align-items: baseline;
71+
min-width: 0; // Prevents overflow issues
72+
}
6073

61-
.payment-method-details__number {
62-
color: var(--color-neutral-80);
63-
display: block;
64-
margin-right: 12px;
74+
&__name,
75+
&__vpa {
76+
color: var( --color-neutral-50 );
77+
display: flex;
78+
flex-wrap: wrap;
79+
align-items: center;
80+
flex-basis: 100%; // Ensures full-width name/VPA line
81+
font-size: $font-body;
82+
gap: 0.5rem;
83+
84+
.components-badge {
85+
flex-shrink: 0;
86+
}
87+
}
6588

66-
@include breakpoint-deprecated( ">960px" ) {
67-
display: inline;
89+
&__number,
90+
&__expiration-date {
91+
color: var( --color-neutral-80 );
92+
white-space: nowrap;
93+
font-size: $font-body-small;
94+
display: inline-flex;
95+
min-width: 0;
96+
}
6897
}
69-
}
7098

71-
.payment-method-details__expiration-date {
72-
margin-right: 12px;
73-
display: block;
99+
// Billing Info (Row 2)
100+
&-tax-info {
101+
@include payment-details-col-start;
102+
font-size: $font-body-small;
103+
grid-area: payment-method-billing-information;
74104

75-
@include breakpoint-deprecated( ">960px" ) {
76-
display: inline;
105+
@include breakpoint-deprecated( '>480px' ) {
106+
width: auto;
107+
}
77108
}
78-
}
79109

80-
.payment-method-details__expiration-notice {
81-
font-size: 0.875rem;
82-
display: block;
110+
// Backup Toggle & Delete Button (Share common styles)
111+
&-backup-toggle,
112+
&-delete {
113+
@include payment-details-col-start;
83114

84-
@include breakpoint-deprecated( ">960px" ) {
85-
display: inline-block;
86-
}
115+
@include breakpoint-deprecated( '>480px' ) {
116+
@include payment-details-col-start( true );
117+
justify-self: flex-end;
87118

88-
.gridicon {
89-
vertical-align: text-bottom;
90-
margin-right: 4px;
119+
&__button {
120+
text-align: end;
121+
}
122+
}
91123
}
92124

93-
&.is-expired {
94-
color: var(--color-error);
95-
}
96-
}
125+
&-backup-toggle {
126+
grid-area: payment-method-backup;
97127

98-
.payment-method-details__name,
99-
.payment-method-details__vpa {
100-
color: var(--color-neutral-50);
101-
display: block;
102-
font-size: 0.875rem;
103-
}
128+
// Ensure checkbox, label, and icon align properly
129+
.components-flex {
130+
display: flex;
131+
align-items: center;
132+
column-gap: 0.5rem;
133+
min-width: 0; // Ensures text wraps naturally if needed
134+
}
104135

105-
.payment-method .payment-method-tax-info {
106-
font-size: 0.875rem;
107-
grid-area: payment-method-billing-information;
108-
margin-left: 76px;
136+
// Ensure the text takes up available space
137+
.components-checkbox-control__label {
138+
display: flex;
139+
align-items: center;
140+
flex-grow: 1;
141+
white-space: normal;
142+
column-gap: 0.25rem;
143+
}
109144

110-
@include breakpoint-deprecated( ">480px" ) {
111-
width: auto;
145+
// Prevent checkbox and icon from shrinking
146+
.components-base-control__field,
147+
.components-checkbox-control__input-container,
148+
.inline-support-link {
149+
margin: 0;
150+
flex-shrink: 0;
151+
}
112152
}
113-
}
114153

115-
.payment-method-delete {
116-
grid-area: payment-method-delete;
117-
margin-top: 12px;
118-
text-align: right;
154+
&-delete {
155+
grid-area: payment-method-delete;
119156

120-
@include breakpoint-deprecated( ">480px" ) {
121-
margin-top: 0;
122-
justify-self: flex-end;
157+
&__button {
158+
text-decoration: underline;
159+
padding: 0;
160+
}
123161
}
124162
}
125163

126-
.payment-method-delete__button {
127-
text-decoration: underline;
128-
padding: 0;
129-
text-align: right;
130-
}
131-
132164
.payment-method-delete-dialog {
133165
&.dialog {
134166
max-width: 660px;
@@ -138,87 +170,45 @@
138170
font-size: $font-body-small;
139171

140172
&.payment-method-delete-dialog__affected-subscription-domain {
141-
color: var(--color-text-subtle);
173+
color: var( --color-text-subtle );
142174
font-size: $font-body-extra-small;
143175
}
144176

145177
&.payment-method-delete-dialog__affected-subscription-date span {
146-
color: var(--color-error);
178+
color: var( --color-error );
147179
font-size: $font-body-extra-small;
148180
text-align: center;
149181
}
150182
}
151183
}
152184

153185
.payment-method-delete-dialog__affected-subscriptions-wrapper {
154-
border-top: 1px solid var(--color-border-subtle);
186+
border-top: 1px solid var( --color-border-subtle );
155187
padding-top: 12px;
156188
}
157189

158-
.payment-method-delete-dialog__affected-subscriptions-title-wrapper {
159-
display: flex;
160-
gap: 12px;
161-
flex-wrap: wrap;
162-
justify-content: space-between;
163-
margin-bottom: 8px;
164-
165-
.card-heading {
166-
margin: 0;
167-
}
168-
}
169-
170-
.payment-method-delete-dialog__affected-subscription {
171-
background: var(--color-neutral-0);
172-
border-radius: 4px;
173-
display: flex;
174-
gap: 12px;
175-
justify-content: space-between;
176-
padding: 12px;
177-
margin-top: 14px;
178-
}
179-
180190
.payment-method-delete-dialog__warning {
181191
display: flex;
182192
margin-top: 12px;
183193
gap: 12px;
184194

185195
.gridicon {
186-
fill: var(--color-warning);
196+
fill: var( --color-warning );
187197
}
188198

189199
p {
190-
color: var(--color-warning);
200+
color: var( --color-warning );
191201
font-size: $font-body-small;
192202
}
193203
}
194-
195-
.card-heading {
196-
margin-top: 0;
197-
}
198-
}
199-
200-
.payment-method-backup-toggle {
201-
grid-area: payment-method-backup;
202-
margin-inline-start: 76px;
203-
margin-top: 16px;
204-
width: 100%;
205-
206-
@include breakpoint-deprecated( ">480px" ) {
207-
margin-left: 0;
208-
margin-top: 0;
209-
width: auto;
210-
justify-self: flex-end;
211-
}
212204
}
213205

214206
.payment-method__wrapper {
215207
margin-bottom: 0;
216-
}
217208

218-
/* Jetpack cloud overwrites */
219-
220-
.payment-method__wrapper--jetpack-cloud {
221-
.components-checkbox-control__input[type="checkbox"]:checked {
222-
background-color: var(--studio-jetpack-green-50);
209+
&--jetpack-cloud {
210+
.components-checkbox-control__input[type='checkbox']:checked {
211+
background-color: var( --studio-jetpack-green-50 );
212+
}
223213
}
224214
}

0 commit comments

Comments
 (0)