Increase font on WooPay button (#8715)

Co-authored-by: Hector Lovo <[email protected]> Co-authored-by: Hector Lovo <[email protected]> Co-authored-by: Brian Borman <[email protected]>
Automattic · Jul 26, 2024 · 13b9d3f · 13b9d3f
1 parent c209e66
commit 13b9d3f
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 17 deletions.
diff --git a/changelog/update-woopay-button-design b/changelog/update-woopay-button-design
@@ -0,0 +1,4 @@
+Significance: patch
+Type: update
+
+Increase font size and update the design of the WooPay button
diff --git a/client/checkout/woopay/style.scss b/client/checkout/woopay/style.scss
@@ -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;
@@ -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;
 		}
 	}
 
@@ -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;
+		}
 	}
 }