fix prettier issues

.prettierignore

@@ -0,0 +1,4 @@
+node_modules/
+dist/
+.yarn/
+storybook-static/

.prettierrc

@@ -1,4 +0,0 @@
-{
-	"semi": false,
-	"singleQuote": true
-}

.prettierrc.js

@@ -0,0 +1,3 @@
+module.exports = {
+  ...require('../.prettierrc.js'),
+}

lerna.json

@@ -1,7 +1,5 @@
 {
-  "packages": [
-    "packages/*"
-  ],
+  "packages": ["packages/*"],
   "version": "independent",
   "npmClient": "yarn",
   "useWorkspaces": true

packages/app/config-overrides.js

@@ -4,43 +4,43 @@ const eslintConfig = require('../../.eslintrc.js')
 
 // based on https://github.com/arackaf/customize-cra/issues/175#issuecomment-610023655
 const useEslintConfig = (configRules) => (config) => {
-	const updatedRules = config.module.rules.map((rule) => {
-		// Only target rules that have defined a `useEslintrc` parameter in their options
-		if (rule.use && rule.use.some((use) => use.options && use.options.useEslintrc !== void 0)) {
-			const ruleUse = rule.use[0]
-			const baseOptions = ruleUse.options
-			const baseConfig = baseOptions.baseConfig || {}
-			const newOptions = {
-				useEslintrc: false,
-				ignore: true,
-				baseConfig: { ...baseConfig, ...configRules },
-			}
-			ruleUse.options = newOptions
-			return rule
+  const updatedRules = config.module.rules.map((rule) => {
+    // Only target rules that have defined a `useEslintrc` parameter in their options
+    if (rule.use && rule.use.some((use) => use.options && use.options.useEslintrc !== void 0)) {
+      const ruleUse = rule.use[0]
+      const baseOptions = ruleUse.options
+      const baseConfig = baseOptions.baseConfig || {}
+      const newOptions = {
+        useEslintrc: false,
+        ignore: true,
+        baseConfig: { ...baseConfig, ...configRules },
+      }
+      ruleUse.options = newOptions
+      return rule
 
-			// Rule not using eslint. Do not modify.
-		} else {
-			return rule
-		}
-	})
+      // Rule not using eslint. Do not modify.
+    } else {
+      return rule
+    }
+  })
 
-	config.module.rules = updatedRules
-	return config
+  config.module.rules = updatedRules
+  return config
 }
 
 module.exports = {
-	webpack: override(
-		addBabelPreset('@emotion/babel-preset-css-prop'),
-		addWebpackAlias({
-			['@']: path.resolve(__dirname, 'src/'),
-		}),
+  webpack: override(
+    addBabelPreset('@emotion/babel-preset-css-prop'),
+    addWebpackAlias({
+      ['@']: path.resolve(__dirname, 'src/'),
+    }),
 
-		// once project is cleaned up we can remove disable and enable the config again
-		// useEslintConfig(eslintConfig),
-		disableEsLint()
-	),
-	paths: (paths) => {
-		paths.appBuild = path.resolve(__dirname, '..', '..', 'dist')
-		return paths
-	},
+    // once project is cleaned up we can remove disable and enable the config again
+    // useEslintConfig(eslintConfig),
+    disableEsLint()
+  ),
+  paths: (paths) => {
+    paths.appBuild = path.resolve(__dirname, '..', '..', 'dist')
+    return paths
+  },
 }

packages/app/package.json

@@ -1,83 +1,83 @@
 {
-	"name": "atlas-app",
-	"version": "1.0.0",
-	"description": "A user governed video platform",
-	"license": "ISC",
-	"directories": {
-		"src": "src",
-		"test": "src/__tests__"
-	},
-	"files": [
-		"src"
-	],
-	"repository": {
-		"type": "git",
-		"url": "https://github.com/Joystream/joystream.git"
-	},
-	"bugs": {
-		"url": "https://github.com/Joystream/joystream/issues"
-	},
-	"scripts": {
-		"start": "react-app-rewired start",
-		"dev": "react-app-rewired start",
-		"build": "react-app-rewired build",
-		"test": "react-app-rewired test --watchAll=false",
-		"eject": "react-app-rewired eject",
-		"storybook": "start-storybook -p 6006 --quiet -c src/shared/.storybook",
-		"build-storybook": "build-storybook -c src/shared/.storybook",
-		"chromatic": "chromatic --project-token=qq8aetz26u"
-	},
-	"dependencies": {
-		"@emotion/babel-preset-css-prop": "^10.0.27",
-		"@emotion/core": "^10.0.28",
-		"@reach/router": "^1.3.3",
-		"@storybook/addon-actions": "^5.3.17",
-		"@storybook/addon-docs": "^5.3.17",
-		"@storybook/addon-knobs": "^5.3.17",
-		"@storybook/addon-links": "^5.3.17",
-		"@storybook/addon-storysource": "^5.3.17",
-		"@storybook/addons": "^5.3.19",
-		"@storybook/preset-create-react-app": "^3.1.4",
-		"@storybook/react": "^5.3.17",
-		"@storybook/theming": "^5.3.19",
-		"@types/reach__router": "^1.3.5",
-		"@types/react": "^16.9.0",
-		"@types/react-dom": "^16.9.0",
-		"@types/react-redux": "^7.1.9",
-		"@types/redux": "^3.6.0",
-		"chromatic": "^4.0.3",
-		"customize-cra": "^1.0.0",
-		"emotion-normalize": "^10.1.0",
-		"react": "^16.13.1",
-		"react-app-rewired": "^2.1.6",
-		"react-docgen-typescript-loader": "^3.7.1",
-		"react-dom": "^16.13.1",
-		"react-player": "^2.2.0",
-		"react-redux": "^7.2.0",
-		"react-scripts": "3.4.1",
-		"react-spring": "^8.0.27",
-		"redux": "^4.0.5",
-		"storybook-addon-jsx": "^7.1.15",
-		"use-resize-observer": "^6.1.0"
-	},
-	"browserslist": {
-		"production": [
-			">0.2%",
-			"not dead",
-			"not op_mini all"
-		],
-		"development": [
-			"last 1 chrome version",
-			"last 1 firefox version",
-			"last 1 safari version"
-		]
-	},
-	"jest": {
-		"moduleNameMapper": {
-			"@/(.*)$": "<rootDir>/src/$1",
-			"\\.svg": "<rootDir>/src/__mocks__/svgrMock.js"
-		},
-		"clearMocks": true,
-		"coverageDirectory": ".coverage"
-	}
+  "name": "atlas-app",
+  "version": "1.0.0",
+  "description": "A user governed video platform",
+  "license": "ISC",
+  "directories": {
+    "src": "src",
+    "test": "src/__tests__"
+  },
+  "files": [
+    "src"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/Joystream/joystream.git"
+  },
+  "bugs": {
+    "url": "https://github.com/Joystream/joystream/issues"
+  },
+  "scripts": {
+    "start": "react-app-rewired start",
+    "dev": "react-app-rewired start",
+    "build": "react-app-rewired build",
+    "test": "react-app-rewired test --watchAll=false",
+    "eject": "react-app-rewired eject",
+    "storybook": "start-storybook -p 6006 --quiet -c src/shared/.storybook",
+    "build-storybook": "build-storybook -c src/shared/.storybook",
+    "chromatic": "chromatic --project-token=qq8aetz26u"
+  },
+  "dependencies": {
+    "@emotion/babel-preset-css-prop": "^10.0.27",
+    "@emotion/core": "^10.0.28",
+    "@reach/router": "^1.3.3",
+    "@storybook/addon-actions": "^5.3.17",
+    "@storybook/addon-docs": "^5.3.17",
+    "@storybook/addon-knobs": "^5.3.17",
+    "@storybook/addon-links": "^5.3.17",
+    "@storybook/addon-storysource": "^5.3.17",
+    "@storybook/addons": "^5.3.19",
+    "@storybook/preset-create-react-app": "^3.1.4",
+    "@storybook/react": "^5.3.17",
+    "@storybook/theming": "^5.3.19",
+    "@types/reach__router": "^1.3.5",
+    "@types/react": "^16.9.0",
+    "@types/react-dom": "^16.9.0",
+    "@types/react-redux": "^7.1.9",
+    "@types/redux": "^3.6.0",
+    "chromatic": "^4.0.3",
+    "customize-cra": "^1.0.0",
+    "emotion-normalize": "^10.1.0",
+    "react": "^16.13.1",
+    "react-app-rewired": "^2.1.6",
+    "react-docgen-typescript-loader": "^3.7.1",
+    "react-dom": "^16.13.1",
+    "react-player": "^2.2.0",
+    "react-redux": "^7.2.0",
+    "react-scripts": "3.4.1",
+    "react-spring": "^8.0.27",
+    "redux": "^4.0.5",
+    "storybook-addon-jsx": "^7.1.15",
+    "use-resize-observer": "^6.1.0"
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  },
+  "jest": {
+    "moduleNameMapper": {
+      "@/(.*)$": "<rootDir>/src/$1",
+      "\\.svg": "<rootDir>/src/__mocks__/svgrMock.js"
+    },
+    "clearMocks": true,
+    "coverageDirectory": ".coverage"
+  }
 }

packages/app/public/index.html

@@ -1,21 +1,15 @@
 <!DOCTYPE html>
 <html lang="en">
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width, initial-scale=1" />
-		<meta name="description" content="Joystream Atlas" />
-		<link
-			rel="stylesheet"
-			href="https://ben.click/Optimo_11264_K0tfnA/Optimo-PxGrotesk/PxGroteskRegular-Regular.css"
-		/>
-		<link
-			rel="stylesheet"
-			href="https://ben.click/Optimo_11264_K0tfnA/Optimo-PxGrotesk/PxGroteskBold-Regular.css"
-		/>
-		<title>Atlas</title>
-	</head>
-	<body>
-		<noscript>You need to enable JavaScript to run this app.</noscript>
-		<div id="root"></div>
-	</body>
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="description" content="Joystream Atlas" />
+    <link rel="stylesheet" href="https://ben.click/Optimo_11264_K0tfnA/Optimo-PxGrotesk/PxGroteskRegular-Regular.css" />
+    <link rel="stylesheet" href="https://ben.click/Optimo_11264_K0tfnA/Optimo-PxGrotesk/PxGroteskBold-Regular.css" />
+    <title>Atlas</title>
+  </head>
+  <body>
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+    <div id="root"></div>
+  </body>
 </html>

packages/app/src/App.tsx

@@ -7,13 +7,13 @@ import { Layout } from './components'
 import { HomeView } from './views'
 
 export default function App() {
-	return (
-		<Provider store={store}>
-			<Layout>
-				<Router primary={false}>
-					<HomeView default />
-				</Router>
-			</Layout>
-		</Provider>
-	)
+  return (
+    <Provider store={store}>
+      <Layout>
+        <Router primary={false}>
+          <HomeView default />
+        </Router>
+      </Layout>
+    </Provider>
+  )
 }

packages/app/src/__tests__/App.test.js

@@ -1,13 +1,11 @@
-import React from "react"
-import { shallow } from "enzyme"
-import App from "../App"
-
-describe("App component", () => {
+import React from 'react'
+import { shallow } from 'enzyme'
+import App from '../App'
 
+describe('App component', () => {
   const component = shallow(<App />)
 
-  it("Should render.", () => {
+  it('Should render.', () => {
     expect(component).toBeDefined()
   })
-
 })

packages/app/src/components/ChannelGallery.tsx

@@ -3,65 +3,65 @@ import { css } from '@emotion/core'
 import { ChannelPreview, Gallery } from '@/shared/components'
 
 const channels = [
-	{
-		channel: 'Channel Name',
-		views: '334k',
-		channelAvatar:
-			'https://s3-alpha-sig.figma.com/img/6751/0287/aac9acd027772e345affcf7aa6b55558?Expires=1594598400&Signature=fvbTsTzpk~ZCOnkgIH0ir-Mogd0Z4YI7J1sviV2sEnDn3SvlYEV~iW2sJs65a73cbaKTam3ZE4er~nXogGBQvEfqcQwm7Gv4riTgVKqopFOflM5CZ1xgPb1s6OmlSDXNsqR8Wl6oP~DRt7Dl-fWjmpPj-uk01GCWGKX4QR2zwezPg1zSZxB~xpaxCKnzi8tbTnGfTpDFJCFDQdSu-P3OVR~B~M8v6p-ZODsDHe9OtRwB2YyAi21ac-PFEWPM4Pm0oGVcAkRTV~-MK70bhtF9mSwNaCXS3BhU3~RhlihoJnuVU5aCtoxQ5DkgCSFc9~QE~lDCRRAFIaO-XApXDt97TA__&Key-Pair-Id=APKAINTVSUGEWH5XD5UA',
-	},
-	{
-		channel: 'Channel Name',
-		views: '334k',
-		channelAvatar:
-			'https://s3-alpha-sig.figma.com/img/f853/b9f7/e07227eb3c4e6312d43372578cdea8f1?Expires=1594598400&Signature=AhF3IwhCDhR3aZBnCOVcN2Vj-fTAabElsuAsVT2sAc0Txu3aQz0XiYxEqOrUHhxzGkVr0oXNlcC9WTWlPQfE~rOd~D~E0wTTd5SVMoWtPmX5Uuy4ohRfUdBx0FifTzEN~e5H0cuXOyYd01TmMWWkreVYMxJ0mRVPjqS9sYbCSvaxyQY5v8fpa69ATGkrBx4W96HcPGJeTJZEJEawJbVIHbAXgrJKlCCkD3oRjur00Nw~v~WKDyPW1nb0BSSUe7NeRaV4qIztPyAorQVBO4iFaVDeS~IeTRPG4T4trZoRJtpF9jTfBDd~0dFWbvJ2CeavaClhC5bY8fYlIcfRjddTyA__&Key-Pair-Id=APKAINTVSUGEWH5XD5UA',
-	},
-	{
-		channel: 'Channel Name',
-		views: '334k',
-		channelAvatar:
-			'https://s3-alpha-sig.figma.com/img/57d7/47bd/e40e51d45107656c92b3c9d982e76c6e?Expires=1594598400&Signature=SZwkYLVqsT9d2UPzQKA0whK2o4590Lf15eipFvdpJNf~JtrNWSXJKfgpcDp-APKSaPy8-ycv-cDyOMtog7zTB5Ygh8Rag0pEumJQgXSPBw6e~DmE1lPlLED-cmzrEOnCYVaa6m6zjln57K6jP0yusSwZTNly3moD-9iIRrR4fP9ZNBVHVpW~TSeyd7hL4r26s4NNVNkWrFw8~vrz-byARTPo5vyTqvPkaX1QL~uNjfU5x~--BAGb6meuPBMNeolFbUWj2HsV908N0xZdcMLfZ92-Ze1IVq4wc~fuIitcDZ7z6LQSVf5QuMef4X9QYR7BDvXT8iq-NeOGYyPsGpZ3Jg__&Key-Pair-Id=APKAINTVSUGEWH5XD5UA',
-	},
-	{
-		channel: 'Channel Name',
-		views: '334k',
-		channelAvatar:
-			'https://s3-alpha-sig.figma.com/img/3408/13d0/9b77ae604c2991a867734c9bc7511bdb?Expires=1594598400&Signature=WfF06NNeSSMn5O~NKhufgbJubM-9CqIyPCwwP4nGY0hxPGbQ4aoauZSdNG8XZtxuFtcdxvcapt4Y~mqgbDNIJsj7pRnWueEptTGSJEto99SNxNjgZpfz7BM-T-48D3PfsYWwKnthOssm8eLTIVbDODM4VRfTRS~G94olA9g8VxAf9YLW6aorO01nrtoNS~3~O~sGVVnC2OZeCcEba0eQWPdVM94nvk1HDRe08WtXLGoi3E3gAr5wo4E48LtskEO0ycguLlzPGeSS-1Z7XqiGnhQ1y90yAk4OLWJh1HYsgNromK-OSBLU0Dpm3CYWzjYn29OiLC9N9ypudQDjnatkUg__&Key-Pair-Id=APKAINTVSUGEWH5XD5UA',
-	},
-	{
-		channel: 'Channel Name',
-		views: '334k',
-		channelAvatar:
-			'https://s3-alpha-sig.figma.com/img/dff3/9515/5c27afa40752cfa517b4d1a67b52819d?Expires=1594598400&Signature=VuAo23WQ1xnIPVqpCohfQbjXhOrKo9JZmuBd~EpyHf83PhzrIUrkEQke8QOGiKJuGQ-yw-MVa1ec3Xv-35x9Lh1QSkRIc6oQlSxbuZ3Enxg106xflm9ykurtYTF7DXg8LCLqRcl1sMNPFtkoPLz92uHmaDBqr6DU7f6mFY1VxG85bT1nWHX4TEtC~Nc6qr07Rd1PjFCodt7QcDpkQSjjbcSijjDtAcnzeGWaO9mWJCvxapsxUC43j4i7fDA8GyMXl2bnfTQrSXGcEXvapwIblxU3goqWbjrjGoN72C2shxaqLp-Xmhc7r-p4wTvDVfgk9XHZ7ytci~hkPQA2qvZAew__&Key-Pair-Id=APKAINTVSUGEWH5XD5UA',
-	},
-	{
-		channel: 'Channel Name',
-		views: '334k',
-		channelAvatar:
-			'https://s3-alpha-sig.figma.com/img/f964/ea3d/0c500a4a50470a935ff6bee32ee0731a?Expires=1594598400&Signature=dBOZ0VVyfgxZ~VzH6jpeF4vCWROEGxr6QtOyM8X5kCtvvhvJfd2KRxO8iyVea9ZDIYo7VnDh4IngE3yW040dRFdQuVEKkqZC8aLE8pzXkgqdNlzANAVSnrHYW~Y-3xtLBA3I9dr5EPNasH37ZjFyCYvXjgjXvOpL9-Ji5aHtkDOUN-KCbh6ETJSoQOt~uytRcXoYscnKHPUykRpZVvsPtLUojOqJfCfS0u5sGyqLEEPKgSHt3Q00vHSe5fr~GAy3JbzZ6lEETbFu0iS05RxKDC44ojql0ZP1RkX5BvIxXQ6CEjF2GaRXzV81k7QUAPbs3ZR2Ess2Lmd1NHlqt2rcbg__&Key-Pair-Id=APKAINTVSUGEWH5XD5UA',
-	},
+  {
+    channel: 'Channel Name',
+    views: '334k',
+    channelAvatar:
+      'https://s3-alpha-sig.figma.com/img/6751/0287/aac9acd027772e345affcf7aa6b55558?Expires=1594598400&Signature=fvbTsTzpk~ZCOnkgIH0ir-Mogd0Z4YI7J1sviV2sEnDn3SvlYEV~iW2sJs65a73cbaKTam3ZE4er~nXogGBQvEfqcQwm7Gv4riTgVKqopFOflM5CZ1xgPb1s6OmlSDXNsqR8Wl6oP~DRt7Dl-fWjmpPj-uk01GCWGKX4QR2zwezPg1zSZxB~xpaxCKnzi8tbTnGfTpDFJCFDQdSu-P3OVR~B~M8v6p-ZODsDHe9OtRwB2YyAi21ac-PFEWPM4Pm0oGVcAkRTV~-MK70bhtF9mSwNaCXS3BhU3~RhlihoJnuVU5aCtoxQ5DkgCSFc9~QE~lDCRRAFIaO-XApXDt97TA__&Key-Pair-Id=APKAINTVSUGEWH5XD5UA',
+  },
+  {
+    channel: 'Channel Name',
+    views: '334k',
+    channelAvatar:
+      'https://s3-alpha-sig.figma.com/img/f853/b9f7/e07227eb3c4e6312d43372578cdea8f1?Expires=1594598400&Signature=AhF3IwhCDhR3aZBnCOVcN2Vj-fTAabElsuAsVT2sAc0Txu3aQz0XiYxEqOrUHhxzGkVr0oXNlcC9WTWlPQfE~rOd~D~E0wTTd5SVMoWtPmX5Uuy4ohRfUdBx0FifTzEN~e5H0cuXOyYd01TmMWWkreVYMxJ0mRVPjqS9sYbCSvaxyQY5v8fpa69ATGkrBx4W96HcPGJeTJZEJEawJbVIHbAXgrJKlCCkD3oRjur00Nw~v~WKDyPW1nb0BSSUe7NeRaV4qIztPyAorQVBO4iFaVDeS~IeTRPG4T4trZoRJtpF9jTfBDd~0dFWbvJ2CeavaClhC5bY8fYlIcfRjddTyA__&Key-Pair-Id=APKAINTVSUGEWH5XD5UA',
+  },
+  {
+    channel: 'Channel Name',
+    views: '334k',
+    channelAvatar:
+      'https://s3-alpha-sig.figma.com/img/57d7/47bd/e40e51d45107656c92b3c9d982e76c6e?Expires=1594598400&Signature=SZwkYLVqsT9d2UPzQKA0whK2o4590Lf15eipFvdpJNf~JtrNWSXJKfgpcDp-APKSaPy8-ycv-cDyOMtog7zTB5Ygh8Rag0pEumJQgXSPBw6e~DmE1lPlLED-cmzrEOnCYVaa6m6zjln57K6jP0yusSwZTNly3moD-9iIRrR4fP9ZNBVHVpW~TSeyd7hL4r26s4NNVNkWrFw8~vrz-byARTPo5vyTqvPkaX1QL~uNjfU5x~--BAGb6meuPBMNeolFbUWj2HsV908N0xZdcMLfZ92-Ze1IVq4wc~fuIitcDZ7z6LQSVf5QuMef4X9QYR7BDvXT8iq-NeOGYyPsGpZ3Jg__&Key-Pair-Id=APKAINTVSUGEWH5XD5UA',
+  },
+  {
+    channel: 'Channel Name',
+    views: '334k',
+    channelAvatar:
+      'https://s3-alpha-sig.figma.com/img/3408/13d0/9b77ae604c2991a867734c9bc7511bdb?Expires=1594598400&Signature=WfF06NNeSSMn5O~NKhufgbJubM-9CqIyPCwwP4nGY0hxPGbQ4aoauZSdNG8XZtxuFtcdxvcapt4Y~mqgbDNIJsj7pRnWueEptTGSJEto99SNxNjgZpfz7BM-T-48D3PfsYWwKnthOssm8eLTIVbDODM4VRfTRS~G94olA9g8VxAf9YLW6aorO01nrtoNS~3~O~sGVVnC2OZeCcEba0eQWPdVM94nvk1HDRe08WtXLGoi3E3gAr5wo4E48LtskEO0ycguLlzPGeSS-1Z7XqiGnhQ1y90yAk4OLWJh1HYsgNromK-OSBLU0Dpm3CYWzjYn29OiLC9N9ypudQDjnatkUg__&Key-Pair-Id=APKAINTVSUGEWH5XD5UA',
+  },
+  {
+    channel: 'Channel Name',
+    views: '334k',
+    channelAvatar:
+      'https://s3-alpha-sig.figma.com/img/dff3/9515/5c27afa40752cfa517b4d1a67b52819d?Expires=1594598400&Signature=VuAo23WQ1xnIPVqpCohfQbjXhOrKo9JZmuBd~EpyHf83PhzrIUrkEQke8QOGiKJuGQ-yw-MVa1ec3Xv-35x9Lh1QSkRIc6oQlSxbuZ3Enxg106xflm9ykurtYTF7DXg8LCLqRcl1sMNPFtkoPLz92uHmaDBqr6DU7f6mFY1VxG85bT1nWHX4TEtC~Nc6qr07Rd1PjFCodt7QcDpkQSjjbcSijjDtAcnzeGWaO9mWJCvxapsxUC43j4i7fDA8GyMXl2bnfTQrSXGcEXvapwIblxU3goqWbjrjGoN72C2shxaqLp-Xmhc7r-p4wTvDVfgk9XHZ7ytci~hkPQA2qvZAew__&Key-Pair-Id=APKAINTVSUGEWH5XD5UA',
+  },
+  {
+    channel: 'Channel Name',
+    views: '334k',
+    channelAvatar:
+      'https://s3-alpha-sig.figma.com/img/f964/ea3d/0c500a4a50470a935ff6bee32ee0731a?Expires=1594598400&Signature=dBOZ0VVyfgxZ~VzH6jpeF4vCWROEGxr6QtOyM8X5kCtvvhvJfd2KRxO8iyVea9ZDIYo7VnDh4IngE3yW040dRFdQuVEKkqZC8aLE8pzXkgqdNlzANAVSnrHYW~Y-3xtLBA3I9dr5EPNasH37ZjFyCYvXjgjXvOpL9-Ji5aHtkDOUN-KCbh6ETJSoQOt~uytRcXoYscnKHPUykRpZVvsPtLUojOqJfCfS0u5sGyqLEEPKgSHt3Q00vHSe5fr~GAy3JbzZ6lEETbFu0iS05RxKDC44ojql0ZP1RkX5BvIxXQ6CEjF2GaRXzV81k7QUAPbs3ZR2Ess2Lmd1NHlqt2rcbg__&Key-Pair-Id=APKAINTVSUGEWH5XD5UA',
+  },
 ]
 
 channels.push(...channels)
 
 type ChannelGalleryProps = {
-	title: string
-	action: string
+  title: string
+  action: string
 }
 
 const ChannelGallery: React.FC<Partial<ChannelGalleryProps>> = ({ title, action }) => (
-	<Gallery title={title} action={action}>
-		{channels.map((chan) => (
-			<ChannelPreview
-				channel={chan.channel}
-				channelAvatar={chan.channelAvatar}
-				key={chan.channel}
-				views={chan.views}
-				outerContainerCss={css`
-					margin-right: 1.5rem;
-				`}
-			/>
-		))}
-	</Gallery>
+  <Gallery title={title} action={action}>
+    {channels.map((chan) => (
+      <ChannelPreview
+        channel={chan.channel}
+        channelAvatar={chan.channelAvatar}
+        key={chan.channel}
+        views={chan.views}
+        outerContainerCss={css`
+          margin-right: 1.5rem;
+        `}
+      />
+    ))}
+  </Gallery>
 )
 
 export default ChannelGallery

packages/app/src/components/Hero.tsx

@@ -3,50 +3,50 @@ import { css } from '@emotion/core'
 import { Button, Header } from '@/shared/components'
 
 type HeroProps = {
-	backgroundImg: string
+  backgroundImg: string
 }
 
 const Hero: React.FC<Partial<HeroProps>> = ({ backgroundImg }) => {
-	return (
-		<Header
-			title="A user governed video platform"
-			subtitle="Lorem ipsum sit amet, consectetur adipiscing elit. Proin non nisl sollicitudin, tempor diam."
-			backgroundImg={backgroundImg}
-			containerCss={css`
-				font-size: 18px;
-				line-height: 1.33;
-				& h1 {
-					font-size: 78px;
-					line-height: 0.94;
-				}
-			`}
-		>
-			<div
-				css={css`
-					display: flex;
-					margin-top: 40px;
-					& > * {
-						margin-right: 1rem;
-					}
-				`}
-			>
-				<Button
-					containerCss={css`
-						width: 116px;
-					`}
-				>
-					Play
-				</Button>
-				<Button
-					type="secondary"
-					containerCss={css`
-						width: 96px;
-					`}
-				>
-					Share
-				</Button>
-			</div>
-		</Header>
-	)
+  return (
+    <Header
+      title="A user governed video platform"
+      subtitle="Lorem ipsum sit amet, consectetur adipiscing elit. Proin non nisl sollicitudin, tempor diam."
+      backgroundImg={backgroundImg}
+      containerCss={css`
+        font-size: 18px;
+        line-height: 1.33;
+        & h1 {
+          font-size: 78px;
+          line-height: 0.94;
+        }
+      `}
+    >
+      <div
+        css={css`
+          display: flex;
+          margin-top: 40px;
+          & > * {
+            margin-right: 1rem;
+          }
+        `}
+      >
+        <Button
+          containerCss={css`
+            width: 116px;
+          `}
+        >
+          Play
+        </Button>
+        <Button
+          type="secondary"
+          containerCss={css`
+            width: 96px;
+          `}
+        >
+          Share
+        </Button>
+      </div>
+    </Header>
+  )
 }
 export default Hero

packages/app/src/components/Layout.tsx

@@ -2,10 +2,10 @@ import React from 'react'
 import { GlobalStyle } from '@/shared/components'
 
 const Layout: React.FC = ({ children }) => (
-	<main>
-		<GlobalStyle />
-		{children}
-	</main>
+  <main>
+    <GlobalStyle />
+    {children}
+  </main>
 )
 
 export default Layout

packages/app/src/components/Main.tsx

@@ -1,21 +1,21 @@
-import React from "react";
-import { css, SerializedStyles } from "@emotion/core";
+import React from 'react'
+import { css, SerializedStyles } from '@emotion/core'
 
 type MainProps = {
-	children: React.ReactNode;
-	containerCss: SerializedStyles;
-};
+  children: React.ReactNode
+  containerCss: SerializedStyles
+}
 const Main: React.FC<Partial<MainProps>> = ({ children, containerCss }) => (
-	<main
-		css={[
-			css`
-				padding: 0 2rem;
-			`,
-			containerCss,
-		]}
-	>
-		{children}
-	</main>
-);
+  <main
+    css={[
+      css`
+        padding: 0 2rem;
+      `,
+      containerCss,
+    ]}
+  >
+    {children}
+  </main>
+)
 
-export default Main;
+export default Main

packages/app/src/components/SeriesGallery.tsx

@@ -3,75 +3,75 @@ import { css } from '@emotion/core'
 import { Gallery, SeriesPreview } from '@/shared/components'
 
 type SeriesGalleryProps = {
-	title: string
-	action: string
+  title: string
+  action: string
 }
 
 const series = [
-	{
-		series: 'Series Name',
-		channel: 'Channel Name',
-		poster:
-			'https://s3-alpha-sig.figma.com/img/1885/2678/5bd8a45ed7ef3717d7da8d86f63f42a6?Expires=1593993600&Signature=Ko2u0OOvVm-pboQJF24EQJa23GbfFyh5gRu9XI755iow8yBljl94NddLWKTx2jM49V9L3PFGwDIEhgo3fcymz0ITX6K0HPNyPS6DbGdn7qsjvSMnqhjpkGGas2LTCLPnhmC65fUaBPQpPhSV77ptlFnjyx9j4cy3rabp0cNh9e6~en7yMlIlBmaYKLYByVcTXKxNdJI1M~QhactVw8KDwYnXRVOFoJBuxhA1R4FQB1BHrACrViOjXh9puWDqNOkDYRDI9JKjHZelEpPpl1eU3oudsuN9IuANSNiASWfcXPd7mFDUozF0VpOBQTWrKdUMfAfOZ83gc4NeKGo9l83JFQ__&Key-Pair-Id=APKAINTVSUGEWH5XD5UA',
-	},
-	{
-		series: 'Series Name',
-		channel: 'Channel Name',
-		poster:
-			'https://s3-alpha-sig.figma.com/img/bd1c/f08d/2e5296745a67f795f74c976182d7eb54?Expires=1593993600&Signature=DhHoAZoGtrtjfr7dtFCf6zj6YlthtbQavorx1Le7Y8Il0NZquPCjY0VFjVHZUjecukXhUiWkr~X9QM3xgxOCkjGV1GApl5Fo7Bv8DLeOz5XmCMvF4wvpfTyNQ8WUPlePmFzqyIzuYcn~4-H2Uh3QNDi7hCY3mGsChrslIR8LzuukDuQ~~Jyx~PWJf96eqxq74SUVPVVIUPXmwFIFjkpq3TSWCWWkN9MvoUiXwxsGqQHhb1W7-m52ofNZcedkHA2DAvLmF46erA9Bzb3JT2ClY86UIGdn2eokfLxCmEVx8KhTtWozfDaJEJ~lkK8cJIdTH9~3ipUZtoWIwL~JHFsV5Q__&Key-Pair-Id=APKAINTVSUGEWH5XD5UA',
-	},
-	{
-		series: 'Series Name',
-		channel: 'Channel Name',
-		poster:
-			'https://s3-alpha-sig.figma.com/img/bd1c/f08d/2e5296745a67f795f74c976182d7eb54?Expires=1592784000&Signature=McYeMoviUMseqXMvYRsgDji2wDzxgZ1~uEBWcO0fOkanY7jrk1~x7ekbZU1STsLJFAA3qM2YXF9VhOcC8QheqOB65GLOO3B9qJlHcCtLiZ3rQjbO-N7qCfWzVq0g5j4LIr-Rg4Iy6I9ma-zUK1AueehDonk9MC6DsCNcrbTy6Tr~3R5IrFWe7uRdnzowIOyjk1vvhX2yUcA~O0jhpMjKPoqL-MSljF15nnNRvk~lFRKPjxSrAqGKW0wxzbHnVURw7CLZadbloLd6B9dbHY~KwD-6KSuRtp9tPdKx9Bs~yNkeP-3ObYLRtiCr7CjD3-DTIFOD6ez4WDZuhDPu69HE2w__&Key-Pair-Id=APKAINTVSUGEWH5XD5UA',
-	},
-	{
-		series: 'Series Name',
-		channel: 'Channel Name',
-		poster:
-			'https://s3-alpha-sig.figma.com/img/bd1c/f08d/2e5296745a67f795f74c976182d7eb54?Expires=1592784000&Signature=McYeMoviUMseqXMvYRsgDji2wDzxgZ1~uEBWcO0fOkanY7jrk1~x7ekbZU1STsLJFAA3qM2YXF9VhOcC8QheqOB65GLOO3B9qJlHcCtLiZ3rQjbO-N7qCfWzVq0g5j4LIr-Rg4Iy6I9ma-zUK1AueehDonk9MC6DsCNcrbTy6Tr~3R5IrFWe7uRdnzowIOyjk1vvhX2yUcA~O0jhpMjKPoqL-MSljF15nnNRvk~lFRKPjxSrAqGKW0wxzbHnVURw7CLZadbloLd6B9dbHY~KwD-6KSuRtp9tPdKx9Bs~yNkeP-3ObYLRtiCr7CjD3-DTIFOD6ez4WDZuhDPu69HE2w__&Key-Pair-Id=APKAINTVSUGEWH5XD5UA',
-	},
-	{
-		series: 'Series Name',
-		channel: 'Channel Name',
-		poster:
-			'https://s3-alpha-sig.figma.com/img/bd1c/f08d/2e5296745a67f795f74c976182d7eb54?Expires=1592784000&Signature=McYeMoviUMseqXMvYRsgDji2wDzxgZ1~uEBWcO0fOkanY7jrk1~x7ekbZU1STsLJFAA3qM2YXF9VhOcC8QheqOB65GLOO3B9qJlHcCtLiZ3rQjbO-N7qCfWzVq0g5j4LIr-Rg4Iy6I9ma-zUK1AueehDonk9MC6DsCNcrbTy6Tr~3R5IrFWe7uRdnzowIOyjk1vvhX2yUcA~O0jhpMjKPoqL-MSljF15nnNRvk~lFRKPjxSrAqGKW0wxzbHnVURw7CLZadbloLd6B9dbHY~KwD-6KSuRtp9tPdKx9Bs~yNkeP-3ObYLRtiCr7CjD3-DTIFOD6ez4WDZuhDPu69HE2w__&Key-Pair-Id=APKAINTVSUGEWH5XD5UA',
-	},
-	{
-		series: 'Series Name',
-		channel: 'Channel Name',
-		poster:
-			'https://s3-alpha-sig.figma.com/img/bd1c/f08d/2e5296745a67f795f74c976182d7eb54?Expires=1592784000&Signature=McYeMoviUMseqXMvYRsgDji2wDzxgZ1~uEBWcO0fOkanY7jrk1~x7ekbZU1STsLJFAA3qM2YXF9VhOcC8QheqOB65GLOO3B9qJlHcCtLiZ3rQjbO-N7qCfWzVq0g5j4LIr-Rg4Iy6I9ma-zUK1AueehDonk9MC6DsCNcrbTy6Tr~3R5IrFWe7uRdnzowIOyjk1vvhX2yUcA~O0jhpMjKPoqL-MSljF15nnNRvk~lFRKPjxSrAqGKW0wxzbHnVURw7CLZadbloLd6B9dbHY~KwD-6KSuRtp9tPdKx9Bs~yNkeP-3ObYLRtiCr7CjD3-DTIFOD6ez4WDZuhDPu69HE2w__&Key-Pair-Id=APKAINTVSUGEWH5XD5UA',
-	},
-	{
-		series: 'Series Name',
-		channel: 'Channel Name',
-		poster:
-			'https://s3-alpha-sig.figma.com/img/bd1c/f08d/2e5296745a67f795f74c976182d7eb54?Expires=1592784000&Signature=McYeMoviUMseqXMvYRsgDji2wDzxgZ1~uEBWcO0fOkanY7jrk1~x7ekbZU1STsLJFAA3qM2YXF9VhOcC8QheqOB65GLOO3B9qJlHcCtLiZ3rQjbO-N7qCfWzVq0g5j4LIr-Rg4Iy6I9ma-zUK1AueehDonk9MC6DsCNcrbTy6Tr~3R5IrFWe7uRdnzowIOyjk1vvhX2yUcA~O0jhpMjKPoqL-MSljF15nnNRvk~lFRKPjxSrAqGKW0wxzbHnVURw7CLZadbloLd6B9dbHY~KwD-6KSuRtp9tPdKx9Bs~yNkeP-3ObYLRtiCr7CjD3-DTIFOD6ez4WDZuhDPu69HE2w__&Key-Pair-Id=APKAINTVSUGEWH5XD5UA',
-	},
-	{
-		series: 'Series Name',
-		channel: 'Channel Name',
-		poster:
-			'https://s3-alpha-sig.figma.com/img/bd1c/f08d/2e5296745a67f795f74c976182d7eb54?Expires=1592784000&Signature=McYeMoviUMseqXMvYRsgDji2wDzxgZ1~uEBWcO0fOkanY7jrk1~x7ekbZU1STsLJFAA3qM2YXF9VhOcC8QheqOB65GLOO3B9qJlHcCtLiZ3rQjbO-N7qCfWzVq0g5j4LIr-Rg4Iy6I9ma-zUK1AueehDonk9MC6DsCNcrbTy6Tr~3R5IrFWe7uRdnzowIOyjk1vvhX2yUcA~O0jhpMjKPoqL-MSljF15nnNRvk~lFRKPjxSrAqGKW0wxzbHnVURw7CLZadbloLd6B9dbHY~KwD-6KSuRtp9tPdKx9Bs~yNkeP-3ObYLRtiCr7CjD3-DTIFOD6ez4WDZuhDPu69HE2w__&Key-Pair-Id=APKAINTVSUGEWH5XD5UA',
-	},
+  {
+    series: 'Series Name',
+    channel: 'Channel Name',
+    poster:
+      'https://s3-alpha-sig.figma.com/img/1885/2678/5bd8a45ed7ef3717d7da8d86f63f42a6?Expires=1593993600&Signature=Ko2u0OOvVm-pboQJF24EQJa23GbfFyh5gRu9XI755iow8yBljl94NddLWKTx2jM49V9L3PFGwDIEhgo3fcymz0ITX6K0HPNyPS6DbGdn7qsjvSMnqhjpkGGas2LTCLPnhmC65fUaBPQpPhSV77ptlFnjyx9j4cy3rabp0cNh9e6~en7yMlIlBmaYKLYByVcTXKxNdJI1M~QhactVw8KDwYnXRVOFoJBuxhA1R4FQB1BHrACrViOjXh9puWDqNOkDYRDI9JKjHZelEpPpl1eU3oudsuN9IuANSNiASWfcXPd7mFDUozF0VpOBQTWrKdUMfAfOZ83gc4NeKGo9l83JFQ__&Key-Pair-Id=APKAINTVSUGEWH5XD5UA',
+  },
+  {
+    series: 'Series Name',
+    channel: 'Channel Name',
+    poster:
+      'https://s3-alpha-sig.figma.com/img/bd1c/f08d/2e5296745a67f795f74c976182d7eb54?Expires=1593993600&Signature=DhHoAZoGtrtjfr7dtFCf6zj6YlthtbQavorx1Le7Y8Il0NZquPCjY0VFjVHZUjecukXhUiWkr~X9QM3xgxOCkjGV1GApl5Fo7Bv8DLeOz5XmCMvF4wvpfTyNQ8WUPlePmFzqyIzuYcn~4-H2Uh3QNDi7hCY3mGsChrslIR8LzuukDuQ~~Jyx~PWJf96eqxq74SUVPVVIUPXmwFIFjkpq3TSWCWWkN9MvoUiXwxsGqQHhb1W7-m52ofNZcedkHA2DAvLmF46erA9Bzb3JT2ClY86UIGdn2eokfLxCmEVx8KhTtWozfDaJEJ~lkK8cJIdTH9~3ipUZtoWIwL~JHFsV5Q__&Key-Pair-Id=APKAINTVSUGEWH5XD5UA',
+  },
+  {
+    series: 'Series Name',
+    channel: 'Channel Name',
+    poster:
+      'https://s3-alpha-sig.figma.com/img/bd1c/f08d/2e5296745a67f795f74c976182d7eb54?Expires=1592784000&Signature=McYeMoviUMseqXMvYRsgDji2wDzxgZ1~uEBWcO0fOkanY7jrk1~x7ekbZU1STsLJFAA3qM2YXF9VhOcC8QheqOB65GLOO3B9qJlHcCtLiZ3rQjbO-N7qCfWzVq0g5j4LIr-Rg4Iy6I9ma-zUK1AueehDonk9MC6DsCNcrbTy6Tr~3R5IrFWe7uRdnzowIOyjk1vvhX2yUcA~O0jhpMjKPoqL-MSljF15nnNRvk~lFRKPjxSrAqGKW0wxzbHnVURw7CLZadbloLd6B9dbHY~KwD-6KSuRtp9tPdKx9Bs~yNkeP-3ObYLRtiCr7CjD3-DTIFOD6ez4WDZuhDPu69HE2w__&Key-Pair-Id=APKAINTVSUGEWH5XD5UA',
+  },
+  {
+    series: 'Series Name',
+    channel: 'Channel Name',
+    poster:
+      'https://s3-alpha-sig.figma.com/img/bd1c/f08d/2e5296745a67f795f74c976182d7eb54?Expires=1592784000&Signature=McYeMoviUMseqXMvYRsgDji2wDzxgZ1~uEBWcO0fOkanY7jrk1~x7ekbZU1STsLJFAA3qM2YXF9VhOcC8QheqOB65GLOO3B9qJlHcCtLiZ3rQjbO-N7qCfWzVq0g5j4LIr-Rg4Iy6I9ma-zUK1AueehDonk9MC6DsCNcrbTy6Tr~3R5IrFWe7uRdnzowIOyjk1vvhX2yUcA~O0jhpMjKPoqL-MSljF15nnNRvk~lFRKPjxSrAqGKW0wxzbHnVURw7CLZadbloLd6B9dbHY~KwD-6KSuRtp9tPdKx9Bs~yNkeP-3ObYLRtiCr7CjD3-DTIFOD6ez4WDZuhDPu69HE2w__&Key-Pair-Id=APKAINTVSUGEWH5XD5UA',
+  },
+  {
+    series: 'Series Name',
+    channel: 'Channel Name',
+    poster:
+      'https://s3-alpha-sig.figma.com/img/bd1c/f08d/2e5296745a67f795f74c976182d7eb54?Expires=1592784000&Signature=McYeMoviUMseqXMvYRsgDji2wDzxgZ1~uEBWcO0fOkanY7jrk1~x7ekbZU1STsLJFAA3qM2YXF9VhOcC8QheqOB65GLOO3B9qJlHcCtLiZ3rQjbO-N7qCfWzVq0g5j4LIr-Rg4Iy6I9ma-zUK1AueehDonk9MC6DsCNcrbTy6Tr~3R5IrFWe7uRdnzowIOyjk1vvhX2yUcA~O0jhpMjKPoqL-MSljF15nnNRvk~lFRKPjxSrAqGKW0wxzbHnVURw7CLZadbloLd6B9dbHY~KwD-6KSuRtp9tPdKx9Bs~yNkeP-3ObYLRtiCr7CjD3-DTIFOD6ez4WDZuhDPu69HE2w__&Key-Pair-Id=APKAINTVSUGEWH5XD5UA',
+  },
+  {
+    series: 'Series Name',
+    channel: 'Channel Name',
+    poster:
+      'https://s3-alpha-sig.figma.com/img/bd1c/f08d/2e5296745a67f795f74c976182d7eb54?Expires=1592784000&Signature=McYeMoviUMseqXMvYRsgDji2wDzxgZ1~uEBWcO0fOkanY7jrk1~x7ekbZU1STsLJFAA3qM2YXF9VhOcC8QheqOB65GLOO3B9qJlHcCtLiZ3rQjbO-N7qCfWzVq0g5j4LIr-Rg4Iy6I9ma-zUK1AueehDonk9MC6DsCNcrbTy6Tr~3R5IrFWe7uRdnzowIOyjk1vvhX2yUcA~O0jhpMjKPoqL-MSljF15nnNRvk~lFRKPjxSrAqGKW0wxzbHnVURw7CLZadbloLd6B9dbHY~KwD-6KSuRtp9tPdKx9Bs~yNkeP-3ObYLRtiCr7CjD3-DTIFOD6ez4WDZuhDPu69HE2w__&Key-Pair-Id=APKAINTVSUGEWH5XD5UA',
+  },
+  {
+    series: 'Series Name',
+    channel: 'Channel Name',
+    poster:
+      'https://s3-alpha-sig.figma.com/img/bd1c/f08d/2e5296745a67f795f74c976182d7eb54?Expires=1592784000&Signature=McYeMoviUMseqXMvYRsgDji2wDzxgZ1~uEBWcO0fOkanY7jrk1~x7ekbZU1STsLJFAA3qM2YXF9VhOcC8QheqOB65GLOO3B9qJlHcCtLiZ3rQjbO-N7qCfWzVq0g5j4LIr-Rg4Iy6I9ma-zUK1AueehDonk9MC6DsCNcrbTy6Tr~3R5IrFWe7uRdnzowIOyjk1vvhX2yUcA~O0jhpMjKPoqL-MSljF15nnNRvk~lFRKPjxSrAqGKW0wxzbHnVURw7CLZadbloLd6B9dbHY~KwD-6KSuRtp9tPdKx9Bs~yNkeP-3ObYLRtiCr7CjD3-DTIFOD6ez4WDZuhDPu69HE2w__&Key-Pair-Id=APKAINTVSUGEWH5XD5UA',
+  },
+  {
+    series: 'Series Name',
+    channel: 'Channel Name',
+    poster:
+      'https://s3-alpha-sig.figma.com/img/bd1c/f08d/2e5296745a67f795f74c976182d7eb54?Expires=1592784000&Signature=McYeMoviUMseqXMvYRsgDji2wDzxgZ1~uEBWcO0fOkanY7jrk1~x7ekbZU1STsLJFAA3qM2YXF9VhOcC8QheqOB65GLOO3B9qJlHcCtLiZ3rQjbO-N7qCfWzVq0g5j4LIr-Rg4Iy6I9ma-zUK1AueehDonk9MC6DsCNcrbTy6Tr~3R5IrFWe7uRdnzowIOyjk1vvhX2yUcA~O0jhpMjKPoqL-MSljF15nnNRvk~lFRKPjxSrAqGKW0wxzbHnVURw7CLZadbloLd6B9dbHY~KwD-6KSuRtp9tPdKx9Bs~yNkeP-3ObYLRtiCr7CjD3-DTIFOD6ez4WDZuhDPu69HE2w__&Key-Pair-Id=APKAINTVSUGEWH5XD5UA',
+  },
 ]
 
 const SeriesGallery: React.FC<Partial<SeriesGalleryProps>> = ({ title, action }) => (
-	<Gallery title={title} action={action}>
-		{series.map((series) => (
-			<SeriesPreview
-				key={series.series}
-				channel={series.channel}
-				poster={series.poster}
-				series={series.series}
-				outerCss={css`
-					margin: auto 1.5rem auto 0;
-				`}
-			/>
-		))}
-	</Gallery>
+  <Gallery title={title} action={action}>
+    {series.map((series) => (
+      <SeriesPreview
+        key={series.series}
+        channel={series.channel}
+        poster={series.poster}
+        series={series.series}
+        outerCss={css`
+          margin: auto 1.5rem auto 0;
+        `}
+      />
+    ))}
+  </Gallery>
 )
 
 export default SeriesGallery

packages/app/src/components/TagsGallery.tsx

@@ -2,35 +2,35 @@ import React from 'react'
 import { Gallery, TagButton } from '@/shared/components'
 
 const tags = [
-	'finance',
-	'Sport',
-	'Health & Fitness',
-	'lifestyle',
-	'finance',
-	'Sport',
-	'Health & Fitness',
-	'lifestyle',
-	'finance',
-	'Sport',
-	'Health & Fitness',
-	'lifestyle',
-	'finance',
-	'Sport',
-	'Health & Fitness',
-	'lifestyle',
+  'finance',
+  'Sport',
+  'Health & Fitness',
+  'lifestyle',
+  'finance',
+  'Sport',
+  'Health & Fitness',
+  'lifestyle',
+  'finance',
+  'Sport',
+  'Health & Fitness',
+  'lifestyle',
+  'finance',
+  'Sport',
+  'Health & Fitness',
+  'lifestyle',
 ]
 
 type TagsProps = {
-	title: string
-	action: string
+  title: string
+  action: string
 }
 
 const TagsGallery: React.FC<Partial<TagsProps>> = ({ title, action }) => (
-	<Gallery title={title} action={action}>
-		{tags.map((tag) => (
-			<TagButton key={tag}>{tag}</TagButton>
-		))}
-	</Gallery>
+  <Gallery title={title} action={action}>
+    {tags.map((tag) => (
+      <TagButton key={tag}>{tag}</TagButton>
+    ))}
+  </Gallery>
 )
 
 export default TagsGallery

packages/app/src/components/VideoGallery.tsx

@@ -4,129 +4,129 @@ import { css, SerializedStyles } from '@emotion/core'
 import { Gallery, VideoPreview } from '@/shared/components'
 
 type VideoGalleryProps = {
-	title: string
-	action: string
+  title: string
+  action: string
 }
 
 const videoPlaceholders = [
-	{
-		title: 'Sample Video Title',
-		channel: 'Channel Name',
-		showChannel: true,
-		views: '345k',
-		createdAt: '2 weeks ago',
-		poster:
-			'https://s3-alpha-sig.figma.com/img/57d7/47bd/e40e51d45107656c92b3c9d982e76c6e?Expires=1593993600&Signature=Q34ageNdR3Y48K5lG8HW1KOgMGCi94qmWOK5yO~cK6XzgyO2nCJB6Pjoaa~gQX7zMVSHIkxlVt-9CHz~H9iXmA7r0LfTm90sNlTZ8ZspvU9TWgCGdPMj1A-SzTIAmeiDrZ0DrSzILQdJOMwaP-DeYKpFN6zvG6h56XHznX5lEiawRqeObL0g4SAHNG5tiO0Rdjwtckeuz~diwLVBOUqPaeDGOABlpUJQFoy~Dx7FxK65MyPXUZ7CtUVqjKkyl-jfnl0DwIpOiI9K2HJjtV7FlPbc28C4JeniafBr0nUkoWAjzcyyOr37v0xNw2EBy91mBc33kDUlwbqom9f-leRPZQ__&Key-Pair-Id=APKAINTVSUGEWH5XD5UA',
-	},
-	{
-		title: 'Sample Video Title',
-		channel: 'Channel Name',
-		showChannel: true,
-		views: '345k',
-		createdAt: '2 weeks ago',
-		poster:
-			'https://s3-alpha-sig.figma.com/img/bd94/067c/4750be7f93ae65cf6828daa25ae301f0?Expires=1593388800&Signature=ItXPW-xlNDLNziv7Maamv-n6HRo4UNRnfaQGBGUhHQUKZYplg2RtRlf198c-U5rDBU0Oe9UBbC8JUAMZRs1jnKs1I~UTBS0Dpq-qn1wR-q0ZJZRNmUHmiOjQ9j9GekidMJHEq-rh7qZB38ttdI72Db46WOeuA6NxvRYqe8j1CUXKpgNL-nfLcvofSYQWpTZ6n1aA4IpzlzT2ginbOhesp2yJHkgBbkIQm9It~SnTl7EoVzzDErD5KjmltO4nUBWTKYmgEdf0zEaNPQn8fF2vtKUQtz9TkdwyeVjHqhSd9aptH2vdKSZhbm8KO15BIs1ZczuQ05YQJ2RJfU8fbu5NUg__&Key-Pair-Id=APKAINTVSUGEWH5XD5UA',
-	},
-	{
-		title: 'Sample Video Title',
-		channel: 'Channel Name',
-		showChannel: true,
-		createdAt: '2 weeks ago',
-		views: '345k',
-		poster:
-			'https://s3-alpha-sig.figma.com/img/8e21/18b4/c0d8f1114b47062b35c47fb568fb48a5?Expires=1593388800&Signature=ZaBi7Wf9-bGZbtyqlbCl-TNCZDiWaaoiO3tMyYJVliHhuCvafyheMpBUPn8XSZQsntvmSW2A1rfLfPw-e-t1tCUw6uBIOWexRRhoNDfHWvXLUy4bcij2-D54Mo7LyL1ASLLzoTTDVCLoESNFEb3X8ntBWNOOVIy-1qLYuBdeP1vdJmcov5I4U46ge0sSPvetv0SS~3wW4CYO7zZ8Wi1CrA8mxQiMsnXCl97Vat5ngT46QZzZwVOtcmXH8KxQcn-e0MWBZFMAB5vzs2SdAX~l~3z7McrULM9-wPavJiw7dH4fUbVH7qQ-oS9dZ0t2sod3dRPGTj73Su3WVL2RlnQUqg__&Key-Pair-Id=APKAINTVSUGEWH5XD5UA',
-	},
-	{
-		title: 'Sample Video Title',
-		channel: 'Channel Name',
-		showChannel: true,
-		views: '345k',
-		createdAt: '2 weeks ago',
-		poster:
-			'https://s3-alpha-sig.figma.com/img/f712/25ac/62a18f581f6a5aae66ac4e9b7b21fafc?Expires=1593388800&Signature=YO2e7eBwPVF05C4tlUeWVmq5o3KOpo9yyoM1khSbywLj1Kv1BIIFdjD6IBLO9Oifm8A-Ws2IlypjWuykVe9nydcoCp28VzQ~ifYtfr97plLxVcOYiYMu7HDIEpPK4UKZi3AFSvqdIAUrr-YBu2noRt8Kg-BbzMG2DV3zKTAga2zMJ-cYu5-xiW6gctEr8nl6QF7luvBYZkHTYRaMTXpsRdN-b2VoW7BX1mxm1FDWyhZ9aaEqZ8dIE3ct8t6J2ybxryrMVxLpjP-T0124N27Z9Xp4WzSTOSjfBjn~Q7mtqHk141~pq1-dQe1dO2V7JQN3AvTt4eEeCvpXQqbA0VMPnw__&Key-Pair-Id=APKAINTVSUGEWH5XD5UA',
-	},
-	{
-		title: 'Sample Video Title',
-		channel: 'Channel Name',
-		showChannel: true,
-		views: '345k',
-		createdAt: '2 weeks ago',
-		poster:
-			'https://s3-alpha-sig.figma.com/img/4baa/8670/e77491e871584e97b955d728627020f3?Expires=1593388800&Signature=LkSz8F8wftV81dxfumpYE5CToghiq5a3hvwywrhwVAXFwQvNzfymCImBCY9wIxILX4nnOlaNX0g~~iZ2RXD104VvLn6q967Hlg0uAH1h3eutIZzb4sQ0i4R-wXUw5ZNy2QjLCOIlKuCXMXSO1UiI8t8CJtdel9XaSqm1u~JsPFhRjRlO60RCi2cM2pJ~8G~kofCMT6J3NMgyRruVLUDY9FPGh5dI5XRFmeKbMThO2IT5KfUGsPDLb98i8gBrkLe2EKMx2DxHlDxcA3j2LVtf4yaGG-EmeDrQflknjdoAY0BKfC8Mob10ldGsYnJsMHOraz971POWOVpWTuoF0h6nNg__&Key-Pair-Id=APKAINTVSUGEWH5XD5UA',
-	},
-	{
-		title: 'Sample Video Title',
-		channel: 'Channel Name',
-		showChannel: true,
-		views: '345k',
-		createdAt: '2 weeks ago',
-		poster:
-			'https://s3-alpha-sig.figma.com/img/4baa/8670/e77491e871584e97b955d728627020f3?Expires=1593388800&Signature=LkSz8F8wftV81dxfumpYE5CToghiq5a3hvwywrhwVAXFwQvNzfymCImBCY9wIxILX4nnOlaNX0g~~iZ2RXD104VvLn6q967Hlg0uAH1h3eutIZzb4sQ0i4R-wXUw5ZNy2QjLCOIlKuCXMXSO1UiI8t8CJtdel9XaSqm1u~JsPFhRjRlO60RCi2cM2pJ~8G~kofCMT6J3NMgyRruVLUDY9FPGh5dI5XRFmeKbMThO2IT5KfUGsPDLb98i8gBrkLe2EKMx2DxHlDxcA3j2LVtf4yaGG-EmeDrQflknjdoAY0BKfC8Mob10ldGsYnJsMHOraz971POWOVpWTuoF0h6nNg__&Key-Pair-Id=APKAINTVSUGEWH5XD5UA',
-	},
-	{
-		title: 'Sample Video Title',
-		channel: 'Channel Name',
-		showChannel: true,
-		views: '345k',
-		createdAt: '2 weeks ago',
-		poster:
-			'https://s3-alpha-sig.figma.com/img/e0d6/4163/147cd1502ba0a99ea7258f31be9812b3?Expires=1593388800&Signature=av5e4oaaYXVDxA9U0DAQKuwA-vyC4VRaGYz2lO5IIaz-CP55B717sXn-V6H6JzMNZ7JavA9q8~uMK-r9jd-yxoia1UopEiUeSkZgQlbBhd4DEVBPoMhMF3nC--mZ4bQnVvK9xN933TCm9z46jkAOZ7U8UYp5TlA829Rnmgw3QkaNlPLW5UkgU04k6pAae5Y3t9pAnwErmDCDjHuaXKrCjCuG0zwk84f0JQAcZt4VojD8kVDFCf0IOHdZtIQMUk47CQfdWJ2KDBkm1oOcVAweTSHXdwzpiFQ~o1i-hZVYtgzIiGTE6IqW3qsksqiLtWwMsui2dvWXVu2actRRwR~OTg__&Key-Pair-Id=APKAINTVSUGEWH5XD5UA',
-	},
-	{
-		title: 'Sample Video Title',
-		channel: 'Channel Name',
-		showChannel: true,
-		views: '345k',
-		createdAt: '2 weeks ago',
-		poster:
-			'https://s3-alpha-sig.figma.com/img/63ab/b514/2a10cf17ceaf00972e7c12c18cacd832?Expires=1593388800&Signature=WRk44Vxkc1mYbXSdGroHP8Hvd4dfhtWMukS~2yfNlY6KSb94ZzeFaKID8dMj4wznZo-sSp~lAagV7NJMFO9QLCEw0E7YeX3TnOWeFDrx63wkc388h-srSxxrNVUpB6WUCfkPtdusDrfKOx2HvM6zZLlSgYs4-McX2VTJ-g7bKx2Pzt64mox6wTGlbXWREkV2sbLSBSF6P0fpwge3VPt5jX1E~vDJ8X4mtZgN1DRIQMtc2dfZhZhyL1jNeIZe5WJyOcY9b2E3KL54pWt13UGsI08nTzloqOPFAt~fHwbwUbwWeelbjkzSABh55KYVNePerISUIy~esGJ11px7l9oWTw__&Key-Pair-Id=APKAINTVSUGEWH5XD5UA',
-	},
-	{
-		title: 'Sample Video Title',
-		channel: 'Channel Name',
-		showChannel: true,
-		views: '345k',
-		createdAt: '2 weeks ago',
-		poster:
-			'https://s3-alpha-sig.figma.com/img/b327/39be/143853e8ca345927ee54a7ca9acaed0c?Expires=1593388800&Signature=G1vikiLUBwdBdrzS3RC1WScSJSAAD7FEteNX4bfPf0VQL0w9fsMfha31S-l6EHxU~WTh3GAic8X5furwHjwLbE2nVUIiA0q6Rizxfd8kT97Z-9uQzPbCkla6a1qIX-7wq19t2evAVST--Sz7wfEYVCUTdZaEmqgBsJnYI3fl7nzrwLhaaTTN3liOTltgvlQn8btRClliTWENyHBwu6cwvMHuX6ePt5swhIj4gz34F0MyY~PtnsFbBHFerShd3t2DYsMqDv8CEB089v6IYZh87Rnqk7jJFZC2ZBULhjlwKQpboJOI35cov3aGOnuTe5vcmULLSfEXuV5kWJrtzJnQlA__&Key-Pair-Id=APKAINTVSUGEWH5XD5UA',
-	},
+  {
+    title: 'Sample Video Title',
+    channel: 'Channel Name',
+    showChannel: true,
+    views: '345k',
+    createdAt: '2 weeks ago',
+    poster:
+      'https://s3-alpha-sig.figma.com/img/57d7/47bd/e40e51d45107656c92b3c9d982e76c6e?Expires=1593993600&Signature=Q34ageNdR3Y48K5lG8HW1KOgMGCi94qmWOK5yO~cK6XzgyO2nCJB6Pjoaa~gQX7zMVSHIkxlVt-9CHz~H9iXmA7r0LfTm90sNlTZ8ZspvU9TWgCGdPMj1A-SzTIAmeiDrZ0DrSzILQdJOMwaP-DeYKpFN6zvG6h56XHznX5lEiawRqeObL0g4SAHNG5tiO0Rdjwtckeuz~diwLVBOUqPaeDGOABlpUJQFoy~Dx7FxK65MyPXUZ7CtUVqjKkyl-jfnl0DwIpOiI9K2HJjtV7FlPbc28C4JeniafBr0nUkoWAjzcyyOr37v0xNw2EBy91mBc33kDUlwbqom9f-leRPZQ__&Key-Pair-Id=APKAINTVSUGEWH5XD5UA',
+  },
+  {
+    title: 'Sample Video Title',
+    channel: 'Channel Name',
+    showChannel: true,
+    views: '345k',
+    createdAt: '2 weeks ago',
+    poster:
+      'https://s3-alpha-sig.figma.com/img/bd94/067c/4750be7f93ae65cf6828daa25ae301f0?Expires=1593388800&Signature=ItXPW-xlNDLNziv7Maamv-n6HRo4UNRnfaQGBGUhHQUKZYplg2RtRlf198c-U5rDBU0Oe9UBbC8JUAMZRs1jnKs1I~UTBS0Dpq-qn1wR-q0ZJZRNmUHmiOjQ9j9GekidMJHEq-rh7qZB38ttdI72Db46WOeuA6NxvRYqe8j1CUXKpgNL-nfLcvofSYQWpTZ6n1aA4IpzlzT2ginbOhesp2yJHkgBbkIQm9It~SnTl7EoVzzDErD5KjmltO4nUBWTKYmgEdf0zEaNPQn8fF2vtKUQtz9TkdwyeVjHqhSd9aptH2vdKSZhbm8KO15BIs1ZczuQ05YQJ2RJfU8fbu5NUg__&Key-Pair-Id=APKAINTVSUGEWH5XD5UA',
+  },
+  {
+    title: 'Sample Video Title',
+    channel: 'Channel Name',
+    showChannel: true,
+    createdAt: '2 weeks ago',
+    views: '345k',
+    poster:
+      'https://s3-alpha-sig.figma.com/img/8e21/18b4/c0d8f1114b47062b35c47fb568fb48a5?Expires=1593388800&Signature=ZaBi7Wf9-bGZbtyqlbCl-TNCZDiWaaoiO3tMyYJVliHhuCvafyheMpBUPn8XSZQsntvmSW2A1rfLfPw-e-t1tCUw6uBIOWexRRhoNDfHWvXLUy4bcij2-D54Mo7LyL1ASLLzoTTDVCLoESNFEb3X8ntBWNOOVIy-1qLYuBdeP1vdJmcov5I4U46ge0sSPvetv0SS~3wW4CYO7zZ8Wi1CrA8mxQiMsnXCl97Vat5ngT46QZzZwVOtcmXH8KxQcn-e0MWBZFMAB5vzs2SdAX~l~3z7McrULM9-wPavJiw7dH4fUbVH7qQ-oS9dZ0t2sod3dRPGTj73Su3WVL2RlnQUqg__&Key-Pair-Id=APKAINTVSUGEWH5XD5UA',
+  },
+  {
+    title: 'Sample Video Title',
+    channel: 'Channel Name',
+    showChannel: true,
+    views: '345k',
+    createdAt: '2 weeks ago',
+    poster:
+      'https://s3-alpha-sig.figma.com/img/f712/25ac/62a18f581f6a5aae66ac4e9b7b21fafc?Expires=1593388800&Signature=YO2e7eBwPVF05C4tlUeWVmq5o3KOpo9yyoM1khSbywLj1Kv1BIIFdjD6IBLO9Oifm8A-Ws2IlypjWuykVe9nydcoCp28VzQ~ifYtfr97plLxVcOYiYMu7HDIEpPK4UKZi3AFSvqdIAUrr-YBu2noRt8Kg-BbzMG2DV3zKTAga2zMJ-cYu5-xiW6gctEr8nl6QF7luvBYZkHTYRaMTXpsRdN-b2VoW7BX1mxm1FDWyhZ9aaEqZ8dIE3ct8t6J2ybxryrMVxLpjP-T0124N27Z9Xp4WzSTOSjfBjn~Q7mtqHk141~pq1-dQe1dO2V7JQN3AvTt4eEeCvpXQqbA0VMPnw__&Key-Pair-Id=APKAINTVSUGEWH5XD5UA',
+  },
+  {
+    title: 'Sample Video Title',
+    channel: 'Channel Name',
+    showChannel: true,
+    views: '345k',
+    createdAt: '2 weeks ago',
+    poster:
+      'https://s3-alpha-sig.figma.com/img/4baa/8670/e77491e871584e97b955d728627020f3?Expires=1593388800&Signature=LkSz8F8wftV81dxfumpYE5CToghiq5a3hvwywrhwVAXFwQvNzfymCImBCY9wIxILX4nnOlaNX0g~~iZ2RXD104VvLn6q967Hlg0uAH1h3eutIZzb4sQ0i4R-wXUw5ZNy2QjLCOIlKuCXMXSO1UiI8t8CJtdel9XaSqm1u~JsPFhRjRlO60RCi2cM2pJ~8G~kofCMT6J3NMgyRruVLUDY9FPGh5dI5XRFmeKbMThO2IT5KfUGsPDLb98i8gBrkLe2EKMx2DxHlDxcA3j2LVtf4yaGG-EmeDrQflknjdoAY0BKfC8Mob10ldGsYnJsMHOraz971POWOVpWTuoF0h6nNg__&Key-Pair-Id=APKAINTVSUGEWH5XD5UA',
+  },
+  {
+    title: 'Sample Video Title',
+    channel: 'Channel Name',
+    showChannel: true,
+    views: '345k',
+    createdAt: '2 weeks ago',
+    poster:
+      'https://s3-alpha-sig.figma.com/img/4baa/8670/e77491e871584e97b955d728627020f3?Expires=1593388800&Signature=LkSz8F8wftV81dxfumpYE5CToghiq5a3hvwywrhwVAXFwQvNzfymCImBCY9wIxILX4nnOlaNX0g~~iZ2RXD104VvLn6q967Hlg0uAH1h3eutIZzb4sQ0i4R-wXUw5ZNy2QjLCOIlKuCXMXSO1UiI8t8CJtdel9XaSqm1u~JsPFhRjRlO60RCi2cM2pJ~8G~kofCMT6J3NMgyRruVLUDY9FPGh5dI5XRFmeKbMThO2IT5KfUGsPDLb98i8gBrkLe2EKMx2DxHlDxcA3j2LVtf4yaGG-EmeDrQflknjdoAY0BKfC8Mob10ldGsYnJsMHOraz971POWOVpWTuoF0h6nNg__&Key-Pair-Id=APKAINTVSUGEWH5XD5UA',
+  },
+  {
+    title: 'Sample Video Title',
+    channel: 'Channel Name',
+    showChannel: true,
+    views: '345k',
+    createdAt: '2 weeks ago',
+    poster:
+      'https://s3-alpha-sig.figma.com/img/e0d6/4163/147cd1502ba0a99ea7258f31be9812b3?Expires=1593388800&Signature=av5e4oaaYXVDxA9U0DAQKuwA-vyC4VRaGYz2lO5IIaz-CP55B717sXn-V6H6JzMNZ7JavA9q8~uMK-r9jd-yxoia1UopEiUeSkZgQlbBhd4DEVBPoMhMF3nC--mZ4bQnVvK9xN933TCm9z46jkAOZ7U8UYp5TlA829Rnmgw3QkaNlPLW5UkgU04k6pAae5Y3t9pAnwErmDCDjHuaXKrCjCuG0zwk84f0JQAcZt4VojD8kVDFCf0IOHdZtIQMUk47CQfdWJ2KDBkm1oOcVAweTSHXdwzpiFQ~o1i-hZVYtgzIiGTE6IqW3qsksqiLtWwMsui2dvWXVu2actRRwR~OTg__&Key-Pair-Id=APKAINTVSUGEWH5XD5UA',
+  },
+  {
+    title: 'Sample Video Title',
+    channel: 'Channel Name',
+    showChannel: true,
+    views: '345k',
+    createdAt: '2 weeks ago',
+    poster:
+      'https://s3-alpha-sig.figma.com/img/63ab/b514/2a10cf17ceaf00972e7c12c18cacd832?Expires=1593388800&Signature=WRk44Vxkc1mYbXSdGroHP8Hvd4dfhtWMukS~2yfNlY6KSb94ZzeFaKID8dMj4wznZo-sSp~lAagV7NJMFO9QLCEw0E7YeX3TnOWeFDrx63wkc388h-srSxxrNVUpB6WUCfkPtdusDrfKOx2HvM6zZLlSgYs4-McX2VTJ-g7bKx2Pzt64mox6wTGlbXWREkV2sbLSBSF6P0fpwge3VPt5jX1E~vDJ8X4mtZgN1DRIQMtc2dfZhZhyL1jNeIZe5WJyOcY9b2E3KL54pWt13UGsI08nTzloqOPFAt~fHwbwUbwWeelbjkzSABh55KYVNePerISUIy~esGJ11px7l9oWTw__&Key-Pair-Id=APKAINTVSUGEWH5XD5UA',
+  },
+  {
+    title: 'Sample Video Title',
+    channel: 'Channel Name',
+    showChannel: true,
+    views: '345k',
+    createdAt: '2 weeks ago',
+    poster:
+      'https://s3-alpha-sig.figma.com/img/b327/39be/143853e8ca345927ee54a7ca9acaed0c?Expires=1593388800&Signature=G1vikiLUBwdBdrzS3RC1WScSJSAAD7FEteNX4bfPf0VQL0w9fsMfha31S-l6EHxU~WTh3GAic8X5furwHjwLbE2nVUIiA0q6Rizxfd8kT97Z-9uQzPbCkla6a1qIX-7wq19t2evAVST--Sz7wfEYVCUTdZaEmqgBsJnYI3fl7nzrwLhaaTTN3liOTltgvlQn8btRClliTWENyHBwu6cwvMHuX6ePt5swhIj4gz34F0MyY~PtnsFbBHFerShd3t2DYsMqDv8CEB089v6IYZh87Rnqk7jJFZC2ZBULhjlwKQpboJOI35cov3aGOnuTe5vcmULLSfEXuV5kWJrtzJnQlA__&Key-Pair-Id=APKAINTVSUGEWH5XD5UA',
+  },
 ]
 
 const articleStyles = css`
-	max-width: 320px;
-	margin-right: 1.25rem;
+  max-width: 320px;
+  margin-right: 1.25rem;
 `
 
 const VideoGallery: React.FC<Partial<VideoGalleryProps>> = ({ title, action }) => {
-	const videos = videoPlaceholders.concat(videoPlaceholders).concat(videoPlaceholders)
-	const [controlsTop, setControlsTop] = useState<SerializedStyles>(css``)
+  const videos = videoPlaceholders.concat(videoPlaceholders).concat(videoPlaceholders)
+  const [controlsTop, setControlsTop] = useState<SerializedStyles>(css``)
 
-	const CAROUSEL_WHEEL_HEIGHT = 48
-	const imgRef = useCallback((node: HTMLImageElement) => {
-		if (node != null) {
-			setControlsTop(css`
-				top: calc(${Math.round(node.clientHeight) / 2}px - ${CAROUSEL_WHEEL_HEIGHT / 2}px);
-			`)
-		}
-	}, [])
-	return (
-		<Gallery title={title} action={action} leftControlCss={controlsTop} rightControlCss={controlsTop}>
-			{videos.map((video, idx) => (
-				<article css={articleStyles} key={`${title}- ${video.title} - ${idx}`}>
-					<VideoPreview
-						title={video.title}
-						channel={video.channel}
-						showChannel={video.showChannel}
-						views={video.views}
-						createdAt={video.createdAt}
-						imgRef={idx === 0 ? imgRef : null}
-						poster={video.poster}
-						showMeta={true}
-					/>
-				</article>
-			))}
-		</Gallery>
-	)
+  const CAROUSEL_WHEEL_HEIGHT = 48
+  const imgRef = useCallback((node: HTMLImageElement) => {
+    if (node != null) {
+      setControlsTop(css`
+        top: calc(${Math.round(node.clientHeight) / 2}px - ${CAROUSEL_WHEEL_HEIGHT / 2}px);
+      `)
+    }
+  }, [])
+  return (
+    <Gallery title={title} action={action} leftControlCss={controlsTop} rightControlCss={controlsTop}>
+      {videos.map((video, idx) => (
+        <article css={articleStyles} key={`${title}- ${video.title} - ${idx}`}>
+          <VideoPreview
+            title={video.title}
+            channel={video.channel}
+            showChannel={video.showChannel}
+            views={video.views}
+            createdAt={video.createdAt}
+            imgRef={idx === 0 ? imgRef : null}
+            poster={video.poster}
+            showMeta={true}
+          />
+        </article>
+      ))}
+    </Gallery>
+  )
 }
 
 export default VideoGallery

packages/app/src/components/index.ts

@@ -1,7 +1,7 @@
-export { default as Layout } from "./Layout"
-export { default as VideoGallery } from "./VideoGallery"
-export { default as Hero } from "./Hero"
-export { default as TagsGallery } from "./TagsGallery"
-export { default as Main } from "./Main"
-export { default as SeriesGallery } from "./SeriesGallery"
-export { default as ChannelGallery } from "./ChannelGallery"
+export { default as Layout } from './Layout'
+export { default as VideoGallery } from './VideoGallery'
+export { default as Hero } from './Hero'
+export { default as TagsGallery } from './TagsGallery'
+export { default as Main } from './Main'
+export { default as SeriesGallery } from './SeriesGallery'
+export { default as ChannelGallery } from './ChannelGallery'

packages/app/src/setupTests.ts

@@ -1,4 +1,4 @@
-import { configure } from "enzyme";
-import Adapter from "enzyme-adapter-react-16";
+import { configure } from 'enzyme'
+import Adapter from 'enzyme-adapter-react-16'
 
-configure({ adapter: new Adapter() });
+configure({ adapter: new Adapter() })

packages/app/src/shared/.storybook/main.js

@@ -1,17 +1,17 @@
-const reactConfig = require("../../../config-overrides");
+const reactConfig = require('../../../config-overrides')
 
 module.exports = {
-	stories: ["../stories/**/*.stories.(js|jsx|ts|tsx|mdx)"],
-	addons: [
-		"@storybook/addon-actions",
-		"@storybook/addon-links",
-		"@storybook/addon-knobs",
-		"@storybook/addon-storysource",
-		"storybook-addon-jsx/register",
-		"@storybook/addon-docs",
-		"@storybook/preset-create-react-app"
-	],
-	webpackFinal: async (config) => {
-		return reactConfig.webpack(config);
-	},
-};
+  stories: ['../stories/**/*.stories.(js|jsx|ts|tsx|mdx)'],
+  addons: [
+    '@storybook/addon-actions',
+    '@storybook/addon-links',
+    '@storybook/addon-knobs',
+    '@storybook/addon-storysource',
+    'storybook-addon-jsx/register',
+    '@storybook/addon-docs',
+    '@storybook/preset-create-react-app',
+  ],
+  webpackFinal: async (config) => {
+    return reactConfig.webpack(config)
+  },
+}

packages/app/src/shared/.storybook/manager-head.html

@@ -1,29 +1,29 @@
 <link
-	rel="icon"
-	type="image/png"
-	href="https://raw.githubusercontent.com/Joystream/design/master/logo/favicon/Favicon-v2.png"
-	sizes="16x16"
+  rel="icon"
+  type="image/png"
+  href="https://raw.githubusercontent.com/Joystream/design/master/logo/favicon/Favicon-v2.png"
+  sizes="16x16"
 />
 <link
-	rel="icon"
-	type="image/png"
-	href="https://raw.githubusercontent.com/Joystream/design/master/logo/favicon/Favicon-v2.png"
-	sizes="32x32"
+  rel="icon"
+  type="image/png"
+  href="https://raw.githubusercontent.com/Joystream/design/master/logo/favicon/Favicon-v2.png"
+  sizes="32x32"
 />
 <link
-	rel="icon"
-	type="image/png"
-	href="https://raw.githubusercontent.com/Joystream/design/master/logo/favicon/Favicon-v2.png"
-	sizes="64x64"
+  rel="icon"
+  type="image/png"
+  href="https://raw.githubusercontent.com/Joystream/design/master/logo/favicon/Favicon-v2.png"
+  sizes="64x64"
 />
 <link
-	rel="icon"
-	type="image/png"
-	href="https://raw.githubusercontent.com/Joystream/design/master/logo/favicon/Favicon-v2.png"
-	sizes="1024x1024"
+  rel="icon"
+  type="image/png"
+  href="https://raw.githubusercontent.com/Joystream/design/master/logo/favicon/Favicon-v2.png"
+  sizes="1024x1024"
 />
 <link
-	rel="apple-touch-icon"
-	href="https://raw.githubusercontent.com/Joystream/design/master/logo/favicon/Favicon-v2.png"
-	sizes="1024x1024"
+  rel="apple-touch-icon"
+  href="https://raw.githubusercontent.com/Joystream/design/master/logo/favicon/Favicon-v2.png"
+  sizes="1024x1024"
 />

packages/app/src/shared/.storybook/preview-head.html

@@ -2,16 +2,16 @@
 <link rel="stylesheet" href="https://ben.click/Optimo_11264_K0tfnA/Optimo-PxGrotesk/PxGroteskRegular-Regular.css" />
 <link rel="stylesheet" href="https://ben.click/Optimo_11264_K0tfnA/Optimo-PxGrotesk/PxGroteskBold-Regular.css" />
 <style>
-	@font-face {
-		font-family: "PxGroteskRegular";
-		src: url("https://ben.click/Optimo_11264_K0tfnA/Optimo-PxGrotesk/PxGroteskRegular-Regular.css");
-	}
-	@font-face {
-        font-family: "PxGroteskRegular";
-        font-weight: bold;
-        src: url("https://ben.click/Optimo_11264_K0tfnA/Optimo-PxGrotesk/PxGroteskBold-Regular.css");
-    }
-	body {
-		margin: 0;
-	}
+  @font-face {
+    font-family: 'PxGroteskRegular';
+    src: url('https://ben.click/Optimo_11264_K0tfnA/Optimo-PxGrotesk/PxGroteskRegular-Regular.css');
+  }
+  @font-face {
+    font-family: 'PxGroteskRegular';
+    font-weight: bold;
+    src: url('https://ben.click/Optimo_11264_K0tfnA/Optimo-PxGrotesk/PxGroteskBold-Regular.css');
+  }
+  body {
+    margin: 0;
+  }
 </style>

packages/app/src/shared/.storybook/preview.jsx

@@ -1,28 +1,28 @@
-import React from "react";
-import { css } from "@emotion/core";
-import { addDecorator, addParameters } from "@storybook/react";
-import { withKnobs } from "@storybook/addon-knobs";
-import { jsxDecorator } from "storybook-addon-jsx";
-import theme from "./theme";
-import { GlobalStyle } from "../components";
+import React from 'react'
+import { css } from '@emotion/core'
+import { addDecorator, addParameters } from '@storybook/react'
+import { withKnobs } from '@storybook/addon-knobs'
+import { jsxDecorator } from 'storybook-addon-jsx'
+import theme from './theme'
+import { GlobalStyle } from '../components'
 
 const wrapperStyle = css`
-	padding: 10px;
-`;
+  padding: 10px;
+`
 
 const stylesWrapperDecorator = (styleFn) => (
-	<div css={wrapperStyle}>
-		<GlobalStyle />
-		{styleFn()}
-	</div>
-);
+  <div css={wrapperStyle}>
+    <GlobalStyle />
+    {styleFn()}
+  </div>
+)
 
-addDecorator(withKnobs);
-addDecorator(jsxDecorator);
-addDecorator(stylesWrapperDecorator);
+addDecorator(withKnobs)
+addDecorator(jsxDecorator)
+addDecorator(stylesWrapperDecorator)
 
 addParameters({
-	options: {
-		theme: theme,
-	},
-});
+  options: {
+    theme: theme,
+  },
+})

packages/app/src/shared/.storybook/theme.js

@@ -1,40 +1,40 @@
-import { create } from "@storybook/theming/create";
-import { colors } from "../theme";
+import { create } from '@storybook/theming/create'
+import { colors } from '../theme'
 
 export default create({
-	base: "dark",
-
-	colorPrimary: "#4038FF",
-	colorSecondary: "deepskyblue",
-
-	// UI
-	appBg: colors.black,
-	appContentBg: "#272D33",
-	appBorderColor: "#424E57",
-	appBorderRadius: 4,
-
-	// Typography
-	fontBase: '"Open Sans", sans-serif',
-	fontCode: "monospace",
-
-	// Text colors
-	textColor: "#DAE2EB",
-	textInverseColor: "rgba(255,255,255,0.9)",
-
-	// Toolbar default and active colors
-
-	barBg: "#272D33",
-	barTextColor: "#7B8A95",
-	barSelectedColor: "white",
-
-	// Form colors
-	inputBg: "white",
-	inputBorder: "#272D33",
-	inputTextColor: "black",
-	inputBorderRadius: 4,
-
-	brandTitle: "@joystream/components",
-	brandUrl: "https://joystream.org",
-	brandImage:
-		"https://raw.githubusercontent.com/Joystream/design/master/logo/logo/PNG/Logo-horisontal-basic-white-1x.png",
-});
+  base: 'dark',
+
+  colorPrimary: '#4038FF',
+  colorSecondary: 'deepskyblue',
+
+  // UI
+  appBg: colors.black,
+  appContentBg: '#272D33',
+  appBorderColor: '#424E57',
+  appBorderRadius: 4,
+
+  // Typography
+  fontBase: '"Open Sans", sans-serif',
+  fontCode: 'monospace',
+
+  // Text colors
+  textColor: '#DAE2EB',
+  textInverseColor: 'rgba(255,255,255,0.9)',
+
+  // Toolbar default and active colors
+
+  barBg: '#272D33',
+  barTextColor: '#7B8A95',
+  barSelectedColor: 'white',
+
+  // Form colors
+  inputBg: 'white',
+  inputBorder: '#272D33',
+  inputTextColor: 'black',
+  inputBorderRadius: 4,
+
+  brandTitle: '@joystream/components',
+  brandUrl: 'https://joystream.org',
+  brandImage:
+    'https://raw.githubusercontent.com/Joystream/design/master/logo/logo/PNG/Logo-horisontal-basic-white-1x.png',
+})

packages/app/src/shared/__tests__/Avatar.test.js

@@ -1,13 +1,13 @@
-import React from "react"
-import { mount } from "enzyme"
-import Avatar from "../components/Avatar"
-
-describe("Avatar component", () => {
-
-	const component = mount(<Avatar img="https://s3.amazonaws.com/keybase_processed_uploads/9003a57620356bd89d62bd34c7c0c305_360_360.jpg" />)
-
-	it("Should render correctly", () => {
-		expect(component).toMatchSnapshot()
-	})
-
+import React from 'react'
+import { mount } from 'enzyme'
+import Avatar from '../components/Avatar'
+
+describe('Avatar component', () => {
+  const component = mount(
+    <Avatar img="https://s3.amazonaws.com/keybase_processed_uploads/9003a57620356bd89d62bd34c7c0c305_360_360.jpg" />
+  )
+
+  it('Should render correctly', () => {
+    expect(component).toMatchSnapshot()
+  })
 })

packages/app/src/shared/__tests__/Button.test.js

@@ -1,13 +1,13 @@
-import React from "react";
-import { mount } from "enzyme";
-import { Button } from "../components";
+import React from 'react'
+import { mount } from 'enzyme'
+import { Button } from '../components'
 
-describe("Button component", () => {
-	it("Should render default button correctly", () => {
-		expect(mount(<Button>Click me!</Button>)).toMatchSnapshot();
-	});
+describe('Button component', () => {
+  it('Should render default button correctly', () => {
+    expect(mount(<Button>Click me!</Button>)).toMatchSnapshot()
+  })
 
-	it("Should render custom button correctly", () => {
-		expect(mount(<Button size="large">Hello Atlas</Button>)).toMatchSnapshot();
-	});
-});
+  it('Should render custom button correctly', () => {
+    expect(mount(<Button size="large">Hello Atlas</Button>)).toMatchSnapshot()
+  })
+})

packages/app/src/shared/components/Avatar/Avatar.style.tsx

@@ -1,37 +1,37 @@
-import { makeStyles, StyleFn } from "../../utils";
-import { colors, spacing } from "../../theme";
+import { makeStyles, StyleFn } from '../../utils'
+import { colors, spacing } from '../../theme'
 
 export type AvatarStyleProps = {
-	size: "small" | "default" | "large";
-};
+  size: 'small' | 'default' | 'large'
+}
 
-const container: StyleFn = (_, { size = "default" }) => {
-	let width = size === "small" ? spacing.xs : size === "default" ? spacing.m : spacing.xl;
-	return {
-		borderRadius: 999,
-		minWidth: width,
-		backgroundColor: colors.gray[500],
-		color: colors.white,
-		display: "flex",
-		justifyContent: "center",
-		alignItems: "center",
+const container: StyleFn = (_, { size = 'default' }) => {
+  let width = size === 'small' ? spacing.xs : size === 'default' ? spacing.m : spacing.xl
+  return {
+    borderRadius: 999,
+    minWidth: width,
+    backgroundColor: colors.gray[500],
+    color: colors.white,
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center',
 
-		"& > span": {
-			textTransform: "uppercase",
-			fontSize: "0.875rem",
-			lineHeight: 1.43,
-		},
-	};
-};
+    '& > span': {
+      textTransform: 'uppercase',
+      fontSize: '0.875rem',
+      lineHeight: 1.43,
+    },
+  }
+}
 
 const img: StyleFn = () => ({
-	width: "100%",
-	height: "100%",
-	objectFit: "cover",
-	borderRadius: 999,
-});
+  width: '100%',
+  height: '100%',
+  objectFit: 'cover',
+  borderRadius: 999,
+})
 
 export const useCSS = (props: Partial<AvatarStyleProps>) => ({
-	container: makeStyles([container])(props),
-	img: makeStyles([img])(props),
-});
+  container: makeStyles([container])(props),
+  img: makeStyles([img])(props),
+})

packages/app/src/shared/components/Avatar/Avatar.tsx

@@ -1,35 +1,35 @@
-import React from "react";
-import { SerializedStyles } from "@emotion/core";
-import { AvatarStyleProps, useCSS } from "./Avatar.style";
+import React from 'react'
+import { SerializedStyles } from '@emotion/core'
+import { AvatarStyleProps, useCSS } from './Avatar.style'
 
 export type AvatarProps = {
-	onClick: (e: React.MouseEvent<HTMLElement>) => void;
-	outerStyles?: SerializedStyles;
-	img: string;
-	name: string;
-	className?: string;
-} & AvatarStyleProps;
+  onClick: (e: React.MouseEvent<HTMLElement>) => void
+  outerStyles?: SerializedStyles
+  img: string
+  name: string
+  className?: string
+} & AvatarStyleProps
 
 function initialsFromName(name: string): string {
-	const vowels = ["a", "e", "i", "o", "u", "y"];
-	const [first = "", second = ""] = name.split("");
-	return vowels.includes(second) ? first : `${first}${second}`;
+  const vowels = ['a', 'e', 'i', 'o', 'u', 'y']
+  const [first = '', second = ''] = name.split('')
+  return vowels.includes(second) ? first : `${first}${second}`
 }
 
 const Avatar: React.FC<Partial<AvatarProps>> = ({
-	img,
-	outerStyles,
-	onClick = () => {},
-	name,
-	className,
-	...styleProps
+  img,
+  outerStyles,
+  onClick = () => {},
+  name,
+  className,
+  ...styleProps
 }) => {
-	const styles = useCSS({ ...styleProps });
-	return (
-		<div css={[styles.container, outerStyles]} className={className} onClick={onClick}>
-			{img ? <img src={img} css={styles.img} /> : <span>{initialsFromName(name || "")}</span>}
-		</div>
-	);
-};
+  const styles = useCSS({ ...styleProps })
+  return (
+    <div css={[styles.container, outerStyles]} className={className} onClick={onClick}>
+      {img ? <img src={img} css={styles.img} /> : <span>{initialsFromName(name || '')}</span>}
+    </div>
+  )
+}
 
-export default Avatar;
+export default Avatar

packages/app/src/shared/components/Avatar/index.tsx

@@ -1,2 +1,2 @@
-import Avatar from "./Avatar";
-export default Avatar;
+import Avatar from './Avatar'
+export default Avatar

packages/app/src/shared/components/Button/Button.style.ts

@@ -1,133 +1,133 @@
-import { typography, colors } from "../../theme"
-import { makeStyles, StyleFn } from "../../utils"
-import { disabled, dimensionsFromProps } from "../../theme/fragments"
+import { typography, colors } from '../../theme'
+import { makeStyles, StyleFn } from '../../utils'
+import { disabled, dimensionsFromProps } from '../../theme/fragments'
 
 export type ButtonStyleProps = {
-	text?: string
-	type?: "primary" | "secondary" | "tertiary"
-	full?: boolean
-	size?: "regular" | "small" | "smaller"
-	children?: React.ReactNode
-	disabled?: boolean
+  text?: string
+  type?: 'primary' | 'secondary' | 'tertiary'
+  full?: boolean
+  size?: 'regular' | 'small' | 'smaller'
+  children?: React.ReactNode
+  disabled?: boolean
 }
 
 const baseStyles: StyleFn = () => ({
-	borderWidth: "1px",
-	borderStyle: "solid",
-	fontFamily: typography.fonts.headers,
-	fontWeight: typography.weights.medium,
-	display: "inline-flex",
-	justifyContent: "center",
-	alignItems: "center",
-	color: colors.white,
-	"&::selected": {
-		background: "transparent"
-	}
+  borderWidth: '1px',
+  borderStyle: 'solid',
+  fontFamily: typography.fonts.headers,
+  fontWeight: typography.weights.medium,
+  display: 'inline-flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+  color: colors.white,
+  '&::selected': {
+    background: 'transparent',
+  },
 })
 const colorFromType: StyleFn = (styles = {}, { type }: ButtonStyleProps) => {
-	switch (type) {
-		case "primary":
-			return {
-				...styles,
-				backgroundColor: colors.blue[500],
-				borderColor: colors.blue[500],
+  switch (type) {
+    case 'primary':
+      return {
+        ...styles,
+        backgroundColor: colors.blue[500],
+        borderColor: colors.blue[500],
 
-				"&:hover": {
-					backgroundColor: colors.blue[700],
-					borderColor: colors.blue[700],
-					color: colors.white
-				},
-				"&:active": {
-					backgroundColor: colors.blue[900],
-					borderColor: colors.blue[900],
-					color: colors.white
-				}
-			}
+        '&:hover': {
+          backgroundColor: colors.blue[700],
+          borderColor: colors.blue[700],
+          color: colors.white,
+        },
+        '&:active': {
+          backgroundColor: colors.blue[900],
+          borderColor: colors.blue[900],
+          color: colors.white,
+        },
+      }
 
-		case "secondary":
-			return {
-				...styles,
-				backgroundColor: colors.black,
-				borderColor: colors.blue[500],
+    case 'secondary':
+      return {
+        ...styles,
+        backgroundColor: colors.black,
+        borderColor: colors.blue[500],
 
-				"&:hover": {
-					borderColor: colors.blue[700],
-					color: colors.blue[300]
-				},
+        '&:hover': {
+          borderColor: colors.blue[700],
+          color: colors.blue[300],
+        },
 
-				"&:active": {
-					borderColor: colors.blue[700],
-					color: colors.blue[700]
-				}
-			}
+        '&:active': {
+          borderColor: colors.blue[700],
+          color: colors.blue[700],
+        },
+      }
 
-		case "tertiary":
-			return {
-				...styles,
-				backgroundColor: "transparent",
-				borderColor: "transparent",
-				color: colors.blue[500],
-				"&:hover": {
-					color: colors.blue[300]
-				},
-				"&:active": {
-					color: colors.blue[700]
-				}
-			}
+    case 'tertiary':
+      return {
+        ...styles,
+        backgroundColor: 'transparent',
+        borderColor: 'transparent',
+        color: colors.blue[500],
+        '&:hover': {
+          color: colors.blue[300],
+        },
+        '&:active': {
+          color: colors.blue[700],
+        },
+      }
 
-		default:
-			return { ...styles }
-	}
+    default:
+      return { ...styles }
+  }
 }
 const paddingFromType: StyleFn = (
-	styles,
-	{
-		size = "regular",
-		children,
-		full = false
-	}: { size: "regular" | "small" | "smaller"; children?: React.ReactNode; full: boolean }
+  styles,
+  {
+    size = 'regular',
+    children,
+    full = false,
+  }: { size: 'regular' | 'small' | 'smaller'; children?: React.ReactNode; full: boolean }
 ) => {
-	const buttonHeight = size === "regular" ? "20px" : size === "small" ? "15px" : "10px"
-	return {
-		...styles,
-		padding:
-			size === "regular"
-				? children
-					? "14px 20px"
-					: "14px"
-				: size === "small"
-				? children
-					? "12px 14px"
-					: "12px"
-				: "10px",
-		fontSize:
-			size === "regular"
-				? typography.sizes.button.large
-				: size === "small"
-				? typography.sizes.button.medium
-				: typography.sizes.button.small
-	}
+  const buttonHeight = size === 'regular' ? '20px' : size === 'small' ? '15px' : '10px'
+  return {
+    ...styles,
+    padding:
+      size === 'regular'
+        ? children
+          ? '14px 20px'
+          : '14px'
+        : size === 'small'
+        ? children
+          ? '12px 14px'
+          : '12px'
+        : '10px',
+    fontSize:
+      size === 'regular'
+        ? typography.sizes.button.large
+        : size === 'small'
+        ? typography.sizes.button.medium
+        : typography.sizes.button.small,
+  }
 }
 
 const iconStyles: StyleFn = (styles, { children, size }) => {
-	return {
-		...styles,
-		marginRight: children != null ? "10px" : "0",
-		fontSize:
-			size === "regular"
-				? typography.sizes.icon.large
-				: size === "small"
-				? typography.sizes.icon.medium
-				: typography.sizes.icon.small,
+  return {
+    ...styles,
+    marginRight: children != null ? '10px' : '0',
+    fontSize:
+      size === 'regular'
+        ? typography.sizes.icon.large
+        : size === 'small'
+        ? typography.sizes.icon.medium
+        : typography.sizes.icon.small,
 
-		flexShrink: 0,
-		"& > *": {
-			stroke: "currentColor"
-		}
-	}
+    flexShrink: 0,
+    '& > *': {
+      stroke: 'currentColor',
+    },
+  }
 }
 
 export const useCSS = (props: ButtonStyleProps) => ({
-	container: makeStyles([baseStyles, colorFromType, dimensionsFromProps, paddingFromType, disabled])(props),
-	icon: makeStyles([iconStyles])(props)
+  container: makeStyles([baseStyles, colorFromType, dimensionsFromProps, paddingFromType, disabled])(props),
+  icon: makeStyles([iconStyles])(props),
 })

packages/app/src/shared/components/Button/Button.tsx

@@ -1,32 +1,32 @@
-import React from "react";
-import { SerializedStyles } from "@emotion/core";
-import { ButtonStyleProps, useCSS } from "./Button.style";
-import { BlockIcon } from "../../icons";
+import React from 'react'
+import { SerializedStyles } from '@emotion/core'
+import { ButtonStyleProps, useCSS } from './Button.style'
+import { BlockIcon } from '../../icons'
 
 type ButtonProps = {
-	children?: React.ReactNode;
-	icon?: boolean;
-	disabled?: boolean;
-	containerCss: SerializedStyles;
-	onClick?: (e: React.MouseEvent<HTMLButtonElement>) => void;
-} & ButtonStyleProps;
+  children?: React.ReactNode
+  icon?: boolean
+  disabled?: boolean
+  containerCss: SerializedStyles
+  onClick?: (e: React.MouseEvent<HTMLButtonElement>) => void
+} & ButtonStyleProps
 
 const Button: React.FC<Partial<ButtonProps>> = ({
-	children,
-	icon,
-	type = "primary",
-	disabled = false,
-	containerCss,
-	onClick = () => {},
-	...styleProps
+  children,
+  icon,
+  type = 'primary',
+  disabled = false,
+  containerCss,
+  onClick = () => {},
+  ...styleProps
 }) => {
-	let styles = useCSS({ disabled, type, children, ...styleProps });
-	return (
-		<button css={[styles.container, containerCss]} onClick={onClick} disabled={disabled}>
-			{icon && <BlockIcon css={styles.icon} />}
-			{children}
-		</button>
-	);
-};
+  let styles = useCSS({ disabled, type, children, ...styleProps })
+  return (
+    <button css={[styles.container, containerCss]} onClick={onClick} disabled={disabled}>
+      {icon && <BlockIcon css={styles.icon} />}
+      {children}
+    </button>
+  )
+}
 
-export default Button;
+export default Button

packages/app/src/shared/components/Button/index.ts

@@ -1,2 +1,2 @@
-import Button from "./Button";
-export default Button;
+import Button from './Button'
+export default Button

packages/app/src/shared/components/Carousel/Carousel.style.ts

@@ -1,44 +1,44 @@
-import { StyleFn, makeStyles } from "../../utils"
-import { spacing, breakpoints } from "../../theme"
+import { StyleFn, makeStyles } from '../../utils'
+import { spacing, breakpoints } from '../../theme'
 
 export type CarouselStyleProps = {}
 
 const container: StyleFn = () => ({
-	position: "relative",
-	display: "flex"
+  position: 'relative',
+  display: 'flex',
 })
 const outerItemsContainer: StyleFn = () => ({
-	overflow: "hidden"
+  overflow: 'hidden',
 })
 
 const innerItemsContainer: StyleFn = () => ({
-	display: "flex"
+  display: 'flex',
 })
 
 const navBase: StyleFn = () => ({
-	minWidth: spacing.xxxxl,
-	minHeight: spacing.xxxxl,
-	width: spacing.xxxxl,
-	height: spacing.xxxxl,
-	position: "absolute"
+  minWidth: spacing.xxxxl,
+  minHeight: spacing.xxxxl,
+  width: spacing.xxxxl,
+  height: spacing.xxxxl,
+  position: 'absolute',
 })
 
 const navLeft: StyleFn = (styles) => ({
-	...styles,
-	left: 0,
-	top: `calc(50% - ${Math.round((parseInt(spacing.xxxxl) + 1) / 2)}px)`
+  ...styles,
+  left: 0,
+  top: `calc(50% - ${Math.round((parseInt(spacing.xxxxl) + 1) / 2)}px)`,
 })
 
 const navRight: StyleFn = (styles) => ({
-	...styles,
-	right: 0,
-	top: `calc(50% - ${Math.round((parseInt(spacing.xxxxl) + 1) / 2)}px)`
+  ...styles,
+  right: 0,
+  top: `calc(50% - ${Math.round((parseInt(spacing.xxxxl) + 1) / 2)}px)`,
 })
 
 export const useCSS = (props: CarouselStyleProps) => ({
-	container: makeStyles([container])(props),
-	outerItemsContainer: makeStyles([outerItemsContainer])(props),
-	innerItemsContainer: makeStyles([innerItemsContainer])(props),
-	navLeft: makeStyles([navBase, navLeft])(props),
-	navRight: makeStyles([navBase, navRight])(props)
+  container: makeStyles([container])(props),
+  outerItemsContainer: makeStyles([outerItemsContainer])(props),
+  innerItemsContainer: makeStyles([innerItemsContainer])(props),
+  navLeft: makeStyles([navBase, navLeft])(props),
+  navRight: makeStyles([navBase, navRight])(props),
 })

packages/app/src/shared/components/Carousel/Carousel.tsx

@@ -1,120 +1,120 @@
-import React, { useState, useRef, useEffect, useCallback, useMemo } from "react";
-import { css, SerializedStyles } from "@emotion/core";
-import { animated, useSpring } from "react-spring";
-import useResizeObserver from "use-resize-observer";
-import { useCSS, CarouselStyleProps } from "./Carousel.style";
-import NavButton from "../NavButton";
+import React, { useState, useRef, useEffect, useCallback, useMemo } from 'react'
+import { css, SerializedStyles } from '@emotion/core'
+import { animated, useSpring } from 'react-spring'
+import useResizeObserver from 'use-resize-observer'
+import { useCSS, CarouselStyleProps } from './Carousel.style'
+import NavButton from '../NavButton'
 
 type CarouselProps = {
-	children: React.ReactNode;
-	containerCss: SerializedStyles;
-	leftControlCss: SerializedStyles;
-	rightControlCss: SerializedStyles;
-	onScroll: (direction: "left" | "right") => void;
-} & CarouselStyleProps;
+  children: React.ReactNode
+  containerCss: SerializedStyles
+  leftControlCss: SerializedStyles
+  rightControlCss: SerializedStyles
+  onScroll: (direction: 'left' | 'right') => void
+} & CarouselStyleProps
 
 const Carousel: React.FC<Partial<CarouselProps>> = ({
-	children,
-	containerCss,
-	leftControlCss,
-	rightControlCss,
-	onScroll = () => {},
+  children,
+  containerCss,
+  leftControlCss,
+  rightControlCss,
+  onScroll = () => {},
 }) => {
-	const [scroll, setScroll] = useSpring(() => ({
-		transform: `translateX(0px)`,
-	}));
-	const [x, setX] = useState(0);
-	const { width: containerWidth = NaN, ref: containerRef } = useResizeObserver<HTMLDivElement>();
-	const elementsRefs = useRef<(HTMLDivElement | null)[]>([]);
-	const [childrensWidth, setChildrensWidth] = useState(0);
-	useEffect(() => {
-		if (Array.isArray(children)) {
-			elementsRefs.current = elementsRefs.current.slice(0, children.length);
-			const childrensWidth = elementsRefs.current.reduce(
-				(accWidth, el) => (el != null ? accWidth + el.clientWidth : accWidth),
-				0
-			);
-			setChildrensWidth(childrensWidth);
-		}
-	}, [children]);
-	const styles = useCSS({});
+  const [scroll, setScroll] = useSpring(() => ({
+    transform: `translateX(0px)`,
+  }))
+  const [x, setX] = useState(0)
+  const { width: containerWidth = NaN, ref: containerRef } = useResizeObserver<HTMLDivElement>()
+  const elementsRefs = useRef<(HTMLDivElement | null)[]>([])
+  const [childrensWidth, setChildrensWidth] = useState(0)
+  useEffect(() => {
+    if (Array.isArray(children)) {
+      elementsRefs.current = elementsRefs.current.slice(0, children.length)
+      const childrensWidth = elementsRefs.current.reduce(
+        (accWidth, el) => (el != null ? accWidth + el.clientWidth : accWidth),
+        0
+      )
+      setChildrensWidth(childrensWidth)
+    }
+  }, [children])
+  const styles = useCSS({})
 
-	function handleScroll(direction: "left" | "right") {
-		if (containerWidth == null) {
-			return;
-		}
-		let scrollAmount;
-		switch (direction) {
-			case "left": {
-				// Prevent overscroll on the left
-				scrollAmount = x + containerWidth >= 0 ? 0 : x + containerWidth;
-				onScroll("left");
-				break;
-			}
-			case "right": {
-				// Prevent overscroll on the right
-				scrollAmount =
-					x - containerWidth <= -(childrensWidth - containerWidth)
-						? -(childrensWidth - containerWidth)
-						: x - containerWidth;
-				onScroll("right");
-				break;
-			}
-		}
-		setX(scrollAmount);
-		setScroll({
-			transform: `translateX(${scrollAmount}px)`,
-		});
-	}
+  function handleScroll(direction: 'left' | 'right') {
+    if (containerWidth == null) {
+      return
+    }
+    let scrollAmount
+    switch (direction) {
+      case 'left': {
+        // Prevent overscroll on the left
+        scrollAmount = x + containerWidth >= 0 ? 0 : x + containerWidth
+        onScroll('left')
+        break
+      }
+      case 'right': {
+        // Prevent overscroll on the right
+        scrollAmount =
+          x - containerWidth <= -(childrensWidth - containerWidth)
+            ? -(childrensWidth - containerWidth)
+            : x - containerWidth
+        onScroll('right')
+        break
+      }
+    }
+    setX(scrollAmount)
+    setScroll({
+      transform: `translateX(${scrollAmount}px)`,
+    })
+  }
 
-	if (!Array.isArray(children)) {
-		return <>{children}</>;
-	}
-	return (
-		<div css={[styles.container, containerCss]}>
-			<div css={styles.outerItemsContainer} ref={containerRef}>
-				<animated.div style={scroll} css={styles.innerItemsContainer}>
-					{children.map((element, idx) => (
-						<div
-							key={`Carousel-${idx}`}
-							ref={(el) => {
-								elementsRefs.current[idx] = el;
-								return el;
-							}}
-						>
-							{element}
-						</div>
-					))}
-				</animated.div>
-			</div>
-			<NavButton
-				outerCss={[
-					styles.navLeft,
-					css`
-						opacity: ${x === 0 ? 0 : 1};
-					`,
-					leftControlCss,
-				]}
-				direction="left"
-				onClick={() => {
-					handleScroll("left");
-				}}
-			/>
-			<NavButton
-				outerCss={[
-					styles.navRight,
-					css`
-						opacity: ${x === -(childrensWidth - containerWidth) ? 0 : 1};
-					`,
-					rightControlCss,
-				]}
-				direction="right"
-				onClick={() => {
-					handleScroll("right");
-				}}
-			/>
-		</div>
-	);
-};
+  if (!Array.isArray(children)) {
+    return <>{children}</>
+  }
+  return (
+    <div css={[styles.container, containerCss]}>
+      <div css={styles.outerItemsContainer} ref={containerRef}>
+        <animated.div style={scroll} css={styles.innerItemsContainer}>
+          {children.map((element, idx) => (
+            <div
+              key={`Carousel-${idx}`}
+              ref={(el) => {
+                elementsRefs.current[idx] = el
+                return el
+              }}
+            >
+              {element}
+            </div>
+          ))}
+        </animated.div>
+      </div>
+      <NavButton
+        outerCss={[
+          styles.navLeft,
+          css`
+            opacity: ${x === 0 ? 0 : 1};
+          `,
+          leftControlCss,
+        ]}
+        direction="left"
+        onClick={() => {
+          handleScroll('left')
+        }}
+      />
+      <NavButton
+        outerCss={[
+          styles.navRight,
+          css`
+            opacity: ${x === -(childrensWidth - containerWidth) ? 0 : 1};
+          `,
+          rightControlCss,
+        ]}
+        direction="right"
+        onClick={() => {
+          handleScroll('right')
+        }}
+      />
+    </div>
+  )
+}
 
-export default Carousel;
+export default Carousel

packages/app/src/shared/components/Carousel/index.ts

@@ -1,2 +1,2 @@
-import Carousel from "./Carousel";
-export default Carousel;
+import Carousel from './Carousel'
+export default Carousel

packages/app/src/shared/components/ChannelPreview/ChannelPreview.style.tsx

@@ -1,52 +1,52 @@
-import { StyleFn, makeStyles } from "../../utils";
-import { colors, typography } from "../../theme";
+import { StyleFn, makeStyles } from '../../utils'
+import { colors, typography } from '../../theme'
 
 export type ChannelPreviewStyleProps = {
-	channelAvatar: string;
-	width: number;
-	height: number;
-};
+  channelAvatar: string
+  width: number
+  height: number
+}
 
 const outerContainer: StyleFn = (_, { width = 200, height = 186 }) => ({
-	minWidth: width,
-	minHeight: height,
-	maxWidth: width,
-	maxHeight: height,
-	paddingTop: "2rem",
-});
+  minWidth: width,
+  minHeight: height,
+  maxWidth: width,
+  maxHeight: height,
+  paddingTop: '2rem',
+})
 
 const innerContainer: StyleFn = () => ({
-	backgroundColor: colors.gray[800],
-	color: colors.gray[300],
-	display: "flex",
-	flexDirection: "column",
-	justifyContent: "flex-end",
-});
+  backgroundColor: colors.gray[800],
+  color: colors.gray[300],
+  display: 'flex',
+  flexDirection: 'column',
+  justifyContent: 'flex-end',
+})
 
 const info: StyleFn = () => ({
-	margin: `12px auto 10px`,
-	textAlign: "center",
-	"& > h2": {
-		margin: 0,
-		fontSize: "1rem",
-	},
-	"& > span": {
-		fontSize: "0.875rem",
-		lineHeight: 1.43,
-	},
-});
+  margin: `12px auto 10px`,
+  textAlign: 'center',
+  '& > h2': {
+    margin: 0,
+    fontSize: '1rem',
+  },
+  '& > span': {
+    fontSize: '0.875rem',
+    lineHeight: 1.43,
+  },
+})
 
 const avatar: StyleFn = () => ({
-	width: 156,
-	height: 156,
-	position: "relative",
-	margin: `-2rem auto 0`,
-	zIndex: 2,
-});
+  width: 156,
+  height: 156,
+  position: 'relative',
+  margin: `-2rem auto 0`,
+  zIndex: 2,
+})
 
 export const useCSS = (props: Partial<ChannelPreviewStyleProps>) => ({
-	outerContainer: makeStyles([outerContainer])(props),
-	innerContainer: makeStyles([innerContainer])(props),
-	info: makeStyles([info])(props),
-	avatar: makeStyles([avatar])(props),
-});
+  outerContainer: makeStyles([outerContainer])(props),
+  innerContainer: makeStyles([innerContainer])(props),
+  info: makeStyles([info])(props),
+  avatar: makeStyles([avatar])(props),
+})

packages/app/src/shared/components/ChannelPreview/ChannelPreview.tsx

@@ -1,32 +1,32 @@
-import React from "react";
-import { SerializedStyles } from "@emotion/core";
-import { ChannelPreviewStyleProps, useCSS } from "./ChannelPreview.style";
-import Avatar from "../Avatar";
+import React from 'react'
+import { SerializedStyles } from '@emotion/core'
+import { ChannelPreviewStyleProps, useCSS } from './ChannelPreview.style'
+import Avatar from '../Avatar'
 
 type ChannelPreviewProps = {
-	views: string;
-	channel: string;
-	channelAvatar: string;
-	outerContainerCss: SerializedStyles;
-} & ChannelPreviewStyleProps;
+  views: string
+  channel: string
+  channelAvatar: string
+  outerContainerCss: SerializedStyles
+} & ChannelPreviewStyleProps
 
 export default function ChannelPreview({
-	views,
-	channel,
-	channelAvatar,
-	outerContainerCss,
-	...styleProps
+  views,
+  channel,
+  channelAvatar,
+  outerContainerCss,
+  ...styleProps
 }: Partial<ChannelPreviewProps>) {
-	const styles = useCSS({ ...styleProps });
-	return (
-		<article css={[styles.outerContainer, outerContainerCss]}>
-			<div css={styles.innerContainer}>
-				<Avatar outerStyles={styles.avatar} img={channelAvatar} />
-				<div css={styles.info}>
-					<h2>{channel}</h2>
-					<span>{views} views</span>
-				</div>
-			</div>
-		</article>
-	);
+  const styles = useCSS({ ...styleProps })
+  return (
+    <article css={[styles.outerContainer, outerContainerCss]}>
+      <div css={styles.innerContainer}>
+        <Avatar outerStyles={styles.avatar} img={channelAvatar} />
+        <div css={styles.info}>
+          <h2>{channel}</h2>
+          <span>{views} views</span>
+        </div>
+      </div>
+    </article>
+  )
 }

packages/app/src/shared/components/ChannelPreview/index.ts

@@ -1,2 +1,2 @@
-import ChannelPreview from "./ChannelPreview";
-export default ChannelPreview;
+import ChannelPreview from './ChannelPreview'
+export default ChannelPreview

packages/app/src/shared/components/Checkbox/Checkbox.style.ts

@@ -1,129 +1,129 @@
-import { StyleFn, makeStyles } from "./../../utils/style-reducer"
-import { colors, typography, spacing } from "../../theme"
+import { StyleFn, makeStyles } from './../../utils/style-reducer'
+import { colors, typography, spacing } from '../../theme'
 
 export type CheckboxStyleProps = {
-	labelPosition?: "end" | "start" | "top" | "bottom"
-	caption?: string
-	error?: boolean
-	selected?: boolean
-	disabled?: boolean
+  labelPosition?: 'end' | 'start' | 'top' | 'bottom'
+  caption?: string
+  error?: boolean
+  selected?: boolean
+  disabled?: boolean
 }
 
 const checkbox: StyleFn = (_, { labelPosition }) => ({
-	color: colors.white,
-	display: "inline-flex",
-	flexDirection: labelPosition === "top" || labelPosition === "bottom" ? "column" : "row",
-	alignItems: "center"
+  color: colors.white,
+  display: 'inline-flex',
+  flexDirection: labelPosition === 'top' || labelPosition === 'bottom' ? 'column' : 'row',
+  alignItems: 'center',
 })
 
 const fillFromProps: StyleFn = (styles, { disabled, error, selected }) => {
-	let fill = error
-		? colors.error
-		: selected && disabled
-		? colors.gray[700]
-		: selected
-		? colors.blue[500]
-		: "transparent"
+  let fill = error
+    ? colors.error
+    : selected && disabled
+    ? colors.gray[700]
+    : selected
+    ? colors.blue[500]
+    : 'transparent'
 
-	return {
-		...styles,
-		backgroundColor: fill
-	}
+  return {
+    ...styles,
+    backgroundColor: fill,
+  }
 }
 
 const borderColorFromProps: StyleFn = (styles, { disabled, error, selected }) => {
-	let borderColor = error
-		? colors.error
-		: selected && disabled
-		? colors.gray[700]
-		: disabled
-		? colors.gray[400]
-		: selected
-		? colors.blue[500]
-		: colors.gray[300]
+  let borderColor = error
+    ? colors.error
+    : selected && disabled
+    ? colors.gray[700]
+    : disabled
+    ? colors.gray[400]
+    : selected
+    ? colors.blue[500]
+    : colors.gray[300]
 
-	return {
-		...styles,
-		borderColor
-	}
+  return {
+    ...styles,
+    borderColor,
+  }
 }
 
 const shadowFromProps: StyleFn = (styles, { disabled, error, selected }) => {
-	let shadow = error || disabled ? "transparent" : selected ? colors.blue[900] : colors.gray[800]
-	return {
-		...styles,
-		backgroundColor: shadow
-	}
+  let shadow = error || disabled ? 'transparent' : selected ? colors.blue[900] : colors.gray[800]
+  return {
+    ...styles,
+    backgroundColor: shadow,
+  }
 }
 
 const outerContainer: StyleFn = (_, { disabled, error, selected }) => ({
-	borderRadius: "999px",
-	color: disabled ? colors.gray[400] : colors.white,
-	maxWidth: "2rem",
-	maxHeight: "2rem",
-	minWidth: "2rem",
-	minHeight: "2rem",
-	display: "flex",
-	justifyContent: "center",
-	alignItems: "center",
-	"&:focus-within": shadowFromProps({}, { disabled, error, selected }),
-	"&:hover": disabled ? {} : shadowFromProps({}, { disabled, error, selected })
+  borderRadius: '999px',
+  color: disabled ? colors.gray[400] : colors.white,
+  maxWidth: '2rem',
+  maxHeight: '2rem',
+  minWidth: '2rem',
+  minHeight: '2rem',
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+  '&:focus-within': shadowFromProps({}, { disabled, error, selected }),
+  '&:hover': disabled ? {} : shadowFromProps({}, { disabled, error, selected }),
 })
 
 const innerContainer: StyleFn = (_, { disabled, error, selected }) => ({
-	position: "relative",
-	borderWidth: "1px",
-	borderStyle: "solid",
-	backgroundColor: selected ? fillFromProps({}, { disabled, error, selected }).backgroundColor : "transparent",
-	width: "1.065rem",
-	height: "1.065rem",
-	maxWidth: "1.065rem",
-	maxHeight: "1.065rem",
-	minWidth: "1.065rem",
-	minHeight: "1.065rem",
-	textAlign: "center",
-	[`& > input[type="checkbox"]:checked`]: {
-		borderColor: !selected ? colors.white : borderColorFromProps({}, { disabled, error, selected }).borderColor,
-		...fillFromProps({}, { disabled, error, selected })
-	},
-	"&:active": fillFromProps({}, { disabled, error, selected })
+  position: 'relative',
+  borderWidth: '1px',
+  borderStyle: 'solid',
+  backgroundColor: selected ? fillFromProps({}, { disabled, error, selected }).backgroundColor : 'transparent',
+  width: '1.065rem',
+  height: '1.065rem',
+  maxWidth: '1.065rem',
+  maxHeight: '1.065rem',
+  minWidth: '1.065rem',
+  minHeight: '1.065rem',
+  textAlign: 'center',
+  [`& > input[type="checkbox"]:checked`]: {
+    borderColor: !selected ? colors.white : borderColorFromProps({}, { disabled, error, selected }).borderColor,
+    ...fillFromProps({}, { disabled, error, selected }),
+  },
+  '&:active': fillFromProps({}, { disabled, error, selected }),
 })
 
 const input: StyleFn = () => ({
-	position: "absolute",
-	top: 0,
-	bottom: 0,
-	left: 0,
-	right: 0,
-	opacity: 0,
-	width: "100%",
-	height: "100%",
-	padding: "unset",
-	margin: "unset",
-	border: "unset"
+  position: 'absolute',
+  top: 0,
+  bottom: 0,
+  left: 0,
+  right: 0,
+  opacity: 0,
+  width: '100%',
+  height: '100%',
+  padding: 'unset',
+  margin: 'unset',
+  border: 'unset',
 })
 
 const icon: StyleFn = () => ({
-	verticalAlign: "middle"
+  verticalAlign: 'middle',
 })
 
 const label: StyleFn = (_, { labelPosition }) => {
-	const value = labelPosition === "top" || labelPosition === "bottom" ? `${spacing.xs} auto` : `auto ${spacing.xs}`
-	return {
-		fontFamily: typography.fonts.base,
-		color: colors.white,
-		margin: value
-	}
+  const value = labelPosition === 'top' || labelPosition === 'bottom' ? `${spacing.xs} auto` : `auto ${spacing.xs}`
+  return {
+    fontFamily: typography.fonts.base,
+    color: colors.white,
+    margin: value,
+  }
 }
 
 export const useCSS = ({ selected, error, disabled, labelPosition }: CheckboxStyleProps) => {
-	const props = { selected, error, disabled, labelPosition }
-	return {
-		checkbox: makeStyles([checkbox])(props),
-		outerContainer: makeStyles([outerContainer])(props),
-		innerContainer: makeStyles([innerContainer, borderColorFromProps])(props),
-		input: makeStyles([input])(props),
-		label: makeStyles([label])(props),
-		icon: makeStyles([icon])(props)
-	}
+  const props = { selected, error, disabled, labelPosition }
+  return {
+    checkbox: makeStyles([checkbox])(props),
+    outerContainer: makeStyles([outerContainer])(props),
+    innerContainer: makeStyles([innerContainer, borderColorFromProps])(props),
+    input: makeStyles([input])(props),
+    label: makeStyles([label])(props),
+    icon: makeStyles([icon])(props),
+  }
 }

packages/app/src/shared/components/Checkbox/Checkbox.tsx

@@ -1,40 +1,34 @@
-import React from "react";
-import { CheckboxStyleProps, useCSS } from "./Checkbox.style";
-import { CheckIcon, DashIcon } from "../../icons";
+import React from 'react'
+import { CheckboxStyleProps, useCSS } from './Checkbox.style'
+import { CheckIcon, DashIcon } from '../../icons'
 
 type CheckboxProps = {
-	label?: string;
-	icon?: "check" | "dash";
-	onChange?: (e: React.ChangeEvent) => void;
-} & CheckboxStyleProps;
+  label?: string
+  icon?: 'check' | 'dash'
+  onChange?: (e: React.ChangeEvent) => void
+} & CheckboxStyleProps
 
 export default function Checkbox({
-	label = "",
-	disabled = false,
-	error = false,
-	selected = false,
-	icon = "check",
-	labelPosition = "end",
-	onChange = () => {},
-	...styleProps
+  label = '',
+  disabled = false,
+  error = false,
+  selected = false,
+  icon = 'check',
+  labelPosition = 'end',
+  onChange = () => {},
+  ...styleProps
 }: CheckboxProps) {
-	const styles = useCSS({ ...styleProps, selected, error, disabled });
-	return (
-		<div css={styles.checkbox}>
-			{(labelPosition === "start" || labelPosition === "top") && <label css={styles.label}>{label}</label>}
-			<div css={styles.outerContainer}>
-				<div css={styles.innerContainer}>
-					<input
-						css={styles.input}
-						type="checkbox"
-						checked={selected}
-						disabled={disabled}
-						onChange={onChange}
-					/>
-					{selected && (icon === "check" ? <CheckIcon css={styles.icon} /> : <DashIcon css={styles.icon} />)}
-				</div>
-			</div>
-			{(labelPosition === "end" || labelPosition === "bottom") && <label css={styles.label}>{label}</label>}
-		</div>
-	);
+  const styles = useCSS({ ...styleProps, selected, error, disabled })
+  return (
+    <div css={styles.checkbox}>
+      {(labelPosition === 'start' || labelPosition === 'top') && <label css={styles.label}>{label}</label>}
+      <div css={styles.outerContainer}>
+        <div css={styles.innerContainer}>
+          <input css={styles.input} type="checkbox" checked={selected} disabled={disabled} onChange={onChange} />
+          {selected && (icon === 'check' ? <CheckIcon css={styles.icon} /> : <DashIcon css={styles.icon} />)}
+        </div>
+      </div>
+      {(labelPosition === 'end' || labelPosition === 'bottom') && <label css={styles.label}>{label}</label>}
+    </div>
+  )
 }

packages/app/src/shared/components/Checkbox/index.ts

@@ -1,2 +1,2 @@
-import Checkbox from "./Checkbox";
-export default Checkbox;
+import Checkbox from './Checkbox'
+export default Checkbox

packages/app/src/shared/components/Dropdown/Dropdown.style.ts

@@ -1,131 +1,131 @@
-import { StyleFn, makeStyles } from "./../../utils";
-import { css } from "@emotion/core";
-import { typography, colors, spacing } from "./../../theme";
+import { StyleFn, makeStyles } from './../../utils'
+import { css } from '@emotion/core'
+import { typography, colors, spacing } from './../../theme'
 
 export type DropdownStyleProps = {
-	disabled?: boolean;
-	focus?: boolean;
-	error?: boolean;
-	isActive?: boolean;
-};
+  disabled?: boolean
+  focus?: boolean
+  error?: boolean
+  isActive?: boolean
+}
 
 const wrapper: StyleFn = () => ({
-	display: "block",
-	maxWidth: "250px",
-	fontFamily: typography.fonts.base,
-});
+  display: 'block',
+  maxWidth: '250px',
+  fontFamily: typography.fonts.base,
+})
 
 const container: StyleFn = (_, { disabled }) => ({
-	position: "relative",
-	width: "100%",
-	height: "48px",
-	display: "inline-flex",
-	cursor: disabled ? "not-allowed" : "default",
-});
+  position: 'relative',
+  width: '100%',
+  height: '48px',
+  display: 'inline-flex',
+  cursor: disabled ? 'not-allowed' : 'default',
+})
 
 const borderBase: StyleFn = () => ({
-	position: "absolute",
-	top: 0,
-	left: 0,
-	right: 0,
-	bottom: 0,
-	borderWidth: "1px",
-	borderStyle: "solid",
-	display: "flex",
-	alignItems: "center",
-	justifyContent: "left",
-});
+  position: 'absolute',
+  top: 0,
+  left: 0,
+  right: 0,
+  bottom: 0,
+  borderWidth: '1px',
+  borderStyle: 'solid',
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'left',
+})
 
 const label: StyleFn = (_, { error }) => ({
-	color: error ? colors.error : colors.gray[400],
-	padding: `0 ${spacing.xxxxl} 0 ${spacing.s}`,
-	backgroundColor: colors.black,
-	fontSize: typography.sizes.body2,
-	"&::selection": {
-		backgroundColor: "transparent",
-	},
-});
+  color: error ? colors.error : colors.gray[400],
+  padding: `0 ${spacing.xxxxl} 0 ${spacing.s}`,
+  backgroundColor: colors.black,
+  fontSize: typography.sizes.body2,
+  '&::selection': {
+    backgroundColor: 'transparent',
+  },
+})
 
 const input: StyleFn = () => ({
-	display: "none",
-	widht: "100%",
-	margin: `0 ${spacing.xxxxl} 0 ${spacing.s}`,
-	background: "none",
-	border: "none",
-	color: colors.white,
-	outline: "none",
-	fontSize: typography.sizes.body2,
-	padding: "5px 0",
-});
+  display: 'none',
+  widht: '100%',
+  margin: `0 ${spacing.xxxxl} 0 ${spacing.s}`,
+  background: 'none',
+  border: 'none',
+  color: colors.white,
+  outline: 'none',
+  fontSize: typography.sizes.body2,
+  padding: '5px 0',
+})
 
 const iconOpen: StyleFn = () => ({
-	color: colors.gray[300],
-	fontSize: typography.sizes.icon.medium,
-	position: "absolute",
-	top: spacing.m,
-	right: spacing.s,
-});
+  color: colors.gray[300],
+  fontSize: typography.sizes.icon.medium,
+  position: 'absolute',
+  top: spacing.m,
+  right: spacing.s,
+})
 
 const iconClose: StyleFn = (_, { error }) => ({
-	color: error ? colors.error : colors.blue[500],
-	fontSize: typography.sizes.icon.medium,
-	position: "absolute",
-	top: spacing.m,
-	right: spacing.s,
-});
+  color: error ? colors.error : colors.blue[500],
+  fontSize: typography.sizes.icon.medium,
+  position: 'absolute',
+  top: spacing.m,
+  right: spacing.s,
+})
 
 const helper: StyleFn = (_, { error }) => ({
-	color: error ? colors.error : colors.gray[400],
-	fontSize: typography.sizes.caption,
-	margin: `${spacing.xxs} ${spacing.xs}`,
-});
+  color: error ? colors.error : colors.gray[400],
+  fontSize: typography.sizes.caption,
+  margin: `${spacing.xxs} ${spacing.xs}`,
+})
 
 const options: StyleFn = () => ({
-	backgroundColor: colors.gray[700],
-	color: colors.white,
-	display: "block",
-	width: "100%",
-	position: "absolute",
-	top: "50px",
-	maxHeight: "145px",
-	overflowX: "none",
-	overflowY: "auto",
-});
+  backgroundColor: colors.gray[700],
+  color: colors.white,
+  display: 'block',
+  width: '100%',
+  position: 'absolute',
+  top: '50px',
+  maxHeight: '145px',
+  overflowX: 'none',
+  overflowY: 'auto',
+})
 
 const option: StyleFn = () => ({
-	padding: spacing.s,
-	fontSize: typography.sizes.body2,
-	"&:hover": {
-		backgroundColor: colors.gray[600],
-	},
-});
+  padding: spacing.s,
+  fontSize: typography.sizes.body2,
+  '&:hover': {
+    backgroundColor: colors.gray[600],
+  },
+})
 
 const borderColorFromProps: StyleFn = (styles, { error, disabled, isActive, focus }) => {
-	const borderColor = disabled
-		? colors.gray[200]
-		: error
-		? colors.error
-		: focus
-		? colors.blue[500]
-		: isActive
-		? colors.gray[200]
-		: colors.gray[400];
+  const borderColor = disabled
+    ? colors.gray[200]
+    : error
+    ? colors.error
+    : focus
+    ? colors.blue[500]
+    : isActive
+    ? colors.gray[200]
+    : colors.gray[400]
 
-	return {
-		...styles,
-		borderColor,
-	};
-};
+  return {
+    ...styles,
+    borderColor,
+  }
+}
 
 export const useCSS = (props: DropdownStyleProps) => ({
-	wrapper: makeStyles([wrapper])(props),
-	container: makeStyles([container])(props),
-	border: makeStyles([borderBase, borderColorFromProps])(props),
-	label: makeStyles([label])(props),
-	input: makeStyles([input])(props),
-	iconOpen: makeStyles([iconOpen])(props),
-	iconClose: makeStyles([iconClose])(props),
-	helper: makeStyles([helper])(props),
-	options: makeStyles([options])(props),
-	option: makeStyles([option])(props),
-});
+  wrapper: makeStyles([wrapper])(props),
+  container: makeStyles([container])(props),
+  border: makeStyles([borderBase, borderColorFromProps])(props),
+  label: makeStyles([label])(props),
+  input: makeStyles([input])(props),
+  iconOpen: makeStyles([iconOpen])(props),
+  iconClose: makeStyles([iconClose])(props),
+  helper: makeStyles([helper])(props),
+  options: makeStyles([options])(props),
+  option: makeStyles([option])(props),
+})

packages/app/src/shared/components/Dropdown/Dropdown.tsx

@@ -1,97 +1,97 @@
-import React, { useRef, useState } from "react";
-import { DropdownStyleProps, useCSS } from "./Dropdown.style";
-import { ChevronIconDown, ChevronIconUp } from "../../icons";
-import { spacing } from "../../theme";
+import React, { useRef, useState } from 'react'
+import { DropdownStyleProps, useCSS } from './Dropdown.style'
+import { ChevronIconDown, ChevronIconUp } from '../../icons'
+import { spacing } from '../../theme'
 
 type DropdownOption = {
-	text: string;
-	value: string;
-};
+  text: string
+  value: string
+}
 
 type DropdownProps = {
-	label: string;
-	helper?: string;
-	value?: string;
-	options: DropdownOption[];
-	onChange?: (option: DropdownOption) => void;
-} & DropdownStyleProps;
+  label: string
+  helper?: string
+  value?: string
+  options: DropdownOption[]
+  onChange?: (option: DropdownOption) => void
+} & DropdownStyleProps
 
 export default function Dropdown({
-	label,
-	helper = "",
-	value = "",
-	options = [],
-	disabled = false,
-	onChange = () => {},
-	...styleProps
+  label,
+  helper = '',
+  value = '',
+  options = [],
+  disabled = false,
+  onChange = () => {},
+  ...styleProps
 }: DropdownProps) {
-	const inputRef = useRef(null);
-	const [isActive, setIsActive] = useState(!!value);
-	const [inputTextValue, setInputTextValue] = useState(
-		!!value ? options.find(({ value: optionValue = "" }) => optionValue === value)?.text : ""
-	);
-	const [showOptions, setShowOptions] = useState(false);
-	const styles = useCSS({ isActive, disabled, ...styleProps });
+  const inputRef = useRef(null)
+  const [isActive, setIsActive] = useState(!!value)
+  const [inputTextValue, setInputTextValue] = useState(
+    !!value ? options.find(({ value: optionValue = '' }) => optionValue === value)?.text : ''
+  )
+  const [showOptions, setShowOptions] = useState(false)
+  const styles = useCSS({ isActive, disabled, ...styleProps })
 
-	function onToggleDropdown(): void {
-		if (!disabled) {
-			setShowOptions(!showOptions);
-		}
-	}
+  function onToggleDropdown(): void {
+    if (!disabled) {
+      setShowOptions(!showOptions)
+    }
+  }
 
-	function onOptionSelected(option: DropdownOption): void {
-		setIsActive(false);
-		setInputTextValue(option.text);
-		onChange(option);
-	}
+  function onOptionSelected(option: DropdownOption): void {
+    setIsActive(false)
+    setInputTextValue(option.text)
+    onChange(option)
+  }
 
-	return (
-		<div css={styles.wrapper}>
-			<div css={styles.container} onClick={onToggleDropdown}>
-				<div css={styles.border}>
-					<div
-						css={styles.label}
-						style={
-							!inputTextValue && !isActive
-								? {}
-								: {
-										position: "absolute",
-										top: "-8px",
-										left: "5px",
-										fontSize: "0.7rem",
-										padding: `0 ${spacing.xs}`,
-								  }
-						}
-					>
-						{label}
-					</div>
-					<input
-						css={styles.input}
-						style={{ display: !!inputTextValue || isActive ? "block" : "none" }}
-						ref={inputRef}
-						type="text"
-						disabled={true}
-						value={inputTextValue}
-					/>
-					{!showOptions && <ChevronIconUp css={styles.iconOpen} />}
-					{!!showOptions && <ChevronIconDown css={styles.iconClose} />}
-				</div>
-				{showOptions && (
-					<div css={styles.options}>
-						{options.map((option, index) => (
-							<div
-								key={`${label}-${index}`}
-								css={styles.option}
-								defaultValue={option.value}
-								onClick={() => onOptionSelected(option)}
-							>
-								{option.text}
-							</div>
-						))}
-					</div>
-				)}
-			</div>
-			{!!helper && <p css={styles.helper}>{helper}</p>}
-		</div>
-	);
+  return (
+    <div css={styles.wrapper}>
+      <div css={styles.container} onClick={onToggleDropdown}>
+        <div css={styles.border}>
+          <div
+            css={styles.label}
+            style={
+              !inputTextValue && !isActive
+                ? {}
+                : {
+                    position: 'absolute',
+                    top: '-8px',
+                    left: '5px',
+                    fontSize: '0.7rem',
+                    padding: `0 ${spacing.xs}`,
+                  }
+            }
+          >
+            {label}
+          </div>
+          <input
+            css={styles.input}
+            style={{ display: !!inputTextValue || isActive ? 'block' : 'none' }}
+            ref={inputRef}
+            type="text"
+            disabled={true}
+            value={inputTextValue}
+          />
+          {!showOptions && <ChevronIconUp css={styles.iconOpen} />}
+          {!!showOptions && <ChevronIconDown css={styles.iconClose} />}
+        </div>
+        {showOptions && (
+          <div css={styles.options}>
+            {options.map((option, index) => (
+              <div
+                key={`${label}-${index}`}
+                css={styles.option}
+                defaultValue={option.value}
+                onClick={() => onOptionSelected(option)}
+              >
+                {option.text}
+              </div>
+            ))}
+          </div>
+        )}
+      </div>
+      {!!helper && <p css={styles.helper}>{helper}</p>}
+    </div>
+  )
 }

packages/app/src/shared/components/Dropdown/index.ts

@@ -1,2 +1,2 @@
-import Dropdown from "./Dropdown";
-export default Dropdown;
+import Dropdown from './Dropdown'
+export default Dropdown

packages/app/src/shared/components/Gallery/Gallery.style.ts

@@ -1,27 +1,27 @@
-import { colors, spacing, typography } from "../../theme"
-import { makeStyles, StyleFn } from "../../utils"
+import { colors, spacing, typography } from '../../theme'
+import { makeStyles, StyleFn } from '../../utils'
 
 const container: StyleFn = () => ({
-	display: "flex",
-	flexDirection: "column"
+  display: 'flex',
+  flexDirection: 'column',
 })
 
 const headingContainer: StyleFn = () => ({
-	display: "flex",
-	justifyContent: "space-between",
-	alignItems: "baseline",
-	marginBottom: spacing.m,
-	"& > h4": {
-		fontSize: "1.25rem",
-		margin: 0
-	},
-	"& > button": {
-		fontSize: "0.875rem",
-		padding: 0
-	}
+  display: 'flex',
+  justifyContent: 'space-between',
+  alignItems: 'baseline',
+  marginBottom: spacing.m,
+  '& > h4': {
+    fontSize: '1.25rem',
+    margin: 0,
+  },
+  '& > button': {
+    fontSize: '0.875rem',
+    padding: 0,
+  },
 })
 
 export const useCSS = () => ({
-	container: makeStyles([container])({}),
-	headingContainer: makeStyles([headingContainer])({})
+  container: makeStyles([container])({}),
+  headingContainer: makeStyles([headingContainer])({}),
 })

packages/app/src/shared/components/Gallery/Gallery.tsx

@@ -1,44 +1,44 @@
-import React from "react";
-import { SerializedStyles, css } from "@emotion/core";
-import { useCSS } from "./Gallery.style";
-import Button from "../Button";
-import Carousel from "../Carousel";
+import React from 'react'
+import { SerializedStyles, css } from '@emotion/core'
+import { useCSS } from './Gallery.style'
+import Button from '../Button'
+import Carousel from '../Carousel'
 
 type GalleryProps = {
-	title: string;
-	action: string;
-	onClick: () => void;
-	children: React.ReactNode[];
-	containerCss: SerializedStyles;
-	leftControlCss: SerializedStyles;
-	rightControlCss: SerializedStyles;
-};
+  title: string
+  action: string
+  onClick: () => void
+  children: React.ReactNode[]
+  containerCss: SerializedStyles
+  leftControlCss: SerializedStyles
+  rightControlCss: SerializedStyles
+}
 
 const Gallery: React.FC<Partial<GalleryProps>> = ({
-	title,
-	onClick,
-	action = "",
-	children,
-	containerCss,
-	leftControlCss,
-	rightControlCss,
+  title,
+  onClick,
+  action = '',
+  children,
+  containerCss,
+  leftControlCss,
+  rightControlCss,
 }) => {
-	const styles = useCSS();
-	return (
-		<section css={[styles.container, containerCss]}>
-			<div css={styles.headingContainer}>
-				{title && <h4>{title}</h4>}
-				{action && (
-					<Button type="tertiary" onClick={onClick}>
-						{action}
-					</Button>
-				)}
-			</div>
-			<Carousel leftControlCss={leftControlCss} rightControlCss={rightControlCss}>
-				{children}
-			</Carousel>
-		</section>
-	);
-};
+  const styles = useCSS()
+  return (
+    <section css={[styles.container, containerCss]}>
+      <div css={styles.headingContainer}>
+        {title && <h4>{title}</h4>}
+        {action && (
+          <Button type="tertiary" onClick={onClick}>
+            {action}
+          </Button>
+        )}
+      </div>
+      <Carousel leftControlCss={leftControlCss} rightControlCss={rightControlCss}>
+        {children}
+      </Carousel>
+    </section>
+  )
+}
 
-export default Gallery;
+export default Gallery

packages/app/src/shared/components/Gallery/index.ts

@@ -1,3 +1,3 @@
-import Gallery from "./Gallery";
+import Gallery from './Gallery'
 
-export default Gallery;
+export default Gallery

packages/app/src/shared/components/GlobalStyle/GlobalStyle.tsx

@@ -1,34 +1,34 @@
-import { css, Global } from "@emotion/core";
-import emotionNormalize from "emotion-normalize";
-import { typography, colors } from "../../theme";
-import React from "react";
+import { css, Global } from '@emotion/core'
+import emotionNormalize from 'emotion-normalize'
+import { typography, colors } from '../../theme'
+import React from 'react'
 
 const globalStyles = css`
-	${emotionNormalize};
+  ${emotionNormalize};
 
-	body {
-		font-family: ${typography.fonts.base};
-		background: ${colors.black};
-		color: ${colors.gray[500]};
-	}
+  body {
+    font-family: ${typography.fonts.base};
+    background: ${colors.black};
+    color: ${colors.gray[500]};
+  }
 
-	*,
-	*::after,
-	*::before {
-		box-sizing: border-box;
-	}
+  *,
+  *::after,
+  *::before {
+    box-sizing: border-box;
+  }
 
-	h1,
-	h2,
-	h3,
-	h4,
-	h5,
-	h6 {
-		font-family: ${typography.fonts.headers};
-		color: ${colors.white};
-	}
-`;
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    font-family: ${typography.fonts.headers};
+    color: ${colors.white};
+  }
+`
 
-const GlobalStyle: React.FC = () => <Global styles={globalStyles} />;
+const GlobalStyle: React.FC = () => <Global styles={globalStyles} />
 
-export default GlobalStyle;
+export default GlobalStyle

packages/app/src/shared/components/GlobalStyle/index.ts

@@ -1,2 +1,2 @@
-import GlobalStyle from "./GlobalStyle";
-export default GlobalStyle;
+import GlobalStyle from './GlobalStyle'
+export default GlobalStyle

packages/app/src/shared/components/Grid/Grid.style.ts

@@ -1,21 +1,21 @@
-import { StyleFn, makeStyles } from "../../utils";
+import { StyleFn, makeStyles } from '../../utils'
 
 export type GridStyleProps = {
-	minItemWidth?: string | number;
-	maxItemWidth?: string | number;
-};
-const container: StyleFn = (_, { minItemWidth = "300", maxItemWidth }) => ({
-	display: "grid",
-	gridTemplateColumns: `repeat(auto-fit, minmax(${minItemWidth}px, ${maxItemWidth ? `${maxItemWidth}px` : "1fr"}))`,
-	gap: "30px",
-});
+  minItemWidth?: string | number
+  maxItemWidth?: string | number
+}
+const container: StyleFn = (_, { minItemWidth = '300', maxItemWidth }) => ({
+  display: 'grid',
+  gridTemplateColumns: `repeat(auto-fit, minmax(${minItemWidth}px, ${maxItemWidth ? `${maxItemWidth}px` : '1fr'}))`,
+  gap: '30px',
+})
 
 const item: StyleFn = () => ({
-	cursor: "pointer",
-	width: "100%",
-});
+  cursor: 'pointer',
+  width: '100%',
+})
 
 export const useCSS = (props: GridStyleProps) => ({
-	container: makeStyles([container])(props),
-	item: makeStyles([item])(props),
-});
+  container: makeStyles([container])(props),
+  item: makeStyles([item])(props),
+})

