From 9a4ca4a1094639c1d3e188009fa48d3f26e58c33 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Thomas=20Sch=C3=B6nmann?= <tom@flaming.codes>
Date: Wed, 25 May 2022 22:59:29 +0000
Subject: [PATCH 1/3] chore: remove tailwind-filter

---
 components/dashboard/src/provider-utils.tsx | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/components/dashboard/src/provider-utils.tsx b/components/dashboard/src/provider-utils.tsx
index 474073ba63a2f6..af0fe245ed233c 100644
--- a/components/dashboard/src/provider-utils.tsx
+++ b/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 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 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 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 grayscale w-5 h-5 ml-3 mr-3 my-auto" src={bitbucket} />;
         default:
             return <></>;
     }

From 2b5d15c79223672250cdd499e13d8920c11eeb7e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Thomas=20Sch=C3=B6nmann?= <tom@flaming.codes>
Date: Wed, 25 May 2022 23:05:22 +0000
Subject: [PATCH 2/3] chore: remove tailwind-filters

---
 components/dashboard/package.json                 |  1 -
 components/dashboard/src/Menu.tsx                 |  4 ++--
 components/dashboard/src/components/CheckBox.tsx  |  2 +-
 components/dashboard/src/index.css                |  5 ++---
 components/dashboard/src/projects/NewProject.tsx  |  6 +++---
 .../dashboard/src/settings/Integrations.tsx       |  4 ++--
 components/dashboard/src/settings/SelectIDE.tsx   |  2 +-
 components/dashboard/src/settings/Teams.tsx       |  2 +-
 components/dashboard/tailwind.config.js           | 15 +++++----------
 yarn.lock                                         |  7 -------
 10 files changed, 17 insertions(+), 31 deletions(-)

diff --git a/components/dashboard/package.json b/components/dashboard/package.json
index 197960c5a22765..0c1369acb8d1ce 100644
--- a/components/dashboard/package.json
+++ b/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"
   },
diff --git a/components/dashboard/src/Menu.tsx b/components/dashboard/src/Menu.tsx
index 2d7207fb3529ab..2a2d3db321e2b3 100644
--- a/components/dashboard/src/Menu.tsx
+++ b/components/dashboard/src/Menu.tsx
@@ -352,7 +352,7 @@ export default function Menu() {
                             <img
                                 alt=""
                                 aria-label="Toggle team selection menu"
-                                className="filter-grayscale"
+                                className="grayscale"
                                 style={{ marginTop: 5, marginBottom: 5 }}
                                 src={CaretUpDown}
                             />
@@ -370,7 +370,7 @@ export default function Menu() {
                 )}
                 {prebuildId && (
                     <div className="flex h-full ml-2 py-1">
-                        <img alt="" className="mr-3 filter-grayscale m-auto transform -rotate-90" src={CaretDown} />
+                        <img alt="" className="mr-3 grayscale m-auto transform -rotate-90" src={CaretDown} />
                         <span className="text-base text-gray-600 dark:text-gray-400 font-semibold">{prebuildId}</span>
                     </div>
                 )}
diff --git a/components/dashboard/src/components/CheckBox.tsx b/components/dashboard/src/components/CheckBox.tsx
index ecb0e4efcd8d88..47b4ec84c1e03a 100644
--- a/components/dashboard/src/components/CheckBox.tsx
+++ b/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 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"
diff --git a/components/dashboard/src/index.css b/components/dashboard/src/index.css
index a6f669a7539b43..7b74faa2cdb504 100644
--- a/components/dashboard/src/index.css
+++ b/components/dashboard/src/index.css
@@ -40,9 +40,8 @@
     .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%);
     }
diff --git a/components/dashboard/src/projects/NewProject.tsx b/components/dashboard/src/projects/NewProject.tsx
index 7470529c33322b..c905ae125beec3 100644
--- a/components/dashboard/src/projects/NewProject.tsx
+++ b/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="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="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`}
+                                    } grayscale absolute top-1/2 right-3 cursor-pointer`}
                                 />
                             )}
                         </div>
