From e11cbbaaddae95892b13d1b919360c66fae2e782 Mon Sep 17 00:00:00 2001 From: Hossein Mehrabi Date: Tue, 19 Dec 2023 19:45:40 +0330 Subject: [PATCH] fix: Roadmap and SectionHeader design adjustments --- .../docusaurus.config.js | 1 + .../docusaurus-playground/src/pages/index.mdx | 6 +++++- .../docusaurus-playground/src/pages/xyz.tsx | 16 ++++++++++++++ .../components/mdx/Roadmap/Roadmap.scss | 21 ------------------- .../client/components/mdx/Roadmap/Roadmap.tsx | 21 +++++++------------ .../mdx/SectionHeader/SectionHeader.scss | 7 ++++++- .../mdx/SectionHeader/SectionHeader.tsx | 14 +++++++++++-- 7 files changed, 48 insertions(+), 38 deletions(-) create mode 100644 packages/docusaurus-playground/src/pages/xyz.tsx diff --git a/packages/docusaurus-playground/docusaurus.config.js b/packages/docusaurus-playground/docusaurus.config.js index 410e1cf..ea30ecb 100644 --- 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 index b1750ee..1dbcca2 100644 --- 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', }, ]} - /> + > + + Read more + + diff --git a/packages/docusaurus-playground/src/pages/xyz.tsx b/packages/docusaurus-playground/src/pages/xyz.tsx new file mode 100644 index 0000000..c9b8399 --- /dev/null +++ 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 ( + + + + + + + + ) +} 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 index a79baa8..5d4bf6b 100644 --- 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 index 48ead56..949e76c 100644 --- 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 = ({ return (
-
- - {title} - - - {description && ( - - {description} - - )} -
+ + {children} + {timeline.length > 0 && ( & { export const SectionHeader: React.FC< React.PropsWithChildren > = ({ title, description, className, children, ...props }) => { + const withDescription = !!description + return ( - + {title} - {children && ( + {!withDescription && children && (
{children}
)} @@ -32,6 +41,7 @@ export const SectionHeader: React.FC< variant="h3" > {description} + {
{children}
} )}