Use external hotjarNPS.css styles + add eslint prettier (#218)

* use external bloom styles

* add eslint-config-prettier dev dep

package.json

@@ -82,6 +82,7 @@
     "enzyme-adapter-react-16": "^1.15.6",
     "eslint": "^7.8.1",
     "eslint-config-airbnb": "^18.2.0",
+    "eslint-config-prettier": "^9.0.0",
     "eslint-plugin-import": "^2.22.0",
     "eslint-plugin-jsx-a11y": "^6.3.1",
     "eslint-plugin-react": "^7.20.6",

src/components/Head.js

@@ -3,16 +3,11 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import isBrowser from '../shared/browserCheck';
 
-const Head = ({
-  title, description, ogDescription, ogImage, ogTitle, ogImageAlt,
-}) => (
+const Head = ({ title, description, ogDescription, ogImage, ogTitle, ogImageAlt }) => (
   <NextHead>
-    <title key="title">
-      {title}
-      {' '}
-      | YSM
-    </title>
+    <title key="title">{title} | YSM</title>
     <link rel="icon" href="/favicon.png" />
+    <link href="https://bloom.chayn.co/hotjarNPS.css" rel="stylesheet" type="text/css" />
     <meta name="description" content={description} />
     <meta property="og:url" content={isBrowser ? window.location.href : null} />
     <meta property="og:type" content="website" />
@@ -38,7 +33,8 @@ Head.propTypes = {
 
 Head.defaultProps = {
   ogTitle: null,
-  description: 'Browse accessible resources curated by a team of survivors. Save what you love and come back anytime.',
+  description:
+    'Browse accessible resources curated by a team of survivors. Save what you love and come back anytime.',
   ogDescription: null,
   ogImage: '/logo.png',
   ogImageAlt: 'Line drawing',

src/pages/_app.js

@@ -21,7 +21,6 @@ import { axiosGet } from '../shared/axios';
 import isBrowser from '../shared/browserCheck';
 import useWindowDimensions from '../shared/dimensions';
 import { useStore } from '../store/store';
-import '../styles/hotjarNPS.css';
 import theme from '../styles/theme';
 
 const Footer = dynamic(() => import('../components/Footer'), { ssr: false });