From 905d911c1a52e646d1f840443a10f3014af58ebb Mon Sep 17 00:00:00 2001
From: McKayla Washburn <mckayla@hey.com>
Date: Tue, 9 Jan 2024 18:22:06 +0000
Subject: [PATCH 1/3] chore: refactor `Welcome` component

---
 site/src/components/Welcome/Welcome.tsx       | 66 +++++++++----------
 .../src/pages/CliAuthPage/CliAuthPageView.tsx |  2 +-
 .../ExternalAuthPage/ExternalAuthPage.tsx     |  3 +-
 .../ExternalAuthPage/ExternalAuthPageView.tsx |  7 +-
 4 files changed, 37 insertions(+), 41 deletions(-)

diff --git a/site/src/components/Welcome/Welcome.tsx b/site/src/components/Welcome/Welcome.tsx
index 9036717866efd..4863fa15c2c3c 100644
--- a/site/src/components/Welcome/Welcome.tsx
+++ b/site/src/components/Welcome/Welcome.tsx
@@ -1,5 +1,5 @@
+import { type Interpolation, type Theme } from "@emotion/react";
 import { type FC, type PropsWithChildren } from "react";
-import { useTheme } from "@emotion/react";
 import { CoderIcon } from "../Icons/CoderIcon";
 
 const Language = {
@@ -10,43 +10,39 @@ const Language = {
   ),
 };
 
-export const Welcome: FC<
-  PropsWithChildren<{ message?: JSX.Element | string }>
-> = ({ message = Language.defaultMessage }) => {
-  const theme = useTheme();
-
+export const Welcome: FC<PropsWithChildren> = ({ children }) => {
   return (
     <div>
-      <div
-        css={{
-          display: "flex",
-          justifyContent: "center",
-        }}
-      >
-        <CoderIcon
-          css={{
-            color: theme.palette.text.primary,
-            fontSize: 64,
-          }}
-        />
+      <div css={styles.container}>
+        <CoderIcon css={styles.icon} />
       </div>
-      <h1
-        css={{
-          textAlign: "center",
-          fontSize: 32,
-          fontWeight: 400,
-          margin: 0,
-          marginTop: 16,
-          marginBottom: 32,
-          lineHeight: 1.25,
-
-          "& strong": {
-            fontWeight: 600,
-          },
-        }}
-      >
-        {message}
-      </h1>
+      <h1 css={styles.header}>{children || Language.defaultMessage}</h1>
     </div>
   );
 };
+
+const styles = {
+  container: {
+    display: "flex",
+    justifyContent: "center",
+  },
+
+  icon: (theme) => ({
+    color: theme.palette.text.primary,
+    fontSize: 64,
+  }),
+
+  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
index 0c88a394b77ea..5fe488103737a 100644
--- 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
index 3b9c81a636d82..6b11bd6be1db2 100644
--- a/site/src/pages/ExternalAuthPage/ExternalAuthPage.tsx
+++ b/site/src/pages/ExternalAuthPage/ExternalAuthPage.tsx
@@ -69,7 +69,8 @@ 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
index 85195d6659de4..db5146cc9b952 100644
--- 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,8 @@ 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 ||

From 16448bf7da2176e964f554f3f4343d75391d311a Mon Sep 17 00:00:00 2001
From: McKayla Washburn <mckayla@hey.com>
Date: Tue, 9 Jan 2024 18:26:12 +0000
Subject: [PATCH 2/3] add a story

---
 site/src/components/Welcome/Welcome.stories.tsx | 14 ++++++++++++++
 1 file changed, 14 insertions(+)
 create mode 100644 site/src/components/Welcome/Welcome.stories.tsx

diff --git a/site/src/components/Welcome/Welcome.stories.tsx b/site/src/components/Welcome/Welcome.stories.tsx
new file mode 100644
index 0000000000000..f7f4e2d2bcd09
--- /dev/null
+++ b/site/src/components/Welcome/Welcome.stories.tsx
@@ -0,0 +1,14 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { Welcome } from "./Welcome";
+
+const meta: Meta<typeof Welcome> = {
+  title: "components/Welcome",
+  component: Welcome,
+};
+
+export default meta;
+type Story = StoryObj<typeof Welcome>;
+
+const Example: Story = {};
+
+export { Example as Welcome };

From 0b691a3c03e9b7005ebd11d242e1a222fd84ab3e Mon Sep 17 00:00:00 2001
From: McKayla Washburn <mckayla@hey.com>
Date: Tue, 9 Jan 2024 18:58:20 +0000
Subject: [PATCH 3/3] =?UTF-8?q?=F0=9F=A7=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 site/src/pages/ExternalAuthPage/ExternalAuthPageView.tsx | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/site/src/pages/ExternalAuthPage/ExternalAuthPageView.tsx b/site/src/pages/ExternalAuthPage/ExternalAuthPageView.tsx
index db5146cc9b952..893cf8fb69321 100644
--- a/site/src/pages/ExternalAuthPage/ExternalAuthPageView.tsx
+++ b/site/src/pages/ExternalAuthPage/ExternalAuthPageView.tsx
@@ -63,7 +63,9 @@ const ExternalAuthPageView: FC<ExternalAuthPageViewProps> = ({
 
   return (
     <SignInLayout>
-      <Welcome>You've authenticated with {externalAuth.display_name}!</Welcome>
+      <Welcome>
+        You&apos;ve authenticated with {externalAuth.display_name}!
+      </Welcome>
 
       <p css={styles.text}>
         {externalAuth.user?.login && `Hey @${externalAuth.user?.login}! 👋 `}