[dashboard] team setting design polish + more consistent color use (#20547)

* [dashboard] team setting design polish + more consistent color use

* revert a debugging leftover

Author: filiptronicek

components/dashboard/src/components/ContextMenu.tsx

@@ -184,7 +184,7 @@ export const MenuEntry: FunctionComponent<MenuEntryProps> = ({
                 customFontStyle || "text-gray-600 dark:text-gray-400 hover:text-gray-800 dark:hover:text-gray-100",
                 {
                     "cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-700": clickable,
-                    "bg-gray-50 dark:bg-gray-800": active,
+                    "bg-pk-surface-secondary": active,
                     "rounded-t-lg": isFirst,
                     "rounded-b-lg": isLast,
                     "border-b border-gray-200 dark:border-gray-800": separator,

components/dashboard/src/components/EmptyMessage.tsx

@@ -5,7 +5,7 @@
  */
 
 import classNames from "classnames";
-import { FC, ReactNode, useCallback } from "react";
+import { FC, ReactNode } from "react";
 import { Button } from "@podkit/buttons/Button";
 import { Heading2, Subheading } from "./typography/headings";
 
@@ -17,20 +17,17 @@ type Props = {
     className?: string;
 };
 export const EmptyMessage: FC<Props> = ({ title, subtitle, buttonText, onClick, className }) => {
-    const handleClick = useCallback(() => {
-        onClick && onClick();
-    }, [onClick]);
     return (
         <div
             className={classNames(
-                "w-full flex justify-center mt-2 rounded-xl bg-gray-100 dark:bg-gray-800 px-4 py-14",
+                "w-full flex justify-center mt-2 rounded-xl bg-pk-surface-secondary px-4 py-14",
                 className,
             )}
         >
             <div className="flex flex-col justify-center items-center text-center space-y-4">
-                {title && <Heading2 color="light">{title}</Heading2>}
+                {title && <Heading2 className="text-pk-content-invert-secondary">{title}</Heading2>}
                 {subtitle && <Subheading className="max-w-md">{subtitle}</Subheading>}
-                {buttonText && <Button onClick={handleClick}>{buttonText}</Button>}
+                {buttonText && <Button onClick={onClick}>{buttonText}</Button>}
             </div>
         </div>
     );

components/dashboard/src/components/ItemsList.tsx

@@ -4,6 +4,7 @@
  * See License.AGPL.txt in the project root for license information.
  */
 
+import { cn } from "@podkit/lib/cn";
 import ContextMenu, { ContextMenuEntry } from "./ContextMenu";
 
 export function ItemsList(props: { children?: React.ReactNode; className?: string }) {
@@ -18,14 +19,17 @@ export function Item(props: { children?: React.ReactNode; className?: string; he
     }
 
     // cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-700
-    const solidClassName = props.solid ? "bg-gray-100 dark:bg-gray-800" : "hover:bg-gray-100 dark:hover:bg-gray-800";
+    const solidClassName = props.solid ? "bg-pk-surface-secondary" : "hover:bg-gray-100 dark:hover:bg-gray-800";
     const headerClassName = "text-sm text-gray-400 border-t border-b border-gray-200 dark:border-gray-800";
     const notHeaderClassName = "rounded-xl focus:bg-kumquat-light " + solidClassName;
     return (
         <div
-            className={`${layoutClassName} w-full p-3 transition ease-in-out ${
-                props.header ? headerClassName : notHeaderClassName
-            } ${props.className || ""}`}
+            className={cn(
+                layoutClassName,
+                "w-full p-3 transition ease-in-out",
+                props.header ? headerClassName : notHeaderClassName,
+                props.className,
+            )}
         >
             {props.children}
         </div>
@@ -50,9 +54,11 @@ export function ItemFieldContextMenu(props: {
 
     return (
         <div
-            className={`flex hover:bg-gray-200 dark:hover:bg-gray-700 rounded-md cursor-pointer min-w-8 w-8 ${cls} ${
-                props.className || ""
-            }`}
+            className={cn(
+                "flex hover:bg-gray-200 dark:hover:bg-gray-700 rounded-md cursor-pointer min-w-8 w-8",
+                cls,
+                props.className,
+            )}
         >
             <ContextMenu changeMenuState={props.changeMenuState} menuEntries={props.menuEntries} />
         </div>

components/dashboard/src/components/PrebuildLogs.tsx

@@ -171,7 +171,7 @@ export default function PrebuildLogs(props: PrebuildLogsProps) {
     }, [logsEmitter, props.workspaceId, workspace?.instanceId, workspace?.phase]);
 
     return (
-        <div className="rounded-xl overflow-hidden bg-gray-100 dark:bg-gray-800 flex flex-col mb-8">
+        <div className="rounded-xl overflow-hidden bg-pk-surface-secondary flex flex-col mb-8">
             <div className="h-96 flex">
                 <Suspense fallback={<div />}>
                     <WorkspaceLogs
@@ -182,7 +182,7 @@ export default function PrebuildLogs(props: PrebuildLogsProps) {
                     />
                 </Suspense>
             </div>
-            <div className="w-full bottom-0 h-20 px-6 bg-gray-50 dark:bg-gray-800 border-t border-gray-200 dark:border-gray-600 flex flex-row items-center space-x-2">
+            <div className="w-full bottom-0 h-20 px-6 bg-pk-surface-secondary border-t border-gray-200 dark:border-gray-600 flex flex-row items-center space-x-2">
                 {prebuild && <PrebuildStatusOld prebuild={prebuild} />}
                 <div className="flex-grow" />
                 {props.children}

components/dashboard/src/components/UsageBasedBillingConfig.tsx

@@ -240,21 +240,21 @@ export default function UsageBasedBillingConfig({ hideSubheading = false }: Prop
                     </Alert>
                 )}
                 {showSpinner && (
-                    <div className="flex flex-col mt-4 h-52 p-4 rounded-xl bg-gray-50 dark:bg-gray-800">
-                        <div className="uppercase text-sm text-gray-400 dark:text-gray-500">Balance</div>
+                    <div className="flex flex-col mt-4 h-52 p-4 rounded-xl bg-pk-surface-secondary">
+                        <div className="uppercase text-sm text-pk-content-tertiary">Balance</div>
                         <Spinner className="m-2 animate-spin" />
                     </div>
                 )}
                 {showBalance && (
-                    <div className="flex flex-col mt-4 p-4 rounded-xl bg-gray-50 dark:bg-gray-800">
-                        <div className="uppercase text-sm text-gray-400 dark:text-gray-500">Balance</div>
+                    <div className="flex flex-col mt-4 p-4 rounded-xl bg-pk-surface-secondary">
+                        <div className="uppercase text-sm text-pk-content-tertiary">Balance</div>
                         <div className="mt-1 text-xl font-semibold flex-grow">
                             <span className="text-gray-900 dark:text-gray-100">
                                 {balance.toLocaleString(undefined, { maximumFractionDigits: 2 })}
                             </span>
-                            <span className="text-gray-400 dark:text-gray-500"> Credits</span>
+                            <span className="text-pk-content-tertiary"> Credits</span>
                         </div>
-                        <div className="mt-4 text-sm flex text-gray-400 dark:text-gray-500">
+                        <div className="mt-4 text-sm flex text-pk-content-tertiary">
                             <span className="flex-grow">
                                 {typeof currentUsage === "number" &&
                                     typeof usageLimit === "number" &&
@@ -273,10 +273,10 @@ export default function UsageBasedBillingConfig({ hideSubheading = false }: Prop
                         <div className="mt-2 flex">
                             <ProgressBar value={percentage} />
                         </div>
-                        <div className="bg-gray-100 dark:bg-gray-800 border-t border-gray-200 dark:border-gray-700 -m-4 p-4 mt-4 rounded-b-xl flex">
+                        <div className="bg-pk-surface-secondary border-t border-gray-200 dark:border-gray-700 -m-4 p-4 mt-4 rounded-b-xl flex">
                             <div className="flex-grow">
-                                <div className="uppercase text-sm text-gray-400 dark:text-gray-500">Current Period</div>
-                                <div className="text-sm font-medium text-gray-500 dark:text-gray-400">
+                                <div className="uppercase text-sm text-pk-content-tertiary">Current Period</div>
+                                <div className="text-sm font-medium text-pk-content-primary">
                                     <span title={billingCycleFrom.toDate().toUTCString().replace("GMT", "UTC")}>
                                         {billingCycleFrom.format("MMM D, YYYY")}
                                     </span>{" "}
@@ -302,29 +302,27 @@ export default function UsageBasedBillingConfig({ hideSubheading = false }: Prop
                 )}
                 {showUpgradeTeam && (
                     <>
-                        <div className="flex flex-col mt-4 p-4 rounded-t-xl bg-gray-50 dark:bg-gray-800">
-                            <div className="uppercase text-sm text-gray-400 dark:text-gray-500">Current Plan</div>
-                            <div className="mt-1 text-xl font-semibold flex-grow text-gray-600 dark:text-gray-400">
+                        <div className="flex flex-col mt-4 p-4 rounded-t-xl bg-pk-surface-secondary">
+                            <div className="uppercase text-sm text-pk-content-tertiary">Current Plan</div>
+                            <div className="mt-1 text-xl font-semibold flex-grow text-pk-content-secondary">
                                 {freePlanName}
                             </div>
-                            <div className="mt-4 flex space-x-1 text-gray-400 dark:text-gray-500">
+                            <div className="mt-4 flex space-x-1 text-pk-content-tertiary">
                                 <div className="m-0.5 w-5 h-5 text-orange-500">
                                     <Check />
                                 </div>
                                 <div className="flex flex-col w-96">
-                                    <span className="font-bold text-gray-500 dark:text-gray-400">
-                                        {usageLimit} credits
-                                    </span>
+                                    <span className="font-bold text-pk-content-secondary">{usageLimit} credits</span>
                                     <span>{usageLimit / 10} hours of Standard workspace usage.</span>
                                 </div>
                             </div>
                         </div>
-                        <div className="flex flex-col p-4 rounded-b-xl bg-gray-100 dark:bg-gray-800 border-t border-gray-200 dark:border-gray-700">
-                            <div className="uppercase text-sm text-gray-400 dark:text-gray-500">Upgrade Plan</div>
-                            <div className="mt-1 text-xl font-semibold flex-grow text-gray-800 dark:text-gray-100">
+                        <div className="flex flex-col p-4 rounded-b-xl bg-pk-surface-secondary border-t border-gray-200 dark:border-gray-700">
+                            <div className="uppercase text-sm text-pk-content-tertiary">Upgrade Plan</div>
+                            <div className="mt-1 text-xl font-semibold flex-grow text-pk-content-primary">
                                 Pay-as-you-go
                             </div>
-                            <div className="mt-4 flex space-x-1 text-gray-400 dark:text-gray-500">
+                            <div className="mt-4 flex space-x-1 text-pk-content-tertiary">
                                 <div className="flex flex-col">
                                     <span>{priceInformation}</span>
                                 </div>
@@ -346,12 +344,12 @@ export default function UsageBasedBillingConfig({ hideSubheading = false }: Prop
                 )}
                 {showManageBilling && (
                     <div className="max-w-xl flex space-x-4">
-                        <div className="flex-grow flex flex-col mt-4 p-4 rounded-xl bg-gray-50 dark:bg-gray-800">
-                            <div className="uppercase text-sm text-gray-400 dark:text-gray-500">Current Plan</div>
-                            <div className="mt-1 text-xl font-semibold flex-grow text-gray-800 dark:text-gray-100">
+                        <div className="flex-grow flex flex-col mt-4 p-4 rounded-xl bg-pk-surface-secondary">
+                            <div className="uppercase text-sm text-pk-content-tertiary">Current Plan</div>
+                            <div className="mt-1 text-xl font-semibold flex-grow text-pk-content-primary">
                                 Pay-as-you-go
                             </div>
-                            <div className="mt-4 flex space-x-1 text-gray-400 dark:text-gray-500">
+                            <div className="mt-4 flex space-x-1 text-pk-content-tertiary">
                                 <Check className="m-0.5 w-8 h-5 text-orange-500" />
                                 <div className="flex flex-col">
                                     <span>{priceInformation}</span>

components/dashboard/src/components/typography/headings.tsx

@@ -4,7 +4,7 @@
  * See License.AGPL.txt in the project root for license information.
  */
 
-import classNames from "classnames";
+import { cn } from "@podkit/lib/cn";
 import { FC } from "react";
 
 type HeadingProps = {
@@ -18,8 +18,8 @@ export const Heading1: FC<HeadingProps> = ({ id, color, tracking, className, chi
     return (
         <h1
             id={id}
-            className={classNames(
-                getHeadingColor(color),
+            className={cn(
+                "text-pk-content-primary",
                 getTracking(tracking),
                 "font-bold text-4xl leading-normal",
                 className,
@@ -34,7 +34,7 @@ export const Heading2: FC<HeadingProps> = ({ id, color, tracking, className, chi
     return (
         <h2
             id={id}
-            className={classNames(getHeadingColor(color), getTracking(tracking), "font-semibold text-2xl", className)}
+            className={cn("text-pk-content-primary", getTracking(tracking), "font-semibold text-2xl", className)}
         >
             {children}
         </h2>
@@ -45,7 +45,7 @@ export const Heading3: FC<HeadingProps> = ({ id, color, tracking, className, chi
     return (
         <h3
             id={id}
-            className={classNames(getHeadingColor(color), getTracking(tracking), "font-semibold text-lg", className)}
+            className={cn("text-pk-content-primary", getTracking(tracking), "font-semibold text-lg", className)}
         >
             {children}
         </h3>
@@ -55,16 +55,12 @@ export const Heading3: FC<HeadingProps> = ({ id, color, tracking, className, chi
 // Intended to be placed beneath a heading to provide more context
 export const Subheading: FC<HeadingProps> = ({ id, tracking, className, children }) => {
     return (
-        <p id={id} className={classNames("text-base text-pk-content-secondary", getTracking(tracking), className)}>
+        <p id={id} className={cn("text-base text-pk-content-secondary", getTracking(tracking), className)}>
             {children}
         </p>
     );
 };
 
-function getHeadingColor(color: HeadingProps["color"] = "dark") {
-    return color === "dark" ? "text-gray-800 dark:text-gray-100" : "text-gray-500 dark:text-gray-400";
-}
-
 function getTracking(tracking: HeadingProps["tracking"]) {
     if (tracking === "wide") {
         return "tracking-wide";

components/dashboard/src/feedback-form/FeedbackComponent.tsx

@@ -84,7 +84,7 @@ function FeedbackComponent(props: {
                 <div
                     className={
                         "flex flex-col justify-center px-6 py-4 border-gray-200 dark:border-gray-800 " +
-                        (props.isError ? "mt-20 bg-gray-100 dark:bg-gray-800 rounded-xl" : "border-t")
+                        (props.isError ? "mt-20 bg-pk-surface-secondary rounded-xl" : "border-t")
                     }
                 >
                     <p
@@ -105,24 +105,22 @@ function FeedbackComponent(props: {
                 <div
                     className={
                         "flex flex-col px-6 py-4 border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-900 " +
-                        (props.isError
-                            ? "w-96 mt-6 bg-gray-100 dark:bg-gray-800 rounded-xl"
-                            : "-mx-6 border-t border-b")
+                        (props.isError ? "w-96 mt-6 bg-pk-surface-secondary rounded-xl" : "-mx-6 border-t border-b")
                     }
                 >
                     <div className="relative">
                         <textarea
                             style={{ height: "160px", borderRadius: "6px" }}
                             autoFocus
-                            className="w-full resize-none text-gray-400 dark:text-gray-400 focus:ring-0 focus:border-gray-400 dark:focus:border-gray-400 rounded-md border dark:bg-gray-800 dark:border-gray-500 border-gray-500"
+                            className="w-full resize-none text-pk-content-secondary focus:ring-0 focus:border-gray-400 dark:focus:border-gray-400 rounded-md border bg-pk-surface-secondary border-pk-border-base"
                             name="name"
                             value={text}
                             placeholder="Have more feedback?"
                             onChange={(e) => setText(e.target.value)}
                         />
                     </div>
                     <div>
-                        <p className="text-gray-500">
+                        <p className="mt-2 text-pk-content-secondary">
                             {" "}
                             By submitting this form you acknowledge that you have read and understood our{" "}
                             <a className="gp-link" target="gitpod-privacy" href="https://www.gitpod.io/privacy/">
@@ -148,7 +146,7 @@ function FeedbackComponent(props: {
                 <div
                     className={
                         "flex flex-col px-6 py-4 border-gray-200 dark:border-gray-800 " +
-                        (props.isError ? "mt-20 bg-gray-100 dark:bg-gray-800 rounded-xl" : "")
+                        (props.isError ? "mt-20 bg-pk-surface-secondary rounded-xl" : "")
                     }
                 >
                     <p className={"text-center text-base " + (props.isError ? "text-gray-400" : "text-gray-500")}>

components/dashboard/src/index.css

@@ -16,7 +16,7 @@
         /* Setup RGB color channel variables */
         --black: 22 22 22; /* #161616 */
         --white: 255 255 255; /* #FFFFFF */
-        /* TODO: determine if these are the reds we want - need to have correct constrast */
+        /* TODO: determine if these are the reds we want - need to have correct contrast */
         --red-600: 220 38 38;
         --red-400: 248 68 68;
         --gray-900: 18 16 12; /* #12100C */
@@ -39,7 +39,7 @@
         --content-tertiary: var(--gray-400);
         --content-disabled: var(--gray-450);
         --content-invert-primary: var(--gray-200);
-        --content-invert-secondary: var(--gray-300);
+        --content-invert-secondary: var(--gray-400);
         --content-danger: var(--red-600);
 
         /* Surfaces */
@@ -65,7 +65,7 @@
         --content-tertiary: var(--gray-500);
         --content-disabled: var(--gray-600);
         --content-invert-primary: var(--gray-900);
-        --content-invert-secondary: var(--gray-600);
+        --content-invert-secondary: var(--gray-450);
         --content-danger: var(--red-400);
 
         /* Surfaces */