[dashboard] remove deprecated tailwind-filter

components/dashboard/package.json

@@ -46,7 +46,6 @@
     "react-scripts": "^4.0.3",
     "tailwind-underline-utils": "^1.1.2",
     "tailwindcss": "npm:@tailwindcss/postcss7-compat@^2.2.4",
-    "tailwindcss-filters": "^3.0.0",
     "typescript": "~4.4.2",
     "web-vitals": "^1.1.1"
   },

components/dashboard/src/components/CheckBox.tsx

@@ -27,7 +27,7 @@ function CheckBox(props: {
         <div className="flex mt-4 max-w-2xl">
             <input
                 className={
-                    "h-4 w-4 focus:ring-0 mt-1 rounded cursor-pointer bg-transparent border-2 dark:filter-invert border-gray-800 dark:border-gray-900 focus:border-gray-900 dark:focus:border-gray-800 " +
+                    "h-4 w-4 focus:ring-0 mt-1 rounded cursor-pointer bg-transparent border-2 filter dark:invert border-gray-800 dark:border-gray-900 focus:border-gray-900 dark:focus:border-gray-800 " +
                     (props.checked ? "bg-gray-800 dark:bg-gray-900" : "")
                 }
                 type="checkbox"

components/dashboard/src/index.css

@@ -40,9 +40,7 @@
     .btn-login {
         @apply rounded-md border-none bg-gray-100 hover:bg-gray-200 text-gray-500 dark:text-gray-200 dark:bg-gray-800 dark:hover:bg-gray-600;
     }
-    .dark .dark\:filter-invert {
-        @apply filter-invert;
-    }
+
     .grayed {
         filter: grayscale(100%);
     }

components/dashboard/src/projects/NewProject.tsx

@@ -412,13 +412,13 @@ export default function NewProject() {
                                 <img
                                     src={CaretDown}
                                     title="Select Account"
-                                    className="filter-grayscale absolute top-1/2 right-3"
+                                    className="filter grayscale absolute top-1/2 right-3"
                                 />
                             </div>
                         </ContextMenu>
                         {showSearchInput && (
                             <div className="w-full relative ">
-                                <img src={search} title="Search" className="filter-grayscale absolute top-1/3 left-3" />
+                                <img src={search} title="Search" className="filter grayscale absolute top-1/3 left-3" />
                                 <input
                                     className="w-96 pl-10 border-0"
                                     type="text"
@@ -603,7 +603,7 @@ export default function NewProject() {
                                     title="Select Account"
                                     className={`${
                                         showNewTeam ? "transform rotate-180" : ""
-                                    } filter-grayscale absolute top-1/2 right-3 cursor-pointer`}
+                                    } filter grayscale absolute top-1/2 right-3 cursor-pointer`}
                                 />
                             )}
                         </div>

components/dashboard/src/provider-utils.tsx

@@ -12,13 +12,13 @@ import { gitpodHostUrl } from "./service/service";
 function iconForAuthProvider(type: string) {
     switch (type) {
         case "GitHub":
-            return <img className="fill-current dark:filter-invert w-5 h-5 ml-3 mr-3 my-auto" src={github} />;
+            return <img className="fill-current filter dark:invert w-5 h-5 ml-3 mr-3 my-auto" src={github} />;
         case "GitLab":
-            return <img className="fill-current filter-grayscale w-5 h-5 ml-3 mr-3 my-auto" src={gitlab} />;
+            return <img className="fill-current filter grayscale w-5 h-5 ml-3 mr-3 my-auto" src={gitlab} />;
         case "Bitbucket":
-            return <img className="fill-current filter-grayscale w-5 h-5 ml-3 mr-3 my-auto" src={bitbucket} />;
+            return <img className="fill-current filter grayscale w-5 h-5 ml-3 mr-3 my-auto" src={bitbucket} />;
         case "BitbucketServer":
-            return <img className="fill-current filter-grayscale w-5 h-5 ml-3 mr-3 my-auto" src={bitbucket} />;
+            return <img className="fill-current filter grayscale w-5 h-5 ml-3 mr-3 my-auto" src={bitbucket} />;
         default:
             return <></>;
     }

components/dashboard/src/settings/Integrations.tsx

@@ -283,7 +283,7 @@ function GitProviders() {
 
             {errorMessage && (
                 <div className="flex rounded-md bg-red-600 p-3 mb-4">
-                    <img className="w-4 h-4 mx-2 my-auto filter-brightness-10" src={exclamation} />
+                    <img className="w-4 h-4 mx-2 my-auto filter brightness-10" src={exclamation} />
                     <span className="text-white">{errorMessage}</span>
                 </div>
             )}
@@ -852,7 +852,7 @@ export function GitIntegrationModal(
 
                 {(errorMessage || validationError) && (
                     <div className="flex rounded-md bg-red-600 p-3">
-                        <img className="w-4 h-4 mx-2 my-auto filter-brightness-10" src={exclamation} />
+                        <img className="w-4 h-4 mx-2 my-auto filter brightness-10" src={exclamation} />
                         <span className="text-white">{errorMessage || validationError}</span>
                     </div>
                 )}

components/dashboard/src/settings/SelectIDE.tsx

@@ -181,7 +181,7 @@ function renderIdeOption(option: IDEOption, selected: boolean, onSelect: () => v
     const card = (
         <SelectableCardSolid className="w-36 h-40" title={option.title} selected={selected} onClick={onSelect}>
             <div className="flex justify-center mt-3">
-                <img className="w-16 filter-grayscale self-center" src={option.logo} alt="logo" />
+                <img className="w-16 filter grayscale self-center" src={option.logo} alt="logo" />
             </div>
             {label ? (
                 <div
@@ -200,5 +200,6 @@ function renderIdeOption(option: IDEOption, selected: boolean, onSelect: () => v
     if (option.tooltip) {
         return <Tooltip content={option.tooltip}>{card}</Tooltip>;
     }
+
     return card;
 }

components/dashboard/src/settings/Teams.tsx

@@ -1026,7 +1026,7 @@ function SlotInput(props: { slot: Slot; inputHandler: SlotInputHandler }) {
             )}
             {errorMsg && (
                 <div className="flex rounded-md bg-red-600 p-3">
-                    <img className="w-4 h-4 mx-2 my-auto filter-brightness-10" src={exclamation} />
+                    <img className="w-4 h-4 mx-2 my-auto filter brightness-10" src={exclamation} />
                     <span className="text-white text-sm">{errorMsg}</span>
                 </div>
             )}

components/dashboard/tailwind.config.js

@@ -42,6 +42,9 @@ module.exports = {
                 112: "28rem",
                 128: "32rem",
             },
+            brightness: {
+                10: 0.1
+            }
         },
         fontFamily: {
             sans: [
@@ -88,7 +91,5 @@ module.exports = {
     plugins: [
         require("@tailwindcss/forms"),
         require("tailwind-underline-utils"),
-        require("tailwindcss-filters"),
-        // ...
     ],
 };

yarn.lock

@@ -16630,13 +16630,6 @@ tailwind-underline-utils@^1.1.2:
   resolved "https://registry.npmjs.org/tailwind-underline-utils/-/tailwind-underline-utils-1.1.3.tgz"
   integrity sha512-8FSynb8KOBFj7Y1wurCzx0MBAQtdOuRWlCk5wXFImI5ZfJ2yiRLvNbybiJ6pjWz5Htr+lStnowcTXl/00s8xRw==
 
-tailwindcss-filters@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.npmjs.org/tailwindcss-filters/-/tailwindcss-filters-3.0.0.tgz"
-  integrity sha512-xhortqs8fSp9id17EnneYhmruA5DfU6K0zvN6/mgDlEXKaHthjXlR74Ta+4lrX5Lp7tp6YigB09WO0TOWn7VEQ==
-  dependencies:
-    lodash "^4.17.15"
-
 tapable@^1.0.0, tapable@^1.1.3:
   version "1.1.3"
   resolved "https://registry.npmjs.org/tapable/-/tapable-1.1.3.tgz"