Merge pull request #388 from vtexdocs/fix/search-page-style

Fix/search page style
vtexdocs · May 24, 2023 · a7a4db8 · a7a4db8
2 parents d30ee3d + ef36358
commit a7a4db8
Show file tree

Hide file tree

Showing 6 changed files with 15 additions and 6 deletions.
diff --git a/src/components/search-card/index.tsx b/src/components/search-card/index.tsx
@@ -37,7 +37,7 @@ const SearchCard = ({
   hit,
 }: SearchCardProps) => {
   const actionValue = actionType ? getAction(actionType) : null
-  const [toggleChildResults, setToggleChildResults] = useState<boolean>(false)
+  const [toggleChildResults, setToggleChildResults] = useState<boolean>(true)
   return (
     <Link href={url} legacyBehavior>
       <Flex sx={styles.containerActive(method)}>

diff --git a/src/components/search-card/styles.ts b/src/components/search-card/styles.ts
@@ -11,7 +11,7 @@ const container: SxStyleProp = {
   paddingTop: '26px',
   paddingBottom: '10px',
   paddingLeft: ['13px', '44px'],
-  paddingRight: '13px',
+  paddingRight: ['13px', '34px'],
   background: '#FFFFFF',
   cursor: 'pointer',
 }

diff --git a/src/components/search-input/customHighlight.tsx b/src/components/search-input/customHighlight.tsx
@@ -120,7 +120,7 @@ const Highlight = ({
       className="hit-content-title"
       sx={styles.hitContentContainer}
     >
-      <Text sx={styles.hitContent}>
+      <Text sx={searchPage ? styles.hitContent : styles.hitContentSmall}>
         {(searchPage ? ellipsedContent : parsedHit).map(
           (part: HitHighlightProps, index: number) =>
             part.isHighlighted ? (

diff --git a/src/components/search-input/styles.ts b/src/components/search-input/styles.ts
@@ -60,6 +60,13 @@ const hitContent: SxStyleProp = {
   fontSize: ['14px', '16px'],
   lineHeight: ['20px', '22px'],
   width: '100%',
+}
+
+const hitContentSmall: SxStyleProp = {
+  color: 'muted.0',
+  fontSize: ['14px', '16px'],
+  lineHeight: ['20px', '22px'],
+  width: '100%',
   whiteSpace: 'pre',
   overflow: 'hidden',
   textOverflow: 'ellipsis',
@@ -158,6 +165,7 @@ export default {
   hitIcon,
   hitContentContainer,
   hitContent,
+  hitContentSmall,
   hitBreadCrumb,
   hitBreadCrumbIn,
   hitBreadCrumbArrow,

diff --git a/src/components/search-results/index.tsx b/src/components/search-results/index.tsx
@@ -22,7 +22,8 @@ const SearchResults = () => {
     <Box sx={styles.resultContainer}>
       <Text sx={styles.resultText}>
         Showing {ocurrenceCount[filterSelectedSection]} results for "
-        {router.query.keyword}" in all results
+        {router.query.keyword}" in{' '}
+        {!filterSelectedSection ? `all results` : filterSelectedSection}
       </Text>
       <hr />
       <Box>

diff --git a/src/components/search-results/styles.ts b/src/components/search-results/styles.ts
@@ -39,10 +39,10 @@ const paginationLinkDisabled: SxStyleProp = {
 
 const paginationNumber: SxStyleProp = {
   display: 'flex',
-  fontSize: '16px',
+  fontSize: ['14px', '16px'],
   lineHeight: '20px',
   color: '#4A596B',
-  mx: '27px',
+  mx: ['18px', '27px'],
 }
 
 const paginationActualNumber: SxStyleProp = {