packages/app/src/shared/components/Grid/Grid.tsx

@@ -1,20 +1,20 @@
-import React from "react";
-import { GridStyleProps, useCSS } from "./Grid.style";
+import React from 'react'
+import { GridStyleProps, useCSS } from './Grid.style'
 
 type SectionProps = {
-	items?: React.ReactNode[];
-	className?: string;
-} & GridStyleProps;
+  items?: React.ReactNode[]
+  className?: string
+} & GridStyleProps
 
-export default function Grid({ items = [], className = "", ...styleProps }: SectionProps) {
-	let styles = useCSS(styleProps);
-	return (
-		<div css={styles.container} className={className}>
-			{items.map((item, index) => (
-				<div key={`grid-item-${index}`} css={styles.item}>
-					{item}
-				</div>
-			))}
-		</div>
-	);
+export default function Grid({ items = [], className = '', ...styleProps }: SectionProps) {
+  let styles = useCSS(styleProps)
+  return (
+    <div css={styles.container} className={className}>
+      {items.map((item, index) => (
+        <div key={`grid-item-${index}`} css={styles.item}>
+          {item}
+        </div>
+      ))}
+    </div>
+  )
 }

packages/app/src/shared/components/Grid/index.ts

@@ -1,2 +1,2 @@
-import Grid from "./Grid";
-export default Grid;
+import Grid from './Grid'
+export default Grid

packages/app/src/shared/components/HamburgerButton/HamburgerButton.style.ts

@@ -1,65 +1,63 @@
 // based on https://github.com/jonsuh/hamburgers licensed under MIT
 
-import { makeStyles, StyleFn } from "../../utils";
-import { colors } from "../../theme";
+import { makeStyles, StyleFn } from '../../utils'
+import { colors } from '../../theme'
 
 type HamburgerButtonStyleProps = {
-	active: boolean;
-};
+  active: boolean
+}
 
 const hamburgerBox: StyleFn = () => ({
-	width: "18px",
-	height: "12px",
-	display: "inline-block",
-	position: "relative",
-});
+  width: '18px',
+  height: '12px',
+  display: 'inline-block',
+  position: 'relative',
+})
 
 const hamburgerInner: StyleFn<HamburgerButtonStyleProps> = (_, { active }) => ({
-	display: "block",
-	top: "50%",
-	marginTop: "-1px",
+  display: 'block',
+  top: '50%',
+  marginTop: '-1px',
 
-	transitionDuration: "0.075s",
-	transitionDelay: active ? "0.12s" : "0",
-	transitionTimingFunction: active ? "cubic-bezier(0.215, 0.61, 0.355, 1)" : "cubic-bezier(0.55, 0.055, 0.675, 0.19)",
-	transform: active ? "rotate(45deg)" : "none",
-	"&, &::before, &::after": {
-		width: "18px",
-		height: "2px",
-		backgroundColor: colors.white,
-		position: "absolute",
-	},
-	"&::before, &::after": {
-		content: '""',
-		display: "block",
-	},
-	"&::before": {
-		top: active ? 0 : "-5px",
-		opacity: active ? 0 : 1,
-		transition: active
-			? "top 0.075s ease, opacity 0.075s 0.12s ease"
-			: "top 0.075s 0.12s ease, opacity 0.075s ease",
-	},
-	"&::after": {
-		bottom: active ? 0 : "-5px",
-		transform: active ? "rotate(-90deg)" : "none",
-		transition: active
-			? "bottom 0.075s ease, transform 0.075s 0.12s cubic-bezier(0.215, 0.61, 0.355, 1)"
-			: "bottom 0.075s 0.12s ease, transform 0.075s cubic-bezier(0.55, 0.055, 0.675, 0.19)",
-	},
-});
+  transitionDuration: '0.075s',
+  transitionDelay: active ? '0.12s' : '0',
+  transitionTimingFunction: active ? 'cubic-bezier(0.215, 0.61, 0.355, 1)' : 'cubic-bezier(0.55, 0.055, 0.675, 0.19)',
+  transform: active ? 'rotate(45deg)' : 'none',
+  '&, &::before, &::after': {
+    width: '18px',
+    height: '2px',
+    backgroundColor: colors.white,
+    position: 'absolute',
+  },
+  '&::before, &::after': {
+    content: '""',
+    display: 'block',
+  },
+  '&::before': {
+    top: active ? 0 : '-5px',
+    opacity: active ? 0 : 1,
+    transition: active ? 'top 0.075s ease, opacity 0.075s 0.12s ease' : 'top 0.075s 0.12s ease, opacity 0.075s ease',
+  },
+  '&::after': {
+    bottom: active ? 0 : '-5px',
+    transform: active ? 'rotate(-90deg)' : 'none',
+    transition: active
+      ? 'bottom 0.075s ease, transform 0.075s 0.12s cubic-bezier(0.215, 0.61, 0.355, 1)'
+      : 'bottom 0.075s 0.12s ease, transform 0.075s cubic-bezier(0.55, 0.055, 0.675, 0.19)',
+  },
+})
 
 const hamburger: StyleFn<HamburgerButtonStyleProps> = (_, { active }) => ({
-	padding: "3px",
-	display: "inline-block",
-	cursor: "pointer",
-	"&:hover": {
-		opacity: 0.7,
-	},
-});
+  padding: '3px',
+  display: 'inline-block',
+  cursor: 'pointer',
+  '&:hover': {
+    opacity: 0.7,
+  },
+})
 
 export const useCSS = (props: HamburgerButtonStyleProps) => ({
-	hamburgerBox: makeStyles([hamburgerBox])(props),
-	hamburgerInner: makeStyles([hamburgerInner])(props),
-	hamburger: makeStyles([hamburger])(props),
-});
+  hamburgerBox: makeStyles([hamburgerBox])(props),
+  hamburgerInner: makeStyles([hamburgerInner])(props),
+  hamburger: makeStyles([hamburger])(props),
+})