diff --git a/components/dashboard/src/settings/Integrations.tsx b/components/dashboard/src/settings/Integrations.tsx
index 099e7340c7ebff..0a3d18c6bc0b49 100644
--- a/components/dashboard/src/settings/Integrations.tsx
+++ b/components/dashboard/src/settings/Integrations.tsx
@@ -288,7 +288,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 brightness-10" src={exclamation} />
                     <span className="text-white">{errorMessage}</span>
                 </div>
             )}
@@ -857,7 +857,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 brightness-10" src={exclamation} />
                         <span className="text-white">{errorMessage || validationError}</span>
                     </div>
                 )}
diff --git a/components/dashboard/src/settings/SelectIDE.tsx b/components/dashboard/src/settings/SelectIDE.tsx
index 247468cae7a34c..1af57c17bec73d 100644
--- a/components/dashboard/src/settings/SelectIDE.tsx
+++ b/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 grayscale self-center" src={option.logo} alt="logo" />
             </div>
             {label ? (
                 <div
diff --git a/components/dashboard/src/settings/Teams.tsx b/components/dashboard/src/settings/Teams.tsx
index d5e711d6e4735f..fcd147e1b8945a 100644
--- a/components/dashboard/src/settings/Teams.tsx
+++ b/components/dashboard/src/settings/Teams.tsx
@@ -1031,7 +1031,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 brightness-10" src={exclamation} />
                     <span className="text-white text-sm">{errorMsg}</span>
                 </div>
             )}
diff --git a/components/dashboard/tailwind.config.js b/components/dashboard/tailwind.config.js
index 16c6d2d7628c83..28413939169cba 100644
--- a/components/dashboard/tailwind.config.js
+++ b/components/dashboard/tailwind.config.js
@@ -41,6 +41,9 @@ module.exports = {
             outline: {
                 blue: '1px solid #000033',
             },
+            brightness: {
+                10: 0.1
+            }
         },
         fontFamily: {
             sans: [
@@ -77,24 +80,16 @@ module.exports = {
             'small': '2px',
             'medium': '5px',
         },
-        filter: { // defaults to {}
-            // https://github.com/benface/tailwindcss-filters#usage
-            'none': 'none',
-            'grayscale': 'grayscale(1)',
-            'invert': 'invert(1)',
-            'brightness-10': 'brightness(10)',
-        },
     },
     variants: {
         extend: {
             opacity: ['disabled'],
             display: ['dark'],
+            invert: ['dark'],
         }
     },
     plugins: [
         require('@tailwindcss/forms'),
         require('tailwind-underline-utils'),
-        require('tailwindcss-filters'),
-        // ...
     ],
-};
\ No newline at end of file
+};
diff --git a/yarn.lock b/yarn.lock
index a0e96725fa4739..d797657cfbe063 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -16614,13 +16614,6 @@ tailwind-underline-utils@^1.1.2:
   resolved "https://registry.yarnpkg.com/tailwind-underline-utils/-/tailwind-underline-utils-1.1.3.tgz#e3c874d24679f1943b193cd57a0c2723b399f42f"
   integrity sha512-8FSynb8KOBFj7Y1wurCzx0MBAQtdOuRWlCk5wXFImI5ZfJ2yiRLvNbybiJ6pjWz5Htr+lStnowcTXl/00s8xRw==
 
-tailwindcss-filters@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/tailwindcss-filters/-/tailwindcss-filters-3.0.0.tgz#d5d40ca018a54b1aa2bdc57aeb6677529c24c8d8"
-  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.yarnpkg.com/tapable/-/tapable-1.1.3.tgz#a1fccc06b58db61fd7a45da2da44f5f3a3e67ba2"

From 2aa0516de62ac0859d5d3cc2cbbce67b00ff04b5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Thomas=20Sch=C3=B6nmann?= <tom@flaming.codes>
Date: Thu, 26 May 2022 20:39:50 +0000
Subject: [PATCH 3/3] fix: add missing utility class

