Make dev layout guidelines less obtrusive

2 files changed, 9 insertions, 7 deletions

diff --git a/packages/website/ts/@next/components/footer.tsx b/packages/website/ts/@next/components/footer.tsx
index 4c48f09f3..5a501504c 100644
--- a/packages/website/ts/@next/components/footer.tsx
+++ b/packages/website/ts/@next/components/footer.tsx
@@ -46,9 +46,11 @@ const linkRows = [
 ];
 
 export const Footer: React.StatelessComponent<FooterInterface> = ({}) => (
-  <FooterWrap>
+  <FooterWrap
+    bgColor="#181818"
+    noMargin>
     <Wrap>
-      <Column colWidth="1/2">
+      <Column colWidth="1/2" noPadding>
         <Logo />
       </Column>
 
diff --git a/packages/website/ts/@next/components/layout.tsx b/packages/website/ts/@next/components/layout.tsx
index b0989224c..edf739229 100644
--- a/packages/website/ts/@next/components/layout.tsx
+++ b/packages/website/ts/@next/components/layout.tsx
@@ -15,6 +15,7 @@ interface ColumnWidths {
 
 interface SectionProps {
   noPadding?: any,
+  noMargin?: any,
   bgColor?: string,
 }
 
@@ -58,7 +59,7 @@ const COLUMN_WIDTHS: ColumnWidths = {
 
 
 export const Main = styled.main`
-  border: 1px solid blue;
+  border: 1px dotted rgba(0, 0, 255, 0.3);
   width: calc(100% - 60px);
   max-width: ${MAX_WIDTH}px;
   margin: 0 auto;
@@ -67,16 +68,15 @@ export const Main = styled.main`
 export const Section = styled.section<SectionProps>`
   width: 100%;
   padding: ${props => !props.noPadding && '30px'};
-  margin-bottom: 30px;
+  margin-bottom: ${props => !props.noMargin && '30px'};
   background-color: ${props => props.bgColor};
-  border: 1px solid blue;
+  border: 1px dotted rgba(0, 255, 0, 0.3);
 `;
 
 export const Wrap = styled.div<WrapProps>`
   max-width: ${props => WRAPPER_WIDTHS[props.width || 'default']};
   background-color: ${props => props.bgColor};
   margin: 0 auto;
-  border: 1px solid green;
   display: flex;
   justify-content: space-between;
 `;
@@ -84,5 +84,5 @@ export const Wrap = styled.div<WrapProps>`
 export const Column = styled.div<ColumnProps>`
   width: ${props => props.colWidth ? COLUMN_WIDTHS[props.colWidth] : '100%'};
   padding: ${props => !props.noPadding && '30px'};
-  border: 1px solid yellow;
+  border: 1px dotted rgba(255, 0, 0, 0.3);
 `;