Revert "DOP-3938 Search Results Padding and font changes (#878)"

This reverts commit 342dd7e.
mongodb · Sep 29, 2023 · 11c03cc · 11c03cc
1 parent 94169b3
commit 11c03cc
Show file tree

Hide file tree

Showing 5 changed files with 142 additions and 88 deletions.
diff --git a/src/components/DocumentBody.js b/src/components/DocumentBody.js
@@ -86,7 +86,7 @@ const DocumentBody = (props) => {
   const lookup = slug === '/' ? 'index' : slug;
   const pageTitle = getPlaintext(getNestedValue(['slugToTitle', lookup], metadata)) || 'MongoDB Documentation';
 
-  const { Template, useChatbot, isSearch } = getTemplate(template);
+  const { Template, useChatbot } = getTemplate(template);
 
   const isInPresentationMode = usePresentationMode()?.toLocaleLowerCase() === 'true';
 
@@ -101,7 +101,7 @@ const DocumentBody = (props) => {
         isInPresentationMode={isInPresentationMode}
       >
         <FootnoteContext.Provider value={{ footnotes }}>
-          <Template {...props} useChatbot={useChatbot} isSearch={isSearch}>
+          <Template {...props} useChatbot={useChatbot}>
             {pageNodes.map((child, index) => (
               <ComponentFactory key={index} metadata={metadata} nodeData={child} page={page} slug={slug} />
             ))}

diff --git a/src/components/SearchResults/SearchResults.js b/src/components/SearchResults/SearchResults.js
@@ -1,16 +1,15 @@
 import { navigate } from 'gatsby';
 import React, { useEffect, useState, useCallback, useContext, useRef } from 'react';
 import Skeleton from 'react-loading-skeleton';
-import { Global } from '@emotion/react';
-import { css, cx } from '@leafygreen-ui/emotion';
+import { css, Global } from '@emotion/react';
 import styled from '@emotion/styled';
 import { useLocation } from '@gatsbyjs/reach-router';
 import Button from '@leafygreen-ui/button';
 import Icon from '@leafygreen-ui/icon';
 import { SearchInput } from '@leafygreen-ui/search-input';
 import Pagination from '@leafygreen-ui/pagination';
 import { palette } from '@leafygreen-ui/palette';
-import { H3, H1, Overline } from '@leafygreen-ui/typography';
+import { H1, Overline } from '@leafygreen-ui/typography';
 import queryString from 'query-string';
 import useScreenSize from '../../hooks/useScreenSize';
 import { theme } from '../../theme/docsTheme';
@@ -42,11 +41,6 @@ const commonTextStyling = css`
   margin: 0;
 `;
 
-const headerStyle = css`
-  color: ${palette.green.dark2};
-  padding-bottom: 24px;
-`;
-
 const EmptyResultsContainer = styled('div')`
   /* We want to place the empty state in the middle of the page. To do so, we
   must account for any margins added from using the blank landing template,
@@ -57,6 +51,12 @@ const EmptyResultsContainer = styled('div')`
 
 const HeaderContainer = styled('div')`
   grid-area: header;
+
+  > h1:first-of-type {
+    color: ${palette.green.dark2};
+    padding-bottom: 40px;
+    margin: unset;
+  }
 `;
 
 const FiltersContainer = styled('div')`
@@ -86,7 +86,7 @@ const SearchResultsContainer = styled('div')`
   grid-template-columns: auto ${FILTER_COLUMN_WIDTH};
   margin: ${theme.size.large} 108px ${theme.size.xlarge} ${theme.size.large};
   max-width: 1150px;
-  row-gap: ${theme.size.small};
+  row-gap: ${theme.size.large};
 
   @media ${theme.screenSize.upTo2XLarge} {
     margin: ${theme.size.large} 40px ${theme.size.xlarge} 40px;
@@ -380,9 +380,7 @@ const SearchResults = () => {
       <SearchResultsContainer>
         {/* new header for search bar */}
         <HeaderContainer>
-          <H3 as={H1} className={cx(headerStyle)}>
-            Search Results
-          </H3>
+          <H1>Search Results</H1>
           <SearchInput
             ref={searchBoxRef}
             value={searchField}

diff --git a/src/templates/landing.js b/src/templates/landing.js
@@ -72,7 +72,7 @@ const Wrapper = styled('main')`
 `;
 
 // The Landing template exclusively represents mongodb.com/docs. All other landings use the ProductLanding template
-const Landing = ({ children, pageContext, isSearch, useChatbot }) => {
+const Landing = ({ children, pageContext, useChatbot }) => {
   const { fontSize, screenSize, size } = useTheme();
   return (
     <>
@@ -125,13 +125,10 @@ const Landing = ({ children, pageContext, isSearch, useChatbot }) => {
               grid-column: 2 / -2;
             }
           }
-          ${!isSearch &&
-          `
           main h1:first-of-type {
             color: ${palette.white};
-            ${
-              SHOW_CHATBOT && useChatbot
-                ? `
+            ${SHOW_CHATBOT && useChatbot
+              ? `
               color: ${palette.black};
               grid-column: 2/-1;
               margin: ${size.large} 0;
@@ -143,14 +140,12 @@ const Landing = ({ children, pageContext, isSearch, useChatbot }) => {
                 line-height: 40px;
               }
             `
-                : `
+              : `
               @media ${screenSize.upToMedium} {
                 color: ${palette.green.dark2};
               }
-              `
-            }
+              `}
           }
-          `}
           .span-columns {
             grid-column: 3 / -3 !important;
             margin: ${size.xlarge} 0;
@@ -233,7 +228,6 @@ Landing.propTypes = {
     page: PropTypes.object.isRequired,
   }).isRequired,
   useChatbot: PropTypes.bool,
-  isSearch: PropTypes.bool,
 };
 
 export default Landing;
diff --git a/src/utils/get-template.js b/src/utils/get-template.js
@@ -13,7 +13,6 @@ import {
 const getTemplate = (templateName) => {
   let template;
   let sidenav;
-  let isSearch = false;
   let useChatbot = false;
   switch (templateName) {
     case 'blank':
@@ -49,7 +48,6 @@ const getTemplate = (templateName) => {
     case 'search':
       template = Landing;
       sidenav = true;
-      isSearch = true;
       break;
     // Default template and guide template share very similar layouts
     default:
@@ -58,7 +56,7 @@ const getTemplate = (templateName) => {
       break;
   }
 
-  return { Template: template, sidenav, isSearch, useChatbot };
+  return { Template: template, sidenav, useChatbot };
 };
 
 export { getTemplate };