Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
Jan 24, 2025
Merged

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
b3c0b43
[dashboard] team setting design polish + more consistent color use
filiptronicek Jan 24, 2025
a19d95a
revert a debugging leftover
filiptronicek Jan 24, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion components/dashboard/src/components/ContextMenu.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down
11 changes: 4 additions & 7 deletions components/dashboard/src/components/EmptyMessage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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";

Expand All @@ -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>
);
Expand Down
20 changes: 13 additions & 7 deletions components/dashboard/src/components/ItemsList.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 }) {
Expand All @@ -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>
Expand All @@ -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>
Expand Down
4 changes: 2 additions & 2 deletions components/dashboard/src/components/PrebuildLogs.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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}
Expand Down
46 changes: 22 additions & 24 deletions components/dashboard/src/components/UsageBasedBillingConfig.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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" &&
Expand All @@ -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>{" "}
Expand All @@ -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>
Expand All @@ -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>
Expand Down
16 changes: 6 additions & 10 deletions components/dashboard/src/components/typography/headings.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 = {
Expand All @@ -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,
Expand All @@ -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>
Expand All @@ -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>
Expand All @@ -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";
Expand Down
12 changes: 5 additions & 7 deletions components/dashboard/src/feedback-form/FeedbackComponent.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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/">
Expand All @@ -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")}>
Expand Down
6 changes: 3 additions & 3 deletions components/dashboard/src/index.css
View file
Open in desktop
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Changes here were done to align with our Figma doc for Podkit components

Original file line number Diff line number Diff line change
Expand Up @@ -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 */
Expand All @@ -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 */
Expand All @@ -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 */
Expand Down
Loading
Loading