style: fix position of reading time text

vtexdocs · Feb 9, 2024 · 62f115a · 62f115a
1 parent 0cb240e
commit 62f115a
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 17 deletions.
diff --git a/src/pages/docs/tracks/[slug].tsx b/src/pages/docs/tracks/[slug].tsx
@@ -126,8 +126,11 @@ const TrackPage: NextPage<Props> = ({
             <Box sx={styles.contentContainer}>
               <article ref={articleRef}>
                 <header>
+                  <Breadcrumb breadcrumbList={breadcrumbList} />
                   <Flex sx={styles.flexContainer}>
-                    <Breadcrumb breadcrumbList={breadcrumbList} />
+                    <Text sx={styles.documentationTitle} className="title">
+                      {serialized.frontmatter?.title}
+                    </Text>
                     <Text sx={styles.readingTime}>
                       {intl.formatMessage(
                         {
@@ -138,12 +141,6 @@ const TrackPage: NextPage<Props> = ({
                       )}
                     </Text>
                   </Flex>
-                  <Text sx={styles.documentationTitle} className="title">
-                    {serialized.frontmatter?.title}
-                  </Text>
-                  <Text sx={styles.documentationExcerpt}>
-                    {serialized.frontmatter?.excerpt}
-                  </Text>
                 </header>
                 <MarkdownRenderer serialized={serialized} />
               </article>

diff --git a/src/pages/known-issues/[slug].tsx b/src/pages/known-issues/[slug].tsx
@@ -102,8 +102,11 @@ const KnownIssuePage: NextPage<Props> = ({
             <Box sx={styles.contentContainer}>
               <article ref={articleRef}>
                 <header>
+                  <Breadcrumb breadcrumbList={breadcrumbList} />
                   <Flex sx={styles.flexContainer}>
-                    <Breadcrumb breadcrumbList={breadcrumbList} />
+                    <Text sx={styles.documentationTitle} className="title">
+                      {serialized.frontmatter?.title}
+                    </Text>
                     <Text sx={styles.readingTime}>
                       {intl.formatMessage(
                         {
@@ -114,9 +117,6 @@ const KnownIssuePage: NextPage<Props> = ({
                       )}
                     </Text>
                   </Flex>
-                  <Text sx={styles.documentationTitle} className="title">
-                    {serialized.frontmatter?.title}
-                  </Text>
                   <Box sx={styles.divider}></Box>
                   <Flex sx={styles.detailedInfo}>
                     <Flex sx={styles.id}>

diff --git a/src/styles/documentation-page.ts b/src/styles/documentation-page.ts
@@ -114,16 +114,16 @@ const divider: SxStyleProp = {
 }
 
 const readingTime: SxStyleProp = {
-  color: '#6b7785',
-  mb: '24px',
+  color: '#A1AAB7',
+  fontSize: '16px',
   lineHeight: '18px',
-  ml: 'auto',
 }
 
 const flexContainer: SxStyleProp = {
-  justifyContent: ['center', 'space-between'],
-  flexWrap: 'wrap-reverse',
-  columnGap: '16px',
+  flexWrap: 'wrap',
+  flexDirection: 'column',
+  gap: '16px',
+  mb: '16px',
 }
 
 const detailedInfo: SxStyleProp = {