Follow CSS namespace guidelines for search-preview (#31665)

Automattic · Mar 22, 2019 · 99069cc · 99069cc
1 parent 6c2c113
commit 99069cc
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 11 deletions.
diff --git a/client/components/seo/search-preview/index.jsx b/client/components/seo/search-preview/index.jsx
@@ -31,12 +31,12 @@ export class SearchPreview extends React.PureComponent {
 		const { snippet, title, url } = this.props;
 
 		return (
-			<div className="seo-search-preview">
-				<h2 className="seo-search-preview__header">{ this.props.translate( 'Search Preview' ) }</h2>
-				<div className="seo-search-preview__display">
-					<div className="seo-search-preview__title">{ googleTitle( title ) }</div>
-					<div className="seo-search-preview__url">{ googleUrl( url ) } ▾</div>
-					<div className="seo-search-preview__snippet">{ googleSnippet( snippet || '' ) }</div>
+			<div className="search-preview">
+				<h2 className="search-preview__header">{ this.props.translate( 'Search Preview' ) }</h2>
+				<div className="search-preview__display">
+					<div className="search-preview__title">{ googleTitle( title ) }</div>
+					<div className="search-preview__url">{ googleUrl( url ) } ▾</div>
+					<div className="search-preview__snippet">{ googleSnippet( snippet || '' ) }</div>
 				</div>
 			</div>
 		);

diff --git a/client/components/seo/style.scss b/client/components/seo/style.scss
@@ -9,7 +9,7 @@
  * @blame: dmsnell
 */
 
-.seo-search-preview__header {
+.search-preview__header {
 	margin: 0;
 	padding: 8px 0;
 	background-color: var( --color-neutral-0 );
@@ -23,14 +23,14 @@
 	color: var( --color-neutral-400 );
 }
 
-.seo-search-preview__display {
+.search-preview__display {
 	border: 1px solid var( --color-neutral-0 );
 	font-family: arial, sans-serif;
 	padding: 10px 20px;
 	word-wrap: break-word;
 }
 
-.seo-search-preview__title {
+.search-preview__title {
 	color: #1a0dab; // matching Google results
 	font-size: 18px;
 	line-height: 1.2;
@@ -42,15 +42,15 @@
 	}
 }
 
-.seo-search-preview__url {
+.search-preview__url {
 	color: #006621; // matching Google results
 	font-size: 14px;
 	height: 17px;
 	line-height: 16px;
 	max-width: 616px;
 }
 
-.seo-search-preview__snippet {
+.search-preview__snippet {
 	color: #545454; // matching Google results
 	font-size: 13px;
 	line-height: 1.4;