[Store Alerts] Adjust inner styles (#49174)

* apply CSS

* adjust margin

* cleanup

* adjust gap between buttons

* Add changefile(s) from automation for the following project(s): woocommerce

* Update plugins/woocommerce-admin/client/layout/store-alerts/index.js

Co-authored-by: Chi-Hsuan Huang <chihsuan.tw@gmail.com>

* remove button sizes media query

* remove marketplace styles

* fix tests

* fix marketplace css, again

* reapply narrow margin

---------

Co-authored-by: github-actions <github-actions@github.com>
Co-authored-by: Chi-Hsuan Huang <chihsuan.tw@gmail.com>
Co-authored-by: Ilyas Foo <foo.ilyas@gmail.com>

plugins/woocommerce-admin/client/layout/store-alerts/index.js

@@ -24,7 +24,6 @@ import {
 	useUserPreferences,
 } from '@woocommerce/data';
 import { recordEvent } from '@woocommerce/tracks';
-import { Text } from '@woocommerce/experimental';
 import {
 	navigateTo,
 	parseAdminUrl,
@@ -107,12 +106,12 @@ export const StoreAlerts = () => {
 	}
 
 	function renderActions( alert ) {
-		const actions = alert.actions.map( ( action ) => {
+		const actions = alert.actions.map( ( action, idx ) => {
+			const variant = idx === 0 ? 'secondary' : 'tertiary';
 			return (
 				<Button
 					key={ action.name }
-					isPrimary={ action.primary }
-					isSecondary={ ! action.primary }
+					variant={ variant }
 					href={ action.url || undefined }
 					onClick={ async ( event ) => {
 						const url = event.currentTarget.getAttribute( 'href' );
@@ -315,33 +314,15 @@ export const StoreAlerts = () => {
 
 	return (
 		<Card className={ className } size={ null }>
-			<Button
-				className="woocommerce-store-alerts__close"
-				onClick={ () => onDismiss( alert ) }
+			<CardHeader
+				className="woocommerce-store-alerts__header"
+				isBorderless
 			>
-				<Icon icon={ close } />
-			</Button>
-			<CardHeader isBorderless>
-				<Text
-					variant="title.medium"
-					as="h2"
-					size="18"
-					lineHeight="24px"
-				>
+				<span className="woocommerce-store-alerts__title">
 					{ alert.title }
-				</Text>
+				</span>
 				{ numberOfAlerts > 1 && (
 					<div className="woocommerce-store-alerts__pagination">
-						<Button
-							onClick={ previousAlert }
-							disabled={ currentIndex === 0 }
-							label={ __( 'Previous Alert', 'woocommerce' ) }
-						>
-							<Icon
-								icon={ chevronLeft }
-								className="arrow-left-icon"
-							/>
-						</Button>
 						<span
 							className="woocommerce-store-alerts__pagination-label"
 							role="status"
@@ -364,6 +345,16 @@ export const StoreAlerts = () => {
 								},
 							} ) }
 						</span>
+						<Button
+							onClick={ previousAlert }
+							disabled={ currentIndex === 0 }
+							label={ __( 'Previous Alert', 'woocommerce' ) }
+						>
+							<Icon
+								icon={ chevronLeft }
+								className="arrow-left-icon"
+							/>
+						</Button>
 						<Button
 							onClick={ nextAlert }
 							disabled={ numberOfAlerts - 1 === currentIndex }
@@ -376,6 +367,12 @@ export const StoreAlerts = () => {
 						</Button>
 					</div>
 				) }
+				<Button
+					className="woocommerce-store-alerts__close"
+					onClick={ () => onDismiss( alert ) }
+				>
+					<Icon width="18" height="18" icon={ close } />
+				</Button>
 			</CardHeader>
 			<CardBody>
 				<div

plugins/woocommerce-admin/client/layout/store-alerts/style.scss

@@ -1,7 +1,9 @@
 .woocommerce-store-alerts {
+	font-size: 13px;
+	line-height: 19.5px;
 	position: relative;
 	margin: 40px 20px;
-	padding: $gap-large;
+	padding: 12px 12px 12px 16px;
 	border: 0;
 	box-shadow: 0 0 8px -2px rgba(0, 0, 0, 0.3);
 	left: 0;
@@ -69,26 +71,15 @@
 		min-height: 36px;
 		padding: 4px 16px;
 
-		@include breakpoint("<782px") {
-			min-height: 36px;
-			font-size: 16px;
-			line-height: 1.625;
-			padding: 5px 16px;
-		}
-
 		&.is-button {
 			color: $gray-700;
 		}
 	}
 
 	.woocommerce-store-alerts__close {
-		position: absolute;
-		top: -3px;
-		right: -3px;
-		svg {
-			width: 14px;
-			height: 14px;
-		}
+		padding: 3px;
+		height: 24px;
+		width: 24px;
 	}
 
 	@include breakpoint("<782px") {
@@ -96,16 +87,21 @@
 		padding: $gap;
 
 		.components-card__header {
-			display: flex;
-			flex-direction: column-reverse;
 			align-items: flex-start;
 		}
 	}
 }
 
+.woocommerce-store-alerts__title {
+	font-size: 13px;
+	line-height: 19.5px;
+	font-weight: 700;
+	flex: 1;
+}
+
 .woocommerce-store-alerts__actions {
 	display: flex;
-	gap: 10px;
+	gap: 8px;
 	flex-wrap: wrap;
 }
 
@@ -138,20 +134,19 @@
 }
 
 .components-card__body .woocommerce-store-alerts__message {
-	margin-bottom: 16px;
+	margin-bottom: 12px;
 }
 
 .woocommerce-store-alerts__pagination {
 	display: inline-flex;
 	align-items: center;
-	border: 1px solid $button-border;
-	border-radius: 4px;
-	background: $button;
-	margin-left: 16px;
-	min-width: 120px;
+	gap: 2px;
 
 	.components-button {
-		padding: 4px;
+		padding: 0;
+		height: 24px;
+		width: 24px;
+		border: 1px solid #dcdcde;
 
 		/*!rtl:ignore*/
 		.rtl & .arrow-left-icon,
@@ -161,31 +156,8 @@
 	}
 
 	.woocommerce-store-alerts__pagination-label {
-		padding: 5px 12px;
-		border-width: 0 1px;
-		border-color: $button-border;
-		border-style: solid;
-		flex: 1 1;
-		@include font-size(14);
-	}
-
-	@include breakpoint("<782px") {
-		margin-left: 0;
-		margin-bottom: 14px;
-
-		.woocommerce-store-alerts__pagination-label {
-			text-align: center;
-		}
-	}
-
-	button:first-child {
-		border-top-right-radius: 0;
-		border-bottom-right-radius: 0;
-	}
-
-	button:last-child {
-		border-top-left-radius: 0;
-		border-bottom-left-radius: 0;
+		font-size: 13px;
+		margin: 0 10px;
 	}
 }
 

plugins/woocommerce-admin/client/layout/store-alerts/test/index.js

@@ -74,9 +74,10 @@ describe( 'StoreAlerts', () => {
 		} );
 		const { container } = render( <StoreAlerts /> );
 
-		expect( container.querySelector( 'h2' ).textContent ).toBe(
-			'Alert title 1'
-		);
+		expect(
+			container.querySelector( '.woocommerce-store-alerts__title' )
+				.textContent
+		).toBe( 'Alert title 1' );
 		expect(
 			container.querySelector( '.woocommerce-store-alerts__message' )
 				.textContent
@@ -171,24 +172,27 @@ describe( 'StoreAlerts', () => {
 			<StoreAlerts />
 		);
 
-		expect( container.querySelector( 'h2' ).textContent ).toBe(
-			'Alert title 1'
-		);
+		expect(
+			container.querySelector( '.woocommerce-store-alerts__title' )
+				.textContent
+		).toBe( 'Alert title 1' );
 
 		fireEvent.click( getByLabelText( 'Next Alert' ) );
 
 		rerender( <StoreAlerts /> );
 
-		expect( container.querySelector( 'h2' ).textContent ).toBe(
-			'Alert title 2'
-		);
+		expect(
+			container.querySelector( '.woocommerce-store-alerts__title' )
+				.textContent
+		).toBe( 'Alert title 2' );
 
 		fireEvent.click( getByLabelText( 'Previous Alert' ) );
 
 		rerender( <StoreAlerts /> );
 
-		expect( container.querySelector( 'h2' ).textContent ).toBe(
-			'Alert title 1'
-		);
+		expect(
+			container.querySelector( '.woocommerce-store-alerts__title' )
+				.textContent
+		).toBe( 'Alert title 1' );
 	} );
 } );

plugins/woocommerce-admin/client/marketplace/marketplace.scss

@@ -22,14 +22,13 @@
 
 	/* On marketplace pages, reposition store alerts so they don't collide with other components */
 	.woocommerce-store-alerts {
-		margin-left: 16px;
+		margin-left: 24px;
 		margin-right: 16px;
 		margin-top: 16px;
 
-		@media (min-width: $breakpoint-medium) {
-			margin-left: 32px;
-			margin-right: 32px;
-			margin-top: 32px;
+		@include breakpoint("<782px") {
+			margin-left: 16px;
+			width: 100%;
 		}
 	}
 }

plugins/woocommerce/changelog/49174-update-store-alerts-inner-styles

@@ -0,0 +1,4 @@
+Significance: patch
+Type: update
+
+Update Store Alert styles