packages/app/src/shared/components/HamburgerButton/HamburgerButton.tsx

@@ -1,23 +1,23 @@
-import React from "react";
-import { SerializedStyles } from "@emotion/core";
-import { useCSS } from "./HamburgerButton.style";
+import React from 'react'
+import { SerializedStyles } from '@emotion/core'
+import { useCSS } from './HamburgerButton.style'
 
 type HamburgerButtonProps = {
-	active: boolean;
-	onClick: (e: React.MouseEvent<HTMLElement>) => void;
-	outerStyles?: SerializedStyles;
-};
+  active: boolean
+  onClick: (e: React.MouseEvent<HTMLElement>) => void
+  outerStyles?: SerializedStyles
+}
 
 const HamburgerButton: React.FC<HamburgerButtonProps> = ({ active, onClick, outerStyles }) => {
-	const styles = useCSS({ active });
+  const styles = useCSS({ active })
 
-	return (
-		<div css={[styles.hamburger, outerStyles]} onClick={onClick}>
-			<span css={styles.hamburgerBox}>
-				<span css={styles.hamburgerInner} />
-			</span>
-		</div>
-	);
-};
+  return (
+    <div css={[styles.hamburger, outerStyles]} onClick={onClick}>
+      <span css={styles.hamburgerBox}>
+        <span css={styles.hamburgerInner} />
+      </span>
+    </div>
+  )
+}
 
