Skip to content

Commit 58e1f55

Browse files
filiptronicekfiliptronicek
authored
[dashboard] team setting design polish + more consistent color use (#20547)
* [dashboard] team setting design polish + more consistent color use * revert a debugging leftover
1 parent 203ec7f commit 58e1f55

25 files changed

+151
-161
lines changed

‎components/dashboard/src/components/ContextMenu.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -184,7 +184,7 @@ export const MenuEntry: FunctionComponent<MenuEntryProps> = ({
184184
customFontStyle || "text-gray-600 dark:text-gray-400 hover:text-gray-800 dark:hover:text-gray-100",
185185
{
186186
"cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-700": clickable,
187-
"bg-gray-50 dark:bg-gray-800": active,
187+
"bg-pk-surface-secondary": active,
188188
"rounded-t-lg": isFirst,
189189
"rounded-b-lg": isLast,
190190
"border-b border-gray-200 dark:border-gray-800": separator,

‎components/dashboard/src/components/EmptyMessage.tsx

Lines changed: 4 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
*/
66

77
import classNames from "classnames";
8-
import { FC, ReactNode, useCallback } from "react";
8+
import { FC, ReactNode } from "react";
99
import { Button } from "@podkit/buttons/Button";
1010
import { Heading2, Subheading } from "./typography/headings";
1111

@@ -17,20 +17,17 @@ type Props = {
1717
className?: string;
1818
};
1919
export const EmptyMessage: FC<Props> = ({ title, subtitle, buttonText, onClick, className }) => {
20-
const handleClick = useCallback(() => {
21-
onClick && onClick();
22-
}, [onClick]);
2320
return (
2421
<div
2522
className={classNames(
26-
"w-full flex justify-center mt-2 rounded-xl bg-gray-100 dark:bg-gray-800 px-4 py-14",
23+
"w-full flex justify-center mt-2 rounded-xl bg-pk-surface-secondary px-4 py-14",
2724
className,
2825
)}
2926
>
3027
<div className="flex flex-col justify-center items-center text-center space-y-4">
31-
{title && <Heading2 color="light">{title}</Heading2>}
28+
{title && <Heading2 className="text-pk-content-invert-secondary">{title}</Heading2>}
3229
{subtitle && <Subheading className="max-w-md">{subtitle}</Subheading>}
33-
{buttonText && <Button onClick={handleClick}>{buttonText}</Button>}
30+
{buttonText && <Button onClick={onClick}>{buttonText}</Button>}
3431
</div>
3532
</div>
3633
);

‎components/dashboard/src/components/ItemsList.tsx

Lines changed: 13 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@
44
* See License.AGPL.txt in the project root for license information.
55
*/
66

7+
import { cn } from "@podkit/lib/cn";
78
import ContextMenu, { ContextMenuEntry } from "./ContextMenu";
89

910
export function ItemsList(props: { children?: React.ReactNode; className?: string }) {
@@ -18,14 +19,17 @@ export function Item(props: { children?: React.ReactNode; className?: string; he
1819
}
1920

2021
// cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-700
21-
const solidClassName = props.solid ? "bg-gray-100 dark:bg-gray-800" : "hover:bg-gray-100 dark:hover:bg-gray-800";
22+
const solidClassName = props.solid ? "bg-pk-surface-secondary" : "hover:bg-gray-100 dark:hover:bg-gray-800";
2223
const headerClassName = "text-sm text-gray-400 border-t border-b border-gray-200 dark:border-gray-800";
2324
const notHeaderClassName = "rounded-xl focus:bg-kumquat-light " + solidClassName;
2425
return (
2526
<div
26-
className={`${layoutClassName} w-full p-3 transition ease-in-out ${
27-
props.header ? headerClassName : notHeaderClassName
28-
} ${props.className || ""}`}
27+
className={cn(
28+
layoutClassName,
29+
"w-full p-3 transition ease-in-out",
30+
props.header ? headerClassName : notHeaderClassName,
31+
props.className,
32+
)}
2933
>
3034
{props.children}
3135
</div>
@@ -50,9 +54,11 @@ export function ItemFieldContextMenu(props: {
5054

5155
return (
5256
<div
53-
className={`flex hover:bg-gray-200 dark:hover:bg-gray-700 rounded-md cursor-pointer min-w-8 w-8 ${cls} ${
54-
props.className || ""
55-
}`}
57+
className={cn(
58+
"flex hover:bg-gray-200 dark:hover:bg-gray-700 rounded-md cursor-pointer min-w-8 w-8",
59+
cls,
60+
props.className,
61+
)}
5662
>
5763
<ContextMenu changeMenuState={props.changeMenuState} menuEntries={props.menuEntries} />
5864
</div>

‎components/dashboard/src/components/PrebuildLogs.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -171,7 +171,7 @@ export default function PrebuildLogs(props: PrebuildLogsProps) {
171171
}, [logsEmitter, props.workspaceId, workspace?.instanceId, workspace?.phase]);
172172

173173
return (
174-
<div className="rounded-xl overflow-hidden bg-gray-100 dark:bg-gray-800 flex flex-col mb-8">
174+
<div className="rounded-xl overflow-hidden bg-pk-surface-secondary flex flex-col mb-8">
175175
<div className="h-96 flex">
176176
<Suspense fallback={<div />}>
177177
<WorkspaceLogs
@@ -182,7 +182,7 @@ export default function PrebuildLogs(props: PrebuildLogsProps) {
182182
/>
183183
</Suspense>
184184
</div>
185-
<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">
185+
<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">
186186
{prebuild && <PrebuildStatusOld prebuild={prebuild} />}
187187
<div className="flex-grow" />
188188
{props.children}

‎components/dashboard/src/components/UsageBasedBillingConfig.tsx

Lines changed: 22 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -240,21 +240,21 @@ export default function UsageBasedBillingConfig({ hideSubheading = false }: Prop
240240
</Alert>
241241
)}
242242
{showSpinner && (
243-
<div className="flex flex-col mt-4 h-52 p-4 rounded-xl bg-gray-50 dark:bg-gray-800">
244-
<div className="uppercase text-sm text-gray-400 dark:text-gray-500">Balance</div>
243+
<div className="flex flex-col mt-4 h-52 p-4 rounded-xl bg-pk-surface-secondary">
244+
<div className="uppercase text-sm text-pk-content-tertiary">Balance</div>
245245
<Spinner className="m-2 animate-spin" />
246246
</div>
247247
)}
248248
{showBalance && (
249-
<div className="flex flex-col mt-4 p-4 rounded-xl bg-gray-50 dark:bg-gray-800">
250-
<div className="uppercase text-sm text-gray-400 dark:text-gray-500">Balance</div>
249+
<div className="flex flex-col mt-4 p-4 rounded-xl bg-pk-surface-secondary">
250+
<div className="uppercase text-sm text-pk-content-tertiary">Balance</div>
251251
<div className="mt-1 text-xl font-semibold flex-grow">
252252
<span className="text-gray-900 dark:text-gray-100">
253253
{balance.toLocaleString(undefined, { maximumFractionDigits: 2 })}
254254
</span>
255-
<span className="text-gray-400 dark:text-gray-500"> Credits</span>
255+
<span className="text-pk-content-tertiary"> Credits</span>
256256
</div>
257-
<div className="mt-4 text-sm flex text-gray-400 dark:text-gray-500">
257+
<div className="mt-4 text-sm flex text-pk-content-tertiary">
258258
<span className="flex-grow">
259259
{typeof currentUsage === "number" &&
260260
typeof usageLimit === "number" &&
@@ -273,10 +273,10 @@ export default function UsageBasedBillingConfig({ hideSubheading = false }: Prop
273273
<div className="mt-2 flex">
274274
<ProgressBar value={percentage} />
275275
</div>
276-
<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">
276+
<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">
277277
<div className="flex-grow">
278-
<div className="uppercase text-sm text-gray-400 dark:text-gray-500">Current Period</div>
279-
<div className="text-sm font-medium text-gray-500 dark:text-gray-400">
278+
<div className="uppercase text-sm text-pk-content-tertiary">Current Period</div>
279+
<div className="text-sm font-medium text-pk-content-primary">
280280
<span title={billingCycleFrom.toDate().toUTCString().replace("GMT", "UTC")}>
281281
{billingCycleFrom.format("MMM D, YYYY")}
282282
</span>{" "}
@@ -302,29 +302,27 @@ export default function UsageBasedBillingConfig({ hideSubheading = false }: Prop
302302
)}
303303
{showUpgradeTeam && (
304304
<>
305-
<div className="flex flex-col mt-4 p-4 rounded-t-xl bg-gray-50 dark:bg-gray-800">
306-
<div className="uppercase text-sm text-gray-400 dark:text-gray-500">Current Plan</div>
307-
<div className="mt-1 text-xl font-semibold flex-grow text-gray-600 dark:text-gray-400">
305+
<div className="flex flex-col mt-4 p-4 rounded-t-xl bg-pk-surface-secondary">
306+
<div className="uppercase text-sm text-pk-content-tertiary">Current Plan</div>
307+
<div className="mt-1 text-xl font-semibold flex-grow text-pk-content-secondary">
308308
{freePlanName}
309309
</div>
310-
<div className="mt-4 flex space-x-1 text-gray-400 dark:text-gray-500">
310+
<div className="mt-4 flex space-x-1 text-pk-content-tertiary">
311311
<div className="m-0.5 w-5 h-5 text-orange-500">
312312
<Check />
313313
</div>
314314
<div className="flex flex-col w-96">
315-
<span className="font-bold text-gray-500 dark:text-gray-400">
316-
{usageLimit} credits
317-
</span>
315+
<span className="font-bold text-pk-content-secondary">{usageLimit} credits</span>
318316
<span>{usageLimit / 10} hours of Standard workspace usage.</span>
319317
</div>
320318
</div>
321319
</div>
322-
<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">
323-
<div className="uppercase text-sm text-gray-400 dark:text-gray-500">Upgrade Plan</div>
324-
<div className="mt-1 text-xl font-semibold flex-grow text-gray-800 dark:text-gray-100">
320+
<div className="flex flex-col p-4 rounded-b-xl bg-pk-surface-secondary border-t border-gray-200 dark:border-gray-700">
321+
<div className="uppercase text-sm text-pk-content-tertiary">Upgrade Plan</div>
322+
<div className="mt-1 text-xl font-semibold flex-grow text-pk-content-primary">
325323
Pay-as-you-go
326324
</div>
327-
<div className="mt-4 flex space-x-1 text-gray-400 dark:text-gray-500">
325+
<div className="mt-4 flex space-x-1 text-pk-content-tertiary">
328326
<div className="flex flex-col">
329327
<span>{priceInformation}</span>
330328
</div>
@@ -346,12 +344,12 @@ export default function UsageBasedBillingConfig({ hideSubheading = false }: Prop
346344
)}
347345
{showManageBilling && (
348346
<div className="max-w-xl flex space-x-4">
349-
<div className="flex-grow flex flex-col mt-4 p-4 rounded-xl bg-gray-50 dark:bg-gray-800">
350-
<div className="uppercase text-sm text-gray-400 dark:text-gray-500">Current Plan</div>
351-
<div className="mt-1 text-xl font-semibold flex-grow text-gray-800 dark:text-gray-100">
347+
<div className="flex-grow flex flex-col mt-4 p-4 rounded-xl bg-pk-surface-secondary">
348+
<div className="uppercase text-sm text-pk-content-tertiary">Current Plan</div>
349+
<div className="mt-1 text-xl font-semibold flex-grow text-pk-content-primary">
352350
Pay-as-you-go
353351
</div>
354-
<div className="mt-4 flex space-x-1 text-gray-400 dark:text-gray-500">
352+
<div className="mt-4 flex space-x-1 text-pk-content-tertiary">
355353
<Check className="m-0.5 w-8 h-5 text-orange-500" />
356354
<div className="flex flex-col">
357355
<span>{priceInformation}</span>

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

Lines changed: 6 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
* See License.AGPL.txt in the project root for license information.
55
*/
66

7-
import classNames from "classnames";
7+
import { cn } from "@podkit/lib/cn";
88
import { FC } from "react";
99

1010
type HeadingProps = {
@@ -18,8 +18,8 @@ export const Heading1: FC<HeadingProps> = ({ id, color, tracking, className, chi
1818
return (
1919
<h1
2020
id={id}
21-
className={classNames(
22-
getHeadingColor(color),
21+
className={cn(
22+
"text-pk-content-primary",
2323
getTracking(tracking),
2424
"font-bold text-4xl leading-normal",
2525
className,
@@ -34,7 +34,7 @@ export const Heading2: FC<HeadingProps> = ({ id, color, tracking, className, chi
3434
return (
3535
<h2
3636
id={id}
37-
className={classNames(getHeadingColor(color), getTracking(tracking), "font-semibold text-2xl", className)}
37+
className={cn("text-pk-content-primary", getTracking(tracking), "font-semibold text-2xl", className)}
3838
>
3939
{children}
4040
</h2>
@@ -45,7 +45,7 @@ export const Heading3: FC<HeadingProps> = ({ id, color, tracking, className, chi
4545
return (
4646
<h3
4747
id={id}
48-
className={classNames(getHeadingColor(color), getTracking(tracking), "font-semibold text-lg", className)}
48+
className={cn("text-pk-content-primary", getTracking(tracking), "font-semibold text-lg", className)}
4949
>
5050
{children}
5151
</h3>
@@ -55,16 +55,12 @@ export const Heading3: FC<HeadingProps> = ({ id, color, tracking, className, chi
5555
// Intended to be placed beneath a heading to provide more context
5656
export const Subheading: FC<HeadingProps> = ({ id, tracking, className, children }) => {
5757
return (
58-
<p id={id} className={classNames("text-base text-pk-content-secondary", getTracking(tracking), className)}>
58+
<p id={id} className={cn("text-base text-pk-content-secondary", getTracking(tracking), className)}>
5959
{children}
6060
</p>
6161
);
6262
};
6363

64-
function getHeadingColor(color: HeadingProps["color"] = "dark") {
65-
return color === "dark" ? "text-gray-800 dark:text-gray-100" : "text-gray-500 dark:text-gray-400";
66-
}
67-
6864
function getTracking(tracking: HeadingProps["tracking"]) {
6965
if (tracking === "wide") {
7066
return "tracking-wide";

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

Lines changed: 5 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -84,7 +84,7 @@ function FeedbackComponent(props: {
8484
<div
8585
className={
8686
"flex flex-col justify-center px-6 py-4 border-gray-200 dark:border-gray-800 " +
87-
(props.isError ? "mt-20 bg-gray-100 dark:bg-gray-800 rounded-xl" : "border-t")
87+
(props.isError ? "mt-20 bg-pk-surface-secondary rounded-xl" : "border-t")
8888
}
8989
>
9090
<p
@@ -105,24 +105,22 @@ function FeedbackComponent(props: {
105105
<div
106106
className={
107107
"flex flex-col px-6 py-4 border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-900 " +
108-
(props.isError
109-
? "w-96 mt-6 bg-gray-100 dark:bg-gray-800 rounded-xl"
110-
: "-mx-6 border-t border-b")
108+
(props.isError ? "w-96 mt-6 bg-pk-surface-secondary rounded-xl" : "-mx-6 border-t border-b")
111109
}
112110
>
113111
<div className="relative">
114112
<textarea
115113
style={{ height: "160px", borderRadius: "6px" }}
116114
autoFocus
117-
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"
115+
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"
118116
name="name"
119117
value={text}
120118
placeholder="Have more feedback?"
121119
onChange={(e) => setText(e.target.value)}
122120
/>
123121
</div>
124122
<div>
125-
<p className="text-gray-500">
123+
<p className="mt-2 text-pk-content-secondary">
126124
{" "}
127125
By submitting this form you acknowledge that you have read and understood our{" "}
128126
<a className="gp-link" target="gitpod-privacy" href="https://www.gitpod.io/privacy/">
@@ -148,7 +146,7 @@ function FeedbackComponent(props: {
148146
<div
149147
className={
150148
"flex flex-col px-6 py-4 border-gray-200 dark:border-gray-800 " +
151-
(props.isError ? "mt-20 bg-gray-100 dark:bg-gray-800 rounded-xl" : "")
149+
(props.isError ? "mt-20 bg-pk-surface-secondary rounded-xl" : "")
152150
}
153151
>
154152
<p className={"text-center text-base " + (props.isError ? "text-gray-400" : "text-gray-500")}>

‎components/dashboard/src/index.css

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@
1616
/* Setup RGB color channel variables */
1717
--black: 22 22 22; /* #161616 */
1818
--white: 255 255 255; /* #FFFFFF */
19-
/* TODO: determine if these are the reds we want - need to have correct constrast */
19+
/* TODO: determine if these are the reds we want - need to have correct contrast */
2020
--red-600: 220 38 38;
2121
--red-400: 248 68 68;
2222
--gray-900: 18 16 12; /* #12100C */
@@ -39,7 +39,7 @@
3939
--content-tertiary: var(--gray-400);
4040
--content-disabled: var(--gray-450);
4141
--content-invert-primary: var(--gray-200);
42-
--content-invert-secondary: var(--gray-300);
42+
--content-invert-secondary: var(--gray-400);
4343
--content-danger: var(--red-600);
4444

4545
/* Surfaces */
@@ -65,7 +65,7 @@
6565
--content-tertiary: var(--gray-500);
6666
--content-disabled: var(--gray-600);
6767
--content-invert-primary: var(--gray-900);
68-
--content-invert-secondary: var(--gray-600);
68+
--content-invert-secondary: var(--gray-450);
6969
--content-danger: var(--red-400);
7070

7171
/* Surfaces */

0 commit comments

Comments
 (0)