Skip to content

Commit b87a195

Browse files
aslilacaslilac
committed
feat: external icon settings
1 parent 4f433e7 commit b87a195

File tree

25 files changed

+366
-80
lines changed

25 files changed

+366
-80
lines changed

‎examples/templates/aws-devcontainer/README.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
---
22
display_name: AWS EC2 (Devcontainer)
33
description: Provision AWS EC2 VMs with a devcontainer as Coder workspaces
4-
icon: ../../../site/static/icon/aws.png
4+
icon: ../../../site/static/icon/aws.svg
55
maintainer_github: coder
66
verified: true
77
tags: [vm, linux, aws, persistent, devcontainer]

‎examples/templates/aws-linux/README.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
---
22
display_name: AWS EC2 (Linux)
33
description: Provision AWS EC2 VMs as Coder workspaces
4-
icon: ../../../site/static/icon/aws.png
4+
icon: ../../../site/static/icon/aws.svg
55
maintainer_github: coder
66
verified: true
77
tags: [vm, linux, aws, persistent-vm]

‎examples/templates/aws-windows/README.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
---
22
display_name: AWS EC2 (Windows)
33
description: Provision AWS EC2 VMs as Coder workspaces
4-
icon: ../../../site/static/icon/aws.png
4+
icon: ../../../site/static/icon/aws.svg
55
maintainer_github: coder
66
verified: true
77
tags: [vm, windows, aws]

‎site/src/AppRouter.tsx

+1-7
Original file line numberDiff line numberDiff line change
@@ -21,8 +21,6 @@ import WorkspacesPage from "./pages/WorkspacesPage/WorkspacesPage";
2121
import UserSettingsLayout from "./pages/UserSettingsPage/Layout";
2222
import { TemplateSettingsLayout } from "./pages/TemplateSettingsPage/TemplateSettingsLayout";
2323
import { WorkspaceSettingsLayout } from "./pages/WorkspaceSettingsPage/WorkspaceSettingsLayout";
24-
import { ThemeOverride } from "contexts/ThemeProvider";
25-
import themes from "theme";
2624

