refactor: clean up Welcome component (#11526)

aslilac · web-flow · commit 8a48485014eb · 2024-01-09T14:03:33.000-07:00
diff --git a/site/src/components/Welcome/Welcome.stories.tsx 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 };
diff --git 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
@@ -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,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
@@ -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,10 @@ const ExternalAuthPageView: FC<ExternalAuthPageViewProps> = ({
 
   return (
     <SignInLayout>
-      <Welcome
-        message={`You've authenticated with ${externalAuth.display_name}!`}
-      />
+      <Welcome>
+        You&apos;ve authenticated with {externalAuth.display_name}!
+      </Welcome>
+
       <p css={styles.text}>
         {externalAuth.user?.login && `Hey @${externalAuth.user?.login}! 👋 `}
         {(!externalAuth.app_installable ||
