feat: external icon settings

aslilac · aslilac · commit b87a1953273b · 2024-01-05T17:22:19.000Z
diff --git a/examples/templates/aws-devcontainer/README.md b/examples/templates/aws-devcontainer/README.md
@@ -1,7 +1,7 @@
 ---
 display_name: AWS EC2 (Devcontainer)
 description: Provision AWS EC2 VMs with a devcontainer as Coder workspaces
-icon: ../../../site/static/icon/aws.png
+icon: ../../../site/static/icon/aws.svg
 maintainer_github: coder
 verified: true
 tags: [vm, linux, aws, persistent, devcontainer]
diff --git a/examples/templates/aws-linux/README.md b/examples/templates/aws-linux/README.md
@@ -1,7 +1,7 @@
 ---
 display_name: AWS EC2 (Linux)
 description: Provision AWS EC2 VMs as Coder workspaces
-icon: ../../../site/static/icon/aws.png
+icon: ../../../site/static/icon/aws.svg
 maintainer_github: coder
 verified: true
 tags: [vm, linux, aws, persistent-vm]
diff --git a/examples/templates/aws-windows/README.md b/examples/templates/aws-windows/README.md
@@ -1,7 +1,7 @@
 ---
 display_name: AWS EC2 (Windows)
 description: Provision AWS EC2 VMs as Coder workspaces
-icon: ../../../site/static/icon/aws.png
+icon: ../../../site/static/icon/aws.svg
 maintainer_github: coder
 verified: true
 tags: [vm, windows, aws]
diff --git a/site/src/AppRouter.tsx b/site/src/AppRouter.tsx
@@ -21,8 +21,6 @@ import WorkspacesPage from "./pages/WorkspacesPage/WorkspacesPage";
 import UserSettingsLayout from "./pages/UserSettingsPage/Layout";
 import { TemplateSettingsLayout } from "./pages/TemplateSettingsPage/TemplateSettingsLayout";
 import { WorkspaceSettingsLayout } from "./pages/WorkspaceSettingsPage/WorkspaceSettingsLayout";
-import { ThemeOverride } from "contexts/ThemeProvider";
-import themes from "theme";
 
 // Lazy load pages
 // - Pages that are secondary, not in the main navigation or not usually accessed
@@ -414,11 +412,7 @@ export const AppRouter: FC = () => {
             />
             <Route
               path="/:username/:workspace/terminal"
-              element={
-                <ThemeOverride theme={themes.dark}>
-                  <TerminalPage />
-                </ThemeOverride>
-              }
+              element={<TerminalPage />}
             />
             <Route path="/cli-auth" element={<CliAuthenticationPage />} />
             <Route path="/icons" element={<IconsPage />} />
diff --git a/site/src/__mocks__/react-markdown.tsx b/site/src/__mocks__/react-markdown.tsx
@@ -1,6 +1,6 @@
 import { FC, PropsWithChildren } from "react";
 
-const ReactMarkdown: FC<PropsWithChildren<unknown>> = ({ children }) => {
+const ReactMarkdown: FC<PropsWithChildren> = ({ children }) => {
   return <div data-testid="markdown">{children}</div>;
 };
 
diff --git a/site/src/components/Avatar/Avatar.tsx b/site/src/components/Avatar/Avatar.tsx
@@ -86,7 +86,11 @@ export const AvatarIcon: FC<AvatarIconProps> = ({ src, alt }) => {
       <img
         src={src}
         alt=""
-        css={{ maxWidth: "50%" }}
+        css={{
+          maxWidth: "50%",
+          // filter: "grayscale(100%) contrast(0%)",
+          filter: "grayscale(100%) contrast(0%) brightness(2)",
+        }}
         aria-labelledby={avatarId}
       />
       <div id={avatarId} css={{ ...visuallyHidden }}>
diff --git a/site/src/components/RichParameterInput/RichParameterInput.stories.tsx b/site/src/components/RichParameterInput/RichParameterInput.stories.tsx
@@ -96,7 +96,7 @@ export const Options: Story = {
           name: "Third option",
           value: "third_option",
           description: "",
-          icon: "/icon/aws.png",
+          icon: "/icon/aws.svg",
         },
       ],
     }),