2725
// Lazy load pages
2826
// - Pages that are secondary, not in the main navigation or not usually accessed
@@ -414,11 +412,7 @@ export const AppRouter: FC = () => {
414412
/>
415413
<Route
416414
path="/:username/:workspace/terminal"
417-
element={
418-
<ThemeOverride theme={themes.dark}>
419-
<TerminalPage />
420-
</ThemeOverride>
421-
}
415+
element={<TerminalPage />}
422416
/>
423417
<Route path="/cli-auth" element={<CliAuthenticationPage />} />
424418
<Route path="/icons" element={<IconsPage />} />

‎site/src/__mocks__/react-markdown.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { FC, PropsWithChildren } from "react";
22

3-
const ReactMarkdown: FC<PropsWithChildren<unknown>> = ({ children }) => {
3+
const ReactMarkdown: FC<PropsWithChildren> = ({ children }) => {
44
return <div data-testid="markdown">{children}</div>;
55
};
66

‎site/src/components/Avatar/Avatar.tsx

+5-1
Original file line numberDiff line numberDiff line change
@@ -86,7 +86,11 @@ export const AvatarIcon: FC<AvatarIconProps> = ({ src, alt }) => {
8686
<img
8787
src={src}
8888
alt=""
89-
css={{ maxWidth: "50%" }}
89+
css={{
90+
maxWidth: "50%",
91+
// filter: "grayscale(100%) contrast(0%)",
92+
filter: "grayscale(100%) contrast(0%) brightness(2)",
93+
}}
9094
aria-labelledby={avatarId}
9195
/>
9296
<div id={avatarId} css={{ ...visuallyHidden }}>

‎site/src/components/RichParameterInput/RichParameterInput.stories.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -96,7 +96,7 @@ export const Options: Story = {
9696
name: "Third option",
9797
value: "third_option",
9898
description: "",
99-
icon: "/icon/aws.png",
99+
icon: "/icon/aws.svg",
100100
},
101101
],
102102
}),
@@ -138,7 +138,7 @@ Very big.
138138
139139
> Wow, that description is straight up large. –Some guy, probably
140140
`,
141-
icon: "/icon/aws.png",
141+
icon: "/icon/aws.svg",
142142
},
143143
],
144144
}),

‎site/src/components/Welcome/Welcome.tsx

+30-34
Original file line numberDiff line numberDiff line change
@@ -1,52 +1,48 @@
11
import { type FC, type PropsWithChildren } from "react";
2-
import { useTheme } from "@emotion/react";
2+
import { type Interpolation, type Theme, useTheme } from "@emotion/react";
33
import { CoderIcon } from "../Icons/CoderIcon";
44

5-
const Language = {
6-
defaultMessage: (
7-
<>
8-
Welcome to <strong>Coder</strong>
9-
</>
10-
),
11-
};
12-
13-
export const Welcome: FC<
14-
PropsWithChildren<{ message?: JSX.Element | string }>
15-
> = ({ message = Language.defaultMessage }) => {
5+
export const Welcome: FC<PropsWithChildren> = ({ children }) => {
166
const theme = useTheme();
177

188
return (
199
<div>
20-
<div
21-
css={{
22-
display: "flex",
23-
justifyContent: "center",
24-
}}
25-
>
10+
<div css={styles.iconContainer}>
2611
<CoderIcon
2712
css={{
2813
color: theme.palette.text.primary,
2914
fontSize: 64,
3015
}}
3116
/>
3217
</div>
33-
<h1
34-
css={{
35-
textAlign: "center",
36-
fontSize: 32,
37-
fontWeight: 400,
38-
margin: 0,
39-
marginTop: 16,
40-
marginBottom: 32,
41-
lineHeight: 1.25,
42-
43-
"& strong": {
44-
fontWeight: 600,
45-
},
46-
}}
47-
>
48-
{message}
18+
<h1 css={styles.header}>
19+
{children ?? (
20+
<>
21+
Welcome to <strong>Coder</strong>
22+
</>
23+
)}
4924
</h1>
5025
</div>
5126
);
5227
};
28+
29+
const styles = {
30+
iconContainer: {
31+
display: "flex",
32+
justifyContent: "center",
33+
},
34+
35+
header: {
36+
textAlign: "center",
37+
fontSize: 32,
38+
fontWeight: 400,
39+
margin: 0,
40+
marginTop: 16,
41+
marginBottom: 32,
42+
lineHeight: 1.25,
43+
44+
"& strong": {
45+
fontWeight: 600,
46+
},
47+
},
48+
} satisfies Record<string, Interpolation<Theme>>;

‎site/src/pages/CliAuthPage/CliAuthPageView.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@ export const CliAuthPageView: FC<CliAuthPageViewProps> = ({ sessionToken }) => {
2020

2121
return (
2222
<SignInLayout>
23-
<Welcome message="Session token" />
23+
<Welcome>Session token</Welcome>
2424

2525
<p
2626
css={{

‎site/src/pages/ExternalAuthPage/ExternalAuthPage.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -69,7 +69,7 @@ const ExternalAuthPage: FC = () => {
6969
// show an error there?
7070
return (
7171
<SignInLayout>
72-
<Welcome message="Failed to validate oauth access token" />
72+
<Welcome>Failed to validate oauth access token</Welcome>
7373
<p css={{ textAlign: "center" }}>
7474
Attempted to validate the user&apos;s oauth access token from the
7575
authentication flow. This situation may occur as a result of an

‎site/src/pages/ExternalAuthPage/ExternalAuthPageView.tsx

+2-4
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,7 @@ const ExternalAuthPageView: FC<ExternalAuthPageViewProps> = ({
3333
if (!externalAuth.authenticated) {
3434
return (
3535
<SignInLayout>
36-
<Welcome message={`Authenticate with ${externalAuth.display_name}`} />
36+
<Welcome>Authenticate with {externalAuth.display_name}</Welcome>
3737

3838
{externalAuth.device && (
3939
<GitDeviceAuth
@@ -63,9 +63,7 @@ const ExternalAuthPageView: FC<ExternalAuthPageViewProps> = ({
6363

6464
return (
6565
<SignInLayout>
66-
<Welcome
67-
message={`You've authenticated with ${externalAuth.display_name}!`}
68-
/>
66+
<Welcome>You've authenticated with {externalAuth.display_name}!</Welcome>
6967
<p css={styles.text}>
7068
{externalAuth.user?.login && `Hey @${externalAuth.user?.login}! 👋 `}
7169
{(!externalAuth.app_installable ||

‎site/src/pages/IconsPage/IconsPage.stories.tsx

+15
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
import type { Meta, StoryObj } from "@storybook/react";
2+
import { IconsPage } from "./IconsPage";
3+
4+
const meta: Meta<typeof IconsPage> = {
5+
title: "pages/IconsPage",
6+
component: IconsPage,
7+
args: {},
8+
};
9+
10+
export default meta;
11+
type Story = StoryObj<typeof IconsPage>;
12+
13+
const Example: Story = {};
14+
15+
export { Example as IconsPage };

‎site/src/pages/IconsPage/IconsPage.tsx

+17-7
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,10 @@ import {
1919
} from "components/PageHeader/PageHeader";
2020
import { Stack } from "components/Stack/Stack";
2121
import icons from "theme/icons.json";
22+
import {
23+
defaultModeForBuiltinIcons,
24+
parseModeParameters,
25+
} from "theme/externalImages";
2226
import { pageTitle } from "utils/page";
2327

2428
const iconsWithoutSuffix = icons.map((icon) => icon.split(".")[0]);
@@ -163,13 +167,19 @@ export const IconsPage: FC = () => {
163167
<img
164168
alt={icon.url}
165169
src={icon.url}
166-
css={{
167-
width: 60,
168-
height: 60,
169-
objectFit: "contain",
170-
pointerEvents: "none",
171-
padding: 12,
172-
}}
170+
css={[
171+
{
172+
width: 60,
173+
height: 60,
174+
objectFit: "contain",
175+
pointerEvents: "none",
176+
padding: 12,
177+
},
178+
parseModeParameters(
179+
theme.externalImages,
180+
defaultModeForBuiltinIcons.get(icon.url) ?? "",
181+
),
182+
]}
173183
/>
174184
<figcaption
175185
css={{

‎site/src/pages/TerminalPage/TerminalPage.tsx

+4-2
Original file line numberDiff line numberDiff line change
@@ -33,6 +33,8 @@ import {
3333
PopoverContent,
3434
PopoverTrigger,
3535
} from "components/Popover/Popover";
36+
import { ThemeOverride } from "contexts/ThemeProvider";
37+
import themes from "theme";
3638

3739
export const Language = {
3840
workspaceErrorMessagePrefix: "Unable to fetch workspace: ",
@@ -293,7 +295,7 @@ const TerminalPage: FC = () => {
293295
]);
294296

295297
return (
296-
<>
298+
<ThemeOverride theme={themes.dark}>
297299
<Helmet>
298300
<title>
299301
{workspace.data
@@ -314,7 +316,7 @@ const TerminalPage: FC = () => {
314316
<BottomBar proxy={selectedProxy} latency={latency.latencyMS} />
315317
)}
316318
</div>
317-
</>
319+
</ThemeOverride>
318320
);
319321
};
320322

‎site/src/testHelpers/entities.ts

+2-2
Original file line numberDiff line numberDiff line change
@@ -2246,7 +2246,7 @@ export const MockTemplateExample: TypesGen.TemplateExample = {
22462246
description: "Get started with Linux development on AWS ECS.",
22472247
markdown:
22482248
"\n# aws-ecs\n\nThis is a sample template for running a Coder workspace on ECS. It assumes there\nis a pre-existing ECS cluster with EC2-based compute to host the workspace.\n\n## Architecture\n\nThis workspace is built using the following AWS resources:\n\n- Task definition - the container definition, includes the image, command, volume(s)\n- ECS service - manages the task definition\n\n## code-server\n\n`code-server` is installed via the `startup_script` argument in the `coder_agent`\nresource block. The `coder_app` resource is defined to access `code-server` through\nthe dashboard UI over `localhost:13337`.\n",
2249-
icon: "/icon/aws.png",
2249+
icon: "/icon/aws.svg",
22502250
tags: ["aws", "cloud"],
22512251
};
22522252

@@ -2257,7 +2257,7 @@ export const MockTemplateExample2: TypesGen.TemplateExample = {
22572257
description: "Get started with Linux development on AWS EC2.",
22582258
markdown:
22592259
'\n# aws-linux\n\nTo get started, run `coder templates init`. When prompted, select this template.\nFollow the on-screen instructions to proceed.\n\n## Authentication\n\nThis template assumes that coderd is run in an environment that is authenticated\nwith AWS. For example, run `aws configure import` to import credentials on the\nsystem and user running coderd. For other ways to authenticate [consult the\nTerraform docs](https://registry.terraform.io/providers/hashicorp/aws/latest/docs#authentication-and-configuration).\n\n## Required permissions / policy\n\nThe following sample policy allows Coder to create EC2 instances and modify\ninstances provisioned by Coder:\n\n```json\n{\n "Version": "2012-10-17",\n "Statement": [\n {\n "Sid": "VisualEditor0",\n "Effect": "Allow",\n "Action": [\n "ec2:GetDefaultCreditSpecification",\n "ec2:DescribeIamInstanceProfileAssociations",\n "ec2:DescribeTags",\n "ec2:CreateTags",\n "ec2:RunInstances",\n "ec2:DescribeInstanceCreditSpecifications",\n "ec2:DescribeImages",\n "ec2:ModifyDefaultCreditSpecification",\n "ec2:DescribeVolumes"\n ],\n "Resource": "*"\n },\n {\n "Sid": "CoderResources",\n "Effect": "Allow",\n "Action": [\n "ec2:DescribeInstances",\n "ec2:DescribeInstanceAttribute",\n "ec2:UnmonitorInstances",\n "ec2:TerminateInstances",\n "ec2:StartInstances",\n "ec2:StopInstances",\n "ec2:DeleteTags",\n "ec2:MonitorInstances",\n "ec2:CreateTags",\n "ec2:RunInstances",\n "ec2:ModifyInstanceAttribute",\n "ec2:ModifyInstanceCreditSpecification"\n ],\n "Resource": "arn:aws:ec2:*:*:instance/*",\n "Condition": {\n "StringEquals": {\n "aws:ResourceTag/Coder_Provisioned": "true"\n }\n }\n }\n ]\n}\n```\n\n## code-server\n\n`code-server` is installed via the `startup_script` argument in the `coder_agent`\nresource block. The `coder_app` resource is defined to access `code-server` through\nthe dashboard UI over `localhost:13337`.\n',
2260-
icon: "/icon/aws.png",
2260+
icon: "/icon/aws.svg",
22612261
tags: ["aws", "cloud"],
22622262
};
22632263

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

+2
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,11 @@
11
import experimental from "./experimental";
22
import monaco from "./monaco";
33
import muiTheme from "./mui";
4+
import { forDarkThemes } from "../externalImages";
45

56
export default {
67
...muiTheme,
78
experimental,
89
monaco,
10+
externalImages: forDarkThemes,
911
};

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

+2
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,11 @@
11
import experimental from "./experimental";
22
import monaco from "./monaco";
33
import muiTheme from "./mui";
4+
import { forDarkThemes } from "../externalImages";
45

56
export default {
67
...muiTheme,
78
experimental,
89
monaco,
10+
externalImages: forDarkThemes,
911
};

0 commit comments

Comments
 (0)