Changes boolean props to follow is[Property] syntax

5 files changed, 30 insertions, 29 deletions

diff --git a/packages/website/ts/@next/components/footer.tsx b/packages/website/ts/@next/components/footer.tsx
index b431ba9e5..032d2e8a1 100644
--- a/packages/website/ts/@next/components/footer.tsx
+++ b/packages/website/ts/@next/components/footer.tsx
@@ -61,18 +61,18 @@ export const Footer: React.StatelessComponent<FooterInterface> = ({}) => (
     bgColor="#181818"
     noMargin>
     <Wrap>
-      <Column colWidth="1/2" noPadding>
+      <Column colWidth="1/2" isNoPadding={true}>
         <Logo light />
         <NewsletterForm />
       </Column>
 
-      <Column colWidth="1/2" noPadding>
+      <Column colWidth="1/2" isNoPadding={true}>
         <Wrap>
           {_.map(linkRows, (row, index) => (
             <Column
               key={`fc-${index}`}
               colWidth="1/3"
-              noPadding>
+              isNoPadding={true}>
               <RowHeading>
                 { row.heading }
               </RowHeading>
diff --git a/packages/website/ts/@next/components/layout.tsx b/packages/website/ts/@next/components/layout.tsx
index 86072b81d..28503711c 100644
--- a/packages/website/ts/@next/components/layout.tsx
+++ b/packages/website/ts/@next/components/layout.tsx
@@ -17,11 +17,11 @@ interface PaddingSizes {
 }
 
 interface SectionProps {
-    noPadding?: any;
-    padLarge?: any;
-    noMargin?: any;
+    isNoPadding?: boolean;
+    isPadLarge?: boolean;
+    isNoMargin?: any;
     bgColor?: string;
-    fullWidth?: any;
+    isFullWidth?: boolean;
 }
 
 interface WrapProps {
@@ -32,8 +32,8 @@ interface WrapProps {
 
 interface ColumnProps {
     colWidth?: '1/4' | '1/3' | '1/2' | '2/3';
-    noPadding?: any;
-    padLarge?: any;
+    isNoPadding?: boolean;
+    isPadLarge?: boolean;
     bgColor?: string;
 }
 
@@ -93,8 +93,8 @@ export const Main = styled.main`
 // just <Section asElement?="div/section/footer/header/whatever" /> ?
 export const Section = styled.section<SectionProps>`
     width: ${props => props.fullWidth ? `calc(100% + ${GUTTER * 2}px)` : '100%'};
-    padding: ${props => !props.noPadding && (props.padLarge ? '60px 30px' : '30px')};
-    margin-bottom: ${props => !props.noMargin && `${GUTTER}px`};
+    padding: ${props => !props.isNoPadding && (props.isPadLarge ? '60px 30px' : '30px')};
+    margin-bottom: ${props => !props.isNoMargin && `${GUTTER}px`};
     margin-left: ${props => props.fullWidth && `-${GUTTER}px`};
     background-color: ${props => props.bgColor};
     border: 1px dotted rgba(0, 255, 0, 0.3);
@@ -137,7 +137,7 @@ export const WrapGrid = styled(WrapBase)`
 `;
 
 export const Column = styled.div<ColumnProps>`
-    padding: ${props => !props.noPadding && (props.padLarge ? '60px 30px' : '30px')};
+    padding: ${props => !props.isNoPadding && (props.isPadLarge ? '60px 30px' : '30px')};
     border: 1px dotted rgba(255, 0, 0, 0.3);
     background-color: ${props => props.bgColor};
 
diff --git a/packages/website/ts/@next/components/logo.tsx b/packages/website/ts/@next/components/logo.tsx
index 0b98fcf9d..5d6258f37 100644
--- a/packages/website/ts/@next/components/logo.tsx
+++ b/packages/website/ts/@next/components/logo.tsx
@@ -1,11 +1,12 @@
 import * as React from 'react';
 import styled from 'styled-components';
 
+import { ThemeInterface } from 'ts/@next/components/siteWrap';
 import LogoIcon from '../icons/logo-with-type.svg';
 
 interface LogoInterface {
-    // showType: boolean;
     light?: any;
+    theme?: ThemeInterface;
 }
 
 
@@ -20,7 +21,7 @@ const Icon = styled(LogoIcon)`
     flex-shrink: 0;
 
     path {
-        fill: ${props => props.light ? '#fff' : props.theme.textColor};
+        fill: ${(props: LogoInterface) => props.light ? '#fff' : props.theme.textColor};
     }
 `;
 
diff --git a/packages/website/ts/@next/components/siteWrap.tsx b/packages/website/ts/@next/components/siteWrap.tsx
index 7529e90c9..d38c7c50c 100644
--- a/packages/website/ts/@next/components/siteWrap.tsx
+++ b/packages/website/ts/@next/components/siteWrap.tsx
@@ -13,14 +13,15 @@ interface Props {
     children: any;
 }
 
-interface GlobalThemes {
+// we proabbly want to put this somewhere else (themes)
+export interface ThemeInterface {
     [key: string]: {
         bgColor: string;
         textColor: string;
     }
 }
 
-const GLOBAL_THEMES: GlobalThemes = {
+const GLOBAL_THEMES: ThemeInterface = {
     dark: {
         bgColor: '#000000',
         textColor: '#FFFFFF',
diff --git a/packages/website/ts/@next/components/text.tsx b/packages/website/ts/@next/components/text.tsx
index 4bc21f0fc..4e2b22f52 100644
--- a/packages/website/ts/@next/components/text.tsx
+++ b/packages/website/ts/@next/components/text.tsx
@@ -1,20 +1,19 @@
 import * as React from 'react';
-import styled, { withTheme } from 'styled-components';
-import { colors } from 'ts/style/colors';
+import styled from 'styled-components';
+
 
 interface HeadingProps {
     asElement?: 'h1'| 'h2'| 'h3'| 'h4';
     size?: 'default' | 'medium' | 'large' | 'small';
-    center?: boolean;
-    children: Node | string;
-    noMargin?: any;
+    isCentered?: boolean;
+    isNoMargin?: boolean;
 }
 
 interface ParagraphProps {
-    noMargin?: any;
+    isNoMargin?: boolean;
     size?: 'default' | 'small' | 'medium' | 'large';
-    muted?: any;
-    center?: any;
+    isMuted?: boolean | number;
+    isCentered?: boolean;
 }
 
 interface HeadingSizes {
@@ -50,8 +49,8 @@ const StyledHeading = styled.h1<HeadingProps>`
     color: ${props => props.color || props.theme.textColor};
     font-size: ${props => HEADING_SIZES[props.size || 'default']};
     font-weight: 300;
-    margin-bottom: ${props => !props.noMargin && '30px'};
-    text-align: ${props => props.center && 'center'};
+    margin-bottom: ${props => !props.isNoMargin && '30px'};
+    text-align: ${props => props.isCentered && 'center'};
 `;
 
 export const Heading: React.StatelessComponent<HeadingProps> = props => {
@@ -69,9 +68,9 @@ export const Heading: React.StatelessComponent<HeadingProps> = props => {
 // for literally anything =
 export const Paragraph = styled.p<ParagraphProps>`
     font-size: ${props => PARAGRAPH_SIZES[props.size || 'default']};
-    margin-bottom: ${props => !props.noMargin && '30px'};
+    margin-bottom: ${props => !props.isNoMargin && '30px'};
     line-height: 1.4;
     color: ${props => props.color || props.theme.textColor};
-    opacity: ${props => props.muted || 0.75};
-    text-align: ${props => props.center && 'center'};
+    opacity: ${props => typeof props.isMuted === 'boolean' ? 0.75 : props.isMuted};
+    text-align: ${props => props.isCentered && 'center'};
 `;