-export default HamburgerButton;
+export default HamburgerButton

packages/app/src/shared/components/HamburgerButton/index.ts

@@ -1,3 +1,3 @@
-import HamburgerButton from "./HamburgerButton";
+import HamburgerButton from './HamburgerButton'
 
-export default HamburgerButton;
+export default HamburgerButton

packages/app/src/shared/components/Header/Header.style.ts

@@ -1,44 +1,44 @@
-import { makeStyles, StyleFn } from "../../utils"
-import { typography, colors, breakpoints, spacing } from "../../theme"
+import { makeStyles, StyleFn } from '../../utils'
+import { typography, colors, breakpoints, spacing } from '../../theme'
 
 export type HeaderStyleProps = {
-	backgroundImg?: string
+  backgroundImg?: string
 }
 
 const container: StyleFn = (_, { backgroundImg }) => ({
-	textAlign: "left",
-	color: colors.white,
-	lineHeight: 1.33,
-	height: 584,
-	backgroundImage: `linear-gradient(0deg, black 0%, rgba(0,0,0,0) 100%), url(${backgroundImg})`,
-	backgroundSize: "cover",
-	backgroundPosition: "center",
-	display: "flex",
-	flexDirection: "column",
-	justifyContent: "flex-end"
+  textAlign: 'left',
+  color: colors.white,
+  lineHeight: 1.33,
+  height: 584,
+  backgroundImage: `linear-gradient(0deg, black 0%, rgba(0,0,0,0) 100%), url(${backgroundImg})`,
+  backgroundSize: 'cover',
+  backgroundPosition: 'center',
+  display: 'flex',
+  flexDirection: 'column',
+  justifyContent: 'flex-end',
 })
 
 const content: StyleFn = () => ({
-	marginLeft: spacing.xxl,
-	marginBottom: 85,
-	maxWidth: "39.25rem"
+  marginLeft: spacing.xxl,
+  marginBottom: 85,
+  maxWidth: '39.25rem',
 })
 
 const title: StyleFn = () => ({
-	lineHeight: 1.05,
-	letterSpacing: "-0.01em",
-	fontWeight: "bold",
-	margin: 0
+  lineHeight: 1.05,
+  letterSpacing: '-0.01em',
+  fontWeight: 'bold',
+  margin: 0,
 })
 
 const subtitle: StyleFn = () => ({
-	maxWidth: "34rem",
-	marginTop: spacing.m
+  maxWidth: '34rem',
+  marginTop: spacing.m,
 })
 
 export const useCSS = (props: HeaderStyleProps) => ({
-	container: makeStyles([container])(props),
-	content: makeStyles([content])(props),
-	title: makeStyles([title])(props),
-	subtitle: makeStyles([subtitle])(props)
+  container: makeStyles([container])(props),
+  content: makeStyles([content])(props),
+  title: makeStyles([title])(props),
+  subtitle: makeStyles([subtitle])(props),
 })

