diff --git a/client/components/seo/search-preview/index.jsx b/client/components/seo/search-preview/index.jsx index e47cf8b17fc20..77590d058742e 100644 --- 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 ( -
-

{ this.props.translate( 'Search Preview' ) }

-
-
{ googleTitle( title ) }
-
{ googleUrl( url ) } ▾
-
{ googleSnippet( snippet || '' ) }
+
+

{ this.props.translate( 'Search Preview' ) }

+
+
{ googleTitle( title ) }
+
{ googleUrl( url ) } ▾
+
{ googleSnippet( snippet || '' ) }
); diff --git a/client/components/seo/style.scss b/client/components/seo/style.scss index ecbd67e9f47a7..7aedd3699a4dd 100644 --- 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,7 +42,7 @@ } } -.seo-search-preview__url { +.search-preview__url { color: #006621; // matching Google results font-size: 14px; height: 17px; @@ -50,7 +50,7 @@ max-width: 616px; } -.seo-search-preview__snippet { +.search-preview__snippet { color: #545454; // matching Google results font-size: 13px; line-height: 1.4;