fix: add missing utility class

Author: flaming-codes

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>
                 )}

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"

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%);
     }

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>

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 <></>;
     }

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>
                 )}

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;
 }

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>
             )}