Created a reusable page wrapper for docs pages

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

@@ -8,28 +8,18 @@ import { colors } from 'ts/style/colors';
 interface IHeroProps {
     isHome?: boolean;
     title?: string;
-    description?: string;
+    subtitle?: string;
 }
 
-export const Hero: React.FC<IHeroProps> = ({ description, isHome, title }) => {
+export const Hero: React.FC<IHeroProps> = ({ isHome = false, subtitle, title }) => (
-    return (
     <HeroWrapper isHome={isHome}>
-            <Heading
+        <Heading size={isHome ? 'large' : 'medium'} isCentered={true} marginBottom={isHome || subtitle ? '30px' : '0'}>
-                size={isHome ? 'large' : 'medium'}
-                isCentered={true}
-                marginBottom={isHome || description ? '30px' : '0'}
-            >
             {title}
         </Heading>
-            {description && <Paragraph isCentered={true}>{description}</Paragraph>}
+        {subtitle && <Paragraph isCentered={true}>{subtitle}</Paragraph>}
         {isHome && <SearchInput isHome={true} />}
     </HeroWrapper>
-    );
+);
-};
-
-Hero.defaultProps = {
-    isHome: false,
-};
 
 const HeroWrapper = styled.div<{ isHome: boolean }>`
     background-color: ${colors.backgroundLight};

packages/website/ts/components/docs/layout/docs_page_layout.tsx

@@ -0,0 +1,60 @@
+import React from 'react';
+import styled from 'styled-components';
+
+import CircularProgress from 'material-ui/CircularProgress';
+
+import { Hero } from 'ts/components/docs/hero';
+import { SiteWrap } from 'ts/components/docs/siteWrap';
+import { DocumentTitle } from 'ts/components/document_title';
+import { Section } from 'ts/components/newLayout';
+
+import { documentConstants } from 'ts/utils/document_meta_constants';
+
+import { colors } from 'ts/style/colors';
+
+interface IDocsPageLayoutProps {
+    children: React.ReactNode;
+    title: string;
+    subtitle?: string;
+    loading?: boolean;
+    isHome?: boolean;
+}
+
+export const DocsPageLayout: React.FC<IDocsPageLayoutProps> = props => {
+    return (
+        <SiteWrap theme="light">
+            <DocumentTitle {...documentConstants.DOCS} />
+            <Hero title={props.title} subtitle={props.subtitle} isHome={props.isHome} />
+            <Section maxWidth="1150px" isPadded={false} overflow="visible">
+                {props.loading ? (
+                    <LoaderWrapper>
+                        <CircularProgress size={40} thickness={2} color={colors.brandLight} />
+                    </LoaderWrapper>
+                ) : (
+                    props.children
+                )}
+            </Section>
+        </SiteWrap>
+    );
+};
+
+const LoaderWrapper = styled.div`
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 300px;
+`;
+
+// const Columns = styled.div`
+//     display: grid;
+//     grid-template-columns: 130px 0 1fr;
+//     grid-column-gap: 60px;
+
+//     @media (min-width: 1440px) {
+//         grid-template-columns: 230px 0 1fr;
+//     }
+
+//     @media (max-width: 900px) {
+//         grid-template-columns: 1fr;
+//     }
+// `;

packages/website/ts/components/docs/mdx/code.tsx

@@ -3,7 +3,7 @@ import CopyToClipboard from 'react-copy-to-clipboard';
 import SyntaxHighlighter from 'react-syntax-highlighter';
 
 import { Button } from 'ts/components/button';
-import { CodeRun } from 'ts/components/docs/code_run';
+import { CodeRun } from 'ts/components/docs/mdx/code_run';
 
 import { colors } from 'ts/style/colors';
 import { styled } from 'ts/style/theme';

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

@@ -1,14 +1,9 @@
 import React from 'react';
 import styled from 'styled-components';
 
-import { Hero } from 'ts/components/docs/hero';
+import { DocsPageLayout } from 'ts/components/docs/layout/docs_page_layout';
 import { Resource } from 'ts/components/docs/resource/resource';
 import { Filters } from 'ts/components/docs/sidebar/filters';
