docs: fix docs styling [MDS-1022] (#141)

coingaming · Mar 7, 2024 · f548334 · f548334
1 parent ec5581a
commit f548334
Show file tree

Hide file tree

Showing 10 changed files with 23 additions and 19 deletions.
diff --git a/docs/components/Anatomy.tsx b/docs/components/Anatomy.tsx
@@ -24,7 +24,7 @@ export const Anatomy = async ({ anatomy }: { anatomy?: string }) => {
       {title && <h2 className={"text-moon-24 font-medium"}>{title}</h2>}
       {description && <MDX markdown={description} />}
       {content && (
-        <pre className="flex w-full p-4 rounded-moon-s-sm overflow-x-auto text-moon-14 text-bulma border border-beerus">
+        <pre className="flex w-full p-4 rounded-lg overflow-x-auto text-moon-14 text-bulma border border-beerus">
           {content}
         </pre>
       )}

diff --git a/docs/components/HeaderSection.tsx b/docs/components/HeaderSection.tsx
@@ -22,7 +22,9 @@ const HeaderSection = ({ title, description, className, href }: Props) => (
       </a>
     </h2>
     {description && (
-      <div className="max-w-3xl text-moon-16 text-bulma">{description}</div>
+      <div className="flex flex-col gap-4 text-moon-16 text-bulma">
+        {description}
+      </div>
     )}
   </>
 );

diff --git a/docs/components/MDX.tsx b/docs/components/MDX.tsx
@@ -38,7 +38,7 @@ const defaultComponents: ComponentProps<any> = {
   code: (props: HTMLProps<HTMLPreElement>) => (
     <code
       {...props}
-      className="p-2 bg-gohan rounded-moon-s-sm text-moon-14 text-bulma"
+      className="p-1 bg-gohan rounded-md text-moon-14 text-bulma font-mono"
     >
       {props.children}
     </code>

diff --git a/docs/components/docsPage/DocsPage.tsx b/docs/components/docsPage/DocsPage.tsx
@@ -20,7 +20,6 @@ const DocsPage = (props: DocsPageProps) => {
     propsTable,
     anatomy,
     tags,
-    image,
     examplesAnatomy,
   } = props;
 

diff --git a/docs/components/docsPage/types/DocsPageProps.ts b/docs/components/docsPage/types/DocsPageProps.ts
@@ -14,7 +14,6 @@ type DocsPageProps = {
   propsTable?: Record<string, PropsTableProp[]>;
   examplesAnatomy?: Record<string, string>;
   anatomy?: string;
-  image?: StaticImageData;
 };
 
 export default DocsPageProps;
diff --git a/docs/components/exampleSection/ComponentPreview.tsx b/docs/components/exampleSection/ComponentPreview.tsx
@@ -1,7 +1,7 @@
 const ComponentPreview = ({ component }: { component: JSX.Element }) => (
   <div
     className={
-      "relative flex flex-wrap items-center justify-around p-4 gap-2 w-full rounded-t-xl border border-beerus bg-goku"
+      "relative flex flex-wrap items-center justify-around p-4 gap-2 w-full rounded-t-lg border border-beerus bg-goku"
     }
   >
     {component}

diff --git a/docs/components/exampleSection/ExampleSection.tsx b/docs/components/exampleSection/ExampleSection.tsx
@@ -26,7 +26,7 @@ export const ExampleSection = async ({
 }: Props) => (
   <div className="flex flex-col gap-4 relative">
     <HeaderSection title={title} description={description} href={href} />
-    <div className="bg-gohan rounded-lg mt-2">
+    <div className="bg-gohan rounded-lg">
       <ComponentPreview component={component} />
       <CodePreview code={code} />
     </div>
@@ -72,12 +72,14 @@ export async function withExamples(
         component={<Component />}
         description={
           <>
-            <MDX
-              markdown={descriptions?.[exampleDescriptionKey]}
-              options={{
-                parseFrontmatter: true,
-              }}
-            />
+            <div className="max-w-3xl">
+              <MDX
+                markdown={descriptions?.[exampleDescriptionKey]}
+                options={{
+                  parseFrontmatter: true,
+                }}
+              />
+            </div>
             {client?.examplesAnatomy?.[exampleKey] && (
               <Anatomy
                 anatomy={client?.examplesAnatomy?.[exampleDescriptionKey]}

diff --git a/docs/components/exampleSection/codePreview/wrapper/CodePreviewWrapper.tsx b/docs/components/exampleSection/codePreview/wrapper/CodePreviewWrapper.tsx
@@ -31,7 +31,7 @@ const CodePreviewWrapper = ({
     <div
       ref={wrapperRef}
       className={mergeClassnames(
-        "relative text-bulma p-4 pb-0 lg:pe-12 overflow-hidden border border-t-0 border-beerus rounded-b-xl",
+        "relative text-bulma p-4 pb-0 lg:pe-12 overflow-hidden border border-t-0 border-beerus rounded-b-lg",
         className,
       )}
     >

diff --git a/docs/components/mainLayout/MainLayout.tsx b/docs/components/mainLayout/MainLayout.tsx
@@ -20,7 +20,7 @@ const MainLayout = ({
       <aside className="hidden lg:block lg:fixed h-[calc(100vh-72px)]">
         <Sidebar />
       </aside>
-      <main className="box-content min-h-screen max-w-6xl lg:ms-72 xl:mx-72 bg-goku text-bulma flex-1 flex flex-col p-5 lg:p-8">
+      <main className="box-content min-h-screen max-w-6xl lg:ms-72 xl:mx-72 bg-goku text-bulma flex-1 flex flex-col p-5 lg:p-6">
         {children}
       </main>
       <Footer />

diff --git a/docs/components/overviewSidebar/PageNavigation.tsx b/docs/components/overviewSidebar/PageNavigation.tsx
@@ -1,8 +1,10 @@
 const PageNavigation = ({ children }: { children: React.ReactElement[] }) => (
-  <aside className="fixed top-[72px] end-0 w-72 pt-4 px-6 bg-goku overflow-y-scroll border-s border-beerus hidden xl:block">
-    <nav className="flex flex-col gap-2" aria-label="Page navigation">
-      <p className="ps-2 text-moon-14 font-medium text-bulma">On this page</p>
-      <ul className="flex flex-col gap-2">{children}</ul>
+  <aside className="fixed top-[72px] end-0 w-72 pt-6 px-3 bg-goku overflow-y-scroll border-s border-beerus hidden xl:block">
+    <nav className="flex flex-col gap-6" aria-label="Page navigation">
+      <p className="ps-2 text-moon-10-caption font-medium uppercase text-trunks">
+        On this page
+      </p>
+      <ul className="flex flex-col gap-1">{children}</ul>
     </nav>
   </aside>
 );