fix: padding on container (#167)

bylapidist · Jun 13, 2020 · 3a8ec9a · 3a8ec9a
1 parent 5d353fb
commit 3a8ec9a
Show file tree

Hide file tree

Showing 4 changed files with 41 additions and 26 deletions.
diff --git a/src/components/MainWrapper.tsx b/src/components/MainWrapper.tsx
diff --git a/src/layouts/index.tsx b/src/layouts/index.tsx
@@ -1,7 +1,10 @@
 import React from 'react';
 import { Helmet } from 'react-helmet';
 import { StaticQuery, graphql } from 'gatsby';
-import { ThemeProvider, Container } from '@lapidist/components';
+import {
+    ThemeProvider,
+    Container as BaseContainer
+} from '@lapidist/components';
 import styled from 'styled-components';
 
 interface StaticQueryProps {
@@ -13,9 +16,8 @@ interface StaticQueryProps {
     };
 }
 
-const IndexWrapper: React.FC = styled.div`
+const Container: React.FC = styled(BaseContainer)`
     max-width: 1440px;
-    margin: 0 auto;
 `;
 
 const IndexLayout: React.FC = ({ children }): JSX.Element => (
@@ -63,9 +65,18 @@ const IndexLayout: React.FC = ({ children }): JSX.Element => (
                     />
                 </Helmet>
                 <ThemeProvider>
-                    <IndexWrapper>
-                        <Container padding={10}>{children}</Container>
-                    </IndexWrapper>
+                    <Container
+                        styles={{
+                            padding: 6,
+                            breakpoints: {
+                                md: {
+                                    padding: 12
+                                }
+                            }
+                        }}
+                    >
+                        {children}
+                    </Container>
                 </ThemeProvider>
             </>
         )}

diff --git a/src/pages/404.tsx b/src/pages/404.tsx
@@ -1,7 +1,6 @@
 import React from 'react';
-import { Link } from '@lapidist/components';
+import { Container, Link } from '@lapidist/components';
 import IndexLayout from '../layouts';
-import DesktopWrapper from '../components/MainWrapper';
 import LinkWrapper from '../components/LinkWrapper';
 import PageTitle from '../components/PageTitle';
 
@@ -10,11 +9,20 @@ const NotFoundPage = (): JSX.Element => (
         <header>
             <PageTitle>Page Not Found</PageTitle>
         </header>
-        <DesktopWrapper>
+        <Container
+            styles={{
+                width: 'full',
+                breakpoints: {
+                    md: {
+                        width: '1/2'
+                    }
+                }
+            }}
+        >
             <LinkWrapper>
                 <Link title="Return Home" href="/" />
             </LinkWrapper>
-        </DesktopWrapper>
+        </Container>
     </IndexLayout>
 );
 

diff --git a/src/pages/index.tsx b/src/pages/index.tsx
@@ -1,7 +1,6 @@
 import React from 'react';
-import { Link, Logo } from '@lapidist/components';
+import { Container, Link, Logo } from '@lapidist/components';
 import IndexLayout from '../layouts';
-import MainWrapper from '../components/MainWrapper';
 import LinkWrapper from '../components/LinkWrapper';
 import PageTitle from '../components/PageTitle';
 import TextWrapper from '../components/TextWrapper';
@@ -18,7 +17,16 @@ const IndexPage = (): JSX.Element => (
                 Brett Dorrans
             </PageTitle>
         </header>
-        <MainWrapper>
+        <Container
+            styles={{
+                width: 'full',
+                breakpoints: {
+                    md: {
+                        width: '1/2'
+                    }
+                }
+            }}
+        >
             <TextWrapper textColor={{ colorGroup: 'grey', colorShade: 'base' }}>
                 I&apos;m a Senior Software Engineer based in Glasgow, Scotland.
                 Scotland. I have been building software and strong client
@@ -33,7 +41,7 @@ const IndexPage = (): JSX.Element => (
                 </Link>
                 <Link href="mailto:hello@lapidist.net">Email</Link>
             </LinkWrapper>
-        </MainWrapper>
+        </Container>
     </IndexLayout>
 );