-import { SiteWrap } from 'ts/components/docs/siteWrap';
-import { DocumentTitle } from 'ts/components/document_title';
-import { Section } from 'ts/components/newLayout';
-
-import { documentConstants } from 'ts/utils/document_meta_constants';
 
 import { Hits, InstantSearch } from 'react-instantsearch-dom';
 
@@ -17,18 +12,14 @@ import algoliasearch from 'algoliasearch/lite';
 const searchClient = algoliasearch('39X6WOJZKW', '6acba761a34d99781628c6178af1e16c');
 
 export const DocsGuides: React.FC = () => (
-    <SiteWrap theme="light">
+    <DocsPageLayout title="Guides">
-        <DocumentTitle {...documentConstants.DOCS} />
-        <Hero title="Guides" />
-        <Section maxWidth="1030px" isPadded={false}>
         <InstantSearch searchClient={searchClient} indexName="0x_guides_test">
             <Columns>
                 <Filters filters={filters} />
                 <Hits hitComponent={Resource} />
             </Columns>
         </InstantSearch>
-        </Section>
+    </DocsPageLayout>
-    </SiteWrap>
 );
 
 const Columns = styled.div`

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

@@ -3,26 +3,19 @@ import styled from 'styled-components';
 
 import { CommunityLink, ICommunityLinkProps } from 'ts/components/docs/community_link';
 import { GetStartedLink, IGetStartedLinkProps } from 'ts/components/docs/get_started_link';
-import { Hero } from 'ts/components/docs/hero';
 import { Separator } from 'ts/components/docs/separator';
 import { IShortcutLinkProps, ShortcutLink } from 'ts/components/docs/shortcut_link';
-import { SiteWrap } from 'ts/components/docs/siteWrap';
 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 { Heading } from 'ts/components/text';
 
-import { documentConstants } from 'ts/utils/document_meta_constants';
+import { DocsPageLayout } from 'ts/components/docs/layout/docs_page_layout';
 
 const SEPARATOR_MARGIN = '60px 0';
 
 export const DocsHome: React.FC = () => {
     return (
-        <SiteWrap theme="light">
+        <DocsPageLayout isHome={true} title="0x Docs">
-            <DocumentTitle {...documentConstants.DOCS} />
-            <Hero isHome={true} title="0x Docs" />
-            <Section maxWidth="1150px" isPadded={false}>
             <ShortcutsWrapper>
                 {shortcuts.map((shortcut, index) => (
                     <ShortcutLink key={`shortcut-${index}`} {...shortcut} />
@@ -47,8 +40,7 @@ export const DocsHome: React.FC = () => {
                     <CommunityLink key={`communityLink-${index}`} {...shortcut} />
                 ))}
             </CommunityWrapper>
-            </Section>
+        </DocsPageLayout>
-        </SiteWrap>
     );
 };
 

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

@@ -1,38 +1,30 @@
 import React from 'react';
 import styled from 'styled-components';
 
-import { Code } from 'ts/components/docs/code';
-import { Tab, TabList, TabPanel, Tabs } from 'ts/components/docs/code_tabs';
 import { FeatureLink } from 'ts/components/docs/feature_link';
-import { HelpCallout } from 'ts/components/docs/help_callout';
+import { DocsPageLayout } from 'ts/components/docs/layout/docs_page_layout';
-import { HelpfulCta } from 'ts/components/docs/helpful_cta';
-import { Hero } from 'ts/components/docs/hero';
 import { NewsletterWidget } from 'ts/components/docs/newsletter_widget';
 import { Note } from 'ts/components/docs/note';
-import { Notification } from 'ts/components/docs/notification';
-import { OrderedList } from 'ts/components/docs/ordered_list';
 import { Resource } from 'ts/components/docs/resource/resource';
 import { Separator } from 'ts/components/docs/separator';
-import { Filters } from 'ts/components/docs/sidebar/filters';
-import { SiteWrap } from 'ts/components/docs/siteWrap';
 import { IStepLinkConfig } from 'ts/components/docs/step_link';
 import { StepLinks } from 'ts/components/docs/step_links';
-import { Table } from 'ts/components/docs/table';
-import { UnorderedList } from 'ts/components/docs/unordered_list';
-import { DocumentTitle } from 'ts/components/document_title';
-import { Section } from 'ts/components/newLayout';
-import { Heading, Paragraph } from 'ts/components/text';
 
-import { documentConstants } from 'ts/utils/document_meta_constants';
+import { Code } from 'ts/components/docs/mdx/code';
+import { Tab, TabList, TabPanel, Tabs } from 'ts/components/docs/mdx/code_tabs';
+import { HelpCallout } from 'ts/components/docs/mdx/help_callout';
+import { HelpfulCta } from 'ts/components/docs/mdx/helpful_cta';
+import { Notification } from 'ts/components/docs/mdx/notification';
+import { OrderedList } from 'ts/components/docs/mdx/ordered_list';
+import { Table } from 'ts/components/docs/mdx/table';
+import { UnorderedList } from 'ts/components/docs/mdx/unordered_list';
+import { Heading, Paragraph } from 'ts/components/text';
 
 export const DocsPageTemplate: React.FC = () => {
     return (
-        <SiteWrap theme="light">
+        <DocsPageLayout title="Page template" subtitle="Test subtitle">
-            <DocumentTitle {...documentConstants.DOCS} />
-            <Hero title={`Page Template`} description="This a subheader for the page" />
-            <Section maxWidth="1150px" isPadded={false} overflow="visible">
             <Columns>
-                    <Filters filters={filters} />
+                <h1>test</h1>
                 <Separator />
                 <ContentWrapper>
                     <LargeHeading>Large Heading</LargeHeading>
@@ -56,13 +48,13 @@ export const DocsPageTemplate: React.FC = () => {
                     </Heading>
                     <Paragraph>This would be paragraph text.</Paragraph>
                     <Paragraph>
-                            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec consequat velit in nisl
+                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec consequat velit in nisl varius
-                            varius malesuada. Morbi at porttitor enim. Donec vel tristique dolor, quis convallis sapien.
+                        malesuada. Morbi at porttitor enim. Donec vel tristique dolor, quis convallis sapien. Nam et
-                            Nam et massa tempus, dignissim leo vitae, ultricies libero. Vivamus eu enim tellus.
+                        massa tempus, dignissim leo vitae, ultricies libero. Vivamus eu enim tellus. Phasellus eu mattis
-                            Phasellus eu mattis elit. Proin ut eleifend urna, sed tincidunt nunc. Sed eu dapibus metus,
+                        elit. Proin ut eleifend urna, sed tincidunt nunc. Sed eu dapibus metus, in congue ipsum. Duis
-                            in congue ipsum. Duis volutpat sem et sem faucibus blandit. Nullam ultricies ante eu elit
+                        volutpat sem et sem faucibus blandit. Nullam ultricies ante eu elit auctor, id mattis nunc
-                            auctor, id mattis nunc euismod. Curabitur arcu enim, cursus ac pellentesque quis, accumsan
+                        euismod. Curabitur arcu enim, cursus ac pellentesque quis, accumsan sit amet turpis. Praesent
-                            sit amet turpis. Praesent dignissim mi a maximus euismod
+                        dignissim mi a maximus euismod
                     </Paragraph>
                     <Paragraph>And here is a table:</Paragraph>
                     <Table>
@@ -83,38 +75,36 @@ export const DocsPageTemplate: React.FC = () => {
                             <tr>
                                 <td>takerAddress</td>
                                 <td>
-                                        Address that is allowed to fill the order. If set to 0, anyone is allowed to
+                                    Address that is allowed to fill the order. If set to 0, anyone is allowed to fill
-                                        fill the order. This field allows makers to decide who can fill an order,
+                                    the order. This field allows makers to decide who can fill an order, rendering it
-                                        rendering it useless to eavesdroppers or outside parties.
+                                    useless to eavesdroppers or outside parties.
                                 </td>
                             </tr>
                             <tr>
                                 <td>feeRecipientAddress</td>
                                 <td>
-                                        The address that will receive the fees stipulated by the order. This is
+                                    The address that will receive the fees stipulated by the order. This is typically
-                                        typically used to incentivize off-chain order relay.
+                                    used to incentivize off-chain order relay.
                                 </td>
                             </tr>
                             <tr>
                                 <td>senderAddress</td>
                                 <td>
-                                        Is an advanced feature that can be defaulted to the 0 address. It allows the
+                                    Is an advanced feature that can be defaulted to the 0 address. It allows the maker
-                                        maker to enforce that the order must flow through some additional logic residing
+                                    to enforce that the order must flow through some additional logic residing in an
-                                        in an additional Ethereum smart contract before it can be filled (e.g a KYC
+                                    additional Ethereum smart contract before it can be filled (e.g a KYC whitelist
-                                        whitelist contract) -- more on "extension contracts" later.
+                                    contract) -- more on "extension contracts" later.
                                 </td>
                             </tr>
                             <tr>
                                 <td>makerAssetAmount</td>
-                                    <td>
+                                <td>Amount of the maker'sAsset being offered by the maker. Must be greater than 0.</td>
-                                        Amount of the maker'sAsset being offered by the maker. Must be greater than 0.
-                                    </td>
                             </tr>
                             <tr>
                                 <td>makerFee</td>
                                 <td>
-                                        The fee to be paid by the order maker to the <code>feeRecipientAddress</code> in
+                                    The fee to be paid by the order maker to the <code>feeRecipientAddress</code> in the
-                                        the event of an order fill. Partial fills result in partial fees.
+                                    event of an order fill. Partial fills result in partial fees.
                                 </td>
                             </tr>
                         </tbody>
@@ -160,13 +150,13 @@ export const DocsPageTemplate: React.FC = () => {
 
                     <H3>Subheading</H3>
                     <Paragraph>
-                            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec consequat velit in nisl
+                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec consequat velit in nisl varius
-                            varius malesuada. Morbi at porttitor enim. Donec vel tristique dolor, quis convallis sapien.
+                        malesuada. Morbi at porttitor enim. Donec vel tristique dolor, quis convallis sapien. Nam et
-                            Nam et massa tempus, dignissim leo vitae, ultricies libero. Vivamus eu enim tellus.
+                        massa tempus, dignissim leo vitae, ultricies libero. Vivamus eu enim tellus. Phasellus eu mattis
-                            Phasellus eu mattis elit. Proin ut eleifend urna, sed tincidunt nunc. Sed eu dapibus metus,
+                        elit. Proin ut eleifend urna, sed tincidunt nunc. Sed eu dapibus metus, in congue ipsum. Duis
-                            in congue ipsum. Duis volutpat sem et sem faucibus blandit. Nullam ultricies ante eu elit
+                        volutpat sem et sem faucibus blandit. Nullam ultricies ante eu elit auctor, id mattis nunc
-                            auctor, id mattis nunc euismod. Curabitur arcu enim, cursus ac pellentesque quis, accumsan
+                        euismod. Curabitur arcu enim, cursus ac pellentesque quis, accumsan sit amet turpis. Praesent
-                            sit amet turpis. Praesent dignissim mi a maximus euismod
+                        dignissim mi a maximus euismod
                     </Paragraph>
                     <div>
                         <Note
@@ -175,12 +165,12 @@ export const DocsPageTemplate: React.FC = () => {
                         />
                         <Paragraph>
                             Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec consequat velit in nisl
-                                varius malesuada. Morbi at porttitor enim. Donec vel tristique dolor, quis convallis
+                            varius malesuada. Morbi at porttitor enim. Donec vel tristique dolor, quis convallis sapien.
-                                sapien. Nam et massa tempus, dignissim leo vitae, ultricies libero. Vivamus eu enim
+                            Nam et massa tempus, dignissim leo vitae, ultricies libero. Vivamus eu enim tellus.
-                                tellus. Phasellus eu mattis elit. Proin ut eleifend urna, sed tincidunt nunc. Sed eu
+                            Phasellus eu mattis elit. Proin ut eleifend urna, sed tincidunt nunc. Sed eu dapibus metus,
-                                dapibus metus, in congue ipsum. Duis volutpat sem et sem faucibus blandit. Nullam
+                            in congue ipsum. Duis volutpat sem et sem faucibus blandit. Nullam ultricies ante eu elit
-                                ultricies ante eu elit auctor, id mattis nunc euismod. Curabitur arcu enim, cursus ac
+                            auctor, id mattis nunc euismod. Curabitur arcu enim, cursus ac pellentesque quis, accumsan
-                                pellentesque quis, accumsan sit amet turpis. Praesent dignissim mi a maximus euismod
+                            sit amet turpis. Praesent dignissim mi a maximus euismod
                         </Paragraph>
                     </div>
                     <UnorderedList>
@@ -229,8 +219,7 @@ export const DocsPageTemplate: React.FC = () => {
                     <NewsletterWidget />
                 </ContentWrapper>
             </Columns>
-            </Section>
+        </DocsPageLayout>
-        </SiteWrap>
     );
 };
 
@@ -286,36 +275,7 @@ const usefulLinks: IStepLinkConfig[] = [
     },
 ];
 
-const filters = [
-    {
-        attribute: 'Topic',
-        heading: 'Topic',
-    },
-    {
-        attribute: 'Difficulty',
-        heading: 'Level',
-    },
-];
-
 const codeSample = `import { TruffleArtifactAdapter } from '@0x/sol-coverage';
 const projectRoot = '.';
 const solcVersion = '0.5.0';
 const artifactAdapter = new TruffleArtifactAdapter(projectRoot, solcVersion);`;
-
-const resources = [
-    {
-        heading: '0x Mesh - your gateway to networked liquidity',
-        description:
-            'Learn about the 0x peer-to-peer network for sharing orders and how you can use it to tap into networked liquidity.',
-        tags: ['Relayer'],
-        url: 'https://0x.org',
-        isCommunity: true,
-    },
-    {
-        heading: '0x Mesh - your gateway to networked liquidity',
-        description:
-            'The Radar Relay SDK is a software development kit that simplifies the interactions with Radar Relay’s APIs',
-        tags: ['Api explorer', 'Relayer'],
-        url: 'https://0x.org',
-    },
-];

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

@@ -2,16 +2,11 @@ import React from 'react';
 import styled from 'styled-components';
 
 import { FeatureLink } from 'ts/components/docs/feature_link';
-import { Hero } from 'ts/components/docs/hero';
+import { DocsPageLayout } from 'ts/components/docs/layout/docs_page_layout';
 import { Resource } from 'ts/components/docs/resource/resource';
 import { Filters } from 'ts/components/docs/sidebar/filters';
-import { SiteWrap } from 'ts/components/docs/siteWrap';
-import { DocumentTitle } from 'ts/components/document_title';
-import { Section } from 'ts/components/newLayout';
 import { Heading } from 'ts/components/text';
 
-import { documentConstants } from 'ts/utils/document_meta_constants';
-
 import { Hits, InstantSearch } from 'react-instantsearch-dom';
 
 import algoliasearch from 'algoliasearch/lite';
@@ -20,10 +15,7 @@ const searchClient = algoliasearch('39X6WOJZKW', '6acba761a34d99781628c6178af1e1
 
 export const DocsTools: React.FC = () => {
     return (
-        <SiteWrap theme="light">
+        <DocsPageLayout title="Tools">
-            <DocumentTitle {...documentConstants.DOCS} />
-            <Hero title="Tools" />
-            <Section maxWidth="1030px" isPadded={false}>
             <InstantSearch searchClient={searchClient} indexName="0x_tools_test">
                 <Columns>
                     <Filters filters={filters} />
@@ -67,8 +59,7 @@ export const DocsTools: React.FC = () => {
                     </article>
                 </Columns>
             </InstantSearch>
-            </Section>
+        </DocsPageLayout>
-        </SiteWrap>
     );
 };
 
@@ -112,21 +103,3 @@ const featuredLinks = [
         url: 'https://0x.org',
     },
 ];
-
-const resources = [
-    {
-        heading: '0x Mesh - your gateway to networked liquidity',
-        description:
-            'Learn about the 0x peer-to-peer network for sharing orders and how you can use it to tap into networked liquidity.',
-        tags: ['Relayer', 'Dogs', 'Bells and whistles', 'Interstellar', 'Maharaji'],
-        url: 'https://0x.org',
-        isCommunity: true,
-    },
-    {
-        heading: '0x Mesh - your gateway to networked liquidity',
-        description:
-            'The Radar Relay SDK is a software development kit that simplifies the interactions with Radar Relay’s APIs',
-        tags: ['Api explorer', 'Relayer'],
-        url: 'https://0x.org',
-    },
-];

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

@@ -7,31 +7,24 @@ import capitalize from 'lodash/capitalize';
 
 import { MDXProvider } from '@mdx-js/react';
 
-import CircularProgress from 'material-ui/CircularProgress';
+import { Code } from 'ts/components/docs/mdx/code';
+import { CodeTabs } from 'ts/components/docs/mdx/code_tabs';
+import { H1, H2, H3, H4 } from 'ts/components/docs/mdx/headings';
+import { HelpCallout } from 'ts/components/docs/mdx/help_callout';
+import { HelpfulCta } from 'ts/components/docs/mdx/helpful_cta';
+import { InlineCode } from 'ts/components/docs/mdx/inline_code';
+import { InlineLink } from 'ts/components/docs/mdx/inline_link';
+import { Notification } from 'ts/components/docs/mdx/notification';
+import { OrderedList } from 'ts/components/docs/mdx/ordered_list';
+import { Table } from 'ts/components/docs/mdx/table';
+import { UnorderedList } from 'ts/components/docs/mdx/unordered_list';
 
-import { Code } from 'ts/components/docs/code';
+import { DocsPageLayout } from 'ts/components/docs/layout/docs_page_layout';
-import { CodeTabs } from 'ts/components/docs/code_tabs';
-import { H1, H2, H3, H4 } from 'ts/components/docs/headings';
-import { HelpCallout } from 'ts/components/docs/help_callout';
-import { HelpfulCta } from 'ts/components/docs/helpful_cta';
-import { Hero } from 'ts/components/docs/hero';
-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';
-import { UnorderedList } from 'ts/components/docs/unordered_list';
-import { DocumentTitle } from 'ts/components/document_title';
-import { Section } from 'ts/components/newLayout';
 import { Paragraph } from 'ts/components/text';
 
-import { documentConstants } from 'ts/utils/document_meta_constants';
-
-import { colors } from 'ts/style/colors';
-
 interface IDocsViewProps {
     match: match<any>;
 }
@@ -68,15 +61,11 @@ export const DocsView: React.FC<IDocsViewProps> = props => {
                 contents: component.tableOfContents(),
             });
         }
-        // @TODO: add error handling if needed
+        // @INFO: add error handling if needed
     };
 
     return (
-        <SiteWrap theme="light">
+        <DocsPageLayout title={title} loading={!Component}>
-            <DocumentTitle {...documentConstants.DOCS} />
-            <Hero title={title} />
-            <Section maxWidth="1150px" isPadded={false} overflow="visible">
-                {Component ? (
             <Columns>
                 <TableOfContents contents={contents} />
                 <Separator />
@@ -90,23 +79,10 @@ export const DocsView: React.FC<IDocsViewProps> = props => {
                     <HelpfulCta page={page} />
                 </ContentWrapper>
             </Columns>
-                ) : (
+        </DocsPageLayout>
-                    <LoaderWrapper>
-                        <CircularProgress size={40} thickness={2} color={colors.brandLight} />
-                    </LoaderWrapper>
-                )}
-            </Section>
-        </SiteWrap>
     );
 };
 
-const LoaderWrapper = styled.div`
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    height: 300px;
-`;
-
 const Columns = styled.div`
     display: grid;
     grid-template-columns: 130px 0 1fr;