fix: Roadmap and SectionHeader design adjustments

acid-info · Dec 19, 2023 · e11cbba · e11cbba
1 parent aba8233
commit e11cbba
Show file tree

Hide file tree

Showing 7 changed files with 48 additions and 38 deletions.
diff --git a/packages/docusaurus-playground/docusaurus.config.js b/packages/docusaurus-playground/docusaurus.config.js
@@ -45,6 +45,7 @@ const config = {
           routeBasePath: '/about',
           path: 'docs',
         },
+        og: {},
 
         // Uncomment to fetch new generated data.
         /*

diff --git a/packages/docusaurus-playground/src/pages/index.mdx b/packages/docusaurus-playground/src/pages/index.mdx
@@ -390,7 +390,11 @@ import * as challengesData from '/generated/challenges.json'
         description: 'Operator Incentivization, use-case specific SDKs',
       },
     ]}
-  />
+  >
+    <CallToActionButton href="/" size="large" variant="outlined">
+      Read more
+    </CallToActionButton>
+  </Roadmap>
 </Box>
 
 <Box top={{ xs: 144, lg: 216 }}>

diff --git a/packages/docusaurus-playground/src/pages/xyz.tsx b/packages/docusaurus-playground/src/pages/xyz.tsx
@@ -0,0 +1,16 @@
+import { SubscriptionPage } from '@acid-info/logos-docusaurus-theme/lib/client/theme/SubscriptionPage'
+import Head from '@docusaurus/Head'
+import Layout from '@theme/Layout'
+import React from 'react'
+
+export default () => {
+  return (
+    <Layout title="Subscribe to our newsletter">
+      <Head>
+        <meta name="og:image_title" content="Subscribe to our newsletter" />
+        <meta name="og:generate_image" content="false" />
+      </Head>
+      <SubscriptionPage />
+    </Layout>
+  )
+}
diff --git a/packages/logos-docusaurus-theme/src/client/components/mdx/Roadmap/Roadmap.scss b/packages/logos-docusaurus-theme/src/client/components/mdx/Roadmap/Roadmap.scss
@@ -3,19 +3,6 @@
 
 .mdx-roadmap {
   width: 100%;
-  border-top: 1px solid rgb(var(--lsd-border-primary));
-  padding-top: 24px;
-}
-
-.mdx-roadmap__header {
-  display: flex;
-  flex-direction: row;
-
-  gap: 1rem;
-
-  > * {
-    flex-basis: 50%;
-  }
 }
 
 .mdx-roadmap__timeline {
@@ -33,14 +20,6 @@
 }
 
 @include utils.responsive('lg', 'down') {
-  .mdx-roadmap__header {
-    flex-direction: column;
-
-    h2 {
-      @include lsd.typography('body1');
-    }
-  }
-
   .mdx-roadmap__timeline {
     margin-top: 4rem;
   }

diff --git a/packages/logos-docusaurus-theme/src/client/components/mdx/Roadmap/Roadmap.tsx b/packages/logos-docusaurus-theme/src/client/components/mdx/Roadmap/Roadmap.tsx
@@ -1,7 +1,6 @@
-import { Typography } from '@acid-info/lsd-react'
 import clsx from 'clsx'
 import React from 'react'
-import { Grid } from '..'
+import { Grid, SectionHeader } from '..'
 import { TimelineItem, TimelineItemProps } from '../TimelineItem'
 import './Roadmap.scss'
 
@@ -72,17 +71,13 @@ export const Roadmap: React.FC<RoadmapProps> = ({
 
   return (
     <div className={clsx(className, 'mdx-roadmap')} {...props}>
-      <div className="mdx-roadmap__header">
-        <Typography component="h2" variant="h5">
-          {title}
-        </Typography>
-
-        {description && (
-          <Typography component="p" variant="h4">
-            {description}
-          </Typography>
-        )}
-      </div>
+      <SectionHeader
+        className="mdx-roadmap__header"
+        title={title}
+        description={description}
+      >
+        {children}
+      </SectionHeader>
       {timeline.length > 0 && (
         <Grid
           className="mdx-roadmap__timeline"

diff --git a/packages/logos-docusaurus-theme/src/client/components/mdx/SectionHeader/SectionHeader.scss b/packages/logos-docusaurus-theme/src/client/components/mdx/SectionHeader/SectionHeader.scss
@@ -15,10 +15,15 @@
   }
 }
 
+.mdx-section-header--with-description {
+  .mdx-section-header__extra {
+    margin-top: 2rem;
+  }
+}
+
 .mdx-section-header__title {
   display: flex;
   flex-direction: row;
-  align-items: center;
   gap: 2rem;
 }
 

diff --git a/packages/logos-docusaurus-theme/src/client/components/mdx/SectionHeader/SectionHeader.tsx b/packages/logos-docusaurus-theme/src/client/components/mdx/SectionHeader/SectionHeader.tsx
@@ -12,15 +12,24 @@ export type SectionHeaderProps = Omit<BoxProps, 'title'> & {
 export const SectionHeader: React.FC<
   React.PropsWithChildren<SectionHeaderProps>
 > = ({ title, description, className, children, ...props }) => {
+  const withDescription = !!description
+
   return (
-    <Box className={clsx(className, 'mdx-section-header')} {...props}>
+    <Box
+      className={clsx(
+        className,
+        'mdx-section-header',
+        withDescription && 'mdx-section-header--with-description',
+      )}
+      {...props}
+    >
       <Typography
         className="mdx-section-header__title"
         component="h2"
         variant="h5"
       >
         {title}
-        {children && (
+        {!withDescription && children && (
           <div className="mdx-section-header__extra">{children}</div>
         )}
       </Typography>
@@ -32,6 +41,7 @@ export const SectionHeader: React.FC<
           variant="h3"
         >
           {description}
+          {<div className="mdx-section-header__extra">{children}</div>}
         </Typography>
       )}
     </Box>