[dashboard] fix toast contrast (#20630)

* [dashboard] fix toast contrast Tool: gitpod/catfood.gitpod.cloud * driveby: less `isGitpodIo` Tool: gitpod/catfood.gitpod.cloud * Align colors with info alert Tool: gitpod/catfood.gitpod.cloud
gitpod-io · Feb 25, 2025 · 0fd821f · 0fd821f
1 parent 56376cf
commit 0fd821f
Showing 2 changed files with 10 additions and 7 deletions.
diff --git a/components/dashboard/src/components/toasts/Toast.tsx b/components/dashboard/src/components/toasts/Toast.tsx
@@ -71,25 +71,25 @@ export const Toast: FC<Props> = ({ id, message, duration = 5000, autoHide = true
                 "relative flex justify-between items-start",
                 "w-full md:w-112 max-w-full",
                 "p-4 md:rounded-md",
-                "bg-gray-800 dark:bg-gray-50",
-                "text-white dark:text-gray-800",
+                "dark:bg-gray-100 bg-gray-700",
+                "dark:text-gray-500 text-gray-300", // colors taken from src/components/Alert.tsx "info" variant
                 "transition-transform animate-toast-in-right",
             )}
             onMouseEnter={onMouseEnter}
             onMouseLeave={onMouseLeave}
             role="alert"
             aria-labelledby={elId}
         >
-            <div className="flex-grow text-white dark:text-gray-800" id={elId}>
-                {typeof message === "string" ? <p>{message}</p> : message}
+            <div className="flex-grow" id={elId}>
+                {typeof message === "string" ? <span>{message}</span> : message}
             </div>
             <div>
                 <Button
                     variant="ghost"
                     // TODO: Determine if we can lift this button style into a variant
                     className={cn(
                         "p-2 ml-2 -mt-1",
-                        "text-white hover:text-gray-300 dark:text-gray-800 dark:hover:text-gray-600",
+                        "text-pk-content-invert-primary hover:text-pk-content-invert-secondary",
                     )}
                     onClick={handleRemove}
                 >

diff --git a/components/dashboard/src/teams/TeamPolicies.tsx b/components/dashboard/src/teams/TeamPolicies.tsx
@@ -4,7 +4,6 @@
  * See License.AGPL.txt in the project root for license information.
  */
 
-import { isGitpodIo } from "../utils";
 import { OrganizationSettings } from "@gitpod/public-api/lib/gitpod/v1/organization_pb";
 import { FormEvent, useCallback, useEffect, useState } from "react";
 import Alert from "../components/Alert";
@@ -32,6 +31,7 @@ import { EditorOptions } from "./policies/EditorOptions";
 import { RolePermissionsRestrictions } from "./policies/RoleRestrictions";
 import { OrgWorkspaceClassesOptions } from "./policies/OrgWorkspaceClassesOptions";
 import { useDefaultOrgTimeoutQuery } from "../data/organizations/default-org-timeout-query";
+import { useInstallationConfiguration } from "../data/installation/installation-config-query";
 
 export default function TeamPoliciesPage() {
     useDocumentTitle("Organization Settings - Policies");
@@ -42,6 +42,9 @@ export default function TeamPoliciesPage() {
     const { data: settings, isLoading } = useOrgSettingsQuery();
     const updateTeamSettings = useUpdateOrgSettingsMutation();
 
+    const { data: installationConfig } = useInstallationConfiguration();
+    const isDedicatedInstallation = installationConfig?.isDedicatedInstallation ?? true; // we bias towards being on dedicated so the callout doesn't show when we're not sure
+
     const billingMode = useOrgBillingMode();
     const [workspaceTimeout, setWorkspaceTimeout] = useState<string | undefined>(undefined);
     const [allowTimeoutChangeByMembers, setAllowTimeoutChangeByMembers] = useState<boolean | undefined>(undefined);
@@ -210,7 +213,7 @@ export default function TeamPoliciesPage() {
                         handleUpdateTeamSettings={handleUpdateTeamSettings}
                     />
 
-                    {isGitpodIo() && <WorkspaceClassesEnterpriseCallout />}
+                    {!isDedicatedInstallation && <WorkspaceClassesEnterpriseCallout />}
 
                     <EditorOptions
                         isOwner={isOwner}