---
 components/dashboard/src/Menu.tsx                  | 4 ++--
 components/dashboard/src/components/CheckBox.tsx   | 2 +-
 components/dashboard/src/index.css                 | 1 -
 components/dashboard/src/projects/NewProject.tsx   | 6 +++---
 components/dashboard/src/provider-utils.tsx        | 8 ++++----
 components/dashboard/src/settings/Integrations.tsx | 4 ++--
 components/dashboard/src/settings/SelectIDE.tsx    | 3 ++-
 components/dashboard/src/settings/Teams.tsx        | 2 +-
 8 files changed, 15 insertions(+), 15 deletions(-)

diff --git a/components/dashboard/src/Menu.tsx b/components/dashboard/src/Menu.tsx
index 2a2d3db321e2b3..4391bbf6576fb2 100644
--- a/components/dashboard/src/Menu.tsx
+++ b/components/dashboard/src/Menu.tsx
@@ -352,7 +352,7 @@ export default function Menu() {
                             <img
                                 alt=""
                                 aria-label="Toggle team selection menu"
-                                className="grayscale"
+                                className="filter grayscale"
                                 style={{ marginTop: 5, marginBottom: 5 }}
                                 src={CaretUpDown}
                             />
@@ -370,7 +370,7 @@ export default function Menu() {
                 )}
                 {prebuildId && (
                     <div className="flex h-full ml-2 py-1">
-                        <img alt="" className="mr-3 grayscale m-auto transform -rotate-90" src={CaretDown} />
+                        <img alt="" className="mr-3 filter grayscale m-auto transform -rotate-90" src={CaretDown} />
                         <span className="text-base text-gray-600 dark:text-gray-400 font-semibold">{prebuildId}</span>
                     </div>
                 )}
diff --git a/components/dashboard/src/components/CheckBox.tsx b/components/dashboard/src/components/CheckBox.tsx
index 47b4ec84c1e03a..a41f365cb97bfb 100644
--- a/components/dashboard/src/components/CheckBox.tsx
+++ b/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: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"
diff --git a/components/dashboard/src/index.css b/components/dashboard/src/index.css
index 7b74faa2cdb504..739748fb596aa3 100644
--- a/components/dashboard/src/index.css
+++ b/components/dashboard/src/index.css
@@ -41,7 +41,6 @@
         @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;
     }
 
-
     .grayed {
         filter: grayscale(100%);
     }
diff --git a/components/dashboard/src/projects/NewProject.tsx b/components/dashboard/src/projects/NewProject.tsx
index c905ae125beec3..b0b9fe6ea4326a 100644
--- a/components/dashboard/src/projects/NewProject.tsx
+++ b/components/dashboard/src/projects/NewProject.tsx
@@ -412,13 +412,13 @@ export default function NewProject() {
                                 <img
                                     src={CaretDown}
                                     title="Select Account"
-                                    className="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="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" : ""
-                                    } grayscale absolute top-1/2 right-3 cursor-pointer`}
+                                    } filter grayscale absolute top-1/2 right-3 cursor-pointer`}
                                 />
                             )}
                         </div>
diff --git a/components/dashboard/src/provider-utils.tsx b/components/dashboard/src/provider-utils.tsx
index af0fe245ed233c..71bea0edc8ad60 100644
--- a/components/dashboard/src/provider-utils.tsx
+++ b/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: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 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 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 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 <></>;
     }
diff --git a/components/dashboard/src/settings/Integrations.tsx b/components/dashboard/src/settings/Integrations.tsx
index 0a3d18c6bc0b49..f145fc599be8a3 100644
--- a/components/dashboard/src/settings/Integrations.tsx
+++ b/components/dashboard/src/settings/Integrations.tsx
@@ -288,7 +288,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 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>
             )}
@@ -857,7 +857,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 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>
                 )}
diff --git a/components/dashboard/src/settings/SelectIDE.tsx b/components/dashboard/src/settings/SelectIDE.tsx
index 1af57c17bec73d..3966f9e36d2f29 100644
--- a/components/dashboard/src/settings/SelectIDE.tsx
+++ b/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 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;
 }
diff --git a/components/dashboard/src/settings/Teams.tsx b/components/dashboard/src/settings/Teams.tsx
index fcd147e1b8945a..4af4ed28408c6a 100644
--- a/components/dashboard/src/settings/Teams.tsx
+++ b/components/dashboard/src/settings/Teams.tsx
@@ -1031,7 +1031,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 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>
             )}