Skip to content

Commit 588d600

Browse files
jaaydenhjaaydenh
committed
fix: design improvements
1 parent 86c49ce commit 588d600

File tree

4 files changed

+65
-58
lines changed

4 files changed

+65
-58
lines changed

‎site/src/components/FeatureStageBadge/FeatureStageBadge.tsx

Lines changed: 5 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -27,9 +27,8 @@ type FeatureStageBadgeProps = Readonly<
2727
>;
2828

2929
const badgeColorClasses = {
30-
early_access:
31-
"border-solid border-border-warning bg-surface-orange text-content-warning hover:bg-transparent",
32-
beta: "border-solid border-highlight-sky bg-surface-sky text-highlight-sky hover:bg-transparent",
30+
early_access: "bg-surface-orange text-content-warning",
31+
beta: "bg-surface-sky text-highlight-sky",
3332
} as const;
3433

3534
const badgeSizeClasses = {
@@ -51,9 +50,9 @@ export const FeatureStageBadge: FC<FeatureStageBadgeProps> = ({
5150
<TooltipProvider delayDuration={100}>
5251
<Tooltip>
5352
<TooltipTrigger asChild>
54-
<button
53+
<span
5554
className={cn(
56-
"block max-w-fit cursor-default flex-shrink-0 leading-none whitespace-nowrap border rounded-md transition-colors duration-200 ease-in-out bg-transparent",
55+
"block max-w-fit cursor-default flex-shrink-0 leading-none whitespace-nowrap border rounded-md transition-colors duration-200 ease-in-out bg-transparent border-solid border-transparent",
5756
sizeClasses,
5857
colorClasses,
5958
className,
@@ -66,7 +65,7 @@ export const FeatureStageBadge: FC<FeatureStageBadgeProps> = ({
6665
{featureStageBadgeTypes[contentType]}
6766
</span>
6867
<span className="sr-only"> feature)</span>
69-
</button>
68+
</span>
7069
</TooltipTrigger>
7170
<TooltipContent align="start" className="max-w-xs text-sm">
7271
<p className="m-0">

‎site/src/pages/CreateWorkspacePage/CreateWorkspacePageViewExperimental.tsx

Lines changed: 36 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -3,12 +3,12 @@ import type { FriendlyDiagnostic, PreviewParameter } from "api/typesGenerated";
33
import { Alert } from "components/Alert/Alert";
44
import { ErrorAlert } from "components/Alert/ErrorAlert";
55
import { Avatar } from "components/Avatar/Avatar";
6+
import { Badge } from "components/Badge/Badge";
67
import { Button } from "components/Button/Button";
78
import { FeatureStageBadge } from "components/FeatureStageBadge/FeatureStageBadge";
89
import { Input } from "components/Input/Input";
910
import { Label } from "components/Label/Label";
1011
import { Link } from "components/Link/Link";
11-
import { Pill } from "components/Pill/Pill";
1212
import {
1313
Select,
1414
SelectContent,
@@ -353,26 +353,39 @@ export const CreateWorkspacePageViewExperimental: FC<
353353
</div>
354354
<div className="flex flex-col gap-6 max-w-screen-md mx-auto">
355355
<header className="flex flex-col items-start gap-3 mt-10">
356-
<div className="flex items-center gap-2">
357-
<Avatar
358-
variant="icon"
359-
size="md"
360-
src={template.icon}
361-
fallback={template.name}
362-
/>
363-
<p className="text-base font-medium m-0">
364-
{template.display_name.length > 0
365-
? template.display_name
366-
: template.name}
367-
</p>
356+
<div className="flex items-center gap-2 justify-between w-full">
357+
<span className="flex items-center gap-2">
358+
<Avatar
359+
variant="icon"
360+
size="md"
361+
src={template.icon}
362+
fallback={template.name}
363+
/>
364+
<p className="text-base font-medium m-0">
365+
{template.display_name.length > 0
366+
? template.display_name
367+
: template.name}
368+
</p>
369+
{template.deprecated && (
370+
<Badge variant="warning" size="sm">
371+
Deprecated
372+
</Badge>
373+
)}
374+
</span>
375+
{experimentalFormContext && (
376+
<Button
377+
size="sm"
378+
variant="outline"
379+
onClick={experimentalFormContext.toggleOptedOut}
380+
>
381+
<Undo2 />
382+
Classic workspace creation
383+
</Button>
384+
)}
368385
</div>
369386
<span className="flex flex-row items-center gap-2">
370387
<h1 className="text-3xl font-semibold m-0">New workspace</h1>
371-
<FeatureStageBadge
372-
contentType={"early_access"}
373-
size="sm"
374-
labelText="Dynamic parameters"
375-
/>
388+
376389
<TooltipProvider delayDuration={100}>
377390
<Tooltip>
378391
<TooltipTrigger asChild>
@@ -394,19 +407,11 @@ export const CreateWorkspacePageViewExperimental: FC<
394407
</Tooltip>
395408
</TooltipProvider>
396409
</span>
397-
398-
{template.deprecated && <Pill type="warning">Deprecated</Pill>}
399-
400-
{experimentalFormContext && (
401-
<Button
402-
size="sm"
403-
variant="outline"
404-
onClick={experimentalFormContext.toggleOptedOut}
405-
>
406-
<Undo2 />
407-
Use the classic workspace creation flow
408-
</Button>
409-
)}
410+
<FeatureStageBadge
411+
contentType={"early_access"}
412+
size="sm"
413+
labelText="Dynamic parameters"
414+
/>
410415
</header>
411416

412417
<form

‎site/src/pages/WorkspaceSettingsPage/WorkspaceParametersPage/WorkspaceParametersPage.tsx

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -117,18 +117,18 @@ export const WorkspaceParametersPageView: FC<
117117
return (
118118
<div className="flex flex-col gap-10">
119119
<header className="flex flex-col items-start gap-2">
120-
<span className="flex flex-row justify-between items-center gap-2">
120+
<span className="flex flex-row justify-between w-full items-center gap-2">
121121
<h1 className="text-3xl m-0">Workspace parameters</h1>
122+
{experimentalFormContext && (
123+
<ShadcnButton
124+
size="sm"
125+
variant="outline"
126+
onClick={experimentalFormContext.toggleOptedOut}
127+
>
128+
Try out the new workspace parameters ✨
129+
</ShadcnButton>
130+
)}
122131
</span>
123-
{experimentalFormContext && (
124-
<ShadcnButton
125-
size="sm"
126-
variant="outline"
127-
onClick={experimentalFormContext.toggleOptedOut}
128-
>
129-
Try out the new workspace parameters ✨
130-
</ShadcnButton>
131-
)}
132132
</header>
133133

134134
{submitError && !isApiValidationError(submitError) ? (

‎site/src/pages/WorkspaceSettingsPage/WorkspaceParametersPage/WorkspaceParametersPageExperimental.tsx

Lines changed: 14 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -204,8 +204,21 @@ const WorkspaceParametersPageExperimental: FC = () => {
204204
</Helmet>
205205

206206
<header className="flex flex-col items-start gap-2">
207-
<span className="flex flex-row items-center gap-2">
207+
<span className="flex flex-row items-center gap-2 justify-between w-full">
208208
<h1 className="text-3xl m-0">Workspace parameters</h1>
209+
210+
{experimentalFormContext && (
211+
<Button
212+
size="sm"
213+
variant="outline"
214+
onClick={experimentalFormContext.toggleOptedOut}
215+
>
216+
<Undo2 />
217+
Classic workspace parameters
218+
</Button>
219+
)}
220+
</span>
221+
<span className="flex flex-row items-center gap-2">
209222
<FeatureStageBadge
210223
contentType={"early_access"}
211224
size="sm"
@@ -232,16 +245,6 @@ const WorkspaceParametersPageExperimental: FC = () => {
232245
</Tooltip>
233246
</TooltipProvider>
234247
</span>
235-
{experimentalFormContext && (
236-
<Button
237-
size="sm"
238-
variant="outline"
239-
onClick={experimentalFormContext.toggleOptedOut}
240-
>
241-
<Undo2 />
242-
Use the classic workspace parameters
243-
</Button>
244-
)}
245248
</header>
246249

247250
{Boolean(error) && <ErrorAlert error={error} />}

0 commit comments

Comments
 (0)