Type fixes

packages/website/ts/@next/components/dropdowns/dropdown_developers.tsx

@@ -5,11 +5,11 @@ import styled, {withTheme} from 'styled-components';
 
 import {Button} from 'ts/@next/components/button';
 import {Column, FlexWrap, WrapGrid} from 'ts/@next/components/newLayout';
+import {ThemeValuesInterface} from 'ts/@next/components/siteWrap';
 import {Heading} from 'ts/@next/components/text';
-import {GlobalStyle} from 'ts/@next/constants/globalStyle';
 
 interface Props {
-    theme: GlobalStyle;
+    theme: ThemeValuesInterface;
 }
 
 const introData = [
@@ -61,7 +61,7 @@ const linksData = [
     },
 ];
 
-export const DropdownDevelopers = withTheme((props: Props) => (
+export const DropdownDevelopers: React.FunctionComponent<Props> = withTheme((props: Props) => (
     <>
         <DropdownWrap>
             <div>

packages/website/ts/@next/components/dropdowns/dropdown_products.tsx

@@ -22,7 +22,7 @@ const navData = [
         // },
 ];
 
-export const DropdownProducts = () => (
+export const DropdownProducts: React.FunctionComponent<{}> = () => (
     <List>
         {_.map(navData, (item, index) => (
             <li key={`productLink-${index}`}>

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

@@ -75,8 +75,8 @@ export const Footer: React.StatelessComponent = () => (
             <FooterColumn width="55%">
                 <WrapGrid isCentered={false} isWrapped={true}>
                     {_.map(linkRows, (row: LinkRows, index) => (
-                        <MediaQuery minWidth={row.isOnMobile ? 0 : 768}>
-                            <FooterSectionWrap key={`fc-${index}`}>
+                        <MediaQuery minWidth={row.isOnMobile ? 0 : 768} key={`fc-${index}`}>
+                            <FooterSectionWrap>
                                 <RowHeading>
                                     {row.heading}
                                 </RowHeading>

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

@@ -11,16 +11,16 @@ import { Hamburger } from 'ts/@next/components/hamburger';
 import { Logo } from 'ts/@next/components/logo';
 import { MobileNav } from 'ts/@next/components/mobileNav';
 import { FlexWrap } from 'ts/@next/components/newLayout';
-import { ThemeInterface } from 'ts/@next/components/siteWrap';
+import { ThemeValuesInterface } from 'ts/@next/components/siteWrap';
 
 interface HeaderProps {
     location?: Location;
     isNavToggled?: boolean;
     toggleMobileNav?: () => void;
-    theme: ThemeInterface;
+    theme: ThemeValuesInterface;
 }
 
-interface NavItem {
+interface NavItemProps {
     url?: string;
     id?: string;
     text?: string;
@@ -32,7 +32,7 @@ interface DropdownWrapInterface {
     width?: number;
 }
 
-const navItems: NavItem[] = [
+const navItems: NavItemProps[] = [
     {
         id: 'why',
         url: '/next/why',
@@ -104,7 +104,7 @@ class HeaderBase extends React.Component<HeaderProps> {
 
 export const Header = withTheme(HeaderBase);
 
-const NavItem = (props: { link: NavItem; key: string }) => {
+const NavItem = (props: { link: NavItemProps; key: string }) => {
     const { link } = props;
     const Subnav = link.dropdownComponent;
 
@@ -116,7 +116,7 @@ const NavItem = (props: { link: NavItem; key: string }) => {
 
             {link.dropdownComponent &&
                 <DropdownWrap width={link.dropdownWidth}>
-                    {Subnav}
+                    <Subnav />
                 </DropdownWrap>
             }
         </LinkWrap>

packages/website/ts/@next/components/modals/input.tsx

@@ -13,7 +13,11 @@ interface InputProps {
     type?: string;
 }
 
-export const Input = React.forwardRef((props: InputProps, ref) => {
+interface LabelProps {
+    string: boolean;
+}
+
+export const Input = React.forwardRef((props: InputProps, ref?: React.Ref<HTMLInputElement>) => {
     const { name, label, type } = props;
     const id = `input-${name}`;
     const componentType = type === 'textarea' ? 'textarea' : 'input';

packages/website/ts/@next/components/modals/modal_contact.tsx

@@ -30,6 +30,7 @@ export class ModalContact extends React.Component<Props> {
         isSuccessful: false,
         errors: {},
     };
+    public nameRef: React.RefObject<HTMLInputElement> = React.createRef();
     public constructor(props: Props) {
         super(props);
     }
@@ -54,6 +55,7 @@ export class ModalContact extends React.Component<Props> {
                                     label="Your name"
                                     type="text"
                                     width={InputWidth.Half}
+                                    ref={this.nameRef}
                                 />
                                 <Input
                                     name="email"

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

@@ -6,6 +6,7 @@ import { colors } from 'ts/style/colors';
 interface InputProps {
     isSubmitted: boolean;
     name: string;
+    type: string;
     label: string;
 }
 
@@ -13,14 +14,14 @@ interface ArrowProps {
     isSubmitted: boolean;
 }
 
-const Input: React.ReactNode = React.forwardRef((props: InputProps, ref) => {
-    const { name, label } = props;
+const Input = React.forwardRef((props: InputProps, ref: React.Ref<HTMLInputElement>) => {
+    const { name, label, type } = props;
     const id = `input-${name}`;
 
     return (
         <InnerInputWrapper {...props}>
             <label className="visuallyHidden" htmlFor={id}>{label}</label>
-            <StyledInput ref={ref} id={id} placeholder={label} {...props} />
+            <StyledInput ref={ref} id={id} placeholder={label} type={type || 'text'} {...props} />
         </InnerInputWrapper>
     );
 });

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

@@ -20,25 +20,27 @@ interface MainProps {
     isNavToggled: boolean;
 }
 
+export interface ThemeValuesInterface {
+    bgColor: string;
+    darkBgColor?: string;
+    lightBgColor: string;
+    textColor: string;
+    paragraphColor: string;
+    linkColor: string;
+    mobileNavBgUpper: string;
+    mobileNavBgLower: string;
+    mobileNavColor: string;
+    dropdownBg: string;
+    dropdownButtonBg: string;
+    dropdownBorderColor?: string;
+    dropdownColor: string;
+    headerButtonBg: string;
+    footerBg: string;
+    footerColor: string;
+}
+
 export interface ThemeInterface {
-    [key: string]: {
-        bgColor: string;
-        darkBgColor?: string;
-        lightBgColor: string;
-        textColor: string;
-        paragraphColor: string;
-        linkColor: string;
-        mobileNavBgUpper: string;
-        mobileNavBgLower: string;
-        mobileNavColor: string;
-        dropdownBg: string;
-        dropdownButtonBg: string;
-        dropdownBorderColor?: string;
-        dropdownColor: string;
-        headerButtonBg: string;
-        footerBg: string;
-        footerColor: string;
-    };
+    [key: string]: ThemeValuesInterface;
 }
 
 const GLOBAL_THEMES: ThemeInterface = {