packages/app/src/shared/components/Header/Header.tsx

@@ -1,24 +1,24 @@
-import React from "react";
-import { SerializedStyles } from "@emotion/core";
-import { useCSS, HeaderStyleProps } from "./Header.style";
+import React from 'react'
+import { SerializedStyles } from '@emotion/core'
+import { useCSS, HeaderStyleProps } from './Header.style'
 
 type HeaderProps = {
-	title: string;
-	subtitle: string;
-	backgroundImg: string;
-	containerCss: SerializedStyles;
-	children: React.ReactNode;
-} & HeaderStyleProps;
+  title: string
+  subtitle: string
+  backgroundImg: string
+  containerCss: SerializedStyles
+  children: React.ReactNode
+} & HeaderStyleProps
 
 export default function Header({ title, subtitle, children, backgroundImg, containerCss }: Partial<HeaderProps>) {
-	const styles = useCSS({ backgroundImg });
-	return (
-		<section css={[styles.container, containerCss]}>
-			<div css={styles.content}>
-				<h1 css={styles.title}>{title}</h1>
-				{subtitle && <p css={styles.subtitle}>{subtitle}</p>}
-				{children}
-			</div>
-		</section>
-	);
+  const styles = useCSS({ backgroundImg })
+  return (
+    <section css={[styles.container, containerCss]}>
+      <div css={styles.content}>
+        <h1 css={styles.title}>{title}</h1>
+        {subtitle && <p css={styles.subtitle}>{subtitle}</p>}
+        {children}
+      </div>
+    </section>
+  )
 }

