Skip to content

Commit 058991f

Browse files
aslilacaslilac
committed
bunch of polish
1 parent c22a879 commit 058991f

File tree

14 files changed

+97
-106
lines changed

14 files changed

+97
-106
lines changed

‎site/src/components/Badges/Badges.tsx

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -131,11 +131,11 @@ export const DeprecatedBadge: FC = () => {
131131
<span
132132
css={[
133133
styles.badge,
134-
{
135-
border: `1px solid ${colors.orange[600]}`,
136-
backgroundColor: colors.orange[950],
137-
color: colors.orange[50],
138-
},
134+
(theme) => ({
135+
border: `1px solid ${theme.experimental.roles.danger.outline}`,
136+
backgroundColor: theme.experimental.roles.danger.background,
137+
color: theme.experimental.roles.danger.text,
138+
}),
139139
]}
140140
>
141141
Deprecated

‎site/src/components/Dashboard/DeploymentBanner/DeploymentBannerView.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -378,7 +378,7 @@ const HealthIssue: FC<PropsWithChildren> = ({ children }) => {
378378
<Stack direction="row" spacing={1} alignItems="center">
379379
<ErrorIcon
380380
css={{ width: 16, height: 16 }}
381-
htmlColor={theme.colors.red[10]}
381+
htmlColor={theme.experimental.roles.error.outline}
382382
/>
383383
{children}
384384
</Stack>

‎site/src/components/Dashboard/LicenseBanner/LicenseBannerView.stories.tsx

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,10 @@
11
import type { Meta, StoryObj } from "@storybook/react";
2+
import { chromatic } from "testHelpers/chromatic";
23
import { LicenseBannerView } from "./LicenseBannerView";
34

45
const meta: Meta<typeof LicenseBannerView> = {
56
title: "components/LicenseBannerView",
7+
parameters: { chromatic },
68
component: LicenseBannerView,
79
};
810

‎site/src/components/Dashboard/LicenseBanner/LicenseBannerView.tsx

Lines changed: 13 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -47,19 +47,23 @@ export const LicenseBannerView: FC<LicenseBannerViewProps> = ({
4747
display: flex;
4848
align-items: center;
4949
padding: 12px;
50-
background-color: ${type === "error"
51-
? theme.colors.red[10]
52-
: theme.colors.orange[10]};
50+
background-color: ${theme.experimental.roles[type].background};
5351
`;
5452

53+
const textColor = theme.experimental.roles[type].text;
54+
5555
if (messages.length === 1) {
5656
return (
5757
<div css={containerStyles}>
5858
<Pill text={Language.licenseIssue} type={type} />
5959
<div css={styles.leftContent}>
6060
<span>{messages[0]}</span>
6161
&nbsp;
62-
<Link color="white" fontWeight="medium" href="mailto:sales@coder.com">
62+
<Link
63+
color={textColor}
64+
fontWeight="medium"
65+
href="mailto:sales@coder.com"
66+
>
6367
{Language.upgrade}
6468
</Link>
6569
</div>
@@ -74,7 +78,11 @@ export const LicenseBannerView: FC<LicenseBannerViewProps> = ({
7478
<div>
7579
{Language.exceeded}
7680
&nbsp;
77-
<Link color="white" fontWeight="medium" href="mailto:sales@coder.com">
81+
<Link
82+
color={textColor}
83+
fontWeight="medium"
84+
href="mailto:sales@coder.com"
85+
>
7886
{Language.upgrade}
7987
</Link>
8088
</div>

‎site/src/components/Dashboard/Navbar/UserDropdown/UserDropdown.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -45,7 +45,7 @@ export const UserDropdown: FC<UserDropdownProps> = ({
4545
/>
4646
</Badge>
4747
<DropdownArrow
48-
color={theme.colors.gray[6]}
48+
color={theme.experimental.l2.fill}
4949
close={popover.isOpen}
5050
/>
5151
</div>

‎site/src/components/Dashboard/ServiceBanner/ServiceBannerView.tsx

Lines changed: 27 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
1+
import { css, type Interpolation, type Theme } from "@emotion/react";
2+
import { type FC } from "react";
3+
import { InlineMarkdown } from "components/Markdown/Markdown";
14
import { Pill } from "components/Pill/Pill";
2-
import ReactMarkdown from "react-markdown";
3-
import { css, useTheme } from "@emotion/react";
45
import { readableForegroundColor } from "utils/colors";
56

67
export interface ServiceBannerViewProps {
@@ -9,58 +10,39 @@ export interface ServiceBannerViewProps {
910
isPreview: boolean;
1011
}
1112

12-
export const ServiceBannerView: React.FC<ServiceBannerViewProps> = ({
13+
export const ServiceBannerView: FC<ServiceBannerViewProps> = ({
1314
message,
1415
backgroundColor,
1516
isPreview,
1617
}) => {
17-
const theme = useTheme();
18-
// We don't want anything funky like an image or a heading in the service
19-
// banner.
20-
const markdownElementsAllowed = [
21-
"text",
22-
"a",
23-
"pre",
24-
"ul",
25-
"strong",
26-
"emphasis",
27-
"italic",
28-
"link",
29-
"em",
30-
];
3118
return (
32-
<div
33-
css={css`
34-
padding: 12px;
35-
background-color: ${backgroundColor ?? theme.palette.warning.main};
36-
display: flex;
37-
align-items: center;
38-
39-
&.error {
40-
background-color: ${theme.colors.red[12]};
41-
}
42-
`}
43-
>
19+
<div css={[styles.banner, { backgroundColor }]}>
4420
{isPreview && <Pill text="Preview" type="info" />}
4521
<div
46-
css={css`
47-
margin-right: auto;
48-
margin-left: auto;
49-
font-weight: 400;
50-
color: ${readableForegroundColor(backgroundColor)};
51-
52-
& a {
53-
color: inherit;
54-
}
55-
`}
22+
css={[
23+
styles.wrapper,
24+
{ color: readableForegroundColor(backgroundColor) },
25+
]}
5626
>
57-
<ReactMarkdown
58-
allowedElements={markdownElementsAllowed}
59-
unwrapDisallowed
60-
>
61-
{message}
62-
</ReactMarkdown>
27+
<InlineMarkdown>{message}</InlineMarkdown>
6328
</div>
6429
</div>
6530
);
6631
};
32+
33+
const styles = {
34+
banner: css`
35+
padding: 12px;
36+
display: flex;
37+
align-items: center;
38+
`,
39+
wrapper: css`
40+
margin-right: auto;
41+
margin-left: auto;
42+
font-weight: 400;
43+
44+
& a {
45+
color: inherit;
46+
}
47+
`,
48+
} satisfies Record<string, Interpolation<Theme>>;

‎site/src/components/Markdown/Markdown.tsx

Lines changed: 19 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -121,12 +121,19 @@ export const Markdown: FC<MarkdownProps> = (props) => {
121121
);
122122
};
123123

124-
interface MarkdownInlineProps {
124+
interface InlineMarkdownProps {
125125
/**
126126
* The Markdown text to parse and render
127127
*/
128128
children: string;
129129

130+
/**
131+
* Additional element types to allow.
132+
* Allows italic, bold, links, and inline code snippets by default.
133+
* eg. `["ol", "ul", "li"]` to support lists.
134+
*/
135+
allowedElements?: readonly string[];
136+
130137
className?: string;
131138

132139
/**
@@ -138,13 +145,21 @@ interface MarkdownInlineProps {
138145
/**
139146
* Supports a strict subset of Markdown that behaves well as inline/confined content.
140147
*/
141-
export const InlineMarkdown: FC<MarkdownInlineProps> = (props) => {
142-
const { children, className, components = {} } = props;
148+
export const InlineMarkdown: FC<InlineMarkdownProps> = (props) => {
149+
const { children, allowedElements = [], className, components = {} } = props;
143150

144151
return (
145152
<ReactMarkdown
146153
className={className}
147-
allowedElements={["p", "em", "strong", "a", "pre", "code"]}
154+
allowedElements={[
155+
"p",
156+
"em",
157+
"strong",
158+
"a",
159+
"pre",
160+
"code",
161+
...allowedElements,
162+
]}
148163
unwrapDisallowed
149164
components={{
150165
p: ({ children }) => <>{children}</>,

‎site/src/pages/DeploySettingsPage/AppearanceSettingsPage/AppearanceSettingsPageView.tsx

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,7 @@ import {
1919
import { Fieldset } from "components/DeploySettingsLayout/Fieldset";
2020
import { Stack } from "components/Stack/Stack";
2121
import { getFormHelpers } from "utils/formUtils";
22+
import colors from "theme/tailwind";
2223

2324
export type AppearanceSettingsPageViewProps = {
2425
appearance: UpdateAppearanceConfig;
@@ -29,11 +30,12 @@ export type AppearanceSettingsPageViewProps = {
2930
) => void;
3031
};
3132

33+
const fallbackBgColor = colors.neutral[500];
34+
3235
export const AppearanceSettingsPageView: FC<
3336
AppearanceSettingsPageViewProps
3437
> = ({ appearance, isEntitled, onSaveAppearance }) => {
3538
const theme = useTheme();
36-
const fallbackBgColor = theme.colors.blue[7];
3739

3840
const applicationNameForm = useFormik<{
3941
application_name: string;

‎site/src/pages/TemplatePage/TemplateVersionsPage/VersionRow.tsx

Lines changed: 0 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -39,7 +39,6 @@ export const VersionRow: FC<VersionRowProps> = ({
3939
<TimelineEntry
4040
data-testid={`version-${version.id}`}
4141
{...clickableProps}
42-
css={[styles.row]}
4342
className={clickableProps.className}
4443
>
4544
<TableCell css={styles.versionCell}>
@@ -127,16 +126,6 @@ export const VersionRow: FC<VersionRowProps> = ({
127126
};
128127

129128
const styles = {
130-
row: (theme) => ({
131-
"&:hover $promoteButton": {
132-
color: theme.palette.text.primary,
133-
borderColor: theme.colors.gray[11],
134-
"&:hover": {
135-
borderColor: theme.palette.text.primary,
136-
},
137-
},
138-
}),
139-
140129
promoteButton: (theme) => ({
141130
color: theme.palette.text.secondary,
142131
transition: "none",

‎site/src/pages/TemplatesPage/TemplatesPageView.stories.tsx

Lines changed: 3 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,16 @@
1+
import type { Meta, StoryObj } from "@storybook/react";
2+
import { chromaticWithTablet } from "testHelpers/chromatic";
13
import {
24
mockApiError,
35
MockTemplate,
46
MockTemplateExample,
57
MockTemplateExample2,
68
} from "testHelpers/entities";
79
import { TemplatesPageView } from "./TemplatesPageView";
8-
import type { Meta, StoryObj } from "@storybook/react";
910

1011
const meta: Meta<typeof TemplatesPageView> = {
1112
title: "pages/TemplatesPage",
13+
parameters: { chromatic: chromaticWithTablet },
1214
component: TemplatesPageView,
1315
};
1416

@@ -65,15 +67,6 @@ export const WithTemplates: Story = {
6567
},
6668
};
6769

68-
export const WithTemplatesSmallViewPort: Story = {
69-
args: {
70-
...WithTemplates.args,
71-
},
72-
parameters: {
73-
chromatic: { viewports: [600] },
74-
},
75-
};
76-
7770
export const EmptyCanCreate: Story = {
7871
args: {
7972
canCreateTemplates: true,

‎site/src/pages/TemplatesPage/TemplatesPageView.tsx

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -42,7 +42,7 @@ import { ErrorAlert } from "components/Alert/ErrorAlert";
4242
import { docs } from "utils/docs";
4343
import Skeleton from "@mui/material/Skeleton";
4444
import { AvatarDataSkeleton } from "components/AvatarData/AvatarDataSkeleton";
45-
import { Pill } from "components/Pill/Pill";
45+
import { DeprecatedBadge } from "components/Badges/Badges";
4646

4747
export const Language = {
4848
developerCount: (activeCount: number): string => {
@@ -122,7 +122,7 @@ const TemplateRow: FC<TemplateRowProps> = ({ template }) => {
122122

123123
<TableCell css={styles.actionCell}>
124124
{template.deprecated ? (
125-
<Pill text="Deprecated" type="warning" />
125+
<DeprecatedBadge />
126126
) : (
127127
<Button
128128
size="small"
@@ -273,15 +273,15 @@ const styles = {
273273
}),
274274
tableRow: (theme) => ({
275275
"&:hover .actionButton": {
276-
color: theme.palette.text.primary,
277-
borderColor: theme.colors.gray[11],
278-
"&:hover": {
279-
borderColor: theme.palette.text.primary,
280-
},
276+
color: theme.experimental.l2.hover.text,
277+
borderColor: theme.experimental.l2.hover.outline,
281278
},
282279
}),
283280
actionButton: (theme) => ({
284-
color: theme.palette.text.secondary,
285281
transition: "none",
282+
color: theme.palette.text.secondary,
283+
"&:hover": {
284+
borderColor: theme.palette.text.primary,
285+
},
286286
}),
287287
} satisfies Record<string, Interpolation<Theme>>;

‎site/src/theme/dark/experimental.ts

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -12,17 +12,17 @@ export default {
1212
l2: {
1313
background: colors.zinc[900],
1414
outline: colors.zinc[700],
15-
fill: "#f00",
16-
text: colors.white,
15+
fill: colors.zinc[500],
16+
text: colors.zinc[50],
1717
disabled: {
1818
background: "#f00",
1919
outline: "#f00",
20-
fill: "#f00",
20+
fill: colors.zinc[500],
2121
text: colors.zinc[200],
2222
},
2323
hover: {
2424
background: colors.zinc[800],
25-
outline: "#f00",
25+
outline: colors.zinc[600],
2626
fill: "#f00",
2727
text: colors.white,
2828
},
@@ -68,7 +68,7 @@ export default {
6868
},
6969
error: {
7070
background: colors.red[950],
71-
outline: colors.red[500],
71+
outline: colors.red[600],
7272
fill: colors.red[400],
7373
text: colors.red[50],
7474
},

‎site/src/theme/darkBlue/experimental.ts

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -12,17 +12,17 @@ export default {
1212
l2: {
1313
background: colors.gray[900],
1414
outline: colors.gray[700],
15-
fill: "#f00",
16-
text: colors.white,
15+
fill: colors.gray[500],
16+
text: colors.gray[50],
1717
disabled: {
1818
background: "#f00",
1919
outline: "#f00",
20-
fill: "#f00",
20+
fill: colors.gray[500],
2121
text: colors.gray[200],
2222
},
2323
hover: {
2424
background: "#f00",
25-
outline: "#f00",
25+
outline: colors.gray[600],
2626
fill: "#f00",
2727
text: colors.white,
2828
},

0 commit comments

Comments
 (0)