chore(frontend): upgrade to tailwind v2

docker-compose.yml

@@ -42,6 +42,7 @@ services:
     command: ["npm", "run", "start"]
     volumes:
       - ./frontend/postcss.config.js:/app/frontend/postcss.config.js:ro
+      - ./frontend/tailwind.config.js:/app/frontend/tailwind.config.js:ro
       - ./frontend/src:/app/frontend/src:ro
       - ./frontend/public:/app/frontend/public:ro
       - tailwind-output:/app/frontend/src/tailwind/

frontend/package.json

@@ -8,7 +8,7 @@
   },
   "license": "MIT",
   "dependencies": {
-    "@fullhuman/postcss-purgecss": "2.3.0",
+    "@fullhuman/postcss-purgecss": "4.0.3",
     "@testing-library/jest-dom": "5.11.6",
     "@testing-library/react": "11.1.2",
     "@testing-library/user-event": "12.2.2",
@@ -18,19 +18,20 @@
     "@types/react-dom": "16.9.9",
     "@types/react-router-dom": "5.1.6",
     "@types/recharts": "1.8.16",
-    "autoprefixer": "9.8.6",
+    "autoprefixer": "10.2.5",
     "axios": "0.21.1",
     "date-fns": "2.16.1",
     "npm-run-all": "4.1.5",
-    "postcss-cli": "7.1.2",
-    "postcss-import": "12.0.1",
+    "postcss": "8.3.0",
+    "postcss-cli": "8.3.1",
+    "postcss-import": "14.0.2",
     "prettier": "2.1.2",
     "react": "17.0.1",
     "react-dom": "17.0.1",
     "react-router-dom": "5.2.0",
     "react-scripts": "4.0.0",
     "recharts": "1.8.5",
-    "tailwindcss": "1.9.6",
+    "tailwindcss": "2.1.2",
     "typescript": "4.0.5"
   },
   "scripts": {

frontend/src/components/LoginFailure.tsx

@@ -9,7 +9,7 @@ export const LoginFailure: React.FC = () => {
 
   return (
     <div
-      className="bg-orange-100 border-l-4 border-orange-500 text-orange-700 p-4 m-8"
+      className="bg-yellow-100 border-l-4 border-yellow-500 text-yellow-700 p-4 m-8"
       role="alert"
     >
       <p className="font-bold">Login Failure</p>

frontend/src/components/RecentListens.tsx

@@ -139,7 +139,7 @@ const ListenItem: React.FC<{ listen: Listen }> = ({ listen }) => {
       <div className="md:w-1/2 font-bold">{trackName}</div>
       <div className=" md:w-1/3">{artists}</div>
       <div
-        className="md:w-1/6 text-gray-500 font-thin text-sm"
+        className="md:w-1/6 text-gray-500 font-extra-light text-sm"
         title={dateTime}
       >
         {timeAgo}

frontend/src/components/ReportListens.tsx

@@ -56,7 +56,7 @@ export const ReportListens: React.FC = () => {
             <div className="text-gray-700">
               <label className="text-sm">Timeframe</label>
               <select
-                className="block appearance-none min-w-full md:win-w-0 md:w-1/4 bg-white border border-gray-400 hover:border-gray-500 p-2 rounded shadow leading-tight focus:outline-none focus:shadow-outline"
+                className="block appearance-none min-w-full md:win-w-0 md:w-1/4 bg-white border border-gray-400 hover:border-gray-500 p-2 rounded shadow leading-tight focus:outline-none focus:ring"
                 onChange={(e) =>
                   setTimeFrame(
                     e.target.value as "day" | "week" | "month" | "year"

frontend/src/components/ReportTimeOptions.tsx

@@ -27,7 +27,7 @@ export const ReportTimeOptions: React.FC<ReportTimeOptionsProps> = ({
       <div className="text-gray-700">
         <label className="text-sm">Timeframe</label>
         <select
-          className="block appearance-none min-w-full md:w-1/4 bg-white border border-gray-400 hover:border-gray-500 p-2 rounded shadow leading-tight focus:outline-none focus:shadow-outline"
+          className="block appearance-none min-w-full md:w-1/4 bg-white border border-gray-400 hover:border-gray-500 p-2 rounded shadow leading-tight focus:outline-none focus:ring"
           onChange={(e) =>
             setTimeOptions({
               ...timeOptions,

frontend/src/components/inputs/DateSelect.tsx

@@ -21,7 +21,7 @@ export const DateSelect: React.FC<DateSelectProps> = ({
     <div>
       <label className="text-sm">{label}</label>
       <input
-        className="block appearance-none min-w-full md:win-w-0 md:w-1/4 bg-white border border-gray-400 hover:border-gray-500 p-2 rounded shadow leading-tight focus:outline-none focus:shadow-outline"
+        className="block appearance-none min-w-full md:win-w-0 md:w-1/4 bg-white border border-gray-400 hover:border-gray-500 p-2 rounded shadow leading-tight focus:outline-none focus:ring"
         type="date"
         value={formatDateForDateInput(value)}
         onChange={(e) => onChange(parseDateFromDateInput(e.target.value))}

frontend/tailwind.config.js

@@ -1,6 +1,44 @@
+const colors = require("tailwindcss/colors");
+
 module.exports = {
   purge: {
     // css is purged via postcss-purgecss
     enabled: false,
   },
+  theme: {
+    colors: {
+      transparent: "transparent",
+      current: "currentColor",
+
+      black: "#000",
+      white: "#fff",
+
+      // Tailwind v1 Colors
+      gray: {
+        100: "#f7fafc",
+        200: "#edf2f7",
+        300: "#e2e8f0",
+        400: "#cbd5e0",
+        500: "#a0aec0",
+        600: "#718096",
+        700: "#4a5568",
+        800: "#2d3748",
+        900: "#1a202c",
+      },
+
+      green: {
+        100: "#f0fff4",
+        200: "#c6f6d5",
+        300: "#9ae6b4",
+        400: "#68d391",
+        500: "#48bb78",
+        600: "#38a169",
+        700: "#2f855a",
+        800: "#276749",
+        900: "#22543d",
+      },
+
+      yellow: colors.yellow,
+    },
+  },
 };