replace styled-components theme import with our own

src/features/newTab/clock/style.ts

@@ -2,9 +2,9 @@
  * License. v. 2.0. If a copy of the MPL was not distributed with this file.
  * You can obtain one at http://mozilla.org/MPL/2.0/. */
 
-import styled from 'styled-components'
+import styled from '../../../theme'
 
-const StyledClock = styled<{}, 'div'>('div')`
+const StyledClock = styled<React.HTMLProps<HTMLDivElement>, 'div'>('div')`
   box-sizing: border-box;
   line-height: 1;
   user-select: none;
@@ -15,7 +15,7 @@ const StyledClock = styled<{}, 'div'>('div')`
   color: rgb(255, 255, 255);
 `
 
-const StyledTime = styled<{}, 'span'>('span')`
+const StyledTime = styled<React.HTMLProps<HTMLSpanElement>, 'span'>('span')`
   box-sizing: border-box;
   letter-spacing: 0;
   font-size: 75px;
@@ -25,7 +25,7 @@ const StyledTime = styled<{}, 'span'>('span')`
   display: inline-flex;
 `
 
-const StyledPeriod = styled<{}, 'span'>('span')`
+const StyledPeriod = styled<React.HTMLProps<HTMLSpanElement>, 'span'>('span')`
   box-sizing: border-box;
   color: inherit;
   font-family: inherit;
@@ -38,7 +38,7 @@ const StyledPeriod = styled<{}, 'span'>('span')`
   vertical-align: top;
 `
 
-const StyledTimeSeparator = styled<{}, 'span'>('span')`
+const StyledTimeSeparator = styled<React.HTMLProps<HTMLSpanElement>, 'span'>('span')`
   box-sizing: border-box;
   color: inherit;
   font-size: inherit;

src/features/newTab/featureBlock/style.ts

@@ -2,10 +2,10 @@
  * License, v. 2.0. If a copy of the MPL was not distributed with this file,
  * You can obtain one at http://mozilla.org/MPL/2.0/. */
 
-import styled from 'styled-components'
+import styled from '../../../theme'
 import { FeatureBlockProps } from './index'
 
-export const StyledFeatureBlock = styled<FeatureBlockProps, 'div'>('div')`
+export const StyledFeatureBlock = styled<FeatureBlockProps & React.HTMLProps<HTMLDivElement>, 'div'>('div')`
   display: grid;
   height: 100%;
   grid-gap: ${p => p.grid ? '30px' : '0'};

src/features/newTab/page/style.ts → src/features/newTab/page/index.ts

@@ -2,18 +2,18 @@
  * License, v. 2.0. If a copy of the MPL was not distributed with this file,
  * You can obtain one at http://mozilla.org/MPL/2.0/. */
 
-import styled from 'styled-components'
+import styled from '../../../theme'
 import palette from '../../../theme/palette'
 
