chore: update web dependencies (#102)

* chore: update deps

* chore: remove craco

* chore: fix exports

* fix: filters list indexer bg

* fix: extend theme with correct color

web/craco.config.js

@@ -1,10 +0,0 @@
-module.exports = {
-    style: {
-        postcss: {
-            plugins: [
-                require('tailwindcss'),
-                require('autoprefixer'),
-            ],
-        },
-    },
-}

web/package.json

@@ -5,7 +5,6 @@
   "proxy": "http://127.0.0.1:8989",
   "homepage": ".",
   "dependencies": {
-    "@craco/craco": "^6.1.2",
     "@headlessui/react": "^1.2.0",
     "@heroicons/react": "^1.0.1",
     "date-fns": "^2.25.0",
@@ -18,15 +17,15 @@
     "react-query": "^3.18.1",
     "react-ridge-state": "^4.2.2",
     "react-router-dom": "^5.2.0",
-    "react-scripts": "4.0.3",
+    "react-scripts": "^5.0.0",
     "react-select": "5.0.0-beta.0",
     "react-table": "^7.7.0",
     "web-vitals": "^1.0.1"
   },
   "scripts": {
-    "start": "craco start",
-    "build": "craco build",
-    "test": "craco test",
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test",
     "eject": "react-scripts eject"
   },
   "eslintConfig": {
@@ -48,19 +47,19 @@
     ]
   },
   "devDependencies": {
-    "autoprefixer": "^9",
-    "postcss": "^7",
-    "typescript": "^4.1.2",
-    "tailwindcss": "npm:@tailwindcss/postcss7-compat",
-    "@tailwindcss/forms": "^0.3.2",
+    "@tailwindcss/forms": "^0.4.0",
     "@testing-library/jest-dom": "^5.11.4",
     "@testing-library/react": "^11.1.0",
     "@testing-library/user-event": "^12.1.10",
-    "@types/react-router-dom": "^5.1.7",
-    "@types/react-table": "^7.7.7",
     "@types/jest": "^26.0.15",
     "@types/node": "^12.0.0",
     "@types/react": "^17.0.0",
-    "@types/react-dom": "^17.0.0"
+    "@types/react-dom": "^17.0.0",
+    "@types/react-router-dom": "^5.1.7",
+    "@types/react-table": "^7.7.7",
+    "autoprefixer": "^10.4.2",
+    "postcss": "^8.4.6",
+    "tailwindcss": "^3.0.18",
+    "typescript": "^4.1.2"
   }
 }

web/postcss.config.js

@@ -0,0 +1,6 @@
+module.exports = {  
+    plugins: {    
+        tailwindcss: {},    
+        autoprefixer: {},  
+    }
+}

web/src/App.tsx

@@ -21,7 +21,7 @@ function Protected() {
 
 export const queryClient = new QueryClient();
 
-function App() {
+export function App() {
     const authContext = AuthContext.useValue();
     const settings = SettingsContext.useValue();
     return (
@@ -39,6 +39,4 @@ function App() {
             ) : null}
         </QueryClientProvider>
     )
-};
-
-export default App;
+};

web/src/index.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 import './index.css';
 
-import App from "./App";
+import { App } from "./App";
 
 import { InitializeGlobalContext } from "./utils/Context";
 

web/src/screens/Dashboard.tsx

@@ -1,6 +1,5 @@
 import formatDistanceToNowStrict from 'date-fns/formatDistanceToNowStrict'
 import React from 'react'
-import App from '../App'
 import { useTable, useFilters, useGlobalFilter, useSortBy, usePagination } from 'react-table'
 import APIClient from '../api/APIClient'
 import { useQuery } from 'react-query'
@@ -699,5 +698,3 @@ function DataTablee() {
     </div>
   )
 }
-
-export default App;

web/src/screens/filters/list.tsx

@@ -160,7 +160,7 @@ function FilterListItem({ filter, idx }: FilterListItemProps) {
                 </Link>
                 </td>
             <td className="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">{filter.indexers && filter.indexers.map(t =>
-                <span key={t.id} className="mr-2 inline-flex items-center px-2.5 py-0.5 rounded-md text-sm font-medium bg-gray-100 dark:bg-gray-700 text-gray-800 dark:text-gray-400">{t.name}</span>)}</td>
+                <span key={t.id} className="mr-2 inline-flex items-center px-2.5 py-0.5 rounded-md text-sm font-medium bg-gray-200 dark:bg-gray-700 text-gray-800 dark:text-gray-400">{t.name}</span>)}</td>
             <td className="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
                 <Link to={`filters/${filter.id.toString()}`} className="text-indigo-600 dark:text-gray-200 hover:text-indigo-900 dark:hover:text-gray-400">
                     Edit

web/tailwind.config.js

@@ -1,32 +1,30 @@
 const colors = require('tailwindcss/colors')
 
 module.exports = {
-    purge: {
-        content: [
-            './src/**/*.{tsx,ts,html,css}',
-        ],
-        safelist: [
-            'col-span-1',
-            'col-span-2',
-            'col-span-3',
-            'col-span-4',
-            'col-span-5',
-            'col-span-6',
-            'col-span-7',
-            'col-span-8',
-            'col-span-9',
-            'col-span-10',
-            'col-span-11',
-            'col-span-12',
-        ],
-    },
+    content: [
+        './src/**/*.{tsx,ts,html,css}',
+    ],
+    safelist: [
+        'col-span-1',
+        'col-span-2',
+        'col-span-3',
+        'col-span-4',
+        'col-span-5',
+        'col-span-6',
+        'col-span-7',
+        'col-span-8',
+        'col-span-9',
+        'col-span-10',
+        'col-span-11',
+        'col-span-12',
+    ],
+    // purge: false,
     darkMode: 'class', // or 'media' or 'class'
     theme: {
         extend: {
             colors: {
-                gray: colors.gray,
-                teal: colors.teal,
-            }
+                gray: colors.zinc,
+            },
         },
     },
     variants: {