packages/app/src/shared/components/Header/index.ts

@@ -1,2 +1,2 @@
-import Header from "./Header";
-export default Header;
+import Header from './Header'
+export default Header

packages/app/src/shared/components/Link/Link.style.ts

@@ -1,23 +1,23 @@
-import { typography, colors } from "../../theme";
-import { StyleFn, makeStyles } from "../../utils";
+import { typography, colors } from '../../theme'
+import { StyleFn, makeStyles } from '../../utils'
 
-export type CustomLinkStyleProps = {};
+export type CustomLinkStyleProps = {}
 
 const regular: StyleFn = () => ({
-	fontFamily: typography.fonts.base,
-	fontSize: typography.sizes.overhead,
-	color: colors.blue[400],
-	textDecoration: "none",
-	cursor: "pointer",
-});
+  fontFamily: typography.fonts.base,
+  fontSize: typography.sizes.overhead,
+  color: colors.blue[400],
+  textDecoration: 'none',
+  cursor: 'pointer',
+})
 const disabled: StyleFn = () => ({
-	fontFamily: typography.fonts.base,
-	fontSize: typography.sizes.overhead,
-	color: colors.gray[200],
-	textDecoration: "none",
-	cursor: "not-allowed",
-});
+  fontFamily: typography.fonts.base,
+  fontSize: typography.sizes.overhead,
+  color: colors.gray[200],
+  textDecoration: 'none',
+  cursor: 'not-allowed',
+})
 export const useCSS = (props: CustomLinkStyleProps) => ({
-	regular: makeStyles([regular])(props),
-	disabled: makeStyles([disabled])(props),
-});
+  regular: makeStyles([regular])(props),
+  disabled: makeStyles([disabled])(props),
+})

packages/app/src/shared/components/Link/Link.tsx

@@ -1,48 +1,48 @@
-import React, { ReactNode, ReactChild } from "react";
-import { Link } from "@reach/router";
-import { CustomLinkStyleProps, useCSS } from "./Link.style";
+import React, { ReactNode, ReactChild } from 'react'
+import { Link } from '@reach/router'
+import { CustomLinkStyleProps, useCSS } from './Link.style'
 
 type CustomLinkProps = {
-	children: ReactChild;
-	to: string;
-	disabled?: boolean;
-	className?: string;
-	replace?: boolean;
-	ref?: React.Ref<HTMLAnchorElement>;
-	innerRef?: React.Ref<HTMLAnchorElement>;
-	getProps?: any;
-	state?: any;
-	onClick?: (e: React.MouseEvent<HTMLDivElement>) => void;
-} & CustomLinkStyleProps;
+  children: ReactChild
+  to: string
+  disabled?: boolean
+  className?: string
+  replace?: boolean
+  ref?: React.Ref<HTMLAnchorElement>
+  innerRef?: React.Ref<HTMLAnchorElement>
+  getProps?: any
+  state?: any
+  onClick?: (e: React.MouseEvent<HTMLDivElement>) => void
+} & CustomLinkStyleProps
 
 export default function CustomLink({
-	children,
-	to = "",
-	disabled = false,
-	className = "",
-	replace = false,
-	ref = () => {},
-	innerRef = () => {},
-	getProps = () => {},
-	state = null,
-	onClick,
-	...props
+  children,
+  to = '',
+  disabled = false,
+  className = '',
+  replace = false,
+  ref = () => {},
+  innerRef = () => {},
+  getProps = () => {},
+  state = null,
+  onClick,
+  ...props
 }: CustomLinkProps) {
-	let styles = useCSS(props);
+  let styles = useCSS(props)
 
-	if (disabled) return <label css={styles.disabled}>{children}</label>;
-	return (
-		<Link
-			to={to}
-			css={styles.regular}
-			className={className}
-			replace={replace}
-			ref={ref}
-			innerRef={innerRef}
-			getProps={getProps}
-			state={state}
-		>
-			{children}
-		</Link>
-	);
+  if (disabled) return <label css={styles.disabled}>{children}</label>
+  return (
+    <Link
+      to={to}
+      css={styles.regular}
+      className={className}
+      replace={replace}
+      ref={ref}
+      innerRef={innerRef}
+      getProps={getProps}
+      state={state}
+    >
+      {children}
+    </Link>
+  )
 }

packages/app/src/shared/components/Link/index.ts

@@ -1,2 +1,2 @@
-import Link from "./Link";
-export default Link;
+import Link from './Link'
+export default Link

packages/app/src/shared/components/NavButton/NavButton.style.ts

@@ -1,42 +1,42 @@
-import { typography, colors } from "../../theme"
-import { StyleFn, makeStyles } from "../../utils"
+import { typography, colors } from '../../theme'
+import { StyleFn, makeStyles } from '../../utils'
 
 export type NavButtonStyleProps = {
-	type?: "primary" | "secondary"
+  type?: 'primary' | 'secondary'
 }
 
 const baseStyles: StyleFn = () => ({
-	border: 0,
-	color: colors.white,
-	textAlign: "center",
-	display: "inline-block",
-	cursor: "default",
-	fontFamily: typography.fonts.base,
-	fontWeight: typography.weights.medium,
-	fontSize: typography.sizes.subtitle1,
-	lineHeight: "50px",
-	"&:hover": {
-		borderColor: colors.blue[700]
-	},
-	"&:active": {
-		borderColor: colors.blue[900]
-	},
-	"&::selection": {
-		background: "transparent"
-	}
+  border: 0,
+  color: colors.white,
+  textAlign: 'center',
+  display: 'inline-block',
+  cursor: 'default',
+  fontFamily: typography.fonts.base,
+  fontWeight: typography.weights.medium,
+  fontSize: typography.sizes.subtitle1,
+  lineHeight: '50px',
+  '&:hover': {
+    borderColor: colors.blue[700],
+  },
+  '&:active': {
+    borderColor: colors.blue[900],
+  },
+  '&::selection': {
+    background: 'transparent',
+  },
 })
 
-const colorFromType: StyleFn = (styles, { type = "primary" }) => ({
-	...styles,
-	backgroundColor: type === "primary" ? colors.blue[700] : colors.black,
-	"&:hover": {
-		backgroundColor: type === "primary" ? colors.blue[700] : colors.black,
-		color: type === "primary" ? colors.white : colors.blue[300]
-	},
-	"&:active": {
-		backgroundColor: type === "primary" ? colors.blue[900] : colors.black,
-		color: type === "primary" ? colors.white : colors.blue[700]
-	}
+const colorFromType: StyleFn = (styles, { type = 'primary' }) => ({
+  ...styles,
+  backgroundColor: type === 'primary' ? colors.blue[700] : colors.black,
+  '&:hover': {
+    backgroundColor: type === 'primary' ? colors.blue[700] : colors.black,
+    color: type === 'primary' ? colors.white : colors.blue[300],
+  },
+  '&:active': {
+    backgroundColor: type === 'primary' ? colors.blue[900] : colors.black,
+    color: type === 'primary' ? colors.white : colors.blue[700],
+  },
 })
 
 export const useCSS = (props: NavButtonStyleProps) => makeStyles([baseStyles, colorFromType])(props)

packages/app/src/shared/components/NavButton/NavButton.tsx

@@ -1,19 +1,19 @@
-import React from "react";
-import { SerializedStyles } from "@emotion/core";
-import { NavButtonStyleProps, useCSS } from "./NavButton.style";
-import { ChevronLeftIcon, ChevronRightIcon } from "../../icons";
+import React from 'react'
+import { SerializedStyles } from '@emotion/core'
+import { NavButtonStyleProps, useCSS } from './NavButton.style'
+import { ChevronLeftIcon, ChevronRightIcon } from '../../icons'
 
 type NavButtonProps = {
-	direction: "right" | "left";
-	outerCss: SerializedStyles | SerializedStyles[] | (SerializedStyles | undefined) | (SerializedStyles | undefined)[];
-	onClick: (e: React.MouseEvent<HTMLButtonElement>) => void;
-} & NavButtonStyleProps;
+  direction: 'right' | 'left'
+  outerCss: SerializedStyles | SerializedStyles[] | (SerializedStyles | undefined) | (SerializedStyles | undefined)[]
+  onClick: (e: React.MouseEvent<HTMLButtonElement>) => void
+} & NavButtonStyleProps
 
-export default function NavButton({ direction = "right", onClick, outerCss, ...styleProps }: Partial<NavButtonProps>) {
-	let styles = useCSS(styleProps);
-	return (
-		<button css={[styles, outerCss]} onClick={onClick}>
-			{direction === "right" ? <ChevronRightIcon /> : <ChevronLeftIcon />}
-		</button>
-	);
+export default function NavButton({ direction = 'right', onClick, outerCss, ...styleProps }: Partial<NavButtonProps>) {
+  let styles = useCSS(styleProps)
+  return (
+    <button css={[styles, outerCss]} onClick={onClick}>
+      {direction === 'right' ? <ChevronRightIcon /> : <ChevronLeftIcon />}
+    </button>
+  )
 }

packages/app/src/shared/components/NavButton/index.ts

@@ -1,2 +1,2 @@
-import NavButton from "./NavButton";
-export default NavButton;
+import NavButton from './NavButton'
+export default NavButton

packages/app/src/shared/components/RadioButton/RadioButton.style.ts

@@ -1,115 +1,109 @@
-import { StyleFn, makeStyles } from "../../utils"
-import { typography, colors, spacing } from "../../theme"
-import { CSSProperties } from "react"
+import { StyleFn, makeStyles } from '../../utils'
+import { typography, colors, spacing } from '../../theme'
+import { CSSProperties } from 'react'
 
 export type RadioButtonStyleProps = {
-	selected?: boolean
-	disabled?: boolean
-	error?: boolean
-	position?: "end" | "start" | "top" | "bottom"
+  selected?: boolean
+  disabled?: boolean
+  error?: boolean
+  position?: 'end' | 'start' | 'top' | 'bottom'
 }
 const container: StyleFn = (_, { position }) => ({
-	fontFamily: typography.fonts.base,
-	display: position === "bottom" || position === "bottom" ? "inline-block" : "inline-flex",
-	alignItems: "center",
-	"&:focus": {
-		outline: "none"
-	}
+  fontFamily: typography.fonts.base,
+  display: position === 'bottom' || position === 'bottom' ? 'inline-block' : 'inline-flex',
+  alignItems: 'center',
+  '&:focus': {
+    outline: 'none',
+  },
 })
 
 const outerDot: StyleFn = (_, { position, disabled }) => ({
-	width: spacing.xxl,
-	height: spacing.xxl,
-	borderRadius: "50%",
-	position: "relative",
-	margin: position === "bottom" ? `0 auto ${spacing.xs}` : position === "top" ? `${spacing.xs} auto 0` : "",
-	"&:hover": {
-		backgroundColor: disabled ? "none" : colors.gray[50]
-	},
-	"&:active": {
-		backgroundColor: disabled ? "none" : colors.gray[100]
-	},
-	"&:focus": {
-		backgroundColor: disabled ? "none" : colors.blue[100],
-		outline: "none"
-	}
+  width: spacing.xxl,
+  height: spacing.xxl,
+  borderRadius: '50%',
+  position: 'relative',
+  margin: position === 'bottom' ? `0 auto ${spacing.xs}` : position === 'top' ? `${spacing.xs} auto 0` : '',
+  '&:hover': {
+    backgroundColor: disabled ? 'none' : colors.gray[50],
+  },
+  '&:active': {
+    backgroundColor: disabled ? 'none' : colors.gray[100],
+  },
+  '&:focus': {
+    backgroundColor: disabled ? 'none' : colors.blue[100],
+    outline: 'none',
+  },
 })
 
 const dot: StyleFn = (_, { disabled, selected, error }) => {
-	return {
-		width: spacing.m,
-		height: spacing.m,
-		borderWidth: 1,
-		borderColor: disabled
-			? colors.gray[200]
-			: error
-			? colors.error
-			: selected
-			? colors.blue[500]
-			: colors.gray[300],
-		borderStyle: "solid",
-		borderRadius: "50%",
-		position: "absolute",
-		top: "7px",
-		left: "7px",
-		"&:focus": {
-			borderColor: disabled ? colors.gray[200] : colors.gray[700]
-		},
-		"&:active": {
-			borderColor: disabled ? colors.gray[200] : colors.gray[700]
-		}
-	}
+  return {
+    width: spacing.m,
+    height: spacing.m,
+    borderWidth: 1,
+    borderColor: disabled ? colors.gray[200] : error ? colors.error : selected ? colors.blue[500] : colors.gray[300],
+    borderStyle: 'solid',
+    borderRadius: '50%',
+    position: 'absolute',
+    top: '7px',
+    left: '7px',
+    '&:focus': {
+      borderColor: disabled ? colors.gray[200] : colors.gray[700],
+    },
+    '&:active': {
+      borderColor: disabled ? colors.gray[200] : colors.gray[700],
+    },
+  }
 }
 
 const BackgroundFromProps: StyleFn = (styles = {}, { disabled, selected, error }) => {
-	let key = selected ? `backgroundImage` : `backgroundColor`
-	const SELECTED_ERROR = `repeating-radial-gradient(circle, ${colors.error} 0px, ${colors.error} 3px, transparent 3px, transparent 6px, ${colors.error} 6px, ${colors.error} 8px)`
-	const SELECTED_DISABLED = `repeating-radial-gradient(circle, ${colors.gray[200]} 0px, ${colors.gray[200]} 3px, transparent 3px, transparent 6px, ${colors.gray[200]} 6px, ${colors.gray[200]} 8px)`
-	const SELECTED_DEFAULT = `repeating-radial-gradient(circle, ${colors.blue[500]} 0px, ${colors.blue[500]} 3px, transparent 3px, transparent 6px, ${colors.blue[500]} 6px, ${colors.blue[500]} 8px)`
-	const UNSELECTED_DISABLED = colors.gray[50]
+  let key = selected ? `backgroundImage` : `backgroundColor`
+  const SELECTED_ERROR = `repeating-radial-gradient(circle, ${colors.error} 0px, ${colors.error} 3px, transparent 3px, transparent 6px, ${colors.error} 6px, ${colors.error} 8px)`
+  const SELECTED_DISABLED = `repeating-radial-gradient(circle, ${colors.gray[200]} 0px, ${colors.gray[200]} 3px, transparent 3px, transparent 6px, ${colors.gray[200]} 6px, ${colors.gray[200]} 8px)`
+  const SELECTED_DEFAULT = `repeating-radial-gradient(circle, ${colors.blue[500]} 0px, ${colors.blue[500]} 3px, transparent 3px, transparent 6px, ${colors.blue[500]} 6px, ${colors.blue[500]} 8px)`
+  const UNSELECTED_DISABLED = colors.gray[50]
 
-	let value =
-		selected && error
-			? SELECTED_ERROR
-			: selected && disabled
-			? SELECTED_DISABLED
-			: selected
-			? SELECTED_DEFAULT
-			: disabled
-			? UNSELECTED_DISABLED
-			: styles[key as keyof CSSProperties]
-	return {
-		...styles,
-		[key]: value
-	}
+  let value =
+    selected && error
+      ? SELECTED_ERROR
+      : selected && disabled
+      ? SELECTED_DISABLED
+      : selected
+      ? SELECTED_DEFAULT
+      : disabled
+      ? UNSELECTED_DISABLED
+      : styles[key as keyof CSSProperties]
+  return {
+    ...styles,
+    [key]: value,
+  }
 }
 
 const label: StyleFn = (_, { position }) => {
-	const key = position === "end" ? "margin-left" : position === "start" ? "margin-right" : "margin"
-	const value =
-		key === "margin-left" || key === "margin-right"
-			? spacing.xs
-			: position === "bottom"
-			? `0 auto ${spacing.xs}`
-			: `${spacing.xs} auto 0`
+  const key = position === 'end' ? 'margin-left' : position === 'start' ? 'margin-right' : 'margin'
+  const value =
+    key === 'margin-left' || key === 'margin-right'
+      ? spacing.xs
+      : position === 'bottom'
+      ? `0 auto ${spacing.xs}`
+      : `${spacing.xs} auto 0`
 
-	return {
-		color: colors.white,
-		[key]: value
-	}
+  return {
+    color: colors.white,
+    [key]: value,
+  }
 }
 
 export const useCSS = ({
-	selected = false,
-	disabled = false,
-	error = false,
-	position = "end"
+  selected = false,
+  disabled = false,
+  error = false,
+  position = 'end',
 }: RadioButtonStyleProps) => {
-	const props = { selected, disabled, error, position }
-	return {
-		container: makeStyles([container])(props),
-		outterDot: makeStyles([outerDot])(props),
-		dot: makeStyles([dot, BackgroundFromProps])(props),
-		label: makeStyles([label])(props)
-	}
+  const props = { selected, disabled, error, position }
+  return {
+    container: makeStyles([container])(props),
+    outterDot: makeStyles([outerDot])(props),
+    dot: makeStyles([dot, BackgroundFromProps])(props),
+    label: makeStyles([label])(props),
+  }
 }

packages/app/src/shared/components/RadioButton/RadioButton.tsx

@@ -1,27 +1,27 @@
-import React, { useState } from "react";
-import { useCSS, RadioButtonStyleProps } from "./RadioButton.style";
+import React, { useState } from 'react'
+import { useCSS, RadioButtonStyleProps } from './RadioButton.style'
 
 type RadioButtonProps = {
-	label?: string;
-	onClick?: (e: React.MouseEvent<HTMLDivElement>) => void;
-} & RadioButtonStyleProps;
+  label?: string
+  onClick?: (e: React.MouseEvent<HTMLDivElement>) => void
+} & RadioButtonStyleProps
 
 export default function RadioButton({
-	label = "",
-	position = "end",
-	disabled = false,
-	onClick = () => {},
-	...styleProps
+  label = '',
+  position = 'end',
+  disabled = false,
+  onClick = () => {},
+  ...styleProps
 }: RadioButtonProps) {
-	const styles = useCSS({ disabled, position, ...styleProps });
+  const styles = useCSS({ disabled, position, ...styleProps })
 
-	return (
-		<div css={styles.container} onClick={disabled ? () => {} : onClick}>
-			{(position === "start" || position === "top") && <label css={styles.label}>{label}</label>}
-			<div css={styles.outterDot}>
-				<div css={styles.dot}></div>
-			</div>
-			{(position === "end" || position === "bottom") && <label css={styles.label}>{label}</label>}
-		</div>
-	);
+  return (
+    <div css={styles.container} onClick={disabled ? () => {} : onClick}>
+      {(position === 'start' || position === 'top') && <label css={styles.label}>{label}</label>}
+      <div css={styles.outterDot}>
+        <div css={styles.dot}></div>
+      </div>
+      {(position === 'end' || position === 'bottom') && <label css={styles.label}>{label}</label>}
+    </div>
+  )
 }

packages/app/src/shared/components/RadioButton/index.ts

@@ -1,2 +1,2 @@
-import RadioButton from "./RadioButton";
-export default RadioButton;
+import RadioButton from './RadioButton'
+export default RadioButton

packages/app/src/shared/components/SeriesPreview/SeriesPreview.style.tsx

@@ -1,53 +1,53 @@
-import { typography, colors, spacing } from "../../theme";
-import { StyleFn, makeStyles } from "../../utils";
+import { typography, colors, spacing } from '../../theme'
+import { StyleFn, makeStyles } from '../../utils'
 
 export type SeriesPreviewStyleProps = {
-	width?: number;
-	height?: number;
-	poster?: string;
-};
+  width?: number
+  height?: number
+  poster?: string
+}
 const container: StyleFn = (_, { poster, width = 200, height = 396 }) => ({
-	minHeight: height,
-	minWidth: width,
-	backgroundImage: poster
-		? ` linear-gradient(to bottom, transparent, ${colors.black}), url(${poster})`
-		: `linear-gradient(${colors.gray[400]}, ${colors.gray[700]})`,
-	backgroundSize: "cover",
-	display: "flex",
-	alignItems: "flex-end",
-	justifyContent: "center",
-	color: colors.gray[300],
-});
+  minHeight: height,
+  minWidth: width,
+  backgroundImage: poster
+    ? ` linear-gradient(to bottom, transparent, ${colors.black}), url(${poster})`
+    : `linear-gradient(${colors.gray[400]}, ${colors.gray[700]})`,
+  backgroundSize: 'cover',
+  display: 'flex',
+  alignItems: 'flex-end',
+  justifyContent: 'center',
+  color: colors.gray[300],
+})
 
 const info: StyleFn = () => ({
-	display: "flex",
-	flexDirection: "column",
-	justifyContent: "center",
-	alignItems: "center",
-	marginBottom: spacing.l,
-});
+  display: 'flex',
+  flexDirection: 'column',
+  justifyContent: 'center',
+  alignItems: 'center',
+  marginBottom: spacing.l,
+})
 
 const text: StyleFn = () => ({
-	display: "flex",
-	flexDirection: "column",
-	marginTop: spacing.xs,
-	"& > h4": {
-		margin: 0,
-	},
-	"& > span": {
-		marginTop: spacing.xxs,
-		fontSize: typography.sizes.subtitle2,
-	},
-});
+  display: 'flex',
+  flexDirection: 'column',
+  marginTop: spacing.xs,
+  '& > h4': {
+    margin: 0,
+  },
+  '& > span': {
+    marginTop: spacing.xxs,
+    fontSize: typography.sizes.subtitle2,
+  },
+})
 
 const avatar: StyleFn = () => ({
-	width: 46,
-	height: 46,
-});
+  width: 46,
+  height: 46,
+})
 
 export const useCSS = (props: SeriesPreviewStyleProps) => ({
-	container: makeStyles([container])(props),
-	info: makeStyles([info])(props),
-	text: makeStyles([text])(props),
-	avatar: makeStyles([avatar])(props),
-});
+  container: makeStyles([container])(props),
+  info: makeStyles([info])(props),
+  text: makeStyles([text])(props),
+  avatar: makeStyles([avatar])(props),
+})

packages/app/src/shared/components/SeriesPreview/SeriesPreview.tsx

@@ -1,34 +1,34 @@
-import React from "react";
-import { SerializedStyles } from "@emotion/core";
-import { useCSS, SeriesPreviewStyleProps } from "./SeriesPreview.style";
-import Avatar from "../Avatar/Avatar";
+import React from 'react'
+import { SerializedStyles } from '@emotion/core'
+import { useCSS, SeriesPreviewStyleProps } from './SeriesPreview.style'
+import Avatar from '../Avatar/Avatar'
 
 type SeriesPreviewProps = {
-	series: string;
-	channel: string;
-	channelAvatar: string;
-	poster: string;
-	outerCss: SerializedStyles;
-} & SeriesPreviewStyleProps;
+  series: string
+  channel: string
+  channelAvatar: string
+  poster: string
+  outerCss: SerializedStyles
+} & SeriesPreviewStyleProps
 
 export default function SeriesPreview({
-	series,
-	channel,
-	channelAvatar,
-	poster,
-	outerCss,
-	...styleProps
+  series,
+  channel,
+  channelAvatar,
+  poster,
+  outerCss,
+  ...styleProps
 }: Partial<SeriesPreviewProps>) {
-	const styles = useCSS({ poster, ...styleProps });
-	return (
-		<article css={[styles.container, outerCss]}>
-			<div css={styles.info}>
-				<Avatar img={channelAvatar} outerStyles={styles.avatar} />
-				<div css={styles.text}>
-					<h4>{series}</h4>
-					<span>{channel}</span>
-				</div>
-			</div>
-		</article>
-	);
+  const styles = useCSS({ poster, ...styleProps })
+  return (
+    <article css={[styles.container, outerCss]}>
+      <div css={styles.info}>
+        <Avatar img={channelAvatar} outerStyles={styles.avatar} />
+        <div css={styles.text}>
+          <h4>{series}</h4>
+          <span>{channel}</span>
+        </div>
+      </div>
+    </article>
+  )
 }

packages/app/src/shared/components/SeriesPreview/index.ts

@@ -1,2 +1,2 @@
-import SeriesPreview from "./SeriesPreview";
-export default SeriesPreview;
+import SeriesPreview from './SeriesPreview'
+export default SeriesPreview

packages/app/src/shared/components/Sidenav/Sidenav.style.ts

@@ -1,102 +1,102 @@
-import theme from "../../theme";
-import { makeStyles, StyleFn } from "../../utils";
+import theme from '../../theme'
+import { makeStyles, StyleFn } from '../../utils'
 
-export const SIDENAV_WIDTH = 56;
-export const EXPANDED_SIDENAV_WIDTH = 360;
+export const SIDENAV_WIDTH = 56
+export const EXPANDED_SIDENAV_WIDTH = 360
 
 type SidenavStyleProps = {
-	expanded: boolean;
-};
+  expanded: boolean
+}
 
 const nav: StyleFn = () => ({
-	position: "fixed",
-	top: 0,
-	left: 0,
-	bottom: 0,
-	zIndex: 100,
+  position: 'fixed',
+  top: 0,
+  left: 0,
+  bottom: 0,
+  zIndex: 100,
 
-	overflow: "hidden",
+  overflow: 'hidden',
 
-	padding: `${theme.spacing.xxl} ${theme.spacing.m}`,
+  padding: `${theme.spacing.xxl} ${theme.spacing.m}`,
 
-	display: "flex",
-	flexDirection: "column",
-	alignItems: "flex-start",
+  display: 'flex',
+  flexDirection: 'column',
+  alignItems: 'flex-start',
 
-	backgroundColor: theme.colors.blue[700],
-	color: theme.colors.white,
-});
+  backgroundColor: theme.colors.blue[700],
+  color: theme.colors.white,
+})
 
 const expandButton: StyleFn = () => ({
-	padding: "7px",
-	margin: "-4px",
-});
+  padding: '7px',
+  margin: '-4px',
+})
 
 const drawerOverlay: StyleFn<SidenavStyleProps> = (_, { expanded }) => ({
-	position: "fixed",
-	top: 0,
-	right: 0,
-	bottom: 0,
-	left: 0,
-	zIndex: 99,
+  position: 'fixed',
+  top: 0,
+  right: 0,
+  bottom: 0,
+  left: 0,
+  zIndex: 99,
 
-	display: expanded ? "block" : "none",
+  display: expanded ? 'block' : 'none',
 
-	backgroundColor: "rgba(0, 0, 0, 0.5)",
-});
+  backgroundColor: 'rgba(0, 0, 0, 0.5)',
+})
 
 const navItemsWrapper: StyleFn = () => ({
-	marginTop: "90px",
-});
+  marginTop: '90px',
+})
 
 const navItemContainer: StyleFn = () => ({
-	":not(:first-child)": {
-		marginTop: theme.spacing.xxxl,
-	},
-	display: "flex",
-	flexDirection: "column",
-});
+  ':not(:first-child)': {
+    marginTop: theme.spacing.xxxl,
+  },
+  display: 'flex',
+  flexDirection: 'column',
+})
 
 const navItem: StyleFn = () => ({
-	display: "flex",
-	alignItems: "center",
-	"> span": {
-		marginLeft: theme.spacing.xxl,
-		fontWeight: "bold",
-		fontFamily: theme.typography.fonts.headers,
-		fontSize: theme.typography.sizes.h5,
-		lineHeight: 1,
-	},
-});
+  display: 'flex',
+  alignItems: 'center',
+  '> span': {
+    marginLeft: theme.spacing.xxl,
+    fontWeight: 'bold',
+    fontFamily: theme.typography.fonts.headers,
+    fontSize: theme.typography.sizes.h5,
+    lineHeight: 1,
+  },
+})
 
 const navSubitemsWrapper: StyleFn = () => ({
-	paddingLeft: `calc(${theme.typography.sizes.icon.xlarge} + ${theme.spacing.xxl})`,
-	overflow: "hidden",
-	"> div": {
-		display: "flex",
-		flexDirection: "column",
-	},
-});
+  paddingLeft: `calc(${theme.typography.sizes.icon.xlarge} + ${theme.spacing.xxl})`,
+  overflow: 'hidden',
+  '> div': {
+    display: 'flex',
+    flexDirection: 'column',
+  },
+})
 
 const navSubitem: StyleFn = () => ({
-	fontSize: theme.typography.sizes.body2,
-	fontFamily: theme.typography.fonts.base,
-	marginTop: theme.spacing.xxl,
-	":first-child": {
-		marginTop: theme.spacing.xl,
-	},
-});
+  fontSize: theme.typography.sizes.body2,
+  fontFamily: theme.typography.fonts.base,
+  marginTop: theme.spacing.xxl,
+  ':first-child': {
+    marginTop: theme.spacing.xl,
+  },
+})
 
 export const useSidenavCSS = (props: SidenavStyleProps) => ({
-	nav: makeStyles([nav])(props),
-	expandButton: makeStyles([expandButton])(props),
-	drawerOverlay: makeStyles([drawerOverlay])(props),
-	navItemsWrapper: makeStyles([navItemsWrapper])(props),
-});
+  nav: makeStyles([nav])(props),
+  expandButton: makeStyles([expandButton])(props),
+  drawerOverlay: makeStyles([drawerOverlay])(props),
+  navItemsWrapper: makeStyles([navItemsWrapper])(props),
+})
 
 export const useNavItemCSS = (props: SidenavStyleProps) => ({
-	navItemContainer: makeStyles([navItemContainer])(props),
-	navItem: makeStyles([navItem])(props),
-	navSubitemsWrapper: makeStyles([navSubitemsWrapper])(props),
-	navSubitem: makeStyles([navSubitem])(props),
-});
+  navItemContainer: makeStyles([navItemContainer])(props),
+  navItem: makeStyles([navItem])(props),
+  navSubitemsWrapper: makeStyles([navSubitemsWrapper])(props),
+  navSubitem: makeStyles([navSubitem])(props),
+})

packages/app/src/shared/components/Sidenav/Sidenav.tsx

