Update tailwind

.eslintrc.js

@@ -4,6 +4,7 @@ module.exports = {
     "plugin:prettier/recommended",
     "plugin:react/recommended",
     "plugin:react-hooks/recommended",
+    "plugin:@next/next/recommended",
   ],
   plugins: [],
   settings: {

package.json

@@ -9,20 +9,17 @@
   },
   "dependencies": {
     "@nivo/line": "^0.64.0",
-    "autoprefixer": "^9",
     "eslint-config-next": "^13.1.1",
     "glana": "^0.4.3",
     "global": "^4.4.0",
     "lodash": "^4.17.21",
     "luxon": "^2.4.0",
     "mapbox-gl": "^2.2.0",
     "next": "^13.1.1",
-    "postcss": "^7",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "rollbar": "^2.20.0",
-    "sharp": "^0.30.7",
-    "tailwindcss": "npm:@tailwindcss/postcss7-compat"
+    "sharp": "^0.30.7"
   },
   "devDependencies": {
     "@testing-library/jest-dom": "^5.11.6",
@@ -36,17 +33,19 @@
     "@types/react-dom": "^17.0.0",
     "@types/react-modal": "^3.10.6",
     "@types/resize-observer-browser": "^0.1.4",
-    "autoprefixer": "^9",
+    "autoprefixer": "^10.4.13",
     "babel-jest": "^26.6.3",
     "eslint": "^8.31.0",
     "eslint-config-prettier": "^8.6.0",
     "eslint-config-react-app": "^7.0.1",
     "eslint-plugin-prettier": "^4.2.1",
     "eslint-plugin-react-hooks": "^4.6.0",
     "jest": "^26.6.3",
+    "postcss": "^8.4.21",
     "postcss-preset-env": "^6.7.0",
     "prettier": "^2.8.1",
     "styled-jsx-plugin-postcss": "^3.0.2",
+    "tailwindcss": "^3.2.4",
     "typescript": "^4.9.4"
   }
 }

pages/404.tsx

@@ -1,3 +1,5 @@
+import Link from "next/link";
+
 export default function Error404() {
   return (
     <div className="flex flex-col h-screen w-screen bg-gray-800 items-center justify-center">
@@ -11,9 +13,9 @@ export default function Error404() {
         <div className="mt-4">
           <span className="text-gray-700">
             Go back to the{" "}
-            <a href="/" className="text-primary">
+            <Link href="/" className="text-primary">
               homepage
-            </a>
+            </Link>
             .
           </span>
         </div>

pages/_error.tsx

@@ -1,3 +1,5 @@
+import Link from "next/link";
+
 export default function Error() {
   return (
     <div className="flex flex-col h-screen w-screen bg-gray-800 items-center justify-center">
@@ -11,9 +13,9 @@ export default function Error() {
         <div className="mt-4">
           <span className="text-gray-700">
             You can manually upload a flight{" "}
-            <a href="/" className="text-primary">
+            <Link href="/" className="text-primary">
               here
-            </a>
+            </Link>
             .
           </span>
         </div>

pages/failed_to_load_flight.tsx

@@ -1,3 +1,5 @@
+import Link from "next/link";
+
 export default function FailedToLoadFlight() {
   return (
     <div className="flex flex-col h-screen w-screen bg-gray-800 items-center justify-center">
@@ -11,9 +13,9 @@ export default function FailedToLoadFlight() {
         <div className="mt-4">
           <span className="text-gray-700">
             You can manually upload a flight{" "}
-            <a href="/" className="text-primary">
+            <Link href="/" className="text-primary">
               here
-            </a>
+            </Link>
             .
           </span>
         </div>

src/flight_analysis/components/flights_screen/task_tab.tsx

@@ -79,8 +79,13 @@ function TaskRow(props: TaskRowProps) {
   const clickTask = useCallback(() => onClick(task), [onClick, task]);
 
   let containerClasses =
-    "rounded border border-gray-600 p-3 shadow hover:border-primary cursor-pointer mb-2";
-  if (isActive) containerClasses += " border-primary";
+    "rounded border p-3 shadow hover:border-primary cursor-pointer mb-2";
+
+  if (isActive) {
+    containerClasses += " border-primary";
+  } else {
+    containerClasses += " border-gray-600";
+  }
 
   return (
     <div className={containerClasses} onClick={clickTask}>

src/flight_analysis/components/main_screen/picture.tsx

@@ -1,3 +1,4 @@
+import Image from "next/image";
 import { Picture as PictureModel } from "../../store/models/flight_datum";
 
 interface Props {
@@ -15,7 +16,7 @@ export default function Picture(props: Props) {
     >
       <div className="absolute top-0 left-0 h-full w-full opacity-50 bg-gray-800" />
       <div className="relative max-h-full max-w-full">
-        <img
+        <Image
           src={picture.url}
           alt={picture.title || "In-flight picture"}
           className="block"

src/flight_analysis/components/upload_screen.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable @next/next/no-html-link-for-pages */
 import FileInput from "../../ui/components/file_input";
 import { useFlightAnalysisDispatch } from "../store";
 import { actions } from "../store/actions";

tailwind.config.js

@@ -1,16 +1,10 @@
 const colors = require("tailwindcss/colors");
 
 module.exports = {
-  purge: [
-    "./src/**/*.css",
-    "./src/**/*.jsx",
-    "./src/**/*.tsx",
-    "./pages/**/*.tsx",
-  ],
-  darkMode: false,
+  content: ["./src/**/*.{tsx,jsx,css}", "./pages/**/*.tsx"],
   theme: {
     colors: {
-      gray: colors.blueGray,
+      gray: colors.slate,
       white: colors.white,
       black: colors.black,
       primary: { ...colors.teal, DEFAULT: colors.teal["500"] },