Admin dashboard: button style issues (stats, footer)

[Jeremy Herve]

Some of the button styles seem to cause layout oddities in the Jetpack dashboard. Here are some examples:

• When Stats are disabled, go to Jetpack > Settings and search for stats

• At the bottom of the Settings screen, click on the menu items; when focused, a button pill appears:

Screen.Recording.2024-05-29.at.11.25.11.mov

We may have to update the styles there to avoid such issues.

jetpack/projects/plugins/jetpack/_inc/client/traffic/site-stats.jsx

Lines 210 to 212 in 54d3e86

 Button: ( 
 	<Button rna className="jp-link-button" onClick={ this.activateStats } /> 
 ), 

jetpack/projects/plugins/jetpack/_inc/client/components/button/style.scss

Lines 6 to 10 in 14361cd

 // ========================================================================== 
 // Buttons 
 // ========================================================================== 
  
 .dops-button { 

jetpack/projects/js-packages/components/components/jetpack-footer/index.tsx

Lines 139 to 156 in 4b1333c

 <li key={ item.label }> 
 	<a 
 		href={ item.href } 
 		title={ item.title } 
 		target={ item.target } 
 		onClick={ item.onClick } 
 		onKeyDown={ item.onKeyDown } 
 		className={ classnames( 'jp-dashboard-footer__menu-item', { 
 			'is-external': isExternalLink, 
 		} ) } 
 		role={ item.role } 
 		rel={ isExternalLink ? 'noopener noreferrer' : undefined } 
 		tabIndex={ isButton ? 0 : undefined } 
 	> 
 		{ item.label } 
 		{ isExternalLink && <ExternalIcon /> } 
 	</a> 
 </li> 

jetpack/projects/js-packages/components/components/jetpack-footer/style.scss

Lines 27 to 32 in 4b1333c

 &:focus { 
 	border-radius: 2px; 
 	box-shadow: none; 
 	outline: 1.5px solid currentColor; 
 	outline-offset: 3px; 
 }