@@ -1,94 +1,83 @@
-import React, { useState } from "react";
-import { animated, useSpring, useTransition } from "react-spring";
-import useResizeObserver from "use-resize-observer";
-import HamburgerButton from "../HamburgerButton";
-import { EXPANDED_SIDENAV_WIDTH, SIDENAV_WIDTH, useNavItemCSS, useSidenavCSS } from "./Sidenav.style";
+import React, { useState } from 'react'
+import { animated, useSpring, useTransition } from 'react-spring'
+import useResizeObserver from 'use-resize-observer'
+import HamburgerButton from '../HamburgerButton'
+import { EXPANDED_SIDENAV_WIDTH, SIDENAV_WIDTH, useNavItemCSS, useSidenavCSS } from './Sidenav.style'
 
 type NavSubitem = {
-	name: string;
-};
+  name: string
+}
 
 type NavItem = {
-	subitems?: NavSubitem[];
-	icon: React.ReactNode;
-} & NavSubitem;
+  subitems?: NavSubitem[]
+  icon: React.ReactNode
+} & NavSubitem
 
 type SidenavProps = {
-	items: NavItem[];
-};
+  items: NavItem[]
+}
 
 const Sidenav: React.FC<SidenavProps> = ({ items }) => {
-	const [expanded, setExpanded] = useState(false);
-	const styles = useSidenavCSS({ expanded });
+  const [expanded, setExpanded] = useState(false)
+  const styles = useSidenavCSS({ expanded })
 
-	const containerAnimationStyles = useSpring({
-		from: { width: SIDENAV_WIDTH },
-		width: expanded ? EXPANDED_SIDENAV_WIDTH : SIDENAV_WIDTH,
-	});
-	const overlayTransitions = useTransition(expanded, null, {
-		from: { opacity: 0, display: "none" },
-		enter: { opacity: 1, display: "block" },
-		leave: { opacity: 0 },
-	});
+  const containerAnimationStyles = useSpring({
+    from: { width: SIDENAV_WIDTH },
+    width: expanded ? EXPANDED_SIDENAV_WIDTH : SIDENAV_WIDTH,
+  })
+  const overlayTransitions = useTransition(expanded, null, {
+    from: { opacity: 0, display: 'none' },
+    enter: { opacity: 1, display: 'block' },
+    leave: { opacity: 0 },
+  })
 
-	return (
-		<>
-			<animated.nav css={styles.nav} style={containerAnimationStyles}>
-				<HamburgerButton
-					active={expanded}
-					onClick={() => setExpanded(!expanded)}
-					outerStyles={styles.expandButton}
-				/>
-				<div css={styles.navItemsWrapper}>
-					{items.map((item) => (
-						<NavItem key={item.name} expanded={expanded} subitems={item.subitems}>
-							{item.icon}
-							<span>{item.name}</span>
-						</NavItem>
-					))}
-				</div>
-			</animated.nav>
-			{overlayTransitions.map(
-				({ item, key, props }) =>
-					item && (
-						<animated.div
-							css={styles.drawerOverlay}
-							key={key}
-							style={props}
-							onClick={() => setExpanded(false)}
-						/>
-					)
-			)}
-		</>
-	);
-};
+  return (
+    <>
+      <animated.nav css={styles.nav} style={containerAnimationStyles}>
+        <HamburgerButton active={expanded} onClick={() => setExpanded(!expanded)} outerStyles={styles.expandButton} />
+        <div css={styles.navItemsWrapper}>
+          {items.map((item) => (
+            <NavItem key={item.name} expanded={expanded} subitems={item.subitems}>
+              {item.icon}
+              <span>{item.name}</span>
+            </NavItem>
+          ))}
+        </div>
+      </animated.nav>
+      {overlayTransitions.map(
+        ({ item, key, props }) =>
+          item && <animated.div css={styles.drawerOverlay} key={key} style={props} onClick={() => setExpanded(false)} />
+      )}
+    </>
+  )
+}
 
 type NavItemProps = {
-	subitems?: NavSubitem[];
-	expanded: boolean;
-};
+  subitems?: NavSubitem[]
+  expanded: boolean
+}
 
 const NavItem: React.FC<NavItemProps> = ({ expanded, subitems, children }) => {
-	const styles = useNavItemCSS({ expanded });
-	const { height: subitemsHeight, ref: subitemsRef } = useResizeObserver<HTMLDivElement>();
-	const subitemsAnimationStyles = useSpring({ height: expanded ? subitemsHeight || 0 : 0 });
+  const styles = useNavItemCSS({ expanded })
+  const { height: subitemsHeight, ref: subitemsRef } = useResizeObserver<HTMLDivElement>()
+  const subitemsAnimationStyles = useSpring({ height: expanded ? subitemsHeight || 0 : 0 })
 
-	return (
-		<div css={styles.navItemContainer}>
-			<a css={styles.navItem}>{children}</a>
-			{subitems && (
-				<animated.div css={styles.navSubitemsWrapper} style={subitemsAnimationStyles}>
-					<div ref={subitemsRef}>
-						{subitems.map((item) => (
-							<a key={item.name} css={styles.navSubitem}>
-								{item.name}
-							</a>
-						))}
-					</div>
-				</animated.div>
-			)}
-		</div>
-	);
-};
+  return (
+    <div css={styles.navItemContainer}>
+      <a css={styles.navItem}>{children}</a>
+      {subitems && (
+        <animated.div css={styles.navSubitemsWrapper} style={subitemsAnimationStyles}>
+          <div ref={subitemsRef}>
+            {subitems.map((item) => (
+              <a key={item.name} css={styles.navSubitem}>
+                {item.name}
+              </a>
+            ))}
+          </div>
+        </animated.div>
+      )}
+    </div>
+  )
+}
 
 export { Sidenav as default, NavItem }

packages/app/src/shared/components/Sidenav/index.ts

@@ -1,4 +1,4 @@
-import Sidenav, { NavItem } from "./Sidenav";
-import { EXPANDED_SIDENAV_WIDTH, SIDENAV_WIDTH } from "./Sidenav.style";
+import Sidenav, { NavItem } from './Sidenav'
+import { EXPANDED_SIDENAV_WIDTH, SIDENAV_WIDTH } from './Sidenav.style'
 
-export { Sidenav as default, SIDENAV_WIDTH, EXPANDED_SIDENAV_WIDTH, NavItem };
+export { Sidenav as default, SIDENAV_WIDTH, EXPANDED_SIDENAV_WIDTH, NavItem }

packages/app/src/shared/components/Tabs/Tab.tsx

@@ -1,13 +1,13 @@
-import React, { ReactNode } from "react";
+import React, { ReactNode } from 'react'
 
 type TabProps = {
-	label: string;
-	children: ReactNode;
-};
+  label: string
+  children: ReactNode
+}
 
 // FIXME: This looks incomplete
 export default function Tab({ label, children }: TabProps) {
-	// let styles = makeStyles(styleProps)
+  // let styles = makeStyles(styleProps)
 
-	return <div>{children}</div>;
+  return <div>{children}</div>
 }

packages/app/src/shared/components/Tabs/Tabs.style.ts

@@ -1,35 +1,35 @@
-import { colors, spacing, typography } from "../../theme";
-import { makeStyles, StyleFn } from "../../utils";
+import { colors, spacing, typography } from '../../theme'
+import { makeStyles, StyleFn } from '../../utils'
 
-export type TabsStyleProps = {};
+export type TabsStyleProps = {}
 
 const container: StyleFn = () => ({
-	fontFamily: typography.fonts.base,
-	color: colors.white,
-});
+  fontFamily: typography.fonts.base,
+  color: colors.white,
+})
 
 const tabs: StyleFn = () => ({
-	display: "flex",
-});
+  display: 'flex',
+})
 const tab: StyleFn = () => ({
-	flexBasis: "content",
-	padding: `${spacing.m} ${spacing.l}`,
-	cursor: "pointer",
-	borderBottom: `3px solid ${colors.gray[900]}`,
-	minWidth: "100px",
-	colors: colors.gray[200],
-	textAlign: "center",
-});
+  flexBasis: 'content',
+  padding: `${spacing.m} ${spacing.l}`,
+  cursor: 'pointer',
+  borderBottom: `3px solid ${colors.gray[900]}`,
+  minWidth: '100px',
+  colors: colors.gray[200],
+  textAlign: 'center',
+})
 
 const activeTab: StyleFn = () => ({
-	...tab({}, {}),
-	color: colors.white,
-	backgroundColor: "transparent",
-	borderBottom: `3px solid ${colors.blue[500]}`,
-});
+  ...tab({}, {}),
+  color: colors.white,
+  backgroundColor: 'transparent',
+  borderBottom: `3px solid ${colors.blue[500]}`,
+})
 export const useCSS = (props: TabsStyleProps) => ({
-	container: makeStyles([container])(props),
-	tabs: makeStyles([tabs])(props),
-	tab: makeStyles([tab])(props),
-	activeTab: makeStyles([activeTab])(props),
-});
+  container: makeStyles([container])(props),
+  tabs: makeStyles([tabs])(props),
+  tab: makeStyles([tab])(props),
+  activeTab: makeStyles([activeTab])(props),
+})

packages/app/src/shared/components/Tabs/Tabs.tsx

@@ -1,35 +1,35 @@
-import React, { useState } from "react";
-import { useCSS, TabsStyleProps } from "./Tabs.style";
+import React, { useState } from 'react'
+import { useCSS, TabsStyleProps } from './Tabs.style'
 
 type TabsProps = {
-	children: Array<React.ReactNode>;
-	onChange?: (tab: string) => void;
-} & TabsStyleProps;
+  children: Array<React.ReactNode>
+  onChange?: (tab: string) => void
+} & TabsStyleProps
 
 export default function Tabs({ children, onChange = () => {}, ...styleProps }: TabsProps) {
-	const [activeTab, setActiveTab] = useState(0);
+  const [activeTab, setActiveTab] = useState(0)
 
-	function onTabChange(tab: any): void {
-		setActiveTab(tab);
-		onChange(tab);
-	}
+  function onTabChange(tab: any): void {
+    setActiveTab(tab)
+    onChange(tab)
+  }
 
-	let styles = useCSS(styleProps);
+  let styles = useCSS(styleProps)
 
-	return (
-		<div css={styles.container}>
-			<div css={styles.tabs}>
-				{children.map((tab: any, index: any) => (
-					<div
-						key={`tab-${index}`}
-						css={index === activeTab ? styles.activeTab : styles.tab}
-						onClick={() => onTabChange(index)}
-					>
-						{tab.props.label}
-					</div>
-				))}
-			</div>
-			<div>{children.filter((tab: any, index: any) => index === activeTab).map((tab: any) => tab)}</div>
-		</div>
-	);
+  return (
+    <div css={styles.container}>
+      <div css={styles.tabs}>
+        {children.map((tab: any, index: any) => (
+          <div
+            key={`tab-${index}`}
+            css={index === activeTab ? styles.activeTab : styles.tab}
+            onClick={() => onTabChange(index)}
+          >
+            {tab.props.label}
+          </div>
+        ))}
+      </div>
+      <div>{children.filter((tab: any, index: any) => index === activeTab).map((tab: any) => tab)}</div>
+    </div>
+  )
 }

packages/app/src/shared/components/Tabs/index.ts

@@ -1,2 +1,2 @@
-import Tabs from "./Tabs";
-export default Tabs;
+import Tabs from './Tabs'
+export default Tabs

packages/app/src/shared/components/Tag/Tag.style.ts

@@ -1,25 +1,25 @@
-import { StyleFn, makeStyles } from "./../../utils/style-reducer";
-import { css } from "@emotion/core";
-import { typography, colors } from "../../theme";
+import { StyleFn, makeStyles } from './../../utils/style-reducer'
+import { css } from '@emotion/core'
+import { typography, colors } from '../../theme'
 
-export type TagStyleProps = {};
+export type TagStyleProps = {}
 
 const styles: StyleFn = () => ({
-	border: `1px solid ${colors.blue[700]}`,
-	color: colors.white,
-	backgroundColor: colors.black,
-	textAlign: "center",
-	padding: "10px 15px",
-	display: "inline-block",
-	cursor: "default",
-	fontFamily: typography.fonts.base,
-	fontWeight: typography.weights.regular,
-	fontSize: typography.sizes.button.medium,
-	margin: "0 15px 0 0",
+  border: `1px solid ${colors.blue[700]}`,
+  color: colors.white,
+  backgroundColor: colors.black,
+  textAlign: 'center',
+  padding: '10px 15px',
+  display: 'inline-block',
+  cursor: 'default',
+  fontFamily: typography.fonts.base,
+  fontWeight: typography.weights.regular,
+  fontSize: typography.sizes.button.medium,
+  margin: '0 15px 0 0',
 
-	"&::selection": {
-		background: "transparent",
-	},
-});
+  '&::selection': {
+    background: 'transparent',
+  },
+})
 
-export const useCSS = ({}: TagStyleProps) => makeStyles([styles])({});
+export const useCSS = ({}: TagStyleProps) => makeStyles([styles])({})

packages/app/src/shared/components/Tag/Tag.tsx

@@ -1,11 +1,11 @@
-import React from "react";
-import { TagStyleProps, useCSS } from "./Tag.style";
+import React from 'react'
+import { TagStyleProps, useCSS } from './Tag.style'
 
 type TagProps = {
-	children?: React.ReactNode;
-} & TagStyleProps;
+  children?: React.ReactNode
+} & TagStyleProps
 
 export default function Tag({ children, ...styleProps }: TagProps) {
-	let styles = useCSS(styleProps);
-	return <div css={styles}>{children}</div>;
+  let styles = useCSS(styleProps)
+  return <div css={styles}>{children}</div>
 }

packages/app/src/shared/components/Tag/index.ts

@@ -1,2 +1,2 @@
-import Tag from "./Tag";
-export default Tag;
+import Tag from './Tag'
+export default Tag

packages/app/src/shared/components/TagButton/TagButton.style.ts

@@ -1,42 +1,42 @@
-import { StyleFn, makeStyles } from "./../../utils/style-reducer"
-import { typography, colors } from "../../theme"
+import { StyleFn, makeStyles } from './../../utils/style-reducer'
+import { typography, colors } from '../../theme'
 
 export type TagButtonStyleProps = {
-	selected?: boolean
+  selected?: boolean
 }
 
 const baseStyles: StyleFn = () => ({
-	border: `1px solid ${colors.blue[500]}`,
-	color: colors.white,
-	backgroundColor: colors.black,
-	textAlign: "center",
-	padding: "15px 20px",
-	display: "inline-block",
-	cursor: "default",
-	fontFamily: typography.fonts.base,
-	fontWeight: typography.weights.medium,
-	fontSize: typography.sizes.button.large,
-	textTransform: "capitalize",
-	whiteSpace: "nowrap",
-	margin: "0 15px 0 0",
-	lineHeight: typography.sizes.button.large,
+  border: `1px solid ${colors.blue[500]}`,
+  color: colors.white,
+  backgroundColor: colors.black,
+  textAlign: 'center',
+  padding: '15px 20px',
+  display: 'inline-block',
+  cursor: 'default',
+  fontFamily: typography.fonts.base,
+  fontWeight: typography.weights.medium,
+  fontSize: typography.sizes.button.large,
+  textTransform: 'capitalize',
+  whiteSpace: 'nowrap',
+  margin: '0 15px 0 0',
+  lineHeight: typography.sizes.button.large,
 
-	span: {
-		marginLeft: "20px",
-		fontSize: typography.sizes.icon.xxlarge,
-		fontWeight: typography.weights.regular,
-		lineHeight: 0,
-		verticalAlign: "sub"
-	},
+  span: {
+    marginLeft: '20px',
+    fontSize: typography.sizes.icon.xxlarge,
+    fontWeight: typography.weights.regular,
+    lineHeight: 0,
+    verticalAlign: 'sub',
+  },
 
-	"&::selection": {
-		background: "transparent"
-	}
+  '&::selection': {
+    background: 'transparent',
+  },
 })
 
 const shadowFromProps: StyleFn = (styles, { selected = false }) => ({
-	...styles,
-	boxShadow: selected ? `3px 3px ${colors.blue[500]}` : "none"
+  ...styles,
+  boxShadow: selected ? `3px 3px ${colors.blue[500]}` : 'none',
 })
 
 export const useCSS = (props: TagButtonStyleProps) => makeStyles([baseStyles, shadowFromProps])(props)

packages/app/src/shared/components/TagButton/TagButton.tsx

@@ -1,16 +1,16 @@
-import React from "react";
-import { TagButtonStyleProps, useCSS } from "./TagButton.style";
+import React from 'react'
+import { TagButtonStyleProps, useCSS } from './TagButton.style'
 
 type TagButtonProps = {
-	children: React.ReactNode;
-	onClick?: (e: React.MouseEvent<HTMLDivElement>) => void;
-} & TagButtonStyleProps;
+  children: React.ReactNode
+  onClick?: (e: React.MouseEvent<HTMLDivElement>) => void
+} & TagButtonStyleProps
 
 export default function TagButton({ children, onClick, ...styleProps }: TagButtonProps) {
-	let styles = useCSS(styleProps);
-	return (
-		<div css={styles} onClick={onClick}>
-			{children}
-		</div>
-	);
+  let styles = useCSS(styleProps)
+  return (
+    <div css={styles} onClick={onClick}>
+      {children}
+    </div>
+  )
 }

packages/app/src/shared/components/TagButton/index.ts

@@ -1,2 +1,2 @@
-import TagButton from "./TagButton";
-export default TagButton;
+import TagButton from './TagButton'
+export default TagButton

packages/app/src/shared/components/TextField/TextField.style.ts

@@ -1,103 +1,103 @@
-import { StyleFn, makeStyles } from "../../utils"
-import { typography, colors, spacing } from "./../../theme"
+import { StyleFn, makeStyles } from '../../utils'
+import { typography, colors, spacing } from './../../theme'
 
 export type TextFieldStyleProps = {
-	disabled?: boolean
-	focus?: boolean
-	error?: boolean
-	isActive?: boolean
-	iconPosition?: "right" | "left"
+  disabled?: boolean
+  focus?: boolean
+  error?: boolean
+  isActive?: boolean
+  iconPosition?: 'right' | 'left'
 }
 
-const FIELD_WIDTH = "250px"
+const FIELD_WIDTH = '250px'
 const wrapper: StyleFn = () => ({
-	display: "block",
-	maxWidth: FIELD_WIDTH,
-	fontFamily: typography.fonts.base
+  display: 'block',
+  maxWidth: FIELD_WIDTH,
+  fontFamily: typography.fonts.base,
 })
 
 const container: StyleFn = (_, { disabled }) => ({
-	position: "relative",
-	width: "100%",
-	height: "48px",
-	display: "inline-flex",
-	cursor: disabled ? "not-allowed" : "default"
+  position: 'relative',
+  width: '100%',
+  height: '48px',
+  display: 'inline-flex',
+  cursor: disabled ? 'not-allowed' : 'default',
 })
 
 const border: StyleFn = () => ({
-	position: "absolute",
-	top: 0,
-	left: 0,
-	right: 0,
-	bottom: 0,
-	borderWidth: "1px",
-	borderStyle: "solid",
-	display: "flex",
-	alignItems: "center",
-	justifyContent: "left"
+  position: 'absolute',
+  top: 0,
+  left: 0,
+  right: 0,
+  bottom: 0,
+  borderWidth: '1px',
+  borderStyle: 'solid',
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'left',
 })
 const borderColor: StyleFn = (styles, { disabled, error, isActive, focus }) => {
-	const borderColor = disabled
-		? colors.gray[200]
-		: error
-		? colors.error
-		: focus
-		? colors.blue[500]
-		: isActive
-		? colors.gray[200]
-		: colors.gray[400]
+  const borderColor = disabled
+    ? colors.gray[200]
+    : error
+    ? colors.error
+    : focus
+    ? colors.blue[500]
+    : isActive
+    ? colors.gray[200]
+    : colors.gray[400]
 
-	return {
-		...styles,
-		borderColor
-	}
+  return {
+    ...styles,
+    borderColor,
+  }
 }
 const label: StyleFn = (_, { error, iconPosition }) => ({
-	color: error ? colors.error : colors.gray[400],
-	padding: `0 ${spacing.s}`,
-	backgroundColor: colors.black,
-	[`padding-${iconPosition}`]: spacing.xxxxxl,
-	fontSize: typography.sizes.body2,
-	transition: `all 0.1s linear`
+  color: error ? colors.error : colors.gray[400],
+  padding: `0 ${spacing.s}`,
+  backgroundColor: colors.black,
+  [`padding-${iconPosition}`]: spacing.xxxxxl,
+  fontSize: typography.sizes.body2,
+  transition: `all 0.1s linear`,
 })
 const input: StyleFn = (_, { iconPosition }) => ({
-	display: "none",
-	width: "100%",
-	margin: `0 ${spacing.s}`,
-	[`margin-${iconPosition}`]: spacing.xxxxxl,
-	background: "none",
-	border: "none",
-	outline: "none",
-	color: colors.white,
-	fontSize: typography.sizes.body2,
-	padding: `5px 0`
+  display: 'none',
+  width: '100%',
+  margin: `0 ${spacing.s}`,
+  [`margin-${iconPosition}`]: spacing.xxxxxl,
+  background: 'none',
+  border: 'none',
+  outline: 'none',
+  color: colors.white,
+  fontSize: typography.sizes.body2,
+  padding: `5px 0`,
 })
 const icon: StyleFn = (_, { iconPosition }) => ({
-	color: colors.gray[300],
-	fontSize: typography.sizes.icon.xlarge,
-	position: "absolute",
-	top: spacing.s,
-	[`${iconPosition}`]: spacing.s
+  color: colors.gray[300],
+  fontSize: typography.sizes.icon.xlarge,
+  position: 'absolute',
+  top: spacing.s,
+  [`${iconPosition}`]: spacing.s,
 })
 const helper: StyleFn = (_, { error }) => ({
-	color: error ? colors.error : colors.gray[400]
+  color: error ? colors.error : colors.gray[400],
 })
 
 export const useCSS = ({
-	disabled = false,
-	focus = false,
-	error = false,
-	isActive = false,
-	iconPosition = "right"
+  disabled = false,
+  focus = false,
+  error = false,
+  isActive = false,
+  iconPosition = 'right',
 }: TextFieldStyleProps) => {
-	const props = { disabled, focus, error, isActive, iconPosition }
-	return {
-		wrapper: makeStyles([wrapper])(props),
-		container: makeStyles([container])(props),
-		border: makeStyles([border, borderColor])(props),
-		label: makeStyles([label])(props),
-		input: makeStyles([input])(props),
-		icon: makeStyles([icon])(props),
-		helper: makeStyles([helper])(props)
-	}
+  const props = { disabled, focus, error, isActive, iconPosition }
+  return {
+    wrapper: makeStyles([wrapper])(props),
+    container: makeStyles([container])(props),
+    border: makeStyles([border, borderColor])(props),
+    label: makeStyles([label])(props),
+    input: makeStyles([input])(props),
+    icon: makeStyles([icon])(props),
+    helper: makeStyles([helper])(props),
+  }
 }

packages/app/src/shared/components/TextField/TextField.tsx

@@ -1,88 +1,88 @@
-import React, { useState, useRef, useEffect } from "react";
-import { useCSS, TextFieldStyleProps } from "./TextField.style";
-import { IconProp } from "@fortawesome/fontawesome-svg-core";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { spacing } from "./../../theme";
+import React, { useState, useRef, useEffect } from 'react'
+import { useCSS, TextFieldStyleProps } from './TextField.style'
+import { IconProp } from '@fortawesome/fontawesome-svg-core'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { spacing } from './../../theme'
 
 type TextFieldProps = {
-	label: string;
-	helper?: string;
-	value?: string;
-	icon?: IconProp | undefined;
-	onChange?: (e: React.ChangeEvent) => void;
-} & TextFieldStyleProps;
+  label: string
+  helper?: string
+  value?: string
+  icon?: IconProp | undefined
+  onChange?: (e: React.ChangeEvent) => void
+} & TextFieldStyleProps
 
 export default function TextField({
-	label,
-	helper = "",
-	value = "",
-	icon,
-	disabled = false,
-	onChange,
-	...styleProps
+  label,
+  helper = '',
+  value = '',
+  icon,
+  disabled = false,
+  onChange,
+  ...styleProps
 }: TextFieldProps) {
-	const inputRef = useRef<HTMLInputElement>(null);
-	const [isActive, setIsActive] = useState(!!value);
-	const [inputTextValue, setInputTextValue] = useState(value);
-	const styles = useCSS({ isActive, disabled, ...styleProps });
+  const inputRef = useRef<HTMLInputElement>(null)
+  const [isActive, setIsActive] = useState(!!value)
+  const [inputTextValue, setInputTextValue] = useState(value)
+  const styles = useCSS({ isActive, disabled, ...styleProps })
 
-	useEffect(() => {
-		if (inputRef.current != null) {
-			if (isActive) {
-				inputRef.current.focus();
-			} else {
-				inputRef.current.blur();
-			}
-		}
-	}, [isActive, inputRef]);
+  useEffect(() => {
+    if (inputRef.current != null) {
+      if (isActive) {
+        inputRef.current.focus()
+      } else {
+        inputRef.current.blur()
+      }
+    }
+  }, [isActive, inputRef])
 
-	function onTextFieldClick() {
-		if (!disabled) setIsActive(true);
-	}
+  function onTextFieldClick() {
+    if (!disabled) setIsActive(true)
+  }
 
-	function onInputTextBlur() {
-		setIsActive(false);
-	}
+  function onInputTextBlur() {
+    setIsActive(false)
+  }
 
-	// FIXME: add correct typing to event, see here: https://github.com/DefinitelyTyped/DefinitelyTyped/pull/12239
-	function onInputTextChange(event: any): void {
-		if (!disabled) setInputTextValue(event.currentTarget.value);
-	}
+  // FIXME: add correct typing to event, see here: https://github.com/DefinitelyTyped/DefinitelyTyped/pull/12239
+  function onInputTextChange(event: any): void {
+    if (!disabled) setInputTextValue(event.currentTarget.value)
+  }
 
-	return (
-		<div css={styles.wrapper}>
-			<div css={styles.container} onClick={onTextFieldClick}>
-				<div css={styles.border}>
-					<div
-						css={styles.label}
-						style={
-							!inputTextValue && !isActive
-								? {}
-								: {
-										position: "absolute",
-										top: "-8px",
-										left: "5px",
-										fontSize: "0.7rem",
-										padding: `0 ${spacing.xs}`,
-								  }
-						}
-					>
-						{label}
-					</div>
-					<input
-						css={styles.input}
-						style={{ display: !!inputTextValue || isActive ? "block" : "none" }}
-						ref={inputRef}
-						type="text"
-						value={inputTextValue}
-						onChange={onInputTextChange}
-						onBlur={onInputTextBlur}
-						disabled={disabled}
-					/>
-					{!!icon && <FontAwesomeIcon icon={icon || "check"} css={styles.icon} />}
-				</div>
-			</div>
-			{!!helper && <p css={styles.helper}>{helper}</p>}
-		</div>
-	);
+  return (
+    <div css={styles.wrapper}>
+      <div css={styles.container} onClick={onTextFieldClick}>
+        <div css={styles.border}>
+          <div
+            css={styles.label}
+            style={
+              !inputTextValue && !isActive
+                ? {}
+                : {
+                    position: 'absolute',
+                    top: '-8px',
+                    left: '5px',
+                    fontSize: '0.7rem',
+                    padding: `0 ${spacing.xs}`,
+                  }
+            }
+          >
+            {label}
+          </div>
+          <input
+            css={styles.input}
+            style={{ display: !!inputTextValue || isActive ? 'block' : 'none' }}
+            ref={inputRef}
+            type="text"
+            value={inputTextValue}
+            onChange={onInputTextChange}
+            onBlur={onInputTextBlur}
+            disabled={disabled}
+          />
+          {!!icon && <FontAwesomeIcon icon={icon || 'check'} css={styles.icon} />}
+        </div>
+      </div>
+      {!!helper && <p css={styles.helper}>{helper}</p>}
+    </div>
+  )
 }

packages/app/src/shared/components/TextField/index.ts

@@ -1,2 +1,2 @@
-import TextField from "./TextField";
-export default TextField;
+import TextField from './TextField'
+export default TextField

packages/app/src/shared/components/Typography/Typography.style.ts

@@ -1,113 +1,123 @@
-import { typography, colors, spacing } from "../../theme"
+import { typography, colors, spacing } from '../../theme'
 
 export type TypographyStyleProps = {
-	variant: "hero" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "subtitle1" | "subtitle2" | "body1" | "body2" | "caption" | "overhead"
+  variant:
+    | 'hero'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'subtitle1'
+    | 'subtitle2'
+    | 'body1'
+    | 'body2'
+    | 'caption'
+    | 'overhead'
 }
 