-export const StyledPage = styled<{}, 'div'>('div')`
+export const Page = styled<React.HTMLProps<HTMLDivElement>, 'div'>('div')`
   -webkit-font-smoothing: antialiased;
   background: linear-gradient(#4b3c6e, #000);
   min-height: 100%;
   height: initial;
   padding: 40px 60px;
 `
 
-export const StyledPageWrapper = styled<{}, 'main'>('main')`
+export const PageWrapper = styled<React.HTMLProps<HTMLMainElement>, 'main'>('main')`
   display: flex;
   flex-direction: column;
   align-items: center;

src/features/newTab/pageHeader/style.ts

@@ -2,9 +2,9 @@
  * License, v. 2.0. If a copy of the MPL was not distributed with this file,
  * You can obtain one at http://mozilla.org/MPL/2.0/. */
 
-import styled from 'styled-components'
+import styled from '../../../theme'
 
-export const StyledPageHeader = styled<{}, 'header'>('header')`
+export const StyledPageHeader = styled<React.HTMLProps<HTMLDivElement>, 'div'>('div')`
   width: 100%;
   padding: 40px 0;
   display: flex;

src/features/newTab/stats/style.ts

@@ -2,9 +2,9 @@
  * License. v. 2.0. If a copy of the MPL was not distributed with this file.
  * You can obtain one at http://mozilla.org/MPL/2.0/. */
 
-import styled from 'styled-components'
+import styled from '../../../theme'
 
-export const StyledStatsItemContainer = styled<{}, 'ul'>('ul')`
+export const StyledStatsItemContainer = styled<React.HTMLProps<HTMLUListElement>, 'ul'>('ul')`
   display: block;
   font-weight: 400;
   margin: 0;
@@ -20,7 +20,7 @@ export const StyledStatsItemContainer = styled<{}, 'ul'>('ul')`
   }
 `
 
-export const StyledStatsItem = styled<{}, 'li'>('li')`
+export const StyledStatsItem = styled<React.HTMLProps<HTMLLIElement>, 'li'>('li')`
   vertical-align: middle;
   list-style-type: none;
   font-size: inherit;
@@ -40,7 +40,7 @@ export const StyledStatsItem = styled<{}, 'li'>('li')`
   }
 `
 
-export const StyledStatsItemCounter = styled<{}, 'span'>('span')`
+export const StyledStatsItemCounter = styled<React.HTMLProps<HTMLSpanElement>, 'span'>('span')`
   color: inherit;
   font-family: ${p => p.theme.fontFamily.heading};
   font-size: 44px;
@@ -53,7 +53,7 @@ export const StyledStatsItemCounter = styled<{}, 'span'>('span')`
   overflow: hidden;
 `
 
-export const StyledStatsItemText = styled<{}, 'span'>('span')`
+export const StyledStatsItemText = styled<React.HTMLProps<HTMLSpanElement>, 'span'>('span')`
   color: rgb(153, 153, 153);
   font-size: 20px;
   font-family: ${p => p.theme.fontFamily.heading};
@@ -63,7 +63,7 @@ export const StyledStatsItemText = styled<{}, 'span'>('span')`
   letter-spacing: 0;
 `
 
-export const StyledStatsItemDescription = styled<{}, 'div'>('div')`
+export const StyledStatsItemDescription = styled<React.HTMLProps<HTMLDivElement>, 'div'>('div')`
   font-size: 13px;
   font-weight: 400;
   color: rgb(255, 255, 255);

src/features/newTab/text/index.tsx

@@ -2,11 +2,11 @@
  * License, v. 2.0. If a copy of the MPL was not distributed with this file,
  * You can obtain one at http://mozilla.org/MPL/2.0/. */
 
-import styled, { css } from 'styled-components'
+import styled, { css } from '../../../theme'
+import Heading, { HeadingProps } from '../../../components/text/heading'
 
-import { Heading } from '../../../index'
-
-export const NewTabHeading = styled(Heading)`
+// TODO: consider exporting props to the main export file
+export const NewTabHeading = styled<HeadingProps & React.HTMLProps<HTMLHeadingElement>, any>(Heading)`
   ${p => p.level === 2 && css`
     display: flex;
     white-space: nowrap;
@@ -26,7 +26,7 @@ export const NewTabHeading = styled(Heading)`
   `}
 `
 
-export const Paragraph = styled<{}, 'p'>('p')`
+export const Paragraph = styled<React.HTMLProps<HTMLParagraphElement>, 'p'>('p')`
   display: flex;
   align-items: center;
   margin: 0 0 10px;
@@ -38,7 +38,7 @@ export const Paragraph = styled<{}, 'p'>('p')`
   font-family: ${p => p.theme.fontFamily.body};
 `
 
-export const LinkText = styled<{}, 'a'>('a')`
+export const LinkText = styled<React.HTMLProps<HTMLAnchorElement>, 'a'>('a')`
   line-height: 1.75;
   font-size: 16px;
   color: #FF6000;
@@ -48,7 +48,7 @@ export const LinkText = styled<{}, 'a'>('a')`
   text-decoration: underline;
 `
 
-export const EmphasizedText = styled<{}, 'em'>('em')`
+export const EmphasizedText = styled<React.HTMLProps<HTMLSpanElement>, 'span'>('span')`
   font-family: ${p => p.theme.fontFamily.heading};
   font-size: 20px;
   font-weight: 600;
@@ -57,7 +57,7 @@ export const EmphasizedText = styled<{}, 'em'>('em')`
   font-style: normal;
 `
 
-export const LabelledText = styled<{}, 'span'>('span')`
+export const LabelledText = styled<React.HTMLProps<HTMLSpanElement>, 'span'>('span')`
   padding: 3px 8px;
   border-radius: 12px;
   text-transform: uppercase;
@@ -71,7 +71,7 @@ export const LabelledText = styled<{}, 'span'>('span')`
   font-family: ${p => p.theme.fontFamily.heading};
 `
 
-export const SmallText = styled<{}, 'small'>('small')`
+export const SmallText = styled<React.HTMLProps<HTMLSpanElement>, 'span'>('span')`
   margin: 0;
   line-height: 1.5;
   font-size: 13px;