Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Increase font on WooPay button #8715

Merged
merged 19 commits into from
Jul 26, 2024
Merged

Increase font on WooPay button #8715

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
19 commits
Select commit Hold shift + click to select a range
3fb9a01
Increase font on WooPay button
LCmry Apr 24, 2024
ab17872
Changelog
LCmry Apr 24, 2024
85f3c44
Merge branch 'develop' into update/increase-woopay-button-font
lovo-h Jul 18, 2024
34b5aed
Make label font-size the same for 'default' and 'wide' width-types
lovo-h Jul 22, 2024
591d081
Merge branch 'develop' into update/increase-woopay-button-font
lovo-h Jul 22, 2024
96a2cbb
Add min-width to WooPay button SVG to prevent it from shrinking too much
lovo-h Jul 22, 2024
a9d6802
Reduce WooPay button's font weight to match Figma designs
lovo-h Jul 22, 2024
5426fa8
Update margins between WooPay button's text and logo to match designs
lovo-h Jul 22, 2024
38b576e
Set WooPay button's min-width to match designs
lovo-h Jul 22, 2024
309747c
Merge branch 'develop' into update/increase-woopay-button-font
lovo-h Jul 23, 2024
587a16f
Increase WooPay Button text font-weight from 400 to 500
lovo-h Jul 24, 2024
9b6986e
Update font stack for WooPay Button's text
lovo-h Jul 24, 2024
b80392f
Increase WooPay Button Text's Font Size For All Button Sizes
lovo-h Jul 24, 2024
020cfe6
Update WooPay button's min-width to prevent button from being cut off
lovo-h Jul 25, 2024
722e2a3
Ensure large WooPay button text fits in button for all widths
lovo-h Jul 25, 2024
2eaf334
Merge branch 'develop' into update/increase-woopay-button-font
lovo-h Jul 25, 2024
0242872
Merge branch 'develop' into update/increase-woopay-button-font
bborman22 Jul 25, 2024
d7d3a91
Update changelog
lovo-h Jul 25, 2024
81cbef8
Merge branch 'develop' into update/increase-woopay-button-font
lovo-h Jul 26, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 4 additions & 0 deletions changelog/update-woopay-button-design
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
Significance: patch
Type: update

Increase font size and update the design of the WooPay button
39 changes: 22 additions & 17 deletions client/checkout/woopay/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -123,10 +123,10 @@
}

.woopay-express-button {
font-size: 11px;
font-size: 18px;
font-weight: 500;
font-family: 'SF Pro Text', 'Helvetica Neue', 'Helvetica', 'Roboto', 'Arial',
sans-serif;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue',
'Helvetica', 'Roboto', 'Arial', sans-serif;
letter-spacing: 0.8px;
height: 40px;
background: $white !important;
Expand Down Expand Up @@ -168,18 +168,17 @@
&[data-type='buy'],
&[data-type='book'],
&[data-type='donate'] {
min-width: 200px;

svg {
flex-shrink: 0.4;
margin-left: 3px;
margin-left: 6px;
}
}

&[data-width-type='wide'] {
font-size: 13px;

svg {
flex-shrink: 1;
margin-left: 6px;
}
}

Expand All @@ -204,71 +203,77 @@
}

&[data-size='medium'] {
font-size: 12px;
font-size: 22px;
height: 48px;

svg {
top: 2px;
width: auto;
height: 27px;
min-width: 60px;
}

&[data-type='buy'],
&[data-type='book'],
&[data-type='donate'] {
min-width: 229px;

svg {
flex-shrink: 0.6;
margin-left: 3px;
margin-left: 8px;
}
}

&[data-width-type='wide'] {
font-size: 14px;

&[data-type='buy'],
&[data-type='book'],
&[data-type='donate'] {
svg {
flex-shrink: 1;
margin-left: 6px;
}
}
}
}

&[data-size='large'] {
font-size: 13px;
font-size: 26px;
height: 55px;

svg {
top: 3px;
width: auto;
height: 32px;
min-width: 70px;
}

&[data-type='buy'],
&[data-type='book'],
&[data-type='donate'] {
min-width: 229px;

svg {
flex-shrink: 0.6;
margin-left: 3px;
margin-left: 10px;
margin-bottom: 0.25rem;
}
}

&[data-width-type='wide'] {
font-size: 16px;

&[data-type='buy'],
&[data-type='book'],
&[data-type='donate'] {
svg {
flex-shrink: 1;
margin-left: 8px;
margin-bottom: 0;
}
}
}

// For this width range, the button's text is too large to fit
// in the button. The text is reduced to 22px to fit.
@media screen and ( min-width: 785px ) and ( max-width: 850px ) {
font-size: 22px;
}
}
}

Expand Down
Loading