Extracted a common Spearator (hr) component to reuse in docs. Adjusted styling for toc on mobile and tablet

packages/website/ts/components/docs/separator.tsx

@@ -0,0 +1,8 @@
+import styled from 'styled-components';
+
+export const Separator = styled.hr`
+    border-width: 0 0 1px;
+    border-color: #e4e4e4;
+    height: 0;
+    margin: 30px 0;
+`;

packages/website/ts/components/docs/sidebar/table_of_contents.tsx

@@ -54,9 +54,18 @@ const ContentsWrapper = styled.div`
 `;
 
 const ContentsList = styled.ul`
+    li {
+        margin-bottom: 1rem;
+
+        &:last-child {
+            margin-bottom: 0;
+        }
+    }
+
     ul {
         border-left: 1px solid #e3e3e3;
         padding-left: 0.7rem;
+        margin-top: 1rem;
 
         span {
             font-size: 0.7222rem;
@@ -65,10 +74,10 @@ const ContentsList = styled.ul`
     }
 `;
 
+// Note (piotr): The links could also be styled by using the level prop we get from contents generated from mdx files
+
 const ContentLink = styled(Link)`
-    display: block;
     font-size: 0.8333rem;
-    margin-bottom: 1rem;
 
     span {
         color: ${({ theme }) => theme.paragraphColor};

packages/website/ts/pages/docs/home.tsx

@@ -10,6 +10,7 @@ import { IStepLinkConfig } from 'ts/components/docs/step_link';
 import { StepLinks } from 'ts/components/docs/step_links';
 import { DocumentTitle } from 'ts/components/document_title';
 import { Section } from 'ts/components/newLayout';
+import { Separator } from 'ts/components/docs/separator';
 import { Heading, Paragraph } from 'ts/components/text';
 
 import { colors } from 'ts/style/colors';
@@ -109,17 +110,6 @@ const CommunityWrapper = styled.div`
     }
 `;
 
-const Separator = styled.hr`
-    border-width: 0 0 1px;
-    border-color: #e4e4e4;
-    height: 0;
-    margin: 60px 0;
-
-    @media (max-width: 500px) {
-        margin: 30px 0;
-    }
-`;
-
 const shortcuts: IShortcutLinkProps[] = [
     {
         heading: 'Core Concepts',

packages/website/ts/pages/docs/view.tsx

@@ -19,6 +19,7 @@ import { InlineCode } from 'ts/components/docs/inline_code';
 import { InlineLink } from 'ts/components/docs/inline_link';
 import { Notification } from 'ts/components/docs/notification';
 import { OrderedList } from 'ts/components/docs/ordered_list';
+import { Separator } from 'ts/components/docs/separator';
 import { IContents, TableOfContents } from 'ts/components/docs/sidebar/table_of_contents';
 import { SiteWrap } from 'ts/components/docs/siteWrap';
 import { Table } from 'ts/components/docs/table';
@@ -74,10 +75,11 @@ export const DocsView: React.FC<IDocsViewProps> = props => {
         <SiteWrap theme="light">
             <DocumentTitle {...documentConstants.DOCS} />
             <Hero title={title} />
-            <Section maxWidth="1130px" overflow="visible">
+            <Section maxWidth="1130px" isPadded={false} overflow="visible">
                 {Component ? (
                     <Columns>
                         <TableOfContents contents={contents} />
+                        <Separator />
                         <ContentWrapper>
                             <MDXProvider components={mdxComponents}>
                                 {/*
@@ -107,13 +109,11 @@ const LoaderWrapper = styled.div`
 
 const Columns = styled.div`
     display: grid;
-    grid-template-columns: 230px 1fr;
+    grid-template-columns: 230px 0 1fr;
     grid-column-gap: 118px;
-    grid-row-gap: 30px;
 
     @media (max-width: 900px) {
         grid-template-columns: 1fr;
-        grid-column-gap: 0;
     }
 `;
 
@@ -121,14 +121,6 @@ const ContentWrapper = styled.article`
     min-width: 0;
 `;
 
-const Separator = styled.hr`
-    border-width: 0 0 1px;
-    border-color: #e4e4e4;
-    height: 0;
-    margin-top: 60px;
-    margin-bottom: 60px;
-`;
-
 const mdxComponents = {
     code: Code,
     h1: H1,