Some comments and cleanup

packages/website/ts/@next/components/container.tsx

@@ -1,30 +0,0 @@
-import * as React from 'react';
-import styled from 'styled-components';
-
-interface ContainerProps {
-  bgColor?: string;
-  removePadding?: boolean;
-}
-
-
-// are we still using this component? (i think not, so we should delete, but have notes)
-// Also, i dont understand why create a styled comp and then make a stateless component that returns the same thing?
-// should be enough to just export a styled component as it is understood that it takes props and a child
-const StyledContainer = styled.div<ContainerProps>`
-    background-color: ${props => props.bgColor || 'transparent'};
-    max-width: 111.111111111rem; // 2000px
-    margin: 0 auto;
-    padding: 0 1.666666667rem; // 30px
-
-    ${props => props.removePadding && `padding: 0;`}
-`;
-
-export const Container: React.StatelessComponent<ContainerProps> = props => {
-  const { children } = props;
-
-  return (
-    <StyledContainer {...props}>
-      {children}
-    </StyledContainer>
-  );
-};

packages/website/ts/@next/components/logo.tsx

@@ -10,6 +10,8 @@ interface LogoInterface {
 
 
 // Note let's refactor this
+// is it absolutely necessary to have a stateless component
+// to pass props down into the styled icon?
 const StyledLogo = styled.div`
     text-align: left;
 `;

packages/website/ts/@next/components/text.tsx

@@ -64,6 +64,9 @@ export const Heading: React.StatelessComponent<HeadingProps> = props => {
 };
 
 // No need to declare it twice as Styled then rewrap as a stateless comp
+// Note: this would be useful to be implemented the same way was "Heading"
+// and be more generic. e.g. <Text /> with a props asElement so we can use it
+// for literally anything =
 export const Paragraph = styled.p<ParagraphProps>`
     font-size: ${props => PARAGRAPH_SIZES[props.size || 'default']};
     margin-bottom: ${props => !props.noMargin && '30px'};