@@ -138,7 +138,7 @@ Very big.
 
 > Wow, that description is straight up large. –Some guy, probably
 `,
-          icon: "/icon/aws.png",
+          icon: "/icon/aws.svg",
         },
       ],
     }),
diff --git a/site/src/components/Welcome/Welcome.tsx b/site/src/components/Welcome/Welcome.tsx
@@ -1,52 +1,48 @@
 import { type FC, type PropsWithChildren } from "react";
-import { useTheme } from "@emotion/react";
+import { type Interpolation, type Theme, useTheme } from "@emotion/react";
 import { CoderIcon } from "../Icons/CoderIcon";
 
-const Language = {
-  defaultMessage: (
-    <>
-      Welcome to <strong>Coder</strong>
-    </>
-  ),
-};
-
-export const Welcome: FC<
-  PropsWithChildren<{ message?: JSX.Element | string }>
-> = ({ message = Language.defaultMessage }) => {
+export const Welcome: FC<PropsWithChildren> = ({ children }) => {
   const theme = useTheme();
 
   return (
     <div>
-      <div
-        css={{
-          display: "flex",
-          justifyContent: "center",
-        }}
-      >
+      <div css={styles.iconContainer}>
         <CoderIcon
           css={{
             color: theme.palette.text.primary,
             fontSize: 64,
           }}
         />
       </div>
-      <h1
-        css={{
-          textAlign: "center",
-          fontSize: 32,
-          fontWeight: 400,
-          margin: 0,
-          marginTop: 16,
-          marginBottom: 32,
-          lineHeight: 1.25,
-
-          "& strong": {
-            fontWeight: 600,
-          },
-        }}
-      >
-        {message}
+      <h1 css={styles.header}>
+        {children ?? (
+          <>
+            Welcome to <strong>Coder</strong>
+          </>
+        )}
       </h1>
     </div>
   );
 };
+
+const styles = {
+  iconContainer: {
+    display: "flex",
+    justifyContent: "center",
+  },
+
+  header: {
+    textAlign: "center",
+    fontSize: 32,
+    fontWeight: 400,
+    margin: 0,
+    marginTop: 16,
+    marginBottom: 32,
+    lineHeight: 1.25,
+
+    "& strong": {
+      fontWeight: 600,
+    },
+  },
+} satisfies Record<string, Interpolation<Theme>>;
diff --git a/site/src/pages/CliAuthPage/CliAuthPageView.tsx b/site/src/pages/CliAuthPage/CliAuthPageView.tsx
@@ -20,7 +20,7 @@ export const CliAuthPageView: FC<CliAuthPageViewProps> = ({ sessionToken }) => {
 
   return (
     <SignInLayout>
-      <Welcome message="Session token" />
+      <Welcome>Session token</Welcome>
 
       <p
         css={{
diff --git a/site/src/pages/ExternalAuthPage/ExternalAuthPage.tsx b/site/src/pages/ExternalAuthPage/ExternalAuthPage.tsx
@@ -69,7 +69,7 @@ const ExternalAuthPage: FC = () => {
       // show an error there?
       return (
         <SignInLayout>
-          <Welcome message="Failed to validate oauth access token" />
+          <Welcome>Failed to validate oauth access token</Welcome>
           <p css={{ textAlign: "center" }}>
             Attempted to validate the user&apos;s oauth access token from the
             authentication flow. This situation may occur as a result of an
diff --git a/site/src/pages/ExternalAuthPage/ExternalAuthPageView.tsx b/site/src/pages/ExternalAuthPage/ExternalAuthPageView.tsx
@@ -33,7 +33,7 @@ const ExternalAuthPageView: FC<ExternalAuthPageViewProps> = ({
   if (!externalAuth.authenticated) {
     return (
       <SignInLayout>
-        <Welcome message={`Authenticate with ${externalAuth.display_name}`} />
+        <Welcome>Authenticate with {externalAuth.display_name}</Welcome>
 
         {externalAuth.device && (
           <GitDeviceAuth
@@ -63,9 +63,7 @@ const ExternalAuthPageView: FC<ExternalAuthPageViewProps> = ({
 
   return (
     <SignInLayout>
-      <Welcome
-        message={`You've authenticated with ${externalAuth.display_name}!`}
-      />
+      <Welcome>You've authenticated with {externalAuth.display_name}!</Welcome>
       <p css={styles.text}>
         {externalAuth.user?.login && `Hey @${externalAuth.user?.login}! 👋 `}
         {(!externalAuth.app_installable ||
diff --git a/site/src/pages/IconsPage/IconsPage.stories.tsx b/site/src/pages/IconsPage/IconsPage.stories.tsx
@@ -0,0 +1,15 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { IconsPage } from "./IconsPage";
+
+const meta: Meta<typeof IconsPage> = {
+  title: "pages/IconsPage",
+  component: IconsPage,
+  args: {},
+};
+
+export default meta;
+type Story = StoryObj<typeof IconsPage>;
+
+const Example: Story = {};
+
+export { Example as IconsPage };
diff --git a/site/src/pages/IconsPage/IconsPage.tsx b/site/src/pages/IconsPage/IconsPage.tsx
@@ -19,6 +19,10 @@ import {
 } from "components/PageHeader/PageHeader";
 import { Stack } from "components/Stack/Stack";
 import icons from "theme/icons.json";
+import {
+  defaultModeForBuiltinIcons,
+  parseModeParameters,
+} from "theme/externalImages";
 import { pageTitle } from "utils/page";
 
 const iconsWithoutSuffix = icons.map((icon) => icon.split(".")[0]);
@@ -163,13 +167,19 @@ export const IconsPage: FC = () => {
                 <img
                   alt={icon.url}
                   src={icon.url}
-                  css={{
-                    width: 60,
-                    height: 60,
-                    objectFit: "contain",
-                    pointerEvents: "none",
-                    padding: 12,
-                  }}
+                  css={[
+                    {
+                      width: 60,
+                      height: 60,
+                      objectFit: "contain",
+                      pointerEvents: "none",
+                      padding: 12,
+                    },
+                    parseModeParameters(
+                      theme.externalImages,
+                      defaultModeForBuiltinIcons.get(icon.url) ?? "",
+                    ),
+                  ]}
                 />
                 <figcaption
                   css={{
diff --git a/site/src/pages/TerminalPage/TerminalPage.tsx b/site/src/pages/TerminalPage/TerminalPage.tsx
@@ -33,6 +33,8 @@ import {
   PopoverContent,
   PopoverTrigger,
 } from "components/Popover/Popover";
+import { ThemeOverride } from "contexts/ThemeProvider";
+import themes from "theme";
 
 export const Language = {
   workspaceErrorMessagePrefix: "Unable to fetch workspace: ",
@@ -293,7 +295,7 @@ const TerminalPage: FC = () => {
   ]);
 
   return (
-    <>
+    <ThemeOverride theme={themes.dark}>
       <Helmet>
         <title>
           {workspace.data
@@ -314,7 +316,7 @@ const TerminalPage: FC = () => {
           <BottomBar proxy={selectedProxy} latency={latency.latencyMS} />
         )}
       </div>
-    </>
+    </ThemeOverride>
   );
 };
 
diff --git a/site/src/testHelpers/entities.ts b/site/src/testHelpers/entities.ts
@@ -2246,7 +2246,7 @@ export const MockTemplateExample: TypesGen.TemplateExample = {
   description: "Get started with Linux development on AWS ECS.",
   markdown:
     "\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",
-  icon: "/icon/aws.png",
+  icon: "/icon/aws.svg",
   tags: ["aws", "cloud"],
 };
 
@@ -2257,7 +2257,7 @@ export const MockTemplateExample2: TypesGen.TemplateExample = {
   description: "Get started with Linux development on AWS EC2.",
   markdown:
     '\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',
-  icon: "/icon/aws.png",
+  icon: "/icon/aws.svg",
   tags: ["aws", "cloud"],
 };
 
diff --git a/site/src/theme/dark/index.ts b/site/src/theme/dark/index.ts
@@ -1,9 +1,11 @@
 import experimental from "./experimental";
 import monaco from "./monaco";
 import muiTheme from "./mui";
+import { forDarkThemes } from "../externalImages";
 
 export default {
   ...muiTheme,
   experimental,
   monaco,
+  externalImages: forDarkThemes,
 };
diff --git a/site/src/theme/darkBlue/index.ts b/site/src/theme/darkBlue/index.ts
@@ -1,9 +1,11 @@
 import experimental from "./experimental";
 import monaco from "./monaco";
 import muiTheme from "./mui";
+import { forDarkThemes } from "../externalImages";
 
 export default {
   ...muiTheme,
   experimental,
   monaco,
+  externalImages: forDarkThemes,
 };
diff --git a/site/src/theme/externalImages.ts b/site/src/theme/externalImages.ts
diff --git a/site/src/theme/icons.json b/site/src/theme/icons.json
diff --git a/site/src/theme/index.ts b/site/src/theme/index.ts
diff --git a/site/src/theme/light/index.ts b/site/src/theme/light/index.ts
diff --git a/site/static/icon/aws-monochrome.svg b/site/static/icon/aws-monochrome.svg
diff --git a/site/static/icon/coder.svg b/site/static/icon/coder.svg
diff --git a/site/static/icon/debian.svg b/site/static/icon/debian.svg
diff --git a/site/static/icon/nodejs.svg b/site/static/icon/nodejs.svg
