upgrade next and react

Author: davidcsally

.eslintrc.js

@@ -48,5 +48,12 @@ module.exports = {
     'react-hooks/exhaustive-deps': 0,
 
     semi: ['error', 'never'],
+    // mac / windows end of line
+    'prettier/prettier': [
+      'error',
+      {
+        endOfLine: 'auto',
+      },
+    ],
   },
 }

next-env.d.ts

@@ -1,5 +1,4 @@
 /// <reference types="next" />
-/// <reference types="next/types/global" />
 /// <reference types="next/image-types/global" />
 
 // NOTE: This file should not be edited

package.json

@@ -28,12 +28,12 @@
   "dependencies": {
     "border-box.css": "^1.0.0",
     "framer-motion": "^4.1.17",
-    "next": "^11.1.2",
+    "next": "^12.2.5",
     "normalize.css": "^8.0.1",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
     "react-modal": "^3.14.3",
-    "styled-components": "^5.3.3"
+    "styled-components": "^5.3.5"
   },
   "devDependencies": {
     "@next/eslint-plugin-next": "^11.1.2",
@@ -45,15 +45,15 @@
     "@testing-library/react": "^12.1.2",
     "@testing-library/user-event": "^13.5.0",
     "@types/jest": "^27.0.2",
-    "@types/react": "^17.0.30",
-    "@types/react-dom": "^17.0.10",
+    "@types/react": "^18.0.17",
+    "@types/react-dom": "^18.0.6",
     "@types/react-modal": "^3.13.1",
-    "@types/styled-components": "^5.1.15",
+    "@types/styled-components": "^5.1.26",
     "@typescript-eslint/eslint-plugin": "^5.19.0",
     "@typescript-eslint/parser": "^5.19.0",
     "babel-plugin-styled-components": "^1.13.3",
     "cypress": "^9.5.4",
-    "eslint": "^8.12.0",
+    "eslint": "^8.22.0",
     "eslint-config-airbnb": "^18.2.1",
     "eslint-config-prettier": "^8.3.0",
     "eslint-plugin-cypress": "^2.12.1",

pages/index.tsx

@@ -25,7 +25,9 @@ const Home = () => (
       />
     </Head>
     <App />
-    <Script strategy="afterInteractive">{GA}</Script>
+    <Script id="ga-script" strategy="afterInteractive">
+      {GA}
+    </Script>
   </>
 )
 

src/components/icons/Lattice/index.tsx

@@ -0,0 +1,44 @@
+import styled from 'styled-components'
+
+const Svg = styled.svg`
+  height: 80%;
+  transition: transform 200ms linear;
+  width: auto;
+  
+  &:hover {
+    transform: scale(1.1);
+  }
+`
+const LatticeIcon = ({}) => (
+  <Svg viewBox="0 0 24 24" focusable="false" role="img">
+    <title>Lattice Logo</title>
+    <g fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M6.83991 14.4457L4.06288 11.6064C3.591 11.1239 2.82594 11.1239 2.35391 11.6064C1.88203 12.0888 1.88203 12.8711 2.35391 13.3537L5.98543 17.0667C6.4573 17.5492 7.22252 17.5492 7.69439 17.0667L11.1125 13.5718L9.40366 11.8244L6.83991 14.4457Z"
+        fill="#1AAD94"
+      />{' '}
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M17.3073 8.98574L11.9672 14.4457L6.6266 8.98512C6.15457 8.5025 5.38951 8.5025 4.91763 8.98512C4.44575 9.46759 4.44575 10.2498 4.91763 10.7325L11.1128 17.0667C11.5846 17.5491 12.3497 17.5491 12.8217 17.0667L19.0162 10.7331C19.4881 10.2505 19.4881 9.46821 19.0162 8.98574C18.5442 8.50327 17.7791 8.50327 17.3073 8.98574Z"
+        fill="#F2AE20"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M21.5798 13.3542L17.9489 17.0667C17.4771 17.5491 16.712 17.5491 16.2401 17.0667L7.48123 8.11115C7.00935 7.62868 7.00935 6.84644 7.48123 6.36397C7.95326 5.88134 8.71832 5.88134 9.1902 6.36397L17.0944 14.4457L19.8709 11.6069C20.3429 11.1244 21.108 11.1244 21.5798 11.6069C22.0517 12.0895 22.0517 12.8718 21.5798 13.3542Z"
+        fill="#E76450"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M16.4526 6.36455C15.9807 5.88208 15.2156 5.88208 14.7436 6.36455L9.40356 11.8245L11.1125 13.5718L16.4526 8.11189C16.9244 7.62927 16.9244 6.84703 16.4526 6.36455Z"
+        fill="#1AAD94"
+      />
+    </g>
+  </Svg>
+)
+
+export default LatticeIcon

src/styles/global.ts

@@ -2,7 +2,7 @@ import { createGlobalStyle } from 'styled-components'
 
 import { palette } from './colors'
 
-export default createGlobalStyle`
+const GlobalStyles = createGlobalStyle`
   ${palette}
 
   body {
@@ -32,3 +32,5 @@ export default createGlobalStyle`
     margin: 0;
   }
 `
+
+export default GlobalStyles