-export let makeStyles = ({
-  variant = "body1"
-}: TypographyStyleProps) => {
+export let makeStyles = ({ variant = 'body1' }: TypographyStyleProps) => {
+  const base = {
+    fontFamily: typography.fonts.base,
+    color: colors.white,
+  }
 
-	const base = {
-		fontFamily: typography.fonts.base,
-		color: colors.white
-	}
+  let specific = {}
 
-	let specific = {}
+  switch (variant) {
+    case 'hero':
+      specific = {
+        fontSize: typography.sizes.hero,
+        fontWeight: typography.weights.medium,
+        margin: `${spacing.xxxl} 0`,
+      }
+      break
+    case 'h1':
+      specific = {
+        fontSize: typography.sizes.h1,
+        fontWeight: typography.weights.medium,
+        margin: `${spacing.xxl} 0`,
+      }
+      break
+    case 'h2':
+      specific = {
+        fontSize: typography.sizes.h2,
+        fontWeight: typography.weights.medium,
+        margin: `${spacing.xl} 0`,
+      }
+      break
+    case 'h3':
+      specific = {
+        fontSize: typography.sizes.h3,
+        fontWeight: typography.weights.medium,
+        margin: `${spacing.l} 0`,
+      }
+      break
+    case 'h4':
+      specific = {
+        fontSize: typography.sizes.h4,
+        fontWeight: typography.weights.medium,
+        margin: `${spacing.l} 0`,
+      }
+      break
+    case 'h5':
+      specific = {
+        fontSize: typography.sizes.h5,
+        fontWeight: typography.weights.medium,
+        margin: `${spacing.m} 0`,
+      }
+      break
+    case 'h6':
+      specific = {
+        fontSize: typography.sizes.h6,
+        fontWeight: typography.weights.medium,
+        margin: `${spacing.m} 0`,
+      }
+      break
+    case 'subtitle1':
+      specific = {
+        fontSize: typography.sizes.subtitle1,
+        fontWeight: typography.weights.light,
+        margin: `${spacing.l} 0`,
+      }
+      break
+    case 'subtitle2':
+      specific = {
+        fontSize: typography.sizes.subtitle2,
+        fontWeight: typography.weights.regular,
+        margin: `${spacing.m} 0`,
+      }
+      break
+    case 'body1':
+      specific = {
+        fontSize: typography.sizes.body1,
+        fontWeight: typography.weights.light,
+        margin: `${spacing.s} 0`,
+      }
+      break
+    case 'body2':
+      specific = {
+        fontSize: typography.sizes.body2,
+        fontWeight: typography.weights.light,
+        margin: `${spacing.xs} 0`,
+      }
+      break
+    case 'caption':
+      specific = {
+        fontSize: typography.sizes.caption,
+        fontWeight: typography.weights.light,
+        margin: `${spacing.xs} 0`,
+      }
+      break
+    case 'overhead':
+      specific = {
+        fontSize: typography.sizes.overhead,
+        fontWeight: typography.weights.regular,
+        margin: `${spacing.xs} 0`,
+      }
+      break
+  }
 
-	switch(variant) {
-		case "hero":
-			specific = {
-				fontSize: typography.sizes.hero,
-				fontWeight: typography.weights.medium,
-				margin: `${spacing.xxxl} 0`
-			}
-			break
-		case "h1":
-			specific = {
-				fontSize: typography.sizes.h1,
-				fontWeight: typography.weights.medium,
-				margin: `${spacing.xxl} 0`
-			}
-			break
-		case "h2":
-			specific = {
-				fontSize: typography.sizes.h2,
-				fontWeight: typography.weights.medium,
-				margin: `${spacing.xl} 0`
-			}
-			break
-		case "h3":
-			specific = {
-				fontSize: typography.sizes.h3,
-				fontWeight: typography.weights.medium,
-				margin: `${spacing.l} 0`
-			}
-			break
-		case "h4":
-			specific = {
-				fontSize: typography.sizes.h4,
-				fontWeight: typography.weights.medium,
-				margin: `${spacing.l} 0`
-			}
-			break
-		case "h5":
-			specific = {
-				fontSize: typography.sizes.h5,
-				fontWeight: typography.weights.medium,
-				margin: `${spacing.m} 0`
-			}
-			break
-		case "h6":
-			specific = {
-				fontSize: typography.sizes.h6,
-				fontWeight: typography.weights.medium,
-				margin: `${spacing.m} 0`
-			}
-			break
-		case "subtitle1":
-			specific = {
-				fontSize: typography.sizes.subtitle1,
-				fontWeight: typography.weights.light,
-				margin: `${spacing.l} 0`
-			}
-			break
-		case "subtitle2":
-			specific = {
-				fontSize: typography.sizes.subtitle2,
-				fontWeight: typography.weights.regular,
-				margin: `${spacing.m} 0`
-			}
-			break
-		case "body1":
-			specific = {
-				fontSize: typography.sizes.body1,
-				fontWeight: typography.weights.light,
-				margin: `${spacing.s} 0`
-			}
-			break
-		case "body2":
-			specific = {
-				fontSize: typography.sizes.body2,
-				fontWeight: typography.weights.light,
-				margin: `${spacing.xs} 0`
-			}
-			break
-		case "caption":
-			specific = {
-				fontSize: typography.sizes.caption,
-				fontWeight: typography.weights.light,
-				margin: `${spacing.xs} 0`
-			}
-			break
-		case "overhead":
-			specific = {
-				fontSize: typography.sizes.overhead,
-				fontWeight: typography.weights.regular,
-				margin: `${spacing.xs} 0`
-			}
-			break
-	}
-
-	return { ...base, ...specific }
+  return { ...base, ...specific }
 }

packages/app/src/shared/components/Typography/Typography.tsx

@@ -1,16 +1,12 @@
-import React from "react"
-import { makeStyles, TypographyStyleProps } from "./Typography.style"
+import React from 'react'
+import { makeStyles, TypographyStyleProps } from './Typography.style'
 
 type TypographyProps = {
   children: React.ReactNode
   onClick?: (e: React.MouseEvent<any>) => void
 } & TypographyStyleProps
 
-export default function Typography({
-  children,
-  onClick,
-  ...styleProps
-}: TypographyProps) {
+export default function Typography({ children, onClick, ...styleProps }: TypographyProps) {
   let styles = makeStyles(styleProps)
   return (
     <div css={styles} onClick={onClick}>

packages/app/src/shared/components/Typography/index.ts

@@ -1,2 +1,2 @@
-import Typography from "./Typography";
-export default Typography;
+import Typography from './Typography'
+export default Typography

packages/app/src/shared/components/VideoPlayer/VideoPlayer.style.tsx

@@ -1,33 +1,33 @@
-import { css } from "@emotion/core";
-import { breakpoints } from "../../theme";
+import { css } from '@emotion/core'
+import { breakpoints } from '../../theme'
 
 export type VideoPlayerStyleProps = {
-	width?: string | number;
-	height?: string | number;
-	responsive?: boolean;
-	ratio?: string;
-};
+  width?: string | number
+  height?: string | number
+  responsive?: boolean
+  ratio?: string
+}
 
 export let makeStyles = ({
-	width = "100%",
-	height = "100%",
-	responsive = true,
-	ratio = "16:9",
+  width = '100%',
+  height = '100%',
+  responsive = true,
+  ratio = '16:9',
 }: VideoPlayerStyleProps) => {
-	let ratioPerc = ratio
-		.split(":")
-		.map(x => Number(x))
-		.reduce((x, y) => (y / x) * 100);
+  let ratioPerc = ratio
+    .split(':')
+    .map((x) => Number(x))
+    .reduce((x, y) => (y / x) * 100)
 
-	return {
-		containerStyles: css`
-			max-width: ${breakpoints.medium};
-			& .video-player {
-			}
-		`,
-		playerStyles: css`
-			width: ${width};
-			height: ${height};
-		`,
-	};
-};
+  return {
+    containerStyles: css`
+      max-width: ${breakpoints.medium};
+      & .video-player {
+      }
+    `,
+    playerStyles: css`
+      width: ${width};
+      height: ${height};
+    `,
+  }
+}

packages/app/src/shared/components/VideoPlayer/VideoPlayer.tsx

@@ -1,27 +1,27 @@
-import React from "react";
-import ReactPlayer from "react-player";
-import { VideoPlayerStyleProps, makeStyles } from "./VideoPlayer.style";
+import React from 'react'
+import ReactPlayer from 'react-player'
+import { VideoPlayerStyleProps, makeStyles } from './VideoPlayer.style'
 
 export type VideoPlayerProps = {
-  src?: string;
-  playing?: boolean;
-  poster?: string;
-  controls?: boolean;
-  volume?: number;
-  loop?: boolean;
-  autoPlay?: boolean;
-  muted?: boolean;
-  className?: string;
-  onReady?(): void;
-  onStart?(): void;
-  onPlay?(): void;
-  onPause?(): void;
-  onBuffer?(): void;
-  onEnded?(): void;
-  onError?(error: any): void;
-  onDuration?(duration: number): void;
-  onProgress?(state: { played: number; loaded: number }): void;
-} & VideoPlayerStyleProps;
+  src?: string
+  playing?: boolean
+  poster?: string
+  controls?: boolean
+  volume?: number
+  loop?: boolean
+  autoPlay?: boolean
+  muted?: boolean
+  className?: string
+  onReady?(): void
+  onStart?(): void
+  onPlay?(): void
+  onPause?(): void
+  onBuffer?(): void
+  onEnded?(): void
+  onError?(error: any): void
+  onDuration?(duration: number): void
+  onProgress?(state: { played: number; loaded: number }): void
+} & VideoPlayerStyleProps
 
 export default function VideoPlayer({
   src,
@@ -45,13 +45,13 @@ export default function VideoPlayer({
   controls = true,
   ...styleProps
 }: VideoPlayerProps) {
-  let { playerStyles, containerStyles } = makeStyles(styleProps);
+  let { playerStyles, containerStyles } = makeStyles(styleProps)
   return (
     <div css={containerStyles}>
       <ReactPlayer
         css={playerStyles}
-        width={styleProps.responsive ? "100%" : styleProps.width}
-        height={styleProps.responsive ? "100%" : styleProps.height}
+        width={styleProps.responsive ? '100%' : styleProps.width}
+        height={styleProps.responsive ? '100%' : styleProps.height}
         url={src}
         autoPlay={autoPlay}
         light={poster || true}
@@ -69,11 +69,11 @@ export default function VideoPlayer({
         config={{
           file: {
             attributes: {
-              className: "video-player",
+              className: 'video-player',
             },
           },
         }}
       />
     </div>
-  );
+  )
 }

packages/app/src/shared/components/VideoPlayer/index.tsx

@@ -1,2 +1,2 @@
-import VideoPlayer from "./VideoPlayer";
-export default VideoPlayer;
+import VideoPlayer from './VideoPlayer'
+export default VideoPlayer

packages/app/src/shared/components/VideoPreview/VideoPreview.styles.tsx

@@ -1,95 +1,95 @@
-import styled from "@emotion/styled";
-import { colors, spacing, typography } from "../../theme";
-import Avatar from "../Avatar";
-import { Play } from "../../icons";
+import styled from '@emotion/styled'
+import { colors, spacing, typography } from '../../theme'
+import Avatar from '../Avatar'
+import { Play } from '../../icons'
 
-const HOVER_BORDER_SIZE = "2px";
+const HOVER_BORDER_SIZE = '2px'
 
 type CoverImageProps = {
-	displayPosterPlaceholder?: boolean;
-};
+  displayPosterPlaceholder?: boolean
+}
 
 type ContainerProps = {
-	clickable: boolean;
-};
+  clickable: boolean
+}
 
 type ChannelProps = {
-	channelClickable: boolean;
-};
+  channelClickable: boolean
+}
 
 export const CoverContainer = styled.div`
-	width: 320px;
-	height: 190px;
+  width: 320px;
+  height: 190px;
 
-	transition-property: box-shadow, transform;
-	transition-duration: 0.4s;
-	transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
+  transition-property: box-shadow, transform;
+  transition-duration: 0.4s;
+  transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
 
-	position: relative;
-`;
+  position: relative;
+`
 
 export const CoverImage = styled.img<CoverImageProps>`
-	width: 100%;
-	height: 100%;
-	background-image: ${({ displayPosterPlaceholder }) =>
-		displayPosterPlaceholder ? `linear-gradient(${colors.gray[300]}, ${colors.gray[700]})` : "none"};
-	background-size: cover;
-	object-fit: cover;
-`;
+  width: 100%;
+  height: 100%;
+  background-image: ${({ displayPosterPlaceholder }) =>
+    displayPosterPlaceholder ? `linear-gradient(${colors.gray[300]}, ${colors.gray[700]})` : 'none'};
+  background-size: cover;
+  object-fit: cover;
+`
 
 export const CoverHoverOverlay = styled.div`
-	position: absolute;
-	top: 0;
-	right: 0;
-	bottom: 0;
-	left: 0;
-	opacity: 0;
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  opacity: 0;
 
-	transition: opacity 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
+  transition: opacity 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
 
-	border: ${HOVER_BORDER_SIZE} solid ${colors.white};
-	background: linear-gradient(180deg, #000000 0%, rgba(0, 0, 0, 0) 100%);
+  border: ${HOVER_BORDER_SIZE} solid ${colors.white};
+  background: linear-gradient(180deg, #000000 0%, rgba(0, 0, 0, 0) 100%);
 
-	display: flex;
-	justify-content: center;
-	align-items: center;
-`;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+`
 
 // Play icon is incorrectly typed as string
 export const CoverPlayIcon = styled(Play as any)`
-	transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
-	transform: translateY(40px);
-`;
+  transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
+  transform: translateY(40px);
+`
 
 export const ProgressOverlay = styled.div`
-	position: absolute;
-	left: 0;
-	right: 0;
-	bottom: 0;
-	height: ${spacing.xxs};
-	background-color: ${colors.white};
-`;
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  height: ${spacing.xxs};
+  background-color: ${colors.white};
+`
 
 export const ProgressBar = styled.div`
-	position: absolute;
-	left: 0;
-	bottom: 0;
-	height: 100%;
-	width: 0;
-	background-color: ${colors.blue["500"]};
-`;
+  position: absolute;
+  left: 0;
+  bottom: 0;
+  height: 100%;
+  width: 0;
+  background-color: ${colors.blue['500']};
+`
 
 export const Container = styled.div<ContainerProps>`
-	color: ${colors.gray[300]};
-	cursor: ${({ clickable }) => (clickable ? "pointer" : "auto")};
-	display: inline-block;
-	${({ clickable }) =>
-		clickable &&
-		`
+  color: ${colors.gray[300]};
+  cursor: ${({ clickable }) => (clickable ? 'pointer' : 'auto')};
+  display: inline-block;
+  ${({ clickable }) =>
+    clickable &&
+    `
 				&:hover {
 					${CoverContainer} {
 						transform: translate(-${spacing.xs}, -${spacing.xs});
-						box-shadow: ${spacing.xs} ${spacing.xs} 0 ${colors.blue["500"]};
+						box-shadow: ${spacing.xs} ${spacing.xs} 0 ${colors.blue['500']};
 					}
 
 					${CoverHoverOverlay} {
@@ -105,53 +105,53 @@ export const Container = styled.div<ContainerProps>`
 					}
 				}
 			`}
-`;
+`
 
 export const CoverDurationOverlay = styled.div`
-	position: absolute;
-	bottom: ${spacing.xs};
-	right: ${spacing.xs};
-	padding: ${spacing.xxs} ${spacing.xs};
-	background-color: ${colors.black};
-	color: ${colors.white};
-	font-size: ${typography.sizes.body2};
-`;
+  position: absolute;
+  bottom: ${spacing.xs};
+  right: ${spacing.xs};
+  padding: ${spacing.xxs} ${spacing.xs};
+  background-color: ${colors.black};
+  color: ${colors.white};
+  font-size: ${typography.sizes.body2};
+`
 
 export const InfoContainer = styled.div`
-	display: flex;
-	margin-top: ${spacing.s};
-`;
+  display: flex;
+  margin-top: ${spacing.s};
+`
 
 export const StyledAvatar = styled(Avatar)<ChannelProps>`
-	width: 40px;
-	height: 40px;
-	margin-right: ${spacing.xs};
-	cursor: ${({ channelClickable }) => (channelClickable ? "pointer" : "auto")};
-`;
+  width: 40px;
+  height: 40px;
+  margin-right: ${spacing.xs};
+  cursor: ${({ channelClickable }) => (channelClickable ? 'pointer' : 'auto')};
+`
 
 export const TextContainer = styled.div`
-	display: flex;
-	flex-direction: column;
-	align-items: start;
-`;
+  display: flex;
+  flex-direction: column;
+  align-items: start;
+`
 
 export const TitleHeader = styled.h3`
-	margin: 0;
-	font-weight: ${typography.weights.bold};
-	font-size: ${typography.sizes.h6};
-	line-height: 1.25rem;
-	color: ${colors.white};
-	display: inline-block;
-`;
+  margin: 0;
+  font-weight: ${typography.weights.bold};
+  font-size: ${typography.sizes.h6};
+  line-height: 1.25rem;
+  color: ${colors.white};
+  display: inline-block;
+`
 
 export const ChannelName = styled.span<ChannelProps>`
-	font-size: ${typography.sizes.subtitle2};
-	line-height: 1.25rem;
-	display: inline-block;
-	cursor: ${({ channelClickable }) => (channelClickable ? "pointer" : "auto")};
-`;
+  font-size: ${typography.sizes.subtitle2};
+  line-height: 1.25rem;
+  display: inline-block;
+  cursor: ${({ channelClickable }) => (channelClickable ? 'pointer' : 'auto')};
+`
 
 export const MetaText = styled.span`
-	margin-top: ${spacing.xs};
-	font-size: ${typography.sizes.subtitle2};
-`;
+  margin-top: ${spacing.xs};
+  font-size: ${typography.sizes.subtitle2};
+`

packages/app/src/shared/components/VideoPreview/VideoPreview.tsx

@@ -1,112 +1,112 @@
-import React from "react";
+import React from 'react'
 import {
-	ChannelName,
-	Container,
-	CoverContainer,
-	CoverDurationOverlay,
-	CoverHoverOverlay,
-	CoverImage,
-	CoverPlayIcon,
-	InfoContainer,
-	MetaText,
-	ProgressBar,
-	ProgressOverlay,
-	StyledAvatar,
-	TextContainer,
-	TitleHeader,
-} from "./VideoPreview.styles";
+  ChannelName,
+  Container,
+  CoverContainer,
+  CoverDurationOverlay,
+  CoverHoverOverlay,
+  CoverImage,
+  CoverPlayIcon,
+  InfoContainer,
+  MetaText,
+  ProgressBar,
+  ProgressOverlay,
+  StyledAvatar,
+  TextContainer,
+  TitleHeader,
+} from './VideoPreview.styles'
 
 type VideoPreviewProps = {
-	title: string;
-	channel: string;
-	channelImg: string;
-	showChannel: boolean;
-	showMeta: boolean;
-	createdAt: string;
-	duration?: string;
-	// video watch progress in percent (0-100)
-	progress?: number;
-	views: string;
-	poster: string;
-	imgRef: React.Ref<HTMLImageElement>;
-	onClick?: (e: React.MouseEvent<HTMLElement>) => void;
-	onChannelClick?: (e: React.MouseEvent<HTMLElement>) => void;
-};
+  title: string
+  channel: string
+  channelImg: string
+  showChannel: boolean
+  showMeta: boolean
+  createdAt: string
+  duration?: string
+  // video watch progress in percent (0-100)
+  progress?: number
+  views: string
+  poster: string
+  imgRef: React.Ref<HTMLImageElement>
+  onClick?: (e: React.MouseEvent<HTMLElement>) => void
+  onChannelClick?: (e: React.MouseEvent<HTMLElement>) => void
+}
 
 const VideoPreview: React.FC<Partial<VideoPreviewProps>> = ({
-	title,
-	channel,
-	channelImg,
-	showChannel = true,
-	showMeta = true,
-	createdAt,
-	duration,
-	progress = 0,
-	views,
-	imgRef,
-	poster,
-	onClick,
-	onChannelClick,
+  title,
+  channel,
+  channelImg,
+  showChannel = true,
+  showMeta = true,
+  createdAt,
+  duration,
+  progress = 0,
+  views,
+  imgRef,
+  poster,
+  onClick,
+  onChannelClick,
 }) => {
-	const clickable = !!onClick;
-	const channelClickable = !!onChannelClick;
+  const clickable = !!onClick
+  const channelClickable = !!onChannelClick
 
-	const handleChannelClick = (e: React.MouseEvent<HTMLElement>) => {
-		if (!onChannelClick) {
-			return;
-		}
-		e.stopPropagation();
-		onChannelClick(e);
-	};
+  const handleChannelClick = (e: React.MouseEvent<HTMLElement>) => {
+    if (!onChannelClick) {
+      return
+    }
+    e.stopPropagation()
+    onChannelClick(e)
+  }
 
-	const handleClick = (e: React.MouseEvent<HTMLElement>) => {
-		if (!onClick) {
-			return;
-		}
-		e.stopPropagation();
-		onClick(e);
-	};
+  const handleClick = (e: React.MouseEvent<HTMLElement>) => {
+    if (!onClick) {
+      return
+    }
+    e.stopPropagation()
+    onClick(e)
+  }
 
-	return (
-		<Container onClick={handleClick} clickable={clickable}>
-			<CoverContainer>
-				<CoverImage src={poster} ref={imgRef} alt={`${title} by ${channel} thumbnail`} />
-				{duration && <CoverDurationOverlay>{duration}</CoverDurationOverlay>}
-				{!!progress && (
-					<ProgressOverlay>
-						<ProgressBar style={{ width: `${progress}%` }} />
-					</ProgressOverlay>
-				)}
-				<CoverHoverOverlay>
-					<CoverPlayIcon />
-				</CoverHoverOverlay>
-			</CoverContainer>
-			<InfoContainer>
-				{showChannel && (
-					<StyledAvatar
-						size="small"
-						name={channel}
-						img={channelImg}
-						channelClickable={channelClickable}
-						onClick={handleChannelClick}
-					/>
-				)}
-				<TextContainer>
-					<TitleHeader>{title}</TitleHeader>
-					{showChannel && (
-						<ChannelName channelClickable={channelClickable} onClick={handleChannelClick}>
-							{channel}
-						</ChannelName>
-					)}
-					{showMeta && (
-						<MetaText>
-							{createdAt}・{views} views
-						</MetaText>
-					)}
-				</TextContainer>
-			</InfoContainer>
-		</Container>
-	);
-};
+  return (
+    <Container onClick={handleClick} clickable={clickable}>
+      <CoverContainer>
+        <CoverImage src={poster} ref={imgRef} alt={`${title} by ${channel} thumbnail`} />
+        {duration && <CoverDurationOverlay>{duration}</CoverDurationOverlay>}
+        {!!progress && (
+          <ProgressOverlay>
+            <ProgressBar style={{ width: `${progress}%` }} />
+          </ProgressOverlay>
+        )}
+        <CoverHoverOverlay>
+          <CoverPlayIcon />
+        </CoverHoverOverlay>
+      </CoverContainer>
+      <InfoContainer>
+        {showChannel && (
+          <StyledAvatar
+            size="small"
+            name={channel}
+            img={channelImg}
+            channelClickable={channelClickable}
+            onClick={handleChannelClick}
+          />
+        )}
+        <TextContainer>
+          <TitleHeader>{title}</TitleHeader>
+          {showChannel && (
+            <ChannelName channelClickable={channelClickable} onClick={handleChannelClick}>
+              {channel}
+            </ChannelName>
+          )}
+          {showMeta && (
+            <MetaText>
+              {createdAt}・{views} views
+            </MetaText>
+          )}
+        </TextContainer>
+      </InfoContainer>
+    </Container>
+  )
+}
 
-export default VideoPreview;
+export default VideoPreview

packages/app/src/shared/components/VideoPreview/index.tsx

@@ -1,2 +1,2 @@
-import VideoPreview from "./VideoPreview";
-export default VideoPreview;
+import VideoPreview from './VideoPreview'
+export default VideoPreview

packages/app/src/shared/components/index.ts

@@ -1,24 +1,24 @@
-export { default as Avatar } from "./Avatar";
-export { default as Button } from "./Button";
-export { default as Carousel } from "./Carousel";
-export { default as Dropdown } from "./Dropdown";
-export { default as Grid } from "./Grid";
-export { default as Header } from "./Header";
-export { default as Link } from "./Link";
-export { default as NavButton } from "./NavButton";
-export { default as RadioButton } from "./RadioButton";
-export { default as Checkbox } from "./Checkbox";
-export { default as TagButton } from "./TagButton";
-export { default as Tabs } from "./Tabs";
-export { default as Tab } from "./Tabs/Tab";
-export { default as Tag } from "./Tag";
-export { default as TextField } from "./TextField";
-export { default as Typography } from "./Typography";
-export { default as VideoPreview } from "./VideoPreview";
-export { default as VideoPlayer } from "./VideoPlayer";
-export { default as SeriesPreview } from "./SeriesPreview";
-export { default as ChannelPreview } from "./ChannelPreview";
-export { default as HamburgerButton } from "./HamburgerButton";
-export { default as Gallery } from "./Gallery";
-export { default as Sidenav, SIDENAV_WIDTH, EXPANDED_SIDENAV_WIDTH, NavItem } from "./Sidenav";
-export { default as GlobalStyle } from "./GlobalStyle";
+export { default as Avatar } from './Avatar'
+export { default as Button } from './Button'
+export { default as Carousel } from './Carousel'
+export { default as Dropdown } from './Dropdown'
+export { default as Grid } from './Grid'
+export { default as Header } from './Header'
+export { default as Link } from './Link'
+export { default as NavButton } from './NavButton'
+export { default as RadioButton } from './RadioButton'
+export { default as Checkbox } from './Checkbox'
+export { default as TagButton } from './TagButton'
+export { default as Tabs } from './Tabs'
+export { default as Tab } from './Tabs/Tab'
+export { default as Tag } from './Tag'
+export { default as TextField } from './TextField'
+export { default as Typography } from './Typography'
+export { default as VideoPreview } from './VideoPreview'
+export { default as VideoPlayer } from './VideoPlayer'
+export { default as SeriesPreview } from './SeriesPreview'
+export { default as ChannelPreview } from './ChannelPreview'
+export { default as HamburgerButton } from './HamburgerButton'
+export { default as Gallery } from './Gallery'
+export { default as Sidenav, SIDENAV_WIDTH, EXPANDED_SIDENAV_WIDTH, NavItem } from './Sidenav'
+export { default as GlobalStyle } from './GlobalStyle'

packages/app/src/shared/icons/types.d.ts

@@ -1,5 +1,5 @@
-declare module "*.svg" {
-	import React = require("react");
-	const ReactComponent: React.FC<React.SVGProps<SVGSVGElement>>;
-	export default ReactComponent;
+declare module '*.svg' {
+  import React = require('react')
+  const ReactComponent: React.FC<React.SVGProps<SVGSVGElement>>
+  export default ReactComponent
 }

packages/app/src/shared/stories/00-Welcome.stories.tsx

@@ -1,14 +1,14 @@
-import React from "react";
-import { linkTo } from "@storybook/addon-links";
-import { Welcome } from "@storybook/react/demo";
+import React from 'react'
+import { linkTo } from '@storybook/addon-links'
+import { Welcome } from '@storybook/react/demo'
 
 export default {
-  title: "Welcome",
+  title: 'Welcome',
   component: Welcome,
-};
+}
 
-export const ToStorybook = () => <Welcome showApp={linkTo("Button")} />;
+export const ToStorybook = () => <Welcome showApp={linkTo('Button')} />
 
 ToStorybook.story = {
-  name: "to Storybook",
-};
+  name: 'to Storybook',
+}

packages/app/src/shared/stories/01-Button.stories.tsx

@@ -1,91 +1,91 @@
-import React from "react";
-import { Button } from "../components";
+import React from 'react'
+import { Button } from '../components'
 
 export default {
-	title: "Button",
-	component: Button,
-};
+  title: 'Button',
+  component: Button,
+}
 
 export const Primary = () => (
-	<>
-		<Button onClick={() => console.log("Button clicked!")}>Regular</Button>
-		<Button size="small" onClick={() => console.log("Button clicked!")}>
-			Small
-		</Button>
-		<Button size="smaller" onClick={() => console.log("Button clicked!")}>
-			Smaller
-		</Button>
-	</>
-);
+  <>
+    <Button onClick={() => console.log('Button clicked!')}>Regular</Button>
+    <Button size="small" onClick={() => console.log('Button clicked!')}>
+      Small
+    </Button>
+    <Button size="smaller" onClick={() => console.log('Button clicked!')}>
+      Smaller
+    </Button>
+  </>
+)
 
 export const Secondary = () => (
-	<>
-		<Button type="secondary">Regular</Button>
-		<Button type="secondary" size="small">
-			Small
-		</Button>
-		<Button type="secondary" size="smaller">
-			Smaller
-		</Button>
-	</>
-);
+  <>
+    <Button type="secondary">Regular</Button>
+    <Button type="secondary" size="small">
+      Small
+    </Button>
+    <Button type="secondary" size="smaller">
+      Smaller
+    </Button>
+  </>
+)
 
-export const PrimaryFullSize = () => <Button full>Primary Full Size</Button>;
+export const PrimaryFullSize = () => <Button full>Primary Full Size</Button>
 
 export const SecondaryFullSize = () => (
-	<Button full type="secondary">
-		Secondary Full Size
-	</Button>
-);
+  <Button full type="secondary">
+    Secondary Full Size
+  </Button>
+)
 
 export const PrimaryWithIcon = () => (
-	<>
-		<Button icon>Regular</Button>
-		<Button icon size="small">
-			Small
-		</Button>
-		<Button icon size="smaller">
-			Smaller
-		</Button>
-	</>
-);
+  <>
+    <Button icon>Regular</Button>
+    <Button icon size="small">
+      Small
+    </Button>
+    <Button icon size="smaller">
+      Smaller
+    </Button>
+  </>
+)
 
 export const SecondaryWithIcon = () => (
-	<>
-		<Button type="secondary" icon>
-			Regular
-		</Button>
-		<Button type="secondary" icon size="small">
-			Small
-		</Button>
-		<Button type="secondary" icon size="smaller">
-			Smaller
-		</Button>
-	</>
-);
+  <>
+    <Button type="secondary" icon>
+      Regular
+    </Button>
+    <Button type="secondary" icon size="small">
+      Small
+    </Button>
+    <Button type="secondary" icon size="smaller">
+      Smaller
+    </Button>
+  </>
+)
 
 export const PrimaryWithoutText = () => (
-	<>
-		<Button icon />
-		<Button icon size="small" />
-		<Button icon size="smaller" />
-	</>
-);
+  <>
+    <Button icon />
+    <Button icon size="small" />
+    <Button icon size="smaller" />
+  </>
+)
 
 export const SecondaryWithoutText = () => (
-	<>
-		<Button type="secondary" icon />
-		<Button type="secondary" icon size="small" />
-		<Button type="secondary" icon size="smaller" />
-	</>
-);
+  <>
+    <Button type="secondary" icon />
+    <Button type="secondary" icon size="small" />
+    <Button type="secondary" icon size="smaller" />
+  </>
+)
 
 export const Disabled = () => (
-	<>
-		<Button disabled={true}>Disabled</Button>
-		<Button disabled={true} icon={true}>
-			Disabled with icon
-		</Button>
-		<Button disabled={true} icon />
-	</>
-);
+  <>
+    <Button disabled={true}>Disabled</Button>
+    <Button disabled={true} icon={true}>
+      Disabled with icon
+    </Button>
+    <Button disabled={true} icon />
+  </>
+)

packages/app/src/shared/stories/02-NavigationButton.stories.tsx

@@ -1,30 +1,22 @@
-import React from "react"
-import { NavButton } from "../components"
+import React from 'react'
+import { NavButton } from '../components'
 
 export default {
-	title: "NavButton",
-	component: NavButton,
+  title: 'NavButton',
+  component: NavButton,
 }
 
-export const PrimaryRight = () => (
-	<NavButton />
-)
+export const PrimaryRight = () => <NavButton />
 
-export const PrimaryLeft = () => (
-	<NavButton direction="left" />
-)
+export const PrimaryLeft = () => <NavButton direction="left" />
 
-export const SecondaryRight = () => (
-	<NavButton type="secondary" />
-)
+export const SecondaryRight = () => <NavButton type="secondary" />
 
-export const SecondaryLeft = () => (
-	<NavButton type="secondary" direction="left" />
-)
+export const SecondaryLeft = () => <NavButton type="secondary" direction="left" />
 
 export const AppNavigation = () => (
-	<div>
-		<NavButton type="secondary" direction="left" />
-		<NavButton type="secondary" direction="right" />
-	</div>
+  <div>
+    <NavButton type="secondary" direction="left" />
+    <NavButton type="secondary" direction="right" />
+  </div>
 )

packages/app/src/shared/stories/03-TagButton.stories.tsx

@@ -1,15 +1,11 @@
-import React from "react"
-import { TagButton } from "../components"
+import React from 'react'
+import { TagButton } from '../components'
 
 export default {
-  title: "TagButton",
+  title: 'TagButton',
   component: TagButton,
 }
 
-export const Default = () => (
-  <TagButton text="Finance" />
-)
+export const Default = () => <TagButton text="Finance" />
 
-export const Selected = () => (
-  <TagButton text="Finance" selected={true} />
-)
+export const Selected = () => <TagButton text="Finance" selected={true} />