diff --git a/src/components/SearchResults/SearchResult.js b/src/components/SearchResults/SearchResult.js
index faecfe468..da661f973 100644
--- a/src/components/SearchResults/SearchResult.js
+++ b/src/components/SearchResults/SearchResult.js
@@ -10,16 +10,15 @@ import SearchContext from './SearchContext';
const LINK_COLOR = '#494747';
// Use string for match styles due to replace/innerHTML
-const SEARCH_MATCH_STYLE = `background-color: ${palette.yellow.light2};`;
const newSearchInput = process.env.GATSBY_TEST_SEARCH_UI === 'true';
+const SEARCH_MATCH_STYLE = newSearchInput
+ ? `background-color: ${palette.green.light2} ; border-radius: 3px; padding-left: 2px; padding-right: 2px;`
+ : `background-color: ${palette.yellow.light2};`;
const largeResultTitle = css`
font-size: ${theme.size.default};
line-height: ${theme.size.medium};
- /* Only add bold on larger devices */
- @media ${theme.screenSize.smallAndUp} {
- font-weight: 600;
- }
+ font-weight: 600;
`;
// Truncates text to a maximum number of lines
@@ -45,10 +44,21 @@ const LearnMoreLink = styled('a')`
const SearchResultContainer = styled('div')`
height: 100%;
+`;
+
+const StyledResultTitle = styled('p')`
+ font-family: 'Euclid Circular A';
+ ${newSearchInput ? `color: #016bf8;` : ``}
+ font-size: ${theme.fontSize.small};
+ line-height: ${theme.size.medium};
+ letter-spacing: 0.5px;
+ height: ${theme.size.medium};
+ margin-bottom: ${theme.size.small};
+ margin-top: 0;
+ ${truncate(1)};
+ ${({ useLargeTitle }) => useLargeTitle && largeResultTitle};
@media ${theme.screenSize.upToSmall} {
- display: flex;
- flex-direction: column;
- height: 100%;
+ ${largeResultTitle};
}
position: relative;
`;
@@ -67,6 +77,9 @@ const SearchResultLink = styled('a')`
transition: background-color 150ms ease-in;
}
}
+ :visited {
+ ${newSearchInput ? `${StyledResultTitle} {color: #5e0c9e;}` : ``}
+ }
`;
const StyledPreviewText = styled(Body)`
@@ -78,21 +91,6 @@ const StyledPreviewText = styled(Body)`
min-height: 20px;
`;
-const StyledResultTitle = styled('p')`
- font-family: 'Euclid Circular A';
- font-size: ${theme.fontSize.small};
- line-height: ${theme.size.medium};
- letter-spacing: 0.5px;
- height: ${theme.size.medium};
- margin-bottom: ${theme.size.small};
- margin-top: 0;
- ${truncate(1)};
- ${({ useLargeTitle }) => useLargeTitle && largeResultTitle};
- @media ${theme.screenSize.upToSmall} {
- ${largeResultTitle};
- }
-`;
-
const StyledTag = styled(Tag)`
${newSearchInput ? searchTagStyleFeature : searchTagStyle}
`;
@@ -110,12 +108,23 @@ const highlightSearchTerm = (text, searchTerm) =>
(result) => `${result}`
);
+const spanAllowedStyles = newSearchInput
+ ? {
+ 'background-color': [new RegExp(`^${palette.green.light2}$`, 'i')],
+ 'border-radius': [new RegExp(`^3px$`)],
+ 'padding-left': [new RegExp(`^2px$`)],
+ 'padding-right': [new RegExp(`^2px$`)],
+ }
+ : { 'background-color': [new RegExp(`^${palette.yellow.light2}$`, 'i')] };
+
// since we are using dangerouslySetInnerHTML, this helper sanitizes input to be safe
const sanitizePreviewHtml = (text) =>
sanitizeHtml(text, {
allowedTags: ['span'],
allowedAttributes: { span: ['style'] },
- allowedStyles: { span: { 'background-color': [new RegExp(`^${palette.yellow.light2}$`, 'i')] } },
+ allowedStyles: {
+ span: spanAllowedStyles,
+ },
});
const SearchResult = React.memo(
@@ -142,7 +151,7 @@ const SearchResult = React.memo(
diff --git a/src/components/SearchResults/SearchResults.js b/src/components/SearchResults/SearchResults.js
index 647c53db6..656c57e80 100644
--- a/src/components/SearchResults/SearchResults.js
+++ b/src/components/SearchResults/SearchResults.js
@@ -132,15 +132,20 @@ const StyledSearchFilters = styled(SearchFilters)`
`;
const searchResultStyling = css`
+ ${newSearchInput
+ ? `
+ box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.1);
+ border-radius: 45px;
+ `
+ : `box-shadow: 0 0 ${theme.size.tiny} 0 rgba(231, 238, 236, 0.4);`}
background-color: #fff;
- box-shadow: 0 0 ${theme.size.tiny} 0 rgba(231, 238, 236, 0.4);
height: ${SEARCH_RESULT_HEIGHT};
position: relative;
/* place-self adds both align-self and justify-self for flexbox */
place-self: center;
width: 100%;
> div {
- padding: ${theme.size.medium};
+ ${newSearchInput ? `padding: 20px; padding-left: 30px;` : `padding: ${theme.size.medium};`}
}
:hover,
:focus {
@@ -198,10 +203,11 @@ const StyledSearchResults = styled('div')`
/* Create the opaque effect on hover by opaquing everything but a hovered result */
:hover {
> ${StyledSearchResult} {
- opacity: 0.2;
- transition: opacity 150ms ease-in;
+ ${!newSearchInput && `opacity: 0.2; transition: opacity 150ms ease-in;`}
+
:hover {
opacity: 1;
+ ${newSearchInput && `box-shadow: 0px 0px 5px 1px rgba(58, 63, 60, 0.15);`}
}
}
}
@@ -311,7 +317,7 @@ const SearchResults = () => {
diff --git a/tests/unit/__snapshots__/SearchResults.test.js.snap b/tests/unit/__snapshots__/SearchResults.test.js.snap
index d002064c2..c7d6e2b63 100644
--- a/tests/unit/__snapshots__/SearchResults.test.js.snap
+++ b/tests/unit/__snapshots__/SearchResults.test.js.snap
@@ -230,8 +230,8 @@ exports[`Search Results Page considers a given search filter query param and dis
-webkit-text-decoration: none;
text-decoration: none;
border-radius: 24px;
- background-color: #fff;
box-shadow: 0 0 4px 0 rgba(231, 238, 236, 0.4);
+ background-color: #fff;
height: 152px;
position: relative;
place-self: center;
@@ -280,20 +280,6 @@ exports[`Search Results Page considers a given search filter query param and dis
.emotion-23 {
height: 100%;
- position: relative;
-}
-
-@media only screen and (max-width: 480px) {
- .emotion-23 {
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
- display: flex;
- -webkit-flex-direction: column;
- -ms-flex-direction: column;
- flex-direction: column;
- height: 100%;
- }
}
.emotion-25 {
@@ -310,24 +296,15 @@ exports[`Search Results Page considers a given search filter query param and dis
overflow: hidden;
font-size: 16px;
line-height: 24px;
-}
-
-@media not all and (max-width: 480px) {
- .emotion-25 {
- font-weight: 600;
- }
+ font-weight: 600;
+ position: relative;
}
@media only screen and (max-width: 480px) {
.emotion-25 {
font-size: 16px;
line-height: 24px;
- }
-
- @media not all and (max-width: 480px) {
- .emotion-25 {
- font-weight: 600;
- }
+ font-weight: 600;
}
}
@@ -2374,8 +2351,8 @@ exports[`Search Results Page renders loading images before returning no results
}
.emotion-14 {
- background-color: #fff;
box-shadow: 0 0 4px 0 rgba(231, 238, 236, 0.4);
+ background-color: #fff;
height: 152px;
position: relative;
place-self: center;
@@ -3162,8 +3139,8 @@ exports[`Search Results Page renders loading images before returning nonempty re
}
.emotion-14 {
- background-color: #fff;
box-shadow: 0 0 4px 0 rgba(231, 238, 236, 0.4);
+ background-color: #fff;
height: 152px;
position: relative;
place-self: center;
@@ -3955,8 +3932,8 @@ exports[`Search Results Page renders results from a given search term query para
-webkit-text-decoration: none;
text-decoration: none;
border-radius: 24px;
- background-color: #fff;
box-shadow: 0 0 4px 0 rgba(231, 238, 236, 0.4);
+ background-color: #fff;
height: 152px;
position: relative;
place-self: center;
@@ -4005,20 +3982,6 @@ exports[`Search Results Page renders results from a given search term query para
.emotion-17 {
height: 100%;
- position: relative;
-}
-
-@media only screen and (max-width: 480px) {
- .emotion-17 {
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
- display: flex;
- -webkit-flex-direction: column;
- -ms-flex-direction: column;
- flex-direction: column;
- height: 100%;
- }
}
.emotion-19 {
@@ -4035,24 +3998,15 @@ exports[`Search Results Page renders results from a given search term query para
overflow: hidden;
font-size: 16px;
line-height: 24px;
-}
-
-@media not all and (max-width: 480px) {
- .emotion-19 {
- font-weight: 600;
- }
+ font-weight: 600;
+ position: relative;
}
@media only screen and (max-width: 480px) {
.emotion-19 {
font-size: 16px;
line-height: 24px;
- }
-
- @media not all and (max-width: 480px) {
- .emotion-19 {
- font-weight: 600;
- }
+ font-weight: 600;
}
}