func: begin development of Popup

.babelrc

@@ -8,5 +8,10 @@
     ],
     "@babel/preset-react"
   ],
-  "plugins": ["@babel/plugin-transform-runtime"]
+  "plugins": [
+    "@babel/plugin-transform-runtime",
+    "macros",
+    "@babel/plugin-syntax-object-rest-spread",
+    "tailwind-components"
+  ]
 }

custom.d.ts

@@ -0,0 +1,34 @@
+declare module '*.svg' {
+    const content: never;
+    export default content;
+}
+
+declare module '*.png' {
+    const content: never;
+    export default content;
+}
+
+declare module '*.jpg' {
+    const content: never;
+    export default content;
+}
+
+declare module '*.css' {
+    const content: never;
+    export default content;
+}
+
+declare module '*.scss' {
+    const content: never;
+    export default content;
+}
+
+declare module '*.json' {
+    const value: never;
+    export default value;
+}
+
+declare module 'tailwind.macro' {
+    const value: any;
+    export default value;
+}

modules/popup/src/App.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import Header from './Header';
+import StadiaPlusLogo from './assets/image/StadiaPlus.svg';
+import styled from 'styled-components';
+import tw from 'twin.macro';
+
+const AppWrapper = styled('div')`
+    ${tw``}
+`;
+
+export default class App extends React.Component<any, any> {
+    constructor(params: any) {
+        super(params);
+    }
+
+    render() {
+        return (
+            <AppWrapper>
+                <Header icon={{ src: StadiaPlusLogo, alt: 'Stadia+ Logo' }} title='Stadia+' />
+            </AppWrapper>
+        );
+    }
+}

modules/popup/src/Header.tsx

@@ -0,0 +1,54 @@
+import React from 'react';
+import styled from 'styled-components';
+import tw from 'twin.macro';
+
+interface HeaderProps {
+    icon: {
+        src: string,
+        alt: string,
+    },
+    title: string,
+}
+
+const HeaderWrapper = styled('div')`
+    ${tw`
+        box-border
+        flex
+        items-center
+    `}
+`
+
+const LogoImage = styled('img')`
+    ${tw`
+        h-6
+        mr-2
+    `}
+`
+
+const LogoHeading = styled('h1')`
+    ${tw`
+        uppercase
+        font-bold
+        tracking-wider
+        m-0
+    `}
+    
+    background: -webkit-linear-gradient(45deg, #F54F29 0%, #EB4534 30%, #D02C53 70%, #B9166D 100%);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+`
+
+export default class Header extends React.Component<HeaderProps, any> {
+    constructor(props: HeaderProps) {
+        super(props);
+    }
+
+    render() {
+        return (
+            <HeaderWrapper>
+                <LogoImage src={this.props.icon.src} alt={this.props.icon.alt}/>
+                <LogoHeading>{this.props.title}</LogoHeading>
+            </HeaderWrapper>
+        );
+    }
+}

modules/popup/src/index.tsx

@@ -1,11 +1,12 @@
 import ReactDOM from 'react-dom';
-import TestComponent from '../../main/src/components/TestComponent';
 import React from 'react';
+import 'tailwindcss/tailwind.css';
+import App from './App';
 
 
 ReactDOM.render(
     <div>
-        <h1>Stadia+</h1>
+        <App/>
     </div>,
     document.getElementById('app')
 );